/*==================================================
VENTTECH Website
Author : ChatGPT
Version : 2.0
==================================================*/

/*==========================
Google Font
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#F8FBFD;

    color:#333;

    overflow-x:hidden;

}

a{
    text-decoration:none;
    transition:.3s;
}

img{
    max-width:100%;
    display:block;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

section{

    padding:100px 0;

}

.container{

    max-width:1320px;

}


/*==========================
Colors
==========================*/

:root{

    --primary:#006D8F;

    --secondary:#00A4D8;

    --green:#00C389;

    --dark:#17324D;

    --light:#F8FBFD;

    --white:#ffffff;

}


/*==========================
Top Bar
==========================*/

.top-bar{

    background:var(--primary);

    color:#fff;

    padding:6px 0;

    font-size:14px;

}

.top-contact{

    list-style:none;

    display:flex;

    align-items:center;

    gap:25px;

    padding:0;

    margin:0;

}

.top-contact li{

    list-style:none;

    display:flex;

    align-items:center;

}

.top-contact i{

    color:#00C389;

    margin-right:8px;

}

.social-icons{

    display:flex;

    justify-content:end;

    gap:12px;

}

.social-icons a{

    width:35px;

    height:35px;

    background:rgba(255,255,255,.15);

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.social-icons a:hover{

    background:#00C389;
    color:#fff;

    transform:translateY(-3px);

}


/*==========================
Navigation
==========================*/

.navbar{

    background:#fff;

    padding:12px 0;

    transition:.3s;

}

.logo{

    height:75px;
    width:auto;
    display:block;
}

.navbar-nav{

    align-items:center;

}

.nav-item{

    margin-left:12px;
    align-items:center;
}

.nav-link{

    transition:all .3s ease;
    color:var(--dark)!important;
    font-size:16px;
    font-weight:600;
    position:relative;
    padding:10px 0!important;

}

.nav-link:not(.dropdown-toggle)::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--green);

    transition:.3s;

}

.nav-link:not(.dropdown-toggle):hover::after,
.nav-link.active:not(.dropdown-toggle)::after{

    width:100%;

}

.nav-link:hover{

    color:var(--secondary)!important;

}


/*==========================
Dropdown
==========================*/

.dropdown-menu{

    border:none;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    padding:10px;

}

.dropdown-item{

    border-radius:8px;

    padding:10px 15px;

    font-weight:500;

}

.dropdown-item:hover{

    background:var(--secondary);

    color:#fff;

}


/*==========================
Request Button
==========================*/

.btn-request{

    margin-left:25px;
    background:var(--green);
    color:#fff;
    padding:14px 32px;
    border-radius:50px;
    font-size:18px;
    box-shadow:0 10px 25px rgba(0,195,137,.25);
    font-weight:600;

}

.btn-request:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(0,195,137,.35);
}


/*==========================
Sticky Navbar Shadow
==========================*/

.navbar{

    box-shadow:0 5px 20px rgba(0,0,0,.06);

}
.btn-request{

display:inline-flex;

align-items:center;

gap:10px;

background:#00C389;

padding:14px 28px;

border-radius:40px;

color:#fff;

font-weight:600;

margin-left:25px;

}

.btn-request:hover{

background:#006D8F;

color:#fff;

}
.dropdown-toggle::after{

    margin-left:8px;

    vertical-align:middle;

}
.navbar-brand{
    padding:0;
    margin-right:40px;
    display:flex;
    align-items:center;
}
/*==========================================
Hero Section
==========================================*/

.hero-section{

    padding:90px 0;

    background:
        linear-gradient(135deg,#F8FBFD 0%,#EDF7FC 100%);

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:#E8F8F3;

    color:var(--green);

    font-weight:600;

    margin-bottom:20px;

}

.hero-title{

    font-size:58px;

    font-weight:700;

    color:var(--dark);

    line-height:1.15;

    margin-bottom:20px;

}

.hero-title span{

    color:var(--primary);

    display:block;

}

.hero-text{

    font-size:18px;

    line-height:1.8;

    color:#555;

    margin-bottom:30px;

}

.hero-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:35px;

}

.hero-list div{

    font-weight:600;

}

.hero-list i{

    color:var(--green);

    margin-right:10px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.btn-primary-custom{

    background:var(--primary);

    color:#fff;

    padding:15px 32px;

    border-radius:50px;

    font-weight:600;

}

.btn-primary-custom:hover{

    background:#004D66;

    color:#fff;

}

.btn-whatsapp{

    background:#25D366;

    color:#fff;

    padding:15px 32px;

    border-radius:50px;

    font-weight:600;

}

.btn-whatsapp:hover{

    color:#fff;

    background:#1BA851;

}

.hero-image{

    text-align:center;

}

.hero-image img{

    max-width:100%;

    animation:floatImage 4s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==========================================
Statistics
==========================================*/

.stats-section{

    margin-top:-40px;

    position:relative;

    z-index:10;

}

.stat-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.3s;

    height:100%;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-card i{

    font-size:42px;

    color:var(--green);

    margin-bottom:15px;

}

.stat-card h2{

    font-size:42px;

    font-weight:700;

    color:var(--primary);

}

.stat-card p{

    margin:0;

    color:#666;

}
/*==========================================
Section Title
==========================================*/

.section-title{

margin-bottom:50px;

}

.section-title span{

display:inline-block;

color:var(--green);

font-weight:700;

letter-spacing:1px;

margin-bottom:10px;

}

.section-title h2{

font-size:42px;

font-weight:700;

color:var(--dark);

margin-bottom:20px;

}

.section-title p{

max-width:700px;

margin:auto;

color:#666;

line-height:1.8;

}

/*==========================================
Why Choose Us
==========================================*/

.why-us{

padding:120px 0;

background: linear-gradient(#ffffff,#f8fbfd);

}

.feature-card{

background:#fff;

padding:40px 30px;

border-radius:24px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

height:100%;

border:1px solid #eef3f6;

}

.feature-card:hover{

transform:translateY(-12px) scale(1.02);

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.feature-icon{
box-shadow: 0 10px 30px rgba(0,195,137,.30);
width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
background:linear-gradient(135deg,#00C389,#0A6ED1);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;

}

.feature-icon i{

font-size:34px;

color:#fff;

}

.feature-card h4{

font-weight:700;

margin-bottom:15px;

color:var(--dark);

}

.feature-card p{

color:#666;

line-height:1.8;

margin:0;

}

/*==========================================
EQUIPMENT SECTION
==========================================*/

.equipment-section {
    padding: 110px 0;
    background: #f7fbfe;
}


/*==========================================
EQUIPMENT CARD
==========================================*/

.equipment-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e6eef2;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

    transition: all 0.35s ease;
}


.equipment-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}


/*==========================================
EQUIPMENT IMAGE AREA
==========================================*/

.equipment-image {
    width: 100%;
    height: 240px !important;
    padding: 15px;

    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    flex-shrink: 0;
}


/*==========================================
EQUIPMENT IMAGE
==========================================*/

.equipment-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    transition: transform 0.45s ease;
}


.equipment-card:hover .equipment-image img {
    transform: scale(1.05);
}


/*==========================================
EQUIPMENT CONTENT
==========================================*/

.equipment-content {
    min-height: 200px;

    padding: 22px 24px 26px;

    display: flex;
    flex-direction: column;
}


/* Keep description consistent */

.equipment-content p {
    font-size: 13px;
    line-height: 1.7;

    color: #666;

    margin-bottom: 18px;
}


/* Push View Equipment to bottom */

.equipment-content .equipment-link {
    margin-top: auto;
}
/*==========================================
VIEW EQUIPMENT
==========================================*/

.equipment-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;
}

.equipment-link:hover {
    color: var(--green);
}

.equipment-link i {
    transition: transform 0.3s ease;
}

.equipment-link:hover i {
    transform: translateX(5px);
}


/*==========================================
VIEW ALL
==========================================*/

.equipment-more {
    margin-top: 55px;
}

.equipment-more .btn-primary-custom {
    display: inline-flex;

    align-items: center;

    gap: 10px;
}
/* =========================================
   OUR SERVICES
========================================== */

.services-section {
    padding: 110px 0;
    background: #ffffff;
}


/* Service Card */

.service-card {
    height: 100%;
    display: flex;
    flex-direction: column;

    background: #f8fcfe;

    border: 1px solid #e3edf2;
    border-radius: 22px;

    padding: 32px 30px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

    transition: all 0.35s ease;

    position: relative;
    overflow: hidden;
}


/* Green top accent */

.service-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        var(--green),
        var(--primary)
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;
}


.service-card:hover {
    transform: translateY(-8px);

    background: #ffffff;

    border-color: #d7e8ef;

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}


.service-card:hover::before {
    transform: scaleX(1);
}


/* Service Icon */

.service-icon {
    width: 72px;
    height: 72px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #00C389,
        #0A6ED1
    );

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    box-shadow: 0 8px 20px rgba(10, 110, 209, 0.15);

    transition: all 0.35s ease;
}


.service-icon i {
    font-size: 29px;
    color: #ffffff;
}


.service-card:hover .service-icon {
    transform: scale(1.08) rotate(-3deg);
}


/* Service Content */

.service-content {
    display: flex;
    flex-direction: column;

    flex: 1;
}


.service-content > span {
    display: block;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;

    color: var(--green);

    margin-bottom: 7px;
}


.service-content h3 {
    font-size: 21px;
    font-weight: 700;

    line-height: 1.3;

    color: var(--dark);

    margin: 0 0 13px;
}


.service-content p {
    font-size: 13px;

    line-height: 1.75;

    color: #666;

    margin: 0 0 22px;
}


/* Service Link */

.service-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: var(--primary);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}


.service-link i {
    transition: transform 0.3s ease;
}


.service-link:hover {
    color: var(--green);
}


.service-link:hover i {
    transform: translateX(5px);
}


/* Bottom CTA */

.services-cta {
    margin-top: 60px;
}


.services-cta p {
    margin-bottom: 18px;

    color: #666;

    font-size: 15px;
}


.services-cta .btn-primary-custom {
    display: inline-flex;
    align-items: center;

    gap: 10px;
}

/* =========================================
   HOW WE WORK / SERVICE PROCESS
========================================== */

.process-section {
    padding: 110px 0;
    background: linear-gradient(
        135deg,
        #f7fbfe 0%,
        #eef8fc 100%
    );
}


/* Process Wrapper */

.process-wrapper {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 25px;

    position: relative;

    margin-top: 70px;
}


/* Connecting Line */

.process-wrapper::before {
    content: "";

    position: absolute;

    top: 42px;

    left: 10%;

    right: 10%;

    height: 2px;

    background: linear-gradient(
        90deg,
        var(--green),
        var(--primary)
    );

    z-index: 0;
}


/* Process Step */

.process-step {
    position: relative;

    z-index: 1;

    text-align: center;

    padding: 0 10px;
}


/* Number */

.process-number {
    position: absolute;

    top: -13px;

    right: 18px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--dark);

    color: #ffffff;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 11px;

    font-weight: 700;

    box-shadow: 0 5px 15px rgba(23, 50, 77, 0.20);

    z-index: 3;
}


/* Icon */

.process-icon {
    width: 84px;
    height: 84px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #ffffff;

    border: 5px solid #e8f4f8;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

    transition: all 0.35s ease;
}


.process-icon i {
    font-size: 30px;

    color: var(--primary);

    transition: all 0.35s ease;
}


/* Hover */

.process-step:hover .process-icon {
    transform: translateY(-8px);

    background: var(--green);

    border-color: var(--green);

    box-shadow: 0 15px 30px rgba(0, 195, 137, 0.25);
}


.process-step:hover .process-icon i {
    color: #ffffff;

    transform: scale(1.1);
}


/* Heading */

.process-step h3 {
    font-size: 18px;

    font-weight: 700;

    color: var(--dark);

    margin-bottom: 12px;
}


/* Description */

.process-step p {
    font-size: 12px;

    line-height: 1.7;

    color: #666;

    margin: 0;
}


/* Bottom CTA */

.process-cta {
    margin-top: 75px;

    padding: 40px 30px;

    background: #ffffff;

    border: 1px solid #e2edf2;

    border-radius: 22px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}


.process-cta h3 {
    font-size: 25px;

    font-weight: 700;

    color: var(--dark);

    margin-bottom: 10px;
}


.process-cta p {
    color: #666;

    margin-bottom: 22px;

    font-size: 14px;
}


.process-cta .btn-primary-custom {
    display: inline-flex;

    align-items: center;

    gap: 10px;
}

/* =========================
   ABOUT VENTTECH SECTION
========================= */

.about-section {
    padding: 110px 0;
    background: #ffffff;
    overflow: hidden;
}

/* LEFT VISUAL */

.about-visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
}

.about-visual::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: #eef8fc;
    z-index: 0;
}

.about-image-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 470px;
    height: 420px;
    background: #f7fbfd;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    border: 1px solid #e1edf2;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.about-image-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s ease;
}

.about-image-main:hover img {
    transform: scale(1.05);
}

/* EXPERIENCE BADGE */

