/* ===================================
   SRISHTI METALS PVT. LTD.
   Main Stylesheet
=================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --text: #0f172a;
    --muted: #5b6475;
    --brand: #f59e0b;
    --brand-deep: #d97706;
    --brand-soft: #fff4dc;
    --line: rgba(15, 23, 42, 0.08);
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    --radius: 20px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-size:18;
    font-family:'Poppins', sans-serif;
    
    
}  

html{
    scroll-behavior:smooth;
}

.skip-link{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.skip-link:focus{
    left:10px;
    top:10px;
    width:auto;
    height:auto;
    background:var(--brand);
    color:#fff;
    padding:8px 12px;
    border-radius:4px;
    z-index:2000;
}

body{
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 28%),
        linear-gradient(180deg, #536576 0%, #536576 100%);
    color:var(--text);
    line-height:1.7;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
    ;
} 

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(2, 11, 26, 0.86);
    backdrop-filter: blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.08);
}

header.scrolled{
    background:rgba(2, 11, 26, 0.86);
    box-shadow:0 10px 35px rgba(255,255,255,0.08);
}

header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    position:relative;
}

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

.logo img{
    width: 50px;
    border-radius:5px;
}




.logo h2{
    color:#fff;
    font-size:35px;
    font-weight:700;
    letter-spacing:0.02em;
    font-family:'Poppins', sans-serif;
}

nav ul{
    display:flex;
    gap:28px;
}

nav a{
    color:#fff;
    font-weight:500;
    position:relative;
    transition:.25s ease;
}

nav a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--brand);
    transition:.25s ease;
}

nav a:hover::after,
nav a:hover{
    color:var(--brand);
    width:100%;
}

.nav-toggle{
    display:none;
    background:transparent;
    border:none;
    color:white;
    font-size:22px;
    cursor:pointer;
}

.nav-panel{
    position:fixed;
    inset:0 0 0 30%;
    background:linear-gradient(180deg, rgba(2, 1, 7, 0.98), rgba(14, 10, 11, 0.98));
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:1500;
    padding:40px 30px;
}

.nav-panel.open{
    transform:translateX(0);
    left:auto;
}

.nav-panel .nav-close{
    background:transparent;
    border:none;
    color:#fff;
    font-size:22px;
    position:absolute;
    top:18px;
    right:18px;
}

.nav-panel ul{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:40px;
}

.nav-panel a{font-size:20px;}

.about-popup-trigger{
    cursor:pointer;
}

.hero-slider{
    position:relative;
    width:100%;
    min-height:580px;
    overflow:hidden;
    transition:background 0.5s ease;


}

.hero-slider-track{
    position:absolute;
    inset:0;
    
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 5s ease;
}

.hero-slide.active{
    opacity:1;
}

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    
}

.hero-slider::after{
    content:'';
    position:absolute;
    inset:0;
    
        
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    padding:24px;
}

.hero-badge{
    display:inline-block;
    padding:8px 14px;
    border:1px solid rgba(255,255,255,0.35);
    background:rgba(255,255,255,0.14);
    border-radius:999px;
    backdrop-filter:blur(6px);
    margin-bottom:18px;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.hero-overlay h1{
    font-size:clamp(2.4rem, 5vw, 4rem);
    font-weight:600;
    margin-bottom:18px;
    letter-spacing:0.02em;
    text-shadow:0 10px 25px rgba(163, 167, 125, 0.25);
}

.hero-overlay p{
    font-size:clamp(1rem, 2vw, 1.35rem);
    color:rgba(239, 239, 243, 0.92);
}

.hero-btn{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.btn{
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    padding:15px 30px;
    border-radius:50px;
    box-shadow:0 12px 30px rgba(245, 158, 11, 0.28);
    transition:.3s ease;
    font-weight:500px;
}

.btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, var(--brand-deep), #111827);
}

.btn2{
    background:transparent;
    border:2px solid rgba(255,255,255,0.9);
    box-shadow:none;
}

.btn2:hover{
    background:#fff;
    color:#0f172a;
}



.title{
    text-align:center;
    font-size:clamp(2rem, 4vw, 2.6rem);
    color:#0f172a;
    margin-bottom:50px;
    position:relative;
}

.title::after{
    content:'';
    display:block;
    width:90px;
    height:4px;
    background:linear-gradient(90deg, var(--brand), transparent);
    margin:12px auto 0;
    border-radius:999px;
}

 .about-page-section-1{
    padding:60px 20px;
    background-color: #536576;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    font-color: white;
    margin-top: 20px;


}

.home-about{
margin-top: 40px;
padding: 21px;
background-color:  rgba(249, 249, 249, 0.97);
text-align:  center;
box-sizing: border-box;
border-radius: 20px;
}




/* =========================================
   CONTACT US - TWO BOX LAYOUT
========================================= */

