/* ==================================================
   MADA AL WATNIYAH TRADING COMPANY
   MAIN DESKTOP STYLES
================================================== */

:root{
    --navy:#071b34;
    --navy-light:#0d2c50;
    --gold:#d6a93b;
    --gold-light:#f0c96a;
    --white:#ffffff;
    --light:#f5f7fa;
    --text:#1f2a37;
    --muted:#6b7280;
    --shadow:0 18px 45px rgba(0,0,0,.14);
    --radius:18px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:var(--white);
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input,
textarea{
    font:inherit;
}

.container{
    width:min(92%,1320px);
    margin:auto;
}

/* ==================================================
   TOP BAR
================================================== */

.top-bar{
    background:#041326;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.top-bar-content{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.top-contact{
    display:flex;
    align-items:center;
    gap:28px;
    font-size:13px;
}

.top-contact a,
.top-location{
    display:flex;
    align-items:center;
    gap:8px;
    color:#f3f4f6;
}

.language-switcher{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}

.active-language{
    color:var(--gold-light);
    font-weight:700;
}

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

.main-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(7,27,52,.96);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(214,169,59,.22);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.navbar{
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.brand-logo img{
    width:118px;
    height:auto;
}

.main-navigation{
    margin-left:auto;
}

.navigation-list{
    display:flex;
    align-items:center;
    gap:34px;
}

.navigation-list a{
    position:relative;
    color:#fff;
    font-weight:600;
    font-size:15px;
    padding:10px 0;
    transition:.3s ease;
}

.navigation-list a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:2px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.3s ease;
}

.navigation-list a:hover,
.navigation-list .active-link{
    color:var(--gold-light);
}

.navigation-list a:hover::after,
.navigation-list .active-link::after{
    width:100%;
}

.header-button,
.primary-button,
.outline-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 28px;
    border-radius:8px;
    font-weight:700;
    transition:.3s ease;
}

.header-button,
.primary-button{
    color:#071b34;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    box-shadow:0 10px 24px rgba(214,169,59,.25);
}

.header-button:hover,
.primary-button:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(214,169,59,.34);
}

.outline-button{
    color:#fff;
    border:2px solid var(--gold);
    background:rgba(255,255,255,.03);
}

.outline-button:hover{
    color:#071b34;
    background:var(--gold);
}

.mobile-menu-button{
    display:none;
    width:46px;
    height:46px;
    border:0;
    background:transparent;
    cursor:pointer;
}

.mobile-menu-button span{
    display:block;
    width:27px;
    height:3px;
    margin:5px auto;
    background:#fff;
    border-radius:4px;
}

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

.hero-section{
    min-height:760px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(90deg,rgba(4,19,38,.96) 0%,rgba(7,27,52,.82) 42%,rgba(7,27,52,.18) 100%),
        url("../assets/images/hero-bg.jpg") center/cover no-repeat;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 70% 40%,rgba(214,169,59,.16),transparent 30%),
        linear-gradient(to top,rgba(3,14,28,.42),transparent 45%);
}

.hero-gold-shape{
    position:absolute;
    right:-180px;
    bottom:-190px;
    width:760px;
    height:320px;
    border:18px solid var(--gold);
    border-radius:50%;
    transform:rotate(-8deg);
    opacity:.9;
}

.hero-gold-shape::after{
    content:"";
    position:absolute;
    inset:26px;
    border:14px solid #0b2a4b;
    border-radius:50%;
}

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

.hero-content{
    max-width:680px;
    color:#fff;
    padding:80px 0;
}

.hero-small-title{
    display:inline-block;
    color:var(--gold-light);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:18px;
}

.hero-content h1{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(58px,7vw,94px);
    line-height:.96;
    text-transform:uppercase;
    letter-spacing:-2px;
}

.hero-content h1 span{
    display:block;
    color:var(--gold-light);
}

.hero-content p{
    max-width:620px;
    margin-top:28px;
    color:#e5e7eb;
    font-size:18px;
    line-height:1.8;
}

.hero-buttons{
    display:flex;
    gap:16px;
    margin-top:34px;
    flex-wrap:wrap;
}

.hero-highlights{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:54px;
}

.hero-highlight-item{
    padding-left:18px;
    border-left:3px solid var(--gold);
}

.hero-highlight-item strong{
    display:block;
    color:#fff;
    font-size:17px;
}

.hero-highlight-item span{
    display:block;
    margin-top:4px;
    color:#bfc8d4;
    font-size:12px;
}

.scroll-down{
    position:absolute;
    left:50%;
    bottom:24px;
    width:30px;
    height:48px;
    border:2px solid rgba(255,255,255,.62);
    border-radius:20px;
    transform:translateX(-50%);
    z-index:3;
}

.scroll-down span{
    position:absolute;
    top:8px;
    left:50%;
    width:5px;
    height:9px;
    background:var(--gold);
    border-radius:5px;
    transform:translateX(-50%);
    animation:scrollMove 1.8s infinite;
}

/* ==================================================
   GLOBAL SECTION HEADINGS
================================================== */

.section-label{
    display:inline-block;
    color:#8A6500;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700;
    font-size:13px;
    margin-bottom:14px;
}

.section-heading{
    font-family:'Montserrat',sans-serif;
    color:var(--navy);
    font-size:clamp(34px,4vw,52px);
    line-height:1.14;
}

.section-heading span{
    color:#8A6500;
}

.section-heading-box{
    max-width:780px;
    margin:0 auto 56px;
    text-align:center;
}

.section-heading-box p{
    max-width:680px;
    margin:18px auto 0;
    color:var(--muted);
    line-height:1.8;
}

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

.about-section{
    padding:110px 0;
    background:#fff;
}

.about-layout{
    display:grid;
    grid-template-columns:1fr 1.06fr;
    gap:80px;
    align-items:center;
}

.about-visual{
    position:relative;
}

.about-image-frame{
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(145deg,#fff,#edf2f7);
    border-radius:26px;
    border:1px solid rgba(7,27,52,.08);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.about-image-frame::before{
    content:"";
    position:absolute;
    top:-70px;
    left:-70px;
    width:220px;
    height:220px;
    border:24px solid rgba(214,169,59,.24);
    border-radius:50%;
}

.about-image-frame img{
    width:78%;
    position:relative;
    z-index:2;
}

.experience-badge{
    position:absolute;
    right:-24px;
    bottom:34px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px 26px;
    color:#fff;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border:2px solid var(--gold);
    border-radius:16px;
    box-shadow:var(--shadow);
}

.experience-badge strong{
    color:var(--gold-light);
    font-size:38px;
}

.experience-badge span{
    font-size:12px;
    line-height:1.5;
    text-transform:uppercase;
}

.about-content p{
    margin-top:18px;
    color:var(--muted);
    line-height:1.9;
}

.about-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 22px;
    margin:30px 0 34px;
}

.about-feature{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--navy);
    font-weight:600;
}

.about-feature span{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:grid;
    place-items:center;
    color:#071b34;
    background:var(--gold);
    border-radius:50%;
    font-size:13px;
}

/* ==================================================
   SERVICES
================================================== */

.services-section{
    padding:110px 0;
    background:linear-gradient(180deg,#f8fafc,#edf2f7);
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.service-card{
    position:relative;
    min-height:330px;
    padding:34px 30px;
    border-radius:var(--radius);
    background:#fff;
    box-shadow:0 12px 35px rgba(7,27,52,.08);
    border:1px solid rgba(7,27,52,.06);
    overflow:hidden;
    transition:.35s ease;
}

.service-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 48px rgba(7,27,52,.15);
}

.service-number{
    position:absolute;
    right:22px;
    top:15px;
    color:rgba(7,27,52,.06);
    font-family:'Montserrat',sans-serif;
    font-size:72px;
    font-weight:800;
}

.service-icon{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    margin-bottom:24px;
    border-radius:18px;
    font-size:32px;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    box-shadow:0 10px 24px rgba(7,27,52,.18);
}

.service-card h3{
    color:var(--navy);
    font-size:21px;
    margin-bottom:14px;
}

.service-card p{
    color:var(--muted);
    line-height:1.75;
}

.service-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:22px;
    color:var(--gold);
    font-weight:700;
}

/* ==================================================
   WHY CHOOSE US
================================================== */

.why-section{
    padding:110px 0;
    color:#fff;
    background:
        linear-gradient(rgba(4,19,38,.94),rgba(7,27,52,.96)),
        url("../assets/images/hero-bg.jpg") center/cover fixed no-repeat;
}

.why-layout{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:70px;
    align-items:center;
}

.light-heading{
    color:#fff;
}

.why-content > p{
    margin-top:20px;
    color:#d6dde7;
    line-height:1.85;
}

.why-list{
    display:grid;
    gap:14px;
    margin-top:28px;
}

.why-list li{
    display:flex;
    align-items:center;
    gap:12px;
    color:#f1f5f9;
}

.why-list li span{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    color:#071b34;
    background:var(--gold);
    border-radius:50%;
    font-weight:900;
}

.why-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.why-card{
    padding:28px 24px;
    border-radius:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
    backdrop-filter:blur(10px);
    transition:.3s ease;
}

