css/custom.scss

---
---

@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&display=swap');

$PTSans: 'PT Sans', sans-serif;
$PTSansCaption: 'PT Sans Caption', sans-serif;
$Ubuntu: 'Ubuntu', sans-serif;
/** Theme Defualt Color **/
$white: #ffffff;
$darkBule: #252d5a;
$darkBuleTwo: #005077;
$darkBlack: #505d68;
$mainlyBlue: #3c88b5;
$mainlyBlueTwo: #0379b6;
$black: #000000;
$pacificBlue: #008dd2;
$navyblack: #001B29;
$windsor: #3a3080;
$gainsboro: #d8d8d8;
/* Media Quires */
$screen-xs: 'only screen and (max-width : 767px)';
$screen-sm: 'only screen and (max-width : 991px)';
$screen-md: 'only screen and (max-width : 1199px)';
$screen-lg: 'only screen and (max-width : 1366px)';
$screen-tablet: 'only screen and (max-width : 1024px)';

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
    margin: 0;
    font-family: $PTSans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    &.scroll-hide{
        overflow: hidden;
    }
}

.container {
    max-width: 1200px;
    padding: 0 30px;
}
/* deafult css */
img{
    max-width: 100%;
    height: auto;
}
ul{
    list-style: none;
    padding:0;
    margin:0;
}
h1 {
    font-weight: 400;
    font-size: 55px;
    line-height: 79px;
    margin: 0 0 20px;
    @media #{$screen-sm} {
        font-size: 45px;
        line-height: 52px;
    }
    @media #{$screen-xs} {
        font-size: 31px;
        line-height: 40px;
    }
}
h3{
    font-size:38px;
    margin-bottom:0;
    @media #{$screen-sm} {
        font-size: 28px;
    }
}
h4 {
    font-weight: 400;
    font-size: 28px;
    line-height: 38px;
    @media #{$screen-xs} {
        font-size: 22px;
        line-height: 38px;
    }
}
p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    @media #{$screen-xs} {
        font-size: 15px;
        line-height: 24px;
    }
}
.subHeadingOne {
    font-weight: 400;
    font-size: 21px;
    line-height: 30px;
    margin: 0 0 20px;
    @media #{$screen-sm} {
        font-size: 18px;
        line-height: 26px;
    }
    @media #{$screen-xs} {
        font-size: 16px;
        line-height: 25px;
    }
}
.subHeadingTwo {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    @media #{$screen-sm} {
      font-size: 16px;
      line-height: 24px;
    }
    @media #{$screen-xs} {
      font-size: 14px;
      line-height: 26px;
    }
}
  /* Boostrap Component Customize Start*/
.btn {
    height: 40px;
    min-width: 168px;
    border: 2px solid transparent;
    border-radius: 0px;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inherit !important;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}
.btn.btn-dark {
    border-color: $mainlyBlue;
    color: $white;
}
.btn.btn-dark:hover,
.btn.btn-dark:active,
.btn.btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):active {
    border-color: $mainlyBlue;
    background: rgba($color: $mainlyBlueTwo, $alpha: 0.4);
}
.btn.btn-light {
    border-color: $mainlyBlue;
    color: $darkBuleTwo;
}
.btn.btn-light:hover,
.btn.btn-light:active,
.btn.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active {
    border-color: $mainlyBlue;
    background: rgba($color: $mainlyBlue, $alpha: 0.4);
    color: $white;
}
.dropdown-menu {
    background: $white;
    border-radius: 0px;
    padding: 9px 8px;
    max-width: 158px;
    width: 100%;
    min-width: 158px;
    margin-top: 12px;
    border: 0px;
    left: 15px !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    &::after {
        content: '';
        position: absolute;
        top: -5px;
        right: 15px;
        border-radius: 3px;
        width: 12px;
        height: 12px;
        background: $white;
        transform: rotate(45deg);
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
        padding: 5px 0;
        border-bottom: 1px solid rgba($color: $darkBule, $alpha: 0.2);
        &:first-child {
            padding-top: 0px;
        }
        &:last-child {
            border-bottom: 0px;
            padding-bottom: 0px;
        }
        a {
            color: $darkBlack;
            font-weight: 400;
            font-size: 14px;
            line-height: 19px;
            font-family: $Ubuntu;
            display: block;
        }
        }
    }
}
/* Boostrap Component Customize End*/
.bannerMain {
    position: relative;
    background: url(../assets/images/pattern.png) no-repeat right, linear-gradient(141.15deg, rgba(0, 0, 0, 0.5) 1.1%, #008DD2 99.38%), #252D5A;
    background-size: cover;
    min-height: 714px;
    margin-bottom: 64px;
    @media #{$screen-sm} {
        min-height: 700px;
        margin-bottom: 50px;
    }
    @media #{$screen-xs} {
        margin-bottom: 28px;
      }
}

