/*
Theme Name: YCN Dev Theme
Author: Google DeepMind
Description: Custom theme for YCN Dev with Yellow/Blue branding.
Version: 1.1
*/

:root {
    --color-primary: #F5C542;
    /* Yellow */
    --color-secondary: #0E1648;
    /* Dark Blue */
    --color-accent: #2A3867;
    /* Medium Blue */
    --color-text: #333;
    --color-white: #ffffff;
    --font-family-base: 'Poppins', sans-serif;
    /* Updated font */
    --container-width: 1200px;
}

/* Import Poppins */
/* Import Poppins and Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

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

body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-white);
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header Styles (New Clean Layout) --- */
.site-header {
    background-color: transparent;
    /* Transparent background */
    padding: 20px 0;
    position: absolute;
    /* Overlay on top of hero */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.site-header.scrolled {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.site-header.scrolled .main-navigation ul {
    background-color: transparent;
    box-shadow: none;
    padding: 5px 20px;
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Left, Center, Right */
    align-items: center;
}

.logo-area .logo-link {
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-logo-link {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-icon svg {
    display: block;
}

.logo-icon {
    width: 250px;
    padding: 1rem;
}

.logo-icon .custom-logo,
.logo-icon .site-logo-image {
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
}

.site-branding-text {
    display: flex;
    flex-direction: column;
}

.site-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-secondary);
    font-family: 'Playfair Display', serif;
    text-transform: lowercase;
    margin: 0;
    line-height: 1;
}

.service-yellow {
    background-color: #0E1648 !important;
    /* background:
        repeating-conic-gradient(
            from 0deg,
            #F5C542 0deg 5deg,
            #dce3f0 15deg 30deg
        ); */

}

.site-tagline {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 5px;
}

/* Ensure Nav is centered */
.main-navigation {
    display: flex;
    justify-content: center;
}

.main-navigation ul {
    display: flex;
    gap: 30px;
    background-color: rgba(240, 240, 240, 0.95);
    /* Gray Pill */
    padding: 15px 40px;
    border-radius: 50px;
    /* Pill shape */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    backdrop-filter: blur(5px);
}

.main-navigation a {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.1rem;
    /* Increased from 0.9rem */
    color: #000;
    letter-spacing: 1px;
    padding: 10px 0;
    position: relative;
}

/* Ensure Right side is aligned right */
.header-actions {
    display: flex;
    justify-content: flex-end;
}

.main-navigation a:hover {
    color: var(--color-accent);
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.main-navigation a:hover::after {
    width: 100%;
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    padding: 180px 0 120px;
    /* Increased top padding to account for absolute header */
    background-color: #f4f6f9;
    /* Background image moved to pseudo-element for opacity */
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 100vh;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/img1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    filter: blur(5px);
    transform: scale(1.1);
    z-index: 1;
}

.hero-content {
    /* max-width: 700px; */
    z-index: 2;
    position: relative;
    width: 100%;
    /* Ensure container takes width to position relative elements */
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Side Floating Icons */
.side-floating-icons {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 999;
}

.side-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(14, 22, 72, 0.85);
    /* Dark Blue Glass */
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
}

.side-icon i {
    font-size: 24px;
}

.side-icon:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    transform: scale(1.1) translateX(-5px);
}

/* Tooltip */
.side-icon::before {
    content: attr(data-label);
    position: absolute;
    right: 125%;
    top: 50%;
    transform: translateY(-50%) translateX(15px);
    background-color: var(--color-secondary);
    color: #fff;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.side-icon::after {
    content: '';
    position: absolute;
    right: 110%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: var(--color-secondary);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.side-icon:hover::before,
.side-icon:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.hero-title {
    font-size: 3.5rem;
    color: var(--color-secondary);
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: left !important;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 40px;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.btn {
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    display: inline-block;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-secondary);
    /* Dark Blue */
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(14, 22, 72, 0.3);
}

.btn-secondary {
    background-color: transparent;
    /* Transparent/Outline */
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    /* Matching image: Outline style */
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* --- Reveal Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Specific delays for sequence */
.hero-title.revealed {
    transition-delay: 0.1s;
}

.hero-subtitle.revealed {
    transition-delay: 0.2s;
}

.hero-buttons.revealed {
    transition-delay: 0.3s;
}

/* --- Services Section --- */
.services-section {
    padding: 100px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2x2 grid as per image */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.service-card {
    background: #dce3f0;
    border: 1px solid var(--color-secondary);
    /* Blue border as requested */
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(14, 22, 72, 0.1);
    border-color: var(--color-primary);
}

.service-title {
    font-size: 1.6rem;
    color: var(--color-secondary);
    margin-bottom: 20px;
    font-weight: 700;
    /* font-family: Serif? No, looks like Slab or Serif in image? 
       Actually Image 3 "Assistance Telephonique" looks like a serif? 
       "Le Standard Ideal" looks massive serif. 
       Let's use a serif for headings if requested "meme police". 
       But user said "meme police" for header and pages. The header is sans. 
       The service cards titles look like 'Georgia' or 'Playfair Display'? 
       Let's stick to Poppins for now unless user complains, or maybe use a serif for these.
    */
    font-family: 'Poppins', sans-serif;
    /* Sticking to safe choice */
}

.service-desc {
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
    font-weight: 500;
}

/* --- Welcome / Stats --- */
.welcome-section {
    background-color: #dce3f0;
    /* Light blue/gray match */
    padding: 100px 0;
    text-align: center;
}

.welcome-section {
    background-color: #dce3f0;
    padding: 100px 0;
    text-align: center;
}

.welcome-title {
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 30px;
    font-weight: 300;
    /* Thin for "Bienvenue A" */
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
}

.welcome-title .highlight-text {
    display: block;
    font-size: 3.5rem;
    font-weight: 500;
    /* Thicker for "YCN Dev" */
    margin-top: 10px;
    color: #0E1648;
}

.welcome-text {
    max-width: 800px;
    margin: 0 auto 80px;
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 5rem;
    font-weight: 700;
    color: var(--color-secondary);
    font-family: 'Playfair Display', serif;
    /* Serif font for numbers as per image */
    display: block;
    margin-bottom: 5px;
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15);
    /* Drop shadow effect */
    line-height: 1;
}

.stat-label {
    font-size: 1.4rem;
    color: #444;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    max-width: 200px;
    margin: 0 auto;
}

/* --- Outsourcing Section --- */
.outsourcing-section {
    padding: 80px 0;
    text-align: center;
}

.outsourcing-box {
    background-color: var(--color-secondary);
    /* Dark Blue */
    color: #fff;
    padding: 60px 40px;
    border-radius: 30px;
    /* Rounded corners */
    max-width: 900px;
    margin: 0 auto 50px;
    /* Spacing below box */
    box-shadow: 0 10px 30px rgba(14, 22, 72, 0.2);
}

.outsourcing-title {
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
}

.outsourcing-text {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    letter-spacing: 0.2px;
}

.btn-yellow-large {
    background-color: var(--color-secondary);
    color: #ffffff;
    padding: 15px 45px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    display: inline-block;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(14, 22, 72, 0.3);
}

/* Button Hover Effects */
.btn-primary:hover {
    background-color: var(--color-primary);
    /* Yellow */
    color: var(--color-secondary);
    /* Dark Blue */
    transform: translateY(-2px);
}

.btn-secondary:hover {
    background-color: var(--color-secondary);
    /* Dark Blue */
    color: #fff;
    border-color: var(--color-secondary);
    transform: translateY(-2px);
}

.btn-yellow-large:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    transform: translateY(-2px);
}

/* --- Footer Styles (New Yellow Layout) --- */
.site-footer {
    width: 100%;
}

.footer-content {
    background-color: var(--color-primary);
    /* Yellow */
    padding: 80px 0;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* 2 columns as per image */
    gap: 100px;
    align-items: flex-start;
}

.footer-links h3,
.footer-contact h3,
.footer-hours h3 {
    /* Include Hours title in consistent styling */
    font-size: 1.1rem;
    color: var(--color-secondary);
    margin-bottom: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
}

.footer-links h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-accent);
}

.footer-contact h3::after,
.footer-hours h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-secondary);
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--color-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--color-accent);
    transform: translateX(5px);
}

