@tailwind base;
@tailwind components;
@tailwind utilities;


html{ font-size: 15px;}

.site-title{ color: #06335D; font-size: 3rem; font-weight: 500;}
.font-style-1{ font-size: 1.05rem; color: #374C5F; line-height: 2rem;}

.site-link{ display: inline-flex; align-items: center; justify-content: center; gap: 0 0.625rem; padding: 0.82rem 2rem; border: 0.0625rem solid #0B569A; border-radius: 3.125rem; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(0.25rem); font-size: 1rem; color: #0B569A; text-transform: uppercase; font-weight: 600; transition: all 0.5s ease;}
.site-link:hover{ opacity: 0.7;}
.site-link.solid{ background: #0B569A; color: white; font-weight: 500;}

.video-thumb{ display: none; box-shadow: 0rem 0.25rem 1.25rem -0.1875rem rgba(207, 231, 252, 0.70); transition: box-shadow 0.5s ease;}
.video-thumb::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.2); border-radius: 0.5rem; border: 0.1875rem solid transparent; transition: all 0.5s ease;}
.title{ position: relative; }
.title::after{ content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 5rem; height: 0.1875rem; background: rgba(11, 86, 154, 0.20); border-radius: 10px;}
.play-btn{ display: inline-flex; align-items: center; justify-content: center; background: #FFF; border-radius: 3.125rem; font-size: 0.8125rem; font-weight: 500; gap: 0 0.375rem; padding: 0.3125rem 0.3125rem; padding-right: 0.875rem;} 

.thumb-info{ display: flex; align-items: center; align-self: stretch; border-radius: 0.7189375rem; background: #FFFFFF; backdrop-filter: blur(0.375rem); margin-top: 5rem; font-size: 0.8125rem; font-weight: 500; overflow: hidden;}

.thumb-info-left{ height: 2.25rem; display: inline-flex; align-items: center; padding: 0 0.625rem; background: #E9F2FB; color: #0B569A;}
.thumb-info-right{ display: flex; align-items: center; justify-content: center; text-align: center; flex: 1 0 0%; width: auto; height: 2.25rem; padding: 0 0.625rem; color: #06335D;}

.thumb-info-right span{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} 

.thumb-img{ overflow: hidden; transition: all 0.5s ease;}
.thumb-img img{ transition: all 0.5s ease;}
/* .video-thumb:hover .thumb-img img{ transform: scale(1.1);} */
.video-thumb:hover{ box-shadow: 0rem 0 2.5rem 0 rgba(93, 180, 255, 0.5); }
.video-thumb:hover::after{ border: 0.1875rem solid #0B569A;}

.mfp-iframe-holder .mfp-content{ padding: 1.25rem; border-radius: 0.9375rem;}
.mfp-iframe-scaler iframe{ width: calc(100% - 1.25rem); height: calc(100% - 1.25rem); top: 0.625rem; left: 0.625rem; border-radius: 0.9375rem; }

.mfp-iframe-scaler iframe{
box-shadow: none!important;
background: none!important;

}

.tag{ display: inline-flex; align-items: center; justify-content: center; border-radius: 3.75rem; background: rgba(11, 86, 154, 0.1); padding: 8px 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #0B569A;} 
.exposure{ position: relative;}
.exposure::after{ content: ''; position: absolute; left: 50%; transform: translateX(-50%) rotate(180deg); bottom: 6.875rem; width: 90.262375rem; height: 90.262375rem; border-radius: 90.262375rem;background: linear-gradient(198deg, rgba(205, 228, 240, 0.22) 12.03%, rgba(205, 228, 240, 0.00) 80.36%);}


.site-container{ max-width: 90rem; padding: 0 3rem;}
.image-card{ background: #FFF; border-radius: 1.25rem; border: 0.0625rem solid #CDDFF0; box-shadow: 0rem 0.25rem 1.25rem -0.1875rem rgba(207, 231, 252, 0.70); overflow: hidden; margin: 0 0 0 2.5rem;}
.image-card-title{ background: #E9F2FB; padding: 0.875rem 1.5rem; display: flex; align-items: center; gap: 1rem; align-self: stretch;}
.image-card-title span{ display: inline-block; border-radius: 1.375rem; font-size: 1rem; font-weight: 700; color: #0B579A; text-transform: uppercase;}
.image-card-title span.active{ border-radius: 1.375rem; border: 0.0625rem solid rgba(6, 51, 93, 0.04); background: #FFF; padding: 0.25rem 0.875rem; font-size: 0.875rem;}

.site-container.alt{ padding: 0 2rem;}

.image-card-cont{ padding: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8125rem;}
.image-card-single{ position: relative; }
.image-card-img{ border-radius: 0.5rem; overflow: hidden; width: 7.0625rem; height: 10.375rem;}
.image-card-img img{ width: 100%; height: 100%; object-fit: cover;}
.image-card-info{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: flex-start; justify-content: end; flex-direction: column; padding: 0.3125rem;}
.rest{ display: inline-flex; align-items: center; justify-content: center; gap: 0 0.5px; padding: 0.125rem 0.375rem; border-radius: 6.25rem; background: #D0E4F6; font-size: 0.5rem; font-weight: 500;}
.rest img{ width: 8px; margin-top: 0.05rem}
.reps{ padding: 0.125rem 0.5rem; border-radius: 6.25rem; background: #FFFFFF; font-size: 0.5rem; font-weight: 500; margin-top: 0.125rem;}
.amt{ position: absolute; right: 0.3525rem; bottom: 0.3425rem; width: 1rem; height: 1rem; background: #D0E4F6; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.42rem; font-weight: 700; padding-left: 0.5px; padding-top: 1px}
.image-card.alt{ margin-top: 3.75rem;}

.line-1{ position: absolute; right: -5.4375rem; top: 6.0625rem;}
.line-1 img{ width: 17.25rem; height: 10.1875rem;}
.line-2{ position: absolute; bottom: 2.5625rem; right: -5.3125rem;}
.line-2 img{ width: 20.5625rem; height: 6.6875rem;}

.team-carousel-outer{ width: 23.625rem; position: relative;}
.team-carousel-outer::after{ content: ''; position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%; width: 61.875rem; height: 45.6875rem; border-radius: 61.875rem; background: radial-gradient(50% 50% at 50% 50%, rgba(97, 171, 208, 0.40) 0%, rgba(97, 171, 208, 0.00) 100%);}

.team-carousel .item{ position: relative;}
.member-name{ position: absolute; left: 50%; transform: translateX(-50%); padding: 0.5rem 1.25rem; border: 0.0625rem solid #FFF; background: rgba(255, 255, 255, 0.60); backdrop-filter: blur(0.375rem); border-radius: 3.125rem; display: inline-flex; justify-content: center; align-items: center; text-align: center; white-space: nowrap; font-size: 1.0625rem; color: #06335D; font-weight: 500; bottom: 30px;}

.team-carousel-outer .owl-dots{ display: flex; align-items: center; justify-content: center; padding-top: 1.25rem; gap: 0 0.3125rem;}
.team-carousel-outer .owl-dots span{ width: 0; height: 100%;  display: block; position: relative; transition: all 0.5s linear; border-radius: 99px;}
.team-carousel-outer .owl-dot { width: 8px; height: 8px; position: relative; background: rgba(11, 86, 154, 0.3) !important; border-radius: 99px; overflow: hidden; transition: all 0.3s ease}
.team-carousel-outer .owl-dot.active { width: 2rem;}
.team-carousel-outer .owl-dot.active span{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; animation: expandWidth 4.5s forwards linear; border-radius: 1.25rem; background: #0B569A}

@keyframes expandWidth {
    from {
        width: 8px;
    }
    to {
        width: 100%;
    }
}

.services{ background: linear-gradient(180deg, #F6F9FB 0%, #FFF 100%);}
.case-img{ position: relative;}
.case-img::after{ content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 56.5rem; height: 56.5rem; background: url('../img/shadow.png') no-repeat; background-size: 100% auto;}

.features-single{ background: url('../img/shape.png') no-repeat left bottom #F1F7F9;}
/* .features-single:nth-child(odd){ background: url('../img/shape-2.png') no-repeat right bottom #F1F7F9; } */
.features-single h2{ font-size: 1.5rem; color: #06335D; font-weight: 600; line-height: 2rem; padding-top: 3rem;}
.features-single h2 span{ color: #1F7DD4;}
.features-single p{ color: #374C5F; font-size: 0.875rem; line-height: 1.5rem; padding-top: 1.25rem;}
.features-icon{ background: rgba(31, 125, 212, 0.05);}

.bottom-carousel .owl-item:nth-child(odd) .features-single{ background: url('../img/shape-2.png') no-repeat right bottom #F1F7F9;}


.pain-img-mobile{ position: relative; max-width: 300px; margin: 0 auto; padding: 60px 0 80px 0;}
.line-3{ position: absolute; left: 50%; transform: translateX(-50%); top: 0; margin: 0 0 0 37px;}
.line-4{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; margin: 0 0 0 5px;}

.mfp-iframe-holder .mfp-close{ background: url('../img/close.png') no-repeat !important; background-size: 100% auto !important; width: 20px; height: 20px; font-size: 0 !important;}

.pain-img-mobile{ display: none;}

.bottom-carousel .owl-stage{ display: flex;}
.bottom-carousel .features-single{ height: 100%;}

.bottom-carousel .owl-dots{ display: flex; align-items: center; justify-content: center; padding-top: 25px; gap: 0 0.3125rem;}
.bottom-carousel .owl-dot { width: 6px; height: 6px; background: #E7EFF5 !important; border-radius: 99px; }
.bottom-carousel .owl-dot.active { background: #06335D !important;}

.features-icon img{ max-width: 2.75rem;}
.case-img-main img{ max-width: 35.375rem;}


/*  */
.svg-back{ max-width: 293px; margin: 0 auto;}
.path{ cursor: pointer;}
.path:hover { fill: #87aed2;}
.path.active { fill: #ff8080;}
/*  */

@media (max-width: 1599px){
  html{ font-size: 14px;}
}

@media (max-width: 1300px){
    html{ font-size: 13px;}
}

@media (max-width: 1023px){
    html{ font-size: 12px;}
    .pain-img{ display: none;}
    .image-card.alt{ margin-top: 0;}
    .pain-img-mobile{ display: block;}
    .case-img{ max-width: 400px; margin: 0 auto;}
    .case-txt{ text-align: center; padding-top: 50px;}
    .features-single p{ font-size: 15px; line-height: 22px;}
}

@media (max-width: 639px){
    .site-link{ padding: 10px 28px;}
    .site-link.solid{ background: #EFF3F8; color: #0B569A; font-weight: 600;}
    .title{ font-size: 24px;}
    .video-thumb{ height: 190px !important;}
    .thumb-info{ margin-top: 40px;}
    .site-title{ font-size: 24px; line-height: 34px;}
    .font-style-1{ font-size: 14px;}
    .site-container, .sec-nx{ padding: 0px 30px !important;}
    .exposure, .measuring{ padding: 64px 0 !important;}
    .image-card{ margin: 0 !important;}
    .image-card-cont{ padding: 10px !important;}
    .image-card-cont{ gap: 0 3px;}
    .image-card-img{ width: 100%;}
    .rest{ padding: 1px 2px; padding-right: 4px;}
    .image-card-title span{ font-size: 10px !important;}
    .features{ padding-top: 30px !important;}
    .sec-nx{ margin-top: 25px !important;}


    .case-img-main img{ max-width: 100%;}

    .team-carousel-outer .owl-dots{ display: flex; align-items: center; justify-content: center; padding-top: 1.25rem; gap: 0 0.3125rem;}
    .team-carousel-outer .owl-dots span{ width: 0; height: 100%;  display: block; position: relative; transition: all 0.5s linear; border-radius: 99px;}
    .team-carousel-outer .owl-dot { width: 8px; height: 8px; position: relative; background: rgba(255, 255, 255, 0.3) !important; border-radius: 99px; overflow: hidden; transition: all 0.3s ease}
    .team-carousel-outer .owl-dot.active { width: 2rem; background: #B6CCE1 !important;}
    .team-carousel-outer .owl-dot.active span{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; animation: expandWidth 4.5s forwards linear; border-radius: 1.25rem; background: white !important}

    .tag#team-tag{ display: inline-flex; align-items: center; justify-content: center; border-radius: 3.75rem; background: #2366A3; padding: 8px 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: white;} 

    #approach-section .managing .site-container{ padding: 40px 15px !important;}
    .site-container, .sec-nx{ padding: 0px 15px !important;}
}