.about-experience {
    position: absolute;
    left: 5px;
    bottom: 45px;
    z-index: 3;

    width: 145px;
    height: 145px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );

    color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow: 0 15px 35px rgba(0, 109, 143, .25);
    border: 6px solid #fff;
}

.about-experience strong {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
}

.about-experience span {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 7px;
    font-weight: 500;
}

/* FLOATING CARD */

.about-floating-card {
    position: absolute;
    right: 0;
    top: 70px;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 12px;

    background: #fff;
    padding: 15px 20px;

    border-radius: 14px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
    border: 1px solid #e5eef2;
}

.about-floating-card > i {
    width: 43px;
    height: 43px;
    border-radius: 12px;

    background: #eef9f6;
    color: var(--green);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;
}

.about-floating-card div {
    display: flex;
    flex-direction: column;
}

.about-floating-card strong {
    color: var(--dark);
    font-size: 13px;
    font-weight: 700;
}

.about-floating-card span {
    color: #777;
    font-size: 11px;
    margin-top: 2px;
}


/* RIGHT CONTENT */

.about-content {
    padding-left: 25px;
}

.about-title {
    text-align: left;
    margin-bottom: 25px;
}

.about-title h2 {
    max-width: 580px;
    margin-bottom: 0;
}

.about-title h2 strong {
    color: var(--primary);
    font-weight: 700;
}

.about-lead {
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: #445b68 !important;
    font-weight: 500;
    margin-bottom: 18px !important;
}

.about-content > p:not(.about-lead) {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 28px;
}


/* ABOUT POINTS */

.about-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.about-point {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.about-point-icon {
    flex-shrink: 0;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #eaf9f5;
    color: var(--green);

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 2px;
}

.about-point-icon i {
    font-size: 13px;
}

.about-point h4 {
    color: var(--dark);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.about-point p {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

.about-button {
    margin-top: 10px;
}

.about-button .btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* =========================
   WHY HOSPITALS TRUST VENTTECH
========================= */

.trust-section {
    padding: 110px 0;
    background: #f7fbfe;
    position: relative;
    overflow: hidden;
}

.trust-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: #eef8fc;
    top: -180px;
    right: -150px;
}

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


/* LEFT CONTENT */

.trust-title {
    text-align: left;
    margin-bottom: 25px;
}

.trust-title h2 {
    max-width: 500px;
}

.trust-title h2 strong {
    color: var(--primary);
}

.trust-intro {
    color: #666;
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 30px;
    max-width: 520px;
}


/* HIGHLIGHT BOX */

.trust-highlight {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    background: #ffffff;
    border: 1px solid #e2edf2;
    border-left: 4px solid var(--green);

    border-radius: 16px;
    padding: 20px 22px;

    max-width: 520px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}

.trust-highlight-icon {
    flex-shrink: 0;

    width: 50px;
    height: 50px;

    border-radius: 14px;

    background: #eaf9f5;
    color: var(--green);

    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-highlight-icon i {
    font-size: 22px;
}

.trust-highlight h4 {
    color: var(--dark);
    font-size: 16px;
    font-weight: 700;
    margin: 2px 0 6px;
}

.trust-highlight p {
    color: #777;
    font-size: 12px;
    line-height: 1.65;
    margin: 0;
}


/* TRUST GRID */

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}


/* TRUST CARD */

.trust-card {
    position: relative;

    background: #ffffff;

    border: 1px solid #e2edf2;
    border-radius: 20px;

    padding: 28px 25px;

    min-height: 225px;

    display: flex;
    flex-direction: column;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

    transition: all .35s ease;

    overflow: hidden;
}

.trust-card::after {
    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    border-radius: 50%;

    background: #f2fafc;

    right: -25px;
    bottom: -25px;

    transition: all .35s ease;
}

.trust-card:hover {
    transform: translateY(-7px);
    border-color: #d4e7ee;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}

.trust-card:hover::after {
    transform: scale(2);
}


/* CARD ICON */

.trust-card-icon {
    width: 58px;
    height: 58px;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #00C389,
        #006D8F
    );

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    box-shadow: 0 8px 20px rgba(0, 109, 143, .16);

    transition: all .35s ease;
}

.trust-card:hover .trust-card-icon {
    transform: scale(1.08) rotate(-3deg);
}

.trust-card-icon i {
    font-size: 23px;
}


/* CARD CONTENT */

.trust-card-content {
    position: relative;
    z-index: 2;
}

.trust-card-content > span {
    position: absolute;
    top: -58px;
    right: 0;

    color: #dbeaf0;

    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.trust-card-content h3 {
    color: var(--dark);

    font-size: 19px;
    font-weight: 700;

    margin: 0 0 10px;
}

.trust-card-content p {
    color: #777;

    font-size: 12px;
    line-height: 1.7;

    margin: 0;
}


/* BOTTOM TRUST BAR */

.trust-bottom {
    margin-top: 55px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    background: #ffffff;

    border: 1px solid #e1edf2;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

    overflow: hidden;
}

.trust-bottom-item {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 22px 25px;

    border-right: 1px solid #e5eef2;
}

.trust-bottom-item:last-child {
    border-right: none;
}

.trust-bottom-item > i {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: #eef8fc;
    color: var(--primary);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}

.trust-bottom-item div {
    display: flex;
    flex-direction: column;
}

.trust-bottom-item strong {
    color: var(--dark);

    font-size: 13px;
    font-weight: 700;

    margin-bottom: 3px;
}

.trust-bottom-item span {
    color: #888;

    font-size: 10px;
}

/* =========================
   HEALTHCARE FACILITIES
========================= */

.facilities-section {
    padding: 110px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.facilities-section::before {
    content: "";
    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: #f0fafc;

    left: -180px;
    top: 180px;
}

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


/* SECTION TITLE */

.facilities-section .section-title p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


/* FACILITY CARD */

.facility-card {
    height: 100%;

    display: flex;
    align-items: flex-start;
    gap: 20px;

    background: #f8fcfe;

    border: 1px solid #e2edf2;

    border-radius: 20px;

    padding: 30px 27px;

    position: relative;
    overflow: hidden;

    box-shadow: 0 7px 24px rgba(0, 0, 0, .045);

    transition: all .35s ease;
}

.facility-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 0;

    background: linear-gradient(
        180deg,
        var(--green),
        var(--primary)
    );

    transition: height .35s ease;
}

.facility-card:hover {
    transform: translateY(-7px);

    background: #ffffff;

    border-color: #d6e7ee;

    box-shadow: 0 18px 38px rgba(0, 0, 0, .09);
}

.facility-card:hover::before {
    height: 100%;
}


/* FACILITY ICON */

.facility-icon {
    flex-shrink: 0;

    width: 62px;
    height: 62px;

    border-radius: 17px;

    background: #eaf8fc;

    color: var(--primary);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all .35s ease;
}

.facility-card:hover .facility-icon {
    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );

    color: #ffffff;

    transform: scale(1.08);
}

.facility-icon i {
    font-size: 25px;
}


/* FACILITY CONTENT */

.facility-content {
    flex: 1;
    position: relative;
}

.facility-content > span {
    position: absolute;

    right: 0;
    top: -4px;

    color: #dcecf1;

    font-size: 25px;
    font-weight: 800;

    line-height: 1;
}

.facility-content h3 {
    color: var(--dark);

    font-size: 19px;
    font-weight: 700;

    line-height: 1.35;

    margin: 0 35px 10px 0;
}

.facility-content p {
    color: #777;

    font-size: 12px;

    line-height: 1.7;

    margin: 0 0 18px;
}


/* FACILITY LINK */

.facility-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--primary);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}

.facility-link i {
    font-size: 10px;

    transition: transform .3s ease;
}

.facility-link:hover {
    color: var(--green);
}

.facility-link:hover i {
    transform: translateX(4px);
}


/* BOTTOM CTA */

.facilities-cta {
    margin-top: 55px;

    padding: 27px 30px;

    background: linear-gradient(
        135deg,
        #f2fafc,
        #eef9f6
    );

    border: 1px solid #dcecf1;

    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .04);
}

.facilities-cta-content {
    display: flex;
    align-items: center;
    gap: 17px;
}

.facilities-cta-icon {
    flex-shrink: 0;

    width: 55px;
    height: 55px;

    border-radius: 15px;

    background: #ffffff;

    color: var(--green);

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .06);
}

.facilities-cta-icon i {
    font-size: 23px;
}

.facilities-cta h3 {
    color: var(--dark);

    font-size: 17px;
    font-weight: 700;

    margin: 0 0 5px;
}

.facilities-cta p {
    color: #777;

    font-size: 12px;

    margin: 0;
}

.facilities-cta .btn-primary-custom {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* =========================
   FEATURED EQUIPMENT
========================= */

.featured-equipment-section {
    padding: 110px 0;
    background: #f7fbfe;
    position: relative;
    overflow: hidden;
}

.featured-equipment-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: #eef9f6;

    right: -200px;
    bottom: -180px;
}

.featured-equipment-section .container {
    position: relative;
    z-index: 1;
}


/* SECTION DESCRIPTION */

.featured-equipment-section .section-title p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


/* CATEGORY FILTER */

.equipment-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 45px 0 40px;
}

.equipment-filter-btn {
    border: 1px solid #dce9ee;

    background: #ffffff;

    color: #61737d;

    padding: 10px 20px;

    border-radius: 30px;

    font-family: inherit;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: all .3s ease;
}

.equipment-filter-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.equipment-filter-btn.active {
    background: var(--primary);

    border-color: var(--primary);

    color: #ffffff;

    box-shadow: 0 7px 18px rgba(0, 109, 143, .18);
}


/* EQUIPMENT GRID */

.featured-equipment-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;
}


/* ITEM */

.featured-equipment-item {
    display: block;

    animation: featuredEquipmentIn .4s ease;
}

.featured-equipment-item.hidden {
    display: none;
}

@keyframes featuredEquipmentIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* CARD */

.featured-equipment-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e2edf2;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

    transition: all .35s ease;
}

.featured-equipment-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .11);

    border-color: #d4e7ee;
}


/* IMAGE */

.featured-equipment-image {
    height: 205px;

    background: #f8fbfd;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    position: relative;

    overflow: hidden;
}

.featured-equipment-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform .45s ease;
}

.featured-equipment-card:hover
.featured-equipment-image img {
    transform: scale(1.06);
}


/* BADGE */

.featured-badge {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 2;

    padding: 5px 9px;

    border-radius: 7px;

    background: rgba(255, 255, 255, .94);

    color: var(--primary);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .5px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}


/* CONTENT */

.featured-equipment-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 22px 22px 24px;
}

.featured-equipment-content > span {
    color: var(--green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 8px;
}

.featured-equipment-content h3 {
    color: var(--dark);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

    margin: 0 0 10px;
}

.featured-equipment-content p {
    color: #777;

    font-size: 11px;

    line-height: 1.7;

    margin: 0 0 20px;
}


/* LINK */

.featured-equipment-link {
    margin-top: auto;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--primary);

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition: all .3s ease;
}

.featured-equipment-link i {
    font-size: 9px;

    transition: transform .3s ease;
}

.featured-equipment-link:hover {
    color: var(--green);
}

.featured-equipment-link:hover i {
    transform: translateX(4px);
}


/* FOOTER */

.featured-equipment-footer {
    margin-top: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;
}

.featured-equipment-footer p {
    color: #666;

    font-size: 13px;

    margin: 0;
}

.featured-equipment-footer .btn-primary-custom {
    display: inline-flex;

    align-items: center;

    gap: 9px;
}

/* =========================================================
   STEP 15 - CUSTOMER TRUST & RELIABILITY
========================================================= */

.customer-trust-section {
    padding: 110px 0;
    background: #ffffff;
}


/* Trust Cards */

.customer-trust-card {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 22px;

    background: #f8fcfe;
    border: 1px solid #e2edf2;
    border-radius: 22px;

    padding: 30px 28px;

    box-shadow: 0 8px 25px rgba(0,0,0,.05);

    transition: all .35s ease;

    position: relative;
    overflow: hidden;
}


/* Top Accent */

.customer-trust-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--green),
        var(--primary)
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s ease;
}


.customer-trust-card:hover {
    transform: translateY(-8px);

    background: #ffffff;

    border-color: #d6e7ee;

    box-shadow: 0 18px 40px rgba(0,0,0,.10);
}


.customer-trust-card:hover::before {
    transform: scaleX(1);
}


/* Icon */

.customer-trust-icon {
    width: 65px;
    height: 65px;

    min-width: 65px;

    border-radius: 17px;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px rgba(0,195,137,.15);

    transition: all .35s ease;
}


.customer-trust-icon i {
    font-size: 26px;
    color: #ffffff;
}


.customer-trust-card:hover .customer-trust-icon {
    transform: scale(1.08) rotate(-3deg);
}


/* Content */

.customer-trust-content {
    flex: 1;
}


.customer-trust-content > span {
    display: block;

    font-size: 11px;
    font-weight: 700;

    color: var(--green);

    letter-spacing: 1px;

    margin-bottom: 5px;
}


.customer-trust-content h3 {
    font-size: 19px;
    font-weight: 700;

    line-height: 1.35;

    color: var(--dark);

    margin: 0 0 10px;
}