.why-card:hover{
    transform:translateY(-7px);
    border-color:var(--gold);
}

.why-card > span{
    font-size:34px;
}

.why-card h3{
    margin-top:16px;
    color:var(--gold-light);
}

.why-card p{
    margin-top:9px;
    color:#d4dbe5;
    line-height:1.65;
    font-size:14px;
}

/* ==================================================
   STATISTICS
================================================== */

.statistics-section{
    padding:54px 0;
    background:linear-gradient(90deg,#fff,#f5f7fa);
    border-top:1px solid rgba(7,27,52,.08);
    border-bottom:1px solid rgba(7,27,52,.08);
}

.statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.statistic-item{
    text-align:center;
    padding:20px 28px;
    border-right:1px solid rgba(7,27,52,.12);
}

.statistic-item:last-child{
    border-right:0;
}

.statistic-item strong,
.statistic-item > span{
    color:var(--gold);
    font-family:'Montserrat',sans-serif;
    font-size:48px;
    font-weight:800;
}

.statistic-item p{
    margin-top:8px;
    color:var(--navy);
    font-weight:600;
}

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

.projects-section{
    padding:110px 0;
    background:#fff;
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.project-card{
    overflow:hidden;
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow);
    transition:.35s ease;
}

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

.project-placeholder{
    min-height:250px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:64px;
    background:
        linear-gradient(135deg,rgba(7,27,52,.94),rgba(13,44,80,.75)),
        url("../assets/images/hero-bg.jpg") center/cover no-repeat;
}

.project-information{
    padding:26px;
}

.project-information > span{
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.project-information h3{
    margin-top:8px;
    color:var(--navy);
    font-size:21px;
}

.project-information a{
    display:inline-block;
    margin-top:16px;
    color:var(--gold);
    font-weight:700;
}

.center-button{
    text-align:center;
    margin-top:48px;
}

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

.contact-cta{
    padding:72px 0;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border-top:4px solid var(--gold);
}

.contact-cta-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.contact-cta h2{
    color:#fff;
    font-family:'Montserrat',sans-serif;
    font-size:38px;
}

.contact-cta p{
    max-width:760px;
    margin-top:14px;
    color:#ced7e2;
    line-height:1.75;
}

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

.main-footer{
    color:#fff;
    background:#041326;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1.2fr 1.25fr;
    gap:50px;
    padding:78px 0 60px;
}

.footer-company img{
    width:150px;
}

.footer-company p{
    margin-top:20px;
    color:#b9c4d2;
    line-height:1.8;
}

.footer-social{
    display:flex;
    gap:12px;
    margin-top:24px;
}

.footer-social a{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    color:#071b34;
    background:var(--gold);
    border-radius:50%;
    font-weight:800;
    transition:.3s ease;
}

.footer-social a:hover{
    transform:translateY(-4px);
    background:#fff;
}

.footer-column h3{
    color:var(--gold-light);
    margin-bottom:22px;
    font-size:17px;
}

.footer-column ul{
    display:grid;
    gap:13px;
}

.footer-column li,
.footer-column a{
    color:#bac5d2;
    font-size:14px;
    line-height:1.6;
}

.footer-column a:hover{
    color:var(--gold-light);
}

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

.footer-bottom-content{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:#9da9b8;
    font-size:13px;
}

.footer-bottom-content div{
    display:flex;
    gap:22px;
}

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

.whatsapp-button{
    position:fixed;
    right:24px;
    bottom:86px;
    width:56px;
    height:56px;
    z-index:900;
    display:grid;
    place-items:center;
    color:#fff;
    background:#25d366;
    border-radius:50%;
    box-shadow:0 12px 28px rgba(0,0,0,.2);
    font-size:24px;
    transition:.3s ease;
}

.whatsapp-button:hover{
    transform:translateY(-5px) scale(1.04);
}

.back-to-top{
    position:fixed;
    right:29px;
    bottom:24px;
    width:46px;
    height:46px;
    z-index:900;
    display:grid;
    place-items:center;
    color:#071b34;
    background:var(--gold);
    border:0;
    border-radius:50%;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
}

/* ==================================================
   PROFESSIONAL SERVICE ICONS
================================================== */

.service-icon{
    position:relative;
    overflow:hidden;
    color:#d6a93b;
    font-size:0;
}

.service-icon i{
    display:block;
    color:#d6a93b;
    font-size:32px;
    line-height:1;
    transition:
        transform .35s ease,
        color .35s ease;
}

.service-card:hover .service-icon i{
    color:#f0c96a;
    transform:scale(1.13) rotate(-3deg);
}

/* Har icon ko halka different premium effect */

.service-card:nth-child(1) .service-icon{
    background:linear-gradient(145deg,#071b34,#123b68);
}

.service-card:nth-child(2) .service-icon{
    background:linear-gradient(145deg,#071b34,#0b4267);
}

.service-card:nth-child(3) .service-icon{
    background:linear-gradient(145deg,#071b34,#16415e);
}

.service-card:nth-child(4) .service-icon{
    background:linear-gradient(145deg,#071b34,#17385d);
}

.service-card:nth-child(5) .service-icon{
    background:linear-gradient(145deg,#071b34,#1a3957);
}

.service-card:nth-child(6) .service-icon{
    background:linear-gradient(145deg,#071b34,#12375e);
}

.about-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.about-image img{

    width:72%;
    max-width:420px;
    height:auto;

    border-radius:18px;

    object-fit:contain;

    position:relative;
    z-index:2;

    display:block;
}

.experience-box{

    position:absolute;

    right:-35px;
    bottom:35px;

    z-index:10;

}

/* ==================================================
   ABOUT IMAGE FIX
================================================== */

.about-visual{
    position:relative;
    width:100%;
}

.about-image-frame{
    position:relative;
    width:100%;
    min-height:500px;
    padding:0;
    overflow:hidden;
    border-radius:26px;
    background:#eef2f6;
}

.about-image-frame img{
    width:100%;
    height:500px;
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:center;
    border-radius:26px;
}

/* Purana decorative circle image ke peeche rahe */

.about-image-frame::before{
    z-index:0;
}

.about-image-frame img{
    position:relative;
    z-index:1;
}

/* Experience badge image ke upar */

.experience-badge{
    position:absolute;
    right:-22px;
    bottom:32px;
    z-index:20;
    min-width:210px;
}

/* Tablet */

@media (max-width:900px){

    .about-image-frame{
        min-height:450px;
    }

    .about-image-frame img{
        height:450px;
    }

    .experience-badge{
        right:18px;
        bottom:20px;
    }

}

/* Mobile */

@media (max-width:680px){

    .about-image-frame{
        min-height:340px;
    }

    .about-image-frame img{
        height:340px;
    }

    .experience-badge{
        right:12px;
        bottom:12px;
        min-width:175px;
        padding:14px 16px;
    }

}

.experience-badge{
    right:-18px !important;
    bottom:20px !important;
}

/* ==================================================
   SERVICES PAGE
================================================== */

/* Page hero */

.page-hero{
    position:relative;
    min-height:470px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(
            90deg,
            rgba(4,19,38,.96) 0%,
            rgba(7,27,52,.84) 46%,
            rgba(7,27,52,.34) 100%
        ),
        url("../assets/images/hero-bg.jpg") center/cover no-repeat;
}

.page-hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 72% 36%,
            rgba(214,169,59,.18),
            transparent 30%
        ),
        linear-gradient(
            to top,
            rgba(3,14,28,.40),
            transparent 50%
        );
}

.page-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
    padding:80px 0;
    color:#fff;
}

.page-hero-content h1{
    font-family:"Montserrat",sans-serif;
    font-size:clamp(48px,6vw,76px);
    line-height:1.04;
    text-transform:uppercase;
}

.page-hero-content h1 span{
    display:block;
    color:var(--gold-light);
}

.page-hero-content > p{
    max-width:680px;
    margin-top:22px;
    color:#e5e7eb;
    font-size:17px;
    line-height:1.8;
}

.page-breadcrumb{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:30px;
    font-size:14px;
}

.page-breadcrumb a{
    color:#fff;
    transition:.3s ease;
}

.page-breadcrumb a:hover{
    color:var(--gold-light);
}

.page-breadcrumb span{
    color:var(--gold);
    font-size:22px;
}

.page-breadcrumb strong{
    color:var(--gold-light);
}


/* Services introduction */

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

.services-intro-layout{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:70px;
    align-items:center;
}

.services-intro-content p{
    margin-top:18px;
    color:var(--muted);
    line-height:1.9;
}

.services-intro-content .primary-button{
    margin-top:30px;
}

.services-intro-points{
    display:grid;
    gap:20px;
}

.intro-point{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:20px;
    align-items:flex-start;
    padding:25px;
    background:linear-gradient(145deg,#fff,#f7f9fc);
    border:1px solid rgba(7,27,52,.07);
    border-radius:16px;
    box-shadow:0 10px 28px rgba(7,27,52,.07);
    transition:.3s ease;
}

.intro-point:hover{
    transform:translateX(-6px);
    border-color:rgba(214,169,59,.45);
    box-shadow:0 16px 36px rgba(7,27,52,.12);
}

.intro-point > strong{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    color:var(--gold-light);
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border-radius:16px;
    font-family:"Montserrat",sans-serif;
    font-size:20px;
    box-shadow:0 10px 22px rgba(7,27,52,.18);
}

.intro-point h3{
    color:var(--navy);
    font-size:20px;
}

.intro-point p{
    margin-top:8px;
    color:var(--muted);
    line-height:1.7;
    font-size:14px;
}


/* Detailed service cards */

.detailed-services-section{
    padding:110px 0;
    background:linear-gradient(180deg,#f8fafc,#edf2f7);
}

.detailed-services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.detailed-service-card{
    position:relative;
    min-height:470px;
    padding:38px 34px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(7,27,52,.07);
    border-radius:20px;
    box-shadow:0 14px 38px rgba(7,27,52,.09);
    transition:.35s ease;
}

.detailed-service-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
}

.detailed-service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 24px 52px rgba(7,27,52,.16);
}

.detailed-service-icon{
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    margin-bottom:24px;
    color:var(--gold-light);
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border-radius:18px;
    box-shadow:0 12px 28px rgba(7,27,52,.2);
}

.detailed-service-icon i{
    font-size:33px;
}

.detailed-service-number{
    position:absolute;
    right:26px;
    top:18px;
    color:rgba(7,27,52,.06);
    font-family:"Montserrat",sans-serif;
    font-size:82px;
    font-weight:800;
}

.detailed-service-card h3{
    position:relative;
    z-index:1;
    color:var(--navy);
    font-size:25px;
    margin-bottom:16px;
}

.detailed-service-card > p{
    color:var(--muted);
    line-height:1.8;
}

.detailed-service-card ul{
    display:grid;
    gap:11px;
    margin-top:24px;
}

.detailed-service-card li{
    position:relative;
    padding-left:25px;
    color:#425066;
    line-height:1.6;
}

.detailed-service-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--gold);
    font-weight:900;
}

.detailed-service-card > a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:28px;
    color:var(--gold);
    font-weight:700;
    transition:.3s ease;
}

.detailed-service-card > a:hover{
    gap:13px;
    color:var(--navy);
}


/* Work process */

.work-process-section{
    padding:110px 0;
    color:#fff;
    background:
        linear-gradient(
            rgba(4,19,38,.95),
            rgba(7,27,52,.97)
        ),
        url("../assets/images/hero-bg.jpg") center/cover fixed no-repeat;
}

.work-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.process-card{
    position:relative;
    min-height:260px;
    padding:32px 26px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:18px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(10px);
    transition:.35s ease;
}

.process-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    background:rgba(255,255,255,.11);
}

.process-card > span{
    display:block;
    color:var(--gold-light);
    font-family:"Montserrat",sans-serif;
    font-size:46px;
    font-weight:800;
    opacity:.9;
}

.process-card h3{
    margin-top:20px;
    color:#fff;
    font-size:20px;
}

.process-card p{
    margin-top:12px;
    color:#d6dde7;
    line-height:1.7;
    font-size:14px;
}


/* Services-page spacing polish */

.services-page-hero .section-label{
    color:var(--gold-light);
}

.services-page-hero .page-hero-content{
    animation:fadeUp 1s ease both;
}

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

/* Projects hero */

.projects-page-hero{
    background:
        linear-gradient(
            90deg,
            rgba(4,19,38,.97) 0%,
            rgba(7,27,52,.86) 44%,
            rgba(7,27,52,.30) 100%
        ),
        url("../assets/images/hero-bg.jpg") center/cover no-repeat;
}


/* Projects introduction */

.projects-intro-section{
    padding:110px 0;
    background:#fff;
}

.projects-intro-layout{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

.projects-intro-content p{
    margin-top:18px;
    color:var(--muted);
    line-height:1.9;
}

.projects-intro-content .primary-button{
    margin-top:30px;
}

.projects-intro-highlights{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.project-highlight-box{
    min-height:220px;
    padding:28px 24px;
    background:linear-gradient(145deg,#fff,#f7f9fc);
    border:1px solid rgba(7,27,52,.07);
    border-radius:18px;
    box-shadow:0 12px 32px rgba(7,27,52,.08);
    transition:.35s ease;
}

.project-highlight-box:hover{
    transform:translateY(-8px);
    border-color:rgba(214,169,59,.45);
    box-shadow:0 22px 45px rgba(7,27,52,.14);
}

.project-highlight-box i{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    color:var(--gold-light);
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border-radius:16px;
    font-size:27px;
    box-shadow:0 10px 24px rgba(7,27,52,.18);
}

.project-highlight-box h3{
    margin-top:20px;
    color:var(--navy);
    font-size:20px;
}

.project-highlight-box p{
    margin-top:10px;
    color:var(--muted);
    line-height:1.7;
    font-size:14px;
}


/* Project gallery */

.project-gallery-section{
    padding:110px 0;
    background:linear-gradient(180deg,#f8fafc,#edf2f7);
}

.project-filter-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:48px;
}

.project-filter{
    min-height:46px;
    padding:0 22px;
    border:1px solid rgba(7,27,52,.12);
    border-radius:30px;
    background:#fff;
    color:var(--navy);
    font-weight:700;
    cursor:pointer;
    transition:.3s ease;
}

.project-filter:hover,
.project-filter.active{
    color:#071b34;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    border-color:var(--gold);
    box-shadow:0 10px 24px rgba(214,169,59,.22);
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.portfolio-card{
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(7,27,52,.07);
    border-radius:20px;
    box-shadow:0 14px 38px rgba(7,27,52,.09);
    transition:.35s ease;
}

.portfolio-card:hover{
    transform:translateY(-10px);
    box-shadow:0 24px 52px rgba(7,27,52,.16);
}

.portfolio-card.hide{
    display:none;
}

.portfolio-image{
    position:relative;
    min-height:250px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.portfolio-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(4,19,38,.78),
        rgba(7,27,52,.08) 65%
    );
}

.portfolio-image-one{
    background-image:
        linear-gradient(rgba(7,27,52,.08),rgba(7,27,52,.16)),
        url("../assets/images/project-construction.jpg");
}

.portfolio-image-two{
    background-image:
        linear-gradient(rgba(7,27,52,.08),rgba(7,27,52,.16)),
        url("../assets/images/project-power.jpg");
}

.portfolio-image-three{
    background-image:
        linear-gradient(rgba(7,27,52,.08),rgba(7,27,52,.16)),
        url("../assets/images/project-industrial.jpg");
}

.portfolio-image-four{
    background-image:
        linear-gradient(rgba(7,27,52,.08),rgba(7,27,52,.16)),
        url("../assets/images/project-trading.jpg");
}

.portfolio-image-five{
    background-image:
        linear-gradient(rgba(7,27,52,.08),rgba(7,27,52,.16)),
        url("../assets/images/project-civil.jpg");
}

.portfolio-image-six{
    background-image:
        linear-gradient(rgba(7,27,52,.08),rgba(7,27,52,.16)),
        url("../assets/images/project-electrical.jpg");
}

.portfolio-category{
    position:absolute;
    left:20px;
    bottom:18px;
    z-index:2;
    padding:9px 14px;
    color:#071b34;
    background:var(--gold-light);
    border-radius:7px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.portfolio-content{
    padding:26px;
}

.portfolio-meta{
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:12px;
}

.portfolio-meta span{
    display:flex;
    align-items:center;
    gap:7px;
}

.portfolio-meta i{
    color:var(--gold);
}

.portfolio-content h3{
    margin-top:15px;
    color:var(--navy);
    font-size:22px;
    line-height:1.35;
}

.portfolio-content p{
    margin-top:13px;
    color:var(--muted);
    line-height:1.75;
}

.portfolio-content a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:21px;
    color:var(--gold);
    font-weight:700;
    transition:.3s ease;
}

.portfolio-content a:hover{
    gap:13px;
    color:var(--navy);
}


/* Project categories */

.project-categories-section{
    padding:110px 0;
    color:#fff;
    background:
        linear-gradient(
            rgba(4,19,38,.95),
            rgba(7,27,52,.97)
        ),
        url("../assets/images/hero-bg.jpg") center/cover fixed no-repeat;
}

.project-categories-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.project-category-card{
    min-height:250px;
    padding:32px 28px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:18px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(10px);
    transition:.35s ease;
}

.project-category-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    background:rgba(255,255,255,.11);
}

.project-category-card i{
    color:var(--gold-light);
    font-size:38px;
}

.project-category-card h3{
    margin-top:22px;
    color:#fff;
    font-size:21px;
}

.project-category-card p{
    margin-top:12px;
    color:#d6dde7;
    line-height:1.7;
    font-size:14px;
}


/* Project statistics */

.project-statistics-section{
    padding:65px 0;
    background:#fff;
    border-top:1px solid rgba(7,27,52,.08);
    border-bottom:1px solid rgba(7,27,52,.08);
}

.project-statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.project-statistic{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:22px 25px;
    border-right:1px solid rgba(7,27,52,.12);
}

.project-statistic:last-child{
    border-right:0;
}

.project-statistic > i{
    color:var(--gold);
    font-size:38px;
}

.project-statistic strong,
.project-statistic span{
    color:var(--navy);
    font-family:"Montserrat",sans-serif;
    font-size:38px;
    font-weight:800;
}

.project-statistic p{
    margin-top:4px;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}


/* Projects page animation support */

.portfolio-card,
.project-highlight-box,
.project-category-card,
.project-statistic{
    will-change:transform;
}


/* ==================================================
   PROJECTS PAGE RESPONSIVE
================================================== */

@media (max-width:1100px){

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

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

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

    .project-statistic:nth-child(2){
        border-right:0;
    }

    .project-statistic:nth-child(-n+2){
        border-bottom:1px solid rgba(7,27,52,.12);
    }

}


@media (max-width:900px){

    .projects-intro-layout{
        grid-template-columns:1fr;
    }

    .projects-intro-highlights{
        max-width:760px;
    }

}


@media (max-width:680px){

    .projects-intro-section,
    .project-gallery-section,
    .project-categories-section{
        padding:78px 0;
    }

    .projects-intro-highlights{
        grid-template-columns:1fr;
    }

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

    .project-categories-grid{
        grid-template-columns:1fr;
    }

    .project-statistics-grid{
        grid-template-columns:1fr;
    }

    .project-statistic{
        justify-content:flex-start;
        border-right:0;
        border-bottom:1px solid rgba(7,27,52,.12);
    }

    .project-statistic:last-child{
        border-bottom:0;
    }

    .project-filter-buttons{
        justify-content:flex-start;
    }

    .project-filter{
        width:100%;
    }

}

/* ==================================================
   PROJECT IMAGE HOVER SWAP
================================================== */

.portfolio-image{
    position:relative;
    overflow:hidden;
}

.portfolio-image::before{
    content:"";
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    opacity:0;
    transform:scale(1.05);

    transition:
        opacity .7s ease,
        transform 1.1s ease;

    z-index:0;
}

.portfolio-card:hover .portfolio-image::before{
    opacity:1;
    transform:scale(1);
}

/* Hover images */

.portfolio-image-one::before{
    background-image:url("../assets/images/project-construction-2.jpg");
}

.portfolio-image-two::before{
    background-image:url("../assets/images/project-power-2.jpg");
}

.portfolio-image-three::before{
    background-image:url("../assets/images/project-industrial-2.jpg");
}

.portfolio-image-four::before{
    background-image:url("../assets/images/project-trading-2.jpg");
}

.portfolio-image-five::before{
    background-image:url("../assets/images/project-civil-2.jpg");
}

.portfolio-image-six::before{
    background-image:url("../assets/images/project-electrical-2.jpg");
}

/* Dark overlay image ke upar rahe */

.portfolio-image::after{
    z-index:1;
}

.portfolio-category{
    z-index:2;
}

/* =========================================
   ENGLISH SERVICES + PROJECTS HERO FIX
========================================= */

html[dir="ltr"] .page-hero-content{
    width:100% !important;
    max-width:760px !important;

    margin-left:0 !important;
    margin-right:auto !important;

    text-align:left !important;
    direction:ltr !important;

    padding:80px 0 !important;
}

html[dir="ltr"] .page-hero-content h1,
html[dir="ltr"] .page-hero-content p,
html[dir="ltr"] .page-breadcrumb{
    text-align:left !important;
}

html[dir="ltr"] .page-breadcrumb{
    justify-content:flex-start !important;
}

html[dir="ltr"] .services-page-hero,
html[dir="ltr"] .projects-page-hero{
    background-position:right center !important;
}

/* =========================================
   FINAL ENGLISH PAGE HERO FIX
========================================= */

html:not([dir="rtl"]) .page-hero-content{
    width:min(92%,1320px) !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:80px 0 !important;
    text-align:left !important;
}

html:not([dir="rtl"]) .page-hero-content .section-label,
html:not([dir="rtl"]) .page-hero-content h1,
html:not([dir="rtl"]) .page-hero-content > p,
html:not([dir="rtl"]) .page-hero-content .page-breadcrumb{
    width:100% !important;
    max-width:650px !important;
    margin-right:auto !important;
    text-align:left !important;
}

html:not([dir="rtl"]) .page-hero-content h1{
    font-size:clamp(46px,5vw,72px) !important;
}

html:not([dir="rtl"]) .page-breadcrumb{
    justify-content:flex-start !important;
}

html:not([dir="rtl"]) .services-page-hero,
html:not([dir="rtl"]) .projects-page-hero{
    background-position:right center !important;
}
/* ==================================================
   CONTACT PAGE
================================================== */

/* Contact hero */

.contact-page-hero{
    background:
        linear-gradient(
            90deg,
            rgba(4,19,38,.97) 0%,
            rgba(7,27,52,.86) 44%,
            rgba(7,27,52,.30) 100%
        ),
        url("../assets/images/hero-bg.jpg") right center/cover no-repeat;
}


/* Main contact section */

.contact-main-section{
    padding:110px 0;
    background:#fff;
}

.contact-main-layout{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:70px;
    align-items:start;
}

.contact-intro-text{
    margin-top:20px;
    color:var(--muted);
    line-height:1.9;
}

.contact-details-list{
    display:grid;
    gap:18px;
    margin-top:34px;
}

.contact-detail-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
    background:linear-gradient(145deg,#fff,#f7f9fc);
    border:1px solid rgba(7,27,52,.07);
    border-radius:16px;
    box-shadow:0 10px 28px rgba(7,27,52,.07);
    transition:.3s ease;
}

.contact-detail-card:hover{
    transform:translateX(6px);
    border-color:rgba(214,169,59,.45);
    box-shadow:0 16px 36px rgba(7,27,52,.12);
}

.contact-detail-icon{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:grid;
    place-items:center;
    color:var(--gold-light);
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border-radius:15px;
    box-shadow:0 10px 22px rgba(7,27,52,.18);
}

.contact-detail-icon i{
    font-size:23px;
}

.contact-detail-card span{
    display:block;
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.contact-detail-card h3{
    margin-top:5px;
    color:var(--navy);
    font-size:17px;
    line-height:1.5;
}

.contact-detail-card h3 a{
    transition:.3s ease;
}

.contact-detail-card h3 a:hover{
    color:var(--gold);
}


/* Business hours */

.contact-business-hours{
    margin-top:28px;
    padding:26px;
    color:#fff;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border:1px solid rgba(214,169,59,.35);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.contact-business-hours h3{
    color:var(--gold-light);
    margin-bottom:18px;
}

.contact-business-hours > div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,.10);
}

.contact-business-hours span{
    color:#d7dee8;
}

.contact-business-hours strong{
    color:#fff;
}


/* Contact form */

.contact-form-wrapper{
    padding:38px;
    background:linear-gradient(145deg,#fff,#f7f9fc);
    border:1px solid rgba(7,27,52,.08);
    border-radius:22px;
    box-shadow:0 18px 46px rgba(7,27,52,.12);
}

.contact-form-heading span{
    color:var(--gold);
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.contact-form-heading h2{
    margin-top:8px;
    color:var(--navy);
    font-family:"Montserrat",sans-serif;
    font-size:36px;
}

.contact-form-heading p{
    margin-top:12px;
    color:var(--muted);
    line-height:1.75;
}

.contact-form{
    margin-top:28px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.form-group-full{
    grid-column:1 / -1;
}

.form-group label{
    color:var(--navy);
    font-size:14px;
    font-weight:700;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:1px solid rgba(7,27,52,.14);
    border-radius:10px;
    background:#fff;
    color:var(--text);
    padding:14px 15px;
    outline:none;
    transition:.3s ease;
}

.form-group textarea{
    resize:vertical;
    min-height:150px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#9aa4b2;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(214,169,59,.12);
}

.contact-submit-button{
    margin-top:24px;
    border:0;
    cursor:pointer;
    gap:10px;
}

.form-status{
    min-height:24px;
    margin-top:14px;
    font-size:14px;
    font-weight:600;
}


/* Contact benefits */

.contact-benefits-section{
    padding:110px 0;
    background:linear-gradient(180deg,#f8fafc,#edf2f7);
}

.contact-benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.contact-benefit-card{
    min-height:245px;
    padding:30px 25px;
    text-align:center;
    background:#fff;
    border:1px solid rgba(7,27,52,.07);
    border-radius:18px;
    box-shadow:0 12px 34px rgba(7,27,52,.08);
    transition:.35s ease;
}

.contact-benefit-card:hover{
    transform:translateY(-8px);
    border-color:rgba(214,169,59,.45);
    box-shadow:0 22px 44px rgba(7,27,52,.14);
}

.contact-benefit-card i{
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    margin:0 auto;
    color:var(--gold-light);
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    border-radius:18px;
    font-size:28px;
    box-shadow:0 10px 24px rgba(7,27,52,.18);
}

.contact-benefit-card h3{
    margin-top:20px;
    color:var(--navy);
    font-size:20px;
}

.contact-benefit-card p{
    margin-top:11px;
    color:var(--muted);
    line-height:1.7;
    font-size:14px;
}


/* Map section */

.contact-map-section{
    padding:110px 0;
    background:#fff;
}

.contact-map-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:38px;
}

.outline-map-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 24px;
    color:var(--navy);
    border:2px solid var(--gold);
    border-radius:8px;
    font-weight:700;
    transition:.3s ease;
}

.outline-map-button:hover{
    color:#071b34;
    background:var(--gold);
    transform:translateY(-3px);
}

.contact-map-placeholder{
    min-height:430px;
    display:grid;
    place-items:center;
    border-radius:22px;
    overflow:hidden;
    background:
        linear-gradient(rgba(4,19,38,.85),rgba(7,27,52,.88)),
        url("../assets/images/hero-bg.jpg") center/cover no-repeat;
    box-shadow:var(--shadow);
}

.map-placeholder-content{
    max-width:620px;
    padding:40px;
    text-align:center;
    color:#fff;
}

.map-placeholder-content i{
    color:var(--gold-light);
    font-size:58px;
}

.map-placeholder-content h3{
    margin-top:18px;
    font-size:28px;
}

.map-placeholder-content p{
    margin-top:10px;
    color:#d9e0ea;
    font-size:17px;
}

.map-placeholder-content span{
    display:block;
    margin-top:12px;
    color:#aeb9c7;
    font-size:13px;
}


/* ==================================================
   CONTACT PAGE RESPONSIVE
================================================== */

@media (max-width:1100px){

    .contact-main-layout{
        grid-template-columns:1fr;
    }

    .contact-information{
        max-width:850px;
    }

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

}


@media (max-width:680px){

    .contact-main-section,
    .contact-benefits-section,
    .contact-map-section{
        padding:78px 0;
    }

    .contact-form-wrapper{
        padding:26px 20px;
    }

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

    .form-group-full{
        grid-column:auto;
    }

    .contact-benefits-grid{
        grid-template-columns:1fr;
    }

    .contact-map-heading{
        flex-direction:column;
        align-items:flex-start;
    }

    .outline-map-button{
        width:100%;
    }

    .contact-map-placeholder{
        min-height:360px;
    }

    .contact-business-hours > div{
        flex-direction:column;
        gap:6px;
    }

}

/* ==================================================
   PREMIUM OFFICE CARD
================================================== */

.office-card{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:45px;
    align-items:center;

    margin-top:35px;
    padding:48px;

    color:#fff;
    background:
        linear-gradient(
            135deg,
            rgba(4,19,38,.98),
            rgba(13,44,82,.96)
        );

    border:1px solid rgba(214,169,59,.32);
    border-radius:24px;

    box-shadow:0 20px 55px rgba(7,27,52,.18);
    overflow:hidden;
    position:relative;
}

.office-card::before{
    content:"MWT";
    position:absolute;
    right:4%;
    bottom:-35px;

    color:rgba(255,255,255,.035);
    font-family:"Montserrat",sans-serif;
    font-size:190px;
    font-weight:800;
    line-height:1;

    pointer-events:none;
}

.office-left,
.office-right{
    position:relative;
    z-index:2;
}

.office-label{
    display:inline-block;
    margin-bottom:12px;

    color:var(--gold-light);
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
}

.office-left > h3{
    margin-bottom:28px;
    color:#fff;
    font-family:"Montserrat",sans-serif;
    font-size:32px;
    line-height:1.3;
}

.office-item{
    margin-bottom:18px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.09);
}

.office-item:last-of-type{
    border-bottom:0;
}

.office-item strong{
    display:block;
    margin-bottom:5px;
    color:var(--gold-light);
    font-size:14px;
}

.office-item p{
    color:#dbe4ee;
    line-height:1.7;
}

.office-buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:28px;
}

.office-buttons .outline-map-button{
    color:#fff;
    border-color:var(--gold);
}

.office-buttons .outline-map-button:hover{
    color:var(--navy);
    background:var(--gold);
}

.office-right{
    min-height:330px;

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

    text-align:center;

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

.office-circle{
    width:135px;
    height:135px;

    display:grid;
    place-items:center;

    margin-bottom:24px;

    color:var(--navy);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    border-radius:50%;
    font-size:58px;

    box-shadow:
        0 15px 35px rgba(214,169,59,.28),
        inset 0 0 0 8px rgba(255,255,255,.16);
}

.office-right h2{
    color:#fff;
    font-size:38px;
    line-height:1.2;
}

.office-right p{
    margin-top:8px;
    color:#dbe4ee;
    font-size:16px;
}


/* Tablet */

@media (max-width:900px){

    .office-card{
        grid-template-columns:1fr;
        padding:38px 28px;
    }

    .office-right{
        min-height:250px;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.10);
        padding-top:35px;
    }

}


/* Mobile */

@media (max-width:600px){

    .office-card{
        padding:28px 20px;
    }

    .office-left > h3{
        font-size:25px;
    }

    .office-buttons{
        flex-direction:column;
    }

    .office-buttons a{
        width:100%;
    }

    .office-circle{
        width:110px;
        height:110px;
        font-size:46px;
    }

    .office-right h2{
        font-size:30px;
    }

}

/* ==================================================
   ABOUT PAGE
================================================== */

/* About page hero */

.about-page-hero{
    background:
        linear-gradient(
            90deg,
            rgba(4,19,38,.97) 0%,
            rgba(7,27,52,.86) 44%,
            rgba(7,27,52,.30) 100%
        ),
        url("../assets/images/hero-bg.jpg") right center/cover no-repeat;
}


/* ==================================================
   COMPANY STORY
================================================== */

.about-company-section{
    padding:110px 0;
    background:#fff;
}

.about-company-layout{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:75px;
    align-items:center;
}

.about-company-image{
    position:relative;
    min-height:540px;
    overflow:hidden;
    border-radius:24px;
    box-shadow:var(--shadow);
}

.about-company-image img{
    width:100%;
    height:540px;
    object-fit:cover;
    object-position:center;
}

.about-company-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(4,19,38,.30),
            transparent 50%
        );
    pointer-events:none;
}