.bannerPage {
    position: relative;
    background: url(../assets/images/pattern.png) no-repeat right, linear-gradient(141.15deg, rgba(0, 0, 0, 0.5) 1.1%, #008DD2 99.38%), #252D5A;
    background-size: cover;
}

/** Header Css Start **/
.header {
    padding: 18px 0;
    -webkit-transition: all 0.5s;
    -moz-transition: position 2s;
    -ms-transition: position 2s;
    -o-transition: position 2s;
    transition: all 0.5s;
    &.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(141.15deg, rgba($color: $black, $alpha: 0.5) 1.1%, $pacificBlue 99.38%), $darkBule;
        animation: smoothScroll 0.5s forwards;
        box-shadow: 0 10px 40px 0 rgba($color: $black, $alpha: 0.3);
        z-index: 999;
    }
    @media #{$screen-xs} {
        padding: 30px 0;
    }
    .headerInner {
        .headerLogo {
            img {
                display: block;
                @media #{$screen-xs} {
                max-width: 75px;
                }
            }
        }
        .headerNav {
            @media #{$screen-sm} {
                position: fixed;
                right: 0;
                top: 0;
                height: 100vh;
                width: 249px;
                background-color: $white;
                transform: scaleX(0);
                transform-origin: right;
                transition: all 0.3s ease-in-out;
                padding: 76px 49px;
                overflow: auto;
            }
            .nav {
                @media #{$screen-sm} {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 9px;
                }
                .nav-item {
                    padding: 0 15px;
                    @media #{$screen-sm} {
                        padding: 0;
                        margin-bottom: 35px;
                    }
                    .nav-link {
                        color: $white;
                        text-transform: uppercase;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 18px;
                        letter-spacing: 1px;
                        padding: 0 4px;
                        position: relative;
                        @media #{$screen-sm} {
                            font-size: 16px;
                            line-height: 21px;
                            letter-spacing: 1px;
                            color: $darkBule;
                            padding: 0;
                        }
                        &::after {
                            content: '';
                            left: auto;
                            right: 0;
                            bottom: -5px;
                            height: 2px;
                            width: 0%;
                            position: absolute;
                            border-radius: 50px;
                            background-color: $white;
                            -webkit-transition: 0.3s all ease-in-out;
                            -o-transition: 0.3s all ease-in-out;
                            transition: 0.3s all ease-in-out;
                        }
                        &:hover {
                            &::after {
                                width: 100%;
                                right: auto;
                                left: 0;
                            }
                        }
                    }
                }
            }
            &.open {
                transform: scaleX(1);
	    	z-index: 1;
            }
            .navCloseBtn {
                display: none;
                background-color: transparent;
                position: absolute;
                top: 15px;
                right: 15px;
                border: 0;
                padding: 0;
                @media #{$screen-sm} {
                    display: block;
                }
                img {
                    display: block;
                }
            }
            .responsiveasfdropdown {
                display: none;
                .btn-link {
                    background-color: transparent;
                    border: 0px;
                    font-size: 16px;
                    line-height: 21px;
                    letter-spacing: 1px;
                    color: $darkBule;
                    padding: 0;
                    outline: 0;
                    text-decoration: none;
                    cursor: pointer;
                }
                ul {
                    padding: 29px 0 0 12px;
                    margin: 0;
                    li {
                        list-style: none;
                        margin-bottom: 10px;
                        a {
                            font-size: 14px;
                            line-height: 21px;
                            color: $darkBlack;
                            display: block;
                        }
                    }
                }
                @media #{$screen-sm} {
                    display: block;
                }
            }
        }
        .asfDropdown {
            @media #{$screen-sm} {
                display: none;
            }
            .dropdown {
                position: relative;
                .btn-link {
                padding: 0 18px 0px 1px;
                background-color: transparent;
                font-size: 14px;
                line-height: 15px;
                text-align: center;
                letter-spacing: 1.16667px;
                text-transform: uppercase;
                color: $white;
                position: relative;
                border: 0;
                border-bottom: 1px solid $white;
                border-radius: 0px;
                box-shadow: inherit;
                outline: 0;
                text-decoration: none;
                cursor: pointer;
                &::after {
                    content: '';
                    position: absolute;
                    right: 3px;
                    top: 50%;
                    width: 8px;
                    height: 5px;
                    border: 0px;
                    margin: 0;
                    transform: translate(0, -50%);
                    background: url(../assets/images/dropdown-icon.svg) no-repeat center;
                }
                }
            }
        }
        .responsiveMenuIcon {
            display: none;
            @media #{$screen-sm} {
                display: block;
            }
            .btn-menu {
                padding: 0;
                border: 0px;
                background-color: transparent;
            }
        }
    }
}