.customer-trust-content p {
    font-size: 13px;
    line-height: 1.7;

    color: #666;

    margin: 0;
}


/* =========================================================
   TRUST STATEMENT
========================================================= */

.customer-trust-statement {
    margin-top: 65px;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 32px 35px;

    background: linear-gradient(
        135deg,
        #f2fbfd 0%,
        #eef8fc 100%
    );

    border: 1px solid #dcecf2;

    border-radius: 22px;

    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}


.customer-trust-statement-icon {
    width: 68px;
    height: 68px;

    min-width: 68px;

    border-radius: 50%;

    background: var(--primary);

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px rgba(0,109,143,.18);
}


.customer-trust-statement-icon i {
    font-size: 27px;
    color: #ffffff;
}


.customer-trust-statement-content {
    flex: 1;
}


.customer-trust-statement-content h3 {
    font-size: 22px;
    font-weight: 700;

    color: var(--dark);

    margin: 0 0 7px;
}


.customer-trust-statement-content p {
    font-size: 14px;

    color: #666;

    margin: 0;

    line-height: 1.6;
}


.customer-trust-statement-button {
    flex-shrink: 0;
}


.customer-trust-statement-button .btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   STEP 15 - TABLET
========================================================= */

@media (max-width: 991px) {

    .customer-trust-section {
        padding: 80px 0;
    }

    .customer-trust-card {
        padding: 28px 24px;
    }

    .customer-trust-statement {
        margin-top: 55px;
        padding: 30px;
    }

}


/* =========================================================
   STEP 15 - MOBILE
========================================================= */

@media (max-width: 576px) {

    .customer-trust-section {
        padding: 70px 0;
    }


    .customer-trust-card {
        gap: 17px;
        padding: 25px 22px;

        border-radius: 18px;
    }


    .customer-trust-icon {
        width: 58px;
        height: 58px;

        min-width: 58px;

        border-radius: 15px;
    }


    .customer-trust-icon i {
        font-size: 23px;
    }


    .customer-trust-content h3 {
        font-size: 18px;
    }


    .customer-trust-content p {
        font-size: 12.5px;
    }


    .customer-trust-statement {
        margin-top: 45px;

        flex-direction: column;

        text-align: center;

        padding: 30px 22px;

        border-radius: 18px;
    }


    .customer-trust-statement-icon {
        width: 62px;
        height: 62px;

        min-width: 62px;
    }


    .customer-trust-statement-content h3 {
        font-size: 20px;
    }


    .customer-trust-statement-content p {
        font-size: 13px;
    }

}

/* =========================================================
   STEP 16 - HEALTHCARE PARTNERSHIP
========================================================= */

.partnership-section {
    padding: 110px 0;
    background: linear-gradient(
        135deg,
        #f7fbfe 0%,
        #eef8fc 100%
    );
}


/* =========================================================
   LEFT CONTENT
========================================================= */

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

.partnership-title h2 {
    max-width: 520px;
}

.partnership-title h2 strong {
    color: var(--primary);
    font-weight: 700;
}


.partnership-lead {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 15px;
    max-width: 600px;
}


.partnership-text {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
    max-width: 600px;
}


/* =========================================================
   PARTNERSHIP POINTS
========================================================= */

.partnership-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.partnership-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}


.partnership-point-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    border-radius: 13px;

    background: #ffffff;

    border: 1px solid #dcecf2;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 18px rgba(0,0,0,.05);

    transition: all .3s ease;
}


.partnership-point-icon i {
    font-size: 19px;
    color: var(--primary);
}


.partnership-point:hover .partnership-point-icon {
    background: var(--green);
    border-color: var(--green);
    transform: translateY(-3px);
}


.partnership-point:hover .partnership-point-icon i {
    color: #ffffff;
}


.partnership-point h4 {
    font-size: 16px;
    font-weight: 700;

    color: var(--dark);

    margin: 2px 0 5px;
}


.partnership-point p {
    font-size: 12px;
    line-height: 1.6;

    color: #666;

    margin: 0;
}


.partnership-button {
    margin-top: 32px;
}


.partnership-button .btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.partnership-visual {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px;
}


.partnership-image {
    position: relative;

    width: 82%;
    height: 420px;

    background: #ffffff;

    border-radius: 30px;

    border: 1px solid #dcecf2;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0,0,0,.10);

    z-index: 2;
}


.partnership-image::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: #eef9fc;

    z-index: 0;
}


.partnership-image img {
    position: relative;

    width: 88%;
    height: 88%;

    object-fit: contain;

    z-index: 1;

    transition: transform .5s ease;
}


.partnership-visual:hover .partnership-image img {
    transform: scale(1.04);
}


/* =========================================================
   MAIN FLOATING CARD
========================================================= */

.partnership-main-card {
    position: absolute;

    left: 0;
    bottom: 55px;

    display: flex;
    align-items: center;
    gap: 14px;

    background: #ffffff;

    padding: 17px 22px;

    border-radius: 17px;

    box-shadow: 0 12px 30px rgba(0,0,0,.12);

    border: 1px solid #e2edf2;

    z-index: 4;
}


.partnership-main-icon {
    width: 48px;
    height: 48px;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );

    display: flex;
    align-items: center;
    justify-content: center;
}


.partnership-main-icon i {
    color: #ffffff;
    font-size: 21px;
}


.partnership-main-card div:last-child {
    display: flex;
    flex-direction: column;
}


.partnership-main-card strong {
    font-size: 14px;
    color: var(--dark);
}


.partnership-main-card span {
    font-size: 11px;
    color: #777;
    margin-top: 3px;
}


/* =========================================================
   EXPERIENCE BADGE
========================================================= */

.partnership-badge {
    position: absolute;

    right: 0;
    top: 55px;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background: var(--primary);

    color: #ffffff;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow: 0 15px 35px rgba(0,109,143,.25);

    z-index: 4;
}


.partnership-badge strong {
    font-size: 29px;
    line-height: 1;
}


.partnership-badge span {
    font-size: 10px;
    line-height: 1.35;

    margin-top: 6px;

    opacity: .95;
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.partnership-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.circle-one {
    width: 180px;
    height: 180px;

    right: -15px;
    bottom: 5px;

    border: 25px solid rgba(0,195,137,.10);

    z-index: 1;
}


.circle-two {
    width: 100px;
    height: 100px;

    left: 15px;
    top: 25px;

    border: 18px solid rgba(0,109,143,.08);

    z-index: 1;
}


/* =========================================================
   BOTTOM PARTNERSHIP BAR
========================================================= */

.partnership-bottom {
    margin-top: 70px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    background: #ffffff;

    border: 1px solid #dfedf2;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,.06);

    overflow: hidden;
}


.partnership-bottom-item {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 24px 25px;

    border-right: 1px solid #e5eef2;
}


.partnership-bottom-item:last-child {
    border-right: none;
}


.partnership-bottom-item > i {
    font-size: 24px;

    color: var(--primary);

    transition: all .3s ease;
}


.partnership-bottom-item:hover > i {
    color: var(--green);

    transform: scale(1.1);
}


.partnership-bottom-item div {
    display: flex;
    flex-direction: column;
}


.partnership-bottom-item strong {
    font-size: 13px;

    color: var(--dark);

    margin-bottom: 3px;
}


.partnership-bottom-item span {
    font-size: 10px;

    color: #777;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .partnership-section {
        padding: 80px 0;
    }


    .partnership-visual {
        min-height: 450px;

        margin-top: 20px;
    }


    .partnership-image {
        height: 390px;
    }


    .partnership-bottom {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 55px;
    }


    .partnership-bottom-item:nth-child(2) {
        border-right: none;
    }


    .partnership-bottom-item:nth-child(-n+2) {
        border-bottom: 1px solid #e5eef2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .partnership-section {
        padding: 70px 0;
    }


    .partnership-lead {
        font-size: 14px;
    }


    .partnership-text {
        font-size: 12.5px;
    }


    .partnership-point {
        gap: 13px;
    }


    .partnership-point-icon {
        width: 44px;
        height: 44px;

        min-width: 44px;

        border-radius: 12px;
    }


    .partnership-point-icon i {
        font-size: 17px;
    }


    .partnership-point h4 {
        font-size: 15px;
    }


    .partnership-point p {
        font-size: 11.5px;
    }


    .partnership-button {
        margin-top: 28px;
    }


    .partnership-visual {
        min-height: 390px;

        padding: 25px 10px;

        margin-top: 10px;
    }


    .partnership-image {
        width: 82%;
        height: 330px;

        border-radius: 22px;
    }


    .partnership-image img {
        width: 92%;
        height: 92%;
    }


    .partnership-main-card {
        left: 0;
        bottom: 30px;

        padding: 12px 15px;

        gap: 10px;
    }


    .partnership-main-icon {
        width: 40px;
        height: 40px;

        border-radius: 11px;
    }


    .partnership-main-icon i {
        font-size: 17px;
    }


    .partnership-main-card strong {
        font-size: 12px;
    }


    .partnership-main-card span {
        font-size: 9px;
    }


    .partnership-badge {
        right: 0;
        top: 35px;

        width: 95px;
        height: 95px;
    }


    .partnership-badge strong {
        font-size: 23px;
    }


    .partnership-badge span {
        font-size: 8px;
    }


    .circle-one {
        width: 120px;
        height: 120px;

        right: -10px;
        bottom: 0;

        border-width: 17px;
    }


    .circle-two {
        width: 70px;
        height: 70px;

        left: 5px;
        top: 15px;

        border-width: 13px;
    }


    .partnership-bottom {
        grid-template-columns: 1fr;

        margin-top: 45px;

        border-radius: 18px;
    }


    .partnership-bottom-item {
        padding: 20px;

        border-right: none;
        border-bottom: 1px solid #e5eef2;
    }


    .partnership-bottom-item:last-child {
        border-bottom: none;
    }

}


/* =========================================================
   STEP 17 - CONTACT / SERVICE CTA
========================================================= */

.service-contact-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #102b43 0%,
            #123d59 55%,
            #075f78 100%
        );
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.service-contact-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}


.service-contact-shape-one {
    width: 380px;
    height: 380px;

    top: -180px;
    right: -100px;

    border: 55px solid rgba(255,255,255,.035);
}


.service-contact-shape-two {
    width: 300px;
    height: 300px;

    left: -130px;
    bottom: -150px;

    border: 45px solid rgba(0,195,137,.08);
}


.service-contact-wrapper {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADING
========================================================= */

.service-contact-heading {
    max-width: 760px;
    margin: 0 auto 55px;
}


.service-contact-label {
    display: inline-block;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--green);

    margin-bottom: 13px;
}


.service-contact-heading h2 {
    margin: 0 0 18px;

    font-size: 40px;
    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;
}


.service-contact-heading h2 strong {
    color: var(--green);
    font-weight: 700;
}


.service-contact-heading p {
    max-width: 680px;

    margin: 0 auto;

    font-size: 14px;
    line-height: 1.8;

    color: rgba(255,255,255,.72);
}


/* =========================================================
   CONTACT GRID
========================================================= */

.service-contact-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.service-contact-card {
    position: relative;

    min-height: 300px;

    display: flex;
    flex-direction: column;

    padding: 30px 26px;

    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.13);

    border-radius: 22px;

    text-decoration: none;

    overflow: hidden;

    transition: all .35s ease;
}


.service-contact-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--green),
        var(--secondary)
    );

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .35s ease;
}


.service-contact-card:hover {
    transform: translateY(-8px);

    background: rgba(255,255,255,.12);

    border-color: rgba(255,255,255,.25);

    box-shadow: 0 20px 40px rgba(0,0,0,.18);
}


.service-contact-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   ICON
========================================================= */

.service-contact-icon {
    width: 62px;
    height: 62px;

    border-radius: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--secondary)
    );

    box-shadow: 0 10px 25px rgba(0,195,137,.18);

    transition: all .35s ease;
}


.service-contact-icon i {
    font-size: 25px;
    color: #ffffff;
}


.service-contact-card:hover .service-contact-icon {
    transform: scale(1.08) rotate(-3deg);
}


/* WhatsApp */

.service-contact-whatsapp .service-contact-icon {
    background: #25D366;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-contact-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}


.service-contact-card-content > span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;

    color: var(--green);
}


.service-contact-card-content h3 {
    margin: 0 0 12px;

    font-size: 18px;
    line-height: 1.35;

    font-weight: 700;

    color: #ffffff;

    word-break: break-word;
}


.service-contact-card-content p {
    margin: 0 0 22px;

    font-size: 12px;
    line-height: 1.7;

    color: rgba(255,255,255,.65);
}


.service-contact-action {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: auto;

    font-size: 12px;
    font-weight: 700;

    color: #ffffff;
}


.service-contact-action i {
    font-size: 11px;

    transition: transform .3s ease;
}


.service-contact-card:hover .service-contact-action i {
    transform: translateX(5px);
}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.service-contact-bottom {
    margin-top: 45px;

    padding: 22px 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}


.service-contact-location {
    display: flex;
    align-items: center;
    gap: 13px;
}


.service-contact-location-icon {
    width: 43px;
    height: 43px;

    min-width: 43px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.09);
}


.service-contact-location-icon i {
    color: var(--green);
    font-size: 17px;
}


