/*==================================================
  DPFPCL WEBSITE
  Author : ChatGPT
  Version : 1.0
===================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root{

    --primary:#74B63D;
    --primary-dark:#5C9E2E;

    --secondary:#6A2CA0;

    --accent:#F57C4A;

    --dark:#222222;

    --gray:#666666;

    --light:#F7FAF4;

    --white:#ffffff;

    --border:#E8E8E8;

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

    --radius:16px;

    --transition:.35s ease;

}


/*==============================
RESET
==============================*/

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

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--dark);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

.container{

    width:min(1320px,90%);

    margin:auto;

}

section{

    padding:100px 0;

}

h1,h2,h3,h4{

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

    font-weight:700;

}

h1{

    font-size:58px;

    line-height:1.15;

}

h2{

    font-size:42px;

}

h3{

    font-size:24px;

}

p{

    color:var(--gray);

}

.center{

    text-align:center;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}
a.btn span {
    display: none;
}

.btn:hover{

    background:var(--secondary);

    transform:translateY(-3px);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border:2px solid var(--primary);

    border-radius:50px;

    color:var(--primary);

    font-weight:600;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:9999;

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(0,0,0,.05);

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:140px;

}

.logo img{

    height:140px;

}

nav ul{

    display:flex;

    gap:35px;

}

nav ul li a{

    color:var(--dark);

    font-weight:600;

    position:relative;

}

nav ul li a:after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--primary);

    transition:.35s;

}

nav ul li a:hover:after,

nav ul li .active:after{

    width:100%;

}

nav ul li a:hover{

    color:var(--primary);

}


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

.hero{

    padding-top:180px;

    background:

    linear-gradient(135deg,#F7FAF4,#ffffff);

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.tagline{

    display:inline-block;

    background:#EAF7DE;

    color:var(--primary-dark);

    padding:10px 20px;

    border-radius:40px;

    margin-bottom:25px;

    font-weight:600;

}

.hero h1{

    margin-bottom:25px;

}

.hero p{

    font-size:18px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:30px;

    box-shadow:var(--shadow);

}


/*==============================
SECTION TITLE
==============================*/

.section-title{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:70px;

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    font-size:18px;

}


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

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-grid img{

    border-radius:25px;

    box-shadow:var(--shadow);

}

.about-grid h3{

    margin-bottom:20px;

}

.about-grid p{

    margin-bottom:35px;

}


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

.about-page-hero{

    padding-top:190px;

    background:linear-gradient(135deg,#F7FAF4,#ffffff);

}

.about-page-hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

}

.about-page-copy h1{

    margin-bottom:24px;

}

.about-page-copy p{

    margin-bottom:34px;

    font-size:18px;

}

.about-page-image img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    border-radius:25px;

    box-shadow:var(--shadow);

}

.about-story-grid,
.cluster-grid,
.community-grid,
.activities-grid,
.infrastructure-grid{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:70px;

    align-items:start;

}

.about-rich-text p,
.cluster-intro p,
.community-content p,
.activities-grid p,
.infrastructure-grid p,
.support-content p{

    margin-bottom:20px;

    font-size:17px;

}

.mission-vision,
.cluster-section,
.governance-section,
.support-section{

    background:var(--light);

}

.mission-grid,
.governance-grid{

    display:grid;

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

    gap:30px;

}

.mission-card,
.objective-card,
.governance-card,
.infrastructure-grid article{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:38px;

    box-shadow:var(--shadow);

}

.mission-card i,
.objective-card i,
.governance-card i{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:50%;

    background:#EEF8E8;

    color:var(--primary);

    font-size:28px;

}

.mission-card h2,
.infrastructure-grid h2{

    margin-bottom:16px;

    font-size:30px;

}

.foundation-card{

    display:flex;

    flex-direction:column;

}

.foundation-logo{

    width:min(260px,100%);

    margin-bottom:26px;

    padding:18px;

    border:1px solid var(--border);

    border-radius:16px;

    background:#fff;

}

.foundation-logo img{

    width:100%;

    height:auto;

    object-fit:contain;

}

.objectives-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.objective-card h3,
.governance-card h3,
.cluster-steps h3{

    margin-bottom:12px;

}

.cluster-steps{

    display:grid;

    gap:18px;

}

.cluster-steps article{

    display:grid;

    grid-template-columns:72px 1fr;

    column-gap:22px;

    align-items:start;

    padding:24px;

    border:1px solid var(--border);

    border-radius:18px;

    background:#fff;

    box-shadow:var(--shadow);

}

.cluster-steps span{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

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

    font-weight:800;

}

.cluster-steps p{

    grid-column:2;

}

.community-stats{

    display:grid;

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

    gap:20px;

}

.community-stats div{

    min-height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:28px;

    border-radius:20px;

    background:var(--primary);

    color:#fff;

    text-align:center;

    box-shadow:var(--shadow);

}

.community-stats strong{

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

    font-size:42px;

    line-height:1;

}

.community-stats span{

    margin-top:10px;

    font-weight:700;

}

.activity-list{

    display:grid;

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

    gap:16px;

}

.activity-list li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 20px;

    border:1px solid var(--border);

    border-radius:16px;

    background:#fff;

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

    font-weight:700;

}