.footer-branding {
    padding-right: 50px;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
}

.footer-logo-img {
    max-height: 60px;
}

.footer-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-secondary);
    font-family: 'Playfair Display', serif;
    margin: 0;
    line-height: 1;
}

.footer-tagline {
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-top: 8px;
    font-family: 'Poppins', sans-serif;
    display: block;
}

.footer-hours {
    margin-top: 50px;
}

/* Removed redundant footer-hours h3 class as it's now global in footer */

.footer-hours ul li {
    font-size: 0.95rem;
    color: var(--color-secondary);
    /* Dark text */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-hours .bullet {
    font-size: 1.5rem;
    line-height: 0;
    color: var(--color-secondary);
}

/* Right Column Contact */
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally within col */
    text-align: center;
}

.footer-contact h3 {
    width: 100%;
    margin-bottom: 30px;
}

.footer-contact h3::after {
    left: 50%;
    transform: translateX(-50%);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    margin-top: 30px;
    text-align: left;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 0.95rem;
    color: var(--color-secondary);
}

.contact-item i {
    font-size: 1.3rem;
    color: var(--color-secondary);
    width: 20px;
    margin-top: 2px;
}

.address-text {
    line-height: 1.5;
}

/* Footer Bottom Gray Bar */
.footer-bottom {
    background-color: #dadddf;
    /* Gray/Silver */
    padding: 20px 0;
    text-align: center;
}