.service-contact-location div:last-child {
    display: flex;
    flex-direction: column;
}


.service-contact-location span {
    margin-bottom: 3px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;

    color: var(--green);
}


.service-contact-location strong {
    font-size: 13px;
    color: #ffffff;
}


.service-contact-secondary-phone {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 12px;

    color: rgba(255,255,255,.70);
}


.service-contact-secondary-phone > i {
    color: var(--green);
}


.service-contact-secondary-phone a {
    margin-left: 4px;

    color: #ffffff;

    font-weight: 700;

    text-decoration: none;

    transition: color .25s ease;
}


.service-contact-secondary-phone a:hover {
    color: var(--green);
}


/* =========================================================
   STEP 17 - TABLET
========================================================= */

@media (max-width: 991px) {

    .service-contact-section {
        padding: 80px 0;
    }


    .service-contact-heading h2 {
        font-size: 34px;
    }


    .service-contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .service-contact-card {
        min-height: 270px;
    }

}


/* =========================================================
   STEP 17 - MOBILE
========================================================= */

@media (max-width: 576px) {

    .service-contact-section {
        padding: 70px 0;
    }


    .service-contact-heading {
        margin-bottom: 40px;
    }


    .service-contact-heading h2 {
        font-size: 28px;
    }


    .service-contact-heading p {
        font-size: 12.5px;
    }


    .service-contact-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .service-contact-card {
        min-height: auto;

        padding: 26px 23px;

        border-radius: 18px;
    }


    .service-contact-icon {
        width: 56px;
        height: 56px;

        border-radius: 15px;

        margin-bottom: 20px;
    }


    .service-contact-icon i {
        font-size: 22px;
    }


    .service-contact-card-content h3 {
        font-size: 17px;
    }


    .service-contact-bottom {
        margin-top: 35px;

        padding: 22px 5px;

        flex-direction: column;

        align-items: flex-start;
    }


    .service-contact-secondary-phone {
        line-height: 1.7;
    }


    .service-contact-shape-one {
        width: 250px;
        height: 250px;

        top: -130px;
        right: -100px;

        border-width: 38px;
    }


    .service-contact-shape-two {
        width: 200px;
        height: 200px;

        left: -100px;
        bottom: -100px;

        border-width: 30px;
    }

}

/* =========================================================
   STEP 18 - PROFESSIONAL FOOTER
========================================================= */

.site-footer {
    background: #0b2438;
    color: #ffffff;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.footer-main {
    padding: 85px 0 65px;
}


/* =========================================================
   FOOTER ABOUT
========================================================= */

.footer-logo {
    display: inline-block;
    margin-bottom: 22px;
}


.footer-logo img {
    width: auto;
    height: 100px;
    display: block;

    background: #0b2438;

    padding: 8px 12px;

    border-radius: 22px;
}


.footer-about p {
    max-width: 410px;

    margin: 0 0 25px;

    font-size: 12.5px;
    line-height: 1.8;

    color: rgba(255,255,255,.68);
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}


.footer-social a {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.10);

    color: #ffffff;

    text-decoration: none;

    transition: all .3s ease;
}


.footer-social a:hover {
    background: var(--green);
    border-color: var(--green);

    transform: translateY(-3px);
}


.footer-social a i {
    font-size: 16px;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column h3 {
    position: relative;

    margin: 0 0 26px;

    padding-bottom: 11px;

    font-size: 17px;
    font-weight: 700;

    color: #ffffff;
}


.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 38px;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--green),
        var(--secondary)
    );
}


.footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


.footer-column ul li {
    margin-bottom: 11px;
}


.footer-column ul li:last-child {
    margin-bottom: 0;
}


.footer-column ul li a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    font-size: 12px;

    color: rgba(255,255,255,.67);

    text-decoration: none;

    transition: all .25s ease;
}


.footer-column ul li a i {
    font-size: 8px;

    color: var(--green);

    transition: transform .25s ease;
}


.footer-column ul li a:hover {
    color: #ffffff;

    transform: translateX(4px);
}


.footer-column ul li a:hover i {
    transform: translateX(2px);
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-item {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-bottom: 19px;
}


.footer-contact-item:last-child {
    margin-bottom: 0;
}


.footer-contact-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,195,137,.11);

    border: 1px solid rgba(0,195,137,.18);
}


.footer-contact-icon i {
    font-size: 14px;
    color: var(--green);
}


.footer-contact-item > div:last-child {
    display: flex;
    flex-direction: column;
}


.footer-contact-item span {
    display: block;

    margin-bottom: 4px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;

    color: var(--green);

    text-transform: uppercase;
}


.footer-contact-item p {
    margin: 0;

    font-size: 11px;
    line-height: 1.65;

    color: rgba(255,255,255,.67);
}


.footer-contact-item a {
    width: fit-content;

    margin-bottom: 3px;

    font-size: 11.5px;

    color: rgba(255,255,255,.72);

    text-decoration: none;

    transition: color .25s ease;
}


.footer-contact-item a:last-child {
    margin-bottom: 0;
}


.footer-contact-item a:hover {
    color: var(--green);
}


/* =========================================================
   BOTTOM FOOTER
========================================================= */

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);

    background: #081d2e;
}


.footer-bottom-wrapper {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.footer-bottom p {
    margin: 0;

    font-size: 11px;

    color: rgba(255,255,255,.55);
}


.footer-bottom-links {
    display: flex;
    align-items: center;

    gap: 12px;
}


.footer-bottom-links a {
    font-size: 10.5px;

    color: rgba(255,255,255,.55);

    text-decoration: none;

    transition: color .25s ease;
}


.footer-bottom-links a:hover {
    color: var(--green);
}


.footer-bottom-links span {
    font-size: 10px;

    color: rgba(255,255,255,.20);
}


/* =========================================================
   STEP 18 - TABLET
========================================================= */

@media (max-width: 991px) {

    .footer-main {
        padding: 70px 0 55px;
    }


    .footer-logo img {
        height: 65px;
    }

}


/* =========================================================
   STEP 18 - MOBILE
========================================================= */

@media (max-width: 576px) {

    .footer-main {
        padding: 60px 0 45px;
    }


    .footer-logo img {
        height: 60px;
    }


    .footer-about p {
        font-size: 12px;
    }


    .footer-column h3 {
        margin-bottom: 20px;

        font-size: 16px;
    }


    .footer-bottom-wrapper {
        min-height: auto;

        padding: 20px 0;

        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 10px;
    }


    .footer-bottom-links {
        justify-content: center;

        flex-wrap: wrap;
    }

}

/* =========================================================
   STEP 20 - ABOUT PAGE
========================================================= */


/* =========================================================
   INNER PAGE HERO
========================================================= */

.inner-page-hero {
    position: relative;
    padding: 115px 0 100px;

    background:
        linear-gradient(
            135deg,
            #edf8fc 0%,
            #f8fcfe 100%
        );

    overflow: hidden;
}


.inner-page-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    top: -220px;
    right: -100px;

    border: 60px solid rgba(0,109,143,.05);
}


.inner-page-hero::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    left: -120px;
    bottom: -130px;

    border: 40px solid rgba(0,195,137,.07);
}


.inner-page-hero-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}


.inner-page-hero-content > span {
    display: inline-block;

    margin-bottom: 15px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--green);
}


.inner-page-hero-content h1 {
    max-width: 700px;

    margin: 0 0 20px;

    font-size: 46px;
    line-height: 1.2;

    font-weight: 700;

    color: var(--dark);
}


.inner-page-hero-content h1 strong {
    color: var(--primary);
    font-weight: 700;
}


.inner-page-hero-content p {
    max-width: 680px;

    margin: 0 0 25px;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}


.inner-page-breadcrumb {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 11px;
}


.inner-page-breadcrumb a {
    color: var(--primary);

    font-weight: 600;

    text-decoration: none;
}


.inner-page-breadcrumb i {
    font-size: 8px;

    color: #a2afb7;
}


.inner-page-breadcrumb span {
    color: #777;
}


/* =========================================================
   ABOUT INTRO
========================================================= */

.about-page-intro {
    padding: 110px 0;

    background: #ffffff;
}


.about-page-visual {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.about-page-image {
    width: 82%;
    height: 430px;

    border-radius: 28px;

    background: #f7fbfe;

    border: 1px solid #dfeef3;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 18px 45px rgba(0,0,0,.08);
}


.about-page-image img {
    width: 90%;
    height: 90%;

    object-fit: contain;
}


.about-page-experience {
    position: absolute;

    top: 30px;
    right: 0;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background: var(--primary);

    color: #ffffff;

    text-align: center;

    box-shadow: 0 15px 30px rgba(0,109,143,.23);
}


.about-page-experience strong {
    font-size: 29px;
    line-height: 1;
}


.about-page-experience span {
    max-width: 70px;

    margin-top: 6px;

    font-size: 9px;
    line-height: 1.3;
}


.about-page-support-card {
    position: absolute;

    left: 0;
    bottom: 40px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 16px 20px;

    background: #ffffff;

    border: 1px solid #e0edf2;

    border-radius: 16px;

    box-shadow: 0 12px 30px rgba(0,0,0,.11);
}


.about-page-support-icon {
    width: 46px;
    height: 46px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );
}


.about-page-support-icon i {
    font-size: 19px;

    color: #ffffff;
}


.about-page-support-card > div:last-child {
    display: flex;
    flex-direction: column;
}


.about-page-support-card strong {
    font-size: 12px;

    color: var(--dark);
}


.about-page-support-card span {
    margin-top: 2px;

    font-size: 9px;

    color: #777;
}


/* =========================================================
   ABOUT TEXT
========================================================= */

.about-page-title h2 strong {
    color: var(--primary);
}


.about-page-lead {
    margin: 0 0 15px;

    font-size: 16px;
    line-height: 1.8;

    color: #444;
}


.about-page-text {
    margin: 0 0 14px;

    font-size: 13px;
    line-height: 1.8;

    color: #666;
}


.about-page-highlights {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px 20px;

    margin-top: 27px;
}


.about-page-highlight {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 12px;
    font-weight: 600;

    color: var(--dark);
}


.about-page-highlight i {
    color: var(--green);

    font-size: 15px;
}


/* =========================================================
   MISSION SECTION
========================================================= */

.mission-section {
    padding: 105px 0;

    background: #f7fbfe;
}


.mission-card {
    height: 100%;

    padding: 34px 30px;

    background: #ffffff;

    border: 1px solid #e0ebf0;

    border-radius: 22px;

    box-shadow: 0 8px 25px rgba(0,0,0,.05);

    transition: all .35s ease;
}


.mission-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0,0,0,.09);
}


.mission-card-icon {
    width: 65px;
    height: 65px;

    margin-bottom: 22px;

    border-radius: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );
}


.mission-card-icon i {
    color: #ffffff;

    font-size: 25px;
}


.mission-card > span {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;

    color: var(--green);
}


.mission-card h3 {
    margin: 0 0 12px;

    font-size: 20px;
    font-weight: 700;

    color: var(--dark);
}


.mission-card p {
    margin: 0;

    font-size: 12.5px;
    line-height: 1.75;

    color: #666;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.capabilities-section {
    padding: 110px 0;

    background: #ffffff;
}


.capabilities-title h2 strong {
    color: var(--primary);
}


.capabilities-section .col-lg-5 > p {
    margin: 0 0 28px;

    font-size: 13.5px;
    line-height: 1.85;

    color: #666;
}


.capabilities-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


.capability-item {
    display: flex;

    gap: 15px;

    padding: 22px 20px;

    border: 1px solid #e1edf2;

    border-radius: 18px;

    background: #f8fcfe;

    transition: all .3s ease;
}


.capability-item:hover {
    background: #ffffff;

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(0,0,0,.07);
}


.capability-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    border-radius: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid #dce9ef;
}


.capability-icon i {
    color: var(--primary);

    font-size: 18px;
}


.capability-item h3 {
    margin: 1px 0 6px;

    font-size: 15px;
    font-weight: 700;

    color: var(--dark);
}


.capability-item p {
    margin: 0;

    font-size: 11px;
    line-height: 1.6;

    color: #777;
}


/* =========================================================
   WHY VENTTECH
========================================================= */

.about-why-section {
    padding: 100px 0;

    background: linear-gradient(
        135deg,
        #eef8fc,
        #f8fcfe
    );
}


.about-why-card {
    height: 100%;

    padding: 30px 24px;

    text-align: center;

    background: #ffffff;

    border-radius: 20px;

    border: 1px solid #e0edf2;

    box-shadow: 0 8px 25px rgba(0,0,0,.05);

    transition: all .3s ease;
}


.about-why-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 16px 35px rgba(0,0,0,.09);
}


.about-why-card > i {
    width: 62px;
    height: 62px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );

    color: #ffffff;

    font-size: 23px;
}


.about-why-card h3 {
    margin-bottom: 10px;

    font-size: 17px;
    font-weight: 700;

    color: var(--dark);
}


.about-why-card p {
    margin: 0;

    font-size: 11.5px;
    line-height: 1.7;

    color: #666;
}


/* =========================================================
   ABOUT CTA
========================================================= */