.about-years-badge{
    position:absolute;
    right:-18px;
    bottom:30px;
    z-index:3;

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

    min-width:210px;
    padding:20px 24px;

    color:#fff;
    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-light)
        );

    border:2px solid var(--gold);
    border-radius:16px;
    box-shadow:var(--shadow);
}

.about-years-badge strong{
    color:var(--gold-light);
    font-family:"Montserrat",sans-serif;
    font-size:40px;
    line-height:1;
}

.about-years-badge span{
    font-size:12px;
    line-height:1.45;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.about-company-content p{
    margin-top:18px;
    color:var(--muted);
    line-height:1.9;
}

.about-company-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 22px;
    margin:30px 0 34px;
}

.about-company-features > div{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--navy);
    font-weight:600;
}

.about-company-features span{
    width:24px;
    height:24px;
    flex:0 0 24px;

    display:grid;
    place-items:center;

    color:var(--navy);
    background:var(--gold);
    border-radius:50%;
    font-size:13px;
    font-weight:900;
}


/* ==================================================
   MISSION AND VISION
================================================== */

.mission-vision-section{
    padding:110px 0;
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #edf2f7
        );
}

.mission-vision-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.mission-vision-card{
    position:relative;
    min-height:390px;
    padding:38px 34px;

    overflow:hidden;
    background:#fff;
    border:1px solid rgba(7,27,52,.07);
    border-radius:20px;
    box-shadow:0 14px 38px rgba(7,27,52,.09);
    transition:.35s ease;
}