.contact-section {
    width: calc(100% - 30px);
    max-width: 1800px;
    margin: 20px auto 40px;

    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 35px;

    padding: 35px 40px;

    background: #fdfcf9;

    border-top: 5px solid #f39a0b;
    border-radius: 15px;

    box-sizing: border-box;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    margin-top: 130px;
    margin-bottom: 15px;
}


/* LEFT BOX */

.contact-left {
    background: #ffffff;

    padding: 35px;

    border-radius: 14px;

    border: 1px solid #eeeeee;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);

    box-sizing: border-box;
}

.contact-left h1 {
    margin: 0 0 20px;

    font-size: 38px;

    font-weight: 800;

    color: #df7900;
}

.contact-left h2 {
    margin: 0 0 15px;

    font-size: 25px;

    font-weight: 800;

    color: #061d3b;
}

.contact-intro {
    margin: 0 0 28px;

    font-size: 18px;

    line-height: 1.6;

    color: #40546b;
}


/* CONTACT DETAILS */

.contact-details {
    display: flex;

    flex-direction: column;

    gap: 17px;
}

.contact-item {
    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 18px;

    color: #344b65;
}

.contact-item i {
    width: 25px;

    color: #e47d00;

    font-size: 19px;
}


/* ISO */

.iso-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}

.iso-badges span {
    padding: 10px 16px;

    background: #fff9ed;

    border: 1px solid #f3c878;

    border-radius: 25px;

    color: #9b5900;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================
   RIGHT POLICY BOX
========================================= */

.contact-policy {
    background: #fffaf2;

    padding: 32px;

    border-radius: 14px;

    border: 1px solid #f2c778;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);

    box-sizing: border-box;

    align-self: stretch;
}

.contact-policy h2 {
    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 20px;

    font-size: 27px;

    font-weight: 800;

    color: #df7900;
}

.contact-policy h2 i {
    font-size: 25px;
}

.contact-policy p {
    margin: 0;

    font-size: 15.5px;

    line-height: 1.7;

    color: #3d4e61;

    text-align: left;
    text-align: justify;
}


/* EMAIL */

.policy-email {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #edc982;
}

.policy-email i {
    color: #df7900;

    font-size: 20px;
}

.policy-email a {
    color: #344b65;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    word-break: break-word;
}

.policy-email a:hover {
    color: #df7900;
}


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

@media (max-width: 900px) {

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

        gap: 25px;

        padding: 25px;
    }

    .contact-left h1 {
        font-size: 44px;
    }

}


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

@media (max-width: 600px) {

    .contact-section {
        width: calc(100% - 20px);

        padding: 15px;

        margin: 10px auto 25px;

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .contact-left,
    .contact-policy {
        padding: 22px;
    }

    .contact-left h1 {
        font-size: 36px;
    }

    .contact-left h2 {
        font-size: 24px;
    }

    .contact-intro {
        font-size: 16px;
    }

    .contact-item {
        font-size: 16px;
    }

    .contact-policy h2 {
        font-size: 23px;
    }

    .contact-policy p {
        font-size: 14px;

        line-height: 1.6;
    }

    .policy-email a {
        font-size: 14px;
    }

}







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

.about{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
    align-items:start;
}
.about-page-section-2{
    padding:60px 20px;
    background-color: #536576;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    font-color: white;
    margin-top: -60px;
    margin-bottom: -11pc;
}

.about-content{
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.99));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:38px;
    box-shadow:var(--shadow);
}

.about-home-card{
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,249,239,0.98));
    border:1px solid rgba(245, 158, 11, 0.18);
    box-shadow:0 24px 70px rgba(15, 23, 42, 0.12);
}

.about-content h2{
    font-size:clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom:18px;
}

.section-kicker{
    display:inline-block;
    margin-bottom:0px;
    color:var(--brand-deep);
    font-size:40px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;

}

.about-copy p{
    margin-bottom:18px;
    font-size:17px;
    line-height:1.9;
    color:#334155;
}

.about-list-block{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin:28px 0 32px;
}

.about-list-block div,
.about-box div,
.card,
.project-card,
.contact-info,
form{
    background:#fff;
    border:1px solid rgba(15, 23, 42, 0.08);
    box-shadow:var(--shadow);
}