/* --- Responsive Design --- */

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
    .hero-title {
        font-size: 3rem;
    }

    .stats-grid {
        gap: 40px;
    }

    .stat-number {
        font-size: 4rem;
    }

    .footer-title {
        font-size: 2.8rem;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {

    /* Header Responsive */
    .site-header {
        padding: 10px 0;
        position: fixed;
        /* Always fixed on mobile for better UX */
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .header-inner {
        display: flex;
        flex-direction: row;
        /* Keep logo and nav in row if possible, or stack if too many items */
        justify-content: space-between;
        padding: 0 15px;
    }

    .logo-area .logo-link img {
        max-height: 40px !important;
    }

    .main-navigation ul {
        display: none;
        /* In a real app we'd add a hamburger, for now let's simplify or keep pill but smaller */
        /* Let's keep the pill but make it a bottom bar or similar for "responsive functionalities" */
    }

    /* Better Mobile Nav Approach */
    .main-navigation {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        width: 90%;
    }

    .main-navigation ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 10px;
        padding: 10px 15px;
        background-color: var(--color-secondary);
        border-radius: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .main-navigation a {
        color: #fff;
        font-size: 0.7rem;
        padding: 5px;
    }

    .main-navigation a::after {
        display: none;
    }

    /* Hero */
    .hero-section {
        padding: 120px 0 60px;
        text-align: center;
    }

    .hero-title {
        font-size: 2.2rem;
        text-align: center !important;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    /* Floating Icons on Mobile */
    .side-floating-icons {
        right: 15px;
        bottom: 30px;
        top: auto;
        transform: none;
        gap: 15px;
    }

    .side-icon {
        width: 50px;
        height: 50px;
    }

    .side-icon::before,
    .side-icon::after {
        display: none;
        /* Hide tooltips on mobile */
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        /* Stack vertically */
        padding: 0 20px;
    }

    /* Welcome / Stats */
    .welcome-title {
        font-size: 2rem;
    }

    .welcome-title .highlight-text {
        font-size: 2.5rem;
    }

    .stats-grid {
        flex-direction: column;
        gap: 50px;
    }

    .stat-number {
        font-size: 3.5rem;
    }

    /* Outsourcing */
    .outsourcing-box {
        padding: 40px 20px;
    }

    .outsourcing-title {
        font-size: 2.2rem;
        font-family: 'Playfair Display', serif;
    }

    /* Footer */
    .footer-inner {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 40px;
        text-align: center;
    }

    .footer-col {
        width: 100%;
    }

    .footer-links ul,
    .footer-contact,
    .contact-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo-wrapper {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Back to Top Button --- */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    transform: translateY(-5px) scale(1.1);
}

#back-to-top .dashicons {
    font-size: 30px;
    width: 30px;
    height: 30px;
}

/* --- Carousel Section --- */
.custom-carousel-section {
    padding: 50px 0;
    text-align: center;
}

.mainCarousel {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    padding-bottom: 50px;
}

.carousel-image-wrapper {
    width: 100%;
    height: 600px;
    /* Increased height for better visibility */
    overflow: hidden;
    border-radius: 30px;
}

.carousel-image-wrapper img {
    width: 80%;
    height: 90%;
    object-fit: cover;
    /* Ensures high quality fill without distortion */
    image-rendering: -webkit-optimize-contrast;
    /* Webkit optimization for clarity */
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.swiper-slide-active .carousel-image-wrapper img {
    transform: scale(1.05);
}

/* Swiper Customization */
.swiper-pagination-bullet {
    background: var(--color-secondary) !important;
    opacity: 0.3;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 20px !important;
    border-radius: 5px !important;
    transition: all 0.3s ease;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--color-primary) !important;
    background: rgba(14, 22, 72, 0.5);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.2rem !important;
    font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--color-secondary);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .carousel-image-wrapper {
        height: 300px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/* CONTACT PAGE */

.contact-page {
    background-color: #dce3f0 !important;
    padding-top: 120px !important;
    padding-bottom: 100px !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 80vh;
}

/* Background Decorations */
.contact-page .color-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
    animation: floatBlob 20s infinite alternate ease-in-out;
}

.contact-page .blob-1 {
    width: 500px;
    height: 500px;
    background: #F5C542;
    top: -150px;
    left: -150px;
}

.contact-page .blob-2 {
    width: 400px;
    height: 400px;
    background: #0E1648;
    bottom: 10%;
    right: -100px;
    animation-duration: 25s;
}

.contact-page .blob-3 {
    width: 300px;
    height: 300px;
    background: #F5C542;
    top: 40%;
    left: 15%;
    animation-duration: 18s;
}

@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(60px, 120px) scale(1.1);
    }
}

/* Hero Section */
.contact-hero-modern {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 10;
}

.contact-hero-modern .modern-badge {
    background: rgba(245, 197, 66, 0.15);
    color: #0E1648;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 25px;
}

.contact-hero-modern .modern-hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #0E1648;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 25px;
}