.mission-vision-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:5px;
    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--gold-light)
        );
}

.mission-vision-card:hover{
    transform:translateY(-9px);
    box-shadow:0 24px 52px rgba(7,27,52,.16);
}

.mission-vision-icon{
    width:78px;
    height:78px;

    display:grid;
    place-items:center;

    margin-bottom:25px;

    color:var(--gold-light);
    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-light)
        );

    border-radius:18px;
    box-shadow:0 12px 28px rgba(7,27,52,.20);
}

.mission-vision-icon i{
    font-size:34px;
}

.mission-vision-card > span{
    color:var(--gold);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.4px;
}

.mission-vision-card h3{
    margin-top:10px;
    color:var(--navy);
    font-size:27px;
    line-height:1.35;
}

.mission-vision-card p{
    margin-top:18px;
    color:var(--muted);
    line-height:1.85;
}


/* ==================================================
   CORE VALUES
================================================== */

.core-values-section{
    padding:110px 0;
    color:#fff;
    background:
        linear-gradient(
            rgba(4,19,38,.95),
            rgba(7,27,52,.97)
        ),
        url("../assets/images/hero-bg.jpg") center/cover fixed no-repeat;
}

.core-values-section .section-heading-box p{
    color:#d4dbe5;
}

.core-values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.core-value-card{
    min-height:275px;
    padding:32px 25px;
    text-align:center;

    border:1px solid rgba(255,255,255,.13);
    border-radius:18px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(10px);
    transition:.35s ease;
}

