/* ============================================

   GLOBAL STYLES & VARIABLES

   ============================================ */



:root {

    --primary-color: #ff8c00;

    --secondary-color: #ff9f1c;

    --accent-color: #1a1a1a;

    --dark-color: #1a1a1a;

    --light-color: #f9fafb;

    --text-color: #374151;

    --border-color: #e5e7eb;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

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

    color: var(--text-color);

    line-height: 1.6;

    background-color: #ffffff;

}





/* ============================================

   TYPOGRAPHY

   ============================================ */



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 700;

    color: var(--dark-color);

}



.section-title {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Captions for Key Highlights, Our Core Values, and Our Segments */

#highlights .section-title,

#core-values .section-title,

#segments .section-title {

    background: none;

    background-clip: border-box;

    -webkit-background-clip: border-box;

    -webkit-text-fill-color: #5c0601;

    color: #5c0601;

}



.section-subtitle {

    font-size: 1.1rem;

    color: #6b7280;

    font-weight: 500;

}





/* ============================================

   BUTTONS

   ============================================ */



.btn {

    font-weight: 600;

    border-radius: 8px;

    padding: 0.75rem 1.5rem;

    transition: var(--transition);

    border: none;

    cursor: pointer;

}



.btn-primary {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    box-shadow: var(--shadow-md);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);

    color: white;

}



.btn-outline-primary {

    color: var(--primary-color);

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

    background: transparent;

}



.btn-outline-primary:hover {

    background: var(--primary-color);

    color: white;

    transform: translateY(-2px);

}



.btn-lg {

    padding: 1rem 2rem;

    font-size: 1.1rem;

}





/* ============================================

   HEADER & NAVIGATION

   ============================================ */



.navbar-section {

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    box-shadow: var(--shadow-sm);

    position: sticky;

    top: 0;

    z-index: 1000;

}



.navbar {

    padding: 1rem 0;

}



.navbar-brand {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-weight: 700;

    font-size: 1.5rem;

    text-decoration: none;

    color: var(--dark-color) !important;

}



.navbar-logo {

    height: 50px;

    width: auto;

    object-fit: contain;

    transition: var(--transition);

}



.navbar-brand:hover .navbar-logo {

    transform: scale(1.05);

}



.brand-logo {

    width: 40px;

    height: 40px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    font-weight: 700;

    font-size: 0.9rem;

}



.brand-text {

    font-family: 'Playfair Display', serif;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.nav-link {

    font-weight: 500;

    color: var(--text-color) !important;

    margin: 0 0.5rem;

    position: relative;

    transition: var(--transition);

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 2px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transition: var(--transition);

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.nav-link:hover {

    color: var(--primary-color) !important;

}



.navbar-toggler {

    border: none;

}



.navbar-toggler:focus {

    box-shadow: none;

    outline: none;

}





/* ============================================

   HERO SECTION

   ============================================ */



.hero-section {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    overflow: hidden;

    position: relative;

}



.hero-section::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.1), transparent);

    border-radius: 50%;

    animation: float 6s ease-in-out infinite;

}



.hero-section::after {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -5%;

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, rgba(255, 159, 28, 0.1), transparent);

    border-radius: 50%;

    animation: float 8s ease-in-out infinite reverse;

}



.hero-content {

    z-index: 2;

    animation: slideInLeft 0.8s ease-out;

    padding-left: 3rem;

    padding-right: 2rem;

}



.hero-title {

    font-family: 'Playfair Display', serif;

    font-size: 3.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    color: var(--dark-color);

    line-height: 1.2;

}



.hero-subtitle {

    font-size: 1.5rem;

    color: var(--primary-color);

    font-weight: 600;

    margin-bottom: 1rem;

}



.hero-description {

    font-size: 1.1rem;

    color: #6b7280;

    margin-bottom: 2rem;

    max-width: 500px;

}



.hero-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.hero-image {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    animation: slideInRight 0.8s ease-out;

}



.floating-card {

    width: 300px;

    height: 300px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-xl);

    animation: float 4s ease-in-out infinite;

}



.card-content {

    text-align: center;

    color: white;

}



.card-content i {

    font-size: 4rem;

    margin-bottom: 1rem;

    display: block;

}



.card-content h3 {

    color: white;

    font-size: 1.5rem;

}





/* ============================================

   KEY HIGHLIGHTS SECTION

   ============================================ */



.highlights-section {

    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    position: relative;

    overflow: hidden;

    padding: 5rem 0;

}



.highlights-section::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 8s ease-in-out infinite;

}



.highlights-section::after {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -5%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(16, 185, 129, 0.08), transparent);

    border-radius: 50%;

    animation: float 10s ease-in-out infinite reverse;

}



.highlight-card {

    background: white;

    border-radius: 20px;

    padding: 2.5rem 2rem;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    border: 2px solid transparent;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: 100%;

    min-height: 350px;

}



.highlight-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 5px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}



.highlight-card:hover::before {

    transform: scaleX(1);

}



.highlight-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 20px 40px rgba(255, 140, 0, 0.15);

    border-color: rgba(255, 140, 0, 0.2);

}



.highlight-number {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--primary-color);

    opacity: 0.2;

    margin-bottom: 1rem;

}



.highlight-icon {

    width: 80px;

    height: 80px;

    background: white;

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

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.2rem;

    color: var(--primary-color);

    margin-bottom: 1.5rem;

    transition: var(--transition);

    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.3);

    animation: iconFloat 3s ease-in-out infinite;

}



.highlight-card:hover .highlight-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: scale(1.12) rotate(-5deg);

    box-shadow: 0 12px 32px rgba(255, 140, 0, 0.4);

}



.highlight-card h3 {

    font-size: 1.4rem;

    margin-bottom: 1rem;

    color: #1f2937;

    font-weight: 700;

    line-height: 1.4;

}



.highlight-card p {

    color: #6b7280;

    line-height: 1.8;

    margin-bottom: 1.5rem;

    font-size: 0.95rem;

    flex-grow: 1;

}



.highlight-badge {

    display: inline-block;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    padding: 0.6rem 1.2rem;

    border-radius: 25px;

    font-size: 0.8rem;

    font-weight: 600;

    border: none;

    transition: var(--transition);

    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.15);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    align-self: flex-start;

}



.highlight-card:hover .highlight-badge {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(255, 140, 0, 0.25);

}



@media (max-width: 768px) {

    .highlights-section {

        padding: 3rem 0;

    }



    .highlight-card {

        padding: 2rem 1.5rem;

        min-height: 320px;

    }



    .highlight-icon {

        width: 70px;

        height: 70px;

        font-size: 1.8rem;

    }



    .highlight-card h3 {

        font-size: 1.2rem;

    }



    .highlight-card p {

        font-size: 0.9rem;

    }

}



@media (max-width: 576px) {

    .highlights-section {

        padding: 2rem 0;

    }



    .highlight-card {

        padding: 1.5rem 1.25rem;

        min-height: 300px;

    }



    .highlight-number {

        font-size: 2rem;

    }



    .highlight-icon {

        width: 65px;

        height: 65px;

        font-size: 1.6rem;

        margin-bottom: 1rem;

    }



    .highlight-card h3 {

        font-size: 1.1rem;

        margin-bottom: 0.8rem;

    }



    .highlight-card p {

        font-size: 0.85rem;

    }



    .highlight-badge {

        padding: 0.5rem 1rem;

        font-size: 0.75rem;

    }

}





/* ============================================

   CORE VALUES SECTION

   ============================================ */



.core-values-section {

    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    position: relative;

    overflow: hidden;

    padding: 5rem 0;

}



.core-values-section::before {

    content: '';

    position: absolute;

    top: -40%;

    left: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 12s ease-in-out infinite;

}



.core-values-section::after {

    content: '';

    position: absolute;

    bottom: -30%;

    right: -5%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(16, 185, 129, 0.08), transparent);

    border-radius: 50%;

    animation: float 14s ease-in-out infinite reverse;

}



.value-card {

    background: white;

    border-radius: 20px;

    padding: 2.5rem 2rem;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    text-align: center;

    border: 2px solid transparent;

    overflow: hidden;

    height: 100%;

    display: flex;

    flex-direction: column;

    min-height: 320px;

}



.value-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}



.value-card:hover::before {

    transform: scaleX(1);

}



.value-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-xl);

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

}



.value-icon {

    width: 80px;

    height: 80px;

    background: white;

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

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: var(--primary-color);

    margin: 0 auto 1.5rem;

    transition: var(--transition);

    position: relative;

    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.1);

}



.value-icon::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    border: 3px solid var(--primary-color);

    opacity: 0;

    transform: scale(1.2);

    transition: var(--transition);

}



.value-card:hover .value-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.2);

}



.value-card:hover .value-icon::after {

    opacity: 0.2;

    transform: scale(1.3);

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

}



.value-card h3 {

    font-size: 1.4rem;

    margin-bottom: 1rem;

    color: #1f2937;

    font-weight: 700;

    line-height: 1.4;

    transition: var(--transition);

}



