/* Common CSS */
html,
body {
    margin    : 0;
    padding   : 0;
    height    : 100%;
    direction : ltr;
    overflow-x: hidden;
}

body {
    background-color: #ffffff;
    font-family     : 'Poppins', sans-serif;
    font-size       : 16px;
    min-height      : 100%;
    line-height     : 1.42857143;
    color           : #323232;
    overflow-x      : hidden;
}

header {
    display : block;
    position: relative;
}

.navbar-default {
    padding           : 0;
    margin-bottom     : 0;
    border-bottom     : none;
    -webkit-transition: all 0.3s;
    -moz-transition   : all 0.3s;
    -ms-transition    : all 0.3s;
    -o-transition     : all 0.3s;
    transition        : all 0.3s;
    flex-direction    : column;
    background-color  : #fff;
    box-shadow        : 0 3px 15px rgb(0 0 0 / 30%);
}

img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.liststyle-none {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.container {
    width    : 100%;
    max-width: 100%;
}

@media screen and (min-width: 1200px) {
    .container {
        width    : 100%;
        max-width: 1360px;
    }

    .container-fluid {
        max-width: 2400px;
    }
}

@media screen and (min-width: 992px) {
    .container {
        width: 100%;
    }
}

/* ----- Heading Tag ----- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.15;
}

/* ----- Link Style ----- */
a {
    color: #0b62ba;
}

a:hover,
a:focus,
a:active {
    color          : #0b62ba;
    outline        : none;
    text-decoration: none;
}

a.disabled {
    cursor: default;
}

/* ----- Link Style End ----- */

/* ----- Heading Style ----- */

.sub-heading {
    font-size  : 16px;
    color      : #545454;
    font-weight: 300;
    display    : inline-block;
    position   : relative;
    padding    : 0 20px;
}

.sub-heading:before {
    content         : '';
    width           : 20px;
    height          : 1px;
    background-color: #0b62ba;
    position        : absolute;
    bottom          : 0;
    left            : 0;
}

.sub-heading:after {
    content         : '';
    width           : 20px;
    height          : 1px;
    background-color: #0b62ba;
    position        : absolute;
    bottom          : 0;
    right           : 0;
}

.main-heading {
    font-size    : 44px;
    color        : #303030;
    font-weight  : 700;
    line-height  : 54px;
    margin-bottom: 20px;
}

.main-heading span {
    color: #0b62ba;
}

.divider {
    display         : block;
    position        : relative;
    width           : 45px;
    height          : 4px;
    background-color: #0b62ba;
    border-radius   : 0 10px 10px 0;
    margin          : 0;
    padding         : 0;
}

.divider:before {
    content         : '';
    width           : 8px;
    height          : 4px;
    background-color: #0b62ba;
    position        : absolute;
    left            : 50px;
    border-radius   : 10px;
}

.content-desc {
    font-size  : 16px;
    color      : #545454;
    line-height: 30px;
}

.content-title {
    margin-bottom: 25px;
}

/* ----- Heading Style End ----- */

/* ----- Shape Style ----- */

.bottom-shape {
    display : block;
    position: absolute;
    height  : 80px;
    width   : 50%;
    left    : -50px;
    bottom  : -1px;
}

.bottom-shape:after {
    content            : '';
    position           : absolute;
    height             : 100%;
    width              : 136px;
    right              : -135px;
    transform          : rotate(0deg);
    background-repeat  : no-repeat;
    background-size    : 100% 100%;
    background-position: center;
}

.top-shape {
    display : block;
    position: absolute;
    height  : 80px;
    width   : 50%;
    right   : -50px;
    top     : -1px;
}

.top-shape:after {
    content            : '';
    position           : absolute;
    height             : 100%;
    width              : 136px;
    left               : -135px;
    transform          : rotate(0deg);
    background-repeat  : no-repeat;
    background-size    : 100% 100%;
    background-position: center;
}

.shape-white {
    background-color: #fff;
}

.shape-white:after {
    background-image: url(../img/white-shape-curve.png);
}

.shape-gray {
    background-color: #f3f4f8;
}

.shape-gray:after {
    background-image: url(../img/gray-shape-curve.png);
}

/* ----- Shape Style End ----- */

.btn {
    border-radius : 30px;
    text-transform: uppercase;
    font-size     : 16px;
}

.btn-primary,
.btn-primary:hover {
    color           : #fff;
    background-color: #0b62ba;
    border-color    : #0b62ba;
}

.form-control:focus {
    box-shadow      : none;
    background-color: #e9e9e9;
}

.form-control {
    background-color: #e9e9e9;
    border          : transparent;
    border-radius   : 30px;
    font-weight     : 400;
    color           : #757575;
    font-size       : 16px;
    padding         : 10px 20px;
}

/* ./ Common CSS End */

/* Header Section CSS */
.site-header {
    position: absolute;
    width   : 100%;
    height  : auto;
    top     : 0;
    left    : 0;
    z-index : 9999;
}

.site-header .navbar-brand {
    padding   : 5px 15px;
    height    : 80px;
    z-index: 1;
    transition: all 0.5s ease;
}

.site-header .logo-pattern {
    position           : absolute;
    top: 0;
    width              : 500px;
    height             : 100px;
    border-radius      : 0 00px 10px 0;
    background-color: rgba(255, 255, 255, 0.85);
    /* background         : rgb(255, 255, 255); */
    /* background         : linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 70%); */
    transform          : skewX(-24deg);
    left               : -160px;
    box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.3);
}


