/* style.css */

/* CSS Variables for Tetradic Color Scheme */
:root {
    /* Primary Colors */
    --color-primary: #FF6F61; /* Coral */
    --color-secondary: #6B5B95; /* Indigo */
    --color-accent1: #88B04B; /* Greenish */
    --color-accent2: #F7CAC9; /* Pinkish */

    /* Dark and Light Shades */
    --color-dark: #0A0A0A;
    --color-light: #FFFFFF;
    --color-overlay: rgba(0, 0, 0, 0.5);

    /* Gradients */
    --gradient-background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-overlay: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

    /* Fonts */
    --font-header: 'Space Grotesk', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Transition and Animation */
    --transition-speed: 0.3s;
    --animation-bounce: bounce 1s infinite;

    /* Glasmorphism */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.3);

    /* Utility Colors */
    --color-text-dark: #333333;
    --color-text-light: #FFFFFF;
    --color-link: var(--color-accent1);
    --color-link-hover: var(--color-accent2);
}

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

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: #f0f0f0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
    color: var(--color-text-light);
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
}

p {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

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

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: var(--gradient-background);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-family: var(--font-header);
    font-size: 1.5rem;
    color: var(--color-text-light) !important;
}

.nav-link {
    font-family: var(--font-body);
    color: var(--color-text-light) !important;
    transition: color var(--transition-speed);
}

.nav-link:hover {
    color: var(--color-accent1) !important;
}

/* Hero Section */
#hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    animation: fadeIn 2s ease-in-out;
}

#hero .overlay {
    backdrop-filter: blur(5px);
}

#hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
}

#hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

#hero .btn {
    font-family: var(--font-body);
    background-color: var(--color-primary);
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#hero .btn:hover {
    background-color: var(--color-accent1);
    transform: scale(1.05);
}

/* History Section */
#history {
    padding: 4rem 0;
    background-color: var(--color-light);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

#history img {
    border-radius: 10px;
    transition: transform 0.3s ease;
}

#history img:hover {
    transform: scale(1.05);
}

#history p {
    font-size: 1rem;
    color: var(--color-text-dark);
}

/* Mission Section */
#mission {
    background: var(--gradient-background);
    color: var(--color-text-light);
    padding: 4rem 0;
    text-align: center;
}

#mission p {
    max-width: 800px;
    margin: 0 auto;
}

/* Behind the Scenes Section */
#behind-the-scenes {
    padding: 4rem 0;
    background-color: var(--color-light);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

#behind-the-scenes img {
    border-radius: 10px;
    transition: transform 0.3s ease;
}

#behind-the-scenes img:hover {
    transform: scale(1.05);
}

#behind-the-scenes p {
    font-size: 1rem;
    color: var(--color-text-dark);
}

/* Case Studies Section */
#case-studies {
    background-color: var(--color-light);
    padding: 4rem 0;
}

#case-studies .card {
    backdrop-filter: blur(5px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

#case-studies .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

#case-studies .card-title {
    font-family: var(--font-header);
    color: var(--color-text-dark);
}

#case-studies .card-text {
    font-family: var(--font-body);
    color: var(--color-text-dark);
}

/* Statistics Section */
#statistics {
    padding: 4rem 0;
    background: var(--gradient-overlay);
    color: var(--color-text-light);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat-widget .number {
    font-size: 3rem;
    font-family: var(--font-header);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    animation: count 2s ease-out;
}

.stat-widget p {
    font-family: var(--font-body);
    font-size: 1rem;
}

/* External Resources Section */
#external-resources {
    background-color: var(--color-light);
    padding: 4rem 0;
}

#external-resources ul {
    list-style: none;
}

#external-resources li {
    margin-bottom: 1.5rem;
    transition: transform var(--transition-speed);
}

#external-resources li:hover {
    transform: translateX(10px);
}

#external-resources a {
    font-family: var(--font-body);
    font-weight: bold;
    color: var(--color-secondary);
}

#external-resources p {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    margin-top: 0.5rem;
}