.value-card:hover h3 {

    color: var(--primary-color);

}



.value-card p {

    color: #6b7280;

    line-height: 1.8;

    font-size: 0.95rem;

    margin: 0;

    flex-grow: 1;

}



@media (max-width: 768px) {

    .core-values-section {

        padding: 3rem 0;

    }



    .value-card {

        padding: 2rem 1.5rem;

        min-height: 300px;

    }



    .value-icon {

        width: 80px;

        height: 80px;

        font-size: 2.2rem;

    }



    .value-card h3 {

        font-size: 1.2rem;

    }



    .value-card p {

        font-size: 0.9rem;

    }

}



@media (max-width: 576px) {

    .core-values-section {

        padding: 2rem 0;

    }



    .value-card {

        padding: 1.5rem 1.25rem;

        min-height: 280px;

    }



    .value-icon {

        width: 70px;

        height: 70px;

        font-size: 1.8rem;

        margin-bottom: 1rem;

    }



    .value-card h3 {

        font-size: 1.1rem;

        margin-bottom: 0.8rem;

    }



    .value-card p {

        font-size: 0.85rem;

    }

}





/* ============================================

   TAGLINE HEADER

   ============================================ */



.tagline-header {

    margin-bottom: 4rem;

    animation: slideInDown 0.8s ease-out;

}



.tagline-main {

    font-family: 'Playfair Display', serif;

    font-size: 3.5rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

    line-height: 1.2;

    letter-spacing: -0.5px;

}



.tagline-main::before {

    content: '';

    display: block;

    width: 60px;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    margin: 0 auto 1.5rem;

    border-radius: 2px;

}



.tagline-sub {

    font-size: 1.3rem;

    color: var(--primary-color);

    font-weight: 500;

    margin-bottom: 2rem;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.6;

}



.tagline-divider {

    width: 80px;

    height: 3px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), transparent);

    margin: 2rem auto 0;

    border-radius: 2px;

}





/* ============================================

   ABOUT SECTION

   ============================================ */



.about-section {

    background: white;

    position: relative;

    overflow: hidden;

}



.about-section::before {

    content: '';

    position: absolute;

    top: -30%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 10s ease-in-out infinite;

}



.about-section::after {

    content: '';

    position: absolute;

    bottom: -20%;

    right: -5%;

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, rgba(255, 159, 28, 0.08), transparent);

    border-radius: 50%;

    animation: float 12s ease-in-out infinite reverse;

}



.about-content {

    position: relative;

    z-index: 2;

}



.about-headline {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

    line-height: 1.3;

}



.about-subheadline {

    font-size: 1.2rem;

    color: var(--primary-color);

    font-weight: 600;

    margin-bottom: 1.5rem;

}



.about-summary {

    font-size: 1rem;

    color: #6b7280;

    line-height: 1.9;

    margin-bottom: 2rem;

    text-align: justify;

}



.about-features {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    margin: 2rem 0;

}



.feature-item {

    display: flex;

    gap: 1.5rem;

    align-items: flex-start;

    padding: 1.5rem;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    border-radius: 12px;

    transition: var(--transition);

    border-left: 4px solid transparent;

    border-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) 1;

}



.feature-item:hover {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 159, 28, 0.1));

    transform: translateX(10px);

}



.feature-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.5rem;

    flex-shrink: 0;

}



.feature-text h4 {

    font-size: 1.1rem;

    color: var(--dark-color);

    margin-bottom: 0.3rem;

    font-weight: 600;

}



.feature-text p {

    color: #6b7280;

    font-size: 0.95rem;

}



.about-visual {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

}



.about-image-wrapper {

    position: relative;

    width: 100%;

    height: 400px;

}



.about-image-placeholder {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 6rem;

    color: rgba(255, 255, 255, 0.3);

    box-shadow: var(--shadow-xl);

    position: relative;

    overflow: hidden;

}



.about-image-placeholder::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);

    animation: float 8s ease-in-out infinite;

}



.about-image-accent {

    position: absolute;

    bottom: -30px;

    right: -30px;

    width: 150px;

    height: 150px;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.2), rgba(255, 159, 28, 0.2));

    border-radius: 50%;

    animation: float 6s ease-in-out infinite;

}



.about-card {

    background: white;

    padding: 2rem;

    border-radius: 12px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

    text-align: center;

    border-top: 4px solid transparent;

    border-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) 1;

}



.about-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}



.about-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    font-size: 2rem;

    color: white;

}



.about-card h3 {

    margin-bottom: 1rem;

    font-size: 1.5rem;

}



.about-card p {

    color: #6b7280;

    line-height: 1.8;

}





/* ============================================

   STATISTICS SECTION

   ============================================ */



.statistics-section {

    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);

    position: relative;

    overflow: hidden;

}



.stat-card {

    background: white;

    border-radius: 16px;

    padding: 2rem 1.5rem;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    transition: var(--transition);

    display: flex;

    align-items: center;

    gap: 1.5rem;

    border: 2px solid transparent;

    position: relative;

    overflow: hidden;

}



.stat-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}



.stat-card:hover::before {

    transform: scaleX(1);

}



.stat-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 30px rgba(255, 140, 0, 0.2);

    border-color: rgba(255, 140, 0, 0.2);

}



.stat-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: white;

    flex-shrink: 0;

    transition: var(--transition);

    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);

}



.stat-card:hover .stat-icon {

    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 12px 25px rgba(255, 140, 0, 0.4);

}



.stat-content {

    flex: 1;

}



.stat-number {

    font-size: 2.5rem;

    font-weight: 700;

    background: linear-gradient(135deg, #1a1a1a, #2d3748);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 0.25rem;

    line-height: 1;

}



.stat-label {

    font-size: 1rem;

    color: #6b7280;

    font-weight: 500;

    margin: 0;

}





/* ============================================

   SEGMENTS SECTION

   ============================================ */



.segments-section {

    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    position: relative;

    overflow: hidden;

    padding: 5rem 0;

}



.segments-section::before {

    content: '';

    position: absolute;

    top: -40%;

    right: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 10s ease-in-out infinite;

}



.segments-section::after {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -5%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(16, 185, 129, 0.08), transparent);

    border-radius: 50%;

    animation: float 12s ease-in-out infinite reverse;

}



.segment-card {

    background: white;

    border-radius: 20px;

    padding: 2.5rem 2rem;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    text-align: center;

    border: 2px solid transparent;

    overflow: hidden;

    height: 100%;

    display: flex;

    flex-direction: column;

    min-height: 320px;

}



.segment-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}



.segment-card:hover::before {

    transform: scaleX(1);

}



.segment-card:hover {

    transform: translateY(-12px);

}



.segment-icon {

    width: 80px;

    height: 80px;

    background: white;

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

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: var(--primary-color);

    margin: 0 auto 1.5rem;

    transition: var(--transition);

    position: relative;

    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.1);

}



.segment-icon::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    border: 3px solid var(--primary-color);

    opacity: 0;

    transform: scale(1.2);

    transition: var(--transition);

}



.segment-card:hover .segment-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.2);

}



.segment-card:hover .segment-icon::after {

    opacity: 0.2;

    transform: scale(1.3);

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

}



.segment-card h3 {

    font-size: 1.4rem;

    margin-bottom: 1rem;

    color: #1f2937;

    font-weight: 700;

    line-height: 1.4;

    transition: var(--transition);

}



.segment-card:hover h3 {

    color: var(--primary-color);

}



.segment-card p {

    color: #6b7280;

    line-height: 1.8;

    font-size: 0.95rem;

    margin: 0;

    flex-grow: 1;

}



@media (max-width: 768px) {

    .segments-section {

        padding: 3rem 0;

    }



    .segment-card {

        padding: 2rem 1.5rem;

        min-height: 300px;

    }



    .segment-icon {

        width: 80px;

        height: 80px;

        font-size: 2.2rem;

    }



    .segment-card h3 {

        font-size: 1.2rem;

    }



    .segment-card p {

        font-size: 0.9rem;

    }

}



@media (max-width: 576px) {

    .segments-section {

        padding: 2rem 0;

    }



    .segment-card {

        padding: 1.5rem 1.25rem;

        min-height: 280px;

    }



    .segment-icon {

        width: 70px;

        height: 70px;

        font-size: 1.8rem;

        margin-bottom: 1rem;

    }



    .segment-card h3 {

        font-size: 1.1rem;

        margin-bottom: 0.8rem;

    }



    .segment-card p {

        font-size: 0.85rem;

    }

}





/* ============================================

   DIRECTORS SECTION

   ============================================ */



.directors-section {

    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    position: relative;

    overflow: hidden;

}



.directors-section::before {

    content: '';

    position: absolute;

    top: -40%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.06), transparent);

    border-radius: 50%;

    animation: float 14s ease-in-out infinite;

}