.core-value-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    background:rgba(255,255,255,.11);
}

.core-value-card i{
    width:74px;
    height:74px;

    display:grid;
    place-items:center;

    margin:0 auto;

    color:var(--navy);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    border-radius:18px;
    font-size:30px;
    box-shadow:0 12px 28px rgba(214,169,59,.24);
}

.core-value-card h3{
    margin-top:22px;
    color:var(--gold-light);
    font-size:21px;
}

.core-value-card p{
    margin-top:12px;
    color:#d6dde7;
    line-height:1.72;
    font-size:14px;
}


/* ==================================================
   COMPANY JOURNEY
================================================== */

.company-journey-section{
    padding:110px 0;
    background:#fff;
}

.company-timeline{
    position:relative;
    max-width:1000px;
    margin:0 auto;
    display:grid;
    gap:30px;
}

.company-timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:3px;
    background:
        linear-gradient(
            to bottom,
            var(--gold),
            var(--gold-light)
        );
    transform:translateX(-50%);
}

.timeline-item{
    position:relative;
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    align-items:center;
    min-height:145px;
}

.timeline-item:nth-child(odd) .timeline-content{
    grid-column:1;
    text-align:right;
}

.timeline-item:nth-child(odd) .timeline-year{
    grid-column:2;
}