.about-page-cta {
    padding: 80px 0;

    background: #102f47;
}


.about-page-cta-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


.about-page-cta-wrapper > div:first-child {
    max-width: 680px;
}


.about-page-cta-wrapper span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.3px;

    color: var(--green);
}


.about-page-cta-wrapper h2 {
    margin: 0 0 10px;

    font-size: 30px;
    font-weight: 700;

    color: #ffffff;
}


.about-page-cta-wrapper p {
    margin: 0;

    font-size: 12.5px;
    line-height: 1.7;

    color: rgba(255,255,255,.67);
}


.about-page-cta-buttons {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.about-whatsapp-btn {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 13px 22px;

    border-radius: 30px;

    background: #25D366;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}


.about-whatsapp-btn:hover {
    transform: translateY(-3px);

    color: #ffffff;

    box-shadow: 0 10px 25px rgba(37,211,102,.22);
}


/* =========================================================
   ABOUT PAGE - TABLET
========================================================= */

@media (max-width: 991px) {

    .inner-page-hero {
        padding: 90px 0 80px;
    }


    .inner-page-hero-content h1 {
        font-size: 39px;
    }


    .about-page-intro,
    .capabilities-section {
        padding: 80px 0;
    }


    .mission-section,
    .about-why-section {
        padding: 80px 0;
    }


    .about-page-visual {
        min-height: 450px;
    }


    .about-page-image {
        height: 390px;
    }


    .about-page-cta-wrapper {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   ABOUT PAGE - MOBILE
========================================================= */

@media (max-width: 576px) {

    .inner-page-hero {
        padding: 70px 0 65px;
    }


    .inner-page-hero-content h1 {
        font-size: 30px;
    }


    .inner-page-hero-content p {
        font-size: 13px;
    }


    .about-page-intro,
    .mission-section,
    .capabilities-section,
    .about-why-section {
        padding: 70px 0;
    }


    .about-page-visual {
        min-height: 370px;
    }


    .about-page-image {
        width: 84%;
        height: 320px;

        border-radius: 21px;
    }


    .about-page-experience {
        width: 90px;
        height: 90px;

        top: 25px;
    }


    .about-page-experience strong {
        font-size: 22px;
    }


    .about-page-experience span {
        font-size: 7.5px;
    }


    .about-page-support-card {
        bottom: 20px;

        padding: 12px 14px;
    }


    .about-page-support-icon {
        width: 39px;
        height: 39px;
    }


    .about-page-support-card strong {
        font-size: 10px;
    }


    .about-page-support-card span {
        font-size: 8px;
    }


    .about-page-highlights {
        grid-template-columns: 1fr;
    }


    .capabilities-grid {
        grid-template-columns: 1fr;
    }


    .about-page-cta {
        padding: 65px 0;
    }


    .about-page-cta-wrapper h2 {
        font-size: 24px;
    }


    .about-page-cta-buttons {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .about-page-cta-buttons a {
        justify-content: center;
    }

}

/* =========================================================
   STEP 21 - PRODUCTS PAGE
========================================================= */


/* PAGE HERO */

.products-page-hero {
    position: relative;
    padding: 115px 0 100px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf8fc 0%,
            #f8fcfe 100%
        );
}


.products-page-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -100px;

    border-radius: 50%;

    border: 60px solid rgba(0,109,143,.05);
}


.products-page-hero::after {
    content: "";
    position: absolute;

    width: 250px;
    height: 250px;

    left: -120px;
    bottom: -130px;

    border-radius: 50%;

    border: 40px solid rgba(0,195,137,.07);
}


.products-page-hero-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}


.products-page-hero-content > span {
    display: inline-block;

    margin-bottom: 15px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--green);
}


.products-page-hero-content h1 {
    max-width: 720px;

    margin: 0 0 20px;

    font-size: 46px;
    line-height: 1.2;

    font-weight: 700;

    color: var(--dark);
}


.products-page-hero-content h1 strong {
    display: block;

    color: var(--primary);
}


.products-page-hero-content p {
    max-width: 680px;

    margin: 0 0 25px;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}


/* =========================================================
   PRODUCTS CATALOG
========================================================= */

.products-catalog-section {
    padding: 110px 0;

    background: #ffffff;
}


.products-catalog-section .section-title h2 strong {
    color: var(--primary);
}


/* FILTER */

.products-filter {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 40px 0 50px;
}


.products-filter-btn {
    border: 1px solid #dce9ef;

    background: #ffffff;

    color: #60717c;

    padding: 10px 18px;

    border-radius: 30px;

    font-family: inherit;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition: all .3s ease;
}


.products-filter-btn:hover {
    color: var(--primary);

    border-color: var(--primary);
}


.products-filter-btn.active {
    color: #ffffff;

    background: var(--primary);

    border-color: var(--primary);

    box-shadow: 0 7px 18px rgba(0,109,143,.18);
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.products-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}


.product-catalog-item {
    min-width: 0;
}


.product-catalog-item.hidden {
    display: none;
}


.product-catalog-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e1ebf0;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0,0,0,.055);

    transition: all .35s ease;
}


.product-catalog-card:hover {
    transform: translateY(-8px);

    border-color: #d5e6ed;

    box-shadow: 0 18px 40px rgba(0,0,0,.10);
}


/* IMAGE */

.product-catalog-image {
    position: relative;

    height: 260px;

    padding: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f9fcfd;

    overflow: hidden;
}


.product-catalog-image::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: #edf8fb;

    z-index: 0;
}


.product-catalog-image img {
    position: relative;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 1;

    transition: transform .45s ease;
}


.product-catalog-card:hover .product-catalog-image img {
    transform: scale(1.05);
}


.product-category-badge {
    position: absolute;

    top: 17px;
    left: 17px;

    z-index: 3;

    padding: 6px 10px;

    border-radius: 20px;

    background: rgba(255,255,255,.93);

    border: 1px solid #e1ebef;

    box-shadow: 0 4px 12px rgba(0,0,0,.05);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .6px;

    color: var(--primary);
}


/* CONTENT */

.product-catalog-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 25px 26px 27px;
}


.product-catalog-content > span {
    display: block;

    margin-bottom: 6px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;

    color: var(--green);
}


.product-catalog-content h3 {
    margin: 0 0 11px;

    font-size: 20px;
    font-weight: 700;

    color: var(--dark);
}


.product-catalog-content p {
    margin: 0 0 22px;

    font-size: 12px;
    line-height: 1.75;

    color: #6b7378;
}


.product-enquiry-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 8px;

    margin-top: auto;

    color: var(--primary);

    font-size: 11.5px;
    font-weight: 700;

    text-decoration: none;

    transition: color .25s ease;
}


.product-enquiry-link i {
    font-size: 10px;

    transition: transform .25s ease;
}


.product-enquiry-link:hover {
    color: var(--green);
}


.product-enquiry-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   PRODUCT SUPPORT
========================================================= */

.product-support-section {
    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            #f2fafc 0%,
            #eaf6fa 100%
        );
}


.product-support-title h2 strong {
    color: var(--primary);
}


.product-support-intro {
    max-width: 570px;

    margin: 0 0 27px;

    font-size: 13.5px;
    line-height: 1.8;

    color: #666;
}


.product-support-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 13px 20px;
}


.product-support-list > div {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 12px;
    font-weight: 600;

    color: var(--dark);
}


.product-support-list i {
    width: 25px;
    height: 25px;

    min-width: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(0,195,137,.12);

    color: var(--green);

    font-size: 9px;
}


/* SUPPORT BOX */

.product-support-box {
    padding: 40px;

    background: #ffffff;

    border: 1px solid #dce9ef;

    border-radius: 24px;

    box-shadow: 0 15px 40px rgba(0,0,0,.07);
}


.product-support-box-icon {
    width: 66px;
    height: 66px;

    margin-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--primary)
        );
}


.product-support-box-icon i {
    font-size: 25px;

    color: #ffffff;
}


.product-support-box > span {
    display: block;

    margin-bottom: 7px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;

    color: var(--green);
}


.product-support-box h3 {
    margin: 0 0 12px;

    font-size: 24px;
    font-weight: 700;

    color: var(--dark);
}


.product-support-box p {
    margin: 0 0 25px;

    font-size: 12.5px;
    line-height: 1.8;

    color: #666;
}


.product-support-buttons {
    display: flex;
    align-items: center;

    gap: 12px;
}


.product-whatsapp-btn {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 13px 21px;

    border-radius: 30px;

    background: #25D366;

    color: #ffffff;

    font-size: 11.5px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}


.product-whatsapp-btn:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow: 0 9px 22px rgba(37,211,102,.22);
}


/* =========================================================
   PRODUCTS PAGE - TABLET
========================================================= */

@media (max-width: 991px) {

    .products-page-hero {
        padding: 90px 0 80px;
    }


    .products-page-hero-content h1 {
        font-size: 39px;
    }


    .products-catalog-section {
        padding: 80px 0;
    }


    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .product-support-section {
        padding: 80px 0;
    }

}


/* =========================================================
   PRODUCTS PAGE - MOBILE
========================================================= */

@media (max-width: 576px) {

    .products-page-hero {
        padding: 70px 0 65px;
    }


    .products-page-hero-content h1 {
        font-size: 30px;
    }


    .products-page-hero-content p {
        font-size: 13px;
    }


    .products-catalog-section {
        padding: 70px 0;
    }


    .products-filter {
        justify-content: flex-start;

        margin: 30px 0 38px;
    }


    .products-filter-btn {
        padding: 9px 14px;

        font-size: 10px;
    }


    .products-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .product-catalog-image {
        height: 235px;
    }


    .product-catalog-content {
        padding: 22px;
    }


    .product-support-section {
        padding: 70px 0;
    }


    .product-support-list {
        grid-template-columns: 1fr;
    }


    .product-support-box {
        padding: 30px 24px;

        border-radius: 20px;
    }


    .product-support-buttons {
        flex-direction: column;

        align-items: stretch;
    }


    .product-support-buttons a {
        justify-content: center;
    }

}

/* =========================================================
   STEP 22 - SERVICES PAGE
========================================================= */


/* =========================================================
   SERVICES HERO
========================================================= */

.services-page-hero {
    position: relative;
    padding: 115px 0 100px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #edf8fc 0%,
        #f8fcfe 100%
    );
}


.services-page-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -100px;

    border: 60px solid rgba(0,109,143,.05);
    border-radius: 50%;
}


.services-page-hero::after {
    content: "";
    position: absolute;

    width: 250px;
    height: 250px;

    left: -120px;
    bottom: -130px;

    border: 40px solid rgba(0,195,137,.07);
    border-radius: 50%;
}


.services-page-hero-content {
    position: relative;
    z-index: 2;

    max-width: 780px;
}


.services-page-hero-content > span {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--green);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


.services-page-hero-content h1 {
    margin: 0 0 20px;

    max-width: 750px;

    color: var(--dark);

    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
}


.services-page-hero-content h1 strong {
    display: block;

    color: var(--primary);
}


.services-page-hero-content p {
    max-width: 690px;

    margin: 0 0 25px;

    color: #666;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   SERVICES INTRO
========================================================= */

.services-intro-section {
    padding: 110px 0;

    background: #ffffff;
}


.services-intro-title h2 strong {
    color: var(--primary);
}


.services-intro-lead {
    margin: 0 0 15px;

    color: #444;

    font-size: 15px;
    line-height: 1.8;
}


.services-intro-text {
    margin: 0 0 25px;

    color: #68747a;

    font-size: 13px;
    line-height: 1.8;
}


.services-intro-points {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px 18px;
}


.services-intro-points > div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--dark);

    font-size: 11.5px;
    font-weight: 600;
}


.services-intro-points i {
    color: var(--green);

    font-size: 15px;
}


/* VISUAL */

.services-intro-visual {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.services-main-image {
    width: 82%;
    height: 410px;

    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid #e0edf2;
    border-radius: 27px;

    background: #f7fbfd;

    box-shadow: 0 18px 45px rgba(0,0,0,.07);
}


.services-main-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.services-experience-badge {
    position: absolute;

    top: 25px;
    right: 0;

    width: 115px;
    height: 115px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    text-align: center;

    color: #ffffff;
    background: var(--primary);

    box-shadow: 0 14px 30px rgba(0,109,143,.22);
}


.services-experience-badge strong {
    font-size: 28px;
    line-height: 1;
}


.services-experience-badge span {
    max-width: 65px;

    margin-top: 6px;

    font-size: 8px;
    line-height: 1.3;
}


.services-floating-card {
    position: absolute;

    left: 0;
    bottom: 35px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 15px 19px;

    border: 1px solid #e0edf2;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 12px 30px rgba(0,0,0,.1);
}


.services-floating-card > div {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );
}


.services-floating-card section {
    display: flex;
    flex-direction: column;
}


.services-floating-card strong {
    color: var(--dark);

    font-size: 11px;
}


.services-floating-card span {
    margin-top: 2px;

    color: #777;

    font-size: 8px;
}


/* =========================================================
   CORE SERVICES
========================================================= */

.core-services-section {
    padding: 105px 0;

    background: #f7fbfe;
}


.core-services-section .section-title h2 strong {
    color: var(--primary);
}