/** banner Css Start **/
.bannerSec {
    .bannerInner {
            padding-top: 151px;
            @media #{$screen-xs} {
                padding-top: 42px;
            }
        h1 {
            color: $white;
            margin-bottom: 10px;
            @media #{$screen-xs} {
                margin-bottom: 20px;
            }
        }
        .subHeadingOne {
            color: $white;
            margin-bottom: 50px;
            max-width: 475px;
            @media #{$screen-sm} {
                margin-bottom: 30px;
            }
            @media #{$screen-xs} {
                margin-bottom: 20px;
            }
        }
        .rightAlignDetails {
            padding-top: 25px;
            @media #{$screen-xs} {
                padding-top: 60px;
            }
            .subHeadingTwo {
                color: $white;
                max-width: 555px;
                margin-left: auto;
            }
        }
    }
}
//about css start
.aboutSec {
    position: relative;
    z-index: 1;
    .container {
        @media #{$screen-sm} {
            padding: 0;
        }
    }
    &::after {
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        background: #f1f4f8;
        @media #{$screen-sm} {
            display: none;
        }
    }
    .aboutInner {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 10;
        padding: 0;
        margin: 0;
        list-style: none;
        @media #{$screen-sm} {
            flex-direction: column;
        }
        .aboutImgCol {
            flex: 0 1 742px;
            max-width: 742px;
            @media #{$screen-sm} {
                max-width: 100%;
                flex: 1 1 auto;
                width: 100%;
            }
            img {
                max-width: 100%;
                height: auto;
                display: block;
                &.desktopImg {
                    position: relative;
                    left: -15px;
                    @media #{$screen-sm} {
                        display: none;
                    }
                }
                &.responsiveImg {
                    display: none;
                    @media #{$screen-sm} {
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
        .aboutDetailsCol {
            padding-left: 48px;
            flex: 0 1 408px;
            max-width: 408px;
            @media #{$screen-sm} {
                max-width: 100%;
                width: 100%;
                flex: 1 1 auto;
                padding: 58px 30px 0;
            }
            h4 {
                color: $darkBule;
                margin-bottom: 16px;
                @media #{$screen-sm} {
                    text-align: center;
                }
            }
            p {
                color: $darkBule;
                margin: 0 0 36px;
                @media #{$screen-sm} {
                    text-align: center;
                }
            }
            ul {
                margin: 0;
                padding: 0;
                counter-reset: listItem;
                li {
                    list-style: none;
                    position: relative;
                    padding-left: 102px;
                    margin-bottom: 40px;
                    font-size: 16px;
                    line-height: 24px;
                    color: $darkBlack;
                    @media #{$screen-md} {
                        padding-left: 70px;
                    }
                    @media #{$screen-sm} {
                        padding-left: 57px;
                    }
                    @media #{$screen-xs} {
                        font-size: 15px;
                        line-height: 24px;
                        margin-bottom: 27px;
                    }
                    &:last-child {
                        margin-bottom: 0;
                    }
                    &::after {
                        counter-increment: listItem;
                        content: counter(listItem);
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-weight: normal;
                        font-size: 44px;
                        line-height: 57px;
                        color: $darkBule;
                        @media #{$screen-sm} {
                            font-size: 40px;
                            line-height: 44px;
                        }
                        @media #{$screen-xs} {
                            font-size: 34px;
                            line-height: 44px;
                        }
                    }
                }
            }
        }
    }
}
//about css end
// keysection css start
.keyfeatures {
    padding: 90px 0;
    @media #{$screen-sm} {
        padding: 60px 0;
    }
    .key-title-text{
        font-size:45px;
        color:$darkBule;
        max-width: 458px;
        margin-bottom: 30px;
        @media #{$screen-sm} {
            font-size: 35px;
        }
        @media #{$screen-xs} {
            font-size: 22px;
            text-align: center;
            margin-bottom: 40px;
        }
    }
    .key-section-container{
        max-width: 1006px;
        padding:0 30px;
        margin:0 auto;
        width:100%;
    }
    ul{
        padding:0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 470px 470px;
        grid-gap: 30px;
        @media #{$screen-sm} {
            grid-template-rows: 400px 400px;
        }
        @media #{$screen-xs} {
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: 360px 360px 360px 360px;
        }
        li{
            list-style: none;
            &.key-block{
                padding:0 44px;
                &:first-child{
                    background: url(../assets/images/performance.svg) no-repeat center, $darkBuleTwo;
                }
                &:nth-child(2){
                    background: url(../assets/images/runbg.svg) no-repeat bottom, $darkBuleTwo;
                    h3{
                        margin-top:0;
                    }
                }
                &:nth-child(3){
                    background: url(../assets/images/flexbg.svg) no-repeat top, $darkBuleTwo;
                }
                &:last-child{
                    background: url(../assets/images/usebg.svg) no-repeat center, $darkBuleTwo;
                }
                @media #{$screen-sm} {
                    padding:0 30px;
                }
                img{
                    margin-top:90px;
                    @media #{$screen-sm} {
                        margin-top: 45px;
                        height: 62px;
                        margin-bottom: 26px;
                    }
                }
                h3{
                    font-weight: 400;
                    color:$white;
                    margin-top:15px;
                }
                p{
                    color:$white;
                    margin-top: 12px;
                    margin-bottom: 0;
                    @media #{$screen-sm} {
                        font-size: 14px;
                    }
                    @media #{$screen-xs} {
                        font-size: 12px;
                        line-height: 20px;
                    }
                }
            }
        }
    }
}
// keysection css end
//organization css start
.organizationsSec {
    padding: 50px 0 70px;
    @media #{$screen-xs} {
        padding:0 0 50px;
    }
    h3 {
        text-align: center;
        margin-bottom: 26px;
        color: $darkBule;
        @media #{$screen-xs} {
            margin-bottom: 10px;
            font-size: 22px;
            line-height: 38px;
        }
    }
    p {
        text-align: center;
        font-size: 24px;
        line-height: 35px;
        color: $darkBlack;
        max-width: 944px;
        margin: 0 auto 54px;
        @media #{$screen-xs} {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 30px;
        }
    }
    ul {
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(6, 165px);
        grid-template-rows: 78px 78px 78px;
        grid-gap: 20px 30px;
        list-style: none;
        border-top: 1px solid $darkBule;
        padding-top: 37px;
        @media #{$screen-md} {
            grid-template-columns: repeat(6, 1fr);
        }
        @media #{$screen-sm} {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 78px 78px 78px 78px 78px 78px;
        }
        @media #{$screen-xs} {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 41px 41px 41px 41px 41px 41px;
            padding: 35px 0 0;
        }
        li {
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                max-width: 100%;
            }
        }
    }
}
//organization css end
//doc css start
.docSec{
    padding: 77px 0 87px;
    background: #003048;
    @media #{$screen-sm} {
        padding:50px 0 60px;
    }
    ul{
        display:grid;
        grid-gap:30px;
        grid-template-columns: repeat(3, 1fr);
        @media #{$screen-sm}{
            grid-gap:35px;
        }
        @media #{$screen-sm} {
            grid-template-columns: repeat(1, 1fr);
        }
        li{
            font-family: $PTSansCaption;
            @media #{$screen-sm}{
                margin-top: 25px;
            }
            h3{
                color:$white;
            }
            p{
                margin-bottom:0;
                padding-right:40px;
                margin-top: 15px;
                @media #{$screen-sm}{
                    margin-top: 25px;
                }
                a{
                    color:$mainlyBlueTwo;
                    text-decoration:none;
                    transition:0.2s all;
                    width: 100%;
                    display: block;
                    font-size: 24px;
                    position: relative;
                    line-height: 36px;
                    @media #{$screen-tablet} {
                        font-size: 18px;
                        line-height:26px;
                    }
                    &::after{
                        content: '';
                        height: 34px;
                        display: block;
                        width: 20px;
                        background: url(../assets/images/right.svg) no-repeat center;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    &:hover{
                        color:$pacificBlue;
                    }
                }
            }
        }
    }
}
//doc css end
/** communitySec **/
.communitySec {
    background: url(../assets/images/communitybg.svg) no-repeat left, linear-gradient(
        331.12deg,
        #252d5a -8.22%,
        #252d5a -3.11%,
        #005077 62.27%,
        #0090d7 145.27%,
        #b5bfff 145.27%
    );
    padding: 58px 0 65px;
    @media #{$screen-sm} {
        padding: 50px 0 54px;
    }
    @media #{$screen-xs} {
        padding: 40px 0 54px;
    }

    .container {
        @media #{$screen-tablet} {
            padding: 0;
        }
    }
    h3 {
        text-align: center;
        color: $white;
        margin: 0 0 6px;
        @media #{$screen-tablet} {
            padding: 0 30px;
        }
    }
    p {
        margin: 0 0 46px;
        color: #fff;
        text-align: center;
        font-weight: normal;
        font-size: 24px;
        line-height: 35px;
        @media #{$screen-tablet} {
            font-size: 20px;
            line-height: 24px;
            padding: 0 30px;
        }
        @media #{$screen-xs} {
            font-size: 15px;
            line-height: 24px;
            margin: 0 0 60px;
        }
    }
    .communityCardRow {
        @media #{$screen-tablet} {
            overflow: auto;
            padding-bottom: 10px;
        }
        .communityCard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(270px, auto);
            grid-gap: 30px;
            position: relative;
            padding: 0;
            margin: 0;
            list-style: none;
            @media #{$screen-tablet} {
                grid-auto-rows: auto;
                display: inline-grid;
                grid-template-columns: repeat(6, 320px);
                grid-gap: 0 15px;
                padding: 0 15px;
            }
            li {
                text-align: center;
                background: #ffffff;
                border-radius: 2px;
                padding: 31px 38px;
                display: flex;
                flex-direction: column;
                @media #{$screen-tablet} {
                    padding: 22px 34px 30px;
                }
                &.mailingBox {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    height: 100%;
                    transform: scale(0);
                    width: 100%;
                    grid-column-start: 2;
                    transition: all 0.3s ease-in-out;
                    transform-origin: bottom right;
                    padding: 83px 140px 83px 123px;
                    &.open {
                        transform: scale(1);
                    }
                    @media #{$screen-tablet} {
                        position: fixed;
                        top: 20px;
                        left: 20px;
                        right: 20px;
                        bottom: 20px;
                        width: auto;
                        height: auto;
                        z-index: 999;
                        overflow: auto;
                        box-shadow: 0 0 30px rgba(0,0,0,0.5);
                        transform-origin: center;
                    }
                    @media #{$screen-xs} {
                        padding: 60px 30px 30px 30px;
                    }
                    .modalCloseBtn {
                        position: absolute;
                        right: 29px;
                        cursor: pointer;
                        top: 16px;
                        border: 0;
                        background-color: transparent;
                        padding: 2px;
                        height: 31px;
                        font-size: 12px;
                        line-height: 31px;
                        color: $gainsboro;
                        outline: 0px;
                        display: flex;
                        align-items: center;

                        img {
                            margin-left: 5px;
                        }
                    }
                    .modalContent {
                        text-align: left;
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        li {
                            padding: 0;
                            margin: 0;
                            position: relative;
                            text-align: left;
                            h5 {
                                @media #{$screen-tablet} {
                                    padding: 0 0;
                                }
                            }
                            p {
                                font-size: 18px;
                                line-height: 24px;
                                text-align: left;
                                margin-bottom: 20px;
                                color: $darkBlack;
                                @media #{$screen-tablet} {
                                    padding: 0 0;
                                }
                            }
                            a{
                                margin-left:0;
                                &.mail-link{
                                    color:$mainlyBlueTwo;
                                    &:hover{
                                        color:$mainlyBlue
                                    }
                                }
                            }

                            .inputGroup {
                                padding-top: 15px;
                                position: relative;
                                max-width: 270px;
                                display: flex;
                                flex-direction: row;
                                .form-control {
                                    height: 40px;
                                    font-weight: normal;
                                    font-size: 12px;
                                    line-height: 14px;
                                    color: $windsor;
                                    border: 1px solid $windsor;
                                    border-radius: 0px;
                                    box-shadow: inherit;
                                    flex: 1 1 auto;
                                    padding: 8px 10px;
                                }
                                .btn-submit {
                                    width: 96px;
                                    flex: 0 0 96px;
                                    height: 40px;
                                }
                            }
                        }
                    }
                }
                h5 {
                    font-weight: normal;
                    font-size: 24px;
                    line-height: 31px;
                    margin: 0 0 8px;
                    color: $darkBule;
                    font-family: $PTSansCaption;
                    @media #{$screen-tablet} {
                        padding: 0;
                    }
                    @media #{$screen-xs} {
                        font-size: 22px;
                        margin: 0 0 10px;
                        line-height: 38px;
                    }
                }
                p {
                    margin: 0 0 23px;
                    font-weight: normal;
                    font-size: 16px;
                    line-height: 24px;
                    color: $darkBlack;
                    flex: 1 1 auto;
                    @media #{$screen-tablet} {
                        font-size: 14px;
                        line-height: 24px;
                        padding: 0;
                    }
                }
                .btn {
                    margin: 0 auto;
                    background: $darkBule;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: $white;
                    transition: all 0.3s ease;
                    font-weight: normal;
                    font-size: 12px;
                    line-height: 16px;
                    text-transform: uppercase;
                    padding: 0 25px;
                    border: 0;
                    min-width: auto;
                    display: inline-flex;
                    @media #{$screen-tablet} {
                        padding: 0 15px;
                    }
                    &:hover {
                        background-color: rgba($color: $darkBule, $alpha: 0.9);
                    }
                }
            }
        }
    }
}
//footer css start
.footerSec{
    background:$navyblack;
    font-family: $Ubuntu;
    font-size: 14px;
    line-height: 21px;
    color:$white;
    padding-bottom:43px;
    h5{
        font-size: 14px;
        margin-bottom:0;
        font-weight: normal;
        @media #{$screen-xs} {
            margin-top: 20px;
            max-width: 240px;
        }
    }
    .footerHeader{
        padding:18px 0;
        border-bottom:1px solid $darkBule;
        @media #{$screen-xs} {
            padding:30px 0
        }
        p{
            margin-bottom: 0;
        }
    }
    .footernote{
        padding-top:30px;
    }
}
//footer css end
//follow twitter cs start
.followtwitterSec{
    padding:83px 0 100px 217px;
    @media #{$screen-md} {
        padding:83px 0 100px 30px;
    }
    @media #{$screen-tablet} {
        padding:48px 0 60px 30px;
    }
    .follow-title{
        font-size: 50px;
        font-family: $PTSansCaption;
        color:$darkBule;
        margin-bottom: 20px;
        @media #{$screen-tablet} {
            font-size: 38px;
        }
        @media #{$screen-sm} {
            font-size: 22px;
            margin-bottom: 5px;
        }
    }
    .customslide{
        p{
            margin-bottom: 0;
        }
    }
    .follow-subtitle{
        font-size: 24px;
        color:$windsor;
        margin-bottom: 65px;
        @media #{$screen-sm} {
            margin-bottom: 34px;
            font-size: 15px;
        }
    }
}
//follow twitter css end