.directors-section::after {

    content: '';

    position: absolute;

    bottom: -30%;

    right: -5%;

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.06), transparent);

    border-radius: 50%;

    animation: float 16s ease-in-out infinite reverse;

}



.director-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    height: 100%;

}



.director-card:hover {

    transform: translateY(-15px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



.director-image-wrapper {

    position: relative;

    overflow: hidden;

    height: 350px;

    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);

}



.director-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.director-card:hover .director-image {

    transform: scale(1.1);

}



.director-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.92), rgba(255, 159, 28, 0.92));

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: var(--transition);

}



.director-card:hover .director-overlay {

    opacity: 1;

}



.social-icons {

    display: flex;

    gap: 1rem;

}



.social-icon {

    width: 50px;

    height: 50px;

    background: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-color);

    font-size: 1.2rem;

    transition: var(--transition);

    text-decoration: none;

    transform: translateY(20px);

    opacity: 0;

}



.director-card:hover .social-icon {

    transform: translateY(0);

    opacity: 1;

}



.director-card:hover .social-icon:nth-child(1) {

    transition-delay: 0.1s;

}



.director-card:hover .social-icon:nth-child(2) {

    transition-delay: 0.2s;

}



.social-icon:hover {

    background: var(--primary-color);

    color: white;

    transform: translateY(-5px);

}



.director-info {

    padding: 2rem;

    text-align: center;

}



.director-name {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 0.5rem;

}



.director-designation {

    font-size: 1rem;

    color: var(--primary-color);

    font-weight: 600;

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.director-bio {

    font-size: 0.95rem;

    color: #6b7280;

    line-height: 1.6;

    margin: 0;

}





/* ============================================

   SERVICES SECTION

   ============================================ */



.services-section {

    background: white;

}



.service-card {

    background: white;

    padding: 2rem;

    border-radius: 12px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

    text-align: center;

    border: 2px solid transparent;

}



.service-card:hover {

    transform: translateY(-15px);

    box-shadow: var(--shadow-xl);

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

}



.service-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 159, 28, 0.1));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    font-size: 2rem;

    color: var(--primary-color);

    transition: var(--transition);

}



.service-card:hover .service-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: scale(1.1);

}



.service-card h3 {

    margin-bottom: 1rem;

    font-size: 1.3rem;

}



.service-card p {

    color: #6b7280;

    line-height: 1.8;

}





/* ============================================

   PORTFOLIO SECTION

   ============================================ */



.portfolio-section {

    background: var(--light-color);

}



.portfolio-card {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

}



.portfolio-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}



.portfolio-image {

    position: relative;

    overflow: hidden;

    height: 250px;

}



.placeholder-image {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.5rem;

    font-weight: 600;

    transition: var(--transition);

}



.portfolio-card:hover .placeholder-image {

    transform: scale(1.1);

}



.portfolio-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: var(--transition);

}



.portfolio-card:hover .portfolio-overlay {

    opacity: 1;

}



.portfolio-content {

    padding: 1.5rem;

}



.portfolio-content h3 {

    margin-bottom: 0.5rem;

    font-size: 1.2rem;

}





/* ============================================

   CONTACT SECTION

   ============================================ */



.contact-section {

    background: white;

}



.contact-form {

    background: var(--light-color);

    padding: 2rem;

    border-radius: 12px;

}



.contact-form .form-control {

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

    border-radius: 8px;

    padding: 0.75rem 1rem;

    font-size: 1rem;

    transition: var(--transition);

}



.contact-form .form-control:focus {

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

    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);

}



.contact-info {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.contact-item {

    display: flex;

    gap: 1.5rem;

}



.contact-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.5rem;

    flex-shrink: 0;

}



.contact-item h4 {

    margin-bottom: 0.5rem;

    font-size: 1.1rem;

}



.contact-item p {

    color: #6b7280;

}





/* ============================================

   FOOTER

   ============================================ */



.footer-section {

    background: var(--dark-color);

    color: #d1d5db;

    padding: 4rem 0 0;

}



.footer-widget {

    margin-bottom: 2rem;

}



.footer-logo {

    height: 60px;

    width: auto;

    object-fit: contain;

    display: block;

    margin-bottom: 1rem;

}



.footer-title {

    color: white;

    margin-bottom: 1.5rem;

    font-size: 1.2rem;

}



.footer-widget p {

    color: #9ca3af;

    line-height: 1.8;

    margin-bottom: 1.5rem;

}



.social-links {

    display: flex;

    gap: 1rem;

}



.social-link {

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    transition: var(--transition);

    text-decoration: none;

}



.social-link:hover {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transform: translateY(-3px);

}



.footer-links {

    list-style: none;

}



.footer-links li {

    margin-bottom: 0.75rem;

}



.footer-links a {

    color: #9ca3af;

    text-decoration: none;

    transition: var(--transition);

}



.footer-links a:hover {

    color: var(--primary-color);

    padding-left: 0.5rem;

}



.newsletter-form {

    display: flex;

    gap: 0.5rem;

    margin-top: 1rem;

}



.newsletter-form input {

    flex: 1;

    padding: 0.75rem 1rem;

    border: none;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.1);

    color: white;

    transition: var(--transition);

}



.newsletter-form input::placeholder {

    color: #9ca3af;

}



.newsletter-form input:focus {

    outline: none;

    background: rgba(255, 255, 255, 0.15);

}



.btn-subscribe {

    width: 45px;

    height: 45px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border: none;

    border-radius: 8px;

    color: white;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    align-items: center;

    justify-content: center;

}



.btn-subscribe:hover {

    transform: translateY(-2px);

}



.footer-divider {

    height: 1px;

    background: rgba(255, 255, 255, 0.1);

    margin: 2rem 0;

}



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 2rem;

    padding-bottom: 2rem;

}



.footer-bottom p {

    color: #9ca3af;

}



.footer-bottom-links {

    display: flex;

    gap: 2rem;

}



.footer-bottom-links a {

    color: #9ca3af;

    text-decoration: none;

    transition: var(--transition);

}



.footer-bottom-links a:hover {

    color: var(--primary-color);

}





/* ============================================

   ANIMATIONS

   ============================================ */