.core-services-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 45px;
}


.core-service-card {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;

    padding: 32px 28px;

    overflow: hidden;

    border: 1px solid #e1ebf0;
    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 8px 25px rgba(0,0,0,.05);

    transition: all .35s ease;
}


.core-service-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0,0,0,.09);
}


.core-service-number {
    position: absolute;

    top: 20px;
    right: 24px;

    color: #e5f0f4;

    font-size: 37px;
    font-weight: 800;
}


.core-service-icon {
    width: 61px;
    height: 61px;

    margin-bottom: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--primary)
    );

    color: #ffffff;

    font-size: 22px;
}


.core-service-card h3 {
    margin: 0 0 11px;

    color: var(--dark);

    font-size: 18px;
    font-weight: 700;
}


.core-service-card > p {
    margin: 0 0 18px;

    color: #69747a;

    font-size: 11.5px;
    line-height: 1.75;
}


.core-service-card ul {
    margin: 0 0 22px;
    padding: 0;

    list-style: none;
}


.core-service-card li {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: #56636b;

    font-size: 10.5px;
}


.core-service-card li i {
    color: var(--green);

    font-size: 8px;
}


.core-service-card > a {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: var(--primary);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}


.core-service-card > a i {
    font-size: 9px;

    transition: transform .25s ease;
}


.core-service-card > a:hover i {
    transform: translateX(5px);
}


/* =========================================================
   SERVICE PROCESS
========================================================= */

.services-process-section {
    padding: 105px 0;

    background: #ffffff;
}


.services-process-section .section-title h2 strong {
    color: var(--primary);
}


.services-process-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-top: 55px;
}


.services-process-item {
    width: 17%;

    text-align: center;
}


.services-process-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dcebef;
    border-radius: 50%;

    background: #f5fbfd;

    color: var(--primary);

    font-size: 23px;

    transition: all .3s ease;
}


.services-process-item:hover .services-process-icon {
    color: #ffffff;

    background: var(--primary);

    transform: translateY(-5px);
}


.services-process-item > span {
    display: block;

    margin-bottom: 5px;

    color: var(--green);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}


.services-process-item h3 {
    margin: 0 0 8px;

    color: var(--dark);

    font-size: 15px;
    font-weight: 700;
}


.services-process-item p {
    margin: 0;

    color: #747e83;

    font-size: 10px;
    line-height: 1.65;
}


.services-process-arrow {
    padding-top: 27px;

    color: #c5d9e1;

    font-size: 13px;
}


/* =========================================================
   EQUIPMENT SUPPORT
========================================================= */

.service-equipment-section {
    padding: 105px 0;

    background: #f4fafc;
}


.service-equipment-title h2 strong {
    color: var(--primary);
}


.service-equipment-section .col-lg-5 > p {
    margin: 0 0 27px;

    color: #66747a;

    font-size: 13px;
    line-height: 1.8;
}


.service-equipment-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 17px;
}


.service-equipment-item {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 21px 19px;

    border: 1px solid #dfebf0;
    border-radius: 17px;

    background: #ffffff;

    transition: all .3s ease;
}


.service-equipment-item:hover {
    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(0,0,0,.07);
}


.service-equipment-item > i {
    width: 46px;
    height: 46px;

    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eff9fb;

    color: var(--primary);

    font-size: 17px;
}


.service-equipment-item h3 {
    margin: 1px 0 5px;

    color: var(--dark);

    font-size: 14px;
    font-weight: 700;
}


.service-equipment-item p {
    margin: 0;

    color: #758087;

    font-size: 9.5px;
    line-height: 1.6;
}


/* =========================================================
   SERVICES CTA
========================================================= */

.services-contact-cta {
    padding: 80px 0;

    background: linear-gradient(
        135deg,
        #102f47 0%,
        #0c4057 100%
    );
}


.services-contact-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


.services-contact-content {
    max-width: 680px;
}


.services-contact-content > span {
    display: block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
}


.services-contact-content h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 700;
}


.services-contact-content p {
    margin: 0;

    color: rgba(255,255,255,.67);

    font-size: 12px;
    line-height: 1.75;
}


.services-contact-buttons {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.services-contact-primary,
.services-contact-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 13px 22px;

    border-radius: 30px;

    color: #ffffff;

    font-size: 11.5px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}


.services-contact-primary {
    background: var(--secondary);
}


.services-contact-whatsapp {
    background: #25D366;
}


.services-contact-primary:hover,
.services-contact-whatsapp:hover {
    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================================
   SERVICES TABLET
========================================================= */

@media (max-width: 991px) {

    .services-page-hero {
        padding: 90px 0 80px;
    }


    .services-page-hero-content h1 {
        font-size: 39px;
    }


    .services-intro-section,
    .core-services-section,
    .services-process-section,
    .service-equipment-section {
        padding: 80px 0;
    }


    .core-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .services-process-wrapper {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 30px;
    }


    .services-process-item {
        width: 100%;
    }


    .services-process-arrow {
        display: none;
    }


    .services-contact-wrapper {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   SERVICES MOBILE
========================================================= */

@media (max-width: 576px) {

    .services-page-hero {
        padding: 70px 0 65px;
    }


    .services-page-hero-content h1 {
        font-size: 30px;
    }


    .services-page-hero-content p {
        font-size: 13px;
    }


    .services-intro-section,
    .core-services-section,
    .services-process-section,
    .service-equipment-section {
        padding: 70px 0;
    }


    .services-intro-points {
        grid-template-columns: 1fr;
    }


    .services-intro-visual {
        min-height: 370px;
    }


    .services-main-image {
        width: 84%;
        height: 320px;

        padding: 20px;
    }


    .services-experience-badge {
        width: 90px;
        height: 90px;
    }


    .services-experience-badge strong {
        font-size: 22px;
    }


    .services-floating-card {
        bottom: 15px;

        padding: 12px 14px;
    }


    .core-services-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .core-service-card {
        min-height: 0;
    }


    .services-process-wrapper {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .services-process-item {
        max-width: 300px;

        margin: auto;
    }


    .service-equipment-grid {
        grid-template-columns: 1fr;
    }


    .services-contact-cta {
        padding: 65px 0;
    }


    .services-contact-content h2 {
        font-size: 24px;
    }


    .services-contact-buttons {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

}

/* =========================================================
   STEP 23 - GALLERY PAGE
========================================================= */


/* HERO */

.gallery-page-hero {
    position: relative;
    padding: 115px 0 100px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #edf8fc 0%,
        #f8fcfe 100%
    );
}


.gallery-page-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -100px;

    border: 60px solid rgba(0,109,143,.05);
    border-radius: 50%;
}


.gallery-page-hero::after {
    content: "";
    position: absolute;

    width: 250px;
    height: 250px;

    left: -120px;
    bottom: -130px;

    border: 40px solid rgba(0,195,137,.07);
    border-radius: 50%;
}


.gallery-page-hero-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}


.gallery-page-hero-content > span {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--green);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


.gallery-page-hero-content h1 {
    margin: 0 0 20px;

    color: var(--dark);

    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
}


.gallery-page-hero-content h1 strong {
    display: block;

    color: var(--primary);
}


.gallery-page-hero-content p {
    max-width: 680px;

    margin: 0 0 25px;

    color: #666;

    font-size: 15px;
    line-height: 1.8;
}


/* INTRO */

.gallery-intro-section {
    padding: 100px 0 35px;

    background: #ffffff;
}


.gallery-intro-section .section-title h2 strong {
    color: var(--primary);
}


/* FILTER */

.gallery-grid-section {
    padding: 0 0 110px;

    background: #ffffff;
}


.gallery-filter {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 48px;
}


.gallery-filter-btn {
    padding: 10px 18px;

    border: 1px solid #dce9ef;
    border-radius: 30px;

    background: #ffffff;

    color: #61717b;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition: all .3s ease;
}


.gallery-filter-btn:hover {
    color: var(--primary);

    border-color: var(--primary);
}


.gallery-filter-btn.active {
    color: #ffffff;

    border-color: var(--primary);

    background: var(--primary);

    box-shadow: 0 8px 20px rgba(0,109,143,.18);
}


/* GRID */

.gallery-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 26px;
}


.gallery-item.hidden {
    display: none;
}


.gallery-card {
    height: 100%;

    overflow: hidden;

    border: 1px solid #e1ebf0;
    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 8px 25px rgba(0,0,0,.055);

    transition: all .35s ease;
}


.gallery-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(0,0,0,.10);
}


/* IMAGE */

.gallery-image {
    position: relative;

    height: 270px;

    padding: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f7fbfd;
}


.gallery-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform .45s ease;
}


.gallery-card:hover .gallery-image img {
    transform: scale(1.05);
}


/* OVERLAY */

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(15,50,72,.65);

    opacity: 0;

    transition: opacity .3s ease;
}


.gallery-card:hover .gallery-overlay {
    opacity: 1;
}


.gallery-view-btn {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #ffffff;

    color: var(--primary);

    font-size: 19px;

    cursor: pointer;

    transition: all .3s ease;
}


.gallery-view-btn:hover {
    transform: scale(1.1);

    background: var(--green);

    color: #ffffff;
}


/* CARD CONTENT */

.gallery-card-content {
    padding: 21px 24px 24px;
}


.gallery-card-content span {
    display: block;

    margin-bottom: 5px;

    color: var(--green);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}


.gallery-card-content h3 {
    margin: 0;

    color: var(--dark);

    font-size: 18px;
    font-weight: 700;
}


/* CTA */

.gallery-contact-section {
    padding: 80px 0;

    background: linear-gradient(
        135deg,
        #102f47 0%,
        #0c4057 100%
    );
}


.gallery-contact-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


.gallery-contact-wrapper > div:first-child {
    max-width: 680px;
}


.gallery-contact-wrapper span {
    display: block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
}


.gallery-contact-wrapper h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 700;
}


.gallery-contact-wrapper p {
    margin: 0;

    color: rgba(255,255,255,.67);

    font-size: 12px;
    line-height: 1.75;
}


.gallery-contact-buttons {
    display: flex;

    gap: 12px;

    flex-shrink: 0;
}


.gallery-contact-primary,
.gallery-contact-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 13px 22px;

    border-radius: 30px;

    color: #ffffff;

    font-size: 11.5px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}


.gallery-contact-primary {
    background: var(--secondary);
}


.gallery-contact-whatsapp {
    background: #25D366;
}


.gallery-contact-primary:hover,
.gallery-contact-whatsapp:hover {
    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(5,25,38,.92);

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;
}


.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}


.gallery-lightbox-content {
    max-width: 900px;
    width: 100%;

    text-align: center;
}


.gallery-lightbox-content img {
    max-width: 100%;
    max-height: 75vh;

    padding: 20px;

    object-fit: contain;

    border-radius: 18px;

    background: #ffffff;
}


.gallery-lightbox-content h3 {
    margin-top: 18px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 600;
}


.gallery-lightbox-close {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #ffffff;

    color: var(--dark);

    font-size: 20px;

    cursor: pointer;
}


/* TABLET */