.about-list-block div{
    padding:24px;
    border-radius:16px;
}

.about-list-block h3{
    margin-bottom:12px;
    color:#0f172a;
    font-size:18px;
}

.about-list-block ul{
    list-style:disc;
    padding-left:20px;
}

.about-list-block li{
    margin-bottom:10px;
    color:#475569;
    line-height:1.8;
}

.about-box{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:28px;
}

.about-box div{
    padding:26px 18px;
    border-radius:18px;
    background:linear-gradient(180deg, #fff, #fff9ef);
    text-align:center;
    border:1px solid rgba(15, 23, 42, 0.08);
    box-shadow:var(--shadow);
}

.about-box h3{
    color:var(--brand-deep);
    font-size:2rem;
    margin-bottom:8px;
}

.about-box span{
    color:#475569;
    font-weight:600;
}



.about-home-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:26px;
    padding:12px 20px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    font-weight:700;
    box-shadow:0 10px 24px rgba(245, 158, 11, 0.24);
}

.about-home-link:hover{
    background:linear-gradient(135deg, var(--brand-deep), #111827);
}

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

.service-full-page{
    min-height:calc(100vh - 120px);
    display:flex;
    align-items:stretch;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 216, 0.10), transparent 22%),
        radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.12), transparent 24%);
}

.about-page-layout{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:32px;
    align-items:stretch;
}

.service-layout{
    width:100%;
    min-height:calc(100vh - 260px);
    grid-template-columns:0.95fr 1.05fr;
}

.about-page-card{
    background:#fff;
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:11px;
    box-shadow:var(--shadow);
    padding:34px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.service-intro-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100%;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,248,239,0.96));
    border-left:5px solid rgba(20, 184, 216, 0.65);
}

.service-intro-card h2{
    font-size:clamp(2rem, 4vw, 3rem);
    line-height:1.25;
    margin-bottom:16px;
}

.service-intro-card p{
    max-width:560px;
    font-size:1.04rem;
}

.about-page-card h1{
    font-size:clamp(2rem, 4vw, 2.8rem);
    margin:12px 0 16px;
    color:#0f172a;
}

.about-page-card h2{
    margin:10px 0 10px;
    color:#0f172a;
}

.about-page-card .section-kicker{
    font-size:clamp(1.5rem, 3vw, 2.25rem);
    line-height:1.25;
    font-size: 30px;
}

.about-page-card p,
.about-page-card li{
    color:#475569;
    line-height:1.9;
    font-size:18px;
    text-align: justify;
}

.solution-card{
    position:relative;
    margin: 30px;
    overflow:hidden;
    padding:40px 34px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 216, 0.14), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 253, 0.96));
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:28px;
    box-shadow:
        0 24px 65px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    align-self:stretch;
    margin-top: 50px;
    margin-bottom: 50px;
}

.solution-card::before{
    content:'';
    position:absolute;
    top:-90px;
    right:-90px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(20, 184, 216, 0.20), transparent 70%);
    pointer-events:none;
}

.solutions-title{
    margin:0 0 30px;
    font-size:clamp(1.9rem, 3vw, 2.45rem);
    line-height:1.25;
    color:#0f172a;
    font-weight:800;
    text-align:center;
    display:inline-block;
    padding-bottom:10px;
    position:relative;
}

.solutions-title::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:85%;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg, #14b8d8, transparent);
}

.solutions-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:30px;
    align-items:start;
}

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

