/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@100;300;400;500;600;700;800&display=swap');
/* variable */
:root {     
    /* --base-color: #813996; */
    /* --secondary-color: #0e6d6b; */
    /* --secondary-color: #f7941d; */
    --base-color: #213e5b;
    --base-color-light: rgb(33 62 91 / 5%);
    --secondary-color: #0B6E6B;
    --dark-gray: #262b35;
    --medium-gray:#868d98;
    --primary-font: 'Be Vietnam', sans-serif;
    --alt-font: "Noto Serif", serif;
}
.custom-modal .modal-body::-webkit-scrollbar {
    width: 4px;
}
.custom-modal .modal-body::-webkit-scrollbar-thumb {
    background: rgb(203 203 203 / 70%);
    border-radius: 50px;
}
.custom-modal .modal-body::-webkit-scrollbar-track {
    background: rgb(182 182 182 / 25%);
    border-radius: 50px;
}
::selection {
    background: #813996;
    color: #fff;
}
h3 {
    font-size: 2.413rem;
    line-height: 2.8rem;
}
/* reset */
body { 
    font-size: 17px;
    line-height: 1.875rem;
}
.magic-cursor{cursor:context-menu}
.mb-85 {
    margin-bottom: 5.3125rem;
}
.h-850px {
    height: 850px;
}
.opacity-5 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.3;
}
/* header */
header .logo {
    width: 12rem;
    height: 100%;
}
header .logo img {
    max-height: initial;
    height: 100%;
    width: 100%;
    object-fit: contain;
}
header.sticky .logo {
    width: 12rem;
    height: 100%;
}
header.sticky .navbar .navbar-nav .nav-link {
    font-size: 16px;
}
header.sticky .header-icon .widget-text a {
    font-size: 14px;
}
header .navbar {
    padding: 1.2rem 0;
}
header.sticky .navbar {
    padding: 0.875rem 0;
}
.navbar .navbar-nav .nav-link {
    font-size: 17px;
    font-weight: 400;
}
.navbar .navbar-nav .nav-item:hover .nav-link, 
.navbar .navbar-nav .nav-item.active .nav-link,
header.sticky .navbar .navbar-nav .nav-item:hover .nav-link, header.sticky .navbar .navbar-nav .nav-item.active .nav-link,
header a.widget-text:hover, header.sticky.sticky-active a.widget-text:hover {
    color: var(--white);
    opacity: 1;
}
header.sticky.sticky-active .header-icon a.widget-text:hover, header .header-icon a.widget-text.active, header.sticky.sticky-active .header-icon a.widget-text.active {
    color: var(--secondary-color);
}
.sticky .header-transparent .header-button .btn {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
}
.sticky .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
    color: var(--white);
    background:  var(--dark-gray);
}
header.sticky.sticky-active [data-header-hover="light"] .widget-text i {
    color: var(--white);
}
/* accordion style 02 */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    background-color: var(--base-color);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover a,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active a{
    opacity: .5;
}
/* bg color */
.bg-gradient-sherpa-blue-black {
    background-image: linear-gradient(to right top, #23248C, #22236D, #232348, #222226, #232323);
}
.bg-gradient-sherpa-black-blue {
    background-image: linear-gradient(to right top, #232323, #222226, #232348, #22236D, #23248C);
} 
/* bg transparent color */
.bg-base-color-transparent {
    background-color: rgba(87, 88, 214,.8);
}
/*  tabs style 05  */
.tab-style-05 .nav-tabs > li.nav-item {
    letter-spacing: -.5px;
}
/* accordion */
.accordion .accordion-item .accordion-header .accordion-title i {
    top: 52%;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: 25px}

/*  progress bar style 01  */
.progress-bar-style-01 .progress .progress-bar-title {
    bottom: 15px;
}
/* page title */
.page-title-extra-large h1 {
    /* font-size: 2.8rem; */
    font-size: max(2.2rem, min(3vw, 2.8rem));
    line-height: 1.2;
    font-family: var(--alt-font);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -70px;
}
.opacity-extra-medium {
    opacity: 0.4;
}
.page-title-big-typography {
    /* padding-top: 80px;
    padding-bottom: 70px; */
    padding: 9rem 20px;
}
/* separator line */
.separator-line-9px {
    height: 9px;
}
/* tag */
.tag-cloud a { 
    padding-top: 5px;
    padding-bottom: 9px;
}
/* blog comment */ 
.blog-comment li .btn-reply {
    padding-top: 5px;
    padding-bottom: 7px;
}
/* number pagination style 01 */
.pagination-style-01 .page-item .page-link {
    line-height: 42px;
}
.pagination-style-01 .page-item.active .page-link {
    background: var(--dark-gray);
    color: var(--white);
}
/* top right bottom left */
.bottom-minus-45px {
    bottom: -45px;
}
.right-minus-45px {
    right: -45px;
}
.banner-sec h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}
.banner-sec h4 {
    font-family: var(--primary-font);
    line-height: 1.2;
    letter-spacing: normal;
}
/* footer */
footer{
    background: var(--base-color);
}
footer a,
footer p,
footer a:hover{
    color: var(--white);
}

footer .footer-logo {
    width: 12rem;
}
footer .footer-logo img {
    max-height: initial;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.footer-dark a, .footer-dark p {
    color: var(--white);
}
footer ul li {
    margin-bottom: 0;
}
.footer-dark a:hover {
    color: var(--white);
}
/* model popup */
.mfp-bg {
    background: #000000;
    opacity: 0.7;
}

.hm-services .feature-box {
    display: flex;
    align-items: center;
    gap: 30px;
}
.get-quote-band h2 {
    line-height: normal;
    font-weight: 500;
}
.story-sec {
    background: var(--base-color);
}
.services-sec .services-box-style-01 {
    height: 100%;
}
.icon-xxl {
    font-size: 3.75rem;
}
.contact-form-style-03 .form-group .form-icon {
    top: 1.8rem;
}
.custom-modal .modal-header, .custom-modal .modal-body {
    padding: 0;
}
.custom-modal .modal-content {
    padding: 3rem;
}
.custom-modal .modal-header h6 {
    font-size: 1.6rem;
}
.custom-modal .modal-body {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 1rem;
}
.service-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.split-img-left .service-content {
    padding: 2rem 2.5rem 2rem 4.5rem;
}
.split-img-right .service-content {
    padding: 2rem 5.5rem 2rem 0;
}
.service-content h4 {
    line-height: 3.1rem;
    font-family: var(--alt-font);
}
.bg-fc {
    background: #fcfcfc;
}
.associate-sec {
    border-bottom: 1px solid var(--extra-medium-gray);
}
/* .icon-card {
    background: #fff;
} */
.icon-card span {
    font-size: 22px;
    font-family: var(--alt-font);
}
.feature-box-icon svg {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    max-height: 3.75rem;
    max-width: 3.75rem;
}
.feature-box-icon svg path {
    fill: var(--secondary-color);
}
/* .why-choose-sec {
    background: #fff;
} */
/* .why-choose-sec {
    background: url('../images/business-doodle.jpg') fixed center no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover;
    position: relative;
}
.why-choose-sec::before {
    content: '';
    background: #813996;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .6;
} */
.section-padding {
    padding: 110px 0;
}
.overlay-blur {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -o-backdrop-filter: blur(4px);
    -moz-backdrop-filter: blur(4px);
    -ms-backdrop-filter: blur(4px);
}
.contact-sec h3 {
    font-family: var(--alt-font);
}
.fancy-text-box-style-02 .feature-box-icon h5 {
    font-size: 1.875rem;
}
.services-box-style-01 ul li {
    line-height: 1.575rem;
}
#file2_err {
    display: none;
}
.success-msg, #file2_err {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 400;
    /*line-height: 1.4;*/
    padding: 4rem 3rem;
    color: var(--dark-gray);
    background: var(--solitude-blue);
}
div.error {
    font-size: 10px;
    color: red;
}