@keyframes slideInLeft {

    from {

        opacity: 0;

        transform: translateX(-50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInDown {

    from {

        opacity: 0;

        transform: translateY(-30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes float {

    0%,

    100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-20px);

    }

}



@keyframes gradientFlow {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}



@keyframes iconFloat {

    0%,

    100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-8px);

    }

}



@keyframes valueIconPulse {

    0%,

    100% {

        transform: scale(1);

        box-shadow: 0 10px 25px rgba(167, 139, 250, 0.4);

    }

    50% {

        transform: scale(1.05);

        box-shadow: 0 15px 35px rgba(167, 139, 250, 0.6);

    }

}





/* ============================================

   RESPONSIVE DESIGN

   ============================================ */



@media (max-width: 768px) {

    .hero-content {

        padding-left: 2rem;

        padding-right: 1.5rem;

    }

    .hero-title {

        font-size: 2.5rem;

    }

    .hero-subtitle {

        font-size: 1.2rem;

    }

    .section-title {

        font-size: 2rem;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-buttons .btn {

        width: 100%;

    }

    .floating-card {

        width: 250px;

        height: 250px;

    }

    .card-content i {

        font-size: 3rem;

    }

    .highlight-card {

        padding: 2rem 1.5rem;

    }

    .highlight-number {

        font-size: 2.5rem;

    }

    .highlight-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    .tagline-main {

        font-size: 2.5rem;

    }

    .tagline-sub {

        font-size: 1.1rem;

    }

    .about-headline {

        font-size: 2rem;

    }

    .about-subheadline {

        font-size: 1rem;

    }

    .about-image-wrapper {

        height: 300px;

        margin-top: 2rem;

    }

    .about-image-placeholder {

        font-size: 4rem;

    }

    .value-card {

        padding: 2rem 1.5rem;

    }

    .value-icon {

        width: 75px;

        height: 75px;

        font-size: 2rem;

    }

    .value-card h3 {

        font-size: 1.3rem;

    }

    .value-card p {

        font-size: 0.95rem;

    }

    .page-header {

        padding: 6rem 0 3rem;

    }

    .page-title {

        font-size: 2.5rem;

    }

    .page-subtitle {

        font-size: 1rem;

    }

    .about-us-title {

        font-size: 2rem;

    }

    .about-features-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    .about-stats {

        flex-direction: column;

    }

    .mvq-section {

        padding: 4rem 0;

    }

    .mvq-icon {

        width: 85px;

        height: 85px;

        font-size: 2.2rem;

    }

    .mvq-title {

        font-size: 1.4rem;

    }

    .mvq-card-header {

        padding: 2rem 1.5rem 1.5rem;

    }

    .mvq-card-body {

        padding: 1.5rem;

    }

    .mvq-card-body p {

        font-size: 0.92rem;

        line-height: 1.75;

    }

    .mvq-badge {

        padding: 0.55rem 1.25rem;

        font-size: 0.75rem;

    }

    .highlight-stat-box {

        padding: 1.75rem 1.25rem;

        margin-bottom: 1.25rem;

    }

    .highlight-stat-icon {

        width: 65px;

        height: 65px;

        font-size: 1.7rem;

        margin-bottom: 1rem;

    }

    .highlight-stat-box h4 {

        font-size: 1.05rem;

        margin-bottom: 0.4rem;

    }

    .highlight-stat-box p {

        font-size: 0.85rem;

    }

    .about-image-placeholder {

        height: 350px;

        font-size: 6rem;

    }

    .mission-card,

    .vision-card {

        padding: 2rem 1.5rem;

    }

    .mvq-section {

        padding: 5rem 0;

    }

    .mvq-icon {

        width: 95px;

        height: 95px;

        font-size: 2.5rem;

    }

    .mvq-title {

        font-size: 1.6rem;

    }

    .mvq-card-header {

        padding: 2.2rem 1.75rem 1.75rem;

    }

    .mvq-card-body {

        padding: 1.75rem;

    }

    .mvq-card-body p {

        font-size: 0.96rem;

        line-height: 1.8;

    }

    .mvq-badge {

        padding: 0.6rem 1.5rem;

        font-size: 0.8rem;

    }

    .highlight-stat-box {

        padding: 2rem 1.5rem;

        margin-bottom: 1rem;

    }

    .highlight-stat-icon {

        width: 70px;

        height: 70px;

        font-size: 1.9rem;

        margin-bottom: 1.25rem;

    }

    .highlight-stat-box h4 {

        font-size: 1.15rem;

        margin-bottom: 0.5rem;

    }

    .highlight-stat-box p {

        font-size: 0.9rem;

    }

    .education-image-placeholder {

        height: 350px;

        font-size: 8rem;

    }

    .education-title {

        font-size: 2rem;

    }

    .eye-process-card {

        padding: 2rem 1.5rem;

    }

    .process-icon {

        width: 70px;

        height: 70px;

        font-size: 1.7rem;

    }

    .visual-explanation-box {

        padding: 2.5rem 2rem;

    }

    .flow-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    .flow-arrow {

        display: none;

    }

    .cta-box {

        flex-direction: column;

        text-align: center;

        padding: 2.5rem 2rem;

    }

    .cta-icon {

        font-size: 6rem;

    }

    .eye-part-card {

        padding: 1.75rem 1.25rem;

    }

    .part-icon {

        width: 65px;

        height: 65px;

        font-size: 1.7rem;

    }

    .eye-part-card h4 {

        font-size: 1.2rem;

    }

    .contact-info-card {

        padding: 2rem 1.5rem;

    }

    .contact-info-icon {

        width: 70px;

        height: 70px;

        font-size: 1.8rem;

    }

    .contact-form-title,

    .map-title {

        font-size: 1.8rem;

    }

    .map-container {

        height: 350px;

    }

    .map-features {

        justify-content: center;

    }

    .accordion-button {

        font-size: 1rem;

        padding: 1rem 1.25rem;

    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

    .footer-bottom-links {

        justify-content: center;

    }

    .hero-image {

        margin-top: 2rem;

    }

    .min-vh-100 {

        min-height: auto !important;

        padding: 3rem 0;

    }

}



@media (max-width: 576px) {

    .hero-content {

        padding-left: 1.5rem;

        padding-right: 1rem;

    }

    .hero-title {

        font-size: 2rem;

    }

    .hero-subtitle {

        font-size: 1rem;

    }

    .section-title {

        font-size: 1.5rem;

    }

    .navbar-brand {

        font-size: 1.2rem;

    }

    .navbar-logo {

        height: 40px;

    }

    .brand-logo {

        width: 35px;

        height: 35px;

        font-size: 0.8rem;

    }

    .floating-card {

        width: 200px;

        height: 200px;

    }

    .card-content i {

        font-size: 2.5rem;

    }

    .highlight-card {

        padding: 1.5rem 1rem;

    }

    .highlight-number {

        font-size: 2rem;

    }

    .highlight-icon {

        width: 55px;

        height: 55px;

        font-size: 1.3rem;

    }

    .highlight-card h3 {

        font-size: 1.1rem;

    }

    .highlight-card p {

        font-size: 0.9rem;

    }

    .tagline-main {

        font-size: 1.8rem;

        margin-bottom: 0.75rem;

    }

    .tagline-main::before {

        width: 50px;

        height: 3px;

        margin: 0 auto 1rem;

    }

    .tagline-sub {

        font-size: 1rem;

        margin-bottom: 1.5rem;

    }

    .tagline-divider {

        width: 60px;

        height: 2px;

        margin: 1.5rem auto 0;

    }

    .about-headline {

        font-size: 1.5rem;

    }

    .about-subheadline {

        font-size: 0.95rem;

    }

    .about-summary {

        font-size: 0.95rem;

        text-align: left;

    }

    .feature-item {

        padding: 1rem;

        gap: 1rem;

    }

    .feature-icon {

        width: 45px;

        height: 45px;

        font-size: 1.2rem;

    }

    .feature-text h4 {

        font-size: 1rem;

    }

    .feature-text p {

        font-size: 0.9rem;

    }

    .about-image-wrapper {

        height: 250px;

        margin-top: 2rem;

    }

    .about-image-placeholder {

        font-size: 3rem;

    }

    .value-card {

        padding: 1.5rem 1.25rem;

    }

    .value-icon {

        width: 70px;

        height: 70px;

        font-size: 1.8rem;

    }

    .value-card h3 {

        font-size: 1.2rem;

    }

    .value-card p {

        font-size: 0.9rem;

    }

    .page-header {

        padding: 5rem 0 2.5rem;

    }

    .page-title {

        font-size: 2rem;

    }

    .page-subtitle {

        font-size: 0.95rem;

    }

    .about-us-title {

        font-size: 1.5rem;

    }

    .about-us-text {

        font-size: 0.95rem;

        text-align: left;

    }

    .about-cta {

        flex-direction: column;

    }

    .about-cta .btn {

        width: 100%;

    }

    .about-image-placeholder {

        height: 280px;

        font-size: 4.5rem;

    }

    .mission-icon,

    .vision-icon {

        width: 70px;

        height: 70px;

        font-size: 1.8rem;

    }

    .mission-card h3,

    .vision-card h3 {

        font-size: 1.5rem;

    }

    .mission-card p,

    .vision-card p {

        font-size: 0.95rem;

    }

    .mvq-section {

        padding: 3.5rem 0;

    }

    .mvq-icon {

        width: 75px;

        height: 75px;

        font-size: 2rem;

    }

    .mvq-title {

        font-size: 1.3rem;

    }

    .mvq-card-header {

        padding: 1.75rem 1.25rem 1rem;

    }

    .mvq-card-body {

        padding: 1.25rem;

    }

    .mvq-card-body p {

        font-size: 0.9rem;

        line-height: 1.7;

    }

    .mvq-card-footer {

        padding: 1.25rem 1.5rem;

    }

    .mvq-badge {

        font-size: 0.8rem;

        padding: 0.5rem 1.1rem;

    }

    .highlight-stat-box {

        padding: 1.5rem 1rem;

        margin-bottom: 1.5rem;

    }

    .highlight-stat-icon {

        width: 55px;

        height: 55px;

        font-size: 1.5rem;

        margin-bottom: 1rem;

    }

    .highlight-stat-box h4 {

        font-size: 1rem;

        margin-bottom: 0.35rem;

    }

    .highlight-stat-box p {

        font-size: 0.85rem;

    }

    .education-image-placeholder {

        height: 280px;

        font-size: 6rem;

    }

    .education-title {

        font-size: 1.5rem;

    }

    .education-text {

        font-size: 1rem;

    }

    .education-highlight-box {

        flex-direction: column;

        padding: 1.25rem;

        gap: 1rem;

    }

    .eye-process-card {

        padding: 1.75rem 1.25rem;

    }

    .process-number {

        font-size: 2rem;

        top: 1rem;

        right: 1rem;

    }

    .process-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    .eye-process-card h4 {

        font-size: 1.2rem;

    }

    .visual-explanation-box {

        padding: 2rem 1.5rem;

    }

    .explanation-header {

        flex-direction: column;

        text-align: center;

        margin-bottom: 2rem;

    }

    .explanation-header h3 {

        font-size: 1.5rem;

    }

    .flow-icon {

        width: 55px;

        height: 55px;

        font-size: 1.3rem;

    }

    .flow-step span {

        font-size: 0.8rem;

    }

    .cta-box {

        padding: 2rem 1.5rem;

    }

    .cta-content h3 {

        font-size: 1.5rem;

    }

    .cta-content p {

        font-size: 1rem;

    }

    .cta-buttons {

        flex-direction: column;

        width: 100%;

    }

    .cta-buttons .btn {

        width: 100%;

    }

    .cta-icon {

        font-size: 5rem;

    }

    .eye-part-card {

        padding: 1.5rem 1rem;

    }

    .part-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

        margin-bottom: 1rem;

    }

    .eye-part-card h4 {

        font-size: 1.1rem;

    }

    .eye-part-card p {

        font-size: 0.95rem;

    }

    .contact-info-card {

        padding: 1.75rem 1.25rem;

    }

    .contact-info-icon {

        width: 65px;

        height: 65px;

        font-size: 1.6rem;

    }

    .contact-info-card h4 {

        font-size: 1.2rem;

    }

    .contact-form-title,

    .map-title {

        font-size: 1.5rem;

    }

    .contact-form-text,

    .map-text {

        font-size: 1rem;

    }

    .form-group .form-control {

        padding: 0.75rem 1rem 0.75rem 2.75rem;

        font-size: 0.95rem;

    }

    .form-icon {

        left: 0.875rem;

        font-size: 0.9rem;

    }

    .contact-form .btn-primary {

        padding: 0.875rem 1.5rem;

        font-size: 1rem;

    }

    .map-container {

        height: 300px;

    }

    .map-feature-item {

        padding: 0.875rem 1.25rem;

        font-size: 0.9rem;

    }

    .map-feature-item i {

        font-size: 1.1rem;

    }

    .accordion-button {

        font-size: 0.95rem;

        padding: 1rem;

    }

    .accordion-body {

        padding: 1.25rem;

        font-size: 0.95rem;

    }

    .contact-item {

        flex-direction: column;

        gap: 1rem;

    }

    .contact-icon {

        width: 50px;

        height: 50px;

        font-size: 1.2rem;

    }

    .footer-bottom-links {

        flex-direction: column;

        gap: 1rem;

    }

    .newsletter-form {

        flex-direction: column;

    }

    .btn-subscribe {

        width: 100%;

    }

}





/* ============================================

   PAGE HEADER (About Page)

   ============================================ */



.page-header {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 159, 28, 0.1));

    padding: 8rem 0 4rem;

    position: relative;

    overflow: hidden;

}



.page-header::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.15), transparent);

    border-radius: 50%;

    animation: float 10s ease-in-out infinite;

}