.solution-item{
    padding:16px 18px;
    border:1px solid rgba(148, 163, 184, 0.18);
    border-radius:18px;
    background:rgba(255, 255, 255, 0.72);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.solution-item:hover{
    transform:translateY(-4px);
    border-color:rgba(20, 184, 216, 0.5);
    box-shadow:0 16px 32px rgba(15, 23, 42, 0.08);
}

.solution-item h4{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
    color:#111827;
    font-size:1.18rem;
    line-height:1.55;
    font-weight:700;
}

.solution-item h4::before{
    content:'';
    width:11px;
    height:11px;
    border-radius:50%;
    background:linear-gradient(135deg, #14b8d8, #0f766e);
    margin-top:0.55rem;
    flex-shrink:0;
    box-shadow:0 0 0 4px rgba(20, 184, 216, 0.12);
}

.solution-item ul{
    padding-left:23px;
    list-style:disc;
}

.solution-item li{
    margin-bottom:4px;
    color:#475569;
    line-height:1.78;
    font-size:0.98rem;
}

.page-list{
    list-style:disc;
    padding-left:20px;
}

.page-list li{
    margin-bottom:12px;
}



/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

.team-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
  margin-top: -60px;
  text-align: center;
}

.section-title {
  color: #f59e0b;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 30px;
  border-bottom: 3px solid #f59e0b;
  display: inline-block;
  padding-bottom: 5px;
  margin-top: 30px;
}

.team-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.team-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.image-wrapper {
  width: 100%;
  height: 280px;
  overflow: hidden;
  background-color: #e0e0e0;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.card-info {
  padding: 20px;
}

.member-name {
  color: #f59e0b;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 5px 0;
}

.member-role {
  color: #666;
  font-size: 14px;
  margin: 0 0 15px 0;
}

.connect-btn {
  background-color:#f59e0b ;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.connect-btn:hover {
  background-color: grey;
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter:  blur(4px);
}

.modal-content {
  background-color: #ffffff;
  margin: 15% auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}

.close-btn:hover {
  color: #333;
}

#modalName {
  color: #1a237e;
  margin: 0 0 5px 0;
}

.modal-subtitle {
  color: #888;
  font-size: 13px;
  margin-bottom: 20px;
}

.contact-details {
  text-align: left;
  background: #f4f6f8;
  padding: 15px;
  border-radius: 8px;
}

.detail-item {
  margin-bottom: 10px;
  font-size: 15px;
}

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

.detail-item a {
  color: #1a237e;
  text-decoration: none;
  font-weight: 500;
}

.detail-item a:hover {
  text-decoration: underline;
}








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

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:28px;
}

.card{
    padding:34px 22px;
    border-radius:18px;
    text-align:center;
    transition:.3s ease;
    position:relative;
    overflow:hidden;
}

.card::before{
    content:'';
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    background:linear-gradient(90deg, var(--brand), transparent);
}

.card:hover{
    transform:translateY(-10px);
    border-color:rgba(245, 158, 11, 0.35);
}

.card i{
    font-size:48px;
    color:var(--brand-deep);
    margin-bottom:18px;
}

.card h3{
    font-size:21px;
    color:#111827;
}

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

.project-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
    align-items:stretch;
    margin-bottom: 50px;
}

.project-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,249,241,0.98));
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 18px 38px rgba(15, 23, 42, 0.10);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.project-card:hover{
    transform:translateY(-10px);
    border-color:rgba(245, 158, 11, 0.34);
    box-shadow:0 30px 55px rgba(15, 23, 42, 0.16);
}

.project-card img{
    height:260px;
    width:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}

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

.project-meta{
    padding:18px 18px 22px;
}

.project-meta h3{
    color:#0f172a;
    font-size:1.05rem;
    margin-bottom:6px;
}

.project-meta p{
    color:#475569;
    font-size:0.95rem;
    line-height:1.7;
}

/* Fallback for older image slider area if used on the page */
.slider{
    width:100%;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 38px rgba(15, 23, 42, 0.10);
}

.slides{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:0;
}

.slides img{
    height:260px;
    width:100%;
    object-fit:cover;
}

/* ===================================
            CLIENTS
=================================== */

.client-page-section{
    padding:150px 0 30px;
    margin-top: -20px;
    text-align: center;

}

.client-page-layout{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:30px;
    align-items:stretch;
    min-height:calc(100vh - 280px);
}

.client-hero-card{
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,249,239,0.98));
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:34px;
}

.client-hero-card h1{
    font-size:clamp(2rem, 4vw, 2.8rem);
    margin:12px 0 16px;
    color:#0f172a;
}

.client-hero-card p{
    color:#475569;
    line-height:1.9;
}

.client-stat-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin:30px 0 22px;
}

.client-stat-box{
    background:linear-gradient(180deg, #fff, #fff8ef);
    border:1px solid rgba(245, 158, 11, 0.22);
    border-radius:18px;
    padding:20px 16px;
    text-align:center;
}

.client-stat-box h3{
    color:var(--brand-deep);
    font-size:1.8rem;
    margin-bottom:6px;
}

.client-stat-box span{
    color:#475569;
    font-size:0.94rem;
}

.client-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:10px 0 18px;
}