.activity-list i{

    color:var(--primary);

}

.support-content{

    max-width:880px;

    text-align:center;

}


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

.stats{

    background:var(--primary);

    color:#fff;

}

.stats .container{

    display:grid;

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

    gap:30px;

}

.stat-box{

    text-align:center;

}

.stat-box h2{

    color:#fff;

    font-size:52px;

}

.stat-box p{

    color:#fff;

}


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

.service-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.service-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

    border:1px solid transparent;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.service-card i{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:#EEF8E8;

    color:var(--primary);

    border-radius:50%;

    margin-bottom:25px;

}

.service-card h3{

    margin-bottom:15px;

}


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

.services-page-hero{

    padding-top:190px;

    background:linear-gradient(135deg,#F7FAF4,#ffffff);

}

.services-page-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:70px;

}

.services-page-copy h1{

    margin-bottom:24px;

}

.services-page-copy p{

    margin-bottom:34px;

    font-size:18px;

}

.services-page-image img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    border-radius:25px;

    box-shadow:var(--shadow);

}

.services-page-cards{

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

}

.service-chain-section{

    background:var(--light);

}

.service-chain-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    align-items:start;

}

.service-chain-grid p{

    margin-top:18px;

    font-size:17px;

}

.service-chain-list{

    display:grid;

    gap:18px;

}

.service-chain-list article{

    display:grid;

    grid-template-columns:64px 1fr;

    column-gap:20px;

    align-items:start;

    padding:24px;

    border:1px solid var(--border);

    border-radius:18px;

    background:#fff;

    box-shadow:var(--shadow);

}

.service-chain-list span{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

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

    font-weight:800;

}

.service-chain-list strong{

    color:var(--dark);

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

    font-size:22px;

}

.service-chain-list p{

    grid-column:2;

    margin-top:6px;

}


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

.contact-page-hero{

    padding-top:190px;

    background:linear-gradient(135deg,#F7FAF4,#ffffff);

}

.contact-page-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    align-items:center;

}

.contact-page-copy h1{

    margin-bottom:24px;

}

.contact-page-copy p{

    max-width:620px;

    font-size:18px;

}

.contact-cards{

    display:grid;

    gap:18px;

}

.contact-cards article{

    display:grid;

    grid-template-columns:70px 1fr;

    gap:20px;

    align-items:center;

    padding:28px;

    border:1px solid var(--border);

    border-radius:20px;

    background:#fff;

    box-shadow:var(--shadow);

}

.contact-cards i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF8E8;

    color:var(--primary);

    font-size:24px;

}

.contact-cards h3{

    margin-bottom:6px;

}

.contact-cards a{

    color:var(--gray);

}

.contact-cards a:hover{

    color:var(--primary);

}

.contact-cta-section{

    background:var(--light);

}