.page-title {

    font-family: 'Playfair Display', serif;

    font-size: 3.5rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

}



.page-subtitle {

    font-size: 1.2rem;

    color: #6b7280;

    margin-bottom: 2rem;

}



.breadcrumb {

    background: transparent;

    padding: 0;

    margin: 0;

}



.breadcrumb-item a {

    color: var(--primary-color);

    text-decoration: none;

    transition: var(--transition);

}



.breadcrumb-item a:hover {

    color: var(--secondary-color);

}



.breadcrumb-item.active {

    color: #6b7280;

}



.breadcrumb-item+.breadcrumb-item::before {

    color: #9ca3af;

}





/* ============================================

   ABOUT US SECTION (About Page)

   ============================================ */



.about-us-section {

    background: white;

    position: relative;

    overflow: hidden;

}



.about-us-section::before {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 12s ease-in-out infinite;

}



.about-us-image {

    position: relative;

    z-index: 2;

}



.image-wrapper {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

}



.image-wrapper img {

    width: 100%;

    height: auto;

    display: block;

    transition: var(--transition);

}



.image-wrapper:hover img {

    transform: scale(1.05);

}



.about-image-placeholder {

    width: 100%;

    height: 450px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 8rem;

    color: rgba(255, 255, 255, 0.3);

    position: relative;

    overflow: hidden;

}



.about-image-placeholder::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);

    animation: float 8s ease-in-out infinite;

}



.image-accent {

    position: absolute;

    bottom: -30px;

    right: -30px;

    width: 200px;

    height: 200px;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.3), rgba(255, 159, 28, 0.3));

    border-radius: 50%;

    z-index: -1;

    animation: float 8s ease-in-out infinite;

}



.about-stats {

    display: flex;

    gap: 1.5rem;

    margin-top: 2rem;

}



.stat-item {

    background: white;

    padding: 1.5rem;

    border-radius: 12px;

    box-shadow: var(--shadow-lg);

    display: flex;

    align-items: center;

    gap: 1rem;

    flex: 1;

    transition: var(--transition);

}



.stat-item:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-xl);

}



.stat-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.5rem;

    flex-shrink: 0;

}



.stat-content h4 {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 0.25rem;

}



.stat-content p {

    font-size: 0.9rem;

    color: #6b7280;

    margin: 0;

}



.about-us-content {

    position: relative;

    z-index: 2;

}



.section-label {

    display: inline-block;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 159, 28, 0.1));

    color: var(--primary-color);

    padding: 0.5rem 1.5rem;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 600;

    margin-bottom: 1rem;

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

}



.about-us-title {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

    line-height: 1.3;

}



.title-divider {

    width: 80px;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    margin-bottom: 1.5rem;

    border-radius: 2px;

}



.about-us-text {

    font-size: 1rem;

    color: #6b7280;

    line-height: 1.9;

    margin-bottom: 1.5rem;

    text-align: justify;

}



.about-features-grid {

    display: grid;

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

    gap: 1.5rem;

    margin: 2.5rem 0;

}



.about-feature-box {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    padding: 1.5rem;

    border-radius: 12px;

    transition: var(--transition);

    border-left: 3px solid transparent;

}



.about-feature-box:hover {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 159, 28, 0.1));

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

    transform: translateX(5px);

}



.feature-box-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.3rem;

    margin-bottom: 1rem;

}



.about-feature-box h5 {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--dark-color);

    margin-bottom: 0.5rem;

}



.about-feature-box p {

    font-size: 0.9rem;

    color: #6b7280;

    margin: 0;

    line-height: 1.6;

}



.about-cta {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-top: 2rem;

}





/* ============================================

   MISSION & VISION SECTION (About Page)

   ============================================ */



.mission-vision-section {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    position: relative;

    overflow: hidden;

}



.mission-vision-section::before {

    content: '';

    position: absolute;

    top: -30%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.1), transparent);

    border-radius: 50%;

    animation: float 10s ease-in-out infinite;

}



.mission-card,

.vision-card {

    background: white;

    padding: 3rem 2.5rem;

    border-radius: 16px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    height: 100%;

    border-top: 5px solid transparent;

}



.mission-card {

    border-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) 1;

}



.vision-card {

    border-image: linear-gradient(90deg, var(--secondary-color), var(--primary-color)) 1;

}



.mission-card:hover,

.vision-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-xl);

}



.mission-icon,

.vision-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 2rem;

    margin-bottom: 1.5rem;

    transition: var(--transition);

}



.mission-card:hover .mission-icon,

.vision-card:hover .vision-icon {

    transform: scale(1.1) rotate(10deg);

}



.mission-card h3,

.vision-card h3 {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

}



.mission-card p,

.vision-card p {

    font-size: 1rem;

    color: #6b7280;

    line-height: 1.9;

    margin: 0;

}





/* ============================================

   MISSION, VISION & QUALITY SECTION (About Page)

   ============================================ */



.mvq-section {

    background: linear-gradient(135deg, #ffffff 0%, #fff9f5 100%);

    position: relative;

    overflow: hidden;

    padding: 6rem 0;

}



.mvq-section::before {

    content: '';

    position: absolute;

    top: -40%;

    left: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 15s ease-in-out infinite;

}



.mvq-section::after {

    content: '';

    position: absolute;

    bottom: -30%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 159, 28, 0.08), transparent);

    border-radius: 50%;

    animation: float 18s ease-in-out infinite reverse;

}



.mvq-card {

    background: white;

    border-radius: 24px;

    padding: 0;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    height: 100%;

    overflow: hidden;

    border: 2px solid rgba(255, 140, 0, 0.1);

    display: flex;

    flex-direction: column;

}



.mvq-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 5px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

    z-index: 10;

}



.mvq-card:hover::before {

    transform: scaleX(1);

}



.mvq-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 20px 40px rgba(255, 140, 0, 0.15);

    border-color: rgba(255, 140, 0, 0.3);

}



.mvq-card-header {

    padding: 2.5rem 2rem 2rem;

    text-align: center;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 159, 28, 0.08));

    position: relative;

    flex-shrink: 0;

}



.mvq-icon-wrapper {

    margin-bottom: 1.5rem;

    display: flex;

    justify-content: center;

}



.mvq-icon {

    width: 110px;

    height: 110px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 3rem;

    transition: var(--transition);

    position: relative;

    box-shadow: 0 12px 35px rgba(255, 140, 0, 0.25);

}



.mvq-icon::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    border: 3px solid var(--primary-color);

    opacity: 0;

    transform: scale(1.2);

    transition: var(--transition);

}



.mvq-card:hover .mvq-icon {

    transform: scale(1.12) rotate(8deg);

    box-shadow: 0 15px 45px rgba(255, 140, 0, 0.35);

}



.mvq-card:hover .mvq-icon::after {

    opacity: 0.3;

    transform: scale(1.5);

}