.client-chip{
    background:var(--brand-soft);
    color:#8a5200;
    border:1px solid rgba(245, 158, 11, 0.3);
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.client-side-panel{
    display:flex;
    height:100%;
}

.client-side-card{
    width:100%;
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#f2efe8;
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:34px;
}

.client-side-card h2{
    margin-bottom:14px;
    color:#0f172a;
    font-size:1.8rem;
}

.client-side-card p{
    color:#475569;
    line-height:1.9;
    margin-bottom:18px;
    text-align: justify;
}

.client-table-section{
    padding:100px 0 100px;
    margin-top: -10pc;
    margin-bottom: -50px;
}

.client-table-card{
    background:#fff;
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:30px;
    min-height:520px;
}

.client-table-head{
    margin-bottom:24px;
}

.client-table-head .section-kicker{
    font-size:clamp(1.5rem, 3vw, 2.25rem);
    line-height:1.25;
}

.client-table-head h2{
    font-size:clamp(1.8rem, 3vw, 2.4rem);
    color:#0f172a;
    margin-top:8px;
}

.table-wrap{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:720px;
}

thead th{
    text-align:left;
    background:linear-gradient(135deg, #0f172a, #1e293b);
    color:#fff;
    padding:16px 14px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:0.04em;
}

tbody td{
    padding:16px 14px;
    border-bottom:1px solid rgba(15, 23, 42, 0.08);
    color:#334155;
    background:#f8f9fa;
}

tbody tr:nth-child(even) td{
    background:#fffaf0;
}

tbody tr:hover td{
    background:rgba(245, 158, 11, 0.08);
}

.clients{
    padding:1px 0 40px;
    margin-bottom: 15px;
}

.clients h2{
    text-align:center;
    font-size:clamp(2rem, 4vw, 2.6rem);
    color: wheat;
    margin-bottom:32px;
}

.client-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:22px;
    align-items:center;
}

.client-box{
    background:#fff;
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:18px;
    padding:18px;
    box-shadow:0 12px 28px rgba(15, 23, 42, 0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:160px;
}

.client-box img{
    max-width:100%;
    max-height:110px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:grayscale(0.1);
}

.home-client-strip{
    padding:110px 0 20px;
    background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,250,252,0.92));
}

.home-client-strip .section-kicker{
    display:block;
    text-align:center;
    margin-bottom:16px;
}

.client-showcase-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
}

.client-preview-card{
    width:min(100%, 760px);
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    padding:14px;
    border:1px solid rgba(15, 23, 42, 0.08);
    box-shadow:var(--shadow);
}

.client-preview-card img{
    width:100%;
    height:auto;
    max-height:360px;
    border-radius:14px;
    object-fit:contain;
}

.client-popup-button{
    border:none;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#eae5e5;
    padding:16px 28px;
    border-radius:999px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 14px 32px rgba(245, 158, 11, 0.28);
    display:flex;
    align-items:center;
    gap:10px;
    transition:.3s ease;
}

.client-popup-button:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, var(--brand-deep), #111827);
}

.client-preview-card{
    width:min(100%, 960px);
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    padding:18px;
    border:1px solid rgba(15, 23, 42, 0.08);
    box-shadow:var(--shadow);
}

.client-preview-card img{
    border-radius:16px;
}

.client-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.client-modal.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.client-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.72);
}

.client-modal-dialog{
    position:relative;
    width:min(1080px, calc(100% - 32px));
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:24px;
    box-shadow:0 18px 50px rgba(0,0,0,0.25);
    padding:34px;
}

.client-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    cursor:pointer;
    font-size:16px;
}

.client-modal-content h2{
    font-size:34px;
    margin:10px 0 16px;
    color:#0f172a;
}

.client-modal-content p{
    margin-bottom:18px;
    color:#475569;
    line-height:1.85;
    font-size:17px;
}

.client-modal-image-wrap{
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(15, 23, 42, 0.08);
}

.client-modal-image-wrap img{
    width:100%;
    display:block;
}

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





.contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;

}

.contact-info,
form,
.contact-preview-card{
    padding:28px;
    border-radius:18px;

}

.contact-info h2{
    margin-bottom:18px;
    font-size:2rem;
}

.contact-info p{
    margin:18px 0;
    font-size:18px;
    color:#334155;
}

.contact-preview-card{
    background:#fff;
    border:1px solid rgba(15, 23, 42, 0.08);
    box-shadow:var(--shadow);
    overflow:hidden;
    min-height:340px;
}

.contact-preview-card img{
    border-radius:14px;
    height:100%;
    min-height:340px;
    object-fit:cover;
}

.contact-info i{
    color:var(--brand-deep);
    margin-right:10px;
}

.contact-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:25px;
}