.contact-cta-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.contact-cta-box h2{

    margin-bottom:14px;

}

.contact-cta-box p{

    max-width:720px;

}

.contact-social{

    display:flex;

    gap:14px;

}

.contact-social a{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    font-size:18px;

}

.contact-social a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}


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

.why-us{

    background:var(--light);

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.why-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card i{

    font-size:40px;

    color:var(--secondary);

    margin-bottom:20px;

}
/*==================================================
MEMBERSHIP SECTION
==================================================*/

.membership{

    background:#fff;

}

.membership-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.membership-image{

    position:relative;

}

.membership-image img{

    border-radius:25px;

    box-shadow:var(--shadow);

}

.subtitle{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    margin-bottom:15px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.membership-content h2{

    margin-bottom:25px;

}

.membership-content p{

    margin-bottom:30px;

}

.membership-content ul{

    margin-bottom:40px;

}

.membership-content ul li{

    display:flex;

    align-items:center;

    margin-bottom:18px;

    font-size:17px;

}

.membership-content ul li i{

    color:var(--primary);

    margin-right:12px;

    font-size:20px;

}


/*==================================================
MEMBERSHIP PAGE
==================================================*/

.membership-page-hero{

    padding-top:190px;

    background:linear-gradient(135deg,#F7FAF4,#ffffff);

}

.membership-page-grid{

    display:grid;

    grid-template-columns:1fr .9fr;

    gap:70px;

    align-items:center;

}

.membership-page-copy h1{

    margin-bottom:24px;

}

.membership-page-copy>p{

    margin-bottom:34px;

    max-width:720px;

    font-size:18px;

}

.membership-process{

    display:grid;

    gap:16px;

}

.membership-process article{

    display:grid;

    grid-template-columns:62px 1fr;

    gap:18px;

    align-items:start;

    padding:22px;

    border:1px solid var(--border);

    border-radius:18px;

    background:#fff;

    box-shadow:var(--shadow);

}

.membership-process span{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

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

    font-weight:800;

}

.membership-process h3{

    margin-bottom:6px;

}

.membership-download-card{

    overflow:hidden;

    border:1px solid var(--border);

    border-radius:22px;

    background:#fff;

    box-shadow:var(--shadow);

}

.membership-thumb img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

}

.membership-download-content{

    padding:32px;

}

.membership-download-content h2{

    margin-bottom:14px;

    font-size:30px;

}

.membership-download-content p{

    margin-bottom:24px;

}

.membership-download-button{

    gap:10px;

}

.membership-office-section{

    background:var(--light);

}

.membership-office-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.membership-office-box h2{

    margin-bottom:14px;

}

.membership-office-box p{

    max-width:720px;

}

.membership-office-details{

    display:flex;

    align-items:center;

    gap:16px;

    min-width:min(430px,100%);

    padding:24px;

    border-radius:18px;

    background:#fff;

    box-shadow:var(--shadow);

    font-weight:700;

}

.membership-office-details i{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    border-radius:50%;

    background:#EEF8E8;

    color:var(--primary);

    font-size:22px;

}


/*==================================================
CERTIFICATE VALIDATION
==================================================*/

.certificate-section{

    background:

    linear-gradient(135deg,#74B63D,#5C9E2E);

}

.certificate-box{

    background:#fff;

    border-radius:25px;

    padding:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

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

}

.certificate-content{

    flex:1;

}

.certificate-content h2{

    margin-bottom:15px;

}

.certificate-content p{

    color:#666;

}

.certificate-form{

    flex:1;

    display:flex;

    gap:15px;

}

.certificate-form input{

    flex:1;

    height:60px;

    border:1px solid #ddd;

    border-radius:50px;

    padding:0 25px;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.certificate-form input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(116,182,61,.15);

}

.certificate-form button{

    border:none;

    background:var(--secondary);

    color:#fff;

    height:60px;

    padding:0 35px;

    border-radius:50px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.certificate-form button:hover{

    background:var(--primary);

}


/*==================================================
VALIDATE CERTIFICATE PAGE
==================================================*/

.validate-main{

    min-height:100vh;

    padding-top:140px;

    background:var(--light);

}

.validate-hero{

    padding:80px 0 50px;

}

.validate-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    align-items:center;

}

.validate-copy h1{

    margin-bottom:20px;

}

.validate-copy p{

    max-width:620px;

    font-size:18px;

}

.validate-panel{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:36px;

    box-shadow:var(--shadow);

}

.validate-form{

    display:grid;

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

    gap:16px;

    align-items:end;

}

.validate-field label{

    display:block;

    margin-bottom:8px;

    color:var(--dark);

    font-weight:700;

}

.validate-field input{

    width:100%;

    height:56px;

    border:1px solid #ddd;

    border-radius:50px;

    padding:0 22px;

    color:var(--dark);

    font-size:15px;

    transition:.3s;

}

.validate-field input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(116,182,61,.15);

}

.validate-form button,
.certificate-toolbar button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:56px;

    border:0;

    border-radius:50px;

    padding:0 26px;

    background:var(--secondary);

    color:#fff;

    cursor:pointer;

    font-weight:700;

    transition:.3s;

}

.validate-form button:hover,
.certificate-toolbar button:hover{

    background:var(--primary);

}

.validate-form button:disabled{

    cursor:not-allowed;

    opacity:.65;

}

.validation-message{

    display:none;

    margin-top:18px;

    border-radius:14px;

    padding:14px 18px;

    font-weight:700;

}

.validation-message.is-visible{

    display:block;

}

.validation-message.is-info{

    background:#eef5ff;

    color:#28528c;

}

.validation-message.is-success{

    background:#edf8e8;

    color:#2d6d2d;

}

.validation-message.is-error{

    background:#fff1ef;

    color:#9f2018;

}

.certificate-print-area{

    padding:20px 0 90px;

}

.certificate-print-area[hidden]{

    display:none;

}

.certificate-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

}