.mvq-title {

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--dark-color);

    margin: 0;

    transition: var(--transition);

    letter-spacing: -0.5px;

}



.mvq-card:hover .mvq-title {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.mvq-card-body {

    padding: 2rem;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.mvq-card-body p {

    color: #6b7280;

    line-height: 1.85;

    font-size: 0.98rem;

    margin-bottom: 1rem;

}



.mvq-card-body p:last-child {

    margin-bottom: 0;

}



.mvq-card-body strong {

    color: var(--dark-color);

    font-weight: 600;

}



.mvq-card-footer {

    padding: 1.75rem 2rem;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    border-top: 1px solid rgba(255, 140, 0, 0.12);

    text-align: center;

    flex-shrink: 0;

}



.mvq-badge {

    display: inline-block;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    padding: 0.65rem 1.75rem;

    border-radius: 30px;

    font-size: 0.85rem;

    font-weight: 600;

    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.25);

    transition: var(--transition);

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



.mvq-card:hover .mvq-badge {

    transform: scale(1.05);

    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4);

}





/* Specific card variations */



.mission-card-new {

    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);

}



.mission-card-new .mvq-card-header {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 159, 28, 0.08));

}



.mission-card-new .mvq-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.4);

}



.mission-card-new:hover .mvq-icon {

    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));

    box-shadow: 0 15px 35px rgba(255, 140, 0, 0.5);

}



.mission-card-new .mvq-card-footer {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    border-top: 1px solid rgba(255, 140, 0, 0.15);

}



.mission-card-new .mvq-badge {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}



.vision-card-new {

    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);

}



.vision-card-new .mvq-card-header {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 159, 28, 0.08));

}



.vision-card-new .mvq-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.4);

}



.vision-card-new:hover .mvq-icon {

    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));

    box-shadow: 0 15px 35px rgba(255, 140, 0, 0.5);

}



.vision-card-new .mvq-card-footer {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    border-top: 1px solid rgba(255, 140, 0, 0.15);

}



.vision-card-new .mvq-badge {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}



.quality-card-new {

    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);

}



.quality-card-new .mvq-card-header {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 159, 28, 0.08));

}



.quality-card-new .mvq-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.4);

}



.quality-card-new:hover .mvq-icon {

    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));

    box-shadow: 0 15px 35px rgba(255, 140, 0, 0.5);

}



.quality-card-new .mvq-card-footer {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), rgba(255, 159, 28, 0.05));

    border-top: 1px solid rgba(255, 140, 0, 0.15);

}



.quality-card-new .mvq-badge {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}





/* Highlight Stat Boxes */



.highlight-stat-box {

    background: white;

    padding: 2.5rem 2rem;

    border-radius: 20px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    transition: var(--transition);

    text-align: center;

    position: relative;

    z-index: 2;

    border: 2px solid rgba(255, 140, 0, 0.1);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.highlight-stat-box:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 35px rgba(255, 140, 0, 0.12);

    border-color: rgba(255, 140, 0, 0.25);

}



.highlight-stat-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(255, 159, 28, 0.12));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-color);

    font-size: 2.2rem;

    margin-bottom: 1.5rem;

    transition: var(--transition);

    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.1);

}



.highlight-stat-box:hover .highlight-stat-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: scale(1.15) rotate(5deg);

    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.25);

}



.highlight-stat-box h4 {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 0.75rem;

    letter-spacing: -0.3px;

}



.highlight-stat-box p {

    color: #6b7280;

    font-size: 0.9rem;

    margin: 0;

    line-height: 1.6;

}





/* ============================================

   EDUCATION PAGE STYLES

   ============================================ */



.education-intro-section {

    background: white;

    position: relative;

    overflow: hidden;

}



.education-intro-section::before {

    content: '';

    position: absolute;

    top: -30%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 12s ease-in-out infinite;

}



.education-image-wrapper {

    position: relative;

    z-index: 2;

}



.education-image-placeholder {

    width: 100%;

    height: 400px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10rem;

    color: rgba(255, 255, 255, 0.3);

    position: relative;

    overflow: hidden;

    box-shadow: var(--shadow-xl);

}



.education-image-placeholder::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);

    animation: float 8s ease-in-out infinite;

}



.education-accent-circle {

    position: absolute;

    bottom: -40px;

    left: -40px;

    width: 180px;

    height: 180px;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.25), rgba(255, 159, 28, 0.25));

    border-radius: 50%;

    z-index: -1;

    animation: float 10s ease-in-out infinite reverse;

}



.education-content {

    position: relative;

    z-index: 2;

}



.education-title {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

    line-height: 1.3;

}



.education-text {

    font-size: 1.05rem;

    color: #6b7280;

    line-height: 1.9;

    margin-bottom: 2rem;

}



.education-highlight-box {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 159, 28, 0.08));

    padding: 1.5rem;

    border-radius: 12px;

    display: flex;

    gap: 1.5rem;

    align-items: flex-start;

    border-left: 4px solid var(--primary-color);

}



.highlight-box-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.5rem;

    flex-shrink: 0;

}



.highlight-box-content h5 {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 0.5rem;

}



.highlight-box-content p {

    color: #6b7280;

    margin: 0;

    line-height: 1.7;

}





/* How Eyes Work Section */



.how-eyes-work-section {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.03), rgba(255, 159, 28, 0.03));

    position: relative;

    overflow: hidden;

}



.how-eyes-work-section::before {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 14s ease-in-out infinite;

}



.eye-process-card {

    background: white;

    padding: 2.5rem 2rem;

    border-radius: 16px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    height: 100%;

    border: 2px solid transparent;

}



.eye-process-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-xl);

    border-color: rgba(255, 140, 0, 0.2);

}



.process-number {

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    font-size: 2.5rem;

    font-weight: 700;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    opacity: 0.2;

}



.process-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(255, 159, 28, 0.12));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-color);

    font-size: 2rem;

    margin-bottom: 1.5rem;

    transition: var(--transition);

}



.eye-process-card:hover .process-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: scale(1.1) rotate(10deg);

}



.eye-process-card h4 {

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

}



.eye-process-card p {

    color: #6b7280;

    line-height: 1.8;

    margin: 0;

}





/* Visual Explanation Box */



.visual-explanation-box {

    background: white;

    border-radius: 20px;

    padding: 3rem 2.5rem;

    box-shadow: var(--shadow-lg);

    position: relative;

    z-index: 2;

    border: 2px solid rgba(255, 140, 0, 0.1);

}



.explanation-header {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 2.5rem;

}



.explanation-header i {

    font-size: 2.5rem;

    color: var(--primary-color);

}



.explanation-header h3 {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--dark-color);

    margin: 0;

}



.process-flow {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 1.5rem;

}



.flow-step {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.75rem;

    flex: 1;

    min-width: 100px;

}



.flow-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.8rem;

    box-shadow: 0 5px 20px rgba(255, 140, 0, 0.3);

}



.flow-step span {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--dark-color);

    text-align: center;

}



.flow-arrow {

    color: var(--primary-color);

    font-size: 1.5rem;

    flex-shrink: 0;

}





/* Eye Parts Section */



.eye-parts-section {

    background: white;

    position: relative;

    overflow: hidden;

}



.eye-parts-section::before {

    content: '';

    position: absolute;

    top: -40%;

    left: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.06), transparent);

    border-radius: 50%;

    animation: float 16s ease-in-out infinite;

}



.eye-parts-section::after {

    content: '';

    position: absolute;

    bottom: -30%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 159, 28, 0.06), transparent);

    border-radius: 50%;

    animation: float 20s ease-in-out infinite reverse;

}



.eye-part-card {

    background: white;

    padding: 2rem 1.5rem;

    border-radius: 16px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

    position: relative;

    z-index: 2;

    text-align: center;

    border: 2px solid transparent;

    overflow: hidden;

    height: 100%;

}



.eye-part-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}



.eye-part-card:hover::before {

    transform: scaleX(1);

}



.eye-part-card:hover {

    transform: translateY(-12px);

    box-shadow: var(--shadow-xl);

    border-color: rgba(255, 140, 0, 0.2);

}



.part-icon {

    width: 75px;

    height: 75px;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(255, 159, 28, 0.12));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-color);

    font-size: 2rem;

    margin: 0 auto 1.5rem;

    transition: var(--transition);

    position: relative;

}



.part-icon::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

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

    opacity: 0;

    transform: scale(1.2);

    transition: var(--transition);

}



.eye-part-card:hover .part-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: scale(1.15) rotate(10deg);

}



.eye-part-card:hover .part-icon::after {

    opacity: 0.3;

    transform: scale(1.5);

}



.eye-part-card h4 {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 0.75rem;

    transition: var(--transition);

}



.eye-part-card:hover h4 {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.eye-part-card p {

    color: #6b7280;

    font-size: 1rem;

    line-height: 1.7;

    margin: 0;

}





/* Education CTA Section */



.education-cta-section {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    position: relative;

    overflow: hidden;

}



.education-cta-section::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -20%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);

    border-radius: 50%;

    animation: float 10s ease-in-out infinite;

}