.loading-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1; 
}
/* Initially hide the spinner, you can toggle visibility with JS */
#loadingSpinner {
  display: none;
}
/* The spinner itself */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1); /* Light color for background */
  border-top: 4px solid var(--base-color); /* Blue color for the rotating part */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite; /* Infinite rotation */
}


.feature-box{
    height: 100%;
}

.cta-link{
    text-decoration: underline;
}

.bg-spring-wood{
    background: var(--solitude-blue);
}

.hm-intro-sec .feature-box.feature-box-left-icon-middle{
    align-items: start !important;
}
/* ------------------------------------- new css ----------------------------------------- */

.founder-note-img-wrap img,
.founder-img-wrap img{
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    object-fit: cover;
}

.founder-img-wrap img{
    aspect-ratio: 9/8;
}
/* .founder-note-img-wrap{
    margin-bottom: -8rem;
} */
.founder-note-img-wrap img{
    aspect-ratio: 9 / 10;
}
#execution-architecture,
#governance-architecture,
#institutionalization,
#execution-stabilization,
#system-alignment{
    scroll-margin-top: 6rem;
}
/* 
.number-wrap span {
    font-size: 85px;
    opacity: 0.5;
    padding: 20px;
    color: rgb(13 110 107 / 15%);
    font-weight: 600;
} */
.how-structura-work-sec .icon-card{
    padding:2.5rem;
    position: relative;
    overflow: hidden;
}
/* .number-wrap {
    position: absolute;
    right: -27px;
    bottom: -8px;
} */
/* .how-structura-work-sec svg path{
    fill: var(--base-color);
} */

