:root{
    --navy:#082536;
    --navy-2:#0b3248;
    --blue:#178cc3;
    --blue-2:#0c78ae;
    --green:#27a85b;
    --ink:#14242d;
    --muted:#6b7b84;
    --line:#dfe7eb;
    --soft:#f3f7f8;
    --white:#fff;
    --max:1280px;
    --display:"Manrope",sans-serif;
    --body:"Inter",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(var(--max),calc(100% - 64px));margin:auto}
.section-pad{padding:130px 0}

/* TYPE */
h1,h2,h3,h4{font-family:var(--display);margin:0}
h2{font-size:clamp(42px,5vw,68px);line-height:1.04;letter-spacing:-2.4px}
.eyebrow{
    display:flex;align-items:center;gap:12px;margin-bottom:24px;
    text-transform:uppercase;font-size:11px;letter-spacing:2.2px;font-weight:700;color:var(--blue);
}
.eyebrow.light{color:#b9dbe9}
.eyebrow-line{display:inline-block;width:34px;height:1px;background:currentColor}
.lead{font-size:22px;line-height:1.55;color:#2d414b}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:17px 23px;font-size:12px;font-weight:700;letter-spacing:.3px;transition:.25s}
.btn span{font-size:17px}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#208d4c;transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--blue)}
.btn-outline-light{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--navy)}
.text-link{display:inline-flex;gap:9px;align-items:center;margin-top:18px;color:var(--blue);font-weight:700;font-size:13px}
.text-link:hover{color:var(--green)}

/* HERO */
.hero{height:900px;min-height:760px;position:relative;color:#fff;background:var(--navy);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-shade{
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(4,25,37,.95) 0%,rgba(4,25,37,.82) 36%,rgba(4,25,37,.36) 72%,rgba(4,25,37,.18) 100%);
}
.hero-grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:160px 160px;
    mask-image:linear-gradient(to right,#000,transparent 80%);
}
.hero-shell{width:min(var(--max),calc(100% - 64px));height:100%;margin:auto;position:relative;z-index:2;display:flex;align-items:center}
.hero-copy{padding-top:44px;max-width:860px}
.hero h1{font-size:clamp(58px,7vw,102px);line-height:.96;letter-spacing:-5px;font-weight:700}
.hero h1 span{color:#fff}
.hero-copy>p{max-width:680px;font-size:18px;line-height:1.72;color:rgba(255,255,255,.76);margin:34px 0 36px}
.hero-actions{display:flex;gap:12px}
.hero-side-card{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:300px;border-left:1px solid rgba(255,255,255,.28);padding:0 0 0 30px;
}
.side-card-number{font-family:var(--display);font-size:11px;color:#8eb9cb;margin-bottom:80px}
.side-label{display:block;text-transform:uppercase;font-size:10px;letter-spacing:1.8px;color:#8eb9cb;margin-bottom:9px}
.hero-side-card strong{font-family:var(--display);font-size:17px;line-height:1.5;font-weight:600}
.hero-bottom{position:absolute;bottom:0;left:0;right:0;z-index:3;border-top:1px solid rgba(255,255,255,.18)}
.hero-bottom-inner{width:min(var(--max),calc(100% - 64px));margin:auto;display:grid;grid-template-columns:repeat(4,1fr)}
.hero-stat{padding:25px 30px;border-right:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:13px}
.hero-stat:first-child{padding-left:0}
.stat-no{font-family:var(--display);font-size:26px;font-weight:700;color:#fff}
.stat-label{font-size:11px;line-height:1.4;color:rgba(255,255,255,.56);text-transform:uppercase;letter-spacing:.8px}

/* INTRO */
.intro{background:#fff}
.split-heading{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.intro-copy{padding-top:42px}
.intro-copy p{color:var(--muted);font-size:15px;line-height:1.9;margin:0 0 22px}
.intro-copy .lead{font-size:20px;line-height:1.65;color:#30454f}

/* CAPABILITIES */
.capabilities{background:var(--navy);color:#fff;padding:130px 0}
.section-head.row-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:60px}
.section-head.row-head h2{font-size:58px}
.section-head.row-head>p{max-width:330px;color:#96afbb;font-size:13px;margin:0 0 8px}
.capability-list{border-top:1px solid rgba(255,255,255,.15)}
.capability-row{
    min-height:148px;border-bottom:1px solid rgba(255,255,255,.15);
    display:grid;grid-template-columns:70px minmax(430px,1fr) 240px 54px;
    align-items:center;gap:24px;position:relative;transition:.3s ease;
}
.capability-row:hover{background:rgba(255,255,255,.035);padding-left:16px}
.cap-no{font-family:var(--display);font-size:11px;color:#6c929f}
.cap-title{display:grid;grid-template-columns:310px 1fr;align-items:center;gap:45px}
.cap-title h3{font-size:25px;letter-spacing:-.6px}
.cap-title p{margin:0;color:#8eabb7;font-size:13px;line-height:1.75;max-width:430px}
.cap-image{height:94px;overflow:hidden;opacity:.75}
.cap-image img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.capability-row:hover .cap-image img{transform:scale(1.07)}
.cap-arrow{font-size:22px;text-align:right;color:#6c929f}
.capability-row:hover .cap-arrow{color:var(--green)}

/* SYSTEMS */
.systems{background:var(--soft)}
.systems-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:center;margin-bottom:80px}
.systems-copy h2{font-size:58px;max-width:560px}
.systems-copy p{color:var(--muted);font-size:15px;line-height:1.85;max-width:520px;margin:28px 0 32px}
.systems-feature{position:relative}
.systems-feature-media{height:520px;overflow:hidden}
.systems-feature-media img{width:100%;height:100%;object-fit:cover}
.systems-feature:before{content:"";position:absolute;left:-20px;top:20px;width:5px;height:140px;background:var(--green);z-index:2}
.systems-feature-label{position:absolute;left:30px;right:30px;bottom:30px;background:#fff;padding:22px 24px;display:flex;justify-content:space-between;align-items:center}
.systems-feature-label span{text-transform:uppercase;letter-spacing:1.5px;font-size:9px;color:var(--muted)}
.systems-feature-label strong{font-family:var(--display);font-size:18px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #cfdadd;border-left:1px solid #cfdadd}
.product-grid a{
    min-height:150px;padding:25px;border-right:1px solid #cfdadd;border-bottom:1px solid #cfdadd;
    display:flex;flex-direction:column;justify-content:space-between;position:relative;background:rgba(255,255,255,.45);transition:.25s ease
}
.product-grid a:hover{background:#fff;transform:translateY(-3px);box-shadow:0 14px 40px rgba(8,37,54,.08)}
.product-grid span{font-size:10px;color:#8ba0aa}
.product-grid strong{font-family:var(--display);font-size:16px;line-height:1.35;max-width:190px}
.product-grid i{position:absolute;right:22px;bottom:20px;font-style:normal;color:var(--blue)}

/* WHY */
.why-cts{background:#fff}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.why-visual{height:700px;position:relative;background:var(--soft);overflow:hidden}
.why-visual>img{width:100%;height:100%;object-fit:cover}
.visual-chip{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;padding:24px 28px;min-width:270px}
.visual-chip span{display:block;font-size:9px;letter-spacing:2px;color:#8fb7c7;margin-bottom:6px}
.visual-chip strong{font-family:var(--display);font-size:17px}
.why-copy h2{font-size:58px}
.why-points{margin-top:50px;border-top:1px solid var(--line)}
.why-point{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:25px 0;border-bottom:1px solid var(--line)}
.why-point>span{font-family:var(--display);font-size:10px;color:var(--blue);padding-top:5px}
.why-point h4{font-size:17px;margin-bottom:7px}
.why-point p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}

/* PROJECTS */
.projects{background:#061e2c;padding:130px 0;color:#fff}
.projects-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:55px}
.projects-head h2{font-size:60px}
.project-mosaic{display:grid;grid-template-columns:1.35fr .65fr .65fr;grid-template-rows:310px 310px;gap:15px}
.project-card{position:relative;overflow:hidden;display:block}
.project-card-large{grid-row:1/3}
.project-card-wide{grid-column:2/4}
.project-card img{width:100%;height:100%;object-fit:cover;transition:.6s ease}
.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(2,15,22,.88),rgba(2,15,22,.06) 65%)}
.project-meta{position:absolute;left:25px;right:25px;bottom:24px}
.project-meta span{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#9bc4d4}
.project-meta h3{font-size:22px;line-height:1.25;margin-top:7px;max-width:420px}
.project-meta i{position:absolute;right:0;bottom:1px;font-style:normal;font-size:20px}
.project-card:hover img{transform:scale(1.045)}
.project-card:hover .project-meta i{color:var(--green)}

/* CLIENTS */
.clients{background:#fff}
.row-head.dark h2{color:var(--ink)}
.row-head.dark>p{color:var(--muted)}
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logo-grid>div{height:150px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:30px}
.logo-grid img{max-height:70px;max-width:75%;filter:grayscale(1);opacity:.55;transition:.25s}
.logo-grid>div:hover img{filter:none;opacity:1}

/* REGIONS */
.regions{background:var(--navy);color:#fff;padding:100px 0}
.region-intro{display:grid;grid-template-columns:1fr 2fr;align-items:end;margin-bottom:52px}
.region-intro .eyebrow{margin-bottom:8px}
.region-intro h2{font-size:50px;max-width:760px}
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.15);border-left:1px solid rgba(255,255,255,.15)}
.region-card{padding:34px;border-right:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);min-height:190px}
.region-card>span{font-size:10px;color:#6d97a8}
.region-card h3{font-size:24px;margin:50px 0 8px}
.region-card p{margin:0;color:#8da8b3;font-size:12px}

/* CTA */
.cta{height:550px;position:relative;color:#fff;display:flex;align-items:center;overflow:hidden}
.cta-media,.cta-overlay{position:absolute;inset:0}
.cta-media img{width:100%;height:100%;object-fit:cover}
.cta-overlay{background:linear-gradient(90deg,rgba(3,22,32,.94),rgba(3,22,32,.62),rgba(3,22,32,.25))}
.cta-inner{position:relative;z-index:2}
.cta-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9fc6d6}
.cta h2{font-size:60px;margin:17px 0}
.cta p{max-width:580px;color:rgba(255,255,255,.7);font-size:15px;margin-bottom:30px}

/* FOOTER */
.footer{background:#041722;color:#fff;padding:85px 0 25px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr .8fr 1.2fr;gap:70px;padding-bottom:65px}
.footer-brand img{width:190px;margin-bottom:25px}
.footer-brand p{max-width:320px;color:#FFFFFF;font-size:13px;line-height:1.8}
.profile-link{display:inline-flex;gap:8px;margin-top:15px;color:#fff;font-size:12px;font-weight:700}
.footer-title{display:block;text-transform:uppercase;letter-spacing:1.7px;font-size:9px;color:#668a99;margin-bottom:23px}
.footer-col a{display:block;color:#b4c5cc;font-size:12px;margin-bottom:13px}
.footer-col a:hover{color:var(--green)}
.footer-col p{color:#7894a0;font-size:12px;line-height:1.65}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;color:#5e7e8b;font-size:10px}
.footer-bottom a{color:#8fa7b0}
.wa{position:fixed;right:24px;bottom:24px;width:55px;height:55px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;z-index:999;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.wa img{width:31px}

/* RESPONSIVE */
@media(max-width:1180px){
    .hero-side-card{display:none}
    .capability-row{grid-template-columns:55px 1fr 180px 35px}
    .cap-title{grid-template-columns:260px 1fr;gap:28px}
    .product-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
    .container,.hero-shell,.hero-bottom-inner{width:calc(100% - 40px)}
    .hero{height:790px}
    .hero-copy{padding-top:70px}
    .hero h1{font-size:72px;letter-spacing:-4px}
    .hero-bottom-inner{grid-template-columns:repeat(2,1fr)}
    .hero-stat:nth-child(2){border-right:0}
    .split-heading,.systems-layout,.why-grid{grid-template-columns:1fr;gap:55px}
    .intro-copy{padding-top:0}
    .capability-row{grid-template-columns:48px 1fr 35px;padding:22px 0}
    .cap-image{display:none}
    .cap-title{grid-template-columns:1fr;gap:9px}
    .product-grid{grid-template-columns:repeat(2,1fr)}
    .why-visual{height:560px}
    .project-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:440px 280px 280px}
    .project-card-large{grid-column:1/3;grid-row:auto}
    .project-card-wide{grid-column:1/3}
    .logo-grid{grid-template-columns:repeat(2,1fr)}
    .region-intro{grid-template-columns:1fr;gap:22px}
    .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
    .container,.hero-shell,.hero-bottom-inner{width:calc(100% - 28px)}
    .section-pad,.capabilities,.projects{padding:90px 0}
    h2,.section-head.row-head h2,.systems-copy h2,.why-copy h2,.projects-head h2,.cta h2{font-size:40px;letter-spacing:-1.5px}
    .hero{height:760px;min-height:0}
    .hero-shade{background:rgba(4,25,37,.78)}
    .hero h1{font-size:50px;letter-spacing:-2.6px}
    .hero-copy>p{font-size:15px}
    .hero-actions{flex-direction:column;align-items:flex-start}
    .hero-bottom{display:none}
    .split-heading{gap:40px}
    .section-head.row-head,.projects-head{display:block}
    .section-head.row-head>p{margin-top:20px}
    .capability-row{grid-template-columns:35px 1fr 26px}
    .cap-title h3{font-size:20px}
    .cap-title p{font-size:12px}
    .systems-feature-media{height:380px}
    .systems-feature-label{left:16px;right:16px;bottom:16px;display:block}
    .systems-feature-label strong{display:block;margin-top:5px}
    .product-grid{grid-template-columns:1fr}
    .why-visual{height:430px}
    .project-mosaic{display:grid;grid-template-columns:1fr;grid-template-rows:none}
    .project-card,.project-card-large,.project-card-wide{grid-column:auto;grid-row:auto;height:330px}
    .projects-head .btn{margin-top:28px}
    .logo-grid{grid-template-columns:1fr 1fr}
    .logo-grid>div{height:110px;padding:18px}
    .region-grid{grid-template-columns:1fr}
    .region-card{min-height:155px}
    .region-card h3{margin-top:35px}
    .cta{height:500px}
    .footer-top{grid-template-columns:1fr;gap:42px}
    .footer-bottom{display:block;line-height:2}
}


/* =========================================================
   LIGHT MOTION SYSTEM
   ========================================================= */

/* Hero entrance */
.hero-copy .eyebrow{
    opacity:0;
    transform:translateY(16px);
    animation:ctsFadeUp .7s ease .15s forwards;
}

.hero-copy h1{
    opacity:0;
    transform:translateY(22px);
    animation:ctsFadeUp .85s cubic-bezier(.22,.61,.36,1) .28s forwards;
}

.hero-copy > p{
    opacity:0;
    transform:translateY(18px);
    animation:ctsFadeUp .75s ease .48s forwards;
}

.hero-actions{
    opacity:0;
    transform:translateY(14px);
    animation:ctsFadeUp .7s ease .65s forwards;
}

/* subtle background breathing */
.hero-media img{
    animation:ctsHeroZoom 14s ease-out forwards;
    will-change:transform;
}

/* subtle line movement */
.hero .eyebrow-line{
    transform-origin:left center;
    animation:ctsLineGrow .7s ease .1s both;
}

/* floating side card */
.hero-side-card{
    animation:ctsFloat 5s ease-in-out infinite;
}

/* scroll reveal */
.reveal{
    opacity:0;
    transform:translateY(34px);
    transition:
        opacity .75s cubic-bezier(.22,.61,.36,1),
        transform .75s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
}

.reveal.reveal-left{
    transform:translateX(-34px);
}

.reveal.reveal-right{
    transform:translateX(34px);
}

.reveal.is-visible{
    opacity:1;
    transform:none;
}

/* stagger helper */
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}

/* capability hover motion */
.capability-row .cap-arrow,
.project-card .project-meta i,
.product-grid a i{
    transition:transform .28s ease,color .28s ease;
}

.capability-row:hover .cap-arrow,
.project-card:hover .project-meta i,
.product-grid a:hover i{
    transform:translate(4px,-4px);
}

/* project image motion */
.project-card img{
    transition:transform .8s cubic-bezier(.22,.61,.36,1);
}

/* CTA image breathing */
.cta-media img{
    transition:transform 7s ease;
}

.cta:hover .cta-media img{
    transform:scale(1.035);
}

/* logo hover softness */
.logo-grid img{
    transform:scale(1.5);
}

.logo-grid > div:hover img{
    transform:scale(1.5);
}

/* button arrow */
.btn span,
.quote-btn span,
.text-link span,
.profile-link span{
    transition:transform .25s ease;
}

.btn:hover span,
.quote-btn:hover span,
.text-link:hover span,
.profile-link:hover span{
    transform:translate(3px,-3px);
}

/* whatsapp pulse */
.wa:before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:1px solid rgba(37,211,102,.42);
    animation:ctsPulse 2.2s ease-out infinite;
}

@keyframes ctsFadeUp{
    from{
        opacity:0;
        transform:translateY(22px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes ctsHeroZoom{
    from{transform:scale(1)}
    to{transform:scale(1.055)}
}

@keyframes ctsLineGrow{
    from{
        transform:scaleX(0);
        opacity:0;
    }
    to{
        transform:scaleX(1);
        opacity:1;
    }
}

@keyframes ctsFloat{
    0%,100%{transform:translateY(-50%) translateY(0)}
    50%{transform:translateY(-50%) translateY(-7px)}
}

@keyframes ctsPulse{
    0%{
        transform:scale(.92);
        opacity:.7;
    }
    75%,100%{
        transform:scale(1.18);
        opacity:0;
    }
}

/* Respect accessibility preference */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .reveal{
        opacity:1 !important;
        transform:none !important;
    }
}


/* Footer locations */
.footer-top{
    grid-template-columns:1.35fr 1fr .75fr 1.35fr;
}

.locations-col{
    min-width:0;
}

.footer-location{
    position:relative;
    padding:0 0 18px 16px;
    margin-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.09);
}

.footer-location:before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--green);
}

.location-country{
    display:block;
    font-family:var(--display);
    font-size:13px;
    font-weight:700;
    color:#fff;
    margin-bottom:6px;
    letter-spacing:.2px;
}

.footer-location p{
    margin:0;
    color:#7894a0;
    font-size:12px;
    line-height:1.7;
}

.footer-contact-details{
    padding-top:2px;
}

.footer-contact-details a{
    color:#d0dde2;
    font-weight:600;
    margin-bottom:8px;
}

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

@media(max-width:980px){
    .footer-top{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:680px){
    .footer-top{
        grid-template-columns:1fr;
    }

    .footer-location{
        max-width:320px;
    }
}


/* =========================================================
   FOOTER — REFINED CORPORATE LAYOUT
   ========================================================= */

.footer{
    position:relative;
    background:
        radial-gradient(circle at 85% 0%, rgba(23,140,195,.10), transparent 30%),
        linear-gradient(180deg,#041b28 0%,#031721 100%);
    color:#fff;
    padding:0;
    overflow:hidden;
}

.footer:before{
    content:"";
    position:absolute;
    left:-160px;
    bottom:-220px;
    width:520px;
    height:520px;
    border:1px solid rgba(255,255,255,.035);
    border-radius:50%;
    pointer-events:none;
}

.footer-accent{
    height:4px;
    background:linear-gradient(
        90deg,
        var(--green) 0 34%,
        var(--blue) 34% 68%,
        rgba(255,255,255,.12) 68% 100%
    );
}

.footer .container{
    position:relative;
    z-index:2;
}

/* Top area */
.footer-main{
    display:grid;
    grid-template-columns:1.15fr 1.35fr .9fr;
    gap:85px;
    padding:72px 0 58px;
    align-items:start;
}

.footer-brand img{
    width:205px;
    margin:0 0 24px;
}

.footer-brand p{
    max-width:350px;
    margin:0;
    color:#FFFFFF;
    font-size:13px;
    line-height:1.9;
}

.profile-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:24px;
    padding-bottom:5px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.24);
}

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

.footer-links-group{
    display:grid;
    grid-template-columns:1.35fr .8fr;
    gap:58px;
}

.footer-title{
    display:block;
    margin-bottom:21px;
    color:#668c9c;
    font-size:9px;
    line-height:1;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.footer-col a{
    position:relative;
    display:table;
    margin-bottom:13px;
    color:#b7c8cf;
    font-size:12px;
    line-height:1.5;
    transition:.25s ease;
}

.footer-col a:after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-3px;
    height:1px;
    background:var(--green);
    transition:.25s ease;
}

.footer-col a:hover{
    color:#fff;
    transform:translateX(4px);
}

.footer-col a:hover:after{
    right:0;
}

/* Contact */
.footer-contact{
    padding-left:34px;
    border-left:1px solid rgba(255,255,255,.10);
}

.footer-contact-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-family:var(--display);
    font-size:17px;
    font-weight:700;
    letter-spacing:-.3px;
}

.footer-contact-main span{
    color:var(--green);
    font-size:18px;
    transition:transform .25s ease;
}

.footer-contact-main:hover span{
    transform:translate(3px,-3px);
}

.footer-phone{
    display:block;
    width:max-content;
    margin-bottom:20px;
    color:#b9cbd2;
    font-family:var(--display);
    font-size:14px;
    font-weight:600;
}

.footer-contact p{
    max-width:315px;
    margin:0 0 21px;
    color:#FFFFFF;
    font-size:12px;
    line-height:1.8;
}

.footer-contact-btn{
    display:inline-flex;
    align-items:center;
    gap:18px;
    padding:12px 15px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.11);
    color:#fff;
    font-size:11px;
    font-weight:700;
    transition:.25s ease;
}

.footer-contact-btn:hover{
    background:var(--green);
    border-color:var(--green);
}


/* Offices */
.footer-offices{
    padding:34px 0 38px;
    border-top:1px solid rgba(255,255,255,.10);
}

.footer-offices-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:24px;
}

.footer-offices-head .footer-title{
    margin-bottom:9px;
}

.footer-offices-head h3{
    color:#fff;
    font-size:22px;
    font-weight:600;
    letter-spacing:-.5px;
}

.footer-offices-note{
    padding-bottom:3px;
    color:#617f8c;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.25px;
}

.footer-office-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.11);
    border-left:1px solid rgba(255,255,255,.11);
}

.footer-office{
    position:relative;
    min-height:180px;
    padding:25px 28px 27px;
    border-right:1px solid rgba(255,255,255,.11);
    border-bottom:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.018);
    overflow:hidden;
    transition:
        background .3s ease,
        transform .3s ease;
}

.footer-office:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:3px;
    background:var(--green);
    transition:width .35s ease;
}

.footer-office:hover{
    background:rgba(255,255,255,.045);
}

.footer-office:hover:after{
    width:100%;
}

.office-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
}

.office-code{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:24px;
    padding:0 8px;
    background:rgba(39,168,91,.11);
    border:1px solid rgba(39,168,91,.30);
    color:#69d694;
    font-family:var(--display);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.office-index{
    color:#365866;
    font-family:var(--display);
    font-size:10px;
}

.footer-office h4{
    margin:0 0 8px;
    color:#fff;
    font-size:17px;
    font-weight:650;
    letter-spacing:-.2px;
}

.footer-office p{
    margin:0;
    color:#7898a4;
    font-size:12px;
    line-height:1.7;
}


/* Bottom */
.footer-bottom {
    min-height: 68px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #547886;
    font-size: 10px;
}

.footer-bottom > span:last-child{
    text-align:center;
}

.footer-bottom a{
    color:#86a3ae;
    transition:.2s ease;
}

.footer-bottom a:hover{
    color:#fff;
}

.footer-bottom-links{
    display:flex;
    gap:23px;
}

.footer-bottom-links a{
    position:relative;
}

.footer-bottom-links a + a:before{
    content:"";
    position:absolute;
    left:-12px;
    top:50%;
    width:2px;
    height:2px;
    border-radius:50%;
    background:#4b707f;
}


/* Kill legacy footer rules from previous iteration */
.footer-top,
.locations-col,
.footer-location,
.footer-contact-details{
    all:unset;
}


/* Footer responsive */
@media(max-width:1050px){

    .footer-main{
        grid-template-columns:1fr 1.3fr;
        gap:55px;
    }

    .footer-contact{
        grid-column:1 / -1;
        padding:28px 0 0;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.10);
        display:grid;
        grid-template-columns:1.2fr .7fr 1fr auto;
        align-items:center;
        gap:22px;
    }

    .footer-contact .footer-title{
        display:none;
    }

    .footer-contact-main,
    .footer-phone,
    .footer-contact p{
        margin:0;
    }

}

@media(max-width:760px){

    .footer-main{
        grid-template-columns:1fr;
        gap:42px;
        padding:58px 0 44px;
    }

    .footer-links-group{
        gap:35px;
    }

    .footer-contact{
        grid-column:auto;
        display:block;
        padding:30px 0 0;
    }

    .footer-contact-main{
        max-width:360px;
    }

    .footer-phone{
        margin-bottom:18px;
    }

    .footer-contact p{
        margin-bottom:19px;
    }

    .footer-offices-head{
        display:block;
    }

    .footer-offices-note{
        display:block;
        margin-top:10px;
    }

    .footer-office-grid{
        grid-template-columns:1fr;
    }

    .footer-office{
        min-height:auto;
    }

    .footer-bottom{
        grid-template-columns:1fr;
        gap:12px;
    }

    .footer-bottom > span:last-child{
        text-align:center;
    }

}

@media(max-width:460px){

    .footer-links-group{
        grid-template-columns:1fr 1fr;
        gap:26px;
    }

    .footer-brand img{
        width:180px;
    }

    .footer-contact-main{
        font-size:15px;
    }

    .footer-bottom-links{
        flex-wrap:wrap;
        gap:15px 23px;
    }

}


/* =========================================================
   FOOTER OFFICE CARDS — CLICKABLE / CONTACT DETAILS
   ========================================================= */

.footer-office{
    min-height:290px;
    display:flex;
    flex-direction:column;
    position:relative;
    isolation:isolate;
}

/* full-card website link */
.office-card-link{
    position:absolute;
    inset:0;
    z-index:1;
}

/* keep phone / email clickable above card overlay */
.footer-office .office-contact,
.footer-office .office-contact a{
    position:relative;
    z-index:3;
}

/* all regular visual content stays above background */
.footer-office .office-top,
.footer-office h4,
.footer-office .office-address,
.footer-office .office-visit{
    position:relative;
    z-index:2;
}

.footer-office h4{
    margin-bottom:11px;
}

/* address now uses the full card width */
.footer-office .office-address{
    display:block;
    width:100%;
    max-width:none;
    min-height:32px;
    margin:0;
    padding:0;
    color:#87a4af;
    font-size:12px;
    line-height:1.75;
}

/* phone + email */
.office-contact{
    width:100%;
    margin-top:21px;
    padding-top:17px;
    border-top:1px solid rgba(255,255,255,.09);
}

.office-contact a{
    display:flex;
    align-items:center;
    gap:9px;
    width:max-content;
    max-width:100%;
    margin-bottom:9px;
    color:#b8cbd2;
    font-size:11px;
    line-height:1.5;
    transition:
        color .22s ease,
        transform .22s ease;
}

.office-contact a:hover{
    color:#fff;
    transform:translateX(3px);
}

.office-contact-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
    width:20px;
    height:20px;
    border:1px solid rgba(255,255,255,.13);
    color:#61ce8a;
    font-family:var(--display);
    font-size:8px;
    font-weight:800;
}

/* website cue at bottom */
.office-visit{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    margin-top:auto;
    padding-top:19px;
    color:#6d929f;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.3px;
    transition:color .25s ease;
}

.office-visit span{
    color:var(--green);
    font-size:15px;
    transition:transform .25s ease;
}

.footer-office:hover .office-visit{
    color:#fff;
}

.footer-office:hover .office-visit span{
    transform:translate(4px,-4px);
}

/* more obvious entire-card hover */
.footer-office:hover{
    background:
        linear-gradient(
            135deg,
            rgba(23,140,195,.07),
            rgba(39,168,91,.025)
        );
}

.footer-office:hover h4{
    color:#fff;
}

/* keyboard focus for the full card */
.office-card-link:focus-visible{
    outline:2px solid var(--green);
    outline-offset:-3px;
}

@media(max-width:760px){
    .footer-office{
        min-height:260px;
    }

    .footer-office .office-address{
        min-height:auto;
    }
}
.product-grid .product-view-all{
    background:var(--navy);
    color:#fff;
}

.product-grid .product-view-all span{
    color:#79a6b8;
}

.product-grid .product-view-all strong{
    color:#fff;
    font-size:18px;
}

.product-grid .product-view-all i{
    color:var(--green);
    font-size:20px;
}

.product-grid .product-view-all:hover{
    background:var(--blue);
}

.product-grid .product-view-all:hover span{
    color:rgba(255,255,255,.7);
}

.product-grid .product-view-all:hover i{
    color:#fff;
    transform:translateX(5px);
}


.logo-grid > a{
    height:150px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:#fff;
    transition:.25s ease;
}

.logo-grid > a img{
    max-height:100px;
    max-width:100%;
    filter:grayscale(1);
    opacity:.55;
    transition:.25s ease;
}

.logo-grid > a:hover{
    background:var(--soft);
}

.logo-grid > a:hover img{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.05);
}

.cta{
    position:relative;
    min-height:560px;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
}

.cta-media{
    position:absolute;
    inset:0;
}

.cta-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 8s ease;
}

.cta:hover .cta-media img{
    transform:scale(1.04);
}

.cta-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(4,25,37,.96) 0%,
            rgba(4,25,37,.88) 45%,
            rgba(4,25,37,.45) 100%
        );
}

.cta-inner{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 300px;
    align-items:center;
    gap:80px;

    padding-top:90px;
    padding-bottom:90px;
}

.cta-content{
    max-width:820px;
}

.cta-content h2{
    font-size:clamp(42px,5vw,68px);
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:25px;
}

.cta-content h2 span{
    color:#b8d5e1;
}

.cta-content p{
    max-width:650px;
    margin:0 0 32px;

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

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

.cta-actions{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
}

.cta-contact-link{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:#fff;

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

    padding-bottom:5px;

    border-bottom:1px solid rgba(255,255,255,.30);

    transition:.25s ease;
}

.cta-contact-link span{
    color:var(--green);
    font-size:17px;

    transition:transform .25s ease;
}

.cta-contact-link:hover{
    border-color:var(--green);
}

.cta-contact-link:hover span{
    transform:translateX(5px);
}


/* Side block */

.cta-side{
    position:relative;

    padding:35px 0 35px 35px;

    border-left:1px solid rgba(255,255,255,.25);
}

.cta-side-label{
    display:block;

    margin-bottom:55px;

    color:#8fb6c6;

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

    text-transform:uppercase;
    letter-spacing:2px;
}

.cta-side strong{
    display:block;

    font-family:var(--display);

    font-size:24px;
    line-height:1.45;

    font-weight:600;
}

.cta-side-arrow{
    position:absolute;

    right:0;
    bottom:35px;

    color:var(--green);

    font-size:22px;
}


/* Responsive */

@media(max-width:900px){

    .cta-inner{
        grid-template-columns:1fr;
        gap:45px;
    }

    .cta-side{
        max-width:420px;

        padding:25px 0 0;

        border-left:0;
        border-top:1px solid rgba(255,255,255,.22);
    }

    .cta-side-label{
        margin-bottom:20px;
    }

}


@media(max-width:600px){

    .cta{
        min-height:auto;
    }

    .cta-inner{
        padding-top:75px;
        padding-bottom:75px;
    }

    .cta-content h2{
        font-size:38px;
    }

    .cta-content h2 br{
        display:none;
    }

    .cta-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:20px;
    }

    .cta-side strong{
        font-size:21px;
    }

}

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

.capabilities{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(23,140,195,.12),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #061f2e 0%,
            var(--navy) 100%
        );

    color:#fff;
}


/* subtle grid */

.capabilities-bg{
    position:absolute;
    inset:0;

    opacity:.25;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:120px 120px;

    pointer-events:none;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 85%
        );
}


.capabilities .container{
    position:relative;
    z-index:2;
}


/* =====================================================
   HEADER
===================================================== */

.capabilities-head{
    display:grid !important;
    grid-template-columns:1.25fr .65fr;
    gap:100px;
    align-items:end;

    padding-bottom:60px;
    margin-bottom:0 !important;

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


.capabilities-heading h2{
    max-width:760px;

    font-size:clamp(42px,5vw,68px);
    line-height:1.03;
    letter-spacing:-2.5px;
}


.capabilities-heading h2 span{
    display:block;
    color:#8cb5c5;
}


.capabilities-intro{
    padding-bottom:5px;
}


.capabilities-count{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:20px;

    color:#789aa8;

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

    text-transform:uppercase;
    letter-spacing:1.7px;
}


.capabilities-count strong{
    color:var(--green);

    font-family:var(--display);
    font-size:22px;
    line-height:1;
}


.capabilities-intro p{
    max-width:350px;

    margin:0 0 22px;

    color:#91aab5;

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


.capabilities-view-all{
    display:inline-flex;
    align-items:center;
    gap:11px;

    padding-bottom:5px;

    color:#fff;

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

    border-bottom:1px solid rgba(255,255,255,.25);

    transition:.25s ease;
}


.capabilities-view-all span{
    color:var(--green);
    font-size:15px;

    transition:transform .25s ease;
}


.capabilities-view-all:hover{
    border-color:var(--green);
}


.capabilities-view-all:hover span{
    transform:translate(4px,-4px);
}


/* =====================================================
   LIST
===================================================== */

.capability-list{
    border-top:0;
}


/* =====================================================
   ROW
===================================================== */

.capability-row{
    position:relative;

    display:grid;
    grid-template-columns:
        55px
        minmax(500px,1fr)
        250px
        50px;

    align-items:center;
    gap:30px;

    min-height:165px;

    padding:22px 0;

    border-bottom:1px solid rgba(255,255,255,.14);

    transition:
        background .35s ease,
        padding .35s ease;
}


.capability-row:before{
    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:0;
    height:2px;

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

    transition:width .45s ease;
}


.capability-row:hover{
    padding-left:18px;
    padding-right:18px;

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


.capability-row:hover:before{
    width:100%;
}


/* =====================================================

   NUMBER
===================================================== */

.cap-no{
    align-self:start;

    padding-top:19px;

    color:#547b8b;

    font-family:var(--display);
    font-size:10px;
    font-weight:700;

    transition:.25s ease;
}


.capability-row:hover .cap-no{
    color:var(--green);
}


/* =====================================================
   TITLE / CONTENT
===================================================== */

.cap-title{
    display:grid;
    grid-template-columns:310px 1fr;
    gap:45px;

    align-items:center;
}


.cap-heading{
    position:relative;
}


.cap-category{
    display:block;

    margin-bottom:8px;

    color:#608797;

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

    text-transform:uppercase;
    letter-spacing:1.5px;

    transition:.25s ease;
}


.cap-title h3{
    margin:0;

    color:#fff;

    font-size:25px;
    line-height:1.25;
    letter-spacing:-.6px;

    transition:
        color .25s ease,
        transform .25s ease;
}


.cap-title p{
    max-width:430px;

    margin:0;

    color:#89a5b1;

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

    transition:color .25s ease;
}


.capability-row:hover .cap-category{
    color:#78d79b;
}


.capability-row:hover .cap-title h3{
    transform:translateX(5px);
}


.capability-row:hover .cap-title p{
    color:#a9bec7;
}


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

.cap-image{
    position:relative;

    height:108px;

    overflow:hidden;

    border-radius:2px;

    background:#0a2939;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.cap-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    opacity:.78;

    filter:saturate(.78);

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease,
        filter .35s ease;
}


.cap-image-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,30,43,.25),
            transparent
        );

    transition:.3s ease;
}


.capability-row:hover .cap-image{
    transform:translateY(-3px);

    box-shadow:
        0 14px 35px rgba(0,0,0,.22);
}


.capability-row:hover .cap-image img{
    transform:scale(1.07);

    opacity:1;
    filter:saturate(1);
}


.capability-row:hover .cap-image-overlay{
    opacity:.25;
}


/* =====================================================
   ARROW
===================================================== */

.cap-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    margin-left:auto;

    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;

    color:#7392a0;

    font-size:17px;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.capability-row:hover .cap-arrow{
    color:#fff;

    background:var(--green);
    border-color:var(--green);

    transform:
        translate(3px,-3px)
        rotate(5deg);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .capabilities-head{
        grid-template-columns:1fr .55fr;
        gap:60px;
    }


    .capability-row{
        grid-template-columns:
            45px
            1fr
            200px
            45px;
    }


    .cap-title{
        grid-template-columns:250px 1fr;
        gap:30px;
    }

}


@media(max-width:900px){

    .capabilities{
        padding:95px 0;
    }


    .capabilities-head{
        grid-template-columns:1fr;
        gap:32px;

        padding-bottom:45px;
    }


    .capabilities-intro p{
        max-width:520px;
    }


    .capability-row{
        grid-template-columns:
            40px
            1fr
            45px;

        min-height:150px;

        padding:25px 0;
    }


    .cap-image{
        display:none;
    }


    .cap-title{
        grid-template-columns:1fr;
        gap:10px;
    }


    .cap-title p{
        max-width:600px;
    }

}


@media(max-width:600px){

    .capabilities{
        padding:75px 0;
    }


    .capabilities-heading h2{
        font-size:38px;
        letter-spacing:-1.5px;
    }


    .capability-row{
        grid-template-columns:
            28px
            1fr
            35px;

        gap:12px;

        min-height:145px;
    }


    .capability-row:hover{
        padding-left:0;
        padding-right:0;
    }


    .cap-title h3{
        font-size:19px;
    }


    .cap-title p{
        font-size:11px;
        line-height:1.7;
    }


    .cap-arrow{
        width:34px;
        height:34px;

        font-size:14px;
    }


    .cap-category{
        font-size:7px;
    }

}


/* =========================================================
   HEADER / MENU
   ========================================================= */


/* =========================
   DESKTOP HEADER
========================= */

.site-header{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    z-index:1000;

    height:88px;

    background:rgba(5,28,40,.18);
    border-bottom:1px solid rgba(255,255,255,.15);

    transition:
        height .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.header-shell{
    width:min(1400px,calc(100% - 64px)) !important;
    height:100% !important;

    margin:0 auto !important;

    display:flex !important;
    align-items:center !important;

    gap:34px !important;
}


/* Logo */

.brand{
    width:180px !important;
    flex:0 0 180px !important;

    display:flex;
    align-items:center;
}

.brand img{
    width:100%;
    height:auto;
}


/* =========================
   DESKTOP NAV
========================= */

.desktop-nav{
    display:flex !important;
    align-items:center !important;

    height:100% !important;

    gap:50px !important;

    margin-left:auto !important;
}


.desktop-nav > a,
.nav-drop > a{
    position:relative;

    display:flex !important;
    align-items:center !important;

    height:100% !important;

    padding:0 !important;
    margin:0 !important;

    color:#fff;

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

    white-space:nowrap;

    transition:color .25s ease;
}


.desktop-nav > a:after,
.nav-drop > a:after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:3px;

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

    transition:width .28s ease;
}


.desktop-nav > a:hover:after,
.desktop-nav > a.active:after,
.nav-drop:hover > a:after{
    width:100%;
}


.nav-drop{
    position:relative;

    height:100%;

    display:flex;
    align-items:center;
}


.nav-chevron{
    margin-left:5px !important;

    font-size:12px !important;

    opacity:.65;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.nav-drop:hover .nav-chevron{
    transform:rotate(180deg);

    opacity:1;
}


/* =========================
   DESKTOP DROPDOWN
========================= */

.dropdown-panel{
    position:absolute !important;

    top:calc(100% - 1px) !important;
    left:-20px !important;

    width:305px !important;

    padding:9px !important;

    background:#fff !important;

    border:1px solid #e4ebee;
    border-top:3px solid var(--green);

    border-radius:0 0 4px 4px;

    box-shadow:
        0 25px 65px rgba(5,30,43,.18);

    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none;

    transform:translateY(10px) !important;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease !important;
}


.dropdown-panel.wide{
    width:330px !important;
}


.nav-drop:hover > .dropdown-panel,
.nav-drop:focus-within > .dropdown-panel{
    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto;

    transform:translateY(0) !important;
}


.dropdown-panel > a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;

    width:100%;

    min-height:42px;

    padding:10px 12px !important;
    margin:0 !important;

    border-bottom:1px solid #edf2f4;

    color:#52666f !important;

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

    line-height:1.4;

    border-radius:2px;

    transition:
        color .2s ease,
        background .2s ease,
        padding .2s ease;
}


.dropdown-panel > a:hover{
    padding-left:16px !important;

    color:var(--navy) !important;

    background:#f4f8f9 !important;
}


.dropdown-panel > a:last-child{
    border-bottom:0;
}


.dropdown-panel .dropdown-view-all{
    margin-top:8px !important;

    padding:11px 13px !important;

    background:var(--navy) !important;

    color:#fff !important;

    border:0;
}


.dropdown-panel .dropdown-view-all:hover{
    padding-left:16px !important;

    background:var(--blue) !important;

    color:#fff !important;
}


/* =========================
   HEADER ACTIONS
========================= */

.header-actions{
    height:100%;

    display:flex !important;
    align-items:center !important;

    gap:18px !important;

    margin:0 !important;

    flex:0 0 auto;
}


.contact-link{
    display:flex !important;
    align-items:center !important;

    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff;

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


.quote-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center;

    min-height:44px;

    padding:0 18px !important;
    margin:0 !important;

    gap:10px;

    background:var(--green);

    color:#fff;

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

    white-space:nowrap;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.quote-btn:hover{
    background:#208e4c;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(39,168,91,.22);
}


.quote-btn span{
    margin:0 !important;
}


/* =========================
   SCROLL HEADER
========================= */

.site-header.scrolled{
    height:76px !important;

    background:rgba(255,255,255,.97) !important;

    border-color:#e4ebee !important;

    box-shadow:
        0 8px 30px rgba(5,30,43,.07);

    backdrop-filter:blur(15px);
}


.site-header.scrolled .desktop-nav > a,
.site-header.scrolled .nav-drop > a,
.site-header.scrolled .contact-link{
    color:var(--ink) !important;
}


.site-header.scrolled .desktop-nav > a:hover,
.site-header.scrolled .nav-drop:hover > a,
.site-header.scrolled .contact-link:hover{
    color:var(--blue) !important;
}



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


/* Menu button */

.menu-btn{
    display:none !important;

    width:44px;
    height:44px;

    padding:0 !important;
    margin:0 !important;

    border:1px solid #dce5e8;

    background:#fff;

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

    gap:5px;

    cursor:pointer;
}


.menu-btn span{
    display:block !important;

    width:19px !important;
    height:2px !important;

    padding:0 !important;
    margin:0 !important;

    background:var(--navy) !important;

    transition:.25s ease;
}


.menu-btn span:nth-child(2){
    width:14px !important;

    margin-left:5px !important;
}



/* Backdrop */

.mobile-menu-backdrop{
    position:fixed !important;

    inset:0;

    z-index:1998;

    display:block !important;

    background:rgba(3,20,30,.65);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.mobile-menu-backdrop.open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}



/* Mobile panel */

.mobile-nav{
    position:fixed !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;

    z-index:1999 !important;

    width:min(390px,92vw) !important;
    height:100dvh !important;

    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;

    background:#fff !important;

    box-shadow:
        -20px 0 70px rgba(5,30,43,.20);

    opacity:1 !important;

    visibility:hidden !important;

    pointer-events:none;

    transform:translateX(105%) !important;

    transition:
        transform .38s cubic-bezier(.22,.61,.36,1),
        visibility .38s ease !important;
}


.mobile-nav.open{
    visibility:visible !important;

    pointer-events:auto;

    transform:translateX(0) !important;
}



/* Mobile menu header */

.mobile-nav-head{
    flex:0 0 76px;

    width:100%;

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

    padding:0 21px;

    background:#fff;

    border-bottom:1px solid #e6ecef;
}


.mobile-logo{
    width:150px;
}


.mobile-logo img{
    width:100%;
}


/* Close button */

.mobile-close{
    position:relative;

    width:40px;
    height:40px;

    padding:0;

    border:1px solid #dce5e8;

    background:#fff;

    cursor:pointer;
}


.mobile-close span{
    position:absolute;

    left:9px;
    top:18px;

    width:20px;
    height:2px;

    background:var(--navy);
}


.mobile-close span:first-child{
    transform:rotate(45deg);
}


.mobile-close span:last-child{
    transform:rotate(-45deg);
}



/* =========================
   MOBILE MENU LINKS
========================= */

.mobile-nav-body{
    flex:1;

    width:100%;

    padding:14px 21px 25px !important;

    overflow-y:auto;

    overscroll-behavior:contain;
}


.mobile-link,
.mobile-submenu-toggle{
    position:relative;

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

    width:100% !important;

    min-height:55px;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-bottom:1px solid #e8edef !important;

    background:transparent !important;

    color:var(--navy) !important;

    font-family:var(--display);
    font-size:15px !important;
    font-weight:600 !important;

    line-height:1.3;

    text-align:left;

    cursor:pointer;

    transition:
        color .2s ease,
        padding .2s ease;
}


.mobile-link.active{
    color:var(--blue) !important;
}


.mobile-link.active:before{
    content:"";

    position:absolute;

    left:-21px;
    top:50%;

    width:3px;
    height:21px;

    background:var(--green);

    transform:translateY(-50%);
}



/* =========================
   PLUS / MINUS
========================= */

.mobile-submenu-toggle i{
    position:relative;

    display:block;

    width:28px;
    height:28px;

    flex:0 0 28px;

    border:1px solid #dce5e8;

    border-radius:50%;

    transition:
        border-color .2s ease,
        background .2s ease;
	left: 7px;
}


.mobile-submenu-toggle i:before,
.mobile-submenu-toggle i:after{
    content:"";

    position:absolute;

    left:8px;
    top:13px;

    width:10px;
    height:1px;

    background:var(--navy);

    transition:transform .25s ease;
}


.mobile-submenu-toggle i:after{
    transform:rotate(90deg);
}


.mobile-menu-item.open .mobile-submenu-toggle{
    color:var(--blue) !important;
}


.mobile-menu-item.open .mobile-submenu-toggle i{
    border-color:rgba(23,140,195,.25);

    background:rgba(23,140,195,.06);
}


.mobile-menu-item.open .mobile-submenu-toggle i:after{
    transform:rotate(0);
}



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

.mobile-submenu{
    display:block !important;

    max-height:0;

    padding:0 0 0 14px !important;

    margin:0;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transition:
        max-height .4s ease,
        opacity .3s ease,
        padding .3s ease,
        visibility .3s ease;
}


.mobile-menu-item.open .mobile-submenu{
    max-height:650px;

    padding-top:7px !important;
    padding-bottom:12px !important;

    opacity:1;

    visibility:visible;
}


.mobile-submenu > a{
    position:relative;

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

    width:100%;

    min-height:40px;

    padding:8px 7px 8px 17px !important;
    margin:0 !important;

    border-bottom:1px solid #eef2f3 !important;

    color:#647982 !important;

    background:transparent !important;

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

    line-height:1.4;
}


.mobile-submenu > a:before{
    content:"";

    position:absolute;

    left:2px;
    top:50%;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#cbd7dc;

    transform:translateY(-50%);

    transition:background .2s ease;
}


.mobile-submenu > a:hover{
    color:var(--blue) !important;
}


.mobile-submenu > a:hover:before{
    background:var(--green);
}



/* View all */

.mobile-submenu .mobile-view-all{
    margin-top:8px !important;

    min-height:42px;

    padding:10px 13px !important;

    background:var(--navy) !important;

    color:#fff !important;

    border:0 !important;
}


.mobile-submenu .mobile-view-all:before{
    display:none;
}


.mobile-submenu .mobile-view-all:hover{
    background:var(--blue) !important;

    color:#fff !important;
}


.mobile-view-all span{
    color:var(--green);
}



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

.mobile-nav-footer{
    flex:0 0 auto;

    width:100%;

    padding:18px 21px 21px !important;

    background:var(--navy) !important;
}


.mobile-nav-footer > span{
    display:block;

    margin-bottom:8px;

    color:#789aa8;

    font-size:8px;

    text-transform:uppercase;
    letter-spacing:1.5px;
}


.mobile-nav-footer > a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;

    padding:0 !important;

    color:#fff !important;

    font-family:var(--display);

    font-size:17px !important;
    font-weight:600 !important;

    border:0 !important;
}


.mobile-nav-footer > a span{
    color:var(--green);
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1180px){

    .header-shell{
        gap:25px !important;
    }

    .desktop-nav{
        gap:18px !important;
    }

    .desktop-nav > a,
    .nav-drop > a{
        font-size:11px;
    }

    .contact-link{
        display:none !important;
    }

}


@media(max-width:980px){

    .site-header,
    .site-header.scrolled{
        height:76px !important;

        background:#fff !important;

        border-color:#e3eaed !important;

        box-shadow:
            0 5px 24px rgba(8,37,54,.07);

        backdrop-filter:none;
    }


    .header-shell{
        width:calc(100% - 30px) !important;

        gap:15px !important;
    }


    .brand{
        width:155px !important;
        flex:0 0 155px !important;
    }


    .desktop-nav,
    .quote-btn,
    .contact-link{
        display:none !important;
    }


    .header-actions{
        height:auto;

        margin-left:auto !important;
    }


    .menu-btn{
        display:flex !important;
    }

}


@media(max-width:480px){

    .site-header,
    .site-header.scrolled{
        height:70px !important;
    }


    .header-shell{
        width:calc(100% - 22px) !important;
    }


    .brand{
        width:140px !important;
        flex:0 0 140px !important;
    }


    .menu-btn{
        width:40px;
        height:40px;
    }


    .mobile-nav{
        width:94vw !important;
    }


    .mobile-nav-head{
        flex-basis:70px;

        padding:
            0
            18px;
    }


    .mobile-logo{
        width:140px;
    }


    .mobile-nav-body{
        padding:
            11px
            18px
            22px !important;
    }


    .mobile-link,
    .mobile-submenu-toggle{
        min-height:52px;

        font-size:14px !important;
    }


    .mobile-link.active:before{
        left:-18px;
    }


    .mobile-nav-footer{
        padding:
            17px
            18px
            19px !important;
    }

}

@media(max-width:980px){

    .mobile-nav{
        width:min(420px,100vw) !important;
        background:#fff !important;
    }

    .mobile-nav-head{
        height:74px;
        flex:0 0 74px;

        padding:0 20px;

        background:#fff;

        border-bottom:1px solid #e7edef;
    }

    .mobile-logo{
        width:148px;
    }

    .mobile-close{
        width:40px;
        height:40px;

        border:1px solid #dce5e8;
        border-radius:3px;

        background:#fff;
    }


    .mobile-nav-body{
        padding:10px 20px 24px !important;
    }

    .mobile-link{
        min-height:55px;

        display:flex !important;
        align-items:center;

        padding:0 !important;

        border-bottom:1px solid #e8edef !important;

        color:var(--navy) !important;

        font-family:var(--display);
        font-size:15px !important;
        font-weight:600 !important;
    }

    .mobile-link.active{
        color:var(--blue) !important;
    }


    .mobile-menu-row{
        min-height:55px;

        display:grid;

        grid-template-columns:1fr 42px;

        align-items:center;

        border-bottom:1px solid #e8edef;
    }


    .mobile-parent-link{
        height:55px;

        display:flex;
        align-items:center;

        color:var(--navy);

        font-family:var(--display);
        font-size:15px;
        font-weight:600;

        transition:color .2s ease;
    }

    .mobile-parent-link:hover{
        color:var(--blue);
    }


    .mobile-submenu-toggle{
        width:34px !important;
        height:34px !important;

        min-height:0 !important;

        justify-self:end;

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

        padding:0 !important;

        border:1px solid #dce6e9 !important;
        border-radius:50%;

        background:#fff !important;

        cursor:pointer;
    }


    .mobile-submenu-toggle i{
        position:relative;

        width:14px;
        height:14px;

        border:0 !important;
        border-radius:0 !important;

        background:transparent !important;
    }


    .mobile-submenu-toggle i:before,
    .mobile-submenu-toggle i:after{
        content:"";

        position:absolute;

        top:6px;
        left:1px;

        width:12px;
        height:1.5px;

        background:var(--navy);

        transition:transform .25s ease;
    }


    .mobile-submenu-toggle i:after{
        transform:rotate(90deg);
    }


    .mobile-menu-item.open .mobile-submenu-toggle{
        background:var(--navy) !important;
        border-color:var(--navy) !important;
    }


    .mobile-menu-item.open .mobile-submenu-toggle i:before,
    .mobile-menu-item.open .mobile-submenu-toggle i:after{
        background:#fff;
    }


    .mobile-menu-item.open .mobile-submenu-toggle i:after{
        transform:rotate(0);
    }


    .mobile-menu-item.open .mobile-parent-link{
        color:var(--blue);
    }


    .mobile-submenu{
        max-height:0;

        overflow:hidden;

        opacity:0;

        margin:0;

        padding:0 0 0 14px !important;

        background:#f7fafb;

        transition:
            max-height .4s ease,
            opacity .3s ease,
            padding .3s ease;
    }


    .mobile-menu-item.open .mobile-submenu{
        max-height:650px;

        opacity:1;

        padding-top:7px !important;
        padding-bottom:10px !important;
    }


    .mobile-submenu > a{
        position:relative;

        min-height:40px;

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

        padding:8px 12px 8px 18px !important;

        border-bottom:1px solid #e9eff1 !important;

        color:#647982 !important;

        font-size:11px !important;
        font-weight:600 !important;
    }


    .mobile-submenu > a:before{
        content:"";

        position:absolute;

        left:3px;
        top:50%;

        width:4px;
        height:4px;

        border-radius:50%;

        background:#b6c6cc;

        transform:translateY(-50%);
    }


    .mobile-submenu > a span{
        color:var(--green);

        font-size:13px;
    }


    .mobile-submenu > a:hover{
        color:var(--blue) !important;
    }


    .mobile-submenu > a:hover:before{
        background:var(--green);
    }


    .mobile-submenu .mobile-view-all{
        min-height:43px;

        margin-top:8px !important;

        padding:9px 13px !important;

        background:var(--navy) !important;

        color:#fff !important;

        border:0 !important;
    }


    .mobile-submenu .mobile-view-all:before{
        display:none;
    }


    .mobile-submenu .mobile-view-all:hover{
        background:var(--blue) !important;

        color:#fff !important;
    }



    .mobile-nav-footer{
        padding:17px 20px 20px !important;
    }

}


@media(max-width:600px){


    .mobile-nav{
        width:100vw !important;
        max-width:none !important;
    }

    .mobile-nav-head{
        padding-left:18px;
        padding-right:18px;
    }

    .mobile-nav-body{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .mobile-nav-footer{
        padding-left:18px !important;
        padding-right:18px !important;
    }

}






/* =========================================================
   HERO ENTRANCE
========================================================= */

body.motion-ready .site-header{
    animation:ctsHeaderIn .7s cubic-bezier(.22,.61,.36,1) both;
}


body.motion-ready .hero-copy .eyebrow{
    opacity:0;
    transform:translateY(18px);

    animation:
        ctsHeroUp .7s cubic-bezier(.22,.61,.36,1)
        .12s forwards;
}


body.motion-ready .hero-copy h1{
    opacity:0;
    transform:translateY(32px);

    animation:
        ctsHeroUp .9s cubic-bezier(.22,.61,.36,1)
        .25s forwards;
}


body.motion-ready .hero-copy > p{
    opacity:0;
    transform:translateY(24px);

    animation:
        ctsHeroUp .8s cubic-bezier(.22,.61,.36,1)
        .48s forwards;
}


body.motion-ready .hero-actions{
    opacity:0;
    transform:translateY(20px);

    animation:
        ctsHeroUp .75s cubic-bezier(.22,.61,.36,1)
        .68s forwards;
}


body.motion-ready .hero-side-card{
    opacity:0;
    transform:
        translateY(-50%)
        translateX(28px);

    animation:
        ctsHeroSide .9s cubic-bezier(.22,.61,.36,1)
        .7s forwards;
}


/* Hero stats */

body.motion-ready .hero-stat{
    opacity:0;
    transform:translateY(18px);

    animation:
        ctsHeroUp .6s ease forwards;
}


body.motion-ready .hero-stat:nth-child(1){
    animation-delay:.80s;
}

body.motion-ready .hero-stat:nth-child(2){
    animation-delay:.90s;
}

body.motion-ready .hero-stat:nth-child(3){
    animation-delay:1s;
}

body.motion-ready .hero-stat:nth-child(4){
    animation-delay:1.10s;
}


/* Hero image slow zoom */

.hero-media{
    overflow:hidden;
}


.hero-media img{
    transform:scale(1.035);

    animation:
        ctsHeroImage 14s ease-out forwards;

    will-change:transform;
}



/* =========================================================
   SCROLL REVEAL
========================================================= */

.cts-reveal{
    opacity:0;

    transform:translateY(42px);

    transition:
        opacity .8s cubic-bezier(.22,.61,.36,1),
        transform .8s cubic-bezier(.22,.61,.36,1);

    transition-delay:var(--motion-delay,0s);

    will-change:
        opacity,
        transform;
}


.cts-reveal.cts-left{
    transform:translateX(-45px);
}


.cts-reveal.cts-right{
    transform:translateX(45px);
}


.cts-reveal.cts-scale{
    transform:
        translateY(25px)
        scale(.965);
}


.cts-reveal.cts-visible{
    opacity:1;

    transform:
        translate3d(0,0,0)
        scale(1);
}



/* =========================================================
   SECTION EYEBROW
========================================================= */

.cts-visible .eyebrow-line,
.eyebrow.cts-visible .eyebrow-line{
    animation:
        ctsLineIn .7s ease both;
}



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

.intro .split-heading{
    position:relative;
}


.intro .split-heading:before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:1px;
    height:0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--line),
            transparent
        );

    transition:
        height 1.2s ease .3s;
}


.intro.motion-active .split-heading:before{
    height:100%;
}



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

.capability-row{
    overflow:hidden;
}


.capability-row:after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            transparent
        );

    transform:translateX(-120%);

    pointer-events:none;
}