.site-header .navbar-brand img {
    object-fit: contain;
    filter    : brightness(0.8);
}

.site-header .navbar-custom .navbar-nav>.nav-item .nav-link {
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 50px;
    padding: 10px 16px 10px 12px;
    transition: all 0.5s;
}
.site-header .navbar-custom .navbar-nav>.nav-item .nav-link:hover{
    background-color: rgba(255, 255, 255, 0.1);
}
.site-header .navbar-custom .navbar-nav .nav-item .lang-icon{
    position: relative;
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
}
.site-header .navbar-custom .navbar-nav .nav-item .lang-icon img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.site-header .navbar-custom .navbar-nav>.nav-item .dropdown-menu {
    padding   : 5px 0;
    margin-top: 20px;
}

.site-header .navbar-custom .navbar-nav>.nav-item .dropdown-menu.show::after {
    content                  : "";
    position                 : absolute;
    z-index                  : 1;
    width                    : 16px;
    height                   : 16px;
    background               : inherit;
    top                      : -8px;
    right                    : 15px;
    -webkit-transform        : rotate(45deg);
    -ms-transform            : rotate(45deg);
    transform                : rotate(45deg);
    border-bottom-left-radius: 0.125rem;
    border-width             : 1px 0 0px 1px;
    border-radius            : 2px;
    border-style             : solid;
    border-color             : #e8e8e8;
}

.site-header .navbar-custom .navbar-nav>.nav-item .dropdown-menu .dropdown-item.active,
.site-header .navbar-custom .navbar-nav>.nav-item .dropdown-menu .dropdown-item:active {
    background-color: #454545;
}

.site-header .navbar-custom .navbar-nav>.nav-item .dropdown-menu>li {
    position: relative;
    z-index : 2;
}

.site-header .navbar-custom .navbar-nav>.nav-item .dropdown-menu .dropdown-item {
    padding: 8px 15px;
}

/* ./ Header Section CSS End */


/* Banner Section CSS */
.above-fold-section {
    position: relative;
    display : block;
    padding : 0;
    height  : 100vh;
    width   : 100%;
    overflow: hidden;
    color   : #ffffff;
}

.above-fold-section .overlay-background {
    position  : absolute;
    height    : 100%;
    width     : 100%;
    left      : 0;
    top       : 0;
    opacity   : 0.8;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(40, 40, 40, 0.5) 0%, rgba(0, 0, 0, 1) 100%);
}

/* .above-fold-section .left-pattern {
    position           : absolute;
    width              : 500px;
    height             : 100px;
    border-radius      : 0 00px 10px 0;
    background-color: rgba(255, 255, 255, 0.4);
    background         : rgb(255, 255, 255);
    background         : linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 70%);
    transform          : skewX(-24deg);
    left               : -160px;
} */

.above-fold-section .banner-img-wrap {
    position        : absolute;
    top             : 0px;
    left            : 0px;
    width           : 100%;
    height          : 100%;
    overflow        : hidden;
    z-index         : -100;
    background-color: #000000;
}