@media (max-width: 991px) {

    .gallery-page-hero {
        padding: 90px 0 80px;
    }


    .gallery-page-hero-content h1 {
        font-size: 39px;
    }


    .gallery-intro-section {
        padding-top: 80px;
    }


    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .gallery-contact-wrapper {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* MOBILE */

@media (max-width: 576px) {

    .gallery-page-hero {
        padding: 70px 0 65px;
    }


    .gallery-page-hero-content h1 {
        font-size: 30px;
    }


    .gallery-page-hero-content p {
        font-size: 13px;
    }


    .gallery-intro-section {
        padding: 70px 0 30px;
    }


    .gallery-grid-section {
        padding-bottom: 70px;
    }


    .gallery-filter {
        justify-content: flex-start;

        margin-bottom: 35px;
    }


    .gallery-filter-btn {
        padding: 9px 14px;

        font-size: 10px;
    }


    .gallery-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .gallery-image {
        height: 245px;
    }


    .gallery-overlay {
        opacity: 1;

        background: transparent;

        align-items: flex-end;
        justify-content: flex-end;

        padding: 15px;

        pointer-events: none;
    }


    .gallery-view-btn {
        width: 42px;
        height: 42px;

        pointer-events: auto;

        box-shadow: 0 6px 18px rgba(0,0,0,.15);
    }


    .gallery-contact-section {
        padding: 65px 0;
    }


    .gallery-contact-wrapper h2 {
        font-size: 24px;
    }


    .gallery-contact-buttons {
        width: 100%;

        flex-direction: column;
    }


    .gallery-lightbox {
        padding: 15px;
    }


    .gallery-lightbox-close {
        top: 15px;
        right: 15px;
    }

}

/* =========================================================
   STEP 24 - CONTACT PAGE
========================================================= */


/* HERO */

.contact-page-hero {
    position: relative;
    padding: 115px 0 100px;
    overflow: hidden;
    background: linear-gradient(135deg, #edf8fc 0%, #f8fcfe 100%);
}

.contact-page-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -220px;
    right: -100px;
    border: 60px solid rgba(0,109,143,.05);
    border-radius: 50%;
}

.contact-page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.contact-page-hero-content > span {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.contact-page-hero-content h1 {
    margin: 0 0 20px;
    color: var(--dark);
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
}

.contact-page-hero-content h1 strong {
    display: block;
    color: var(--primary);
}

.contact-page-hero-content p {
    max-width: 700px;
    color: #687985;
    font-size: 15px;
    line-height: 1.8;
}


/* CONTACT INFO CARDS */

.contact-info-section {
    padding: 85px 0;
    background: #fff;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.contact-info-card {
    padding: 30px 24px;
    border: 1px solid #e3edf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.05);
    transition: .3s ease;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.09);
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(0,109,143,.09);
    color: var(--primary);
    font-size: 20px;
}

.contact-info-icon.whatsapp {
    background: rgba(37,211,102,.12);
    color: #25D366;
}

.contact-info-card > span {
    display: block;
    margin-bottom: 6px;
    color: var(--green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.contact-info-card h3 {
    margin-bottom: 12px;
    color: var(--dark);
    font-size: 18px;
}

.contact-info-card a {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.contact-info-card p {
    margin: 5px 0 0;
    color: #75838c;
    font-size: 12px;
    line-height: 1.7;
}

.contact-info-card p strong {
    display: block;
    color: var(--dark);
}


/* FORM SECTION */

.contact-main-section {
    padding: 100px 0;
    background: #f7fbfd;
}

.contact-form-wrapper {
    padding: 38px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
}

.contact-form-heading {
    margin-bottom: 30px;
}

.contact-form-heading > span {
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.contact-form-heading h2 {
    margin: 7px 0 10px;
    color: var(--dark);
    font-size: 32px;
    font-weight: 700;
}

.contact-form-heading h2 strong {
    color: var(--primary);
}

.contact-form-heading p {
    color: #73818a;
    line-height: 1.75;
    font-size: 13px;
}

.contact-form-wrapper label {
    display: block;
    margin-bottom: 7px;
    color: var(--dark);
    font-size: 12px;
    font-weight: 600;
}

.contact-form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dce7ed;
    border-radius: 10px;
    background: #fff;
    color: var(--dark);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: .25s ease;
}

.contact-form-control:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(0,164,216,.08);
}

textarea.contact-form-control {
    resize: vertical;
}

.contact-file-note {
    display: block;
    margin-top: 6px;
    color: #85929a;
    font-size: 10px;
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 180px;
    padding: 13px 24px;
    border: 0;
    border-radius: 28px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    background: var(--secondary);
}

.contact-submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-recaptcha {
    margin-top: 5px;
}

.contact-alert {
    margin-bottom: 25px;
    padding: 13px 16px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.6;
}

.contact-alert-success {
    background: #eaf9f1;
    color: #177a49;
    border: 1px solid #c7efd9;
}

.contact-alert-error {
    background: #fff0f0;
    color: #a83b3b;
    border: 1px solid #f2cccc;
}


/* DETAILS */

.contact-details-wrapper {
    height: 100%;
    padding: 38px;
    border-radius: 24px;
    background: linear-gradient(145deg, #17324D, #0d4359);
    color: #fff;
}

.contact-details-wrapper > span {
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.contact-details-wrapper > h2 {
    margin: 10px 0 14px;
    font-size: 29px;
    line-height: 1.35;
}

.contact-details-wrapper > p {
    margin-bottom: 32px;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    line-height: 1.8;
}

.contact-detail-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-detail-item > div:first-child {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: var(--green);
}

.contact-detail-item h4 {
    margin: 0 0 5px;
    font-size: 14px;
}

.contact-detail-item p,
.contact-detail-item a {
    display: block;
    margin: 0 0 4px;
    color: rgba(255,255,255,.67);
    font-size: 11.5px;
    line-height: 1.7;
    text-decoration: none;
}

.contact-detail-item a:hover {
    color: var(--green);
}

.contact-department-box {
    margin-top: 30px;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255,255,255,.07);
}

.contact-department-box h4 {
    margin-bottom: 15px;
    font-size: 14px;
}

.contact-department-box > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.contact-department-box > div:last-child {
    border-bottom: 0;
}

.contact-department-box span {
    color: rgba(255,255,255,.60);
    font-size: 10px;
}

.contact-department-box strong {
    color: #fff;
    font-size: 10px;
}


/* MAP */

.contact-map-section {
    padding: 100px 0;
    background: #fff;
}

.contact-map-wrapper {
    margin-top: 40px;
}

.contact-map-placeholder {
    min-height: 360px;
    padding: 60px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 24px;
    background:
        linear-gradient(rgba(238,248,252,.88), rgba(238,248,252,.88)),
        radial-gradient(circle at center, #b8dce8, #eef8fb);
    border: 1px solid #dcebf0;
}

.contact-map-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 26px;
}

.contact-map-placeholder h3 {
    color: var(--dark);
    font-size: 22px;
}

.contact-map-placeholder p {
    max-width: 450px;
    color: #71808a;
    font-size: 12px;
    line-height: 1.8;
}

.contact-map-placeholder a {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 25px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}


/* EMERGENCY CTA */

.contact-emergency-section {
    padding: 75px 0;
    background: linear-gradient(135deg, #102f47, #0c4057);
}

.contact-emergency-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.contact-emergency-wrapper span {
    color: var(--green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.contact-emergency-wrapper h2 {
    margin: 7px 0;
    color: #fff;
    font-size: 30px;
}

.contact-emergency-wrapper p {
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

.contact-emergency-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.contact-call-btn,
.contact-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.contact-call-btn {
    background: var(--secondary);
}

.contact-whatsapp-btn {
    background: #25D366;
}


/* TABLET */

@media (max-width: 991px) {

    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-emergency-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* MOBILE */

@media (max-width: 576px) {

    .contact-page-hero {
        padding: 70px 0 65px;
    }

    .contact-page-hero-content h1 {
        font-size: 30px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper,
    .contact-details-wrapper {
        padding: 25px 20px;
    }

    .contact-form-heading h2 {
        font-size: 25px;
    }

    .contact-details-wrapper > h2 {
        font-size: 24px;
    }

    .contact-emergency-buttons {
        width: 100%;
        flex-direction: column;
    }

    .contact-call-btn,
    .contact-whatsapp-btn {
        justify-content: center;
    }

    .g-recaptcha {
        transform: scale(.88);
        transform-origin: left top;
    }

}

/* =========================================================
   CAREERS PAGE
========================================================= */


/* ---------------------------------------------------------
   CAREER HERO
--------------------------------------------------------- */

.career-page-hero {
    position: relative;
    padding: 110px 0 90px;
    background:
        linear-gradient(
            rgba(0, 109, 143, 0.90),
            rgba(23, 50, 77, 0.92)
        ),
        url("../images/hero/hero-bg.png")
        center center / cover no-repeat;
    overflow: hidden;
}

.career-page-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border: 55px solid rgba(255,255,255,.06);
    border-radius: 50%;
    right: -90px;
    top: -120px;
}

.career-page-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 35px solid rgba(0,195,137,.12);
    border-radius: 50%;
    left: -50px;
    bottom: -80px;
}

.career-page-hero .container {
    position: relative;
    z-index: 2;
}

.career-page-hero-content {
    max-width: 850px;
}

.career-page-hero-content > span {
    display: inline-block;
    margin-bottom: 15px;
    color: #7ee6c3;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.career-page-hero-content h1 {
    margin-bottom: 22px;
    color: #ffffff;
    font-size: 52px;
    line-height: 1.2;
    font-weight: 700;
}

.career-page-hero-content h1 strong {
    color: #7ee6c3;
    font-weight: 800;
}

.career-page-hero-content p {
    max-width: 760px;
    margin-bottom: 25px;
    color: rgba(255,255,255,.88);
    font-size: 17px;
    line-height: 1.8;
}

.career-page-hero .inner-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.career-page-hero .inner-page-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    transition: .3s;
}

.career-page-hero .inner-page-breadcrumb a:hover {
    color: #7ee6c3;
}

.career-page-hero .inner-page-breadcrumb i {
    font-size: 11px;
    opacity: .7;
}


/* ---------------------------------------------------------
   CAREER INTRO
--------------------------------------------------------- */

.career-intro-section {
    padding: 100px 0;
    background: #ffffff;
}

.career-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #006D8F;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.career-intro-content h2 {
    margin-bottom: 22px;
    color: #17324D;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
}

.career-intro-content h2 strong {
    color: #006D8F;
    font-weight: 800;
}

.career-intro-content > p {
    color: #5f7181;
    font-size: 16px;
    line-height: 1.85;
}

.career-intro-highlight {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 22px;
    border-left: 4px solid #00C389;
    background: #f4fbfd;
    border-radius: 10px;
}

.career-intro-highlight > i {
    margin-top: 3px;
    color: #00C389;
    font-size: 30px;
}

.career-intro-highlight strong {
    display: block;
    margin-bottom: 6px;
    color: #17324D;
    font-size: 17px;
}

.career-intro-highlight p {
    margin: 0;
    color: #607586;
    line-height: 1.7;
}


/* Intro cards */

.career-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.career-feature-box {
    height: 100%;
    padding: 28px 24px;
    background: #ffffff;
    border: 1px solid #e6edf1;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(23, 50, 77, .07);
    transition: .3s;
}

.career-feature-box:hover {
    transform: translateY(-6px);
    border-color: rgba(0,109,143,.25);
    box-shadow: 0 18px 42px rgba(23, 50, 77, .12);
}

.career-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #006D8F, #00A4D8);
    color: #ffffff;
    border-radius: 12px;
    font-size: 23px;
}

.career-feature-box h3 {
    margin-bottom: 10px;
    color: #17324D;
    font-size: 18px;
    font-weight: 700;
}

.career-feature-box p {
    margin: 0;
    color: #657887;
    font-size: 14px;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   CAREER AREAS
--------------------------------------------------------- */

.career-areas-section {
    padding: 100px 0;
    background: #f8fbfd;
}

.career-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 45px;
}

.career-area-card {
    position: relative;
    height: 100%;
    padding: 34px 28px;
    background: #ffffff;
    border: 1px solid #e7eef2;
    border-radius: 16px;
    overflow: hidden;
    transition: .3s;
}

.career-area-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(#006D8F, #00C389);
    opacity: 0;
    transition: .3s;
}

.career-area-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(23,50,77,.10);
}

.career-area-card:hover::before {
    opacity: 1;
}

.career-area-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 22px;
    background: #eaf7fb;
    color: #006D8F;
    border-radius: 16px;
    font-size: 28px;
    transition: .3s;
}

.career-area-card:hover .career-area-icon {
    background: #006D8F;
    color: #ffffff;
}

.career-area-card h3 {
    margin-bottom: 12px;
    color: #17324D;
    font-size: 20px;
    font-weight: 700;
}

.career-area-card p {
    margin: 0;
    color: #687b89;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   CURRENT OPENINGS
--------------------------------------------------------- */

.career-openings-section {
    padding: 100px 0;
    background: #ffffff;
}

.career-no-opening {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 950px;
    margin: 45px auto 0;
    padding: 38px 40px;
    background:
        linear-gradient(
            135deg,
            rgba(0,109,143,.06),
            rgba(0,195,137,.07)
        );
    border: 1px solid rgba(0,109,143,.13);
    border-radius: 18px;
}

.career-no-opening-icon {
    flex: 0 0 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95px;
    height: 95px;
    background: #006D8F;
    color: #ffffff;
    border-radius: 22px;
    font-size: 38px;
    box-shadow: 0 12px 28px rgba(0,109,143,.20);
}

.career-no-opening span {
    display: block;
    margin-bottom: 7px;
    color: #00A4D8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.career-no-opening h3 {
    margin-bottom: 12px;
    color: #17324D;
    font-size: 27px;
    font-weight: 700;
}

.career-no-opening p {
    margin-bottom: 9px;
    color: #637786;
    line-height: 1.75;
}

.career-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    padding: 12px 22px;
    background: #006D8F;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: .3s;
}

.career-apply-btn:hover {
    background: #005a75;
    color: #ffffff;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   APPLICATION PROCESS
--------------------------------------------------------- */

.career-process-section {
    padding: 100px 0;
    background: #f8fbfd;
}

.career-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 45px;
}

.career-process-card {
    position: relative;
    height: 100%;
    padding: 32px 24px;
    background: #ffffff;
    border-radius: 15px;
    border: 1px solid #e6edf1;
    box-shadow: 0 10px 30px rgba(23,50,77,.06);
    transition: .3s;
}

.career-process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(23,50,77,.11);
}

.career-process-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(0,109,143,.10);
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
}

.career-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    background: #006D8F;
    color: #ffffff;
    border-radius: 14px;
    font-size: 22px;
}

.career-process-card h3 {
    margin-bottom: 11px;
    color: #17324D;
    font-size: 18px;
    font-weight: 700;
}

.career-process-card p {
    margin: 0;
    color: #687b89;
    font-size: 14px;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   CAREER APPLICATION SECTION
--------------------------------------------------------- */

.career-application-section {
    padding: 105px 0;
    background: #ffffff;
}

.career-form-wrapper {
    padding: 38px;
    background: #ffffff;
    border: 1px solid #e5edf1;
    border-radius: 18px;
    box-shadow: 0 16px 45px rgba(23,50,77,.08);
}

.career-form-heading {
    margin-bottom: 28px;
}

.career-form-heading > span {
    display: inline-block;
    margin-bottom: 8px;
    color: #006D8F;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.career-form-heading h2 {
    margin-bottom: 12px;
    color: #17324D;
    font-size: 34px;
    font-weight: 700;
}

.career-form-heading h2 strong {
    color: #006D8F;
}

.career-form-heading p {
    margin: 0;
    color: #687b89;
    line-height: 1.75;
}


/* Re-use contact inputs but add career spacing */

#careerForm label {
    display: block;
    margin-bottom: 8px;
    color: #274052;
    font-size: 14px;
    font-weight: 600;
}

#careerForm .contact-form-control {
    width: 100%;
}