.capability-row:hover:after{
    animation:ctsRowSweep .85s ease;
}


.capability-row .cap-image{
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.capability-row:hover .cap-image{
    transform:translateY(-4px);

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


.capability-row .cap-image img{
    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .4s ease,
        opacity .4s ease;
}


.capability-row:hover .cap-image img{
    transform:scale(1.08);
}


.capability-row .cap-arrow{
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}



/* =========================================================
   SYSTEMS / PRODUCTS
========================================================= */

.systems-feature{
    overflow:hidden;
}


.systems-feature-media img{
    transition:
        transform 1s cubic-bezier(.22,.61,.36,1);
}


.systems-feature:hover .systems-feature-media img{
    transform:scale(1.045);
}


.product-grid > a{
    overflow:hidden;
}


.product-grid > a:after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:3px;

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

    transition:width .4s ease;
}


.product-grid > a:hover:after{
    width:100%;
}


.product-grid > a i{
    transition:
        transform .3s ease,
        color .3s ease;
}


.product-grid > a:hover i{
    transform:translate(5px,-5px);
}



/* =========================================================
   WHY CTS
========================================================= */

.why-visual{
    overflow:hidden;
}


.why-visual > img{
    transition:
        transform 1.2s cubic-bezier(.22,.61,.36,1);
}


.why-visual:hover > img{
    transform:scale(1.035);
}


.visual-chip{
    transition:
        transform .35s ease,
        background .35s ease;
}


.why-visual:hover .visual-chip{
    transform:translateY(-7px);

    background:var(--blue);
}


.why-point{
    position:relative;

    transition:
        padding-left .3s ease,
        background .3s ease;
}


.why-point:before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:2px;

    background:var(--green);

    transform:scaleY(0);

    transform-origin:center;

    transition:
        transform .3s ease;
}


