/* ==========================================================
   Modern Pastel Theme – style.css
   Fonts
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Lato:wght@300;400;700&display=swap');

/* ==========================================================
   CSS Variables : Pastel Palette & Global Metrics
========================================================== */
:root{
    /* Core Palette */
    --primary-100:#caf0f8;
    --primary-200:#a5dffb;
    --primary-300:#8ecae6; /* main */
    --primary-400:#5fa8d3;
    --primary-500:#0077b6;

    --accent-100:#ffd6e0;
    --accent-200:#ffb4c6;
    --accent-300:#ff92ad;
    --accent-400:#ff6b8a;
    --accent-500:#ff477e;

    --neutral-000:#ffffff;
    --neutral-050:#f7f7f7;
    --neutral-100:#e9ecef;
    --neutral-200:#d6dee5;
    --neutral-800:#333333;
    --neutral-900:#222222;

    /* Gradients & Shadows */
    --gradient-primary:linear-gradient(135deg,var(--primary-300),var(--primary-400));
    --gradient-accent:linear-gradient(135deg,var(--accent-300),var(--accent-400));
    --shadow-soft:0 4px 12px rgba(0,0,0,.08);
    --shadow-card:0 6px 18px rgba(0,0,0,.12);

    /* Typography */
    --ff-heading:'Roboto',sans-serif;
    --ff-body:'Lato',sans-serif;

    /* Misc */
    --radius-sm:6px;
    --radius-md:12px;
    --transition-fast:.2s ease;
    --transition-medium:.4s cubic-bezier(.25,.8,.25,1);
}
/* ==========================================================
   Global Resets & Helpers
========================================================== */
*,*::before,*::after{box-sizing:border-box;}
body{
    font-family:var(--ff-body);
    color:var(--neutral-800);
    background-color:var(--neutral-050);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    color:var(--neutral-900);
    line-height:1.2;
    text-shadow:1px 1px 2px rgba(0,0,0,.05);
}
p{line-height:1.7;margin-bottom:1rem;}
a{text-decoration:none;color:var(--primary-400);transition:color var(--transition-fast);}
a:hover,a:focus{color:var(--primary-500);}
img{max-width:100%;height:auto;display:block;}
.section-padding{padding:4rem 0;}
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center center;}
.text-shadow{text-shadow:1px 1px 3px rgba(0,0,0,.5);}

/* ==========================================================
   Navigation
========================================================== */
.navbar{
    backdrop-filter:blur(10px);
    background-color:rgba(255,255,255,.9)!important;
    transition:background var(--transition-fast);
}
.navbar-brand{font-weight:700;font-family:var(--ff-heading);display: flex;align-items: center;}
.nav-link{font-weight:500;margin:0 .5rem;color:var(--neutral-800)!important;}
.nav-link:hover{color:var(--primary-500)!important;}
/* Burger animation */
.navbar-toggler{border:none;}
.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}