#careerForm textarea.contact-form-control {
    resize: vertical;
    min-height: 145px;
}

#careerFormMessage {
    margin-bottom: 18px;
}


/* ---------------------------------------------------------
   CAREER SIDE PANEL
--------------------------------------------------------- */

.career-side-wrapper {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.career-side-box {
    padding: 28px;
    background: #f8fbfd;
    border: 1px solid #e4edf2;
    border-radius: 15px;
}

.career-side-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-bottom: 18px;
    background: #006D8F;
    color: #ffffff;
    border-radius: 13px;
    font-size: 21px;
}

.career-side-box > span,
.career-news-box > span {
    display: block;
    margin-bottom: 7px;
    color: #00A4D8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.career-side-box h3,
.career-news-box h3 {
    margin-bottom: 10px;
    color: #17324D;
    font-size: 21px;
    font-weight: 700;
}

.career-side-box p,
.career-news-box p {
    color: #687b89;
    line-height: 1.75;
}

.career-side-box a {
    color: #006D8F;
    font-weight: 600;
    text-decoration: none;
}

.career-side-box a:hover {
    color: #00A4D8;
}


/* Important note */

.career-side-note {
    display: flex;
    gap: 15px;
    padding: 25px;
    background: #fff8e8;
    border: 1px solid #f1dfa8;
    border-radius: 15px;
}

.career-side-note > i {
    margin-top: 3px;
    color: #d89a00;
    font-size: 21px;
}

.career-side-note h4 {
    margin-bottom: 7px;
    color: #17324D;
    font-size: 17px;
    font-weight: 700;
}

.career-side-note p {
    margin: 0;
    color: #6e6b5f;
    font-size: 14px;
    line-height: 1.7;
}


/* News box */

.career-news-box {
    padding: 28px;
    background:
        linear-gradient(
            135deg,
            #006D8F,
            #17324D
        );
    border-radius: 15px;
}

.career-news-box > span {
    color: #7ee6c3;
}

.career-news-box h3 {
    color: #ffffff;
}

.career-news-box p {
    color: rgba(255,255,255,.82);
}

.career-news-box a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7ee6c3;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.career-news-box a:hover {
    color: #ffffff;
    gap: 12px;
}


/* ---------------------------------------------------------
   CAREER CTA
--------------------------------------------------------- */

.career-cta-section {
    padding: 75px 0;
    background:
        linear-gradient(
            120deg,
            #006D8F,
            #17324D
        );
}

.career-cta-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.career-cta-wrapper > div:first-child {
    max-width: 700px;
}

.career-cta-wrapper span {
    display: block;
    margin-bottom: 8px;
    color: #7ee6c3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.career-cta-wrapper h2 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
}

.career-cta-wrapper p {
    margin: 0;
    color: rgba(255,255,255,.83);
    line-height: 1.7;
}

.career-cta-buttons {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}

.career-cta-primary,
.career-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 21px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: .3s;
}

.career-cta-primary {
    background: #00C389;
    color: #ffffff;
}

.career-cta-primary:hover {
    background: #00a976;
    color: #ffffff;
    transform: translateY(-2px);
}

.career-cta-secondary {
    background: rgba(255,255,255,.08);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.30);
}

.career-cta-secondary:hover {
    background: #ffffff;
    color: #006D8F;
}


/* ---------------------------------------------------------
   CAREER FORM SUCCESS / ERROR
--------------------------------------------------------- */

.career-alert {
    padding: 15px 18px;
    margin-bottom: 20px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.65;
}

.career-alert-success {
    background: #e8f8f1;
    border: 1px solid rgba(0,195,137,.35);
    color: #14704b;
}

.career-alert-error {
    background: #fff1f1;
    border: 1px solid rgba(220,53,69,.30);
    color: #9a303a;
}

/* =========================================================
   NEWS PAGE
========================================================= */


/* ---------------------------------------------------------
   NEWS HERO
--------------------------------------------------------- */

.news-page-hero {
    position: relative;
    padding: 110px 0 90px;
    background:
        linear-gradient(
            rgba(0, 109, 143, 0.90),
            rgba(23, 50, 77, 0.92)
        ),
        url("../images/hero/hero-bg.png")
        center center / cover no-repeat;
    overflow: hidden;
}

.news-page-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border: 55px solid rgba(255,255,255,.06);
    border-radius: 50%;
    right: -90px;
    top: -120px;
}

.news-page-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 35px solid rgba(0,195,137,.12);
    border-radius: 50%;
    left: -50px;
    bottom: -80px;
}

.news-page-hero .container {
    position: relative;
    z-index: 2;
}

.news-page-hero-content {
    max-width: 850px;
}

.news-page-hero-content > span {
    display: inline-block;
    margin-bottom: 15px;
    color: #7ee6c3;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.news-page-hero-content h1 {
    margin-bottom: 22px;
    color: #ffffff;
    font-size: 52px;
    line-height: 1.2;
    font-weight: 700;
}

.news-page-hero-content h1 strong {
    color: #7ee6c3;
    font-weight: 800;
}

.news-page-hero-content p {
    max-width: 760px;
    margin-bottom: 25px;
    color: rgba(255,255,255,.88);
    font-size: 17px;
    line-height: 1.8;
}

.news-page-hero .inner-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.news-page-hero .inner-page-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    transition: .3s;
}

.news-page-hero .inner-page-breadcrumb a:hover {
    color: #7ee6c3;
}

.news-page-hero .inner-page-breadcrumb i {
    font-size: 11px;
    opacity: .7;
}


/* ---------------------------------------------------------
   NEWS INTRO
--------------------------------------------------------- */

.news-intro-section {
    padding: 95px 0;
    background: #ffffff;
}

.news-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #006D8F;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.news-intro-content h2 {
    margin-bottom: 20px;
    color: #17324D;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
}

.news-intro-content h2 strong {
    color: #006D8F;
    font-weight: 800;
}

.news-intro-content p {
    margin: 0;
    color: #627685;
    font-size: 16px;
    line-height: 1.85;
}

.news-intro-highlight {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(0,109,143,.06),
            rgba(0,195,137,.08)
        );
    border: 1px solid rgba(0,109,143,.12);
    border-radius: 16px;
}

.news-intro-icon {
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: #006D8F;
    color: #ffffff;
    border-radius: 16px;
    font-size: 28px;
}

.news-intro-highlight span {
    display: block;
    margin-bottom: 7px;
    color: #00A4D8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.news-intro-highlight h3 {
    margin-bottom: 8px;
    color: #17324D;
    font-size: 22px;
    font-weight: 700;
}

.news-intro-highlight p {
    margin: 0;
    color: #687b89;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   NEWS CATEGORIES
--------------------------------------------------------- */

.news-categories-section {
    padding: 100px 0;
    background: #f8fbfd;
}

.news-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 45px;
}

.news-category-card {
    position: relative;
    height: 100%;
    padding: 32px 28px;
    background: #ffffff;
    border: 1px solid #e7eef2;
    border-radius: 16px;
    text-align: center;
    overflow: hidden;
    transition: .3s;
}

.news-category-card::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #006D8F, #00C389);
    transform: translateX(-50%);
    transition: .3s;
}

.news-category-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(23,50,77,.10);
}

.news-category-card:hover::before {
    width: 100%;
}

.news-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    background: #eaf7fb;
    color: #006D8F;
    border-radius: 16px;
    font-size: 28px;
    transition: .3s;
}

.news-category-card:hover .news-category-icon {
    background: #006D8F;
    color: #ffffff;
}

.news-category-card h3 {
    margin-bottom: 10px;
    color: #17324D;
    font-size: 19px;
    font-weight: 700;
}

.news-category-card p {
    margin: 0;
    color: #687b89;
    font-size: 14px;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   FEATURED NEWS
--------------------------------------------------------- */

.featured-news-section {
    padding: 100px 0;
    background: #ffffff;
}

.featured-news-card {
    position: relative;
    max-width: 980px;
    margin: 45px auto 0;
    padding: 42px;
    background:
        linear-gradient(
            135deg,
            rgba(0,109,143,.06),
            rgba(0,195,137,.07)
        );
    border: 1px solid rgba(0,109,143,.14);
    border-radius: 20px;
    overflow: hidden;
}

.featured-news-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -55px;
    bottom: -80px;
    border-radius: 50%;
    background: rgba(0,164,216,.08);
}

.featured-news-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    margin-bottom: 18px;
    background: #00C389;
    color: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .7px;
}

.featured-news-content {
    position: relative;
    z-index: 2;
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 15px;
    color: #6b7f8d;
    font-size: 13px;
}

.news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.news-meta i {
    color: #006D8F;
}

.featured-news-content h2 {
    margin-bottom: 16px;
    color: #17324D;
    font-size: 31px;
    font-weight: 700;
}

.featured-news-content p {
    color: #617583;
    line-height: 1.8;
}

.news-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 13px 22px;
    background: #006D8F;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: .3s;
}

.news-primary-btn:hover {
    background: #005a75;
    color: #ffffff;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   LATEST POSTS
--------------------------------------------------------- */

.latest-news-section {
    padding: 100px 0;
    background: #f8fbfd;
}

.news-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 45px;
}

.news-post-card {
    height: 100%;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e6edf1;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(23,50,77,.05);
    transition: .3s;
}

.news-post-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 42px rgba(23,50,77,.10);
}

.news-post-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
}

.news-post-category {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #edf7fa;
    color: #006D8F;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.news-post-category.job {
    background: #e8f8f1;
    color: #00885f;
}

.news-post-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    background: #006D8F;
    color: #ffffff;
    border-radius: 13px;
    font-size: 20px;
}

.news-post-card h3 {
    margin-bottom: 13px;
    color: #17324D;
    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
}

.news-post-card p {
    color: #677b89;
    line-height: 1.75;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: #006D8F;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.news-read-more:hover {
    color: #00A4D8;
    gap: 12px;
}


/* ---------------------------------------------------------
   JOB OPPORTUNITY AREA
--------------------------------------------------------- */

.news-jobs-section {
    padding: 85px 0;
    background: #ffffff;
}

.news-jobs-wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 38px 40px;
    background:
        linear-gradient(
            135deg,
            #006D8F,
            #17324D
        );
    border-radius: 20px;
}

.news-jobs-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    background: rgba(255,255,255,.10);
    color: #7ee6c3;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    font-size: 34px;
}

.news-jobs-content span {
    display: block;
    margin-bottom: 7px;
    color: #7ee6c3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.news-jobs-content h2 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
}

.news-jobs-content p {
    margin: 0;
    color: rgba(255,255,255,.82);
    line-height: 1.75;
}

.news-jobs-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.news-job-primary,
.news-job-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 19px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.news-job-primary {
    background: #00C389;
    color: #ffffff;
}

.news-job-primary:hover {
    background: #00aa76;
    color: #ffffff;
    transform: translateY(-2px);
}

.news-job-secondary {
    background: rgba(255,255,255,.08);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.27);
}

.news-job-secondary:hover {
    background: #ffffff;
    color: #006D8F;
}


/* ---------------------------------------------------------
   CONTACT CTA
--------------------------------------------------------- */

.news-contact-cta {
    padding: 75px 0;
    background: #f8fbfd;
}

.news-contact-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 38px 40px;
    background: #ffffff;
    border: 1px solid #e5edf1;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(23,50,77,.06);
}

.news-contact-wrapper > div:first-child {
    max-width: 700px;
}

.news-contact-wrapper span {
    display: block;
    margin-bottom: 8px;
    color: #00A4D8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.news-contact-wrapper h2 {
    margin-bottom: 10px;
    color: #17324D;
    font-size: 31px;
    font-weight: 700;
}

.news-contact-wrapper p {
    margin: 0;
    color: #687b89;
    line-height: 1.75;
}

.news-contact-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.news-contact-primary,
.news-contact-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.news-contact-primary {
    background: #006D8F;
    color: #ffffff;
}

.news-contact-primary:hover {
    background: #005a75;
    color: #ffffff;
    transform: translateY(-2px);
}

.news-contact-secondary {
    background: #00C389;
    color: #ffffff;
}

.news-contact-secondary:hover {
    background: #00aa76;
    color: #ffffff;
    transform: translateY(-2px);
}
/* =========================================================
   ACTIVE LINE FOR PRODUCTS DROPDOWN
========================================================= */

.nav-link.dropdown-toggle.active {
    border-bottom: 3px solid var(--green);
}