.timeline-item:nth-child(even) .timeline-content{
    grid-column:3;
    text-align:left;
}

.timeline-item:nth-child(even) .timeline-year{
    grid-column:2;
}

.timeline-year{
    width:92px;
    height:92px;
    z-index:2;

    display:grid;
    place-items:center;
    justify-self:center;

    color:var(--navy);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    border:7px solid #fff;
    border-radius:50%;
    box-shadow:0 10px 28px rgba(7,27,52,.16);

    font-family:"Montserrat",sans-serif;
    font-size:21px;
    font-weight:800;
}

.timeline-content{
    padding:25px 28px;
    background:linear-gradient(145deg,#fff,#f7f9fc);
    border:1px solid rgba(7,27,52,.07);
    border-radius:17px;
    box-shadow:0 12px 32px rgba(7,27,52,.08);
    transition:.35s ease;
}

.timeline-content:hover{
    transform:translateY(-5px);
    border-color:rgba(214,169,59,.45);
    box-shadow:0 20px 42px rgba(7,27,52,.13);
}

.timeline-content h3{
    color:var(--navy);
    font-size:21px;
}

.timeline-content p{
    margin-top:10px;
    color:var(--muted);
    line-height:1.75;
    font-size:14px;
}


/* ==================================================
   WHY CHOOSE MWT
================================================== */

.about-why-section{
    padding:110px 0;
    color:#fff;
    background:
        linear-gradient(
            rgba(4,19,38,.95),
            rgba(7,27,52,.97)
        ),
        url("../assets/images/hero-bg.jpg") center/cover fixed no-repeat;
}

.about-why-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-why-content > p{
    margin-top:20px;
    color:#d6dde7;
    line-height:1.85;
}

.about-why-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 20px;
    margin-top:32px;
}

.about-why-list > div{
    display:flex;
    align-items:flex-start;
    gap:11px;
    color:#f1f5f9;
    line-height:1.6;
}

.about-why-list span{
    width:28px;
    height:28px;
    flex:0 0 28px;

    display:grid;
    place-items:center;

    color:var(--navy);
    background:var(--gold);
    border-radius:50%;
    font-weight:900;
}

.about-why-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.about-why-card{
    min-height:225px;
    padding:28px 24px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:17px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(10px);
    transition:.35s ease;
}

.about-why-card:hover{
    transform:translateY(-7px);
    border-color:var(--gold);
    background:rgba(255,255,255,.11);
}

.about-why-card i{
    color:var(--gold-light);
    font-size:36px;
}

.about-why-card strong{
    display:block;
    margin-top:18px;
    color:#fff;
    font-size:19px;
}

.about-why-card p{
    margin-top:10px;
    color:#d4dbe5;
    line-height:1.68;
    font-size:14px;
}


/* ==================================================
   ABOUT STATISTICS
================================================== */

.about-statistics-section{
    padding:62px 0;
    background:#fff;
    border-top:1px solid rgba(7,27,52,.08);
    border-bottom:1px solid rgba(7,27,52,.08);
}

.about-statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.about-statistic{
    text-align:center;
    padding:22px 28px;
    border-right:1px solid rgba(7,27,52,.12);
}

.about-statistic:last-child{
    border-right:0;
}

.about-statistic strong,
.about-statistic > span{
    color:var(--gold);
    font-family:"Montserrat",sans-serif;
    font-size:48px;
    font-weight:800;
}

.about-statistic p{
    margin-top:8px;
    color:var(--navy);
    font-weight:600;
}


/* ==================================================
   ABOUT PAGE RESPONSIVE
================================================== */

@media (max-width:1100px){

    .about-company-layout{
        grid-template-columns:1fr;
    }

    .about-company-image{
        max-width:800px;
        margin:auto;
    }

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

    .about-why-layout{
        grid-template-columns:1fr;
    }

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

    .about-statistic:nth-child(2){
        border-right:0;
    }

    .about-statistic:nth-child(-n+2){
        border-bottom:1px solid rgba(7,27,52,.12);
    }

}


@media (max-width:900px){

    .mission-vision-grid{
        grid-template-columns:1fr;
    }

    .company-timeline::before{
        left:46px;
        transform:none;
    }

    .timeline-item{
        grid-template-columns:92px 1fr;
        gap:20px;
    }

    .timeline-item:nth-child(odd) .timeline-year,
    .timeline-item:nth-child(even) .timeline-year{
        grid-column:1;
        grid-row:1;
    }

    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content{
        grid-column:2;
        grid-row:1;
        text-align:left;
    }

}


@media (max-width:680px){

    .about-company-section,
    .mission-vision-section,
    .core-values-section,
    .company-journey-section,
    .about-why-section{
        padding:78px 0;
    }

    .about-company-image{
        min-height:390px;
    }

    .about-company-image img{
        height:390px;
    }

    .about-years-badge{
        right:12px;
        bottom:14px;
        min-width:175px;
        padding:15px 17px;
    }

    .about-years-badge strong{
        font-size:32px;
    }

    .about-company-features{
        grid-template-columns:1fr;
    }

    .core-values-grid{
        grid-template-columns:1fr;
    }

    .about-why-list{
        grid-template-columns:1fr;
    }

    .about-why-cards{
        grid-template-columns:1fr;
    }

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

    .about-statistic{
        border-right:0;
        border-bottom:1px solid rgba(7,27,52,.12);
    }

    .about-statistic:last-child{
        border-bottom:0;
    }

    .company-timeline::before{
        left:38px;
    }

    .timeline-item{
        grid-template-columns:76px 1fr;
        gap:14px;
    }

    .timeline-year{
        width:76px;
        height:76px;
        border-width:5px;
        font-size:17px;
    }

    .timeline-content{
        padding:21px 18px;
    }

}

/* ==================================================
   MWT PREMIUM INTRO / SPLASH SCREEN
================================================== */

.mwt-intro{
    position:fixed;
    inset:0;
    z-index:999999;

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

    background:
        radial-gradient(
            circle at center,
            #12365d 0%,
            #071b34 48%,
            #03101f 100%
        );

    overflow:hidden;
    opacity:1;
    visibility:visible;
    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.mwt-intro::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;

    border:1px solid rgba(214,169,59,.12);
    border-radius:50%;

    animation:mwtIntroRing 2.4s ease-out infinite;
}

.mwt-intro-content{
    position:relative;
    z-index:2;

    width:90%;
    text-align:center;

    opacity:0;
    transform:translateY(25px);

    animation:mwtIntroContent 1s ease .2s forwards;
}

.mwt-intro-mark{
    font-family:"Montserrat",sans-serif;
    font-size:clamp(65px,10vw,125px);
    line-height:1;
    font-weight:800;
    letter-spacing:8px;

    color:#d6a93b;

    text-shadow:
        0 4px 20px rgba(214,169,59,.22),
        0 15px 45px rgba(0,0,0,.35);
}

.mwt-intro-line{
    width:0;
    height:2px;

    margin:27px auto 25px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d6a93b,
            #f1d27c,
            #d6a93b,
            transparent
        );

    animation:mwtIntroLine 1.2s ease .45s forwards;
}

.mwt-intro-arabic{
    margin:0;

    font-family:"Cairo",sans-serif;
    font-size:clamp(25px,4vw,43px);
    font-weight:700;

    color:#ffffff;

    opacity:0;
    transform:translateY(12px);

    animation:mwtIntroText .8s ease .65s forwards;
}

.mwt-intro-english{
    margin:8px 0 0;

    font-family:"Montserrat",sans-serif;
    font-size:clamp(15px,2.2vw,25px);
    font-weight:600;
    letter-spacing:2.5px;

    color:#f0cf74;

    opacity:0;
    transform:translateY(12px);

    animation:mwtIntroText .8s ease .8s forwards;
}

.mwt-intro-services{
    margin-top:18px;

    color:rgba(255,255,255,.62);
    font-size:clamp(10px,1.3vw,13px);
    letter-spacing:1.4px;

    opacity:0;

    animation:mwtIntroText .8s ease 1s forwards;
}


/* INTRO DISAPPEAR */

.mwt-intro.mwt-intro-hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


/* ANIMATIONS */

@keyframes mwtIntroContent{

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

}

@keyframes mwtIntroLine{

    to{
        width:min(520px,75%);
    }

}

@keyframes mwtIntroText{

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

}