.certificate-toolbar strong{

    color:#2d6d2d;

    font-size:20px;

}

.certificate-result-frame{

    overflow:auto;

    border:1px solid var(--border);

    border-radius:20px;

    padding:24px;

    background:#ececec;

    box-shadow:var(--shadow);

}

.share-certificate-preview{

    position:relative;

    width:297mm;

    min-height:210mm;

    margin:auto;

    padding:24mm 28mm 18mm;

    overflow:hidden;

    background:#fff;

    color:#111;

    font-family:"Times New Roman",serif;

}

.certificate-frame{

    position:absolute;

    z-index:0;

    inset:0;

    width:100%;

    height:100%;

    object-fit:fill;

    pointer-events:none;

    user-select:none;

}

.watermark{

    position:absolute;

    z-index:1;

    top:50%;

    left:50%;

    width:330px;

    opacity:.05;

    transform:translate(-50%,-50%);

}

.certificate-content-layer{

    position:relative;

    z-index:2;

}

.certificate-header{

    margin-bottom:14px;

    text-align:center;

}

.certificate-logo{

    width:96px;

    margin:0 auto;

}

.certificate-company{

    color:#2d6d2d;

    font-size:32px;

    font-weight:bold;

}

.certificate-subtitle{

    color:#2d6d2d;

    font-size:21px;

    font-weight:bold;

    letter-spacing:0;

    text-transform:uppercase;

}

.certificate-address{

    margin-top:6px;

    font-family:serif;

    font-size:13px;

}

.certificate-title{

    margin:18px 0;

    text-align:center;

    font-size:24px;

    font-weight:bold;

    letter-spacing:3px;

    text-decoration:underline;

}

.certificate-info-table{

    width:100%;

    margin-bottom:14px;

    border-collapse:collapse;

}

.certificate-info-table td{

    padding:5px 8px;

    font-size:14px;

}

.certificate-statement{

    margin-top:18px;

    text-align:justify;

    font-size:15px;

    line-height:1.55;

}

.certificate-statement strong{

    color:#2d6d2d;

}