.contact-highlights span{
    background:var(--brand-soft);
    color:#8a5200;
    border:1px solid rgba(245, 158, 11, 0.25);
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

.contact-popup-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:22px;
    border:none;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    padding:14px 22px;
    border-radius:999px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(245, 158, 11, 0.28);
    transition:.3s ease;
}

.contact-popup-button:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, var(--brand-deep), #111827);
}

.contact-page-section{
    padding:0px 0 30px;
     
    background-color:#64798d;

}




.contact-page-layout{
    display:block;
}

.contact-page-card{
    background:#fff;
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:34px;
}

.contact-page-card h1{
    max-width:760px;
    font-size:clamp(2.2rem, 4vw, 3.5rem);
    line-height:1.15;
    margin:14px 0 16px;
    color:#0f172a;
}

.contact-page-card p{
    color:#475569;
    line-height:1.85;
    font-size:17px;
}

.contact-page-layout > .contact-page-card:first-child{
    position:relative;
    overflow:hidden;
    padding:20px 55px;
    margin-top: 122px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.99), rgba(255,249,238,0.97));
    border-top:4px solid var(--brand);

}

.contact-page-layout > .contact-page-card:first-child::after{
    content:'SMPL';
    position:absolute;
    right:38px;
    bottom:-30px;
    color:rgba(245,158,11,0.08);
    font-size:8rem;
    font-weight:800;
    line-height:1;
    pointer-events:none;
}

.contact-page-list{
    margin-top:24px;
}

.contact-page-list p{
    margin:14px 0;
}

.contact-page-list i{
    color:var(--brand-deep);
    margin-right:10px;
}

.contact-page-list a{
    color:inherit;
}

.contact-page-locations{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    margin-top:26px;
}

.contact-page-locations p{
    margin:0;
    padding:14px;
    background:var(--brand-soft);
    border:1px solid rgba(245, 158, 11, 0.22);
    border-radius:14px;
    color:#475569;
    font-size:14px;
    line-height:1.6;
}

.contact-page-locations strong{
    color:#8a5200;
}

.contact-page-map-wrap{
    overflow:hidden;
    padding:0;
}

.contact-page-map{
    display:block;
    width:100%;
    min-height:420px;
    border:0;
}

.contact-page-map-caption{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    color:#475569;
    font-size:14px;
}

.contact-page-map-caption i{
    color:var(--brand-deep);
}

.locations-container{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:28px;
    margin-top:-20px;
    margin-bottom: 50px;

}

.location-card{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(15,23,42,0.08);
    border-radius:10px;
    box-shadow:0 18px 45px rgba(15,23,42,0.1);
    min-width:0;
    transition:transform .25s ease, box-shadow .25s ease;
    max-height: fit-content;
    
}

.location-card:hover{
    transform:translateY(-5px);
    box-shadow:0 24px 52px rgba(15,23,42,0.15);
}

.location-card-content{
    padding:28px 24px;
}

.location-label{
    color:var(--brand-deep);
    font-size:26px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.location-title{
    margin:7px 0 20px;
    color:#0f172a;
    font-size:1.35rem;
    line-height:1.25;
}

.location-info p{
    display:flex;
    gap:10px;
    margin:13px 0;
    color:#475569;
    font-size:13px;
    line-height:1.6;
}

.location-info i{
    width:16px;
    padding-top:4px;
    color:var(--brand-deep);
}

.location-map-area{
    display:flex;
    flex-direction:column;
    min-width:0;
    background:#eef1f3;
}

.map-frame{
    display:block;
    width:100%;
    min-height:265px;
    flex:1;
    border:0;
    filter:saturate(.8) contrast(1.05);
}

.map-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 16px;
    background:#0f172a;
    color:#fff;
    font-size:13px;
    font-weight:700;
    transition:background .2s ease;
}

.map-btn:hover{
    background:var(--brand-deep);
}

.contact-page-image-wrap{
    overflow:hidden;
    padding:0;
}

.contact-page-image-wrap img{
    width:100%;
    height:100%;
    min-height:420px;
    object-fit:cover;
    display:block;
}