.why-point:hover{
    padding-left:15px;

    background:
        linear-gradient(
            90deg,
            rgba(39,168,91,.045),
            transparent
        );
}


.why-point:hover:before{
    transform:scaleY(1);
}



/* =========================================================
   PROJECTS
========================================================= */

.project-card{
    transform-origin:center;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


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

    box-shadow:
        0 22px 55px rgba(0,0,0,.22);
}


.project-card img{
    transition:
        transform 1s cubic-bezier(.22,.61,.36,1);
}


.project-card:hover img{
    transform:scale(1.07);
}


.project-overlay{
    transition:
        background .4s ease;
}


.project-card:hover .project-overlay{
    background:
        linear-gradient(
            to top,
            rgba(2,15,22,.94),
            rgba(2,15,22,.02) 75%
        );
}


.project-meta{
    transition:
        transform .4s cubic-bezier(.22,.61,.36,1);
}


.project-card:hover .project-meta{
    transform:translateY(-7px);
}


.project-meta i{
    transition:
        transform .3s ease,
        color .3s ease;
}


.project-card:hover .project-meta i{
    color:var(--green);

    transform:translate(5px,-5px);
}



/* =========================================================
   CLIENT LOGOS
========================================================= */

.logo-grid > a{
    position:relative;

    overflow:hidden;
}


.logo-grid > a:before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(23,140,195,.05)
        );

    opacity:0;

    transition:opacity .3s ease;
}


.logo-grid > a:hover:before{
    opacity:1;
}


.logo-grid > a img{
    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease,
        filter .35s ease;
}


.logo-grid > a:hover img{
    transform:scale(1.07);
}



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

.cta{
    overflow:hidden;
}


.cta-media img{
    transition:
        transform 8s ease;
}


.cta:hover .cta-media img{
    transform:scale(1.055);
}


.cta-side{
    transition:
        transform .4s ease,
        border-color .4s ease;
}


.cta:hover .cta-side{
    transform:translateX(-8px);

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


.cta-side-arrow{
    animation:
        ctsArrowFloat 2.2s ease-in-out infinite;
}



/* =========================================================
   BUTTONS
========================================================= */

.btn,
.quote-btn,
.footer-contact-btn{
    position:relative;

    overflow:hidden;
}


.btn:before,
.quote-btn:before,
.footer-contact-btn:before{
    content:"";

    position:absolute;

    top:-50%;
    left:-75%;

    width:35%;
    height:200%;

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

    transform:
        rotate(20deg)
        translateX(-100%);

    transition:
        transform .65s ease;

    pointer-events:none;
}


.btn:hover:before,
.quote-btn:hover:before,
.footer-contact-btn:hover:before{
    transform:
        rotate(20deg)
        translateX(500%);
}


.btn span,
.quote-btn span,
.text-link span,
.profile-link span{
    transition:
        transform .25s ease;
}


.btn:hover span,
.quote-btn:hover span,
.text-link:hover span,
.profile-link:hover span{
    transform:translate(4px,-3px);
}



/* =========================================================
   WHATSAPP
========================================================= */

.wa{
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.wa:hover{
    transform:
        translateY(-4px)
        scale(1.04);

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


.wa:before{
    content:"";

    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:
        1px solid
        rgba(37,211,102,.42);

    animation:
        ctsWhatsappPulse 2.4s ease-out infinite;
}



/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes ctsHeaderIn{

    from{
        opacity:0;

        transform:translateY(-18px);
    }

    to{
        opacity:1;

        transform:none;
    }

}


@keyframes ctsHeroUp{

    from{
        opacity:0;

        transform:translateY(30px);
    }

    to{
        opacity:1;

        transform:none;
    }

}


@keyframes ctsHeroSide{

    from{
        opacity:0;

        transform:
            translateY(-50%)
            translateX(28px);
    }

    to{
        opacity:1;

        transform:
            translateY(-50%)
            translateX(0);
    }

}


@keyframes ctsHeroImage{

    from{
        transform:scale(1.035);
    }

    to{
        transform:scale(1.085);
    }

}


@keyframes ctsLineIn{

    from{
        width:0;

        opacity:0;
    }

    to{
        opacity:1;
    }

}


@keyframes ctsRowSweep{

    0%{
        transform:translateX(-120%);
    }

    100%{
        transform:translateX(120%);
    }

}


@keyframes ctsArrowFloat{

    0%,
    100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(4px,-4px);
    }

}


@keyframes ctsWhatsappPulse{

    0%{
        opacity:.65;

        transform:scale(.9);
    }

    75%,
    100%{
        opacity:0;

        transform:scale(1.22);
    }

}



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

@media(max-width:980px){

    .intro .split-heading:before{
        display:none;
    }


    .cts-reveal.cts-left,
    .cts-reveal.cts-right{
        transform:translateY(30px);
    }


    .cts-reveal.cts-visible{
        transform:none;
    }


    .project-card:hover,
    .why-visual:hover .visual-chip,
    .cta:hover .cta-side{
        transform:none;
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;
    }


    .cts-reveal{
        opacity:1 !important;

        transform:none !important;
    }

}



/* =========================================================
   HERO STATS
   ========================================================= */

.hero-bottom{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:4;

    border-top:1px solid rgba(255,255,255,.16);

    background:
        linear-gradient(
            180deg,
            rgba(5,28,40,.18),
            rgba(5,28,40,.55)
        );

    backdrop-filter:blur(8px);
}


.hero-bottom-inner{
    width:min(var(--max),calc(100% - 64px));

    margin:auto;

    display:grid;

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


/* card */

.hero-stat{
    position:relative;

    min-height:112px;

    display:grid;
    grid-template-columns:auto 1fr;

    align-items:center;

    gap:22px;

    padding:22px 30px;

    border-right:1px solid rgba(255,255,255,.14);

    overflow:hidden;

    transition:
        background .3s ease,
        transform .3s ease;
}


.hero-stat:first-child{
    padding-left:0;
}


.hero-stat:last-child{
    border-right:0;
}


/* subtle hover background */

.hero-stat:before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(39,168,91,.11),
            rgba(23,140,195,.05)
        );

    opacity:0;

    transition:opacity .3s ease;
}


.hero-stat:hover:before{
    opacity:1;
}


/* bottom accent */

.hero-stat:after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:3px;

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

    transition:width .4s ease;
}


.hero-stat:hover:after{
    width:100%;
}


/* number */

.hero-stat-top{
    position:relative;

    z-index:2;

    display:flex;
    align-items:center;

    gap:14px;
}