.certificate-share-table{

    width:100%;

    margin-top:14px;

    border-collapse:collapse;

}

.certificate-share-table th,
.certificate-share-table td{

    padding:7px;

    border:1px solid #444;

    text-align:center;

    font-size:13px;

}

.certificate-footer-row{

    display:flex;

    justify-content:space-between;

    margin-top:20px;

}

.certificate-sign{

    width:30%;

    text-align:center;

}

.certificate-sign-line{

    margin-top:42px;

    padding-top:6px;

    border-top:1px solid #000;

}

.certificate-seal{

    display:flex;

    align-items:center;

    justify-content:center;

    width:92px;

    height:92px;

    margin:auto;

    border:2px dashed #777;

    border-radius:100%;

    color:rgba(102,102,102,.18);

    font-size:14px;

}

.certificate-note{

    margin-top:24px;

    color:#666;

    text-align:center;

    font-size:12px;

}


/*==================================================
GALLERY
==================================================*/

.gallery-preview{

    background:var(--light);

}

.gallery-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:50px;

}

.gallery-grid img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:20px;

    transition:.45s;

    cursor:pointer;

    box-shadow:var(--shadow);

}

.gallery-grid img:hover{

    transform:scale(1.05);

}


/*==================================================
GALLERY PAGE
==================================================*/