.image-container{
    width:min(1200px, 100%);
    margin:0 auto 84px;
    padding:10px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    background:linear-gradient(135deg, #ffffff, #fff5e3);
    border:1px solid rgba(15,23,42,0.1);
    border-radius:24px;
    box-shadow:0 22px 55px rgba(15,23,42,0.14);
    overflow:hidden;
}

.image-container::before{
    content:'Leadership & Contact Team';
    display:block;
    grid-column:1 / -1;
    padding:14px 18px 12px;
    color:#0f172a;
    font-size:clamp(1rem, 2vw, 1.3rem);
    font-weight:700;
    letter-spacing:.02em;
}

.image-container img{
    display:block;
    width:100%;
    aspect-ratio:-3 / -26;
    height:auto;
    border-radius:16px;
    object-fit:cover;
    background:#f3f4f6;
}

.image-card{
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(15,23,42,0.1);
    border-radius:18px;
    box-shadow:0 14px 30px rgba(15,23,42,0.1);
    transition:transform .3s ease, box-shadow .3s ease;
}

.image-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 42px rgba(15,23,42,0.16);
}

.image-card .card-content{
    padding:16px 18px 18px;
    border-top:3px solid var(--brand);
}

.image-card h3{
    color:#0f172a;
    font-size:1rem;
    line-height:1.4;
}

.image-card p{
    margin-top:3px;
    color:#64748b;
    font-size:.9rem;
}

.team-cards-section{
    padding:16px 0 92px;
   
}

.team-cards-heading{
    margin-bottom:28px;
    text-align:center;
}

.team-cards-heading .section-kicker{
    font-size:clamp(1.5rem, 3vw, 2.25rem);
}

.team-cards-heading h2{
    margin-top:6px;
    color:#0f172a;
    font-size:clamp(1.45rem, 3vw, 2.25rem);
}

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

.team-card{
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(15,23,42,0.1);
    border-radius:20px;
    box-shadow:0 16px 38px rgba(15,23,42,0.1);
    transition:transform .3s ease, box-shadow .3s ease;
}

.team-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 48px rgba(15,23,42,0.18);
}

.team-card-image{
    width:94%;
    aspect-ratio:1.58;
    background-image:url('md.png');
    background-repeat:no-repeat;
    background-size:310% auto;
    transition:transform .35s ease, filter .35s ease;
}

.team-card:hover .team-card-image{
    transform:scale(1.035);
    filter:saturate(1.08) contrast(1.04);
}

.team-card-md{ background-position:8% 48%; }
.team-card-hr{ background-position:54% 48%; }
.team-card-marketing{ background-position:99% 48%; }

.team-card-caption{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:16px 18px 18px;
    border-top:3px solid var(--brand);
}

.team-card-caption strong{
    color:#0f172a;
    font-size:15px;
}

.team-card-caption span{
    color:#64748b;
    font-size:13px;
}





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

footer{
    background:#071224;
    color:#fff;
    text-align:center;
    padding:25px;
    font-size:14px;
    margin-bottom:-40px;
}

/* Contact popup modal */
.contact-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.contact-modal.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.contact-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.72);
}

.contact-modal-dialog{
    position:relative;
    width:min(860px, calc(100% - 32px));
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:24px;
    box-shadow:0 18px 50px rgba(0,0,0,0.25);
    padding:34px;
}

.contact-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    cursor:pointer;
    font-size:16px;
}

.contact-modal-content h2{
    font-size:34px;
    margin:10px 0 16px;
    color:#0f172a;
}

.contact-modal-content p{
    margin-bottom:18px;
    color:#475569;
    line-height:1.85;
    font-size:17px;
}

.contact-modal-image-wrap{
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(15, 23, 42, 0.08);
    margin-bottom:20px;
}

.contact-modal-image-wrap img{
    width:100%;
    display:block;
}

.contact-modal-details p{
    margin:10px 0;
}

.contact-modal-details i{
    color:var(--brand-deep);
    margin-right:10px;
}

/* About popup modal */


.about-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.about-modal.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.about-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.68);
}

.about-modal-dialog{
    position:relative;
    width:min(900px, calc(100% - 32px));
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:20px;
    box-shadow:0 18px 50px rgba(0,0,0,0.25);
    padding:34px;
}

.about-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#ff9800;
    color:#fff;
    cursor:pointer;
    font-size:16px;
}

.about-modal-content h2{
    font-size:34px;
    margin:10px 0 18px;
    color:#0f172a;
}

.about-modal-content p{
    margin-bottom:16px;
    color:#475569;
    line-height:1.85;
    font-size:17px;
}

.about-modal-tag{
    display:inline-block;
    background:#fff3df;
    color:#ad6500;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.about-modal-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
    margin-top:28px;
}

.about-modal-grid h3{
    margin-bottom:12px;
    color:#0f172a;
}

.about-modal-grid ul{
    list-style:disc;
    padding-left:20px;
}

