/* ======================================================
   style.css  –  Corporate Design System “Curved Grid”
   ====================================================== */

/* ---------- 1. Global Variables & Typography ---------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@600;700&display=swap');

:root{
    /* Split-Complementary Palette */
    --clr-primary:#005F99;
    --clr-primary-dark:#004066;
    --clr-accent:#F28C00;
    --clr-accent-dark:#C76E00;
    --clr-comp:#7AC94F;
    --clr-comp-dark:#5E9B3B;
    --clr-neutral:#F4F7FA;
    --clr-neutral-dark:#E1E6ED;
    --clr-text:#222222;
    --clr-muted:#666666;

    /* Gradients */
    --grad-primary:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-primary-dark) 100%);
    --grad-accent:linear-gradient(135deg,var(--clr-accent) 0%,var(--clr-accent-dark) 100%);
    --grad-glass:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.05));

    /* Animation */
    --transition:all .35s ease;
    --radius:.5rem;
}

/* ---------- 2. Base Styles ---------- */
html{scroll-behavior:smooth;}
body{
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
    color:var(--clr-text);
    background-color:var(--clr-neutral);
    line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Raleway',sans-serif;
    font-weight:700;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
    color:var(--clr-text);
}
section{position:relative;}

a{color:var(--clr-primary);text-decoration:none;transition:var(--transition);}
a:hover,a:focus{color:var(--clr-accent-dark);text-decoration:none;}

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

/* ---------- 3. Buttons ---------- */
.btn,
button,
input[type='submit']{
    font-family:'Raleway',sans-serif;
    font-weight:600;
    border:none;
    border-radius:var(--radius);
    padding:.65rem 1.5rem;
    background:var(--grad-primary);
    color:#fff;
    cursor:pointer;
    transition:var(--transition);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--grad-accent);
}
.btn-accent{background:var(--grad-accent);}
.btn-accent:hover{background:var(--grad-primary);}

/* ---------- 4. Navbar ---------- */
.navbar-brand{font-weight:700;}
.nav-link{font-weight:600;transition:var(--transition);}
.nav-link:hover,.nav-link:focus{color:var(--clr-accent) !important;}

/* ---------- 5. Hero Section ---------- */
#hero{
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
#hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
    z-index:1;
}
#hero .container{position:relative;z-index:2;}
#particles{pointer-events:none;z-index:2;}

/* ---------- 6. Curved Grid Helper ---------- */
.curved-bg::before{
    content:'';
    position:absolute;
    top:-70px;left:0;width:100%;height:70px;
    background:inherit;
    transform-origin:bottom left;
    transform:skewY(-3deg);
}

/* ---------- 7. Cards (unified) ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    background:#fff;
    border:none;
    border-radius:var(--radius);
    box-shadow:0 4px 10px rgba(0,0,0,.05);
    transition:var(--transition);
    text-align:center;
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 15px rgba(0,0,0,.08);}

.card-image,
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
}
.card-image img,
.image-container img{
    width:100%;height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ---------- 8. Progress Circle Placeholder ---------- */
.progress-circle{
    position:relative;
    width:110px;height:110px;
}
.progress-circle::after{
    content:attr(data-percentage) '%';
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:1rem;
}

/* ---------- 9. Timeline ---------- */
.timeline{border-left:3px solid var(--clr-primary);padding-left:1.5rem;}
.timeline-item{position:relative;padding-left:.5rem;}
.timeline-item::before{
    content:'';
    position:absolute;left:-1.26rem;top:.2rem;
    width:14px;height:14px;border-radius:50%;
    background:var(--clr-accent);
}

/* ---------- 10. Carousel controls override ---------- */
.carousel-control-prev-icon,
.carousel-control-next-icon{
    filter:invert(1) brightness(2);
}

/* ---------- 11. Resources List ---------- */
.list-group-item{
    border:none;
    padding:.75rem 1.25rem;
    transition:var(--transition);
}
.list-group-item:hover{
    background:var(--clr-neutral-dark);
}

/* ---------- 12. Contact Form ---------- */
form label{color:var(--clr-muted);font-weight:600;}
form .form-control,form .form-select{
    border-radius:var(--radius);
    transition:var(--transition);
}
form .form-control:focus,form .form-select:focus{
    box-shadow:0 0 0 .2rem rgba(0,95,153,.25);
    border-color:var(--clr-primary);
}

/* ---------- 13. Footer ---------- */
footer{
    background:var(--clr-primary-dark);
    color:#fff;
}
footer a{text-decoration:none;color:#fff;transition:var(--transition);}
footer a:hover{text-decoration:underline;color:var(--clr-accent);}

.social-link{display:inline-block;margin-right:.75rem;font-weight:600;}

/* ---------- 14. “Read more” Links ---------- */
.read-more{
    font-weight:600;
    color:var(--clr-accent);
    position:relative;
}
.read-more::after{
    content:'';
    position:absolute;bottom:-2px;left:0;width:100%;height:2px;
    background:var(--clr-accent);
    transform:scaleX(0);transform-origin:left;
    transition:var(--transition);
}
.read-more:hover::after{transform:scaleX(1);}

/* ---------- 15. Parallax Utility ---------- */
.parallax{
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

/* ---------- 16. Glassmorphism Utility ---------- */
.bg-glass{
    background:var(--grad-glass);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.25);
}

/* ---------- 17. Cookie Popup ---------- */
#cookiePopup{
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}

/* ---------- 18. Success Page ---------- */
.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* ---------- 19. Privacy & Terms Padding ---------- */
.pt-header{padding-top:100px;}

/* ---------- 20. Animations (Particles Placeholder) ---------- */
@keyframes floatUp{
    0%{transform:translateY(0) scale(1);}
    100%{transform:translateY(-100vh) scale(.6);}
}

/* ---------- 21. Utility Classes ---------- */
.text-white-important{color:#fff !important;}
.bg-primary{background:var(--grad-primary) !important;color:#fff;}
.bg-accent{background:var(--grad-accent) !important;color:#fff;}
.shadow-lg-light{box-shadow:0 8px 25px rgba(0,0,0,.08);}
.flex-center{display:flex;align-items:center;justify-content:center;}

/* ======================================================
   End of style.css
   ====================================================== */