.founder-note-sec,
.founder-sec{
    background: var(--base-color-light);
}
.banner-img{
    background: url('../images/hero-banner-2.webp') no-repeat center / cover;
}
.banner-img-2{
    background: url('../images/hero-banner-1.webp') no-repeat center / cover;
}
.banner-content-wrap{
    padding-bottom: 5rem;
}
header .navbar [class*=col-] .navbar-nav {
    gap:5px;
}
.navbar .navbar-nav .nav-item:hover .nav-link, .navbar .navbar-nav .nav-item.active .nav-link{
    background: var(--secondary-color);
    color: white;
}
.navbar .navbar-nav .nav-item:hover .nav-link{
    color: var(--white);
}
.btn.btn-base-color {
    background-color: var(--secondary-color);
    color: var(--white);
}
/* Spin animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ------------- gallery page ---------------- */


.fancybox-gallery-wrap .card{
    border: 0;
}

.fancybox-gallery-wrap .card-image img{
    aspect-ratio: 9 / 8;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
}
.fancybox-gallery-wrap .card-image {
    height: 100%;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    border: 0;
}
.sm-heading{
    padding: 9px 20px;
    background: rgb(11 110 107 / 10%);
    color: var(--secondary-color);
    border-radius: 20px;
    -webkit-border-radius: 27px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: inline-flex;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--alt-font);
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 500;
}
.down-section{
    bottom: 20px;
}
.services-sec .box-image{
    aspect-ratio: 9/7;
}
.services-sec .swiper-wrapper,
.services-sec .swiper{
    height: auto;
}
.services-sec .services-box-style-01 i {
    color: var(--secondary-color);
    line-height: normal;
    padding-top: 7px;
}
header .sticky-logo{
    display: none;
}
.sticky-active .sticky-logo{
    display: block;
}
.sticky-active .white-logo{
    display: none;
}
.sticky-active .navbar-toggler-line{
     background: var(--dark-gray);
}
.navbar-toggler-line {
    background: var(--white);
}
 .services-sec .swiper{
        margin-top:0 !important;
    }

.list-style-02 {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 0 !important;
}
/* .sub-banner-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.breadcrumb-content {
    position: relative;
    height: 100%;
}
.breadcrumb-wrap {
    position: relative;
} */

.hm-industry-exp .services-box-style-01.hover-box.border-radius-5px {
    background: var(--base-color-light);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hm-industry-exp .industry_experience .swiper-slide{
    height: auto;
}

/* .slider-navigation-style-04{
    background: var(--base-color-light);
} */

.hm-industry-exp .services-box-style-01 .box-image {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.hm-industry-exp .services-box-style-01 .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hm-industry-exp .services-box-style-01 p {
    color: var(--secondary-color);
}
.hm-industry-exp .services-box-style-01 p:hover {
    color: var(--primary-color);
}
.sub-list ul {
    padding-left: 20px;
}
.services-box-style-01 ul li.sub-list {
    flex-direction: column;
    gap: 10px;
}
.services-box-style-01 ul li.sub-list span {
    display: flex;
}

/* media query responsive */
@media (min-width: 1680px) {
    .banner-sec h1 {
        font-size: 2.8rem;
    }
}
@media (max-width: 1499px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    } 
}
@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 13px;
        padding-right: 13px;
    }
    .sticky-wrap.shadow-in {
        left: 35px;
    }
    .page-title-big-typography {
        padding: 4rem 20px;
    }

    .page-title-extra-large h1{
        bottom: 0;
    }
}
@media (max-width: 1300px) {
    .sticky-wrap.shadow-in {
        left: 10px;
    }
}