.about-modal-grid li{
    margin-bottom:10px;
    color:#475569;
    line-height:1.8;
}

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

@media(max-width:991px){

    .locations-container{
        grid-template-columns:1fr;
    }

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

    .service-full-page,
    .service-layout{
        min-height:auto;
    }

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

    .about-list-block,
    .about-modal-grid,
    .solutions-grid{
        grid-template-columns:1fr;
    }

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

    .client-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .hero-content h1{
        font-size:42px;
    }

    .hero-content p{
        font-size:18px;
    }

}

@media(max-width:768px){

    .contact-page-section{
        padding:120px 0 60px;
    }

    .contact-page-layout > .contact-page-card:first-child{
        padding:30px 24px;
    }

    .contact-page-layout > .contact-page-card:first-child::after{
        right:15px;
        font-size:5rem;
    }

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

    .location-card{
        grid-template-columns:1fr;
    }

    .map-frame{
        min-height:230px;
        flex:none;
    }

    .image-container{
        width:calc(100% - 32px);
        margin-bottom:52px;
        padding:7px;
        grid-template-columns:1fr;
        border-radius:18px;
    }

    .image-container::before{
        padding:11px 12px 10px;
        font-size:1rem;
    }

    .image-container img{
        border-radius:12px;
    }

    .team-cards-section{
        padding-bottom:60px;
    }

    .team-cards-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .team-card-image{
        aspect-ratio:1.7;
    }

    header .container{
        flex-direction:row;
        gap:15px;
    }

    nav ul{
        display:none;
    }

    .nav-toggle{
        display:block;
    }

    .hero-btn{
        flex-direction:column;
    }

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

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

    .hero-content h1{
        font-size:34px;
    }

    .title{
        font-size:30px;
    }

}

.certification-section{
    padding:100px 0 60px;
    background:linear-gradient(180deg, rgba(255, 248, 238, 0.95), rgba(255,255,255,0.98));
}

.certification-section .section-header{
    max-width:720px;
    margin:0 auto 40px;
    text-align:center;
}

.certification-section .section-header p{
    color:#475569;
    margin-top:12px;
    line-height:1.8;
}

.certification-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:24px;
}

.certificate-card{
    display:block;
    color:inherit;
}

.certification-gallery figure{
    background:#fff;
    border:1px solid rgba(15, 23, 42, 0.08);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 38px rgba(15, 23, 42, 0.08);
    transition:transform .35s ease, box-shadow .35s ease;
}

.certification-gallery figure:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 48px rgba(15, 23, 42, 0.12);
}

.certification-gallery img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    cursor:pointer;
    transition:transform .35s ease;
}

.certification-gallery figure:hover img{
    transform:scale(1.04);
}

.certification-gallery figcaption{
    padding:18px 16px 22px;
    font-size:0.95rem;
    color:#475569;
    line-height:1.7;
    background-color: #d9dcd1;
}

.certificate-view-section{
    min-height:calc(100vh - 100px);
    padding:150px 0 80px;
    background:linear-gradient(180deg, #fff8ee, #f4f7fb);
}

.certificate-view-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.certificate-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color: white;
    font-weight:600;
}

.certificate-back-link:hover{color:var(--brand-deep);}

.certificate-viewer{
    max-width:1000px;
    margin:auto;
    padding:18px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.certificate-viewer img{
    width:100%;
    max-height:76vh;
    object-fit:contain;
    background:#eef1f4;
}

.certificate-viewer figcaption{
    padding:18px 6px 4px;
    color:var(--muted);
    text-align:center;
}

.lightbox{
    position:fixed;
    inset:0;
    z-index:2500;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.75);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.lightbox.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.lb-inner{
    position:relative;
    width:min(840px, calc(100% - 40px));
    max-height:85vh;
    overflow:hidden;
    border-radius:24px;
    background:#121827;
    box-shadow:0 32px 80px rgba(0,0,0,0.45);
}

.lb-close{
    position:absolute;
    top:16px;
    right:16px;
    border:none;
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,0.14);
    color:#fff;
    font-size:1.1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease;
    z-index:1;
}

.lb-close:hover{
    background:rgba(255,255,255,0.26);
}

.lightbox img{
    width:100%;
    height:auto;
    max-height:72vh;
    object-fit:contain;
    display:block;
    background:#0f172a;
}

.lb-caption{
    padding:18px 20px;
    color:#f8fafc;
    text-align:center;
    background:rgba(15,23,42,0.95);
    font-size:0.98rem;
    line-height:1.7;
}