.cta-box {

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    position: relative;

    z-index: 2;

    border: 2px solid rgba(255, 255, 255, 0.2);

}



.cta-content h3 {

    font-size: 2rem;

    font-weight: 700;

    color: white;

    margin-bottom: 1rem;

}



.cta-content p {

    font-size: 1.1rem;

    color: rgba(255, 255, 255, 0.95);

    margin-bottom: 2rem;

    line-height: 1.7;

}



.cta-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.cta-buttons .btn-primary {

    background: white;

    color: var(--primary-color);

}



.cta-buttons .btn-primary:hover {

    background: rgba(255, 255, 255, 0.9);

    transform: translateY(-3px);

}



.cta-buttons .btn-outline-primary {

    border-color: white;

    color: white;

    background: transparent;

}



.cta-buttons .btn-outline-primary:hover {

    background: white;

    color: var(--primary-color);

}



.cta-icon {

    font-size: 8rem;

    color: rgba(255, 255, 255, 0.2);

    flex-shrink: 0;

}





/* ============================================

   CONTACT PAGE STYLES

   ============================================ */





/* Contact Info Cards */



.contact-info-section {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.03), rgba(255, 159, 28, 0.03));

    position: relative;

    overflow: hidden;

}



.contact-info-card {

    background: white;

    padding: 2.5rem 2rem;

    border-radius: 16px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

    text-align: center;

    height: 100%;

    border: 2px solid transparent;

    position: relative;

    z-index: 2;

}



.contact-info-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 5px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}



.contact-info-card:hover::before {

    transform: scaleX(1);

}



.contact-info-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-xl);

    border-color: rgba(255, 140, 0, 0.2);

}



.contact-info-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 2rem;

    margin: 0 auto 1.5rem;

    transition: var(--transition);

    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.3);

}



.contact-info-card:hover .contact-info-icon {

    transform: scale(1.1) rotate(10deg);

}



.contact-info-card h4 {

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

}



.contact-info-card p {

    color: #6b7280;

    line-height: 1.8;

    margin: 0;

}





/* Contact Form Section */



.contact-form-section {

    background: white;

    position: relative;

    overflow: hidden;

}



.contact-form-section::before {

    content: '';

    position: absolute;

    top: -30%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 12s ease-in-out infinite;

}



.contact-form-wrapper,

.map-wrapper {

    position: relative;

    z-index: 2;

}



.contact-form-title,

.map-title {

    font-family: 'Playfair Display', serif;

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1rem;

    line-height: 1.3;

}



.contact-form-text,

.map-text {

    font-size: 1.05rem;

    color: #6b7280;

    line-height: 1.8;

    margin-bottom: 2rem;

}



.contact-form {

    margin-top: 2rem;

}



.form-group {

    position: relative;

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    font-weight: 600;

    color: var(--dark-color);

    margin-bottom: 0.5rem;

    font-size: 0.95rem;

}



.form-group .form-control {

    width: 100%;

    padding: 0.875rem 1rem 0.875rem 3rem;

    border: 2px solid #e5e7eb;

    border-radius: 10px;

    font-size: 1rem;

    transition: var(--transition);

    background: white;

}



.form-group .form-control:focus {

    outline: none;

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

    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);

}



.form-group textarea.form-control {

    resize: vertical;

    min-height: 120px;

}



.form-icon {

    position: absolute;

    left: 1rem;

    top: 50%;

    transform: translateY(-50%);

    color: #9ca3af;

    font-size: 1rem;

    pointer-events: none;

    transition: var(--transition);

}



.form-group:has(.form-control:focus) .form-icon {

    color: var(--primary-color);

}



.form-group:has(textarea) .form-icon {

    top: 3rem;

    transform: translateY(0);

}



.contact-form .btn-primary {

    padding: 1rem 2rem;

    font-size: 1.1rem;

    font-weight: 600;

    border-radius: 10px;

    transition: var(--transition);

}



.contact-form .btn-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.4);

}





/* Map Section */



.map-container {

    width: 100%;

    height: 400px;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: var(--shadow-lg);

    margin-bottom: 2rem;

    border: 3px solid rgba(255, 140, 0, 0.1);

}



.map-features {

    display: flex;

    justify-content: space-around;

    gap: 1rem;

    flex-wrap: wrap;

}



.map-feature-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem 1.5rem;

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 159, 28, 0.08));

    border-radius: 10px;

    transition: var(--transition);

}



.map-feature-item:hover {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    transform: translateY(-3px);

}



.map-feature-item i {

    font-size: 1.3rem;

    color: var(--primary-color);

    transition: var(--transition);

}



.map-feature-item:hover i {

    color: white;

}



.map-feature-item span {

    font-weight: 600;

    font-size: 0.95rem;

}





/* FAQ Section */



.contact-faq-section {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.03), rgba(255, 159, 28, 0.03));

    position: relative;

    overflow: hidden;

}



.contact-faq-section::before {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent);

    border-radius: 50%;

    animation: float 14s ease-in-out infinite;

}



.accordion {

    position: relative;

    z-index: 2;

}



.accordion-item {

    background: white;

    border: 2px solid #e5e7eb;

    border-radius: 12px;

    margin-bottom: 1rem;

    overflow: hidden;

    transition: var(--transition);

}



.accordion-item:hover {

    border-color: rgba(255, 140, 0, 0.3);

    box-shadow: var(--shadow-md);

}



.accordion-button {

    background: white;

    color: var(--dark-color);

    font-weight: 600;

    font-size: 1.05rem;

    padding: 1.25rem 1.5rem;

    border: none;

    transition: var(--transition);

}



.accordion-button:not(.collapsed) {

    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 159, 28, 0.1));

    color: var(--primary-color);

    box-shadow: none;

}



.accordion-button:focus {

    box-shadow: none;

    border: none;

}



.accordion-button::after {

    background-image: none;

    content: '\f078';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    width: auto;

    height: auto;

    background-size: auto;

    transition: var(--transition);

}



.accordion-button:not(.collapsed)::after {

    transform: rotate(180deg);

    color: var(--primary-color);

}



.accordion-body {

    padding: 1.5rem;

    color: #6b7280;

    line-height: 1.8;

    background: white;

}





/* ============================================

   UTILITY CLASSES

   ============================================ */



.section-header {

    margin-bottom: 3rem;

}



.text-gradient {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}





/* ============================================

   CAREER APPLICATION FORM STYLES

   ============================================ */



.application-form-section {

    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);

}



.application-form-wrapper {

    background: white;

    border-radius: 16px;

    padding: 3rem;

    box-shadow: var(--shadow-xl);

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

}



.career-application-form .form-section-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding-bottom: 1rem;

    margin-bottom: 1.5rem;

    border-bottom: 2px solid var(--border-color);

}



.career-application-form .form-section-header i {

    font-size: 1.5rem;

    color: var(--primary-color);

}



.career-application-form .form-section-header h4 {

    margin: 0;

    font-size: 1.25rem;

    font-weight: 600;

    color: var(--dark-color);

}



.career-application-form .form-group {

    position: relative;

    margin-bottom: 1.5rem;

}



.career-application-form .form-group label {

    display: block;

    font-weight: 500;

    color: var(--dark-color);

    margin-bottom: 0.5rem;

    font-size: 0.95rem;

}



.career-application-form .form-group label .required {

    color: #ef4444;

    margin-left: 0.25rem;

}



.career-application-form .form-control {

    width: 100%;

    padding: 0.875rem 1rem;

    padding-left: 2.75rem;

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

    border-radius: 8px;

    font-size: 1rem;

    transition: var(--transition);

    background: #f9fafb;

}



.career-application-form .form-control:focus {

    outline: none;

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

    background: white;

    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);

}



.career-application-form .form-icon {

    position: absolute;

    left: 1rem;

    top: 50%;

    transform: translateY(-50%);

    color: #9ca3af;

    font-size: 1rem;

    pointer-events: none;

}



.career-application-form .form-group:has(label) .form-icon {

    top: calc(50% + 0.75rem);

}



.career-application-form select.form-control {

    cursor: pointer;

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 1rem center;

    background-size: 1.25rem;

    padding-right: 3rem;

}



.career-application-form textarea.form-control {

    resize: vertical;

    min-height: 120px;

    padding-top: 1rem;

}





/* File Upload Styles */



.file-upload-wrapper {

    position: relative;

    border: 2px dashed var(--border-color);

    border-radius: 12px;

    padding: 2rem;

    background: #f9fafb;

    transition: var(--transition);

    cursor: pointer;

    text-align: center;

}



.file-upload-wrapper:hover {

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

    background: #fff7ed;

}



.file-upload-wrapper.drag-over {

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

    background: #fff7ed;

    transform: scale(1.02);

}



.file-upload-wrapper.file-selected {

    border-style: solid;

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

    background: #fff7ed;

}



.file-input {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

}



.file-upload-display {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

}