.above-fold-section .banner-img-wrap .carousel {
    position: absolute;
    height  : 100vh;
    width   : 100%;
    left    : 0;
    top     : 0;
    opacity : 0.8;
}

.above-fold-section .banner-img-wrap .carousel .carousel-inner {
    height: 100%;
}

.above-fold-section .banner-img-wrap .carousel .carousel-item {
    width           : 100%;
    height          : 100%;
    background-color: #ffffff;
}


.above-fold-section .banner-img-wrap .carousel .carousel-item img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.above-fold-section .container {
    position: relative;
    z-index : 1;
}

.above-fold-section .container,
.above-fold-section .container .row {
    height     : 100%;
    align-items: center;
}

.above-fold-section .banner-title {
    text-align    : center;
    position      : relative;
    width         : 100%;
    font-size     : 42px;
    font-weight   : 200;
    line-height   : 1.5;
    text-transform: capitalize;
    margin-top    : -60px;
    text-shadow   : 2px 2px 2px rgba(0, 0, 0, 1);
}

.above-fold-section .banner-title span {
    display: block;
}




.footer-section {
    position: fixed;
    width   : 100%;
    z-index : 1;
    bottom  : 0;
    left    : 0;
    color   : #ffffff;
}

.footer-section .footer-info {
    position  : relative;
    display   : block;
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
}

.footer-section .footer-info a {
    color          : #ffffff;
    text-decoration: none;
}

.footer-section .footer-info a:hover {
    text-decoration      : dashed;
    text-decoration-line : underline;
    text-decoration-color: #c5c5c5;
    text-underline-offset: 5px;

}

.contact-info .badge {
    position: relative;
    display : block;
    height  : 50px;
    width   : 50px;
}

.footer-section .footer-info .contact-info .info-title {
    display       : block;
    position      : relative;
    font-size     : 14px;
    color         : #bbbbbb;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.footer-section .footer-info .contact-info .ci-head {
    font-size  : 20px;
    font-weight: 200;
}

.footer-section .footer-info .info-bottom-text {
    font-size     : 13px;
    font-weight   : 200;
    padding       : 2px 10px 8px;
    letter-spacing: 0.5px;
}

/* Responsive CSS */

@media screen and (max-width: 992px){
    .above-fold-section .banner-title{
        font-size: 30px;
    }
    .footer-section .footer-info .contact-info .ci-head{
        width: 100%;
        justify-content: center;
    }
}
@media screen and (max-width: 768px){
    .site-header .navbar-brand{
        height: 60px;
        padding-left: 0;
    }
    .site-header .logo-pattern{
        width: 350px;
        height: 80px;
    }
    .above-fold-section .banner-title{
        font-size: 28px;
    }
    .contact-info .ci-wapp, .contact-info .ci-viber, .contact-info .ci-email{
        gap: 10px !important;
    }
    .contact-info .badge{
        height: 40px;
        width: 40px;
        padding: 5px !important;
    }
    .footer-section .footer-info .contact-info .ci-head{
        font-size: 18px;
    }
    .footer-section .footer-info .contact-info .info-title{
        font-size: 12px;
    }
    .footer-section .footer-info a{
        font-size: 14px;
    }
}
@media screen and (max-width: 575px){
    .site-header .navbar-custom .navbar-nav .nav-item .lang-title{
        display: none;
    }
    .site-header .navbar-custom .navbar-nav .nav-item .lang-icon{
        margin: 0;
    }
    .site-header .navbar-custom .navbar-nav>.nav-item .dropdown-menu{
        position: absolute;
    }
    .above-fold-section .banner-title{
        font-size: 25px;
    }
    .contact-info .ci-wapp, .contact-info .ci-viber, .contact-info .ci-email{
        gap: 8px !important;
    }
    .footer-section .footer-info .contact-info .info-title{
        display: none;
    }
    .contact-info .badge{
        height: 20px;
        width: 20px;
        padding: 0 !important;
    }
    .footer-section .footer-info .contact-info .ci-head{
        font-size: 16px;
    }
}
@media screen and (max-width: 480px){
    .contact-info .ci-wapp, .contact-info .ci-viber, .contact-info .ci-email{
        width: 100%;
        justify-content: center !important;
    }
}
@media screen and (max-width: 370px){
    .contact-info .ci-wapp, .contact-info .ci-viber, .contact-info .ci-email{
        width: 100%;
    }
}