@keyframes mwtIntroRing{

    0%{
        transform:scale(.7);
        opacity:0;
    }

    35%{
        opacity:1;
    }

    100%{
        transform:scale(1.35);
        opacity:0;
    }

}


/* MOBILE */

@media(max-width:600px){

    .mwt-intro-mark{
        letter-spacing:4px;
    }

    .mwt-intro-english{
        letter-spacing:1.3px;
    }

    .mwt-intro-services{
        max-width:320px;
        margin:16px auto 0;
        line-height:1.8;
    }

    .mwt-intro::before{
        width:300px;
        height:300px;
    }

}

/* MWT INTRO REAL LOGO */

.mwt-intro-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
}

.mwt-intro-logo img{
    width:220px;
    max-width:65vw;
    height:auto;
    object-fit:contain;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.35))
        drop-shadow(0 0 16px rgba(214,169,59,.20));

    opacity:0;
    transform:scale(.82);

    animation:mwtRealLogo 1.2s ease .15s forwards;
}

@keyframes mwtRealLogo{
    to{
        opacity:1;
        transform:scale(1);
    }
}

@media(max-width:600px){

    .mwt-intro-logo img{
        width:170px;
    }

}

/* ==================================================
   CLIENT LOGO SLIDER
================================================== */

.clients-section{
    padding:100px 0 90px;
    overflow:hidden;
    background:#fff;
}

.clients-slider{
    width:100%;
    margin-top:45px;
    overflow:hidden;
    position:relative;
}

.clients-slider::before,
.clients-slider::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:120px;
    z-index:3;
    pointer-events:none;
}

.clients-slider::before{
    left:0;
    background:linear-gradient(to right,#fff,transparent);
}

.clients-slider::after{
    right:0;
    background:linear-gradient(to left,#fff,transparent);
}

.clients-track{
    display:flex;
    align-items:center;
    gap:28px;
    width:max-content;

    animation:clientsMove 38s linear infinite;
}

.clients-slider:hover .clients-track{
    animation-play-state:paused;
}

.client-logo{
    width:220px;
    height:125px;
    flex:0 0 220px;

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

    padding:22px;

    background:#fff;

    border:1px solid rgba(7,27,52,.08);
    border-radius:16px;

    box-shadow:0 8px 24px rgba(7,27,52,.06);

    transition:.35s ease;
}

.client-logo:hover{
    transform:translateY(-6px) scale(1.03);

    border-color:rgba(214,169,59,.45);

    box-shadow:0 16px 34px rgba(7,27,52,.12);
}

.client-logo img{
    max-width:100%;
    max-height:78px;

    object-fit:contain;

    filter:grayscale(100%);
    opacity:.78;

    transition:.35s ease;
}

.client-logo:hover img{
    filter:grayscale(0%);
    opacity:1;
}

@keyframes clientsMove{

    from{
        transform:translateX(0);
    }

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

}

@media(max-width:700px){

    .clients-section{
        padding:75px 0;
    }

    .client-logo{
        width:170px;
        height:105px;
        flex-basis:170px;
        padding:18px;
    }

    .client-logo img{
        max-height:65px;
    }

    .clients-track{
        gap:18px;
        animation-duration:30s;
    }

    .clients-slider::before,
    .clients-slider::after{
        width:55px;
    }

}

/* ==================================================
   OUR TEAM PAGE
================================================== */

.team-page-hero{
    background:
        linear-gradient(
            90deg,
            rgba(4,19,38,.97) 0%,
            rgba(7,27,52,.86) 45%,
            rgba(7,27,52,.35) 100%
        ),
        url("../assets/images/hero-bg.jpg") right center/cover no-repeat;
}


/* INTRO */

.team-intro-section{
    padding:95px 0 35px;
    background:#fff;
}


/* TEAM SECTION */

.team-section{
    padding:45px 0 110px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* TEAM CARD */

.team-card{
    position:relative;
    overflow:hidden;

    background:#fff;

    border:1px solid rgba(7,27,52,.08);
    border-radius:20px;

    box-shadow:
        0 12px 32px rgba(7,27,52,.08);

    transition:.35s ease;
}

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

    border-color:rgba(214,169,59,.45);

    box-shadow:
        0 22px 48px rgba(7,27,52,.15);
}


/* PHOTO PLACEHOLDER */

.team-photo-placeholder{
    height:285px;

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

    color:#d6a93b;

    background:
        radial-gradient(
            circle at center,
            #17375d 0%,
            #0b2748 55%,
            #06172c 100%
        );

    font-family:"Montserrat",sans-serif;

    font-size:68px;
    font-weight:800;
    letter-spacing:5px;

    text-shadow:
        0 8px 25px rgba(0,0,0,.28);

    position:relative;
}

.team-photo-placeholder::before{
    content:"";
    position:absolute;

    width:170px;
    height:170px;

    border:1px solid rgba(214,169,59,.25);
    border-radius:50%;
}

.team-photo-placeholder::after{
    content:"";

    position:absolute;

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

    height:80px;

    background:
        linear-gradient(
            to top,
            rgba(4,19,38,.55),
            transparent
        );
}


/* CARD CONTENT */

.team-card-content{
    padding:26px;
}

.team-position{
    display:block;

    color:#c99528;

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

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

.team-card-content h3{
    margin-top:9px;

    color:#071b34;

    font-family:"Montserrat",sans-serif;

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

.team-card-content p{
    margin-top:12px;

    color:#687386;

    line-height:1.75;

    font-size:14px;
}

.team-profile-button{
    margin-top:22px;

    min-height:44px;

    padding:10px 20px;

    border:0;
    border-radius:7px;

    color:#071b34;

    background:
        linear-gradient(
            135deg,
            #d6a93b,
            #efd176
        );

    font-weight:800;

    cursor:pointer;

    transition:.3s ease;
}

.team-profile-button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 10px 26px rgba(214,169,59,.26);
}


/* ==================================================
   TEAM MODAL
================================================== */

.team-modal{
    position:fixed;
    inset:0;

    z-index:999999;

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

    padding:25px;

    opacity:0;
    visibility:hidden;

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

.team-modal.team-modal-open{
    opacity:1;
    visibility:visible;
}

.team-modal-overlay{
    position:absolute;
    inset:0;

    background:
        rgba(2,12,24,.82);

    backdrop-filter:blur(6px);
}


/* MODAL BOX */

.team-modal-box{
    position:relative;
    z-index:2;

    width:min(820px,100%);
    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:22px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.38);

    transform:
        translateY(25px)
        scale(.97);

    transition:.35s ease;
}

.team-modal-open .team-modal-box{
    transform:
        translateY(0)
        scale(1);
}


/* CLOSE */

.team-modal-close{
    position:absolute;

    right:18px;
    top:14px;

    z-index:4;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;

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

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:.3s ease;
}

.team-modal-close:hover{
    color:#071b34;
    background:#d6a93b;
}


/* MODAL HEADER */

.team-modal-header{
    display:grid;
    grid-template-columns:180px 1fr;

    gap:30px;
    align-items:center;

    padding:38px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #06172c,
            #0d315b
        );
}

.team-modal-photo{
    width:160px;
    height:160px;

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

    border-radius:20px;

    color:#d6a93b;

    background:
        radial-gradient(
            circle,
            #173d69,
            #081d36
        );

    border:
        1px solid rgba(214,169,59,.35);

    font-family:"Montserrat",sans-serif;

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

    letter-spacing:4px;
}

.team-modal-position{
    color:#e1b74e;

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

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

.team-modal-header h2{
    margin-top:8px;

    font-family:"Montserrat",sans-serif;

    font-size:34px;
    line-height:1.2;
}

.team-modal-header p{
    margin-top:9px;

    color:#d4dce7;
}


/* MODAL BODY */

.team-modal-body{
    padding:36px 38px;
}

.team-profile-section + .team-profile-section{
    margin-top:30px;
    padding-top:28px;

    border-top:
        1px solid rgba(7,27,52,.09);
}

.team-profile-section h3{
    color:#071b34;

    font-size:19px;
}

.team-profile-section p{
    margin-top:12px;

    color:#687386;

    line-height:1.85;
}


/* SKILLS */

.team-profile-section ul{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px 20px;

    margin-top:16px;

    padding:0;

    list-style:none;
}

.team-profile-section li{
    position:relative;

    padding-left:27px;

    color:#334155;

    line-height:1.6;
}

.team-profile-section li::before{
    content:"✓";

    position:absolute;

    left:0;
    top:0;

    width:20px;
    height:20px;

    display:grid;
    place-items:center;

    color:#071b34;

    background:#d6a93b;

    border-radius:50%;

    font-size:11px;
    font-weight:900;
}


/* CONTACT */

.team-contact-details{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-top:16px;
}

.team-contact-details a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:10px 18px;

    color:#071b34;

    background:#f3f6fa;

    border:
        1px solid rgba(7,27,52,.10);

    border-radius:7px;

    font-weight:700;

    transition:.3s ease;
}

.team-contact-details a:hover{
    border-color:#d6a93b;

    color:#b8841d;

    transform:translateY(-2px);
}


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

@media(max-width:1050px){

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

}


@media(max-width:700px){

    .team-intro-section{
        padding-top:75px;
    }

    .team-section{
        padding-bottom:80px;
    }

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

    .team-photo-placeholder{
        height:245px;
        font-size:54px;
    }

    .team-modal{
        padding:12px;
    }

    .team-modal-header{
        grid-template-columns:1fr;

        text-align:center;

        padding:55px 25px 30px;
    }

    .team-modal-photo{
        width:135px;
        height:135px;

        margin:auto;

        font-size:38px;
    }

    .team-modal-header h2{
        font-size:27px;
    }

    .team-modal-body{
        padding:27px 22px;
    }

    .team-profile-section ul{
        grid-template-columns:1fr;
    }

    .team-contact-details{
        flex-direction:column;
    }

    .team-contact-details a{
        width:100%;
    }

}

/* TEAM MODAL CLOSE BUTTON POSITION FIX */

.team-modal-close{
    right:-18px;
    top:-18px;

    width:46px;
    height:46px;

    background:#d6a93b;
    color:#071b34;

    border:4px solid #ffffff;

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

.team-modal-close:hover{
    background:#ffffff;
    color:#071b34;
    border-color:#d6a93b;
}

@media(max-width:700px){

    .team-modal-close{
        right:10px;
        top:10px;

        width:40px;
        height:40px;

        border-width:2px;
    }

}

/* ==================================================
   INDIVIDUAL TEAM MEMBER PROFILE PAGE
================================================== */

.member-profile-hero{
    padding:95px 0;
    background:
        linear-gradient(
            135deg,
            #06172c 0%,
            #0b2c52 58%,
            #123a67 100%
        );
    color:#fff;
}

.member-profile-grid{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:65px;
    align-items:center;
}


/* MEMBER IMAGE */

.member-profile-image{
    position:relative;
}

.member-image-placeholder{
    width:100%;
    height:470px;

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

    color:#d6a93b;

    background:
        radial-gradient(
            circle at center,
            #173d69 0%,
            #0c294b 55%,
            #06172c 100%
        );

    border:1px solid rgba(214,169,59,.30);
    border-radius:24px;

    font-family:"Montserrat",sans-serif;
    font-size:76px;
    font-weight:800;
    letter-spacing:6px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.28);

    overflow:hidden;
    position:relative;
}

.member-image-placeholder::before{
    content:"";
    position:absolute;

    width:220px;
    height:220px;

    border:1px solid rgba(214,169,59,.20);
    border-radius:50%;
}

.member-image-placeholder::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;

    height:110px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.30),
            transparent
        );
}