.contact-page .highlight-yellow {
    color: #F5C542;
    position: relative;
    display: inline-block;
}

.contact-hero-modern .modern-hero-subtitle {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.2rem;
    color: #64748b;
    line-height: 1.7;
}

/* Quick Contact Grid */
.quick-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 100px;
    position: relative;
    z-index: 10;
}

.contact-card {
    background: #fff;
    opacity: 0.8;
    padding: 50px 40px;
    border-radius: 30px;
    text-align: center;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.contact-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px -12px rgba(14, 22, 72, 0.15);
    border-color: #F5C542;
}

.contact-card .card-icon {
    width: 70px;
    height: 70px;
    background: #0E1648;
    color: #F5C542;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 25px;
    transition: all 0.5s ease;
}

.contact-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    background: #F5C542;
    color: #0E1648;
}

.contact-card h3 {
    font-size: 1.5rem;
    color: #0E1648;
    margin-bottom: 12px;
    font-weight: 700;
}

.contact-card p {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 20px;
}

.contact-card .card-link {
    color: #0E1648;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
}

/* Main Wrapper */
.modern-contact-wrapper {
    display: flex;
    gap: 50px;
    position: relative;
    z-index: 10;
}

.modern-form-container {
    flex: 1.4;
}

.modern-info-container {
    flex: 1;
}