.gallery-page-hero{

    padding-top:190px;

    background:linear-gradient(135deg,#F7FAF4,#ffffff);

}

.gallery-page-heading{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}

.gallery-page-heading h1{

    margin-bottom:20px;

}

.gallery-page-heading p{

    font-size:18px;

}

.gallery-page-grid{

    display:grid;

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

    gap:26px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    min-height:280px;

    border:0;

    border-radius:20px;

    background:#fff;

    box-shadow:var(--shadow);

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:100%;

    min-height:280px;

    object-fit:cover;

    transition:.45s;

}

.gallery-item span{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(34,34,34,.32);

    color:#fff;

    font-size:34px;

    opacity:0;

    transition:.35s;

}

.gallery-item:hover img,
.gallery-item:focus-visible img{

    transform:scale(1.06);

}

.gallery-item:hover span,
.gallery-item:focus-visible span{

    opacity:1;

}

.gallery-lightbox{

    position:fixed;

    z-index:10000;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:34px 92px;

    background:rgba(0,0,0,.88);

}

.gallery-lightbox.is-open{

    display:flex;

}

.lightbox-open{

    overflow:hidden;

}

.lightbox-figure{

    max-width:min(1100px,100%);

    margin:0;

    text-align:center;

}

.lightbox-figure img{

    max-width:100%;

    max-height:78vh;

    border-radius:12px;

    object-fit:contain;

    box-shadow:0 25px 80px rgba(0,0,0,.35);

}

.lightbox-figure figcaption{

    margin-top:14px;

    color:#fff;

    font-weight:700;

}

.lightbox-close,
.lightbox-arrow{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:50%;

    background:#fff;

    color:var(--dark);

    cursor:pointer;

    transition:.3s;

}

.lightbox-close:hover,
.lightbox-arrow:hover{

    background:var(--primary);

    color:#fff;

}

.lightbox-close{

    top:24px;

    right:24px;

    width:48px;

    height:48px;

    font-size:22px;

}

.lightbox-arrow{

    top:50%;

    width:54px;

    height:54px;

    font-size:22px;

    transform:translateY(-50%);

}

.lightbox-arrow-prev{

    left:24px;

}

.lightbox-arrow-next{

    right:24px;

}


/*==================================================
CALL TO ACTION
==================================================*/

.cta{

    background:

    linear-gradient(135deg,#6A2CA0,#52207d);

    text-align:center;

    color:#fff;

}

.cta h2{

    color:#fff;

    margin-bottom:20px;

}

.cta p{

    color:#eee;

    max-width:760px;

    margin:auto;

    margin-bottom:40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

.cta .btn{

    background:#fff;

    color:var(--secondary);

}

.cta .btn:hover{

    background:var(--primary);

    color:#fff;

}

.cta .btn-outline{

    border-color:#fff;

    color:#fff;

}

.cta .btn-outline:hover{

    background:#fff;

    color:var(--secondary);

}


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

footer{

    background:#161616;

    color:#fff;

    padding-top:80px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.5fr;

    gap:50px;

}

.footer-logo {
    width: 280px;
    margin-bottom: 25px;
    border-radius: 20px;
}

footer p{

    color:#bbb;

}

footer h4{

    margin-bottom:25px;

    color:#fff;

}

footer ul li{

    margin-bottom:15px;

}

footer ul li a{

    color:#bbb;

}

footer ul li a:hover{

    color:var(--primary);

    padding-left:5px;

}

.social-icons{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.social-icons a{

    width:42px;

    height:42px;

    background:#2b2b2b;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    border-radius:50%;

    transition:.3s;

}

.social-icons a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

.footer-bottom{

    margin-top:70px;

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

    padding:25px 0;

    text-align:center;

}

.footer-bottom p{

    color:#999;

}


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

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

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

    z-index:999;

    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.1);

}


/*==================================================
BACK TO TOP
==================================================*/

.back-to-top{

    position:fixed;

    left:25px;

    bottom:25px;

    width:55px;

    height:55px;

    background:var(--secondary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

.back-to-top.active{

    opacity:1;

    visibility:visible;

}
/*==================================================
ANIMATIONS
==================================================*/

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes zoomIn{

    from{

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

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}


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

.service-card,
.why-card,
.stat-box,
.gallery-grid img{

    transition:all .35s ease;

}

.gallery-grid img:hover{

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

}


/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}


/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*==================================================
FORMS
==================================================*/

input,
textarea,
select{

    font-family:inherit;

}

textarea{

    resize:none;

}

input:focus,
textarea:focus{

    outline:none;

}


/*==================================================
UTILITY
==================================================*/

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}

.text-center{

    text-align:center;

}


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

.menu-toggle{

    display:none;

    cursor:pointer;

    font-size:30px;

    color:var(--dark);

}


/*==================================================
LARGE LAPTOP
==================================================*/

@media(max-width:1400px){

.hero h1{

font-size:50px;

}

.container{

width:92%;

}

}


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

@media(max-width:1024px){

.hero-grid,
.about-grid,
.membership-grid,
.membership-page-grid,
.about-page-hero-grid,
.services-page-grid,
.contact-page-grid,
.about-story-grid,
.cluster-grid,
.community-grid,
.activities-grid,
.infrastructure-grid,
.service-chain-grid{

grid-template-columns:1fr;

gap:50px;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.stats .container{

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

}

.footer-grid{

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

}

.gallery-grid{

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

}

.gallery-page-grid{

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

}

.mission-grid,
.governance-grid{

grid-template-columns:1fr;

}

.community-stats{

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

}

.activity-list{

grid-template-columns:1fr;

}

.certificate-box{

flex-direction:column;

text-align:center;

}

.certificate-form{

width:100%;

}

.validate-grid{

grid-template-columns:1fr;

gap:40px;

}

.validate-form{

grid-template-columns:1fr;

}

.certificate-result-frame{

padding:14px;

}

.share-certificate-preview{

width:100%;

min-height:auto;

padding:72px 32px 54px;

}

.certificate-company{

font-size:30px;

}

.certificate-subtitle{

font-size:21px;

}

.certificate-info-table td{

display:block;

}

.certificate-footer-row{

gap:18px;

}

}


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

@media(max-width:768px){

section{

padding:70px 0;

}

h1{

font-size:38px;

}

h2{

font-size:30px;

}

.hero{

padding-top:130px;

}

.about-page-hero{

padding-top:130px;

}

.services-page-hero,
.contact-page-hero,
.membership-page-hero,
.gallery-page-hero{

padding-top:130px;

}

.logo img{

height:95px;

}

.navbar{

height:100px;

}

.menu-toggle{

display:block;

}

nav{

position:fixed;

top:80px;

left:-100%;

width:100%;

background:#fff;

padding:30px;

transition:.35s;

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

}

nav.active{

left:0;

}

nav ul{

flex-direction:column;

gap:25px;

}

.navbar>.btn{

display:none;

}

.hero-buttons{

flex-direction:column;

}

.service-grid{

grid-template-columns:1fr;

}

.services-page-cards{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-page-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:240px;

}

.gallery-lightbox{

padding:70px 18px 34px;

}

.lightbox-arrow{

top:auto;

bottom:18px;

transform:none;

}

.lightbox-arrow-prev{

left:calc(50% - 66px);

}

.lightbox-arrow-next{

right:calc(50% - 66px);

}

.stats .container{

grid-template-columns:1fr;

}

.community-stats{

grid-template-columns:1fr;

}

.cluster-steps article{

grid-template-columns:1fr;

gap:14px;

}

.cluster-steps p{

grid-column:auto;

}

.contact-cta-box{

align-items:flex-start;

flex-direction:column;

}

.membership-office-box{

align-items:flex-start;

flex-direction:column;

}

.membership-process article{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-icons{

justify-content:center;

}

.certificate-form{

flex-direction:column;

}

.certificate-form input{

width:100%;

}

.certificate-form button{

width:100%;

}

.whatsapp{

width:55px;

height:55px;

font-size:24px;

}

.back-to-top{

width:50px;

height:50px;

}

}


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

@media(max-width:480px){

.container{

width:94%;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

.btn,
.btn-outline{

width:100%;

}

.tagline{

font-size:13px;

}

.section-title{

margin-bottom:50px;

}

.service-card,
.why-card{

padding:30px;

}

.membership-content ul li{

font-size:15px;

}

.footer-logo{

margin:auto;

margin-bottom:25px;

}

.validate-panel{

padding:24px;

}

.certificate-toolbar{

align-items:flex-start;

flex-direction:column;

}

}


/*==================================================
LOADER
==================================================*/

.preloader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.loader{

width:60px;

height:60px;

border-radius:50%;

border:5px solid #ddd;

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

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


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

header.scrolled{

background:#fff;

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

}


@media print{

@page{

size:A4 landscape;

margin:6mm;

}

header,
.validate-hero,
.certificate-toolbar,
footer,
.back-to-top{

display:none!important;

}

body,
.validate-main{

margin:0;

padding:0;

background:#fff;

}

.certificate-print-area{

display:block!important;

padding:0;

}

.certificate-print-area .container{

width:100%;

max-width:none;

margin:0;

}

.certificate-result-frame{

overflow:visible;

border:0;

border-radius:0;

padding:0;

box-shadow:none;

background:#fff;

}

.share-certificate-preview{

box-sizing:border-box;

width:285mm;

height:198mm;

min-height:198mm;

margin:0;

padding:24mm 30mm 20mm;

page-break-inside:avoid;

break-inside:avoid;

overflow:hidden;

}

.certificate-logo{

width:82px;

}

.certificate-company{

font-size:29px;

}

.certificate-subtitle{

font-size:19px;

}

.certificate-title{

margin:14px 0;

font-size:22px;

}

.certificate-info-table td{

padding:4px 8px;

font-size:13px;

}

.certificate-statement{

margin-top:14px;

font-size:14px;

line-height:1.45;

}

.certificate-share-table{

margin-top:12px;

}

.certificate-share-table th,
.certificate-share-table td{

padding:6px;

font-size:12px;

}

.certificate-footer-row{

margin-top:16px;

}

.certificate-sign-line{

margin-top:34px;

}

.certificate-seal{

width:78px;

height:78px;

font-size:12px;

}

.certificate-note{

margin-top:16px;

font-size:11px;

}

}


/*==================================================
SMOOTH CARD HOVER
==================================================*/

.service-card:hover{

background:#fff;

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

}

.why-card:hover{

background:#fff;

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

}


/*==================================================
END
==================================================*/