/* Contact Section */
#contact {
    padding: 4rem 0;
    background: var(--gradient-background);
    color: var(--color-text-light);
}

#contact form {
    background: var(--glass-bg);
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

#contact label {
    font-family: var(--font-body);
    color: var(--color-text-light);
}

#contact .form-control {
    font-family: var(--font-body);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--color-light);
}

#contact .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#contact .form-control:focus {
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    box-shadow: 0 0 5px var(--color-accent1);
}

#contact .btn {
    font-family: var(--font-body);
    background-color: var(--color-primary);
    border: none;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

#contact .btn:hover {
    background-color: var(--color-accent1);
    transform: scale(1.05);
}

/* Footer */
footer {
    background-color: var(--color-dark);
    color: var(--color-text-light);
    padding: 2rem 0;
}

footer h5 {
    font-family: var(--font-header);
    margin-bottom: 1rem;
}

footer ul {
    list-style: none;
}

footer ul li {
    margin-bottom: 0.5rem;
}

footer a {
    color: var(--color-text-light);
    transition: color var(--transition-speed);
}

footer a:hover {
    color: var(--color-accent1);
    text-decoration: underline;
}

footer .social-links a {
    margin-right: 1rem;
    font-family: var(--font-body);
    transition: color var(--transition-speed);
}

footer .social-links a:hover {
    color: var(--color-accent1);
}

footer p {
    font-family: var(--font-body);
    margin-top: 1rem;
}

/* Cookie Popup */
#cookiePopup {
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    padding: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(5px);
}

#cookiePopup button {
    background-color: var(--color-primary);
    border: none;
    padding: 10px 20px;
    font-family: var(--font-body);
    color: var(--color-light);
    cursor: pointer;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

#cookiePopup button:hover {
    background-color: var(--color-accent1);
    transform: scale(1.05);
}

/* Success Page */
.success-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-background);
    color: var(--color-text-light);
    text-align: center;
    padding: 2rem;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.vh-100 {
    height: 100vh;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-speed) ease-out, transform var(--transition-speed) ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Media Queries */
@media (max-width: 992px) {
    #history, #behind-the-scenes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    header .navbar-brand {
        font-size: 1.2rem;
    }

    #hero h1 {
        font-size: 2rem;
    }

    #statistics .stat-widget .number {
        font-size: 2rem;
    }

    .success-page {
        padding: 1rem;
    }
}

/* Animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes count {
    from { counter-increment: 0; }
    to { counter-increment: 100; }
}

/* Specific Pages Padding */
.privacy-page, .terms-page {
    padding-top: 100px;
}

/* Button Styles */
.btn-primary {
    background-color: var(--color-primary);
    border: none;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.btn-primary:hover {
    background-color: var(--color-accent1);
    transform: scale(1.05);
}

/* Form Validation */
.was-validated .form-control:invalid {
    border-color: #dc3545;
}

.was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25);
}

.was-validated .form-control:valid {
    border-color: #198754;
}

.was-validated .form-control:valid:focus {
    box-shadow: 0 0 0 0.2rem rgba(25,135,84,0.25);
}

/* Parallax Effect */
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Glasmorphism Effect */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

/* Read More Links */
.read-more {
    font-family: var(--font-body);
    color: var(--color-accent1);
    font-weight: bold;
    transition: color var(--transition-speed);
}

.read-more:hover {
    color: var(--color-accent2);
    text-decoration: underline;
}

/* Social Icons Text */
.social-links a {
    font-family: var(--font-body);
    color: var(--color-text-light);
    transition: color var(--transition-speed);
}

.social-links a:hover {
    color: var(--color-accent1);
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Utility Classes for Padding and Margin */
.p-3 {
    padding: 1rem !important;
}

.m-3 {
    margin: 1rem !important;
}
.navbar-toggler{
    display: none;
}
.success-page {
    min-height: 100vh;
    display: flex
;
    align-items: center;
    justify-content: center;
    background: var(--gradient-background);
    color: var(--color-text-light);
    text-align: center;
    padding: 2rem;
    flex-direction: column;
}