.modern-form-card {
    background: #ffffff;
    padding: 60px;
    border-radius: 40px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

.form-header {
    margin-bottom: 45px;
}

.form-header h2 {
    font-size: 2.2rem;
    color: #0E1648;
    margin-bottom: 10px;
    font-weight: 700;
}

/* Form Fields */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group.floating {
    position: relative;
    margin-bottom: 35px;
}

.form-group.floating input,
.form-group.floating textarea {
    width: 100%;
    padding: 20px;
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    font-size: 1rem;
    background: #f8fafc;
    transition: all 0.3s ease;
    outline: none;
}

.form-group.floating label {
    position: absolute;
    left: 20px;
    top: 22px;
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-group.floating input:focus,
.form-group.floating textarea:focus,
.form-group.floating input:not(:placeholder-shown),
.form-group.floating textarea:not(:placeholder-shown) {
    border-color: #F5C542;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(245, 197, 66, 0.15);
}

.form-group.floating input:focus~label,
.form-group.floating textarea:focus~label,
.form-group.floating input:not(:placeholder-shown)~label,
.form-group.floating textarea:not(:placeholder-shown)~label {
    top: -12px;
    left: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0E1648;
    background: #fff;
    padding: 0 10px;
}

.modern-btn-submit {
    width: 100%;
    padding: 22px;
    background: linear-gradient(135deg, #0E1648 0%, #2A3867 100%);
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.4s ease;
}

.modern-btn-submit:hover {
    background: #F5C542;
    color: #0E1648;
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(245, 197, 66, 0.3);
}

/* Info Card */
.modern-info-card {
    height: 100%;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background: #0E1648;
}

.info-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
}

.modern-info-content {
    position: relative;
    z-index: 10;
}

.info-main-title {
    font-size: 2.8rem;
    line-height: 1.1;
    margin: 25px 0 50px;
    font-weight: 700;
}

.modern-social-links {
    display: flex;
    gap: 20px;
}

.m-social-btn {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.m-social-btn:hover {
    background: #F5C542;
    color: #0E1648;
    transform: translateY(-8px);
}

/* Responsive */
@media (max-width: 1200px) {
    .modern-contact-wrapper {
        flex-direction: column;
    }

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

@media (max-width: 768px) {
    .contact-page {
        padding-top: 100px !important;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

    .modern-form-card,
    .modern-info-card {
        padding: 40px 25px;
    }
}

/* --- About Page Styles --- */
.about-page {
    overflow-x: hidden;
}

.section-padding {
    padding: 100px 0;
}

.dark-bg {
    background-color: var(--color-secondary);
}

.highlight-yellow {
    color: var(--color-primary);
}

.white-text {
    color: #fff !important;
}

/* About Hero */
.about-hero {
    height: 70vh;
    min-height: 500px;
    background: linear-gradient(135deg, #0E1648 0%, #1a2a6c 100%);
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    padding-top: 80px;
}

.about-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(245, 197, 66, 0.15);
    color: var(--color-primary);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.about-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
}

.about-hero-title span {
    color: var(--color-primary);
}

.about-hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 600px;
    line-height: 1.6;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.hero-scroll-indicator .mouse {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    position: relative;
}

.hero-scroll-indicator .mouse::after {
    content: '';
    width: 4px;
    height: 8px;
    background: #fff;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scrollMouse 2s infinite;
}

@keyframes scrollMouse {
    0% {
        opacity: 1;
        top: 8px;
    }

    100% {
        opacity: 0;
        top: 25px;
    }
}

/* Welcome Section */
.welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.welcome-text-side .section-title {
    font-size: 2.8rem;
    margin-bottom: 30px;
    color: var(--color-secondary);
}

.welcome-text-side p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #4b5563;
}

.lead-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-secondary) !important;
}

.welcome-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.stat-box {
    display: flex;
    flex-direction: column;
}

.stat-val {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-primary);
}

.stat-lab {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-transform: uppercase;
}

.welcome-image-side .image-stack {
    position: relative;
}

.image-stack .main-img {
    width: 100%;
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: var(--color-primary);
    padding: 30px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 20px 40px rgba(245, 197, 66, 0.3);
}

.experience-badge .years {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-secondary);
    line-height: 1;
}

.experience-badge .text {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-secondary);
    text-align: center;
}

/* Expertise Section */
.expertise-section .section-header {
    text-align: center;
    margin-bottom: 70px;
}

.expertise-section .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.expertise-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 50px 40px;
    border-radius: 40px;
    transition: all 0.4s ease;
    color: #fff;
}

.expertise-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-15px);
    border-color: var(--color-primary);
}

.expertise-card .card-icon {
    width: 70px;
    height: 70px;
    background: var(--color-primary);
    color: var(--color-secondary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.expertise-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.expertise-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
    margin-bottom: 25px;
}

.card-features {
    list-style: none;
    padding: 0;
}

.card-features li {
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-features li i {
    color: var(--color-primary);
    font-size: 0.8rem;
}

/* Missions & Values */
.missions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.mission-box,
.value-box {
    padding: 60px;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}

.mission-box {
    background: #f8fafc;
}

.value-box {
    background: var(--color-secondary);
    color: #fff;
}

.box-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 30px;
}

.mission-box h2,
.value-box h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.mission-box p,
.value-box p {
    font-size: 1.05rem;
    line-height: 1.8;
    opacity: 0.9;
    margin-bottom: 30px;
}

.accent-quote {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-style: italic;
    color: var(--color-secondary);
    border-left: 4px solid var(--color-primary);
    padding-left: 20px;
    margin: 0;
}

.value-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.value-tags span {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive About */
@media (max-width: 1024px) {
    .expertise-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {

    .welcome-grid,
    .expertise-grid,
    .missions-grid {
        grid-template-columns: 1fr;
    }

    .section-padding {
        padding: 60px 0;
    }

    .welcome-grid {
        gap: 40px;
    }

    .welcome-text-side .section-title {
        font-size: 2.2rem;
    }

    .experience-badge {
        position: static;
        margin-top: 30px;
        width: 100%;
        box-shadow: none;
    }

    .mission-box,
    .value-box {
        padding: 40px 25px;
    }

    .expertise-card {
        padding: 40px 25px;
    }
}

/* Final cleanup for reveal classes in main styles */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}