:root {
    --primary-color: #0c6066;
    --primary-text-color: #666d78;
    --white: #fff;
    --black: #000;
    --hover-color: #ccc;
    --arrow-color-light-green: #71c5a5;
    --arrow-color-dark-green: #1aa9bc;
}

.primary-color{
    color: var(--primary-color);
}
.secondary-color{
    color: var(--arrow-color-dark-green);
}
.white-color{
    color: var(--white);
}
body{
    color: var(--primary-text-color);
}
.big-title-page{
    font-size: 60px;
    font-family: 'OpenSans-Bold';
    line-height: 1.2;
    text-transform: uppercase;
}
.slash{
    color: var(--arrow-color-light-green);
    font-size: 40px;
    font-style: italic;
    letter-spacing: 25px;
    font-family: OpenSans-light;
    float: right;
}
.desktop-display{
    display: block;
}

.mobile-display{
    display: none;
}

/* header */
.logo {
    font-weight: 500;
    font-size: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.logo a{
    padding: 0;
}
.logo img {
    vertical-align: bottom;
    margin-right: 0.5rem;
    width: 100px;
}
.dropdown-menu{
    background-color: var(--primary-color);
}
.dropdown-menu-custom{
    min-width: 260px;
}
.dropdown-menu li{
    text-align: right;
}
.header-top-area.style-1.menu-bg{
    background-color: var(--white);
}
.style-1.menu-bg .nav-toggle .icon-bar{
    background-color: var(--black);
}
.style-1.menu-bg .mainmenu .navbar-nav li a{
    color: var(--black);
}
.style-1.menu-bg .mainmenu .navbar-nav .dropdown_menu_nav li a,
.style-3 .mainmenu .navbar-nav .dropdown_menu_nav li a{
    color: var(--white);
}
.header-top-area.style-4.menu-bg{
    background-color: transparent;
}
.header-top-area.style-4.menu-bg .nav-toggle .icon-bar{
    background-color: var(--white);
}
.style-4.menu-bg .mainmenu .navbar-nav li a{
    color: var(--white);
}

.mainmenu .navbar-nav li a:hover{
    border: 10px solid;
    border-image-slice: 1;
    border-width: 3px;
    border-image-source: linear-gradient(to right, #6fc29e,#13a7b9, #026367);
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
.mainmenu .navbar-nav .dropdown_menu_nav li a:hover{
    border: none;
    font-family: 'OpenSans-Bold';
    color: var(--white);
}
.nav .open:focus>a,.nav .open>a:focus{
    background-color: transparent;
}

.nav-toggle + .navbar-collapse {
    margin-right: 43px;
}

.header-top-area.style-2{
    background-color: var(--primary-color);
}
.style-2.menu-bg .mainmenu .navbar-nav li a{
    color: var(--white);
}

.style-3 .nav-toggle .icon-bar{
    background-color: var(--primary-color);
}
.style-3 .mainmenu .navbar-nav li a{
    color: var(--primary-color);
}

/* footer */
.logo-footer{
    width: 100px;
}
.footer-area{
    position: relative;
    background-color: var(--primary-color);
    color: var(--white);
}
.footer-area a{
    color: var(--white);
}
.footer-area a:hover{
    font-family: OpenSans-Bold;
}
.footer-area p{
    margin-bottom: 25px;
    line-height: 1.5;
    text-align: left !important;
}
.footer-area h4{
    padding-bottom: 20px;
    padding-top: 20px;
}

/* triangle */
.arrow-down {
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
}
.arrow-color-light-green{
    border-top: 25px solid var(--arrow-color-light-green);
}
.arrow-color-dark-green{
    border-top: 25px solid var(--arrow-color-dark-green);
}

.section-padding-contact{
    padding: 155px 0 50px;
}
.section-padding-first{
    padding: 90px 0 0;
}
.contact-text{
    vertical-align: middle;
}
.area{
    position: relative;
}

/* product page */
.product-area{
    background-color: var(--black);
}
.product-bg{
    -webkit-mask-image:radial-gradient(ellipse,rgb(0 0 0 / 93%), rgb(0 0 0 / 85%), rgb(0 0 0 / 0%),rgba(0,0,0,0));
}
.product-area .big-title-page{
    color: var(--white);
    padding: 25px 10px;
}
.product-area .about-text{
    vertical-align: bottom;
}
.bottom-container {
    height: 140px;
}

.equity-bg{
    display:block
}
.equity_image_preview_container {
    display:none;
}
.equity-bg{
    background-image: url('../images/product/equity.png');
    width: 70%;
    height: 600px;
    background-size: cover;
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    background-position: 80% 100%;
}

/* home page */
.m-capital-area{
    background: linear-gradient(to right, #aeeaff,#caefff, #ebfaff);
}
.m-capital-area .big-title-page{
    padding: 120px 0px 30px;
}
.m-capital-content{
    padding-bottom: 160px;
}
.m-capital-area .home-bottom{
    position: absolute;    
    width: 100%;
    height: 200px;
    background-image: url('../images/home/home-bottom.png');
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
#our-service h1{
    padding-bottom: 15px;
}
.our-service-icon{
    padding-bottom: 10px;
}
.our-service-icon img{
    height: 45px;
    width: auto;
}
.our-service-item{
    padding: 20px 15px;
}
.our-service-item .about-text h2{
    padding-bottom:15px;
    padding-right: 20px;
}

.people-area{
    background-color: #dff0e8;
    overflow-x: hidden;
}
.people-area .slash.first-slash{
    padding-left: 15%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.people-area .slash.last-slash{
    padding-right: 15%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.people-item{
    padding: 20px 0;
}
.people-icon{
    height: 240px;
    /* height: 250px; */
    background-color: white;
    border-radius: 150px;
    text-align: center;
    border: 2px solid var(--primary-color);
}
.people-icon img{   
    height: 236px;
    /* height: 246px; */
    width: auto;
}
.people-item .about-text{
    padding-top: 30px;
}
.home-overview-area{
    padding-bottom: 20px;
}
.home-overview{
    padding-top: 7%;
}
.home-overview-bg{
    -webkit-mask-image:radial-gradient(ellipse,rgb(0 0 0 / 93%), rgb(0 0 0 / 85%), rgb(0 0 0 / 0%),rgba(0,0,0,0));
}
.home-overview-bg img{
    width: 150%;
}
.welcome-image-area .container{
    /* padding-top: 16%; */
}
.header-content{
    width: 70%;
    margin: 0 auto;
    color: white;
    font-size: 20px;
    font-family: OpenSans-Light;
    border: 1px solid white;
    border-radius: 15px;
    padding: 30px 15px 15px;
    margin-top: 10%;
    position: relative;
}
.header-content .top-icon {
    position: absolute;
    left: calc(50% - 30px);
    top: -2px;
    width: 60px;
    height: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: linear-gradient(to right,#1e7a84, #1c717f);
    padding: 0 10px;
    /* background: radial-gradient(#2598b0 40%,#2794ad 50%, transparent 10%); */
}
.modal-dialog {
    width: 80%;
    margin: 20px auto;
}
.modal-body{
    padding: 20px 40px;
}
.modal-dialog .model-sub{
    padding-top:25px;
}
.modal-dialog h4 i{
    padding-top:15px;
}
.modal-dialog p{
    line-height: 1.3;
}
.modal-dialog ul{
    padding-left: 30px;
}
.modal-dialog li{    
    list-style: inside;
    text-indent: -1.3em;
}
.modal-footer{
    border-top: none;
    text-align: center;
}
.modal-dialog .btn{
    background-color:var(--primary-color);
    border-color: var(--primary-color);    
    padding: 2px 6px;
    border-radius: 10px;
}
/* .header-text{
    padding-top: 8%;
} */
.header-text-bg{
    position: relative;
    height: 100%;
    width: 100%;
    background: url(../images/home/bg/infinity-sm.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    padding-left: 0;
}
.header-text-center{
    margin: 0;
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    width: 100%;
}
.header-text-center .row{
    margin: 0;
}
@media screen and (max-width: 1600px) {
    .header-content .top-icon {
        background: linear-gradient(to right,#24808b, #1a7b86);
    }
}
@media screen and (max-width: 1450px) {
    .header-content .top-icon {
        background: linear-gradient(to right,#238691, #1d848f);
    }
}
@media screen and (max-width: 1300px) {
    .equity-bg{
        height: 600px;
        background-position: 80% 150%;
    }
    .welcome-image-area .container{
        /* padding-top: 18%; */
    }
    .header-content .top-icon {
        background: linear-gradient(to right,#27939d, #22909a);
    }
}
@media screen and (max-width: 1024px) {
    .people-icon img{
        height: 190px;
    }
    .people-icon{
        height: 194px;
    }
    .welcome-image-area .container{
        /* padding-top: 22%; */
    }
    .header-content .top-icon {
        background: linear-gradient(to right,#278c96, #1e8894);
        height: 3px;
    }
}
@media screen and (max-width: 992px) {
    .bottom-container{
        height: 0;
    }
    .equity-area{
        height: 800px;
    }
    .equity-bg{
        background-image: url('../images/product/equity2.png');
        /* -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); */
        width: 100%;
        height: 600px;
        top: 250px;
        background-position: center;
    }
    .m-capital-area .home-bottom{
        height: 150px;
    }
    .desktop-display{
        display: none;
    }

    .mobile-display{
        display: block;
    }
    .people-icon{
        width: 500px;
    }
    .people-item{
        padding: 20px 15px;
    }
    .header-text h2{
        font-size: 120px;
    }
    .header-text h1{
        font-size: 40px;
    }
    .header-content{
        width: 90%;
        font-size: 17px;
    }
    .home-overview-bg img{
        width: 100%;
    }
    .welcome-image-area .container{
        /* padding-top: 29%; */
    }
}
@media screen and (max-width: 900px) {
    .header-content .top-icon {
        background: linear-gradient(to right,#1f7682, #1c717d);
    }
}
@media screen and (max-width: 768px) {
    .logo img {
        width: 100px;
    }
    .menu-bg .navbar-collapse,.navbar-collapse{
        /* background-color: var(--white); */
        color: var(--black);
    }
    .header-top-area.menu-bg .navbar-toggle .icon-bar{
        background: var(--black);
    }
    .dropdown-menu li{
        text-align: left;
    }
    .navbar-toggle{
        background: transparent;
    }
    .style-3 .header-top-area .mainmenu .navbar-nav li a{
        color: var(--primary-color);
    }
    .style-1.menu-bg .mainmenu .navbar-nav .dropdown_menu_nav li a,
    .style-1.menu-bg .navbar-collapse,
    .style-1 .navbar-collapse,
    .style-1.style-3 .mainmenu .navbar-nav .dropdown_menu_nav li a,
    .style-1 .mainmenu .navbar-nav li a{
        color: var(--white);
        background-color: transparent;
    }
    
    .style-1.style-3 .mainmenu .navbar-nav li a{
        color: var(--primary-color);
    }
    .style-1.menu-bg .mainmenu .navbar-nav .dropdown_menu_nav li a:hover, 
    .style-3 .mainmenu .navbar-nav .dropdown_menu_nav li a:hover,
    .style-1 .mainmenu .navbar-nav li a:hover{
        /* border-image-source:none */
        border:none;
    }
    .style-1 .mainmenu .navbar-nav .dropdown_menu_nav li a:hover{
        color: var(--primary-color);
    }
    .big-title-page{
        font-size: 45px;
    }
    .people-area .slash{
        font-size: 20px;
    }
    .header-text h1{
        font-size: 4vh;
    }
    .header-text h2{
        font-size: 12vh;
    }
    .header-content{
        font-size: 15px;
    }
    .header-content p{
        line-height: 1.3;
    }
    .equity-bg{
        display:none
    }
    .equity_image_preview_container {
        /* -webkit-linear-gradient: linear-gradient(to right, rgba(0, 0, 0, 1.0) 50%, transparent 100%); */
        display: block;
    }
    .equity_image_preview {
        width: 100%;
        height: 100%;
        background-size: cover;
        position: absolute;
        background-repeat: no-repeat;
        background-position: bottom;
        top: 0;
        right: 0;
        background-image:url('../images/product/equity2.png');
    }
    .nav-toggle + .navbar-collapse {
        margin-right: 0;
    }
    .welcome-image-area .container{
        /* padding-top: 39%; */
    }
}
@media screen and (max-width: 660px) {
    .header-content .top-icon {
        background: linear-gradient(to right,#1c6a76, #1a6c78);
    }
}
@media screen and (max-width: 600px) {
    .header-content .top-icon {
        background: linear-gradient(to right,#186470, #186470);
    }
}

@media screen and (max-width: 576px) {
    .home-overview, .product-bg-div{
        overflow-x: hidden;
        padding-top: 0;
        margin-top: -30px;
        margin-bottom: -40px;
    }
    .home-overview-bg{
        margin-left: -20%;
        width: 140%;
        -webkit-mask-image:radial-gradient(ellipse,rgb(0 0 0 / 93%), rgb(0 0 0), rgb(0 0 0 / 0%),rgba(0,0,0,0));
    }
    .product-bg{
        margin-left: -8%;
        width: 120%;
    }
    .people-icon{
        height: 180px;
        width: 100%;
    }
    .people-icon img {
        height: 176px;
    }
    .people-area .slash.first-slash{
        padding-left: 0;
    }
    .people-area .slash.last-slash{
        padding-right: 0;
    }
    .mainmenu{
        margin-top: 80px;
    }
    /* .header-top-area.menu-bg{
        background-color: transparent;
    } */
    .header-top-area .navbar-collapse,
    .style-1 .navbar-collapse, 
    /* .style-1.style-3 .mainmenu .navbar-nav .dropdown_menu_nav li a, */
    /* .style-1 .mainmenu .navbar-nav li a, */
    .style-1.style-4 .navbar-collapse, 
    .style-1.style-3 .navbar-toggle .icon-bar{
        background-color: var(--primary-color);
    }
    .style-1.style-3 .mainmenu .navbar-nav li a,
    /* .style-1.style-3 .mainmenu .navbar-nav .dropdown_menu_nav li a, */
    .style-1.style-4.menu-bg .mainmenu .navbar-nav li a,
    .style-1.style-4.menu-bg .mainmenu .navbar-nav .dropdown_menu_nav li a
    {
        color: var(--white);
    }
    .style-1.style-4.menu-bg .navbar-toggle .icon-bar{
        background-color: var(--white);
    }
    .style-1.menu-bg .mainmenu .navbar-nav li a,
    .style-1.menu-bg .mainmenu .navbar-nav .dropdown_menu_nav li a,
    .style-3.menu-bg .mainmenu .navbar-nav li a,
    .style-3.menu-bg .mainmenu .navbar-nav .dropdown_menu_nav li a
    {
        background-color: transparent;
        color: var(--primary-color);
    }
    .header-top-area.style-2 .navbar-collapse{
        background-color: transparent;
        border-top: none;
    }
    .header-top-area.style-2 .mainmenu .navbar-nav li a:hover{
        border: none;
    }
    .header-text h1{
        font-size: 3vh;
    }
    .header-text h2{
        font-size: 7.5vh;
    }
    .header-content .top-icon {
        background: linear-gradient(to right,#186470, #155462);
    }
}
@media screen and (max-width: 485px) {
    .header-content .top-icon {
        background: linear-gradient(to right,#186470, #114e5c);
    }
}
@media screen and (max-width: 420px) {
    .header-content .top-icon {
        background: linear-gradient(to right,#175461, #104a58);
    }
}
@media screen and (max-width: 375px) {
    .people-icon{
    }
    .people-icon img {
        height: 155px;
        margin-top: 21px;
    }
    .header-text-center{
        top: 58%;
    }
    .header-content .top-icon {
        background: linear-gradient(to right,#175461, #104a58);
    }
}
@media screen and (max-width: 355px) {

    .header-content .top-icon {
        background: linear-gradient(to right,#175b65, #155b65);
    }
}
@media screen and (max-width: 320px) {
    .people-icon{
        height: 135px;
    }
    .people-icon img {
        height: 110px;
        margin-top: 21px;
    }
    .header-content .top-icon {
        background: linear-gradient(to right,#155660, #14525e);
    }
}