/* ACTUAL PHOTO LATER */

.member-profile-image img{
    width:100%;
    height:470px;

    object-fit:cover;
    object-position:center top;

    border-radius:24px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.28);
}


/* INTRO */

.member-profile-intro h1{
    margin-top:10px;

    font-family:"Montserrat",sans-serif;
    font-size:clamp(42px,5vw,64px);
    line-height:1.05;

    color:#fff;
}

.member-profile-intro h2{
    margin-top:12px;

    color:#d6a93b;

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

.member-experience{
    display:inline-flex;

    margin-top:22px;
    padding:10px 18px;

    color:#f4d780;

    background:rgba(214,169,59,.10);

    border:1px solid rgba(214,169,59,.30);
    border-radius:50px;

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

.member-profile-intro p{
    max-width:760px;

    margin-top:24px;

    color:#d5dde8;

    line-height:1.9;
    font-size:16px;
}

.member-profile-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-top:32px;
}


/* SECONDARY BUTTON */

.secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:50px;
    padding:13px 25px;

    border:1px solid rgba(255,255,255,.28);
    border-radius:8px;

    color:#fff;

    font-weight:700;

    transition:.3s ease;
}

.secondary-button:hover{
    color:#071b34;
    background:#fff;

    transform:translateY(-3px);
}


/* ==================================================
   DETAILS SECTION
================================================== */

.member-details-section{
    padding:100px 0 110px;
    background:#f7f9fc;
}

.member-details-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:45px;
    align-items:start;
}

.member-main-details{
    display:grid;
    gap:28px;
}


/* DETAIL BOX */

.member-detail-box{
    padding:34px;

    background:#fff;

    border:1px solid rgba(7,27,52,.07);
    border-radius:18px;

    box-shadow:
        0 12px 32px rgba(7,27,52,.07);
}

.member-detail-box h2{
    margin-top:8px;

    color:#071b34;

    font-family:"Montserrat",sans-serif;
    font-size:28px;
}

.member-detail-box p{
    margin-top:17px;

    color:#667085;

    line-height:1.9;
}


/* CHECK LIST */

.member-check-list{
    margin-top:22px;
    padding:0;

    list-style:none;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 24px;
}

.member-check-list li{
    position:relative;

    padding-left:31px;

    color:#334155;
    line-height:1.6;
}

.member-check-list li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:1px;

    width:21px;
    height:21px;

    display:grid;
    place-items:center;

    color:#071b34;
    background:#d6a93b;

    border-radius:50%;

    font-size:11px;
    font-weight:900;
}


/* SKILLS */

.member-skill-grid{
    display:flex;
    flex-wrap:wrap;
    gap:11px;

    margin-top:22px;
}

.member-skill-grid span{
    padding:10px 15px;

    color:#071b34;

    background:#f1f4f8;

    border:1px solid rgba(7,27,52,.08);
    border-radius:50px;

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

    transition:.3s ease;
}

.member-skill-grid span:hover{
    color:#071b34;
    background:#d6a93b;

    border-color:#d6a93b;

    transform:translateY(-2px);
}


/* ==================================================
   PROFILE SIDEBAR
================================================== */

.member-profile-sidebar{
    position:sticky;
    top:110px;

    display:grid;
    gap:22px;
}

.member-sidebar-box{
    padding:27px;

    background:#071b34;
    color:#fff;

    border-radius:18px;

    box-shadow:
        0 14px 34px rgba(7,27,52,.15);
}

.member-sidebar-box h3{
    margin-bottom:18px;

    color:#d6a93b;
    font-size:19px;
}

.member-info-row{
    display:grid;
    gap:5px;

    padding:14px 0;

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

.member-info-row span{
    color:#99a8ba;

    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.member-info-row strong{
    color:#fff;

    line-height:1.5;
}

.member-contact-link{
    display:block;

    padding:13px 0;

    color:#d8e0ea;

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

    transition:.3s ease;
}

.member-contact-link:hover{
    color:#d6a93b;
}


/* BACK BUTTON */

.member-back-button{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:50px;

    padding:12px 18px;

    color:#071b34;

    background:#d6a93b;

    border-radius:8px;

    font-weight:800;

    box-shadow:
        0 10px 25px rgba(214,169,59,.20);

    transition:.3s ease;
}

.member-back-button:hover{
    transform:translateY(-3px);

    background:#ebca73;
}


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

@media(max-width:1000px){

    .member-profile-grid{
        grid-template-columns:320px 1fr;
        gap:40px;
    }

    .member-details-grid{
        grid-template-columns:1fr;
    }

    .member-profile-sidebar{
        position:static;

        grid-template-columns:1fr 1fr;
    }

    .member-back-button{
        grid-column:1 / -1;
    }

}


@media(max-width:760px){

    .member-profile-hero{
        padding:75px 0;
    }

    .member-profile-grid{
        grid-template-columns:1fr;
    }

    .member-profile-image{
        max-width:430px;
        width:100%;

        margin:auto;
    }

    .member-image-placeholder,
    .member-profile-image img{
        height:430px;
    }

    .member-profile-intro{
        text-align:center;
    }

    .member-profile-intro p{
        margin-left:auto;
        margin-right:auto;
    }

    .member-profile-actions{
        justify-content:center;
    }

    .member-details-section{
        padding:75px 0;
    }

    .member-check-list{
        grid-template-columns:1fr;
    }

    .member-profile-sidebar{
        grid-template-columns:1fr;
    }

    .member-back-button{
        grid-column:auto;
    }

}


@media(max-width:500px){

    .member-image-placeholder,
    .member-profile-image img{
        height:360px;
    }

    .member-image-placeholder{
        font-size:58px;
    }

    .member-detail-box{
        padding:25px 20px;
    }

    .member-detail-box h2{
        font-size:24px;
    }

    .member-profile-actions{
        flex-direction:column;
    }

    .member-profile-actions a{
        width:100%;
    }

}

/* =========================================
   TEAM CARD - VIEW PROFILE BUTTON ALIGNMENT
========================================= */

.team-card {
    display: flex;
    flex-direction: column;
}

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

.team-card-content p {
    flex-grow: 1;
}

.team-profile-button {
    margin-top: auto;
    align-self: flex-start;
}

/* =========================================
   TEAM CARD PHOTOS
========================================= */

.team-photo-placeholder {
    overflow: hidden;
}

.team-photo-placeholder img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

/* REMOVE OLD MWT PLACEHOLDER CIRCLE/BORDER */

.team-photo-placeholder {
    border: none !important;
}

.team-photo-placeholder::before,
.team-photo-placeholder::after {
    display: none !important;
    content: none !important;
}

.team-photo-placeholder img {
    border: none !important;
    outline: none !important;
}