/* ==========================================================
   Buttons (Global)
========================================================== */
.btn,
button,
input[type='submit']{
    display:inline-block;
    font-family:var(--ff-heading);
    font-weight:600;
    border:none;
    border-radius:var(--radius-md);
    padding:.75rem 1.75rem;
    color:var(--neutral-000);
    background:var(--gradient-primary);
    box-shadow:var(--shadow-soft);
    transition:all var(--transition-fast);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.btn:active{transform:translateY(0);}
.btn-accent{background:var(--gradient-accent);}
.btn-outline{
    background:transparent;
    color:var(--primary-400);
    border:2px solid var(--primary-300);
}
.btn-outline:hover{
    background:var(--primary-300);
    color:var(--neutral-000);
}
/* ==========================================================
   Hero Section
========================================================== */
#hero{
    position:relative;
    text-align:center;
    color:#fff;
    padding: 8rem 0;
}
#hero .row>[class*='col']{margin-bottom:1rem;}
#hero .btn{margin-top:1.5rem;}
/* Parallax helper */
.parallax{
    background-attachment:fixed;
}
/* ==========================================================
   Vision / Generic Section Styling
========================================================== */
section{
    padding:4rem 0;
}
.timeline{
    border-left:3px solid var(--primary-300);
}
.timeline li{position:relative;padding-left:1.5rem;}
.timeline li::before{
    content:'';
    position:absolute;
    left:-10px;
    top:6px;
    width:12px;
    height:12px;
    background:var(--primary-300);
    border-radius:50%;
}
/* ==========================================================
   Cards & List Items
========================================================== */
.card{
    border:none;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    transition:transform var(--transition-fast),box-shadow var(--transition-fast);
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color:var(--neutral-000);
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.15);}
.card-image{
    width:100%;
    height:220px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--transition-medium);
}
.card:hover .card-image img{transform:scale(1.05);}
.card-content{padding:1.5rem;text-align:center;}
/* ==========================================================
   Testimonials
========================================================== */
#testimonials .card-image{height:180px;width:180px;margin-top:-90px;border-radius:50%;box-shadow:0 4px 15px rgba(0,0,0,.2);overflow:hidden;border:5px solid var(--neutral-000);}
#testimonials .card{padding-top:90px;}
/* ==========================================================
   Events Calendar
========================================================== */
.table-dark>thead>tr>th{border-bottom:0;}
.table-dark{--bs-table-bg:rgba(0,0,0,.4);--bs-table-striped-bg:rgba(255,255,255,.05);color:#fff;}
/* ==========================================================
   Contact Form
========================================================== */
#contact input,#contact textarea{
    background:rgba(255,255,255,.85);
    border:1px solid var(--neutral-100);
    border-radius:var(--radius-sm);
    transition:border var(--transition-fast),box-shadow var(--transition-fast);
}
#contact input:focus,#contact textarea:focus{
    border-color:var(--primary-300);
    box-shadow:0 0 0 .25rem rgba(0,119,182,.25);
}
.needs-validation .form-control:invalid{border-color:var(--accent-400);}
.needs-validation .form-control:invalid:focus{box-shadow:0 0 0 .25rem rgba(255,107,138,.3);}
/* ==========================================================
   Footer
========================================================== */
footer{
    font-size:.9rem;
}
footer a{color:var(--primary-200);}
footer a:hover{color:var(--primary-100);}
.social-link{margin-right:.75rem;}
/* Icon-like hover underline */
footer .list-unstyled a{
    position:relative;
}
footer .list-unstyled a::after{
    content:'';
    position:absolute;
    left:0;bottom:-2px;
    width:0;height:2px;
    background:var(--primary-200);
    transition:width var(--transition-fast);
}
footer .list-unstyled a:hover::after{width:100%;}
/* ==========================================================
   Success Page
========================================================== */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-primary);
    color:#fff;
    text-align:center;
}
/* ==========================================================
   Privacy & Terms Padding Fix
========================================================== */
.page-legal{
    padding-top:100px;
}
/* ==========================================================
   Read More Links
========================================================== */
.read-more{
    color:var(--accent-400);
    font-weight:600;
    position:relative;
}
.read-more::after{
    content:'→';
    margin-left:.25rem;
    transition:transform var(--transition-fast);
}
.read-more:hover::after{transform:translateX(3px);}
/* ==========================================================
   Utility Classes
========================================================== */
.glass{
    background:rgba(255,255,255,.4);
    backdrop-filter:blur(12px);
    border-radius:var(--radius-md);
}
.text-center-all{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.is-two-thirds{flex:0 0 66.666%;}
/* Smooth Fade & Slide with ScrollReveal/GSAP triggers */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
/* ==========================================================
   Micro-Animations
========================================================== */
@keyframes pulse{
    0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}
}
.pulse:hover{animation:pulse 1s infinite;}
/* Button ripple */
.btn-ripple{
    position:relative;overflow:hidden;
}
.btn-ripple::after{
    content:'';
    position:absolute;
    top:0;left:50%;
    width:0;height:100%;
    background:rgba(255,255,255,.3);
    transform:translateX(-50%);
    transition:width .4s ease;
}
.btn-ripple:hover::after{width:120%;}
/* ==========================================================
   Parallax Helper Classes
========================================================== */
.parallax-bg{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
/* ==========================================================
   Media Queries
========================================================== */
@media (max-width:991.98px){
    .navbar{background-color:var(--neutral-000)!important;}
    .timeline{border:none;}
}