.stat-no{
    display:block;

    color:#fff;

    font-family:var(--display);

    font-size:31px;
    line-height:1;

    font-weight:700;

    letter-spacing:-1px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.hero-stat:hover .stat-no{
    color:#fff;

    transform:translateY(-3px);
}


/* small line */

.stat-line{
    display:block;

    width:22px;
    height:1px;

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

    transition:
        width .3s ease,
        background .3s ease;
}


.hero-stat:hover .stat-line{
    width:31px;

    background:var(--green);
}


/* text */

.stat-content{
    position:relative;

    z-index:2;

    display:flex;
    flex-direction:column;

    gap:5px;
}


.stat-kicker{
    color:#6f96a5;

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

    text-transform:uppercase;

    letter-spacing:1.6px;

    transition:color .3s ease;
}


.stat-label{
    max-width:150px;

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

    font-size:10px;
    line-height:1.45;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.65px;

    transition:color .3s ease;
}


.hero-stat:hover .stat-kicker{
    color:#75d89b;
}


.hero-stat:hover .stat-label{
    color:#fff;
}


/* subtle separator glow */

.hero-stat:not(:last-child) .stat-content:after{
    content:"";

    position:absolute;

    right:-30px;
    top:50%;

    width:1px;
    height:0;

    background:
        linear-gradient(
            transparent,
            rgba(39,168,91,.5),
            transparent
        );

    transform:translateY(-50%);

    transition:height .4s ease;
}


.hero-stat:hover .stat-content:after{
    height:55px;
}


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

@media(max-width:980px){

    .hero-bottom-inner{
        width:calc(100% - 40px);

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


    .hero-stat{
        min-height:100px;

        padding:20px 24px;

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


    .hero-stat:nth-child(2){
        border-right:0;
    }


    .hero-stat:nth-child(3),
    .hero-stat:nth-child(4){
        border-bottom:0;
    }


    .hero-stat:nth-child(3){
        padding-left:0;
    }

}


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

@media(max-width:680px){

    .hero-bottom{
        position:relative;

        background:var(--navy);

        backdrop-filter:none;
    }


    .hero-bottom-inner{
        width:100%;

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


    .hero-stat{
        min-height:105px;

        display:block;

        padding:20px !important;
    }


    .hero-stat:nth-child(odd){
        border-right:1px solid rgba(255,255,255,.12);
    }


    .hero-stat:nth-child(even){
        border-right:0;
    }


    .hero-stat-top{
        margin-bottom:12px;
    }


    .stat-no{
        font-size:26px;
    }


    .stat-line{
        width:18px;
    }


    .stat-label{
        max-width:130px;

        font-size:9px;
    }


    .stat-kicker{
        font-size:7px;
    }

}

/* =========================================================
   CLIENTS LOGO INFINITE SLIDER
   ========================================================= */

.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clientsSlider 35s linear infinite;
}

.logo-track a {
    flex: 0 0 auto;
    width: 180px;
    height: 100px;
    margin-right: 30px;

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

    text-decoration: none;
}

.logo-track img {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Infinite movement */
@keyframes clientsSlider {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}


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

@media (max-width: 991px) {

    .logo-track {
        animation-duration: 30s;
    }

    .logo-track a {
        width: 150px;
        height: 90px;
        margin-right: 25px;
    }

    .logo-track img {
        max-height: 100%;
    }
}


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

@media (max-width: 767px) {

    .logo-track {
        animation-duration: 25s;
    }

    .logo-track a {
        width: 120px;
        height: 80px;
        margin-right: 20px;
    }

    .logo-track img {
        max-height: 100%;
    }
}


/* Office Address */
.office-address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.office-address > i {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 14px;
}


/* Office Contact */
.office-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.office-contact a > i {
    width: 16px;
    flex: 0 0 16px;
    font-size: 14px;
}


/* Visit Website */
.office-visit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.office-visit > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.office-visit > span i {
    font-size: 13px;
}

.office-visit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    text-decoration: none;
    cursor: pointer;
}

.office-visit span {
    display: inline-block;
}

.office-visit > i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.office-visit:hover > i {
    transform: translate(3px, -3px);
}

.hero-title {
    font-size: 40px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 28px;
    }
}


.about-content {
    align-items: center;
}

.about-content .col-lg-6:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-content h2 {
    margin: 0;
}

.split-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.intro-heading {
    display: flex;
    align-items: center;
}

.hero-title {
    margin: 0;
    font-size: 40px;
    line-height: 1.15;
}

.intro-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .split-heading {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hero-title {
        font-size: 30px;
    }
}

*{
box-sizing:border-box;
}

html,body{
overflow-x:hidden;
max-width:100%;
}

img{
max-width:100%;
height:auto;
}


/* =========================================================
   CTS GULF — INNER PAGES REDESIGN
   Keeps the approved homepage design language.
========================================================= */

.cts-page-shell{
    min-height:100vh;
    background:#fff;
    color:var(--ink);
}
.cts-page-body{position:relative;overflow:hidden;}
.cts-page-body .auto-container,
.cts-page-body .cts-container,
.cts-page-body .sgs-container,
.cts-page-body .sgs-container-v2{
    width:min(var(--max),calc(100% - 64px));
    max-width:var(--max);
    margin-left:auto;
    margin-right:auto;
}
.cts-page-body .auto-container{padding-left:0;padding-right:0;}
.cts-page-body .row{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:28px;
    margin:0;
}
.cts-page-body .row > [class*="col-lg-12"],
.cts-page-body .row > [class*="col-md-12"],
.cts-page-body .row > [class*="col-sm-12"]{grid-column:span 12;}
.cts-page-body .row > [class*="col-lg-8"]{grid-column:span 8;}
.cts-page-body .row > [class*="col-lg-6"]{grid-column:span 6;}
.cts-page-body .row > [class*="col-lg-4"]{grid-column:span 4;}
.cts-page-body .row > [class*="col-lg-3"]{grid-column:span 3;}
.cts-page-body .row > [class*="col-md-6"]{ }
.cts-page-body .clearfix:after{display:none;}
.cts-page-body .centered{text-align:center;}

/* INNER HERO */
.cts-page-hero{
    position:relative!important;
    min-height:350px;
    display:flex!important;
    align-items:flex-end;
    padding:0 0 72px;
    background:
        linear-gradient(90deg,rgba(4,25,37,.94),rgba(4,25,37,.55) 58%,rgba(4,25,37,.25)),
        linear-gradient(180deg,rgba(4,25,37,.05),rgba(4,25,37,.45)),
        var(--navy)!important;
    background-size:cover!important;
    background-position:center!important;
    overflow:hidden;
}
.cts-page-hero:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:140px 140px;
    mask-image:linear-gradient(to right,#000,transparent 85%);
    pointer-events:none;
}
.cts-page-hero:after{
    content:"";
    position:absolute;
    width:320px;height:320px;
    right:8%;bottom:-210px;
    border:1px solid rgba(39,168,91,.35);
    transform:rotate(45deg);
    box-shadow:0 0 80px rgba(23,140,195,.10);
}
.cts-page-hero .auto-container{
    position:relative;
    z-index:2;
    width:min(var(--max),calc(100% - 64px));
}
.cts-page-hero h1,
.cts-page-hero h2{
    max-width:950px;
    color:#fff;
    font-family:var(--display);
    font-size:clamp(48px,6vw,82px);
    line-height:.98;
    letter-spacing:-3.5px;
    font-weight:700;
    margin:0;
}
.cts-page-hero .eyebrow{
    color:#9fd5e8;
    margin-bottom:18px;
}
.cts-page-hero .eyebrow:before{
    content:"";
    width:34px;height:1px;
    background:currentColor;
}

/* SECTIONS */
.cts-modern-section,
.cts-page-body .welcome-section,
.cts-page-body .service-section-five,
.cts-page-body .project-page-section,
.cts-page-body .contact-page-section,
.cts-page-body .contact-form-section,
.cts-page-body .process-section,
.cts-page-body .counter-section,
.cts-page-body .clients-section,
.cts-page-body .cta-section-two{
    position:relative;
    padding:110px 0;

}
.cts-page-body .welcome-section:before,
.cts-page-body .project-page-section:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 10% 20%,rgba(23,140,195,.05),transparent 28%),
        radial-gradient(circle at 90% 80%,rgba(39,168,91,.05),transparent 30%);
    pointer-events:none;
}
.cts-page-body .sec-title,
.cts-page-body .sec-title-three{
    position:relative;
    margin:0 0 50px;
    max-width:100%;
}
.cts-page-body .sec-title.centered,
.cts-page-body .sec-title.alternate.centered{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.cts-page-body .sec-title .title,
.cts-page-body .sec-title-three .title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:var(--blue);
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:2.2px;
    font-weight:700;
}
.cts-page-body .sec-title .title:before,
.cts-page-body .sec-title-three .title:before{
    content:"";
    width:34px;height:1px;background:currentColor;
}
.cts-page-body .sec-title h2,
.cts-page-body .sec-title-three h2,
.cts-page-body .section-heading{
    color:var(--navy);
    font-family:var(--display);
    font-size:clamp(38px,4.7vw,62px);
    line-height:1.04;
    letter-spacing:-2.4px;
    margin:0;
}
.cts-page-body .sec-title .text,
.cts-page-body .sec-title-three .text{
    max-width:100%;
    margin-top:22px;
    color:#5f7079;
    font-size:17px;
    line-height:1.75;
}

/* CARDS */
.cts-modern-card,
.cts-page-body .inner-box,
.cts-page-body .cert-card,
.cts-page-body .scope-card,
.cts-page-body .feature-card,
.cts-page-body .sgs-benefits-box,
.cts-page-body .sgs-card,
.cts-page-body .column-wrapper{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 16px 45px rgba(8,37,54,.07);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.cts-page-body .inner-box:hover,
.cts-page-body .cert-card:hover,
.cts-page-body .feature-card:hover,
.cts-page-body .sgs-card:hover{
    transform:translateY(-6px);
    border-color:#c9dce4;
    box-shadow:0 24px 55px rgba(8,37,54,.12);
}
.cts-page-body .inner-box .image,
.cts-page-body .cert-card .img-container,
.cts-page-body .feature-card .card-image{
    position:relative;
    overflow:hidden;
}
.cts-page-body .inner-box .image img,
.cts-page-body .cert-card img,
.cts-page-body .feature-card img{
    width:100%;
    display:block;
    object-fit:cover;
    transition:transform .55s ease;
}
.cts-page-body .inner-box:hover .image img{transform:scale(1.045);}
.cts-page-body .lower-content,
.cts-page-body .cert-info,
.cts-page-body .card-description,
.cts-page-body .sgs-card-body-area{
    padding:26px 28px 30px;
}
.cts-page-body .lower-content h4,
.cts-page-body .lower-content h5,
.cts-page-body .cert-info h3,
.cts-page-body .card-title,
.cts-page-body .sgs-box-title{
    margin:0 0 12px;
    color:var(--navy);
    font-family:var(--display);
    font-size:21px;
    line-height:1.2;
    font-weight:700;
}
.cts-page-body .lower-content .text,
.cts-page-body .cert-info p,
.cts-page-body .card-description,
.cts-page-body .sgs-card-body-area p{
    color:#667780;
    font-size:14px;
    line-height:1.75;
}
.cts-page-body .explore,
.cts-page-body .project-view-btn,
.cts-page-body .download-cert-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.cts-page-body .explore:hover,
.cts-page-body .project-view-btn:hover,
.cts-page-body .download-cert-btn:hover{color:var(--green);}

/* BLOG / SERVICES / PRODUCTS / PROJECTS */
.cts-page-body .blog-classic,
.cts-page-body .filter-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    margin:0;
}
.cts-page-body .blog-classic > [class*="col-"],
.cts-page-body .filter-list > [class*="col-"]{
    width:auto!important;
    padding:0;
}
.cts-page-body .news-block-four .inner-box,
.cts-page-body .approach-block .inner-box,
.cts-page-body .project-block-two .inner-box{
    height:100%;
}
.cts-page-body .project-block-two .image{
    aspect-ratio:16/10;
}
.cts-page-body .project-block-two .image img{
    width:100%;height:100%;object-fit:cover;
}
.cts-page-body .project-block-two .overlay-box{
    position:absolute;
    inset:auto 0 0;
    padding:28px;
    background:linear-gradient(transparent,rgba(4,25,37,.94));
    min-height:58%;
    display:flex;
    align-items:flex-end;
}
.cts-page-body .project-block-two .overlay-box .content{width:100%;}
.cts-page-body .project-block-two .overlay-box h4{margin:0;}
.cts-page-body .project-block-two .overlay-box h4 a{color:#fff;}
.cts-page-body .project-block-two .plus{
    position:absolute;
    right:22px;
    top:22px;
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.45);
    color:#fff;
    background:rgba(8,37,54,.38);
}
.cts-page-body .filters{
    margin-bottom:38px;
}
.cts-page-body .filter-tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    padding:0;
    margin:0;
    list-style:none;
}
.cts-page-body .filter-tabs .filter{
    cursor:pointer;
    padding:12px 18px;
    border:1px solid var(--line);
    background:#fff;
    color:#60717a;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    transition:.25s;
}
.cts-page-body .filter-tabs .filter:hover,
.cts-page-body .filter-tabs .filter.active{
    background:var(--navy);
    border-color:var(--navy);
    color:#fff;
}

/* ABOUT */
.cts-page-body .about-details{position:relative;z-index:1;}
.cts-page-body .about-grid-2{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:80px;
    align-items:center;
}
.cts-page-body .about-image-block .image-wrapper{
    position:relative;
    padding:0 0 22px 22px;
}
.cts-page-body .about-image-block .image-wrapper:before{
    content:"";
    position:absolute;
    left:0;bottom:0;
    width:70%;height:70%;
    background:linear-gradient(135deg,var(--green),var(--blue));
    opacity:.15;
}
.cts-page-body .about-image-block img{
    position:relative;
    z-index:1;
    width:100%;
    aspect-ratio:4/4.3;
    object-fit:cover;
}
.cts-page-body .about-features-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:30px;
}
.cts-page-body .about-feature-item{
    display:flex;
    gap:14px;
    padding:18px;
    border:1px solid var(--line);
    background:#fff;
}
.cts-page-body .feature-icon{
    width:42px;height:42px;flex:0 0 42px;
    display:flex;align-items:center;justify-content:center;
    background:var(--soft);
    color:var(--green);
}
.cts-page-body .about-feature-item h4{margin:0 0 5px;color:var(--navy);}
.cts-page-body .about-feature-item p{margin:0;color:#687983;font-size:12px;line-height:1.6;}
.cts-page-body .company-profile-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:28px;
    padding:14px 18px;
    background:var(--navy);
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.cts-page-body .company-profile-btn:hover{background:var(--green);}

/* GENERIC CONTENT */
.cts-page-body .content-side,
.cts-page-body .content-column,
.cts-page-body .column,
.cts-page-body .cts-content-card{
    color:#53656e;
    font-size:15px;
    line-height:1.85;
}
.cts-page-body .content-side > *,
.cts-page-body .content-column > *,
.cts-page-body .column > *{max-width:900px;}
.cts-page-body .content-side h2,
.cts-page-body .content-column h2,
.cts-page-body .column h2,
.cts-page-body .content-side h3,
.cts-page-body .content-column h3,
.cts-page-body .column h3{
    color:var(--navy);
    font-family:var(--display);
}
.cts-page-body ul:not(.filter-tabs):not(.mobile-nav):not(.desktop-nav){
    padding-left:20px;
	padding-top:20px;
}
.cts-page-body li{margin-bottom:8px;}

/* DETAIL PAGES */
.cts-page-body .product-detail,
.cts-page-body .project-detail,
.cts-page-body .service-detail,
.cts-page-body .gallery-box{
    position:relative;
}
.cts-page-body .carousel-column,
.cts-page-body .content-side{
    min-width:0;
}
.cts-page-body .gallery-box img,
.cts-page-body .carousel-column img{
    width:100%;
    display:block;
}
.cts-page-body .detail-layout,
.cts-page-body .two-column-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}
.cts-page-body .detail-meta{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin:25px 0;
}
.cts-page-body .detail-meta > div{
    padding:15px 18px;
    background:var(--soft);
    border-left:3px solid var(--green);
}

/* FORMS */
.cts-page-body .contact-form-section,
.cts-page-body .faq-form,
.cts-page-body .faq-form2,
.cts-page-body form{
    position:relative;
}
.cts-page-body .contact-form-section .auto-container{
    max-width:1000px;
}
.cts-page-body .form-card,
.cts-page-body .contact-form-section form,
.cts-page-body .faq-form,
.cts-page-body .faq-form2{
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 20px 55px rgba(8,37,54,.08);
    padding:38px;
}
.cts-page-body label,
.cts-page-body .quform-label-text{
    display:block;
    margin:0 0 8px;
    color:var(--navy);
    font-size:12px;
    font-weight:700;
}
.cts-page-body input,
.cts-page-body select,
.cts-page-body textarea{
    width:100%;
    border:1px solid #d7e1e5;
    background:#fbfcfd;
    padding:14px 15px;
    min-height:48px;
    color:var(--ink);
    font:inherit;
    outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.cts-page-body textarea{min-height:150px;resize:vertical;}
.cts-page-body input:focus,
.cts-page-body select:focus,
.cts-page-body textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(23,140,195,.08);
}
.cts-page-body button[type="submit"],
.cts-page-body .btn-style-eight,
.cts-page-body .btn-box2 button{
    border:0;
    background:var(--green);
    color:#fff;
    padding:15px 24px;
    min-height:50px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}
.cts-page-body button[type="submit"]:hover,
.cts-page-body .btn-style-eight:hover{background:var(--navy);transform:translateY(-2px);}

/* CONTACT INFO */
.cts-page-body .contact-page-section .row{
    align-items:stretch;
}
.cts-page-body .contact-page-section .info-column,
.cts-page-body .contact-page-section .contact-info,
.cts-page-body .office-block{
    height:100%;
}
.cts-page-body .contact-info .inner-box,
.cts-page-body .contact-page-section .info-box,
.cts-page-body .contact-page-section .contact-info > div{
    padding:28px;
    background:var(--soft);
    border:1px solid var(--line);
}
.cts-page-body .contact-info h3,
.cts-page-body .contact-info h4{
    color:var(--navy);
    margin:0 0 8px;
}
.cts-page-body .contact-info p,
.cts-page-body .contact-info a{
    color:#61737c;
    line-height:1.7;
}

/* CERTIFICATIONS */
.cts-page-body .cert-row,
.cts-page-body .certifications-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
}
.cts-page-body .cert-card{
    height:100%;
}
.cts-page-body .cert-card .img-container{
    background:#f7fafb;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.cts-page-body .cert-card .img-container img{
    max-height:135px;
    object-fit:contain;
}
.cts-page-body .download-cert-btn{
    padding:11px 14px;
    border:1px solid var(--line);
}

/* HSE / QA */
.cts-page-body .dual-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}
.cts-page-body .sgs-hero-banner-v2,
.cts-page-body .expert-banner{
    position:relative;
    overflow:hidden;
    padding:55px;
    background:var(--navy);
    color:#fff;
}
.cts-page-body .sgs-main-title-v2{
    color:#fff;
    font-family:var(--display);
    font-size:clamp(38px,5vw,65px);
    line-height:1.03;
    letter-spacing:-2.5px;
}
.cts-page-body .sgs-hero-desc-v2,
.cts-page-body .sgs-center-meta,
.cts-page-body .sgs-card-body-area p{color:#647780;line-height:1.8;}
.cts-page-body .sgs-hero-banner-v2 .sgs-hero-desc-v2{color:rgba(255,255,255,.75);}
.cts-page-body .sgs-card-icon-area,
.cts-page-body .card-blur-glow{
    width:50px;height:50px;
    display:flex;align-items:center;justify-content:center;
    background:var(--soft);
    color:var(--green);
}
.cts-page-body .sgs-check-list,
.cts-page-body .sgs-check-list li{
    list-style:none;
    padding-left:0;
}
.cts-page-body .sgs-check-list li{
    position:relative;
    padding:10px 0 10px 28px;
    color:#5d7079;
}
.cts-page-body .sgs-check-list li:before{
    content:"✓";
    position:absolute;
    left:0;top:9px;
    color:var(--green);
    font-weight:800;
}

/* CAREERS / VENDOR */
.cts-page-body .file-upload-container{
    border:1px dashed #bfd0d7;
    background:#f8fbfc;
    padding:24px;
}
.cts-page-body .counter-section .row{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.cts-page-body .counter-section .fact-counter,
.cts-page-body .counter-section .counter-column{
    padding:28px;
    border:1px solid var(--line);
    background:var(--soft);
    text-align:center;
}
.cts-page-body .counter-section .count-outer{
    color:var(--navy);
    font-family:var(--display);
    font-size:42px;
    font-weight:700;
}

/* CTA */
.cts-page-body .cta-section-two{
    background:var(--navy);
    color:#fff;
}
.cts-page-body .cta-section-two .auto-container{
    position:relative;
}
.cts-page-body .cta-section-two h2,
.cts-page-body .cta-section-two .title{
    color:#fff;
}
.cts-page-body .cta-section-two .text{color:rgba(255,255,255,.7);}
.cts-page-body .cta-section-two a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:20px;
    padding:14px 20px;
    background:var(--green);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

/* MAP */
.cts-page-body .map-section iframe{
    display:block;
    width:100%;
    min-height:420px;
    border:0;
    filter:saturate(.8);
}

/* LEGACY COMPONENT CLEANUP */
.cts-page-body .pattern-layer{opacity:.45;pointer-events:none;}
.cts-page-body .wow,
.cts-page-body .animated{animation:none!important;}
.cts-page-body .fadeInLeft,
.cts-page-body .fadeInRight,
.cts-page-body .fadeInUp{animation:none!important;}
.cts-page-body .clock,
.cts-page-body .header-top,
.cts-page-body .header-upper,
.cts-page-body .header-lower{display:none!important;}
.cts-page-body .sidebar-page-container{padding:110px 0;background:#fff;}
.cts-page-body .sidebar-page-container .content-side{max-width:none;}
.cts-page-body .sidebar-page-container .row{
    grid-template-columns:1fr;
}

/* RESPONSIVE */
@media(max-width:1100px){
    .cts-page-body .about-grid-2,
    .cts-page-body .detail-layout,
    .cts-page-body .two-column-layout{grid-template-columns:1fr;gap:45px;}
    .cts-page-body .blog-classic,
    .cts-page-body .filter-list,
    .cts-page-body .cert-row,
    .cts-page-body .certifications-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cts-page-body .dual-grid{grid-template-columns:1fr;}
    .cts-page-body .row > [class*="col-lg-4"],
    .cts-page-body .row > [class*="col-lg-3"]{grid-column:span 6;}
}
@media(max-width:760px){
    .cts-page-body .auto-container,
    .cts-page-body .cts-container,
    .cts-page-body .sgs-container,
    .cts-page-body .sgs-container-v2,
    .cts-page-hero .auto-container{
        width:calc(100% - 40px);
    }
    .cts-page-hero{min-height:340px;padding-bottom:48px;}
    .cts-page-hero h1,
    .cts-page-hero h2{font-size:clamp(40px,11vw,58px);letter-spacing:-2.2px;}
    .cts-modern-section,
    .cts-page-body .welcome-section,
    .cts-page-body .service-section-five,
    .cts-page-body .project-page-section,
    .cts-page-body .contact-page-section,
    .cts-page-body .contact-form-section,
    .cts-page-body .process-section,
    .cts-page-body .counter-section,
    .cts-page-body .clients-section,
    .cts-page-body .cta-section-two,
    .cts-page-body .sidebar-page-container{padding:75px 0;}
    .cts-page-body .row{
        grid-template-columns:1fr;
        gap:20px;
    }
    .cts-page-body .row > [class*="col-lg-"],
    .cts-page-body .row > [class*="col-md-"],
    .cts-page-body .row > [class*="col-sm-"]{grid-column:span 1;}
    .cts-page-body .blog-classic,
    .cts-page-body .filter-list,
    .cts-page-body .cert-row,
    .cts-page-body .certifications-grid,
    .cts-page-body .about-features-list{grid-template-columns:1fr;}
    .cts-page-body .sec-title h2,
    .cts-page-body .sec-title-three h2,
    .cts-page-body .section-heading{font-size:clamp(34px,9vw,48px);letter-spacing:-1.7px;}
    .cts-page-body .form-card,
    .cts-page-body .contact-form-section form,
    .cts-page-body .faq-form,
    .cts-page-body .faq-form2{padding:24px 20px;}
    .cts-page-body .sgs-hero-banner-v2,
    .cts-page-body .expert-banner{padding:32px 24px;}
    .cts-page-body .sgs-main-title-v2{font-size:40px;}
    .cts-page-body .map-section iframe{min-height:320px;}
}



/* DETAIL / SIDEBAR LAYOUTS */
.cts-page-body .sidebar-page-container .row{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:34px;
}
.cts-page-body .sidebar-page-container .row > .content-side{grid-column:span 8;}
.cts-page-body .sidebar-page-container .row > .sidebar-side{grid-column:span 4;}
.cts-page-body .sidebar-page-container .news-detail .inner-box,
.cts-page-body .sidebar-page-container .service-detail .inner-box{
    overflow:hidden;
}
.cts-page-body .news-detail .lower-content,
.cts-page-body .service-detail .lower-content{
    padding:34px 38px 42px;
}
.cts-page-body .news-detail .lower-content p,
.cts-page-body .service-detail .lower-content p{
    color:#586a73;
    font-size:15px;
    line-height:1.9;
    margin:0 0 20px;
}
.cts-page-body .news-detail .lower-content h3,
.cts-page-body .service-detail .lower-content h3{
    color:var(--navy);
    font-family:var(--display);
    font-size:34px;
    line-height:1.15;
    letter-spacing:-1px;
    margin:0 0 22px;
}
.cts-page-body .sidebar{
    position:sticky;
    top:110px;
}
.cts-page-body .sidebar-widget{
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 15px 40px rgba(8,37,54,.06);
    margin-bottom:20px;
}
.cts-page-body .sidebar-title{
    padding:20px 22px;
    background:var(--navy);
}
.cts-page-body .sidebar-title h4{
    margin:0;color:#fff;font-family:var(--display);
}
.cts-page-body .service-list{
    list-style:none!important;
    padding:8px!important;
    margin:0;
}
.cts-page-body .service-list li{
    margin:0;
    border-bottom:1px solid #edf2f4;
}
.cts-page-body .service-list li:last-child{border-bottom:0;}
.cts-page-body .service-list a{
    display:block;
    padding:14px;
    color:#5d7079;
    font-size:13px;
    font-weight:600;
}
.cts-page-body .service-list a:hover{
    color:var(--green);
    background:var(--soft);
}
.cts-page-body .gallery-box{
    margin-top:32px;
}
.cts-page-body .gallery-box .row{
    display:block;
}
.cts-page-body .gallery-box .carousel-column{
    width:100%;
}
.cts-page-body .gallery-box .slide .image img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}
@media(max-width:1100px){
    .cts-page-body .sidebar-page-container .row > .content-side,
    .cts-page-body .sidebar-page-container .row > .sidebar-side{grid-column:span 12;}
    .cts-page-body .sidebar{position:static;}
}
@media(max-width:760px){
    .cts-page-body .news-detail .lower-content,
    .cts-page-body .service-detail .lower-content{padding:24px 20px 30px;}
    .cts-page-body .news-detail .lower-content h3,
    .cts-page-body .service-detail .lower-content h3{font-size:28px;}
}

/* =========================================================
   CONTACT PAGE — REGIONAL BRANCH CARDS
   ========================================================= */
.cts-branches-section{
    background:#f7fafb !important;
    padding-top:105px !important;
    padding-bottom:85px !important;
}
.cts-branches-title{
    margin-bottom:48px !important;
}
.cts-branches-title .title{
    justify-content:center;
}
.cts-branches-title .text{
    margin:18px auto 0 !important;
    max-width:680px !important;
}
.cts-branch-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}
.cts-branch-card{
    position:relative;
    isolation:isolate;
    min-height:330px;
    padding:28px 28px 25px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid #dfe8ec;
    box-shadow:0 16px 45px rgba(8,37,54,.07);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.cts-branch-card:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:3px;
    background:var(--green);
    transition:width .35s ease;
}
.cts-branch-card:hover{
    transform:translateY(-6px);
    border-color:rgba(23,140,195,.25);
    box-shadow:0 24px 55px rgba(8,37,54,.11);
}
.cts-branch-card:hover:after{width:100%;}
.cts-branch-card-link{
    position:absolute;
    inset:0;
    z-index:1;
}
.cts-branch-top,
.cts-branch-card h3,
.cts-branch-address,
.cts-branch-contact,
.cts-branch-visit{
    position:relative;
    z-index:2;
}
.cts-branch-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
}
.cts-branch-code{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:25px;
    padding:0 9px;
    background:rgba(39,168,91,.08);
    border:1px solid rgba(39,168,91,.25);
    color:#18844a;
    font-family:var(--display);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}