@keyframes smoothScroll {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* table */
table {
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    font-size: 15px;
    border-collapse: collapse;
}

table td {
    vertical-align: top;
    border-top: 1px solid #ddd;
}

table th, table td {
    padding: 10px 10px 9px;
    line-height: 18px;
    text-align: left;
}


/* tag_box ======================================================== */

.community_logo img {
  margin: 15px;
}

.tag_box {
	list-style:none;
	margin:0;
	padding:5px 0 ;
	overflow:hidden;
}
.tag_box li {
	line-height:28px;
}
.tag_box.inline li {
	float:left;
}
.tag_box a {
	padding: 3px 6px;
	margin: 2px;
	background: #eee;
	color:#005F6B;
	border-radius: 3px;
	text-decoration:none;
}

.tag_box a span{
	vertical-align:super;
	font-size:0.8em;
}

.tag_box a.active {
	background:#57A957;
	border:1px solid #4C964D;
	color:#FFF;
}


.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .cm {
  color: #999988;
  font-style: italic;
}
.highlight .cp {
  color: #999999;
  font-weight: bold;
}
.highlight .c1 {
  color: #999988;
  font-style: italic;
}
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
.highlight .c, .highlight .cd {
  color: #999988;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
.highlight .ge {
  color: #000000;
  font-style: italic;
}
.highlight .gr {
  color: #aa0000;
}
.highlight .gh {
  color: #999999;
}
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
.highlight .go {
  color: #888888;
}
.highlight .gp {
  color: #555555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaaaaa;
}
.highlight .gt {
  color: #aa0000;
}
.highlight .kc {
  color: #000000;
  font-weight: bold;
}
.highlight .kd {
  color: #000000;
  font-weight: bold;
}
.highlight .kn {
  color: #000000;
  font-weight: bold;
}
.highlight .kp {
  color: #000000;
  font-weight: bold;
}
.highlight .kr {
  color: #000000;
  font-weight: bold;
}
.highlight .kt {
  color: #445588;
  font-weight: bold;
}
.highlight .k, .highlight .kv {
  color: #000000;
  font-weight: bold;
}
.highlight .mf {
  color: #009999;
}
.highlight .mh {
  color: #009999;
}
.highlight .il {
  color: #009999;
}
.highlight .mi {
  color: #009999;
}
.highlight .mo {
  color: #009999;
}
.highlight .m, .highlight .mb, .highlight .mx {
  color: #009999;
}
.highlight .sb {
  color: #d14;
}
.highlight .sc {
  color: #d14;
}
.highlight .sd {
  color: #d14;
}
.highlight .s2 {
  color: #d14;
}
.highlight .se {
  color: #d14;
}
.highlight .sh {
  color: #d14;
}
.highlight .si {
  color: #d14;
}
.highlight .sx {
  color: #d14;
}
.highlight .sr {
  color: #009926;
}
.highlight .s1 {
  color: #d14;
}
.highlight .ss {
  color: #990073;
}
.highlight .s {
  color: #d14;
}
.highlight .na {
  color: #008080;
}
.highlight .bp {
  color: #999999;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: #445588;
  font-weight: bold;
}
.highlight .no {
  color: #008080;
}
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #990000;
  font-weight: bold;
}
.highlight .nf {
  color: #990000;
  font-weight: bold;
}
.highlight .nl {
  color: #990000;
  font-weight: bold;
}
.highlight .nn {
  color: #555555;
}
.highlight .nt {
  color: #000080;
}
.highlight .vc {
  color: #008080;
}
.highlight .vg {
  color: #008080;
}
.highlight .vi {
  color: #008080;
}
.highlight .nv {
  color: #008080;
}
.highlight .ow {
  color: #000000;
  font-weight: bold;
}
.highlight .o {
  color: #000000;
  font-weight: bold;
}
.highlight .w {
  color: #bbbbbb;
}
.highlight {
  background-color: #f8f8f8;
}