@media screen and (max-width: 1199px) {
    .feature-box-icon h5 {
        font-size: 1.8rem;
    }
    footer {
        font-size: 15px;
    }
    .split-img-left .service-content {
        padding-left: 2rem;
    }
    .split-img-right .service-content {
        padding-right: 2rem;
    }
    .service-content h4 {
        font-size: 2rem;
        line-height: 2.3rem;
    }
    .service-img {
        aspect-ratio: 9 / 11;
    }
    .founder-note-img-wrap img {
        aspect-ratio: 9 / 12;
    }
}

@media (max-width: 991px) {
    .header-transparent .header-button .btn {
        color: var(--dark-gray);
        border-color: var(--dark-gray);
    }
    .header-transparent .header-button .btn:hover {
        border-color: var(--dark-gray);
        color: var(--white);
        background:  var(--dark-gray);
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        width: calc(100% + 30px) !important;
        margin-left: -15px;
        padding: 10px 45px;
        margin-bottom: 0;
        margin-right: -15px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
        padding-bottom: 17px;
    }
    .hm-abt-img {
        margin: 0 auto;
    }
    .services-sec .col {
        margin-bottom: 2rem;
    }
    .service-img {
        aspect-ratio: 9/6;
    }
    .split-img-left .service-content, .split-img-right .service-content {
        padding-left: 0;
        padding-right: 0;
    }
    header .navbar.bg-transparent {
        background-color: transparent !important;
    }
    .banner-sec .swiper{
        margin-top: 0 !important;
    }
    .founder-note-img-wrap img {
        aspect-ratio: 9 / 5;
    }
    .page-title-big-typography{
        margin-top: 0 !important;
    }
   .page-title-extra-large h1 {
        letter-spacing: normal !important;
   }
   .banner-content-wrap h4 {
       font-size: 22px;
   }
}

@media (max-width: 767px) {
    p {
        margin-bottom: 12px;
    }
    .banner-content-wrap {
        padding-bottom: 7rem;
    }
    .banner-sec .swiper{
        height: 650px !important;
    }
    .services-sec .services-box-style-01 i {
        padding-top: 3px;
    }
    .list-style-02 {
        gap: 10px;
    }
    .services-sec .box-image {
        aspect-ratio: 16/10;
    }
    .banner-sec .banner-content-wrap span {
        font-size: 16px;
    }
    .banner-content-wrap h4 {
        font-size: 18px;
        letter-spacing: normal;
        line-height: 1.4;
    }
}

@media screen and (max-width: 680px) {
    .hm-abt-img{
        width: 100% !important;
    }
    .get-quote-band h2 {
        font-size: 2.438rem;
    }
    body {
        font-size: 15px;
    }
    .btn.btn-switch-text.btn-medium>span {
        font-size: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .h1, h1 {
        font-size: 3.675rem;
    }
    .btn.btn-extra-large {
        font-size: 12px;
    }
    .btn.with-rounded>span {
        width: 35px;
        height: 35px;
    }
    .btn.btn-large, .btn.btn-rounded.btn-extra-large {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .page-title-extra-large h1 {
        bottom: 0;
    }
    
}

@media screen and (max-width: 575px) {
   
}
@media screen and (max-width: 480px) {
    .hm-services .feature-box {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        text-align: center;
    }
    .hm-services .feature-box .feature-box-content {
        border: none !important;
    }
    h3 {
        font-size: 2.213rem;
    }
    .banner-sec h1 {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    .banner-sec .swiper {
        height: 720px !important;
    }
    .banner-sec .swiper-wrapper .swiper-slide:first-child .banner-img {
        background-position: -680px 0 !important;
    }
}

@media screen and (max-width: 380px) {
    .btn.btn-rounded.btn-medium{
        padding: 12px 50px 12px 12px;
    }
    .btn.btn-medium{
        font-size: 11px;
    }
    .how-structura-work-sec .icon-card {
        padding: 2rem;
    }
    .page-title-extra-large h1 {
        line-height: 35px;
    }
    .page-title-extra-large h1 {
        font-size: 28px;
    }
}