.cts-branch-index{
    color:#9aaeb7;
    font-family:var(--display);
    font-size:10px;
}
.cts-branch-card h3{
    margin:0 0 10px;
    color:var(--navy);
    font-family:var(--display);
    font-size:21px;
    line-height:1.2;
    letter-spacing:-.4px;
}
.cts-branch-address{
    margin:0;
    min-height:46px;
    color:#687b84;
    font-size:13px;
    line-height:1.75;
}
.cts-branch-contact{
    width:100%;
    margin-top:20px;
    padding-top:17px;
    border-top:1px solid #e7eef1;
}
.cts-branch-contact a{
    display:flex;
    align-items:center;
    gap:9px;
    width:max-content;
    max-width:100%;
    margin-bottom:9px;
    color:#526a75;
    font-size:12px;
    line-height:1.5;
    transition:color .22s ease,transform .22s ease;
}
.cts-branch-contact a:hover{
    color:var(--blue);
    transform:translateX(3px);
}
.cts-branch-contact a span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 21px;
    width:21px;
    height:21px;
    border:1px solid #dce7eb;
    color:var(--green);
    font-family:var(--display);
    font-size:8px;
    font-weight:800;
}
.cts-branch-visit{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    margin-top:auto;
    padding-top:18px;
    color:#7b929d;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.3px;
}
.cts-branch-visit strong{
    color:var(--green);
    font-size:16px;
    font-weight:600;
    transition:transform .25s ease;
}
.cts-branch-card:hover .cts-branch-visit strong{
    transform:translate(4px,-4px);
}
@media (max-width: 991px){
    .cts-branch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 767px){
    .cts-branches-section{padding-top:75px !important;padding-bottom:65px !important;}
    .cts-branches-title{margin-bottom:32px !important;}
    .cts-branch-grid{grid-template-columns:1fr;gap:16px;}
    .cts-branch-card{min-height:300px;padding:24px;}
}


/*-----------------hh-----------------*/


/* ==========================================
   Certifications
========================================== */

.cts-modern-section .sponsors-carousel {
    margin-top: 35px;
}

.cts-modern-section .sponsors-carousel li {
    padding: 15px;
}

.cts-modern-section .cts-cert-card {
    width: 100%;
    height: 320px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.cts-modern-section .cts-cert-card a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cts-modern-section .cts-cert-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}

.cts-modern-section .cts-cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.cts-modern-section .cts-cert-card:hover .cts-cert-img {
    transform: scale(1.04);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 991px) {

    .cts-modern-section .cts-cert-card {
        height: 300px;
        padding: 18px;
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 767px) {

    .cts-modern-section .sponsors-carousel li {
        padding: 10px;
    }

    .cts-modern-section .cts-cert-card {
        height: 280px;
        padding: 15px;
        border-radius: 10px;
    }

}


/* ==========================================
   Small Mobile
========================================== */

@media (max-width: 480px) {

    .cts-modern-section .cts-cert-card {
        height: 260px;
        padding: 12px;
    }

}











/*----------------------------*/




* {
	box-sizing: border-box;
}

html, body {
	overflow-x: hidden;
	max-width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}


.news-block-four {
	float: none;
	display: flex;
}


.approach-block .inner-box {
	transition: all 0.3s ease;
	border-radius: 10px;
	overflow: hidden;
}

.approach-block .inner-box:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}


.approach-block .image img {
	transition: transform 0.4s ease;
}

.approach-block .inner-box:hover .image img {
	transform: scale(1.08);
}



.call-box {
	display: flex;
	align-items: center;
	gap: 12px;
}

.call-button {
	width: 55px;
	height: 55px;
	background: var(--main-color);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transition: 0.3s;
}

.call-button:hover {
	background: #fff;
}

.call-content {
	font-size: 14px;
	color: #FFFFFF;
}

.call-content strong {
	display: block;
	font-size: 16px;
	color: #FFFFFF;
}



.header-top .top-right .social-box a.img-icon img {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
}


/* container */
.header-top .top-right .social-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 0px 13px 15px;
}

.header-top .top-right .social-box:before {
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	bottom: 0px;
	width: 1px;
	opacity: 0.50;
	transform: rotate(20deg);
	background-color: var(--color-three);
	display: none;
}

.header-top .top-right .social-box a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-three);
	font-size: var(--font-18);
	line-height: 1;
	transition: 0.3s;
}

.header-top .top-right .social-box a:hover {
	color: var(--white-color);
	transform: translateY(-2px);
}

.header-top .top-right .social-box a img,
.header-top .top-right .social-box a svg {
	width: 18px;
	height: 18px;
	display: block;
}

.location-block div .strong {
	display: block;
	font-size: 19px;
	font-weight: 700;
}

.location-block .inner-box .btn-box2 {
	color: #25373F;
}

.location-block .inner-box .btn-box2:hover {
	color: var(--main-color);
}

.whatsapp-floating {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	left: 40px;
	z-index: 9999;
	transition: transform 0.3s ease;
}

.whatsapp-floating:hover {
	transform: scale(1.1);
}

.whatsapp-icon {
	width: 100%;
	height: 100%;
	filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}

@media screen and (max-width: 768px) {
	.whatsapp-floating {
		width: 50px;
		height: 50px;
		bottom: 20px;
		left: 20px;
	}
}

.faq-form2 {
	max-width: 665px;
	margin: 0 auto;
	padding: 40px 30px;
	background: #0f172a;
	border-radius: 12px;
	border-top: 6px solid #1a7bae;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

#request-quote .grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

label {
	display: block;
	width: 100%;
	font-size: 11pt;
	font-weight: 600;
	color: #cbd5e1;
	margin-bottom: 8px;
	font-family: "Spartan", sans-serif;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
	display: block;
	width: 100%;
	height: 48px;
	font-size: 11pt;
	padding: 0 15px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	background: #fff;
	color: #000000;
	outline: none;
	transition: all 0.3s ease-in-out;
}

select option {
	background: #1e293b;
	color: #ffffff;
}

input:focus,
select:focus {
	border-color: #1a7bae;
	box-shadow: 0 4px 12px rgba(20, 77, 235, 0.25);
	;
	background: rgba(15, 23, 42, 0.8);
}

button[type="submit"] {
	display: block;
	width: 100%;
	height: 50px;
	font-size: 12pt;
	font-weight: bold;
	border: none;
	border-radius: 6px;
	background: #1a7bae;
	color: #ffffff;
	letter-spacing: 1px;
	cursor: pointer;
	transition: 0.3s all ease-in-out;
	box-shadow: 0 4px 12px rgb(2 65 244 / 25%);
	;
}

button[type="submit"]:hover {
	background: #1a7bae;
	transform: translateY(-2px);
}

button[type="submit"]:active {
	transform: translateY(1px);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	border: 1px solid #1a7bae;
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0px 1000px #0f172a inset;
	transition: background-color 5000s ease-in-out 0s;
}

::selection {
	background: rgba(2, 135, 244, 0.3);
	color: #ffffff;
}

/* ACCREDITATIONS & CERTIFICATIONS*/
.cert-row {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
	margin-bottom: 15px;
}

.cert-col {
	flex: 1;
	min-width: calc(50% - 15px);
	box-sizing: border-box;
}

.cert-card-inner {
	background: rgb(239, 239, 239);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	transition: all 0.3s ease-in-out;
}

.cert-card-inner:hover {
	transform: translateY(-5px);
	border-color: rgba(90, 132, 201, 0.3);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.img-container {
	width: 160px;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.cert-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
}

.cert-info h3 {
	font-size: 14pt;
	font-weight: 700;
	color: #1a7bae;
	margin: 0 0 12px 0;
	font-family: "Spartan", sans-serif;
}

.cert-info p {
	font-size: 10.5pt;
	line-height: 22pt;
	color: #94a3b8;
	margin-bottom: 24px;
	text-align: center;
	font-family: "Spartan", sans-serif;
}

.download-cert-btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	background: #1a7bae;
	color: #ffffff !important;
	font-size: 10.5pt;
	font-weight: bold;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 4px 12px rgba(104, 166, 218, 0.096);
}

.download-cert-btn i {
	font-size: 12pt;
}

.download-cert-btn:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 20px rgba(25, 97, 192, 0.4);
}

@media (max-width: 768px) {
	.cert-row {
		flex-direction: column;
		gap: 20px;
	}

	.cert-col {
		min-width: 100%;
	}

	.cert-card-inner {
		padding: 20px;
	}
}


.hse-wrapper {
	max-width: 64rem;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.policy-hero {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.policy-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hero-text-side {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.main-title {
	font-size: 2.25rem;
	color: #1a7bae;
	font-weight: 900;
	letter-spacing: -0.025em;
	background-clip: text;
	-webkit-background-clip: text;
}

@media (min-width: 768px) {
	.main-title {
		font-size: 3rem;
	}
}

.sub-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #1a7bae;
	border-bottom: 1px solid var(--border-color);
}

.description-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	color: #cbd5e1;
	line-height: 1.625;
	font-size: 0.875rem;
}

@media (min-width: 768px) {
	.description-text {
		font-size: 1rem;
	}
}

.scope-card {
	position: relative;
	background-color: rgb(239, 239, 239);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(6, 182, 212, 0.2);
	border-radius: 1rem;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

.card-blur-glow {
	position: absolute;
	top: 0;
	right: 0;
	width: 6rem;
	background-color: rgba(6, 182, 212, 0.1);
	border-radius: 9999px;
	filter: blur(24px);
}

.card-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: #1a7bae;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.card-description {
	color: rgb(102, 102, 102);
	;
	font-size: 0.875rem;
	line-height: 1.625;
	position: relative;
	z-index: 10;
}

.card-footer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: rgb(102, 102, 102);
	;
}

.footer-grid-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: rgb(2 6 23 / 17%);
	padding: 0.625rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-color);
}

.section-block {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin: 70px 0px;
}

.section-header {
	text-align: center;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.section-title {
	font-size: 1.875rem;
	font-weight: 800;
	color: #1a7bae;
}

.section-subtitle {
	color: rgb(102, 102, 102);
	font-size: 0.875rem;
	line-height: 1.625;
}

.dual-grid {
	display: grid;
	gap: 2rem;
}

.feature-card {
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	transition: all 0.30s;
}

@media (min-width: 768px) {
	.feature-card {
		padding: 2rem;
	}
}

.feature-card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.preventive-card:hover {
	border-color: #1a7bae;
}

.feature-card-header {
	font-size: 1.125rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	border-bottom: 1px solid rgba(30, 41, 59, 0.6);
	padding-bottom: 0.75rem;
}

.threat-header, .preventive-header {
	color: #1a7bae;
}

.feature-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: rgb(102, 102, 102);
	font-size: 0.875rem;
}

.list-item-threat, .list-item-check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}


.column-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.column-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a7bae;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.square-decor {
	color: #1a7bae;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 0.125rem;
	transform: rotate(45deg);
}

.decor-cyan, .decor-emerald {
	background-color: #1a7bae;
}

.provisions-box, .improvement-box {
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 0.875rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.provisions-box,
.improvement-box {
	border: 1px solid #e2e8f0;
}

.provision-item {
	display: flex;
	gap: 0.875rem;
	padding: 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid #0f172a;
}

.provision-item p {
	line-height: 1.5;
	color: rgb(102, 102, 102);
}

.box-caption {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.improvement-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.improvement-item {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	background-color: rgb(2 6 23 / 17%);
	padding: 0.625rem;
	border-radius: 0.5rem;
}

.expert-banner {
	background-image: linear-gradient(to right, #1a7bae, rgba(40, 184, 209, 22%));
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	gap: 1rem;
	color: rgb(102, 102, 102);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.banner-icon {
	font-size: 1.5rem;
	background: linear-gradient(to right, var(--color-emerald), #1a7bae);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	flex-shrink: 0;
}

.text-cyan {
	font-weight: 600;
}

.font-bold {
	font-weight: 700;
}

.font-semibold {
	font-weight: 600;
}


.about-grid-2 {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	align-items: center;
}

.about-text-block, .about-image-block {
	flex: 1;
	min-width: calc(50% - 25px);
}

.section-heading {
	font-size: 20pt;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 20px 0;
	line-height: 28pt;
	position: relative;
}

.section-heading::after {
	content: '';
	display: block;
	width: 50px;
	height: 4px;
	background: #1d7aa6;
	margin-top: 12px;
	border-radius: 2px;
}

.section-heading.centered::after {
	margin: 12px auto 0 auto;
}

.about-description {
	font-size: 11pt;
	line-height: 22pt;
	color: #475569;
	margin-bottom: 30px;
}

.about-features-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

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

.about-feature-item .feature-icon {
	background: rgba(29, 122, 166, 0.1);
	color: #1d7aa6;
	width: 45px;
	height: 45px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14pt;
	flex-shrink: 0;
}

.about-feature-item h4 {
	font-size: 11pt;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 5px 0;
}

.about-feature-item p {
	font-size: 10pt;
	color: #64748b;
	margin: 0;
	line-height: 18pt;
}

.image-wrapper {
	position: relative;
	padding-right: 20px;
	padding-bottom: 20px;
}

.image-wrapper img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: 12px;
	position: relative;
	z-index: 2;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.image-bg-effect {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 90%;
	height: 90%;
	background: rgba(29, 122, 166, 0.08);
	border: 2px dashed rgba(29, 122, 166, 0.3);
	border-radius: 12px;
	z-index: 1;
}

.about-values {
	padding-bottom: 80px;
}

.text-center-block {
	text-align: center;
	margin-bottom: 50px;
}

.about-subtitle-sm {
	font-size: 11pt;
	color: #64748b;
	max-width: 600px;
	margin: 10px auto 0 auto;
}

.about-grid-3 {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.value-card {
	flex: 1;
	min-width: calc(33.333% - 20px);
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 35px 25px;
	box-sizing: border-box;
	text-align: center;
	transition: all 0.3s ease;
}

.value-card:hover {
	transform: translateY(-5px);
	background: #ffffff;
	border-color: #1d7aa6;
	box-shadow: 0 15px 30px rgba(29, 122, 166, 0.08);
}

.value-icon {
	font-size: 24pt;
	color: #1d7aa6;
	margin-bottom: 20px;
}

.value-card h3 {
	font-size: 13pt;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 12px 0;
}

.value-card p {
	font-size: 10pt;
	line-height: 20pt;
	color: #475569;
	margin: 0;
}

@media (max-width: 991px) {
	.about-text-block, .about-image-block, .value-card {
		min-width: 100%;
	}

	.about-title {
		font-size: 22pt;
		line-height: 30pt;
	}

	.about-grid-2 {
		gap: 40px;
	}

	.image-wrapper img {
		height: 300px;
	}
}

.profile-btn-container {
	display: flex;
	align-items: center;
	padding: 20px 0;
}

.company-profile-btn {
	display: inline-flex;
	align-items: center;
	background-color: #1d7aa6;
	border-radius: 50px;
	padding: 6px 24px 6px 6px;
	text-decoration: none;
	color: #ffffff;
	font-size: 11pt;
	font-weight: 700;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 15px rgba(29, 122, 166, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.company-profile-btn .btn-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13pt;
	transition: all 0.3s ease;
}

.company-profile-btn:hover {
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(29, 122, 166, 0.25);
}

.company-profile-btn:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(29, 122, 166, 0.15);
}

.sgs-hero-banner-v2 {
	position: relative;
	background: linear-gradient(135deg, #1d7aa6 0%, #145b7d 100%);
	padding: 40px 0;
	color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(29, 122, 166, 0.08);
	margin: 20px auto;
	width: 95%;
}

.sgs-container-v2 {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

.sgs-hero-content-v2 {
	max-width: 850px;
	text-align: left;
}

.sgs-mini-tag-v2 {
	display: inline-block;
	font-size: 9pt;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #93c5fd;
	margin-bottom: 16px;
}

.sgs-main-title-v2 {
	font-size: 32pt;
	font-weight: 700;
	line-height: 42pt;
	color: #ffffff;
	margin: 0 0 20px 0;
	letter-spacing: -0.5px;
}

.sgs-hero-desc-v2 {
	font-size: 11.5pt;
	line-height: 22pt;
	color: #e2f1f9;
	font-weight: 400;
	margin: 0;
}

@media (max-width: 768px) {
	.sgs-hero-banner-v2 {
		padding: 60px 0;
		width: 100%;
		border-radius: 0;
	}

	.sgs-container-v2 {
		padding: 0 20px;
	}

	.sgs-main-title-v2 {
		font-size: 22pt;
		line-height: 30pt;
	}

	.sgs-hero-desc-v2 {
		font-size: 10.5pt;
		line-height: 19pt;
	}
}

.sgs-overview-section {
	padding-bottom: 80px;
}

.sgs-row-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.sgs-col-text {
	flex: 1.2;
	min-width: calc(55% - 20px);
}

.sgs-col-benefits {
	flex: 0.8;
	min-width: calc(45% - 20px);
}

.sgs-block-heading {
	font-size: 22pt;
	font-weight: 700;
	color: #0f172a;
	line-height: 30pt;
	margin: 0 0 20px 0;
}

.sgs-block-heading.centered {
	text-align: center;
	margin-bottom: 12px;
}

.sgs-block-heading::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background: #1d7aa6;
	margin-top: 15px;
	border-radius: 4px;
}

.sgs-block-heading.centered::after {
	margin: 15px auto 0 auto;
}

.sgs-p-text {
	font-size: 11pt;
	line-height: 23pt;
	color: rgb(102, 102, 102);
	margin: 0;
}

.sgs-p-text.max-600 {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 50px auto;
}

.sgs-benefits-box {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-left: 5px solid #1d7aa6;
	border-radius: 8px;
	padding: 30px;
	box-shadow: 0 10px 25px rgba(29, 122, 166, 0.03);
}

.sgs-box-title {
	font-size: 12.5pt;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 20px 0;
}

.sgs-check-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.sgs-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sgs-check-list li i {
	color: #1d7aa6;
	font-size: 13pt;
	margin-top: 2px;
}

.sgs-check-list li span {
	font-size: 10pt;
	line-height: 18pt;
	color: rgb(102, 102, 102);
}

.sgs-services-detailed {
	background: #ffffff;
	padding: 80px 0;
	border-top: 1px solid #e2e8f0;
}

.sgs-services-wide-grid {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.sgs-wide-card {
	display: flex;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 30px;
	align-items: center;
	gap: 30px;
	transition: all 0.3s ease-in-out;
}

.sgs-wide-card:hover {
	background: #ffffff;
	border-color: #1d7aa6;
	box-shadow: 0 12px 30px rgba(29, 122, 166, 0.06);
	transform: translateX(5px);
}

.sgs-card-icon-area {
	width: 60px;
	height: 60px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #1d7aa6;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18pt;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.sgs-wide-card:hover .sgs-card-icon-area {
	background: #1d7aa6;
	color: #ffffff;
	border-color: #1d7aa6;
}

.sgs-card-body-area h3 {
	font-size: 13pt;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 10px 0;
}

.sgs-card-body-area p {
	font-size: 10.5pt;
	line-height: 20pt;
	color: rgb(102, 102, 102);
	margin: 0;
}

@media (max-width: 991px) {
	.sgs-col-text, .sgs-col-benefits {
		min-width: 100%;
	}

	.sgs-main-title {
		font-size: 22pt;
		line-height: 32pt;
	}

	.sgs-wide-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 25px;
	}

	.sgs-wide-card:hover {
		transform: translateY(-4px);
	}
}

.cts-gulf-about-section {
	padding: 4rem 1.5rem 0px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cts-container {
	max-width: 1140px;
	margin: 0 auto;
}

.vision-mission-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3.5rem;
	align-items: start;
}

@media (min-width: 768px) {
	.vision-mission-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.about-column {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.column-heading {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin: 0 0 0.5rem 0;
}

.action-buttons-group {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.gulf-btn{
	background-color: #1d7aa6;
	display: inline-block;
	padding: 0.75rem 2rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
	transition: background-color 0.2s ease, transform 0.1s ease;
	min-width: 130px;
	color: #ffffff;
}
.gulf-btn:hover{
	background-color: #cbd0d4;
	color: #1d7aa6;
}

.section-spacer {
	height: 1px;
	background-color: #e2e8f0;
	margin: 5rem 0;
}

.board-message-row {
	display: grid;
	margin-top: 70px;
	grid-template-columns: 1fr;
	gap: 3.5rem;
	align-items: start;
}

@media (min-width: 768px) {
	.board-message-row {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.title-with-icon-wrapper {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.message-main-icon {
	font-size: 2.5rem;
	color: var(--gulf-cyan);
	margin-top: 0.25rem;
}

.board-main-title {
	font-size: 1.85rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--gulf-text-heading);
	margin: 0;
}

.title-highlight {
	color: var(--gulf-text-heading);
}

.title-light {
	font-weight: 700;
	color: #1d7aa6;
}

.highlighted-paragraph-box {
	background-color: #f8fafc;
	border-left: 3px solid #1d7aa6;
	padding: 1.25rem;
	margin-top: 10px;
	border-radius: 0 8px 8px 0;
}






/* Project Lower Content */

.project-block-two .lower-content {
    padding: 25px 25px 30px;
}


.project-category {
    display: inline-block;

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

    text-transform: uppercase;

    color: #1b8c7b;

    margin-bottom: 12px;

    letter-spacing: .5px;
}


.project-block-two .lower-content .text {
    font-size: 15px;
    line-height: 1.8;

    color: #666;

    margin-bottom: 20px;

    min-height: 55px;
}



.project-block-two .explore {

    display: inline-flex;

    align-items: center;
    gap: 8px;

    font-weight: 600;

    color: #12263a;

    transition: all .3s ease;

}


.project-block-two .explore span {

    transition: transform .3s ease;

}


.project-block-two .explore:hover {

    color: #1b8c7b;

}


.project-block-two .explore:hover span {

    transform: translateX(5px);

}




.project-view-btn {

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

    padding: 10px 22px;

    border: 1px solid #1b8c7b;
    border-radius: 3px;

    color: #1b8c7b;

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

    text-transform: uppercase;

    letter-spacing: .3px;

    transition: all .35s ease;

    position: relative;
    overflow: hidden;

}


.project-view-btn span {

    font-size: 12px;

    transition: transform .35s ease;

}



/* Hover */

.project-view-btn:hover {

    color: #ffffff;

    background: #1b8c7b;

}


.project-view-btn:hover span {

    transform: translateX(5px);

}


.project-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-width: 175px;
    padding: 8px 8px 8px 20px;

    background: #1C7AAC;
    border: 1px solid #1C7AAC;
    border-radius: 4px;

    color: #fff;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: .4px;

    transition: all .35s ease;
}


/* Text */
.project-view-btn .btn-text {
    position: relative;
    z-index: 2;
}


/* Arrow Circle */
.project-view-btn .btn-icon {
    width: 34px;
    height: 34px;

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

    background: #fff;
    color: #1C7AAC;

    border-radius: 3px;

    transition: all .35s ease;
}


.project-view-btn .btn-icon i {
    font-size: 12px;
    transition: transform .35s ease;
}


/* Hover */
.project-view-btn:hover {
background: #1DA14B;
border-color: #1DA14B;

    color: #fff;

    transform: translateY(-2px);

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


.project-view-btn:hover .btn-icon {
    background: #fff;
}


.project-view-btn:hover .btn-icon i {
    transform: translateX(3px);
}



.project-detail-section .middle-box h4 {
    margin-top: 30px;
    margin-bottom: 20px;

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

    color: #1C7AAC;
}


.project-scope-list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.project-scope-list li {
    position: relative;

    padding: 14px 20px 14px 44px;
    margin-bottom: 10px;

    background: #f7f9fa;

    border-left: 3px solid #1DA14B;

    color: #616161;

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

    transition: all .3s ease;
}


.project-scope-list li::before {

    content: "\f00c";

    font-family: FontAwesome;

    position: absolute;

    left: 16px;
    top: 16px;

    color: #1DA14B;

    font-size: 14px;
}


.project-scope-list li:hover {

    transform: translateX(4px);

    background: #ffffff;

    box-shadow: 0 6px 20px rgba(0,0,0,.07);
}


.single-item-carousel .slide {
    width: 100%;
}

.single-item-carousel .slide .image {
    width: 100%;
    height: 520px;

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

    overflow: hidden;

    background: #f5f5f5;
}

.single-item-carousel .slide .image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    display: block;
}


@media (max-width: 991px) {

    .single-item-carousel .slide .image {
        height: 420px;
    }

}

@media (max-width: 767px) {

    .single-item-carousel .slide .image {
        height: 300px;
    }

}

@media (max-width: 480px) {

    .single-item-carousel .slide .image {
        height: 240px;
    }

}

/* =========================================================
   CTS GULF - ACCREDITATIONS & CERTIFICATIONS
   ========================================================= */

.cts-certifications-section {
    position: relative;
    padding: 110px 0;
    background: #f7f8fa;
    overflow: hidden;
}

.cts-certifications-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(194, 151, 82, 0.07);
    pointer-events: none;
}

.cts-certifications-section::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -220px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(194, 151, 82, 0.045);
    pointer-events: none;
}


/* Heading
--------------------------------------------------------- */

.cts-section-heading {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto 55px;
}

.cts-section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 7px 15px;
    border: 1px solid rgba(194, 151, 82, 0.28);
    border-radius: 50px;
    color: #27a85b;
    background: rgba(194, 151, 82, 0.06);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cts-section-heading h2 {
    margin: 0;
    color: #171717;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.cts-heading-line {
    width: 55px;
    height: 3px;
    margin: 18px auto 18px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #27a85b,
        #d8b477
    );
}

.cts-section-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: #777;
    font-size: 16px;
    line-height: 1.8;
}


/* Grid
--------------------------------------------------------- */

.cts-certifications-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* Card
--------------------------------------------------------- */

.cts-certification-card {
    position: relative;
    display: flex;
    flex-direction: column;

    min-height: 100%;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e9e9e9;
    border-radius: 18px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.045);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.cts-certification-card:hover {
    transform: translateY(-8px);
    border-color: rgba(194, 151, 82, 0.35);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.09);
}


/* Image
--------------------------------------------------------- */

.cts-certification-image {
    position: relative;

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

    min-height: 245px;
    padding: 35px;

    background: #fafafa;
    border-bottom: 1px solid #eeeeee;
}

.cts-certification-image::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;

    background: rgba(194, 151, 82, 0.06);

    z-index: 0;
}

.cts-certification-image img {
    position: relative;
    z-index: 1;

    display: block;

    width: auto;
    max-width: 170px;
    height: 155px;

    object-fit: contain;

    transition: transform 0.35s ease;
}

.cts-certification-card:hover .cts-certification-image img {
    transform: scale(1.06);
}


/* Content
--------------------------------------------------------- */

.cts-certification-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 30px;
}

.cts-certification-number {
    display: block;
    margin-bottom: 8px;

    color: #27a85b;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cts-certification-content h3 {

    margin: 0 0 13px;

    color: #1a1a1a;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.cts-certification-content p {
    margin: 0 0 25px;

    color: #777;

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


/* Download Button
--------------------------------------------------------- */

.cts-certification-download {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;
    margin-top: auto;

    padding: 11px 16px;

    color: #ffffff !important;
    background: #1b1b1b;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.cts-certification-download i {
    font-size: 13px;
}

.cts-certification-download:hover {
    color: #ffffff !important;
    background: #27a85b;
    transform: translateY(-2px);
}


/* Tablet
--------------------------------------------------------- */

@media (max-width: 991px) {

    .cts-certifications-section {
        padding: 85px 0;
    }

    .cts-section-heading h2 {
        font-size: 34px;
    }

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

}


/* Mobile
--------------------------------------------------------- */

@media (max-width: 767px) {

    .cts-certifications-section {
        padding: 70px 0;
    }

    .cts-section-heading {
        margin-bottom: 40px;
    }

    .cts-section-heading h2 {
        font-size: 28px;
    }

    .cts-section-heading p {
        font-size: 14px;
        line-height: 1.75;
    }

    .cts-certifications-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cts-certification-image {
        min-height: 220px;
    }

    .cts-certification-content {
        padding: 25px;
    }

    .cts-certification-content h3 {
        font-size: 19px;
    }

}

/* =========================================================
   CTS GULF - PRODUCTS PAGE
   ========================================================= */

.cts-products-section {
    position: relative;
    padding: 105px 0 115px;
    background: #f7f8fa;
    overflow: hidden;
}

.cts-products-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    top: -220px;
    right: -170px;
    border-radius: 50%;
    background: rgba(194, 151, 82, .065);
    pointer-events: none;
}

.cts-products-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -230px;
    left: -170px;
    border-radius: 50%;
    background: rgba(194, 151, 82, .04);
    pointer-events: none;
}

.cts-products-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 58px;
}

.cts-products-heading h2 {
    margin: 0;
    color: #171717;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.cts-products-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #777;
    font-size: 15px;
    line-height: 1.85;
}

.cts-products-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.cts-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .045);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.cts-product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(194, 151, 82, .35);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .09);
}

