@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Questrial&display=swap');


@font-face {
    font-family: 'malvides';
    src: url('../fonts/malvides.eot');
    src: url('../fonts/malvides.eot?#iefix') format('embedded-opentype'),
        url('../fonts/malvides.woff2') format('woff2'),
        url('../fonts/malvides.woff') format('woff'),
        url('../fonts/malvides.ttf') format('truetype'),
        url('../fonts/malvides.svg#malvides') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* font-family: "Poppins", sans-serif; */
/* font-family: "Epilogue", sans-serif; */

:root{
    --primary-color: #054467;
    --light-primary-color: #2AADBA;
    --secondary-color: #004761;
    --light-grey: #F3F3F3;
    --dark-color: #272727;
}

body{
    font-family: "Questrial", sans-serif;
    color: #111;
    font-weight: 400;
    line-height: 1.5;
}

a{
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

p:last-child,ul,ol,figure{
    margin-bottom: 0;
}

button:focus,
.navbar-toggler:focus{
    box-shadow: none;
}

img{
    max-width: 100%;
}

button{
    background: none;
    border: none;
}

/* default */
.fs-lg{font-size: 1.1rem;}
.text-primary{color: var(--primary-color)!important;}
.text-primary-light{color: var(--light-primary-color)!important;}
.bg-primary{background-color: var(--primary-color)!important;}
.bg-secondary{background-color: var(--secondary-color)!important;}
.bg-primary-light{background-color: var(--light-primary-color)!important;}

.primary-1{color: #004961;}
.light-primary-color1{color: #188994;}
.light-color1{color: #2AECFF;}

.lh-1-2{line-height: 1.2;}
.lh-1-3{line-height: 1.3;}

.btn{
    position: relative;
    color: #fff;
    background-color: #003041;
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    padding: 5px 22px 6px;
    border: 0;
}

.btn img{
    margin-left: 5px;
}
.btn:hover{
    color: #fff;
    background-color: #10718F;
}
.btn:not(.btn-light) img{
    filter: contrast(0) brightness(300%);
}

.btn-img{
    padding: 5px 38px 6px 22px;
    transition: all 0.2s ease;
}
.btn-img .icon{
    position: absolute;
    top: 49.6%;
    transform: translateY(-50%);
    right: 17px;
    margin: 0;
    transition: all 0.2s ease;
}
.btn-img:hover{
    padding: 5px 37px 6px 23px;
}
.btn-img:hover .icon{
    right: 14px;
}

.btn-primary{background-color: var(--primary-color)!important;}
.btn-primary:hover{background-color: #003041!important;}
.btn-secondary{background-color: var(--secondary-color)!important;}
.btn-secondary:hover{background-color: #00202E!important;}
.btn-primary-light{background-color: var(--light-primary-color)!important;}
.btn-primary-light:hover{background-color: var(--primary-color)!important;}

.btn-light{
    color: #111;
    background: linear-gradient(89.99deg, #fff 0%, #fff 20%, #fff 50%, #fff 75%, #fff 100%);
    transition: all 0.3s ease-in-out;
}
.btn-light:hover{
    color: #111;
    background-color: #78FDFF;
    background: linear-gradient(89.99deg, #FEFEFE 0%, #BBFEFE 20%, #78FDFF 50%, #BBFDFF 75%, #FEFEFE 100%);
    /* background: linear-gradient(89.99deg, #78FDFF 0%, #BBFDFF 20%, #FEFEFE 50%, #BBFDFF 75%, #78FDFF 100%); */
}

.btn-rounded{border-radius: 50px;}

.bg-light{background-color: #F9F9F9!important;}

.border-primary{border-color: var(--primary-color)!important;}

.section-space{
    padding-top: 100px;
    padding-bottom: 100px;
}

.malvides-font{font-family: 'malvides';}
.parisienne-font{font-family: "Parisienne", cursive;}

.text-normalize{text-transform: none!important;}

.heading{
    color: var(--primary-color);
    font-size: 3.6rem;
    text-transform: uppercase;
}
.sub-heading{
    color: #111;
    font-size: 2.2rem;
}
.heading-wrap .heading span{
    color: var(--light-primary-color);
}

.img-wrapper{
    position: relative;
    padding: 25px 0 25px 25px;
    z-index: 1;
}
.img-wrapper::before{
    content: "";
    width: calc(100% - 30px);
    height: 100%;
    border: 1px solid;
    border-image: linear-gradient(180deg, var(--primary-color) 8%, #0A87CD 92%) 20;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    position: absolute;
    overflow: hidden;
}
.img-wrapper img{width: 100%;}
.img-wrapper.reverse-border{
    padding: 25px 25px 25px 0;
}
.img-wrapper.reverse-border::before{
    left: auto;
    right: 0;
}
.img-wrapper.z-1::before{z-index: -1;}

.img-outline-design{
    position: relative;
    padding: 0 25px 25px 0;
    z-index: 1;
}
.img-outline-design::before{
    content: "";
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border: 1px solid;
    border-image: linear-gradient(180deg, var(--primary-color) 8%, #0A87CD 92%) 20;
    right: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
}

.divide-line-light{
    height: 1px;
    border: none;
    background: linear-gradient(90deg, #054467 10%, #FFFFFF 50%, #054467 90%);
    opacity: 1;
}

.list-style-1 li{
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}
.list-style-1 li .icon{
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 22px;
    border-radius: 100%;
    background-color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}
.list-style-1 li:hover .icon{
    background-color: var(--light-primary-color);
}

.list-style-circle li{
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
}
.list-style-circle li::before{
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    outline: 4px solid var(--light-primary-color);
    position: absolute;
    top: 8px;
    left: 2px;
    border-radius: 100%;
}
.list-style-circle-1 li{
    position: relative;
    padding-left: 21px;
    margin-bottom: 12px;
}
.list-style-circle-1 li:last-child{margin-bottom: 0;}
.list-style-circle-1 li::before{
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--light-primary-color);
    outline: 3px solid var(--primary-color);
    position: absolute;
    top: 9px;
    left: 2px;
    border-radius: 100%;
}

.list-style-icon li{
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    transition: all 0.3s ease-in-out;
}
.list-style-icon li .icon{
    position: absolute;
    display: inline-block;
    top: 4px;
    left: 1px;
    transition: all 0.3s ease-in-out;
}

.list-style-icon-1 li{
    position: relative;
    padding-left: 28px;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}
.list-style-icon-1 li .icon{
    position: absolute;
    display: inline-block;
    top: 3px;
    left: 1px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 0.3s ease-in-out;
}
.list-style-icon-1 li:hover .icon{
    left: 5px;
}

.list-style-icon-2 li{
    position: relative;
    padding-left: 35px;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}
.list-style-icon-2 li .icon{
    position: absolute;
    text-align: center;
    display: inline-block;
    top: 0px;
    left: 1px;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    /* border: 1px solid ; */
    transition: all 0.3s ease-in-out;
}
.list-style-icon-2 li .icon img{height: 18px;}

.bg-img{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.img-block-1{
    background-color: #fff;
    border-radius: 37px;
    border: 1px solid var(--light-primary-color);
    overflow: hidden;
}

.divide-line-1 .column{
    position: relative;
}
.divide-line-1 .column:not(:last-child)::after{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #FFFFFF 5.29%, #000000 52.4%, #FFFFFF 100%);
    position: absolute;
    top: 0;
    right: 0;
}
.divide-line-2 .column{
    position: relative;
}
.divide-line-2 .column:not(:last-child)::after{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #F9F9F9 6.73%, #054467 53.85%, #F9F9F9 100%);
    position: absolute;
    top: 0;
    right: 0;
}
.divide-line-3 .column{
    position: relative;
}
.divide-line-3 .column:not(:last-child)::after{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #F9F9F9 6.73%, #2AADBA 53.85%, #F9F9F9 100%);
    position: absolute;
    top: 0;
    right: 0;
}






header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 0;
    z-index: 10;
}
header .navbar-brand{
    margin-right: 0;
}
header .navbar-brand img{
    width: 180px;
}
header .navbar .navbar-nav{
    transition: all 0.2s ease;
}
header .navbar .navbar-nav .nav-item .nav-link{
    position: relative;
    color: #fff;
    line-height: normal;
    padding: 0.7rem 0.9rem;
} 
header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle::after{
    text-align: right;
}
/* dropdown-menu */
header .dropdown-menu{
    width: 100%;
    background-color: transparent;
    padding: 0;
    border: 0;
    animation: fadeIn 0.8s cubic-bezier(0.4, 0.2, 0.12, 1);
}
/* navbar-collapse */
header .nav-wrap{
    color: #fff;
    width: 100%;
    background-color: #014359;
    padding: 8px 30px;
    border-radius: 50px;
    overflow: hidden;
    transition: all 380ms cubic-bezier(0.4, 0.12, 0.2, 1);
}
header .nav-wrap *{
    transition: all 380ms cubic-bezier(0.4, 0.12, 0.2, 1);
}
/* menu-btn */
header .menu-btn{
    background-color: transparent;
    text-align: center;
    /* width: 30px; */
    height: 48px;
    line-height: 47px;
    padding: 0;
    border: none;
    border-radius: 100%;
    opacity: 1;
    padding-left: 1rem;
    transition: all 380ms cubic-bezier(0.4, 0.12, 0.2, 1);
}
header .menu-btn img{
    width: 30px;
}

header .nav-wrap:hover{
    background-color: #11718F;
    border-radius: 1.75rem;
}
/* navbar-collapse */
header .nav-wrap .navbar-collapse{
    align-items: normal;
}
/*  */
header .nav-wrap .menu-content{
    color: #fff;
    padding-left: 30px;
}
header .nav-wrap .menu-content p{
    font-size: 0.9rem;
}
header .nav-wrap .menu-content .title{
    color: #fff;
    position: relative;
    font-size: 1.1rem;
    line-height: normal;
    margin-bottom: 10px;
}
header .nav-wrap .menu-content .title .icon{
    display: block;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 100%;
    background-color: #00374A;
    position: absolute;
    top: 0px;
    left: -28px;
}
header .nav-wrap .menu-content .title .icon img{
    width: 14px;
}
/*  */
header .nav-wrap .dropdown-menu .btn{
    color: #10718F;
    position: relative;
    padding: 3px 15px 4px 33px;
}
header .nav-wrap .dropdown-menu .btn .icon{
    position: absolute;
    top: 3px;
    left: 4px;
    display: block;
    text-align: center;
    width: 24px;
    height: 24px;
    line-height: 21px;
    border-radius: 100%;
    background-color: #00374A;
}
header .nav-wrap .dropdown-menu .btn .icon img{
    width: 15px;
    margin-left: 0;
}
header .nav-wrap .menu-img{
    max-height: 270px;
    border-radius: 13px;
    overflow: hidden;
}
header .nav-wrap .menu-img img{
    -webkit-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* content-wrapper */
header .nav-wrap .content-wrapper{
    position: relative;
    display: none;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin-top: 0;
    animation: fadeIn 0.6s cubic-bezier(0.4, 0.2, 0.12, 1);
    transition: all 0.3s ease-in-out;
}
header .nav-wrap .content-wrapper::before{
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
header .nav-wrap .content-wrapper .txtContent{
    animation: fadeIn 0.6s cubic-bezier(0.4, 0.2, 0.12, 1);
}
header .nav-wrap .content-wrapper .txtContent{
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
}
header .nav-wrap .content-wrapper .txtContent.hide{
    display: none;
}
header .nav-wrap .content-wrapper .dropdown-menu{
    position: static;
    transition: all 0.3s ease-in-out;
}
header .nav-wrap .content-wrapper .dropdown-menu.show{
    /* position: static; */
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}
/*  */
header .nav-wrap .content-list li{
    color: #fff;
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}
header .nav-wrap .content-list li a{
    color: #fff;
    display: block;
}
header .nav-wrap .content-list li::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 18px;
    height: 18px;
    background: url(../images/icons/arrow-right-icon-light.svg) no-repeat center / contain;
}

/* header.bg-color */
header.bg-color::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90.04deg, rgba(0, 32, 46, 0.6) 0.04%, rgba(0, 78, 103, 0.6) 99.48%);
    mix-blend-mode: plus-darker;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}
/*  */
header.bg-dark{
    background-color: #000F30;
    opacity: 0.9;
}
/*  */
header.bg-transparent{background-color: transparent;}
header.bg-transparent::before{
    background: transparent;
    transition: all 0.3s ease-in-out;
}



/* - banner-section - */
.banner-section{
    position: relative;
    background: url(../images/bg/banner-bg-img.jpg) no-repeat center / cover;
    height: calc(100vh - 30px);
    height: 780px;
    margin-bottom: 170px;
}
.banner-section .content-box{
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.banner-section .content-box .caption{
    margin-bottom: -80px;
}
.banner-section .content-box .caption .heading{
    display: inline-block;
    font-size: 6.2em;
    text-transform: uppercase;
    line-height: normal;
    color: #78FDFF;
    /* background: linear-gradient(89.99deg, #FEFEFE 5.13%, #BBFEFE 33.96%, #78FDFF 49.6%, #BBFDFF 65.23%, #FEFEFE 93.72%); */
    background: linear-gradient(89.99deg, #FEFEFE 0%, #BBFEFE 20%, #78FDFF 50%, #BBFDFF 75%, #FEFEFE 100%);
    /* background-image: linear-gradient(89.99deg, #FEFEFE 0%, #BBFEFE 20%, #78FDFF 50%, #BBFDFF 75%, #FEFEFE 100%); */
    /* background-size: 200% 200%; */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  /* animation: move 5s linear infinite; */
}
@-webkit-keyframes move {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}
@-moz-keyframes move {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}
@keyframes move {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}


.banner-section .content-box .caption p{
    font-size: 1.3rem;
}
.banner-section .content-box .caption a{
    color: #111;
}
.banner-section .image-box{
    position: relative;
    height: 100%;
}
.banner-section .image-box figure{
    width: calc(100% - 85px);
    margin-left: auto;
    margin-top: -10px;
    position: absolute;
    right: 0;
}
.banner-section .image-box figure img{
    width: 100%;
}

/* - about section - */
.about-section .heading-wrap{
    position: relative;
}
.about-section .heading-wrap .quote-img{
    height: calc(100% - 10px);
    position: absolute;
    top: 0;
    left: 0;
}

/* - humanUpgrade-section - */
.humanUpgrade-section{
    overflow: hidden;
}
/* column-block-1 */
.column-block-1{
    position: relative;
    height: 360px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 40px;
    padding: 40px 30px 30px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}
.column-block-1::before{
    content: "";
    color: #fff;
    background: linear-gradient(270deg, rgba(217, 217, 217, 0.1) 10%, rgba(26, 32, 51, 0.8) 40%, rgba(26, 32, 51, 1) 90%);
    position: absolute;
    top: 0;
    left: 0;
    width: 92%;
    height: 100%;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}
.column-block-1 .caption {
    width: 90%;
}
.column-block-1 p{
    width: 60%;
}
.column-block-1 .title{
    font-size: 1.4rem;
    margin-bottom: 40px;
}
.column-block-1 .sub-title{
    color: #fff;
    font-size: 2.3rem;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
/* swiperSlider-1 */
.humanUpgrade-section .swiperSlider-1{
    margin: 0 -120px;
}
.humanUpgrade-section .swiperSlider-1 .swiper-slide {
    padding: 20px 0;
    transition: all 200ms linear;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.humanUpgrade-section .swiperSlider-1 .swiper-slide.swiper-slide-active {
    transform: scale(1.1);
}
.humanUpgrade-section .swiperSlider-1 .swiper-slide.swiper-slide-active .column-block-1 p{
    font-size: 15px;
}
.navigation{
    position: relative;
    background: #D9D9D9;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 0 3px;
    margin: 0 auto;
}
.navigation div[class*="swiper-button"]{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: inline-block;
    width: 35px;
    height: auto;
    padding: 2px 10px 5px;
    margin: 0;
}
.navigation div[class*="swiper-button"] svg path{
    fill: #111;
}
.navigation .swiper-pagination{
    display: inline-block;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

/* - wellness-section - */
.wellness-section .column-block-2 .content{
    padding: 40px 60px;
}
.wellness-section .column-block-2 figure{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 70px;
    margin-bottom: 15px;
}
.wellness-section .column-block-2 .title{
    font-size: 1.4rem;
    line-height: normal;
    margin-bottom: 5px;
}
.wellness-section .column-block-2 .link{
    color: var(--light-primary-color);
    font-size: 1.2rem;
    text-decoration: underline;
}


/* - cta-section-3 - */
.cta-section-3 .img-wrapper{
    position: relative;
}
.cta-section-3 figcaption{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 30px;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 25px;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 22%, rgba(102, 102, 102, 0) 80%);
    width: calc(100% - 25px);
    height: 40%;
}
.cta-section-3 figcaption img{
    width: 165px;
}
/* .cta-section-3 .img-wrapper::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 25px;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 21.6%, rgba(102, 102, 102, 0) 79.21%);
    width: calc(100% - 25px);
    height: 40%;
} */


/* - imageGallery-section - */
.imageGallery-section .swiperSlider-2{
    position: relative;
    border-radius: 0 50px 0 50px;
}
.imageGallery-section .swiperSlider-2 .swiper-slide{
    margin-bottom: 70px;
}
.imageGallery-section .swiperSlider-2 .swiper-slide.swiper-slide-active{
    border-bottom-left-radius: 50px;
    overflow: hidden;
}
.imageGallery-section .navigation{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    text-align: center;
    padding: 3px 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.imageGallery-section .navigation div[class*="swiper-button"] .swiper-navigation-icon{
    display: none;
}
.imageGallery-section .navigation div[class*="swiper-button"]{
    flex: 0 0 auto;
    position: relative;
    background-color: #fff;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    /* padding: 2px 10px 5px; */
    border-radius: 100%;
    margin: 0;
}
.imageGallery-section .navigation div[class*="swiper-button"] i{
    color: #C4C4C4;
}
.imageGallery-section .navigation div[class*="swiper-button"]:hover i{
    color: var(--light-primary-color);
}
.imageGallery-section .navigation .swiper-pagination{
    display: inline-flex;
    align-items: center;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 8px;
}
.imageGallery-section .navigation .swiper-pagination::before,
.imageGallery-section .navigation .swiper-pagination::after{
    content: "";
    display: flex;
    width: 25px;
    height: 1px;
    background-color: #111;
}
.imageGallery-section .navigation .swiper-pagination::before{
    margin-right: 4px;
}
.imageGallery-section .navigation .swiper-pagination::after{
    margin-left: 4px;
}
.imageGallery-section .navigation .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--light-primary-color);
}
/*  */
.imageGallery-section .img-box{
    display: block;
    width: 100%;
    height: 450px;
}
.imageGallery-section .img-box img{
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* - footer - */
footer{
    position: relative;
    color: #fff;
    background: linear-gradient(90deg, #004E67 0%, #00202E 100%);
    clip-path: polygon(0 100px, 100% 0, 100% 100%, 0% 100%);
    padding: 160px 0 0;
}
footer::before{
    content: "";
    background:  url(../images/bg/footer-bg-img.svg) no-repeat right center / contain;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 400px;
    background-blend-mode: color-dodge;
    mix-blend-mode: color-dodge;
    z-index: -1;
}
footer a{
    color: #fff;
}
.social-media{
    display: flex;
    column-gap: 6px;
}
.social-media li a{
    font-size: 1.4rem;
    display: block;
    padding: 2px 6px;
}
/*  */
footer .widget .title{
    font-size: 1.4rem;
}
footer .widget .links li a{
    display: block;
    position: relative;
    padding: 2px 10px 2px 22px;
    margin-bottom: 5px;
}
footer .widget .links li a:hover{color: #2BE4F6;}
footer .widget .links li img{
    position: absolute;
    top: 7px;
    left: 0;
}
footer .widget .contact-list li{
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}
footer .widget .contact-list li .icon{
    color: var(--light-primary-color);
    position: absolute;
    top: 2px;
    left: 0;
} 

/* copyright */
footer .copyright{
    border-top: 1px solid #fff;
}
footer .copyright .font-nanum-pen-script{
    position: relative;
    font-family: "Nanum Pen Script", cursive;
    color: var(--light-primary-color);
    font-size: 1.3rem;
    top: 2px;
}


/* - whatsapp-btn, call-btn, back-to-top - */
.whatsapp-btn, .call-btn, .back-to-top{
    position: fixed;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    z-index: 100;
}
.whatsapp-btn:hover, .call-btn:hover, .back-to-top:hover{
    transform: scale(1.1);
}
.whatsapp-btn, .call-btn{
    width: 40px;
    height: 40px;
    left: 30px;
    bottom: 60px;
}
/*  */
.whatsapp-btn{
    bottom: 118px;
}
/* */
.back-to-top{
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    right: 30px;
    bottom: 60px;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--light-primary-color);
}
.back-to-top img{
    height: 20px;
}


/* -- page banner -- */
.page-banner-section{
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 460px;
}
/* - breadcrumb - */
.breadcrumb{justify-content: end;}
.breadcrumb .breadcrumb-item a{
    color: #0A9BA9;
}

/* highlight-section-1 */
.highlight-section-1 figure{
    width: 220px;
    height: 220px;
    line-height: 220px;
    border-radius: 100%;
    text-align: center;
    background-color: var(--light-primary-color);
    transition: all 0.3s ease-in-out;
}
.highlight-section-1 figure img{
    max-width: 60%;
}
.highlight-section-1:hover figure{background-color: #0A9BA9;}

/* infographic-1 */
.infographic-1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.infographic-1 li{
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(100% / 5 - 5px);
    padding: 0 10px;
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.infographic-1 li *{transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);}
.infographic-1 li figure{
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 100%;
    border: 6px solid #E4E4E4;
    margin: 0 auto 60px;
}
.infographic-1 li figure img{
    max-width: 70%;
}
.infographic-1 li figure::after, .infographic-1 li figure::before{
    background-color: #E4E4E4;
    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.infographic-1 li figure::after{
    content: "";
    width: 4px;
    height: 40px;
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
}
.infographic-1 li figure::before{
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    bottom: -55px;
    transform: translateX(-50%);
}
.infographic-1 li .content-wrap .title{
    color: #00374A;
    font-size: 1.3rem;
}
.infographic-1 li:hover figure{border-color: var(--light-primary-color);}
.infographic-1 li:hover figure::after, .infographic-1 li:hover figure::before{background-color: var(--light-primary-color);}
/* .infographic-1 li:hover figure img{max-width: 70%;} */
/*  */


/* caseStudy-section */
.caseStudy-section{
    background: url(../images/icons/quote-icon.svg) no-repeat center 60%, rgba(0, 71, 97, 1);
    background-size: 450px;
}
.caseStudy-section .heading{
    line-height: 1;
}
.caseStudy-section .sub-heading{
    color: var(--secondary-color);
    display: inline-block;
    background-color: #fff;
    padding: 6px 20px;
    border-radius: 50px;
}
.caseStudy-section .highlight{
    color: #4DE5F6;
    font-size: 1.8rem;
    line-height: 1.3;
}

/* commonMyths-section */
.commonMyths-section .column{
    position: relative;
    font-size: 1.4rem;
    line-height: 1.3; 
}
.commonMyths-section .column:not(:last-child)::after{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #FFFFFF 4.81%, #054467 33.65%, #054467 64.9%, #FFFFFF 100%);
    position: absolute;
    top: 0;
    right: -14px;
}
.commonMyths-section .column .title{
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    background-color: #E5F8FF;
    padding: 10px 28px;
    border-radius: 50px;
}
.commonMyths-section .column .title img{
    height: 20px;
    margin-right: 8px;
}

/* cta-block */
.cta-block{
    font-size: 1.4rem;
    padding: 30px 40px 35px;
}
.cta-block span{
    color: #57F0FF;
}
.cta-block .title{
    font-size: 2.2rem;
    line-height: normal;
}
.cta-block .btn-light{
    color: #003041;
}

/* pioneer-section */

/* design-block-1 */
.design-block-1{
    display: flex;
    flex-wrap: wrap;
    background-color: #E8ECED;
}
.design-block-1 .heading-wrap{padding: 30px;}
.design-block-1 .heading-wrap span{color: #2BD2E3;}
.design-block-1 figure{max-height: 400px;}

/* quote-block-1 */
.quote-block-1{
    position: relative;
    background: url(../images/bg/vector-bg-img-1.svg) no-repeat top left, url(../images/bg/vector-bg-img-2.svg) no-repeat right bottom, rgba(0, 71, 97, 1);
    background-size: 370px, 370px;
}
.quote-block-1 p{
    font-size: 2.1rem;
}
.quote-block-1 .highlight{
    color: #2BD2E3;
    font-size: 3rem;
}

/* about-book-section */
.about-book-section .column{
    position: relative;
}

/* infographic-2 */
.infographic-2{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.infographic-2 .content{
    border: 3px solid #00374A;
    border-radius: 10px;
}
.infographic-2 .content figure{
    text-align: center;
    padding: 10px;
}
.infographic-2 .content .title{
    color: #fff;
    font-size: 1.4rem;
    background-color: #00374A;
    padding: 4px 5px;
}
.infographic-2 .column{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.infographic-2 .column .circle{
    /* padding: 16px; */
    flex: 0 0 50%;
    margin: 0 -45px;
}
.infographic-2 .column .circle .round{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    background-color: var(--light-primary-color);
    width: 200px;
    height: 200px;
    border-radius: 100%;
    line-height: 0.9;
    margin: 0 auto;
}
.infographic-2 .column .line{
    flex: 0 0 30%;
    min-height: 280px;
}
.infographic-2 .column .line:nth-child(1){
    background: url(../images/vector/half-circle-line-1.svg) no-repeat center right / contain;
}
.infographic-2 .column .line:nth-child(3){
    background: url(../images/vector/half-circle-line-2.svg) no-repeat center / contain;
}

/* column-block-3 */
.column-block-3{
    position: relative;
    padding: 50px 0 0 40px;
    height: 100%;
}
.column-block-3 *{
    transition: all 0.3s ease-in-out;
}
.column-block-3 .content{
    position: relative;
    height: 100%;
    padding: 60px 20px 20px;
    border: 1px solid var(--primary-color);
}
.column-block-3 .content figure{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    border: 8px solid var(--light-primary-color);
    z-index: 1;
}
.column-block-3 .content figure img{
    height: 46px;
}
.column-block-3 .content::before,
.column-block-3 .content::after{
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}
.column-block-3 .content::before{
    bottom: 0;
    left: -15px;
    width: 1px;
    height: calc(100% + 30px);
}
.column-block-3 .content::after{
    content: "";
    position: absolute;
    top: -15px;
    right: 0;
    width: calc(100% + 30px);
    height: 1px;
}
.column-block-3:hover .content{
    border-color: var(--light-primary-color);
}
.column-block-3:hover .content figure{
    background-color: var(--secondary-color);
    transform: translateX(-50%) scale(1.06);
}
.column-block-3:hover .content figure{
    background-color: var(--primary-color);
    border-color: #2BD2E3;
}
.column-block-3:hover .content::before,
.column-block-3:hover .content::after{background-color: var(--light-primary-color);}

/* infographic-3 */
.infographic-3{
    display: flex;
    flex-wrap: wrap;
}
.infographic-3 li{
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
}
.infographic-3 li *{transition: all 0.3s ease-in-out;}
.infographic-3 li figure{
    margin: 0 auto 10px;
}
.infographic-3 li figure img{
    width: 130px;
    transform: scale(1);
}
.infographic-3 li .title{
    position: relative;
    font-size: 1.3rem;
    color: #3BE3F4;
    padding-bottom: 15px;
}
.infographic-3 li .title::after{
    content: "";
    width: 70%;
    height: 1px;
    opacity: 0.3;
    background: linear-gradient(90deg, #004761 3.37%, #FFFFFF 53.85%, #004761 100%);;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    transition: all 0.3s ease-in-out;
}
.infographic-3 li:hover .title::after{
    width: 100%;
}
.infographic-3 li:hover figure img{
    transform: scale(1.06);
}

/* block-design-1 */
.block-design-1{
    position: relative;
    border: 1px solid var(--primary-color);
    border-radius: 0 50px 0 50px;
    overflow: hidden;
}
.block-design-1::after{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #F9F9F9 6.73%, #054467 53.85%, #F9F9F9 100%);
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}
.block-design-1 ul li{
    padding: 25px 15px 25px 55px;
    border-top: 1px solid var(--primary-color);
    margin-top: -1px;
}
.block-design-1 .list-style-circle li{
    display: inline-flex;
    position: relative;
    margin-bottom: 0;
}
.block-design-1 .list-style-circle li::before{
    content: "";
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    left: -10px;
    border-radius: 100%;
}

/* column-block-4 */
.column-block-4{
    padding-block: 25px;
}
.column-block-4.column-1{
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}
.column-block-4.column-2{
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.column-block-4 .title{
    background-color: var(--secondary-color);
    color: #fff;
    font-size: 1.5rem;
    padding: 10px 25px;
}
.column-block-4 .list-style-icon-1 li .icon{
    width: 20px;
    height: 20px;
}
.column-block-4 .list-style-icon-1.reverse li{
    padding-left: 0;
    padding-right: 28px;
}
.column-block-4 .list-style-icon-1.reverse li .icon{
    left: auto;
    right: 0;
}
.column-block-4 ul li:last-child{margin-bottom: 0;}

/* info-block-1 */
.info-block-1 figure{margin: -35px 0 -100px;}
.info-block-1 figure img{max-width: 460px;}
.info-block-1 .content .title{color: #6FEAF6;}
.info-block-1 .content p span{color: #2BE4F6;}

/* infographic-4 */
.infographic-4, .infographic-4 ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.infographic-4 ul li{
    display: flex;
    justify-content: center;
    align-items: end;
    padding: 0 10px;
    flex: 1 0 auto;
}
.infographic-4 ul li .content{
    position: relative;
    width: 220px;
    height: 220px;
    z-index: 1;
}
.infographic-4 ul li .content .circle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 1.2rem;
    line-height: 1.3;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: var(--secondary-color);
    padding: 0 50px;
    z-index: 1;
}
.infographic-4 ul li .content p{
    margin-bottom: 10px;
}
.infographic-4 ul li .content img{
    width: 65px;
}
.infographic-4 ul li .content::after{
    content: "";
    background-color: var(--light-primary-color);
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.infographic-4 ul li .content{
    position: relative;
    width: 220px;
    height: 220px;
    z-index: 1;
}
.infographic-4 ul li:nth-child(2) .content{
    width: 190px;
    height: 190px;
}
.infographic-4 ul li:nth-child(2) .content .circle{
    padding: 0 30px;
}
.infographic-4 ul li:nth-child(2) .content::after{
    right: auto;
    left: 0;
    bottom: 0;
}

/* infographic-5 */
.infographic-5{
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.infographic-5::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: url(../images/vector/wave-dashed-line.svg) no-repeat center / contain;
}
.infographic-5 li{
    display: flex;
    flex-direction: column;
    padding: 20px 20px 0;
}
.infographic-5 li *{transition: all 0.3s ease-in-out;}
.infographic-5 li figure{margin: 0 auto 10px;}
.infographic-5 li figure img{
    max-width: 90%;
    transform: scale(1);
}
.infographic-5 li .content-wrap{
    max-width: 80%;
    margin: 0 auto;
}
.infographic-5 li:hover figure img{
    transform: scale(1.06);
}

/* icon-block-1 */
.icon-block-1 *{transition: all 0.3s ease-in-out;}
.icon-block-1 .icon{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 10px;
}
.icon-block-1 .icon img{max-width: 60%;}
.icon-block-1:hover .icon{background-color: var(--light-primary-color);}

/* block-list-style-1 */
.block-list-style-1{
    display: inline-block;
    position: relative;
    padding: 40px 55px;
}
.block-list-style-1 li{
    font-size: 1.4rem;
}
.block-list-style-1 li:not(:last-child){
    margin-bottom: 25px;
}
.block-list-style-1::before{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid var(--light-primary-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
}

/* column-block-5 */
.column-block-5 .column{
    height: 100%;
    background-color: #F9F9F9;
    border-bottom: 6px solid var(--secondary-color);
}
.column-block-5 .column .number{
    background-color: var(--secondary-color);
    position: relative;
    padding: 11px 20px;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.column-block-5 .column .number::after{
    content: "";
    border: 20px solid transparent;
    border-bottom: 0;
    border-top: 25px solid var(--secondary-color);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
}
.column-block-5 .column .content{
    padding: 20px 40px;
}
.column-block-5:nth-child(even) .column{
    border-bottom-color: var(--light-primary-color);
}
.column-block-5:nth-child(even) .column .number::after{
    border-top-color: var(--light-primary-color);
}
.column-block-5:nth-child(even) .column .number{
    background-color: var(--light-primary-color);
}

/* block-design-2 */
.block-design-2{
    position: relative;
    border: 1px solid var(--primary-color);
    overflow: hidden;
}
.block-design-2::after{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, #F9F9F9 6.73%, #2AADBA 53.85%, #F9F9F9 100%);
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}
.block-design-2 ul{counter-reset: num;}
.block-design-2 ul li{
    padding: 25px 15px 25px 55px;
}
.block-design-2 .list-style-circle li{
    display: inline-flex;
    position: relative;
    margin-bottom: 0;
}
.block-design-2 .list-style-circle li::before{
    counter-increment: num;
    content: counter(num);
    position: relative;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    outline-width: 3px;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 26px;
    flex: 0 0 auto;
    top: 5px;
    left: -10px;
    border-radius: 100%;
}

/*  */
.infographic-6{
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.infographic-6 li *{transition: all 0.3s ease-in-out;}
.infographic-6 li .image-box{
    position: relative;
    margin: 30px 0;
}
.infographic-6 li figure{
    position: relative;
    background-color: #fff;
    width: 140px;
    height: 165px;
    line-height: 170px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    margin: 0 auto;
}
.infographic-6 li .outline{
    width: 210px;
    height: 210px;
    background: url(../images/hexagon-shape-outline.svg) no-repeat center / contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.infographic-6 li .arrows{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.infographic-6 li .arrows::before,.infographic-6 li .arrows::after{
    content: "";
    width: 60%;
    height: 44px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    transition: all 0.3s ease-in-out;
}
.infographic-6 li .arrows::before{
    background: url(../images/arrowup-rounded-outline-icon.svg) no-repeat center / contain;
    top: -26px;
}
.infographic-6 li .arrows::after{
    background: url(../images/arrowup-rounded-outline-icon.svg) no-repeat center / contain;
    bottom: -27px;
    transform: translateX(-50%) rotate(180deg);
    z-index: -1;
}
.infographic-6 li:hover .outline{
    width: 192px;
    height: 192px;
}
.infographic-6 li:hover .arrows::before{
    top: -28px;
    height: 24px;
}
.infographic-6 li:hover .arrows::after{
    bottom: -28px;
    height: 24px;
}

/* infographic-7 */
.infographic-7{
    display: flex;
    flex-wrap: wrap;
}
.infographic-7 li{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 100px 20px 0;
}
.infographic-7 li *{transition: all 0.3s ease-in-out;}
.infographic-7 li{
    margin: 0 -5px;
}
.infographic-7 li figure{
    position: relative;
    width: 180px;
    height: 180px;
    line-height: 180px;
    background-color: var(--light-primary-color);
    border-radius: 100%;
    margin: 0 auto 40px;
}
.infographic-7 li:nth-child(1) figure::before{
    content: "";
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translateX(-50%) scale(1.2);
    width: 200px;
    height: 180px;
    background: url(../images/vector/curved-line-img-1.svg) no-repeat center bottom / contain;
}
.infographic-7 li:nth-child(4) figure::before{
    content: "";
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%) scale(1.2);
    width: 200px;
    height: 180px;
    background: url(../images/vector/curved-line-img-3.svg) no-repeat center top / contain;
}
.infographic-7 li figure img{
    max-width: 90%;
    transform: scale(1);
}
.infographic-7 li:nth-child(even){
    padding-bottom: 100px;
}
.infographic-7 li:nth-child(even) figure{
    margin: 40px auto 0;
}
.infographic-7 li .content-wrap{
    max-width: 80%;
    margin: 0 auto;
}
.infographic-7 li:hover figure img{
    transform: scale(1.06);
}

/* partners-section */

/* case-study-block */
.case-study-block figure{
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
}
.case-study-block figure img{
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* quote-block-2 */
.quote-block-2{
    position: relative;
    color: #fff;
    font-size: 1.4rem;
    background-color: var(--light-primary-color);
    position: relative;
    padding: 30px 40px;
    border-radius: 200px;
}
.quote-block-2::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--primary-color);
    width: 96%;
    height: 99%;
    border-radius: 110px;
}

/* -- contact page -- */
/* block-list-style-2 */
.block-list-style-2{
    color: #fff;
    position: relative;
    background-color: var(--primary-color);
    padding: 20px 30px;
}
.block-list-style-2 .title{color: #00E8FF;}
.block-list-style-2::after{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 1px solid #0FE0FF;
}

/* form-wrapper */
.form-wrapper{
    padding: 30px 30px;
    border: 1px solid var(--light-primary-color);
}
/* form */
.form-control:focus{
    border-color: var(--secondary-color);
    box-shadow: none;
}
.form-control{
    padding: 0.6rem .75rem;
}
.form-floating .form-control{
    padding: 0.8rem .75rem;
    min-height: auto;
    height: calc(3.2rem);
    border-color: var(--light-primary-color);
}
.form-floating > label{
    padding: 0.8rem .75rem;
}
.form-floating label{
    color: var(--primary-color);
}
.form-floating .form-control:required + label::after{
    content: "*";
    color: #FF0000;
    position: absolute;
    margin-left: 1px;
}
.form-floating textarea.form-control{height: 140px;}
.form-group label{
    font-size: 0.8rem;
}
/* .form-floating .form-control::-moz-placeholder{color: var(--primary-color);}
.form-floating .form-control::-webkit-placeholder{color: var(--primary-color);}
.form-floating .form-control::-webkit-input-placeholder{color: var(--primary-color);}
.form-floating .form-control::placeholder{color: var(--primary-color);} */

/* modal */
.modal .modal-content{
    border: 0;
    border-radius: 20px;
}
.modal .modal-header{
    color: var(--primary-color);
    justify-content: center;
    padding: 1rem 2rem;
    border-bottom: 0;
}
.modal .modal-header .close-btn{
    position: absolute;
    top: 5px;
    right: 10px;
}
























/* ---- Responsive ---- */
/* min-width */
@media only screen and (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1330px;
    }
  
    .page-banner-section{height: 650px;}
}

@media only screen and (min-width: 992px){
    .border-lg-end{border-right: 1px solid;}

    /*  */
    header .nav-wrap{
        width: auto;
        height: auto;
        max-height:fit-content;
    }
    header .nav-wrap .navbar-nav{
        transform: translateX(0);
        visibility: hidden;
        max-width: 0;
        opacity: 0;
    }
    header .nav-wrap .navbar-nav .nav-item{
        display: flex;
        align-items: center;
        height: 100%;
        /* flex-direction: column; */
        visibility: hidden;
        max-width: 0;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.2s cubic-bezier(0.4, 0.12, 0.2, 1);
    }
    header .nav-wrap .navbar-nav .nav-item .nav-link{
        display: flex;
        align-items: center;
        height: 100%;
        padding: 1rem 1.2rem;
        flex-shrink: 0;
    }
    header .nav-wrap .navbar-nav .nav-item .nav-link::before{
        content: "";
        width: 90%;
        height: 30px;
        border-radius: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    header .nav-wrap .navbar-nav .nav-item .nav-link:hover{
        color: var(--primary-color);
    }
    header .nav-wrap .navbar-nav .nav-item .nav-link:hover::before{
        background-color: #fff;
    }
    header .nav-wrap .navbar-nav .nav-item .nav-link.active{
        color: var(--primary-color);
    }
    header .nav-wrap .navbar-nav .nav-item .nav-link.active::before{
        background-color: #fff;
    }
    header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle::after{
        display: none;
    }
    /* .nav-wrap:hover */
    header .nav-wrap:hover .menu-btn{
        width: 0;
        opacity: 0;
    }
    header .nav-wrap:hover .navbar-nav .nav-item{
        transform: translateX(0);
        max-width: 200px;
        opacity: 1;
        visibility: visible;
    }
    header .nav-wrap:hover .navbar-nav{
        visibility: visible;
        transform: translateX(30px);
        max-width: 100%;
        width: 100%;
        opacity: 1;
    }
    header .nav-wrap:hover{
        width: 100%;
        height: auto;
        max-height: 80vh;
        padding: 8px 30px 20px;
    }
    /*  */
    header .nav-wrap:hover .content-wrapper{
        display: flex;
        flex-direction: column;
        max-width: 100%;
        height: auto;
        visibility: visible;
        opacity: 1;
        padding: 40px 0 10px;
        /* margin-top: 10px; */
        overflow: hidden;
    }
    header .nav-wrap:hover .content-wrapper > *{
        height: auto;
    }
    header .nav-wrap .menu-content{
        padding-left: 36px;
    }
    header .nav-wrap .menu-content .title{
        font-size: 1.5rem;
    }
    header .nav-wrap .menu-content .title .icon{
        width: 26px;
        height: 26px;
        line-height: 22px;
        top: 0px;
        left: -34px;
    }
    
    /* header .nav-wrap.expand{
        background-color: #E34933;
    } */

    .infographic-1 li{
        justify-content: end;
        padding-top: 190px;
    }
    .infographic-1 li:nth-child(even){
        flex-direction: column-reverse;
        justify-content: start;
        padding-top: 0;
    }
    .infographic-1 li:nth-child(even) figure{
        margin: 62px auto 0px;
    }
    .infographic-1 li:nth-child(even) figure::after{
        top: -40px;
    }
    .infographic-1 li:nth-child(even) figure::before{
        top: -55px;
    }
    
    .infographic-3 li{padding-top: 100px;}
    .infographic-3 li:nth-child(even){
        flex-direction: column-reverse;
        justify-content: start;
        padding-top: 0;
    }
    .infographic-3 li:nth-child(even) figure{
        margin: 10px auto 0;
    }

    .infographic-5 li{padding-top: 100px;}
    .infographic-5 li:nth-child(even){
        flex-direction: column-reverse;
        padding-top: 0;
        padding-bottom: 100px;
    }
    .infographic-5 li:nth-child(even) figure{
        margin: 10px auto 0;
    }

    .infographic-7 li:nth-child(even){
        padding-bottom: 100px;
    }
    
}

@media only screen and (min-width: 768px){
    .border-md-end{border: 1px solid;}

    .infographic-7 li:nth-child(2)::before{
        content: "";
        position: absolute;
        top: 49.5%;
        left: 98%;
        transform: translate(-50%, -50%) scale(1.2);
        width: 415px;
        height: 210px;
        background: url(../images/vector/curved-line-img-2.svg) no-repeat center bottom / contain;
    }
    .infographic-7 li:nth-child(even){
        flex-direction: column-reverse;
        padding-top: 0;
    }
}

/* max-width */
@media only screen and (max-width: 1399px){
    .banner-section{
        height: 680px;
        margin-bottom: 60px;
    }
    .banner-section .image-box figure{
        width: calc(100% - 140px);
    }
}

@media only screen and (max-width: 1199px){
    .banner-section{
        height: 600px;
    }
    .banner-section .content-box .caption .heading{
        font-size: 5.2em;
    }
    .banner-section .content-box .caption p {
        font-size: 1.2rem;
    }
    .banner-section .image-box figure{
        width: calc(100% - 160px);
    }
    
    .wellness-section .column-block-2 .content{
        padding: 20px 30px;
    }

    .cta-section-3 figcaption{
        font-size: 1.2rem;
    }

    footer{
        padding: 120px 0 0;
        clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);
    }

    .infographic-4 ul{flex-wrap: nowrap;}
    .infographic-4 ul li .content{
        width: 190px;
        height: 190px;
    }
    .infographic-4 ul li:nth-child(2) .content{
        width: 160px;
        height: 160px;
    }
    .infographic-4 ul li .content .circle{
        font-size: 1rem;
        padding: 0 30px;
    }
    .infographic-4 ul li:nth-child(2) .content .circle{
        font-size: 0.8rem;
        padding: 0 20px;
    }
    .infographic-4 ul li .content img {
        width: 50px;
    }

    .block-list-style-1{padding: 20px 35px;}

    .block-design-2 .list-style-circle li{padding: 20px 15px 20px 40px;}

    .infographic-7 li figure{
        width: 160px;
        height: 160px;
        line-height: 160px;
        margin: 0 auto 20px;
    }
    .infographic-7 li:nth-child(even) figure {
       margin: 20px auto 0;
    }
    .infographic-7 li:nth-child(2)::before{
        width: 340px;
        height: 175px;
        top: 49.5%;
        left: 97%;
    }
    .infographic-7 li:nth-child(1) figure::before{
        width: 165px;
        height: 150px;
    }
    .infographic-7 li:nth-child(4) figure::before{
        width: 165px;
        height: 150px;
    }
    .infographic-7 li .content-wrap{
        max-width: 100%;
    }
}

@media only screen and (max-width: 991px){
    .heading{
        font-size: 3rem;
    }
    .sub-heading{
        font-size: 2rem;
    }

    .img-wrapper{
        padding: 15px 0 15px 15px;
    }
    .img-wrapper::before{
        width: calc(100% - 20px);
    }
    .img-wrapper.reverse-border{
        padding: 15px 15px 15px 0;
    }

    header .nav-wrap{
        justify-content: space-between;
    }
    header .navbar .navbar-nav{
        height: auto;
        max-height: fit-content;
    }
    header .navbar .navbar-nav .nav-item{
        margin-bottom: 5px;
        border-bottom: 1px solid #10718F;
    }
    header .navbar .navbar-nav .nav-item:last-child{
        border-bottom: 0;
    }
    header .navbar .navbar-nav .nav-item .nav-link{
        padding: 0.7rem 4.5rem 0.7rem 0;
    }
    header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle{
        position: absolute;
        top: 0;
        right: 0;
        margin-left: 0;
        padding: 8px 20px 8px 40px;
    }
    header .dropdown-menu{
        margin-bottom: 8px;
    }
    header .nav-wrap .menu-content .title{
        padding-left: 24px;
        display: none;
    }
    header .nav-wrap .menu-content .title .icon{
        top: -2px;
        left: -4px;
    }
    header .nav-wrap .menu-content{
        padding-left: 0;
    }
    header .nav-wrap:hover .navbar-nav .nav-item{
        border-color: #055b75;
    }

    .banner-section .image-box figure{
        width: calc(100% - 70px);
        margin-top: 50px;
    }
    .banner-section .content-box .caption .heading{
        font-size: 4em;
    }
    .banner-section .content-box .caption p{
        font-size: 1rem;
    }

    .imageGallery-section .img-box{
        height: 340px;
    }
    .imageGallery-section .swiperSlider-2 .swiper-slide{
        margin-bottom: 60px;
    }
    
    .humanUpgrade-section .swiperSlider-1{
        margin: 0 -250px;
    }
    .column-block-1{
        height: 300px;
        padding: 30px 20px 20px;
    }
    .column-block-1 .title {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    .column-block-1 .sub-title{
        font-size: 1.9rem;
    }
    .column-block-1 .caption{
        width: 60%;
    }
    .column-block-1 p{
        width: 80%;
    }

    .wellness-section .column-block-2 .content{
        padding: 20px 10px;
    }

    .cta-section-3 figcaption{
        height: 60%;
        padding-bottom: 20px;
        width: calc(100% - 15px);
        bottom: 15px;
    }
    
    footer{
        padding: 80px 0 0;
        clip-path: polygon(0 60px, 100% 0, 100% 100%, 0% 100%);
    }

    .highlight-section-1 figure{
        width: 180px;
        height: 180px;
        line-height: 180px;
    }

    .infographic-1 li{
        flex: 0 0 calc(100% / 3);
        margin-bottom: 30px;
    }
    
    .infographic-2 .column .line{flex: 0 0 32%;}
    .infographic-2 .column .circle{
        margin: 0 -38px;
    }
    .infographic-2 .column .circle .round{
        font-size: 1.4rem;
        width: 180px;
        height: 180px;
    }

    .info-block-1 figure{margin: 15px 0;}
    .info-block-1 figure img{max-width: 300px;}

    
    .infographic-4 ul{flex-wrap: nowrap;}
    .infographic-4 ul li .content{
        width: 170px;
        height: 170px;
    }
    .infographic-4 ul li:nth-child(2) .content{
        width: 140px;
        height: 140px;
    }
    .infographic-4 ul li .content .circle{
        font-size: 1rem;
        padding: 0 20px;
    }
    .infographic-4 ul li:nth-child(2) .content .circle{
        font-size: 0.8rem;
        padding: 0 10px;
    }

    .infographic-5::before{display: none;}

    .infographic-7 li{
        padding: 60px 10px 0;
        /* margin: 0 -4px; */
    }
    .infographic-7 li:nth-child(even){padding-bottom: 60px;}
    .infographic-7 li figure{
        width: 130px;
        height: 130px;
        line-height: 130px;
    }
    .infographic-7 li figure::before {
        width: 132px;
        height: 120px;
    }
    .infographic-7 li::before{display: none;}
    .infographic-7 li figure::before{display: none;}
    
    .partners-section .divide-line-3 .column:nth-child(2)::after{display: none;}

    .design-block-1 .heading-wrap{padding: 20px;}
    .design-block-1 .heading-wrap .heading {font-size: 2.6rem;}

    .quote-block-1{background-size: 300px, 300px;}
    .quote-block-1 p {font-size: 1.8rem;}
    .quote-block-1 .highlight{font-size: 2.5rem;}

    .about-book-section .divide-line-2 .column:not(:last-child)::after{
        display: none;
    }
}

@media only screen and (max-width: 767px){
    .section-space {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .heading{
        font-size: 2.6rem;
    }
    .sub-heading{
        font-size: 1.5rem;
    }

    .img-outline-design{padding: 0 15px 15px 0;}
    .img-outline-design::before{
        width: calc(100% - 15px);
        height: calc(100% - 15px);
    }
    
    header .nav-wrap{
        padding: 8px 20px;
    }
    header .nav-wrap .menu-img{
        max-height: 240px;
    }

    .banner-section{
        height: 480px;
        margin-bottom: 30px;
    }
    .banner-section .content-box .caption .heading{
        font-size: 3.2em;
    }

    .about-section .heading-wrap .quote-img {
        height: calc(100% - 45px);
    }

    .humanUpgrade-section .swiperSlider-1{
        margin: 0 -300px;
    }
    .column-block-1{
        height: 280px;
        padding: 30px 20px 20px;
    }
    .column-block-1 .caption {
        width: 80%;
    }
    .column-block-1 .title {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    .column-block-1 .sub-title {
        font-size: 1.6rem;
    }

    .wellness-section .column-block-2::after{
        display: none;
    }
    .wellness-section .column-block-2 .content{
        padding: 10px 0px;
    }
    
    .highlight-section-1 .heading {
        font-size: 2rem;
    }
    .highlight-section-1 .sub-heading {
        font-size: 1.2rem;
    }
    .highlight-section-1 figure {
        width: 120px;
        height: 120px;
        line-height: 120px;
    }
    
    .infographic-1 li{
        flex: 0 0 calc(100% / 2);
        margin-bottom: 30px;
    }

    .infographic-2 .column .line{
        flex: 0 0 24%;
        min-height: 200px;
        transform: rotate(90deg);
    }
    .infographic-2 .column .circle{
        flex: 0 0 100%;
        margin: -68px 0;
    }

    .block-design-1{border-radius: 0 30px;}
    .block-design-1 ul li{
        padding: 15px 15px 15px 35px;
    }
    .list-style-circle li::before{
        width: 8px;
        height: 8px;
        outline-width: 2px;
    }

    .column-block-4.column-1,.column-block-4.column-2 {
        clip-path: none;
    }

    .column-block-4 .list-style-icon-1.reverse li{
        padding-left: 28px;
        padding-right: 0;
    }
    .column-block-4 .list-style-icon-1.reverse li .icon{
        left: 0;
        right: auto;
    }

    .info-block-1 figure{margin: 0px 0 -35px;}
    .info-block-1 figure img {max-width: 360px;}
    
    .infographic-4 ul li .content{
        width: 240px;
        height: 240px;
    }
    .infographic-4 ul li:nth-child(2) .content{
        width: 200px;
        height: 200px;
    }
    .infographic-4 ul li .content .circle{
        font-size: 1.4rem;
    }
    .infographic-4 ul li:nth-child(2) .content .circle{
        font-size: 1.1rem;
    }

    .block-list-style-1{width: 80%;}
    .block-list-style-1 li{font-size: 1.2rem;}
    .block-list-style-1 li:not(:last-child){margin-bottom: 15px;}

    .block-design-2 .list-style-circle li {padding: 15px 15px 15px 30px;}

    .infographic-7 li{padding: 10px 20px 20px!important;}
    .infographic-7 li figure{margin: 0 auto 10px!important;}

    .partners-section .divide-line-3 .column:nth-child(2)::after{display: block;}
    .divide-line-3 .column:not(:last-child)::after{
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, #F9F9F9 6.73%, #2AADBA 53.85%, #F9F9F9 100%);
        top: auto;
        bottom: 0;
        left: 0;
    }
    
    .design-block-1 .heading-wrap .heading {font-size: 2.4rem;}
    
    .quote-block-1{background-size: 220px, 220px;}
    
    .pioneer-section .divide-line-2 .column::after{display: none;}

}

@media only screen and (max-width: 575px){
    .heading{
        font-size: 2.2rem;
        line-height: 1.2;
    }
    .sub-heading{
        font-size: 1.2rem;
    }
    
    .btn{
        font-size: 0.9rem;
        padding: 4px 15px 5px;
    }
    .btn-img{
        font-size: 0.9rem;
        padding: 5px 36px 6px 15px;
    }
    .btn-img:hover{padding: 5px 33px 6px 18px;}

    .img-wrapper{
        padding: 10px 0 10px 10px;
    }
    .img-wrapper::before{
        width: calc(100% - 15px);
    }
    .img-wrapper.reverse-border{
        padding: 10px 10px 10px 0;
    }

    .banner-section{
        height: 550px;
    }
    .banner-section .content-box .caption{
        margin-bottom: 0;
    }
    .banner-section .content-box .caption .heading{
        font-size: 2.3em;
    }
    .banner-section .image-box figure{
        position: static;
        margin-top: 20px;
        margin-bottom: -220px;
    }
    
    .about-section .heading-wrap .quote-img {
        height: calc(100% - 20px);
    }
    
    .column-block-1{
        display: flex;
        align-items: center;
        height: 220px;
        padding: 10px 15px 10px;
    }
    .column-block-1 .caption {
        width: 87%;
    }
    .column-block-1 .caption p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    .column-block-1 .title {
        font-size: 0.9rem;
    }
    .column-block-1 .sub-title {
        font-size: 1.2rem;
    }

    .wellness-section .column-block-2 .content{
        padding: 0 0 10px;
    }
    .wellness-section .column-block-2 figure{
        height: 50px;
    }

    .cta-section-1 .heading{
        font-size: 1.8rem;
    }
    
    .imageGallery-section .img-box {
        height: 280px;
    }
    .imageGallery-section .swiperSlider-2{
        border-radius: 0 30px 0 30px;
    }
    .imageGallery-section .swiperSlider-2 .swiper-slide.swiper-slide-active{
        border-bottom-left-radius: 30px;
    }
    .imageGallery-section .navigation div[class*="swiper-button"]{
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    footer {
        padding: 65px 0 0;
        clip-path: polygon(0 35px, 100% 0, 100% 100%, 0% 100%);
    }

    .whatsapp-btn, .call-btn{
        left: 15px;
        bottom: 40px;
    }
    .whatsapp-btn {bottom: 100px;}
    .back-to-top{
        right: 15px;
        bottom: 40px;
    }
    
    .highlight-section-1 .sub-heading {
        font-size: 1rem;
    }
    .highlight-section-1 figure {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .infographic-1 li .content-wrap .title{
        font-size: 1.2rem;
    }
    .infographic-1 li figure{
        width: 120px;
        height: 120px;
        line-height: 120px;
        margin: 0 auto 50px;
    }
    .infographic-1 li figure img {
        max-width: 50%;
    }
    .infographic-1 li figure::before{
        width: 15px;
        height: 15px;
        bottom: -42px;
    }
    .infographic-1 li figure::after{
        height: 26px;
        bottom: -30px;
    }

    .commonMyths-section .column:not(:last-child)::after{
        display: none;
    }

    .cta-block{
        padding: 15px 20px 25px;
    }

    .infographic-2 .column .line{flex: 0 0 29%;}
    .infographic-2 .column .circle .round {
        font-size: 1.8rem;
        width: 220px;
        height: 220px;
    }
    
    .infographic-3 li figure img{width: 100px;}

    .block-design-1::after{display: none;}

    .infographic-4 ul li .content{
        width: 200px;
        height: 200px;
    }
    .infographic-4 ul li:nth-child(2) .content{
        width: 160px;
        height: 160px;
    }
    .infographic-4 ul li .content .circle{
        font-size: 1.3rem;
        padding: 0 20px;
    }
    .infographic-4 ul li:nth-child(2) .content .circle{
        font-size: 1rem;
        padding: 0 10px;
    }
    
    .infographic-5 li figure img{max-width: 65%;}
    .infographic-5 li .content-wrap{max-width: 100%;}
    
    .block-design-2::after{display: none;}

    .infographic-6 li .image-box{margin: 30px 10px;}
    .infographic-6 li figure{
        width: 120px;
        height: 145px;
        line-height: 150px;
    }
    .infographic-6 li .outline {
        width: 190px;
        height: 190px;
    }
    .infographic-6 li .arrows::before, .infographic-6 li .arrows::after{height: 38px;}
    .infographic-6 li:hover .outline {
        width: 172px;
        height: 172px;
    }
    
    .design-block-1 .heading-wrap{padding: 15px;}
    .design-block-1 .heading-wrap .heading {font-size: 1.8rem;}
    
    .quote-block-1{background-size: 180px, 180px;}
    .quote-block-1 p {font-size: 1.3rem; margin: 10px 0;}
    .quote-block-1 .highlight{font-size: 2rem;}
}

@media only screen and (max-width: 460px){
    .heading{
        font-size: 1.8rem;
        line-height: 1.2;
    }
    .sub-heading{
        font-size: 1.1rem;
    }
    .fs-lg {font-size: 1rem;}
    
    .banner-section{
        height: 480px;
    }
    .banner-section .content-box .caption .heading{
        font-size: 2.2em;
    }
    .banner-section .content-box .caption .heading + p{
        font-size: 0.9rem;  
        margin-bottom: 5px;
    }
    .banner-section .image-box figure{
        position: static;
        margin-top: 60px;
    }

    .cta-section-3 figcaption p{
        font-size: 0.9rem;
    }
    
    .infographic-7 li .content-wrap > *{font-size: 1.1rem!important;}
}