.file-upload-icon {

    font-size: 3rem;

    color: var(--primary-color);

}



.file-upload-text {

    text-align: center;

}



.file-upload-title {

    font-weight: 600;

    color: var(--dark-color);

    margin-bottom: 0.25rem;

}



.file-upload-subtitle {

    font-size: 0.875rem;

    color: #6b7280;

    margin: 0;

}



.file-upload-name {

    margin-top: 1rem;

}



.selected-file {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem;

    background: white;

    border-radius: 8px;

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

}



.selected-file i {

    font-size: 1.5rem;

    color: var(--primary-color);

}



.selected-file .file-name {

    flex: 1;

    font-weight: 500;

    color: var(--dark-color);

    text-align: left;

}



.selected-file .file-size {

    font-size: 0.875rem;

    color: #6b7280;

}



.selected-file .remove-file {

    background: #fee2e2;

    color: #ef4444;

    border: none;

    border-radius: 50%;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: var(--transition);

}



.selected-file .remove-file:hover {

    background: #ef4444;

    color: white;

}





/* Form Check Styles */



.career-application-form .form-check {

    padding: 1rem;

    background: #f9fafb;

    border-radius: 8px;

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

}



.career-application-form .form-check-input {

    width: 1.25rem;

    height: 1.25rem;

    margin-top: 0.125rem;

    cursor: pointer;

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

}



.career-application-form .form-check-input:checked {

    background-color: var(--primary-color);

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

}



.career-application-form .form-check-input:focus {

    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);

}



.career-application-form .form-check-label {

    margin-left: 0.5rem;

    color: var(--text-color);

    font-size: 0.95rem;

}



.career-application-form .form-check-label a {

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 500;

}



.career-application-form .form-check-label a:hover {

    text-decoration: underline;

}





/* Submit Button */



.career-application-form button[type="submit"] {

    margin-top: 1rem;

    font-size: 1.1rem;

    padding: 1rem 2rem;

    position: relative;

    overflow: hidden;

}



.career-application-form button[type="submit"]:disabled {

    opacity: 0.7;

    cursor: not-allowed;

}





/* Responsive Design */



@media (max-width: 768px) {

    .application-form-wrapper {

        padding: 2rem 1.5rem;

    }

    .career-application-form .form-section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    .career-application-form .form-control {

        padding-left: 1rem;

    }

    .career-application-form .form-icon {

        display: none;

    }

    .file-upload-wrapper {

        padding: 1.5rem 1rem;

    }

    .file-upload-icon {

        font-size: 2rem;

    }

    .selected-file {

        flex-wrap: wrap;

    }

}



@media (max-width: 576px) {

    .application-form-wrapper {

        padding: 1.5rem 1rem;

        border-radius: 12px;

    }

    .section-title {

        font-size: 1.75rem;

    }

    .career-application-form .form-section-header h4 {

        font-size: 1.1rem;

    }

    .career-application-form button[type="submit"] {

        font-size: 1rem;

        padding: 0.875rem 1.5rem;

    }

}





/* ============================================

   PRODUCT RANGE PAGE STYLES

   ============================================ */



.products-intro-section {

    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);

}



.oculus-products-section {

    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);

}



.infinity-products-section {

    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);

}



.products-cta-section {

    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);

}





/* Product Category Cards */



.product-category-card {

    background: white;

    border-radius: 16px;

    padding: 2rem;

    text-align: center;

    transition: var(--transition);

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

    height: 100%;

    position: relative;

    overflow: hidden;

}



.product-category-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transition: var(--transition);

}



.product-category-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-xl);

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

}



.product-category-card:hover::before {

    transform: scaleX(1);

}



.product-category-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 1.5rem;

    background: linear-gradient(135deg, #fff7ed, #ffedd5);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.product-category-card:hover .product-category-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    transform: scale(1.1) rotate(5deg);

}



.product-category-icon i {

    font-size: 2rem;

    color: var(--primary-color);

    transition: var(--transition);

}



.product-category-card:hover .product-category-icon i {

    color: white;

}



.product-category-card h4 {

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 1rem;

    color: var(--dark-color);

}



.product-category-card p {

    color: #6b7280;

    font-size: 0.95rem;

    line-height: 1.6;

    margin-bottom: 1.5rem;

}



.product-category-badge {

    display: inline-block;

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    border-radius: 20px;

    font-size: 0.875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}





/* Infinity Cards Variation */



.infinity-card {

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

}



.infinity-card::before {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}



.infinity-card:hover {

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

}



.infinity-card .product-category-icon {

    background: linear-gradient(135deg, #fff7ed, #ffedd5);

}



.infinity-card:hover .product-category-icon {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}



.infinity-card .product-category-icon i {

    color: var(--primary-color);

}



.infinity-card:hover .product-category-icon i {

    color: white;

}



.infinity-badge {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}





/* CTA Box for Products */



.products-cta-section .cta-box {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 16px;

    padding: 3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    box-shadow: var(--shadow-xl);

    position: relative;

    overflow: hidden;

}



.products-cta-section .cta-box::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 300px;

    height: 300px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

}



.products-cta-section .cta-content {

    flex: 1;

    z-index: 1;

}



.products-cta-section .cta-content h3 {

    color: white;

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 1rem;

}



.products-cta-section .cta-content p {

    color: rgba(255, 255, 255, 0.9);

    font-size: 1.1rem;

    margin-bottom: 2rem;

}



.products-cta-section .cta-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.products-cta-section .cta-buttons .btn-primary {

    background: white;

    color: var(--primary-color);

}



.products-cta-section .cta-buttons .btn-primary:hover {

    background: var(--light-color);

    transform: translateY(-2px);

}



.products-cta-section .cta-buttons .btn-outline-primary {

    border-color: white;

    color: white;

}



.products-cta-section .cta-buttons .btn-outline-primary:hover {

    background: white;

    color: var(--primary-color);

}



.products-cta-section .cta-icon {

    font-size: 5rem;

    color: rgba(255, 255, 255, 0.2);

    z-index: 1;

}





/* Product Category Links */



.product-category-link {

    text-decoration: none;

    color: inherit;

    display: block;

    height: 100%;

}



.product-category-link:hover {

    text-decoration: none;

    color: inherit;

}





/* Product List Page Styles */



.product-list-section {

    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);

}



.product-card {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    transition: var(--transition);

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

    height: 100%;

    cursor: pointer;

}



.product-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-xl);

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

}



.product-image {

    position: relative;

    width: 100%;

    padding-top: 100%;

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

    overflow: hidden;

}



.product-placeholder {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #fff7ed, #ffedd5);

    transition: var(--transition);

}



.product-card:hover .product-placeholder {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}



.product-placeholder i {

    font-size: 3rem;

    color: var(--primary-color);

    transition: var(--transition);

}



.product-card:hover .product-placeholder i {

    color: white;

    transform: scale(1.2);

}



.product-info {

    padding: 1.5rem;

}



.product-name {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--dark-color);

    margin-bottom: 0.5rem;

}



.product-description {

    font-size: 0.875rem;

    color: #6b7280;

    margin: 0;

}





/* Responsive Design for Products Page */



@media (max-width: 992px) {

    .product-category-card {

        padding: 1.5rem;

    }

    .product-category-icon {

        width: 70px;

        height: 70px;

    }

    .product-category-icon i {

        font-size: 1.75rem;

    }

    .product-category-card h4 {

        font-size: 1.1rem;

    }

    .product-placeholder i {

        font-size: 2.5rem;

    }

    .product-info {

        padding: 1.25rem;

    }

}



@media (max-width: 768px) {

    .products-cta-section .cta-box {

        flex-direction: column;

        text-align: center;

        padding: 2rem;

    }

    .products-cta-section .cta-content h3 {

        font-size: 1.5rem;

    }

    .products-cta-section .cta-content p {

        font-size: 1rem;

    }

    .products-cta-section .cta-buttons {

        justify-content: center;

    }

    .products-cta-section .cta-icon {

        font-size: 3rem;

    }

}



@media (max-width: 576px) {

    .product-category-card {

        padding: 1.25rem;

    }

    .product-category-icon {

        width: 60px;

        height: 60px;

        margin-bottom: 1rem;

    }

    .product-category-icon i {

        font-size: 1.5rem;

    }

    .product-category-card h4 {

        font-size: 1rem;

    }

    .product-category-card p {

        font-size: 0.875rem;

    }

    .products-cta-section .cta-box {

        padding: 1.5rem;

    }

    .products-cta-section .cta-content h3 {

        font-size: 1.25rem;

    }

    .products-cta-section .cta-buttons {

        flex-direction: column;

        width: 100%;

    }

    .products-cta-section .cta-buttons .btn {

        width: 100%;

    }

    .product-placeholder i {

        font-size: 2rem;

    }

    .product-info {

        padding: 1rem;

    }

    .product-name {

        font-size: 1rem;

    }

    .product-description {

        font-size: 0.8rem;

    }

}