.cts-product-media {
    position: relative;
    height: 275px;
    overflow: hidden;
    background: #ececec;
}

.cts-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
}

.cts-product-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.cts-product-card:hover .cts-product-media img {
    transform: scale(1.07);
}

.cts-product-index {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    min-width: 42px;
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50px;
    background: rgba(20,20,20,.72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cts-product-media-link {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #1b1b1b !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.cts-product-media-link:hover {
    background: #27a85b;
    color: #fff !important;
    transform: rotate(5deg) scale(1.05);
}

.cts-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 27px 27px 25px;
}

.cts-product-body h3 {
    margin: 0 0 12px;
    color: #191919;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.cts-product-body h3 a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}

.cts-product-body h3 a:hover {
    color: #27a85b;
}

.cts-product-body p {
    margin: 0 0 25px;
    color: #777;
    font-size: 14px;
    line-height: 1.8;
}

.cts-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid #ededed;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: color .3s ease;
}

.cts-product-link i {
    transition: transform .3s ease;
}

.cts-product-link:hover {
    color: #27a85b !important;
}

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

.cts-product-card-last {
    grid-column: 1 / 2;
}

@media (max-width: 1100px) {
    .cts-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cts-product-card-last {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .cts-products-section {
        padding: 75px 0 85px;
    }

    .cts-products-heading {
        margin-bottom: 40px;
    }

    .cts-products-heading h2 {
        font-size: 30px;
    }

    .cts-products-heading p {
        font-size: 14px;
    }

    .cts-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cts-product-media {
        height: 240px;
    }

    .cts-product-body {
        padding: 24px;
    }
}

/* =========================================================
   CTS GULF - PROJECTS REDESIGN
   ========================================================= */
.cts-projects-section{position:relative;padding:105px 0 115px;background:#f7f8fa;overflow:hidden}
.cts-projects-section:before{content:"";position:absolute;top:-190px;right:-170px;width:430px;height:430px;border-radius:50%;background:rgba(194,151,82,.055);pointer-events:none}
.cts-projects-section:after{content:"";position:absolute;bottom:-240px;left:-220px;width:500px;height:500px;border-radius:50%;background:rgba(194,151,82,.035);pointer-events:none}
.cts-projects-heading{position:relative;z-index:2;max-width:820px;margin:0 auto 42px;text-align:center}
.cts-projects-heading h2{margin:0;color:#171717;font-size:42px;line-height:1.2;font-weight:700}
.cts-projects-heading p{max-width:700px;margin:0 auto;color:#777;font-size:16px;line-height:1.8}
.cts-project-filters{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:0 auto 45px}
.cts-project-filter{appearance:none;border:1px solid #dedede;background:#fff;color:#555;border-radius:50px;padding:11px 20px;font:600 12px/1.2 Manrope,Inter,sans-serif;cursor:pointer;transition:.3s ease;box-shadow:0 5px 18px rgba(0,0,0,.025)}
.cts-project-filter:hover{border-color:#27a85b;color:#27a85b;transform:translateY(-2px)}
.cts-project-filter.active{background:#1b1b1b;border-color:#1b1b1b;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.1)}
.cts-project-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}
.cts-project-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #e9e9e9;border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.045);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;animation:ctsProjectIn .4s ease both}
.cts-project-card:hover{transform:translateY(-8px);border-color:rgba(194,151,82,.35);box-shadow:0 22px 50px rgba(0,0,0,.09)}
.cts-project-card.is-hidden{display:none}
.cts-project-media{position:relative;height:255px;overflow:hidden;background:#ececec}
.cts-project-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s ease}
.cts-project-card:hover .cts-project-media img{transform:scale(1.07)}
.cts-project-media-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.65) 100%);pointer-events:none}
.cts-project-index{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.35);border-radius:30px;background:rgba(0,0,0,.32);backdrop-filter:blur(8px);color:#fff;font:700 11px/1 Manrope,Inter,sans-serif;letter-spacing:1px}
.cts-project-arrow{position:absolute;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#1b1b1b!important;text-decoration:none!important;box-shadow:0 8px 22px rgba(0,0,0,.16);transition:.3s ease}
.cts-project-arrow:hover{background:#27a85b;color:#fff!important;transform:rotate(4deg) scale(1.05)}
.cts-project-content{display:flex;flex-direction:column;flex:1;padding:27px 27px 25px}
.cts-project-category{display:block;margin-bottom:9px;color:#27a85b;font:700 10px/1.2 Manrope,Inter,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.cts-project-content h3{margin:0 0 12px;font-size:19px;line-height:1.4;font-weight:700}
.cts-project-content h3 a{color:#1b1b1b;text-decoration:none;transition:color .25s ease}
.cts-project-content h3 a:hover{color:#27a85b}
.cts-project-content p{margin:0 0 23px;color:#777;font-size:13px;line-height:1.8}
.cts-project-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;width:max-content;color:#1b1b1b!important;text-decoration:none!important;font:700 12px/1 Manrope,Inter,sans-serif}
.cts-project-link span{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f0eee9;color:#27a85b;transition:.3s ease}
.cts-project-link:hover{color:#27a85b!important}
.cts-project-link:hover span{background:#27a85b;color:#fff;transform:translateX(3px)}
@keyframes ctsProjectIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.cts-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.cts-projects-section{padding:75px 0 80px}.cts-projects-heading{margin-bottom:32px}.cts-projects-heading h2{font-size:30px}.cts-projects-heading p{font-size:14px}.cts-project-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:0 4px 7px;margin-bottom:32px;-ms-overflow-style:none;scrollbar-width:none}.cts-project-filters::-webkit-scrollbar{display:none}.cts-project-filter{flex:0 0 auto;padding:10px 16px}.cts-project-grid{grid-template-columns:1fr;gap:20px}.cts-project-media{height:230px}.cts-project-content{padding:24px}.cts-project-content h3{font-size:18px}}

/* =========================================================
   CTS GULF - PROJECT DETAIL REDESIGN
   ========================================================= */

.cts-project-detail {
    position: relative;
    padding: 90px 0 110px;
    background: #f7f8fa;
    overflow: hidden;
}

.cts-project-detail::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(194, 151, 82, 0.055);
    pointer-events: none;
}

.cts-project-detail .auto-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   PROJECT INTRO
   ========================================================= */

.cts-project-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
    gap: 35px;
    align-items: stretch;
    margin-bottom: 45px;
}

.cts-project-main-image {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border-radius: 22px;
    background: #111;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .10);
}

.cts-project-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    transition: transform .6s ease;
}

.cts-project-main-image:hover img {
    transform: scale(1.035);
}

.cts-project-status {
    position: absolute;
    top: 25px;
    left: 25px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 15px;

    color: #fff;
    background: #27a85b;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;

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

.cts-project-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}


/* =========================================================
   PROJECT INFO
   ========================================================= */

.cts-project-info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 42px 38px;

    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 22px;

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

.cts-project-eyebrow {
    display: inline-flex;
    width: fit-content;

    margin-bottom: 13px;
    padding: 7px 13px;

    color: #27a85b;
    background: rgba(181, 138, 75, .07);

    border: 1px solid rgba(181, 138, 75, .20);
    border-radius: 50px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    line-height: 1.2;
    text-transform: uppercase;
}

.cts-project-info h2 {
    margin: 0 0 16px;

    color: #171717;

    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}

.cts-project-summary {
    margin: 0 0 28px;

    color: #777;

    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   META
   ========================================================= */

.cts-project-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #ededed;
}

.cts-meta-item {
    padding: 18px 12px 18px 0;
    border-bottom: 1px solid #ededed;
}

.cts-meta-item:nth-child(odd) {
    padding-right: 18px;
    border-right: 1px solid #ededed;
}

.cts-meta-item:nth-child(even) {
    padding-left: 18px;
}

.cts-meta-item span {
    display: block;
    margin-bottom: 6px;

    color: #999;

    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.cts-meta-item strong {
    display: block;

    color: #222;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}


/* =========================================================
   CONTENT GRID
   ========================================================= */

.cts-project-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 30px;
    align-items: start;

    margin-bottom: 70px;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.cts-project-description {
    padding: 42px;

    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;

    box-shadow: 0 14px 40px rgba(0, 0, 0, .045);
}

.cts-project-description h3 {
    margin: 0 0 18px;

    color: #181818;

    font-size: 29px;
    line-height: 1.3;
    font-weight: 700;
}

.cts-project-description > p {
    margin: 0 0 35px;

    color: #707070;

    font-size: 15px;
    line-height: 1.9;
}

.cts-scope-heading {
    padding-top: 30px;
    border-top: 1px solid #ededed;
}

.cts-scope-heading h4 {
    margin: 0 0 22px;

    color: #202020;

    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
}


/* =========================================================
   SCOPE LIST
   ========================================================= */

.cts-scope-list {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.cts-scope-list li {
    position: relative;

    padding: 15px 18px 15px 46px;

    color: #666;

    background: #fafafa;
    border: 1px solid #ededed;
    border-radius: 10px;

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

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.cts-scope-list li::before {
    content: "\f00c";

    position: absolute;
    top: 17px;
    left: 17px;

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

    width: 19px;
    height: 19px;

    color: #fff;
    background: #27a85b;

    border-radius: 50%;

    font-family: "Font Awesome 7 Free";
    font-size: 9px;
    font-weight: 900;
}

.cts-scope-list li:hover {
    background: #fff;
    border-color: rgba(181, 138, 75, .35);
    transform: translateX(4px);
}


/* =========================================================
   SIDE CARD
   ========================================================= */

.cts-project-side-card {
    padding: 30px;

    background: #181818;
    border-radius: 20px;

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

.cts-project-side-card .cts-project-eyebrow {
    color: #d5ae70;
    background: rgba(213, 174, 112, .08);
    border-color: rgba(213, 174, 112, .20);
}

.cts-side-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 18px 0;

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

.cts-side-stat span {
    color: rgba(255, 255, 255, .55);

    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.cts-side-stat strong {
    color: #fff;

    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.cts-project-back {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 22px;
    padding: 14px 16px;

    color: #fff !important;
    background: #27a85b;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;

    transition:
        background .3s ease,
        transform .3s ease;
}

.cts-project-back:hover {
    color: #fff !important;
    background: #c49a59;
    transform: translateY(-2px);
}

.cts-project-back i {
    font-size: 12px;
}


/* =========================================================
   GALLERY
   ========================================================= */

.cts-project-gallery {
    padding-top: 10px;
}

.cts-gallery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 28px;
}

.cts-gallery-heading h3 {
    margin: 0;

    color: #181818;

    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
}

.cts-gallery-count {
    color: #999;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* Gallery Grid */

.cts-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cts-gallery-item {
    position: relative;
    display: block;

    height: 245px;

    overflow: hidden;

    background: #111;
    border-radius: 13px;

    text-decoration: none;
}

.cts-gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
    height: 506px;
}

.cts-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.cts-gallery-item::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        transparent 45%,
        rgba(0, 0, 0, .55)
    );

    opacity: 0;

    transition: opacity .35s ease;
}

.cts-gallery-item span {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 2;

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

    width: 38px;
    height: 38px;

    color: #fff;
    background: #27a85b;

    border-radius: 50%;

    font-size: 12px;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.cts-gallery-item:hover img {
    transform: scale(1.06);
}

.cts-gallery-item:hover::after,
.cts-gallery-item:hover span {
    opacity: 1;
}

.cts-gallery-item:hover span {
    transform: translateY(0);
}


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

@media (max-width: 991px) {

    .cts-project-detail {
        padding: 75px 0 90px;
    }

    .cts-project-intro {
        grid-template-columns: 1fr;
    }

    .cts-project-main-image,
    .cts-project-main-image img {
        min-height: 450px;
    }

    .cts-project-info {
        padding: 35px;
    }

    .cts-project-content-grid {
        grid-template-columns: 1fr;
    }

    .cts-project-side-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
    }

    .cts-project-side-card > .cts-project-eyebrow {
        grid-column: 1 / -1;
    }

    .cts-project-back {
        grid-column: 1 / -1;
    }

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

    .cts-gallery-item:first-child {
        grid-column: span 2;
        grid-row: span 1;
        height: 360px;
    }

    .cts-gallery-item {
        height: 240px;
    }
}


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

@media (max-width: 767px) {

    .cts-project-detail {
        padding: 55px 0 70px;
    }

    .cts-project-intro {
        gap: 20px;
        margin-bottom: 25px;
    }

    .cts-project-main-image,
    .cts-project-main-image img {
        min-height: 300px;
    }

    .cts-project-main-image {
        border-radius: 16px;
    }

    .cts-project-status {
        top: 15px;
        left: 15px;
    }

    .cts-project-info {
        padding: 25px 22px;
        border-radius: 16px;
    }

    .cts-project-info h2 {
        font-size: 27px;
    }

    .cts-project-meta {
        grid-template-columns: 1fr;
    }

    .cts-meta-item:nth-child(odd) {
        padding-right: 0;
        border-right: 0;
    }

    .cts-meta-item:nth-child(even) {
        padding-left: 0;
    }

    .cts-project-content-grid {
        gap: 20px;
        margin-bottom: 50px;
    }

    .cts-project-description {
        padding: 27px 22px;
        border-radius: 16px;
    }

    .cts-project-description h3 {
        font-size: 24px;
    }

    .cts-project-description > p {
        font-size: 14px;
    }

    .cts-project-side-card {
        display: block;
        padding: 25px 22px;
        border-radius: 16px;
    }

    .cts-gallery-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .cts-gallery-heading h3 {
        font-size: 25px;
    }

    .cts-gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cts-gallery-item,
    .cts-gallery-item:first-child {
        grid-column: auto;
        grid-row: auto;
        height: 240px;
    }

    .cts-gallery-item:first-child {
        height: 280px;
    }

    .cts-gallery-item span {
        opacity: 1;
        transform: none;
    }

}


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

@media (max-width: 480px) {

    .cts-project-info h2 {
        font-size: 24px;
    }

    .cts-project-main-image,
    .cts-project-main-image img {
        min-height: 250px;
    }

    .cts-scope-list li {
        padding: 13px 14px 13px 42px;
        font-size: 13px;
    }

    .cts-gallery-item:first-child {
        height: 235px;
    }

}

/* =========================================================
   CTS GULF — INNER PAGES REDESIGN
   Keeps the approved homepage design language.
========================================================= */

.cts-page-shell{
    min-height:100vh;
    background:#fff;
    color:var(--ink);
}
.cts-page-body{position:relative;overflow:hidden;}
.cts-page-body .auto-container,
.cts-page-body .cts-container,
.cts-page-body .sgs-container,
.cts-page-body .sgs-container-v2{
    width:min(var(--max),calc(100% - 64px));
    max-width:var(--max);
    margin-left:auto;
    margin-right:auto;
}
.cts-page-body .auto-container{padding-left:0;padding-right:0;}
.cts-page-body .row{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:28px;
    margin:0;
}
.cts-page-body .row > [class*="col-lg-12"],
.cts-page-body .row > [class*="col-md-12"],
.cts-page-body .row > [class*="col-sm-12"]{grid-column:span 12;}
.cts-page-body .row > [class*="col-lg-8"]{grid-column:span 8;}
.cts-page-body .row > [class*="col-lg-6"]{grid-column:span 6;}
.cts-page-body .row > [class*="col-lg-4"]{grid-column:span 4;}
.cts-page-body .row > [class*="col-lg-3"]{grid-column:span 3;}
.cts-page-body .row > [class*="col-md-6"]{ }
.cts-page-body .clearfix:after{display:none;}
.cts-page-body .centered{text-align:center;}

/* INNER HERO */
.cts-page-hero{
    position:relative!important;
    min-height:350px;
    display:flex!important;
    align-items:flex-end;
    padding:0 0 72px;
    background:
        linear-gradient(90deg,rgba(4,25,37,.94),rgba(4,25,37,.55) 58%,rgba(4,25,37,.25)),
        linear-gradient(180deg,rgba(4,25,37,.05),rgba(4,25,37,.45)),
        var(--navy)!important;
    background-size:cover!important;
    background-position:center!important;
    overflow:hidden;
}
.cts-page-hero:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:140px 140px;
    mask-image:linear-gradient(to right,#000,transparent 85%);
    pointer-events:none;
}
.cts-page-hero:after{
    content:"";
    position:absolute;
    width:320px;height:320px;
    right:8%;bottom:-210px;
    border:1px solid rgba(39,168,91,.35);
    transform:rotate(45deg);
    box-shadow:0 0 80px rgba(23,140,195,.10);
}
.cts-page-hero .auto-container{
    position:relative;
    z-index:2;
    width:min(var(--max),calc(100% - 64px));
}
.cts-page-hero h1,
.cts-page-hero h2{
    max-width:950px;
    color:#fff;
    font-family:var(--display);
    font-size:clamp(48px,6vw,82px);
    line-height:.98;
    letter-spacing:-3.5px;
    font-weight:700;
    margin:0;
}
.cts-page-hero .eyebrow{
    color:#9fd5e8;
    margin-bottom:18px;
}
.cts-page-hero .eyebrow:before{
    content:"";
    width:34px;height:1px;
    background:currentColor;
}

/* SECTIONS */
.cts-modern-section,
.cts-page-body .welcome-section,
.cts-page-body .service-section-five,
.cts-page-body .project-page-section,
.cts-page-body .contact-page-section,
.cts-page-body .contact-form-section,
.cts-page-body .process-section,
.cts-page-body .counter-section,
.cts-page-body .clients-section,
.cts-page-body .cta-section-two{
    position:relative;
    padding:110px 0;
}
.cts-page-body .welcome-section:before,
.cts-page-body .project-page-section:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 10% 20%,rgba(23,140,195,.05),transparent 28%),
        radial-gradient(circle at 90% 80%,rgba(39,168,91,.05),transparent 30%);
    pointer-events:none;
}
.cts-page-body .sec-title,
.cts-page-body .sec-title-three{
    position:relative;
    margin:0 0 50px;
    max-width:850px;
}
.cts-page-body .sec-title.centered,
.cts-page-body .sec-title.alternate.centered{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.cts-page-body .sec-title .title,
.cts-page-body .sec-title-three .title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:var(--blue);
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:2.2px;
    font-weight:700;
}
.cts-page-body .sec-title .title:before,
.cts-page-body .sec-title-three .title:before{
    content:"";
    width:34px;height:1px;background:currentColor;
}
.cts-page-body .sec-title h2,
.cts-page-body .sec-title-three h2,
.cts-page-body .section-heading{
    color:var(--navy);
    font-family:var(--display);
    font-size:clamp(38px,4.7vw,62px);
    line-height:1.04;
    letter-spacing:-2.4px;
    margin:0;
}
.cts-page-body .sec-title .text,
.cts-page-body .sec-title-three .text{
    max-width:760px;
    margin-top:22px;
    color:#5f7079;
    font-size:17px;
    line-height:1.75;
}

/* CARDS */
.cts-modern-card,
.cts-page-body .inner-box,
.cts-page-body .cert-card,
.cts-page-body .scope-card,
.cts-page-body .feature-card,
.cts-page-body .sgs-benefits-box,
.cts-page-body .sgs-card,
.cts-page-body .column-wrapper{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 16px 45px rgba(8,37,54,.07);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.cts-page-body .inner-box:hover,
.cts-page-body .cert-card:hover,
.cts-page-body .feature-card:hover,
.cts-page-body .sgs-card:hover{
    transform:translateY(-6px);
    border-color:#c9dce4;
    box-shadow:0 24px 55px rgba(8,37,54,.12);
}
.cts-page-body .inner-box .image,
.cts-page-body .cert-card .img-container,
.cts-page-body .feature-card .card-image{
    position:relative;
    overflow:hidden;
}
.cts-page-body .inner-box .image img,
.cts-page-body .cert-card img,
.cts-page-body .feature-card img{
    width:100%;
    display:block;
    object-fit:cover;
    transition:transform .55s ease;
}
.cts-page-body .inner-box:hover .image img{transform:scale(1.045);}
.cts-page-body .lower-content,
.cts-page-body .cert-info,
.cts-page-body .card-description,
.cts-page-body .sgs-card-body-area{
    padding:26px 28px 30px;
}
.cts-page-body .lower-content h4,
.cts-page-body .lower-content h5,
.cts-page-body .cert-info h3,
.cts-page-body .card-title,
.cts-page-body .sgs-box-title{
    margin:0 0 12px;
    color:var(--navy);
    font-family:var(--display);
    font-size:21px;
    line-height:1.2;
    font-weight:700;
}
.cts-page-body .lower-content .text,
.cts-page-body .cert-info p,
.cts-page-body .card-description,
.cts-page-body .sgs-card-body-area p{
    color:#667780;
    font-size:14px;
    line-height:1.75;
}
.cts-page-body .explore,
.cts-page-body .project-view-btn,
.cts-page-body .download-cert-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.cts-page-body .explore:hover,
.cts-page-body .project-view-btn:hover,
.cts-page-body .download-cert-btn:hover{color:var(--green);}

/* BLOG / SERVICES / PRODUCTS / PROJECTS */
.cts-page-body .blog-classic,
.cts-page-body .filter-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    margin:0;
}
.cts-page-body .blog-classic > [class*="col-"],
.cts-page-body .filter-list > [class*="col-"]{
    width:auto!important;
    padding:0;
}
.cts-page-body .news-block-four .inner-box,
.cts-page-body .approach-block .inner-box,
.cts-page-body .project-block-two .inner-box{
    height:100%;
}
.cts-page-body .project-block-two .image{
    aspect-ratio:16/10;
}
.cts-page-body .project-block-two .image img{
    width:100%;height:100%;object-fit:cover;
}
.cts-page-body .project-block-two .overlay-box{
    position:absolute;
    inset:auto 0 0;
    padding:28px;
    background:linear-gradient(transparent,rgba(4,25,37,.94));
    min-height:58%;
    display:flex;
    align-items:flex-end;
}
.cts-page-body .project-block-two .overlay-box .content{width:100%;}
.cts-page-body .project-block-two .overlay-box h4{margin:0;}
.cts-page-body .project-block-two .overlay-box h4 a{color:#fff;}
.cts-page-body .project-block-two .plus{
    position:absolute;
    right:22px;
    top:22px;
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.45);
    color:#fff;
    background:rgba(8,37,54,.38);
}
.cts-page-body .filters{
    margin-bottom:38px;
}
.cts-page-body .filter-tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    padding:0;
    margin:0;
    list-style:none;
}
.cts-page-body .filter-tabs .filter{
    cursor:pointer;
    padding:12px 18px;
    border:1px solid var(--line);
    background:#fff;
    color:#60717a;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    transition:.25s;
}
.cts-page-body .filter-tabs .filter:hover,
.cts-page-body .filter-tabs .filter.active{
    background:var(--navy);
    border-color:var(--navy);
    color:#fff;
}

/* ABOUT */
.cts-page-body .about-details{position:relative;z-index:1;}
.cts-page-body .about-grid-2{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:80px;
    align-items:center;
}
.cts-page-body .about-image-block .image-wrapper{
    position:relative;
    padding:0 0 22px 22px;
}
.cts-page-body .about-image-block .image-wrapper:before{
    content:"";
    position:absolute;
    left:0;bottom:0;
    width:70%;height:70%;
    background:linear-gradient(135deg,var(--green),var(--blue));
    opacity:.15;
}
.cts-page-body .about-image-block img{
    position:relative;
    z-index:1;
    width:100%;
    aspect-ratio:4/4.3;
    object-fit:cover;
}
.cts-page-body .about-features-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:30px;
}
.cts-page-body .about-feature-item{
    display:flex;
    gap:14px;
    padding:18px;
    border:1px solid var(--line);
    background:#fff;
}
.cts-page-body .feature-icon{
    width:42px;height:42px;flex:0 0 42px;
    display:flex;align-items:center;justify-content:center;
    background:var(--soft);
    color:var(--green);
}
.cts-page-body .about-feature-item h4{margin:0 0 5px;color:var(--navy);}
.cts-page-body .about-feature-item p{margin:0;color:#687983;font-size:12px;line-height:1.6;}
.cts-page-body .company-profile-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:28px;
    padding:14px 18px;
    background:var(--navy);
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.cts-page-body .company-profile-btn:hover{background:var(--green);}

/* GENERIC CONTENT */
.cts-page-body .content-side,
.cts-page-body .content-column,
.cts-page-body .column,
.cts-page-body .cts-content-card{
    color:#53656e;
    font-size:15px;
    line-height:1.85;
}
.cts-page-body .content-side > *,
.cts-page-body .content-column > *,
.cts-page-body .column > *{max-width:900px;}
.cts-page-body .content-side h2,
.cts-page-body .content-column h2,
.cts-page-body .column h2,
.cts-page-body .content-side h3,
.cts-page-body .content-column h3,
.cts-page-body .column h3{
    color:var(--navy);
    font-family:var(--display);
}
.cts-page-body ul:not(.filter-tabs):not(.mobile-nav):not(.desktop-nav){
    padding-left:20px;
}
.cts-page-body li{margin-bottom:8px;}

/* DETAIL PAGES */
.cts-page-body .product-detail,
.cts-page-body .project-detail,
.cts-page-body .service-detail,
.cts-page-body .gallery-box{
    position:relative;
}
.cts-page-body .carousel-column,
.cts-page-body .content-side{
    min-width:0;
}
.cts-page-body .gallery-box img,
.cts-page-body .carousel-column img{
    width:100%;
    display:block;
}
.cts-page-body .detail-layout,
.cts-page-body .two-column-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}
.cts-page-body .detail-meta{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin:25px 0;
}
.cts-page-body .detail-meta > div{
    padding:15px 18px;
    background:var(--soft);
    border-left:3px solid var(--green);
}

/* FORMS */
.cts-page-body .contact-form-section,
.cts-page-body .faq-form,
.cts-page-body .faq-form2,
.cts-page-body form{
    position:relative;
}
.cts-page-body .contact-form-section .auto-container{
    max-width:1000px;
}
.cts-page-body .form-card,
.cts-page-body .contact-form-section form,
.cts-page-body .faq-form,
.cts-page-body .faq-form2{
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 20px 55px rgba(8,37,54,.08);
    padding:38px;
}
.cts-page-body label,
.cts-page-body .quform-label-text{
    display:block;
    margin:0 0 8px;
    color:var(--navy);
    font-size:12px;
    font-weight:700;
}
.cts-page-body input,
.cts-page-body select,
.cts-page-body textarea{
    width:100%;
    border:1px solid #d7e1e5;
    background:#fbfcfd;
    padding:14px 15px;
    min-height:48px;
    color:var(--ink);
    font:inherit;
    outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.cts-page-body textarea{min-height:150px;resize:vertical;}
.cts-page-body input:focus,
.cts-page-body select:focus,
.cts-page-body textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(23,140,195,.08);
}
.cts-page-body button[type="submit"],
.cts-page-body .btn-style-eight,
.cts-page-body .btn-box2 button{
    border:0;
    background:var(--green);
    color:#fff;
    padding:15px 24px;
    min-height:50px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}
.cts-page-body button[type="submit"]:hover,
.cts-page-body .btn-style-eight:hover{background:var(--navy);transform:translateY(-2px);}

/* CONTACT INFO */
.cts-page-body .contact-page-section .row{
    align-items:stretch;
}
.cts-page-body .contact-page-section .info-column,
.cts-page-body .contact-page-section .contact-info,
.cts-page-body .office-block{
    height:100%;
}
.cts-page-body .contact-info .inner-box,
.cts-page-body .contact-page-section .info-box,
.cts-page-body .contact-page-section .contact-info > div{
    padding:28px;
    background:var(--soft);
    border:1px solid var(--line);
}
.cts-page-body .contact-info h3,
.cts-page-body .contact-info h4{
    color:var(--navy);
    margin:0 0 8px;
}
.cts-page-body .contact-info p,
.cts-page-body .contact-info a{
    color:#61737c;
    line-height:1.7;
}

/* CERTIFICATIONS */
.cts-page-body .cert-row,
.cts-page-body .certifications-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
}
.cts-page-body .cert-card{
    height:100%;
}
.cts-page-body .cert-card .img-container{
    background:#f7fafb;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.cts-page-body .cert-card .img-container img{
    max-height:135px;
    object-fit:contain;
}
.cts-page-body .download-cert-btn{
    padding:11px 14px;
    border:1px solid var(--line);
}

/* HSE / QA */
.cts-page-body .dual-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}
.cts-page-body .sgs-hero-banner-v2,
.cts-page-body .expert-banner{
    position:relative;
    overflow:hidden;
    padding:55px;
    background:var(--navy);
    color:#fff;
}
.cts-page-body .sgs-main-title-v2{
    color:#fff;
    font-family:var(--display);
    font-size:clamp(38px,5vw,65px);
    line-height:1.03;
    letter-spacing:-2.5px;
}
.cts-page-body .sgs-hero-desc-v2,
.cts-page-body .sgs-center-meta,
.cts-page-body .sgs-card-body-area p{color:#647780;line-height:1.8;}
.cts-page-body .sgs-hero-banner-v2 .sgs-hero-desc-v2{color:rgba(255,255,255,.75);}
.cts-page-body .sgs-card-icon-area,
.cts-page-body .card-blur-glow{
    width:50px;height:50px;
    display:flex;align-items:center;justify-content:center;
    background:var(--soft);
    color:var(--green);
}
.cts-page-body .sgs-check-list,
.cts-page-body .sgs-check-list li{
    list-style:none;
    padding-left:0;
}
.cts-page-body .sgs-check-list li{
    position:relative;
    padding:10px 0 10px 28px;
    color:#5d7079;
}
.cts-page-body .sgs-check-list li:before{
    content:"✓";
    position:absolute;
    left:0;top:9px;
    color:var(--green);
    font-weight:800;
}

/* CAREERS / VENDOR */
.cts-page-body .file-upload-container{
    border:1px dashed #bfd0d7;
    background:#f8fbfc;
    padding:24px;
}
.cts-page-body .counter-section .row{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.cts-page-body .counter-section .fact-counter,
.cts-page-body .counter-section .counter-column{
    padding:28px;
    border:1px solid var(--line);
    background:var(--soft);
    text-align:center;
}
.cts-page-body .counter-section .count-outer{
    color:var(--navy);
    font-family:var(--display);
    font-size:42px;
    font-weight:700;
}

/* CTA */
.cts-page-body .cta-section-two{
    background:var(--navy);
    color:#fff;
}
.cts-page-body .cta-section-two .auto-container{
    position:relative;
}
.cts-page-body .cta-section-two h2,
.cts-page-body .cta-section-two .title{
    color:#fff;
}
.cts-page-body .cta-section-two .text{color:rgba(255,255,255,.7);}
.cts-page-body .cta-section-two a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:20px;
    padding:14px 20px;
    background:var(--green);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

/* MAP */
.cts-page-body .map-section iframe{
    display:block;
    width:100%;
    min-height:420px;
    border:0;
    filter:saturate(.8);
}

/* LEGACY COMPONENT CLEANUP */
.cts-page-body .pattern-layer{opacity:.45;pointer-events:none;}
.cts-page-body .wow,
.cts-page-body .animated{animation:none!important;}
.cts-page-body .fadeInLeft,
.cts-page-body .fadeInRight,
.cts-page-body .fadeInUp{animation:none!important;}
.cts-page-body .clock,
.cts-page-body .header-top,
.cts-page-body .header-upper,
.cts-page-body .header-lower{display:none!important;}
.cts-page-body .sidebar-page-container{padding:110px 0;background:#fff;}
.cts-page-body .sidebar-page-container .content-side{max-width:none;}
.cts-page-body .sidebar-page-container .row{
    grid-template-columns:1fr;
}

/* RESPONSIVE */
@media(max-width:1100px){
    .cts-page-body .about-grid-2,
    .cts-page-body .detail-layout,
    .cts-page-body .two-column-layout{grid-template-columns:1fr;gap:45px;}
    .cts-page-body .blog-classic,
    .cts-page-body .filter-list,
    .cts-page-body .cert-row,
    .cts-page-body .certifications-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cts-page-body .dual-grid{grid-template-columns:1fr;}
    .cts-page-body .row > [class*="col-lg-4"],
    .cts-page-body .row > [class*="col-lg-3"]{grid-column:span 6;}
}
@media(max-width:760px){
    .cts-page-body .auto-container,
    .cts-page-body .cts-container,
    .cts-page-body .sgs-container,
    .cts-page-body .sgs-container-v2,
    .cts-page-hero .auto-container{
        width:calc(100% - 40px);
    }
    .cts-page-hero{min-height:340px;padding-bottom:48px;}
    .cts-page-hero h1,
    .cts-page-hero h2{font-size:clamp(40px,11vw,58px);letter-spacing:-2.2px;}
    .cts-modern-section,
    .cts-page-body .welcome-section,
    .cts-page-body .service-section-five,
    .cts-page-body .project-page-section,
    .cts-page-body .contact-page-section,
    .cts-page-body .contact-form-section,
    .cts-page-body .process-section,
    .cts-page-body .counter-section,
    .cts-page-body .clients-section,
    .cts-page-body .cta-section-two,
    .cts-page-body .sidebar-page-container{padding:75px 0;}
    .cts-page-body .row{
        grid-template-columns:1fr;
        gap:20px;
    }
    .cts-page-body .row > [class*="col-lg-"],
    .cts-page-body .row > [class*="col-md-"],
    .cts-page-body .row > [class*="col-sm-"]{grid-column:span 1;}
    .cts-page-body .blog-classic,
    .cts-page-body .filter-list,
    .cts-page-body .cert-row,
    .cts-page-body .certifications-grid,
    .cts-page-body .about-features-list{grid-template-columns:1fr;}
    .cts-page-body .sec-title h2,
    .cts-page-body .sec-title-three h2,
    .cts-page-body .section-heading{font-size:clamp(34px,9vw,48px);letter-spacing:-1.7px;}
    .cts-page-body .form-card,
    .cts-page-body .contact-form-section form,
    .cts-page-body .faq-form,
    .cts-page-body .faq-form2{padding:24px 20px;}
    .cts-page-body .sgs-hero-banner-v2,
    .cts-page-body .expert-banner{padding:32px 24px;}
    .cts-page-body .sgs-main-title-v2{font-size:40px;}
    .cts-page-body .map-section iframe{min-height:320px;}
}



/* DETAIL / SIDEBAR LAYOUTS */
.cts-page-body .sidebar-page-container .row{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:34px;
}
.cts-page-body .sidebar-page-container .row > .content-side{grid-column:span 8;}
.cts-page-body .sidebar-page-container .row > .sidebar-side{grid-column:span 4;}
.cts-page-body .sidebar-page-container .news-detail .inner-box,
.cts-page-body .sidebar-page-container .service-detail .inner-box{
    overflow:hidden;
}
.cts-page-body .news-detail .lower-content,
.cts-page-body .service-detail .lower-content{
    padding:34px 38px 42px;
}
.cts-page-body .news-detail .lower-content p,
.cts-page-body .service-detail .lower-content p{
    color:#586a73;
    font-size:15px;
    line-height:1.9;
    margin:0 0 20px;
}
.cts-page-body .news-detail .lower-content h3,
.cts-page-body .service-detail .lower-content h3{
    color:var(--navy);
    font-family:var(--display);
    font-size:34px;
    line-height:1.15;
    letter-spacing:-1px;
    margin:0 0 22px;
}
.cts-page-body .sidebar{
    position:sticky;
    top:110px;
}
.cts-page-body .sidebar-widget{
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 15px 40px rgba(8,37,54,.06);
    margin-bottom:20px;
}
.cts-page-body .sidebar-title{
    padding:20px 22px;
    background:var(--navy);
}
.cts-page-body .sidebar-title h4{
    margin:0;color:#fff;font-family:var(--display);
}
.cts-page-body .service-list{
    list-style:none!important;
    padding:8px!important;
    margin:0;
}
.cts-page-body .service-list li{
    margin:0;
    border-bottom:1px solid #edf2f4;
}
.cts-page-body .service-list li:last-child{border-bottom:0;}
.cts-page-body .service-list a{
    display:block;
    padding:14px;
    color:#5d7079;
    font-size:13px;
    font-weight:600;
}
.cts-page-body .service-list a:hover{
    color:var(--green);
    background:var(--soft);
}
.cts-page-body .gallery-box{
    margin-top:32px;
}
.cts-page-body .gallery-box .row{
    display:block;
}
.cts-page-body .gallery-box .carousel-column{
    width:100%;
}
.cts-page-body .gallery-box .slide .image img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}
@media(max-width:1100px){
    .cts-page-body .sidebar-page-container .row > .content-side,
    .cts-page-body .sidebar-page-container .row > .sidebar-side{grid-column:span 12;}
    .cts-page-body .sidebar{position:static;}
}
@media(max-width:760px){
    .cts-page-body .news-detail .lower-content,
    .cts-page-body .service-detail .lower-content{padding:24px 20px 30px;}
    .cts-page-body .news-detail .lower-content h3,
    .cts-page-body .service-detail .lower-content h3{font-size:28px;}
}

/* =========================================================
   CTS GULF - PRODUCTS PAGE
   ========================================================= */

.cts-products-section {
    position: relative;
    padding: 105px 0 115px;
    background: #f7f8fa;
    overflow: hidden;
}

.cts-products-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    top: -220px;
    right: -170px;
    border-radius: 50%;
    background: rgba(194, 151, 82, .065);
    pointer-events: none;
}

.cts-products-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -230px;
    left: -170px;
    border-radius: 50%;
    background: rgba(194, 151, 82, .04);
    pointer-events: none;
}

.cts-products-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 58px;
}

.cts-products-heading h2 {
    margin: 0;
    color: #171717;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.cts-products-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #777;
    font-size: 15px;
    line-height: 1.85;
}

.cts-products-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.cts-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .045);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.cts-product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(194, 151, 82, .35);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .09);
}

.cts-product-media {
    position: relative;
    height: 275px;
    overflow: hidden;
    background: #ececec;
}

.cts-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
}

.cts-product-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.cts-product-card:hover .cts-product-media img {
    transform: scale(1.07);
}

.cts-product-index {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    min-width: 42px;
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50px;
    background: rgba(20,20,20,.72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cts-product-media-link {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #1b1b1b !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.cts-product-media-link:hover {
    background: #27a85b;
    color: #fff !important;
    transform: rotate(5deg) scale(1.05);
}

.cts-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 27px 27px 25px;
}

.cts-product-body h3 {
    margin: 0 0 12px;
    color: #191919;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.cts-product-body h3 a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}

.cts-product-body h3 a:hover {
    color: #27a85b;
}

.cts-product-body p {
    margin: 0 0 25px;
    color: #777;
    font-size: 14px;
    line-height: 1.8;
}

.cts-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid #ededed;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: color .3s ease;
}

.cts-product-link i {
    transition: transform .3s ease;
}

.cts-product-link:hover {
    color: #27a85b !important;
}

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

.cts-product-card-last {
    grid-column: 1 / 2;
}

@media (max-width: 1100px) {
    .cts-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cts-product-card-last {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .cts-products-section {
        padding: 75px 0 85px;
    }

    .cts-products-heading {
        margin-bottom: 40px;
    }

    .cts-products-heading h2 {
        font-size: 30px;
    }

    .cts-products-heading p {
        font-size: 14px;
    }

    .cts-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cts-product-media {
        height: 240px;
    }

    .cts-product-body {
        padding: 24px;
    }
}

/* =========================================================
   CTS GULF - PROJECTS REDESIGN
   ========================================================= */
.cts-projects-section{position:relative;padding:105px 0 115px;background:#f7f8fa;overflow:hidden}
.cts-projects-section:before{content:"";position:absolute;top:-190px;right:-170px;width:430px;height:430px;border-radius:50%;background:rgba(194,151,82,.055);pointer-events:none}
.cts-projects-section:after{content:"";position:absolute;bottom:-240px;left:-220px;width:500px;height:500px;border-radius:50%;background:rgba(194,151,82,.035);pointer-events:none}
.cts-projects-heading{position:relative;z-index:2;max-width:820px;margin:0 auto 42px;text-align:center}
.cts-projects-heading h2{margin:0;color:#171717;font-size:42px;line-height:1.2;font-weight:700}
.cts-projects-heading p{max-width:700px;margin:0 auto;color:#777;font-size:16px;line-height:1.8}
.cts-project-filters{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:0 auto 45px}
.cts-project-filter{appearance:none;border:1px solid #dedede;background:#fff;color:#555;border-radius:50px;padding:11px 20px;font:600 12px/1.2 Manrope,Inter,sans-serif;cursor:pointer;transition:.3s ease;box-shadow:0 5px 18px rgba(0,0,0,.025)}
.cts-project-filter:hover{border-color:#27a85b;color:#27a85b;transform:translateY(-2px)}
.cts-project-filter.active{background:#1b1b1b;border-color:#1b1b1b;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.1)}
.cts-project-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}
.cts-project-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #e9e9e9;border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.045);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;animation:ctsProjectIn .4s ease both}
.cts-project-card:hover{transform:translateY(-8px);border-color:rgba(194,151,82,.35);box-shadow:0 22px 50px rgba(0,0,0,.09)}
.cts-project-card.is-hidden{display:none}
.cts-project-media{position:relative;height:255px;overflow:hidden;background:#ececec}
.cts-project-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s ease}
.cts-project-card:hover .cts-project-media img{transform:scale(1.07)}
.cts-project-media-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.65) 100%);pointer-events:none}
.cts-project-index{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.35);border-radius:30px;background:rgba(0,0,0,.32);backdrop-filter:blur(8px);color:#fff;font:700 11px/1 Manrope,Inter,sans-serif;letter-spacing:1px}
.cts-project-arrow{position:absolute;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#1b1b1b!important;text-decoration:none!important;box-shadow:0 8px 22px rgba(0,0,0,.16);transition:.3s ease}
.cts-project-arrow:hover{background:#27a85b;color:#fff!important;transform:rotate(4deg) scale(1.05)}
.cts-project-content{display:flex;flex-direction:column;flex:1;padding:27px 27px 25px}
.cts-project-category{display:block;margin-bottom:9px;color:#27a85b;font:700 10px/1.2 Manrope,Inter,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.cts-project-content h3{margin:0 0 12px;font-size:19px;line-height:1.4;font-weight:700}
.cts-project-content h3 a{color:#1b1b1b;text-decoration:none;transition:color .25s ease}
.cts-project-content h3 a:hover{color:#27a85b}
.cts-project-content p{margin:0 0 23px;color:#777;font-size:13px;line-height:1.8}
.cts-project-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;width:max-content;color:#1b1b1b!important;text-decoration:none!important;font:700 12px/1 Manrope,Inter,sans-serif}
.cts-project-link span{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f0eee9;color:#27a85b;transition:.3s ease}
.cts-project-link:hover{color:#27a85b!important}
.cts-project-link:hover span{background:#27a85b;color:#fff;transform:translateX(3px)}
@keyframes ctsProjectIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.cts-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.cts-projects-section{padding:75px 0 80px}.cts-projects-heading{margin-bottom:32px}.cts-projects-heading h2{font-size:30px}.cts-projects-heading p{font-size:14px}.cts-project-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:0 4px 7px;margin-bottom:32px;-ms-overflow-style:none;scrollbar-width:none}.cts-project-filters::-webkit-scrollbar{display:none}.cts-project-filter{flex:0 0 auto;padding:10px 16px}.cts-project-grid{grid-template-columns:1fr;gap:20px}.cts-project-media{height:230px}.cts-project-content{padding:24px}.cts-project-content h3{font-size:18px}}
/* Fix: Related Projects Layout */
.cts-inner-page .related-projects {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.cts-inner-page .related-projects .row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cts-inner-page .related-projects .owl-carousel,
.cts-inner-page .related-projects .owl-stage-outer {
    width: 100%;
    max-width: 100%;
}

.cts-inner-page .related-projects .owl-item {
    box-sizing: border-box;
}

.cts-inner-page .related-projects img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}








.cts-blog-detail-page {
  --bd-ink: #102b3b;
  --bd-muted: #647785;
  --bd-line: #e4ebef;
  --bd-green: #00a86b;
  --bd-soft: #f3f7f9;
  background: var(--bd-soft);
}

.cts-blog-detail-page .cts-page-body { background: var(--bd-soft); }

/* Hero */
.cts-blog-detail-page .cts-article-hero {
  position: relative;
  isolation: isolate;
  min-height: 350px;
  display: flex;
  align-items: center;
  padding: 62px 0 48px;
  overflow: hidden;
  background-color: #0b2432;
  background-position: center 45%;
  background-size: cover;
}
.cts-blog-detail-page .cts-article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(7, 28, 40, .96) 0%, rgba(7, 28, 40, .82) 58%, rgba(7, 28, 40, .5) 100%);
}
.cts-blog-detail-page .cts-article-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  right: 10%;
  bottom: -205px;
  border: 1px solid rgba(0, 214, 139, .22);
  transform: rotate(45deg);
}
.cts-blog-detail-page .cts-article-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}
.cts-blog-detail-page .cts-article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: #70e5b5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.cts-blog-detail-page .cts-article-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
}
.cts-blog-detail-page .cts-article-hero h2 {
  margin: 0;
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.cts-blog-detail-page .cts-article-hero p {
  max-width: 590px;
  margin: 13px 0 18px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.75;
}
.cts-blog-detail-page .cts-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.66);
  font-size: 12px;
}
.cts-blog-detail-page .cts-breadcrumb a { color: #fff; text-decoration: none; }
.cts-blog-detail-page .cts-breadcrumb a:hover { color: #70e5b5; }

/* Main two-column layout: only the top-level row, never nested rows */
.cts-blog-detail-page .sidebar-page-container {
  position: relative;
  padding: 54px 0 76px;
  background: var(--bd-soft);
}
.cts-blog-detail-page .sidebar-page-container > .pattern-layer {
  opacity: .07;
  pointer-events: none;
}
.cts-blog-detail-page .sidebar-page-container > .auto-container {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin-inline: auto;
}
.cts-blog-detail-page .sidebar-page-container > .auto-container > .row.clearfix {
  display: grid !important;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, .82fr);
  align-items: start;
  gap: 28px;
  margin: 0 !important;
}
.cts-blog-detail-page .sidebar-page-container > .auto-container > .row.clearfix > .content-side,
.cts-blog-detail-page .sidebar-page-container > .auto-container > .row.clearfix > .sidebar-side {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.cts-blog-detail-page .content-side,
.cts-blog-detail-page .sidebar-side,
.cts-blog-detail-page .news-detail { min-width: 0; }

/* Article card */
.cts-blog-detail-page .news-detail { margin: 0; }
.cts-blog-detail-page .news-detail .inner-box.cts-modern-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5ebef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(16, 43, 59, .065);
}
.cts-blog-detail-page .news-detail .inner-box > .image {
  margin: 0;
  overflow: hidden;
  background: #e7edf1;
}
.cts-blog-detail-page .news-detail .inner-box > .image img {
  display: block;
  width: 100%;
  height: clamp(270px, 32vw, 410px);
  object-fit: cover;
  object-position: center;
}
.cts-blog-detail-page .news-detail .lower-content { padding: clamp(24px, 3.2vw, 40px); }
.cts-blog-detail-page .cts-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 20px;
  margin: 0 0 15px;
  color: var(--bd-muted);
  font-size: 12px;
  font-weight: 650;
}
.cts-blog-detail-page .cts-article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.cts-blog-detail-page .cts-article-meta i { color: var(--bd-green); }
.cts-blog-detail-page .news-detail .lower-content h3 {
  margin: 0 0 16px;
  color: var(--bd-ink);
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(27px, 2.7vw, 36px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.03em;
}
.cts-blog-detail-page .news-detail .lower-content p {
  margin: 0 0 17px;
  color: #5d707d;
  font-size: 14px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.cts-blog-detail-page .news-detail .lower-content .cts-article-lead {
  margin-bottom: 22px;
  color: #344e5e;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

/* Image gallery: this is a CSS grid, not an Owl carousel */
.cts-blog-detail-page .gallery-box.cts-article-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 27px 0 4px;
  padding: 0;
  overflow: visible;
}
.cts-blog-detail-page .gallery-box.cts-article-gallery .image {
  display: block;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 11px;
  background: #eaf0f3;
}
.cts-blog-detail-page .gallery-box.cts-article-gallery .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.cts-blog-detail-page .gallery-box.cts-article-gallery .image:hover img { transform: scale(1.045); }

/* Share controls */
.cts-blog-detail-page .post-share-options {
  margin: 18px 0 0;
  padding: 17px 3px 0;
  border-top: 1px solid var(--bd-line);
}
.cts-blog-detail-page .post-share-inner { display: flex; align-items: center; }
.cts-blog-detail-page .post-share-options .social-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cts-blog-detail-page .post-share-options .share {
  margin: 0 5px 0 0;
  color: var(--bd-ink);
  font-size: 12px;
  font-weight: 800;
}
.cts-blog-detail-page .post-share-options .social-box li { margin: 0; }
.cts-blog-detail-page .post-share-options .social-box a {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #e1e9ed;
  border-radius: 50%;
  background: #fff;
  color: #294757;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.cts-blog-detail-page .post-share-options .social-box a:hover {
  transform: translateY(-2px);
  border-color: var(--bd-green);
  background: var(--bd-green);
  color: #fff;
}

/* Sidebar cards */
.cts-blog-detail-page .cts-article-sidebar {
  position: sticky;
  top: 100px;
  padding: 0;
}
.cts-blog-detail-page .cts-sidebar-card {
  margin: 0 0 20px;
  padding: 23px;
  border: 1px solid #e5ebef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 43, 59, .045);
}
.cts-blog-detail-page .cts-sidebar-card .widget-content { padding: 0; }
.cts-blog-detail-page .cts-sidebar-card .sidebar-title-two {
  margin: 0 0 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--bd-line);
}
.cts-blog-detail-page .cts-sidebar-card .sidebar-title-two h4 {
  margin: 0;
  color: var(--bd-ink);
  font-family: Manrope, Inter, sans-serif;
  font-size: 18px;
  font-weight: 800;
}
.cts-blog-detail-page .service-list-two { margin: 0; padding: 0; list-style: none; }
.cts-blog-detail-page .service-list-two li { margin: 0; border-bottom: 1px solid #edf1f3; }
.cts-blog-detail-page .service-list-two li:last-child { border-bottom: 0; }
.cts-blog-detail-page .service-list-two li a {
  position: relative;
  display: block;
  padding: 12px 20px 12px 0;
  color: #526875;
  font-size: 12px;
  line-height: 1.55;
  text-decoration: none;
  transition: color .2s ease, padding .2s ease;
}
.cts-blog-detail-page .service-list-two li a::after {
  content: "\f105";
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  color: var(--bd-green);
}
.cts-blog-detail-page .service-list-two li a:hover { padding-left: 4px; color: var(--bd-green); }
.cts-blog-detail-page .popular-posts .post {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid #edf1f3;
}
.cts-blog-detail-page .popular-posts .post:last-child { padding-bottom: 0; border-bottom: 0; }
.cts-blog-detail-page .popular-posts .post-thumb {
  position: relative;
  width: 76px;
  height: 66px;
  margin: 0;
  overflow: hidden;
  border-radius: 9px;
  background: #eaf0f3;
}
.cts-blog-detail-page .popular-posts .post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.cts-blog-detail-page .popular-posts .post:hover .post-thumb img { transform: scale(1.06); }
.cts-blog-detail-page .popular-posts .post .text { min-width: 0; }
.cts-blog-detail-page .popular-posts .post .text a {
  color: #263f4e;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cts-blog-detail-page .popular-posts .post .text a:hover { color: var(--bd-green); }
.cts-blog-detail-page .popular-posts .overlay-box { display: none !important; }

/* Footer and floating WhatsApp button spacing */
.cts-blog-detail-page .footer { margin-top: 0; }

@media (max-width: 991px) {
  .cts-blog-detail-page .cts-article-hero { min-height: 250px; }
  .cts-blog-detail-page .sidebar-page-container { padding: 42px 0 58px; }
  .cts-blog-detail-page .sidebar-page-container > .auto-container > .row.clearfix {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .cts-blog-detail-page .cts-article-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
  }
  .cts-blog-detail-page .cts-sidebar-card { margin-bottom: 0; }
}

@media (max-width: 767px) {
  .cts-blog-detail-page .cts-article-hero { min-height: 350px; padding: 44px 0 38px; }
  .cts-blog-detail-page .cts-article-hero-inner { width: calc(100% - 36px); }
  .cts-blog-detail-page .sidebar-page-container > .auto-container { width: calc(100% - 30px); }
  .cts-blog-detail-page .news-detail .inner-box.cts-modern-card { border-radius: 15px; }
  .cts-blog-detail-page .news-detail .inner-box > .image img { height: 245px; }
  .cts-blog-detail-page .news-detail .lower-content { padding: 23px 20px; }
  .cts-blog-detail-page .gallery-box.cts-article-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cts-blog-detail-page .gallery-box.cts-article-gallery .image:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .cts-blog-detail-page .cts-article-sidebar { grid-template-columns: minmax(0, 1fr); }
  .cts-blog-detail-page .cts-sidebar-card { padding: 21px; }
}

@media (max-width: 480px) {
  .cts-blog-detail-page .cts-article-hero h2 { font-size: 31px; }
  .cts-blog-detail-page .cts-article-hero p { font-size: 13px; }
  .cts-blog-detail-page .news-detail .inner-box > .image img { height: 215px; }
  .cts-blog-detail-page .news-detail .lower-content { padding: 21px 17px; }
  .cts-blog-detail-page .news-detail .lower-content h3 { font-size: 26px; }
  .cts-blog-detail-page .news-detail .lower-content .cts-article-lead { font-size: 15px; }
  .cts-blog-detail-page .gallery-box.cts-article-gallery { grid-template-columns: minmax(0, 1fr); }
  .cts-blog-detail-page .gallery-box.cts-article-gallery .image,
  .cts-blog-detail-page .gallery-box.cts-article-gallery .image:first-child { grid-column: auto; aspect-ratio: 16 / 9; }
}


/* =========================================================
   CTS GULF — SERVICES DETAIL PAGE POLISH
   Page-specific styles. Load after cts-redesign.css.
========================================================= */

.cts-service-detail-page {
  --cts-navy: #0b2230;
  --cts-ink: #142f40;
  --cts-muted: #607482;
  --cts-green: #28a96b;
  --cts-line: #e5edf1;
  --cts-soft: #f4f7f9;
}

.cts-service-detail-page .cts-service-hero {
  position: relative;
  isolation: isolate;
  min-height: 250px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--cts-navy);
  background-position: center;
  background-size: cover;
  padding: 54px 0 48px;
}
.cts-service-detail-page .cts-service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(5, 24, 35, .96), rgba(8, 35, 49, .82));
}
.cts-service-detail-page .cts-service-hero-inner {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin: 0 auto;
}
.cts-service-detail-page .cts-service-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: #54d49a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.cts-service-detail-page .cts-service-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--cts-green);
}
.cts-service-detail-page .cts-service-hero h2 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
}
.cts-service-detail-page .cts-service-hero h2 span { color: #7be0ae; }
.cts-service-detail-page .cts-service-hero p {
  max-width: 650px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.75;
}
.cts-service-detail-page .cts-service-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}
.cts-service-detail-page .cts-service-breadcrumb a { color: #fff; text-decoration: none; }
.cts-service-detail-page .cts-service-breadcrumb a:hover { color: #7be0ae; }

/* Main content layout — target only the outer sidebar/content row */
.cts-service-detail-page .sidebar-page-container {
  padding: 58px 0 42px;
  background: linear-gradient(180deg, #f5f8fa 0%, #fff 58%);
}
.cts-service-detail-page .sidebar-page-container > .auto-container {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin-inline: auto;
}
.cts-service-detail-page .sidebar-page-container > .auto-container > .row.clearfix {
  display: grid !important;
  grid-template-columns: minmax(245px, .72fr) minmax(0, 1.8fr);
  gap: 30px;
  align-items: start;
  margin: 0 !important;
}
.cts-service-detail-page .sidebar-page-container > .auto-container > .row.clearfix > .sidebar-side,
.cts-service-detail-page .sidebar-page-container > .auto-container > .row.clearfix > .content-side {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.cts-service-detail-page .sidebar.sticky-top {
  position: sticky;
  top: 110px;
}
.cts-service-detail-page .sidebar-widget.service-widget {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cts-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 42, 58, .07);
}
.cts-service-detail-page .sidebar-widget .widget-content { padding: 0; }
.cts-service-detail-page .sidebar-title {
  padding: 19px 22px;
  margin: 0;
  background: var(--cts-navy);
}
.cts-service-detail-page .sidebar-title h4 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
.cts-service-detail-page .service-list {
  margin: 0;
  padding: 8px 20px;
  list-style: none;
}
.cts-service-detail-page .service-list li { margin: 0; border-bottom: 1px solid #edf1f4; }
.cts-service-detail-page .service-list li:last-child { border-bottom: 0; }
.cts-service-detail-page .service-list li a {
  position: relative;
  display: block;
  padding: 14px 20px 14px 0;
  color: #5d7180;
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
  transition: color .2s ease, padding .2s ease;
}
.cts-service-detail-page .service-list li a::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  color: var(--cts-green);
  font-size: 21px;
  line-height: 1;
  transform: translateY(-50%);
}
.cts-service-detail-page .service-list li a:hover,
.cts-service-detail-page .service-list li.current a {
  color: var(--cts-ink);
  font-weight: 700;
  padding-left: 5px;
}

/* Main service card */
.cts-service-detail-page .service-detail,
.cts-service-detail-page .service-detail .inner-box { width: 100%; min-width: 0; }
.cts-service-detail-page .service-detail .inner-box {
  overflow: hidden;
  border: 1px solid var(--cts-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 42, 58, .07);
}
.cts-service-detail-page .service-detail .inner-box > .image {
  margin: 0;
  overflow: hidden;
  background: #dce7ec;
}
.cts-service-detail-page .service-detail .inner-box > .image img {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 430px);
  object-fit: cover;
  object-position: center 42%;
}
.cts-service-detail-page .service-detail .lower-content {
  padding: clamp(24px, 3.2vw, 42px);
}
.cts-service-detail-page .service-detail .lower-content h3 {
  margin: 0 0 16px;
  color: var(--cts-ink);
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.22;
  letter-spacing: -.025em;
  font-weight: 800;
}
.cts-service-detail-page .service-detail .lower-content > p {
  margin: 0 0 22px;
  color: var(--cts-muted);
  font-size: 15px;
  line-height: 1.9;
}
.cts-service-detail-page .options-outer { margin-top: 24px; }
.cts-service-detail-page .options-outer > .row {
  display: block;
  margin: 0;
}
.cts-service-detail-page .options-outer h4 {
  position: relative;
  margin: 0 0 18px;
  padding-left: 16px;
  color: var(--cts-ink);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
}
.cts-service-detail-page .options-outer h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 5px;
  background: var(--cts-green);
}
.cts-service-detail-page .options-outer .column {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.cts-service-detail-page .options-outer ul.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cts-service-detail-page .options-outer ul.list li {
  position: relative;
  margin: 0;
  padding: 11px 0 11px 27px;
  border-bottom: 1px solid #edf1f4;
  color: #5e7280;
  font-size: 14px;
  line-height: 1.75;
}
.cts-service-detail-page .options-outer ul.list li:last-child { border-bottom: 0; }
.cts-service-detail-page .options-outer ul.list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cts-green);
  box-shadow: 0 0 0 4px rgba(40,169,107,.1);
}

/* Gallery images */
.cts-service-detail-page .gallery-images { margin-top: 28px; }
.cts-service-detail-page .gallery-images > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}
.cts-service-detail-page .gallery-images > .row > div {
  width: auto;
  max-width: none;
  padding: 0;
}
.cts-service-detail-page .gallery-images .image {
  height: 210px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #e6edf1;
}
.cts-service-detail-page .gallery-images .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.cts-service-detail-page .gallery-images .image:hover img { transform: scale(1.04); }

/* Related projects — static grid, independent of Owl Carousel sizing */
.cts-service-detail-page .cts-related-projects {
  margin: 0 !important;
  padding: 44px 0 86px;
  background: #f5f8fa;
}
.cts-service-detail-page .cts-related-projects > .auto-container {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin: 0 auto;
}
.cts-service-detail-page .cts-related-heading { margin: 0 0 28px; }
.cts-service-detail-page .cts-related-heading .cts-service-eyebrow { margin-bottom: 10px; }
.cts-service-detail-page .cts-related-heading h2 {
  margin: 0;
  color: var(--cts-ink);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  font-weight: 800;
}
.cts-service-detail-page .cts-related-heading p {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--cts-muted);
  font-size: 14px;
  line-height: 1.8;
}
.cts-service-detail-page .cts-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.cts-service-detail-page .cts-related-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cts-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 42, 58, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cts-service-detail-page .cts-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(15, 42, 58, .11);
}
.cts-service-detail-page .cts-related-image {
  display: block;
  height: 190px;
  overflow: hidden;
  background: #dce7ec;
}
.cts-service-detail-page .cts-related-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.cts-service-detail-page .cts-related-card:hover .cts-related-image img { transform: scale(1.05); }
.cts-service-detail-page .cts-related-content { padding: 19px 19px 21px; }
.cts-service-detail-page .cts-related-content > span {
  display: block;
  margin-bottom: 9px;
  color: var(--cts-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cts-service-detail-page .cts-related-content h3 {
  min-height: 48px;
  margin: 0 0 16px;
  color: var(--cts-ink);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 800;
}
.cts-service-detail-page .cts-related-content h3 a {
  color: inherit;
  text-decoration: none;
}
.cts-service-detail-page .cts-related-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cts-ink);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.cts-service-detail-page .cts-related-link i { color: var(--cts-green); }

/* Responsive */
@media (max-width: 1100px) {
  .cts-service-detail-page .cts-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cts-service-detail-page .cts-related-image { height: 220px; }
}
@media (max-width: 850px) {
  .cts-service-detail-page .sidebar-page-container > .auto-container > .row.clearfix {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .cts-service-detail-page .sidebar.sticky-top { position: static; }
  .cts-service-detail-page .sidebar-widget.service-widget { max-width: none; }
  .cts-service-detail-page .service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }
  .cts-service-detail-page .service-list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .cts-service-detail-page .cts-service-hero { min-height: 0; padding: 44px 0 38px; }
  .cts-service-detail-page .cts-service-hero-inner,
  .cts-service-detail-page .sidebar-page-container > .auto-container,
  .cts-service-detail-page .cts-related-projects > .auto-container {
    width: calc(100% - 30px);
  }
  .cts-service-detail-page .cts-service-hero h2 { font-size: 34px; }
  .cts-service-detail-page .cts-service-hero p { font-size: 13px; }
  .cts-service-detail-page .sidebar-page-container { padding: 30px 0 18px; }
  .cts-service-detail-page .service-detail .inner-box > .image img { height: 230px; }
  .cts-service-detail-page .service-detail .lower-content { padding: 22px 18px; }
  .cts-service-detail-page .service-detail .lower-content h3 { font-size: 25px; }
  .cts-service-detail-page .service-detail .lower-content > p { font-size: 14px; }
  .cts-service-detail-page .options-outer ul.list li { font-size: 13px; }
  .cts-service-detail-page .gallery-images > .row { grid-template-columns: minmax(0, 1fr); }
  .cts-service-detail-page .gallery-images .image { height: 210px; }
  .cts-service-detail-page .service-list { grid-template-columns: minmax(0, 1fr); }
  .cts-service-detail-page .service-list li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid #edf1f4; }
  .cts-service-detail-page .cts-related-projects { padding: 34px 0 55px; }
  .cts-service-detail-page .cts-related-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cts-service-detail-page .cts-related-image { height: 220px; }
  .cts-service-detail-page .cts-related-content h3 { min-height: 0; }
}


.cts-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 55px 70px;
  background: rgba(0, 0, 0, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.cts-image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cts-image-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

.cts-lightbox-close,
.cts-lightbox-prev,
.cts-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background .2s ease;
}

.cts-lightbox-close:hover,
.cts-lightbox-prev:hover,
.cts-lightbox-next:hover {
  background: rgba(255, 255, 255, .25);
}

.cts-lightbox-close {
  top: 18px;
  right: 25px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 34px;
  line-height: 1;
}

.cts-lightbox-prev,
.cts-lightbox-next {
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 22px;
  transform: translateY(-50%);
}

.cts-lightbox-prev { left: 20px; }
.cts-lightbox-next { right: 20px; }

.cts-lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
}

body.cts-lightbox-active {
  overflow: hidden;
}

.cts-product-gallery-lightbox {
  cursor: zoom-in;
}

@media (max-width: 600px) {
  .cts-image-lightbox {
    padding: 50px 42px;
  }

  .cts-image-lightbox img {
    max-height: 78vh;
  }

  .cts-lightbox-close {
    top: 12px;
    right: 12px;
  }

  .cts-lightbox-prev {
    left: 5px;
  }

  .cts-lightbox-next {
    right: 5px;
  }

  .cts-lightbox-prev,
  .cts-lightbox-next {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}