/* ==========ABOUT US PAGE========== */

/* Company Info Section - Image Left */

.company-info-section {
    padding: 80px 5%;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* Thick Abstract Wave Lines Background - Reduced Visibility */
.company-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Thick Wave 1 - Diagonal bold */
        repeating-linear-gradient(
            65deg,
            transparent,
            transparent 50px,
            rgba(255, 153, 0, 0.02) 50px,
            rgba(255, 153, 0, 0.02) 55px
        ),
        /* Thick Wave 2 - Opposite diagonal */
        repeating-linear-gradient(
            115deg,
            transparent,
            transparent 60px,
            rgba(255, 153, 0, 0.015) 60px,
            rgba(255, 153, 0, 0.015) 66px
        ),
        /* Thick Wave 3 - Vertical bold */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 45px,
            rgba(255, 153, 0, 0.012) 45px,
            rgba(255, 153, 0, 0.012) 50px
        ),
        /* Thick Wave 4 - Horizontal bold */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 55px,
            rgba(255, 153, 0, 0.01) 55px,
            rgba(255, 153, 0, 0.01) 60px
        ),
        /* Thick Wave 5 - Steep angle */
        repeating-linear-gradient(
            35deg,
            transparent,
            transparent 70px,
            rgba(255, 153, 0, 0.008) 70px,
            rgba(255, 153, 0, 0.008) 76px
        );
    pointer-events: none;
    z-index: 0;
    background-blend-mode: overlay;
    animation: waveDrift 25s ease-in-out infinite alternate;
}

@keyframes waveDrift {
    0% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(2%) scale(1.02);
    }
    100% {
        transform: translateX(-2%) scale(0.98);
    }
}

/* Glowing wave overlay - Reduced */
.company-info-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 10% 80%, rgba(255, 153, 0, 0.02), transparent 50%),
        radial-gradient(ellipse at 90% 20%, rgba(255, 153, 0, 0.015), transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 153, 0, 0.01), transparent 70%),
        radial-gradient(ellipse at 30% 40%, rgba(255, 153, 0, 0.01), transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(255, 153, 0, 0.01), transparent 40%);
    pointer-events: none;
    z-index: 0;
    animation: wavePulse 18s ease-in-out infinite alternate;
}

@keyframes wavePulse {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Abstract wave shapes using conic gradients - Reduced */
.company-info-section .abstract-waves {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    background: 
        conic-gradient(from 0deg at 20% 30%, 
            transparent 0deg, 
            rgba(255, 153, 0, 0.08) 40deg, 
            transparent 80deg,
            rgba(255, 153, 0, 0.015) 120deg,
            transparent 160deg,
            rgba(255, 153, 0, 0.008) 200deg,
            transparent 240deg,
            rgba(255, 153, 0, 0.005) 280deg,
            transparent 320deg,
            rgba(255, 153, 0, 0.008) 360deg
        ),
        conic-gradient(from 90deg at 80% 70%, 
            transparent 0deg, 
            rgba(255, 153, 0, 0.006) 50deg, 
            transparent 100deg,
            rgba(255, 153, 0, 0.008) 150deg,
            transparent 200deg,
            rgba(255, 153, 0, 0.005) 250deg,
            transparent 300deg,
            rgba(255, 153, 0, 0.006) 360deg
        );
    animation: waveRotate 30s linear infinite;
}

@keyframes waveRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(3deg) scale(1.03);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.company-info-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Left: Image with Premium Effects */
.company-info-image {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.5s ease;
}

/* Image hover effects */
.company-info-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.05), transparent 50%);
    z-index: 1;
    pointer-events: none;
    transition: all 0.5s ease;
}

.company-info-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(255, 153, 0, 0.03), transparent);
    z-index: 1;
    pointer-events: none;
    transition: all 0.5s ease;
}

.company-info-image:hover::before {
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.08), transparent 50%);
}

.company-info-image:hover::after {
    height: 50%;
    background: linear-gradient(to top, rgba(255, 153, 0, 0.06), transparent);
}

.company-info-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.company-info-image:hover img {
    transform: scale(1.05) rotate(-1deg);
}

/* Subtle border glow on image */
.company-info-image {
    border: 1px solid rgba(255, 153, 0, 0.05);
    transition: all 0.5s ease;
}

.company-info-image:hover {
    box-shadow: 0 8px 50px rgba(255, 153, 0, 0.08);
    border-color: rgba(255, 153, 0, 0.1);
}

/* Right: Content */
.company-info-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header */
.company-info-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #1A1A1A;
    margin-top: -20px;
}


.company-tagline {
    font-family: 'Google Sans', sans-serif;
    font-size: 16px;
    color: #FF9900;
    font-weight: 500;
    
}

/* Goal */
.company-goal h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 6px;
}

.company-goal p {
    font-family: 'Google Sans', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    font-weight: 500;
}

/* Values */
.company-values {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.value-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: #f8f8f8;
    border-radius: 10px;
    transition: all 0.3s ease;
    border-left: 1px solid transparent;
}

.value-item:hover {
    background: #f0f0f0;
    border-left-color: #FF9900;
    transform: translateX(4px);
}

.value-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.1), rgba(230, 138, 0, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.value-item:hover .value-icon {
    background: linear-gradient(135deg, #FF9900, #e68a00);
}

.value-icon i {
    font-size: 21px;
    color: #FF9900;
    transition: color 0.3s ease;
}

.value-item:hover .value-icon i {
    color: #1A1A1A;
}

.value-text h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 2px;
}

.value-text p {
    font-family: 'Google Sans', sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* Mobile */
@media (max-width: 992px) {
    .company-info-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .company-info-image {
        min-height: 280px;
        max-height: 350px;
    }

    .company-info-section::before,
    .company-info-section::after,
    .company-info-section .abstract-waves {
        animation: none;
    }
}

@media (max-width: 768px) {
    .company-info-section {
        padding: 40px 4%;
    }

    .company-info-header h2 {
        font-size: 28px;
    }

    .company-tagline {
        font-size: 15px;
    }

    .company-goal p {
        font-size: 14px;
    }

    .company-info-image {
        min-height: 220px;
        border-radius: 8px;
    }

    .company-info-image:hover img {
        transform: scale(1.03);
    }
}

@media (max-width: 480px) {
    .company-info-section {
        padding: 30px 3%;
    }

    .company-info-header h2 {
        font-size: 24px;
    }

    .company-tagline {
        font-size: 13px;
    }

    .company-goal h3 {
        font-size: 16px;
    }

    .company-goal p {
        font-size: 13px;
    }

    .company-info-image {
        min-height: 180px;
        border-radius: 8px;
    }

    .value-item {
        padding: 12px 14px;
    }

    .value-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .value-icon i {
        font-size: 19px;
    }

    .value-text h4 {
        font-size: 14px;
    }

    .value-text p {
        font-size: 13px;
    }
}



/* QUICK COMPANY SECTION - 3 COLUMNS */

.quick-company-section {
    padding: 30px 5%;
    background: radial-gradient(ellipse at 30% 50%, rgb(53, 60, 70), #1A1A1A 70%);
    position: relative;
    overflow: hidden;
}

/* Extra glow from bottom right */
.quick-company-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse at bottom right, rgba(255, 153, 0, 0.03), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.quick-company-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

.quick-company-item {
    padding: 30px 30px 32px;
    background: transparent;
    border-radius: 14px;
    border: 2.5px dashed rgba(143, 86, 30, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Hover effect - border glows */
.quick-company-item:hover {
    border-color: #FF9900;
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(255, 153, 0, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

/* Hover glow line at top */
.quick-company-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FF9900, transparent);
    opacity: 0;
    transition: all 0.5s ease;
    transform: scaleX(0);
}

.quick-company-item:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Hover glow line at bottom */
.quick-company-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FF9900, transparent);
    opacity: 0;
    transition: all 0.5s ease;
    transform: scaleX(0);
}

.quick-company-item:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.quick-company-item h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.quick-company-item:hover h3 {
    color: #FF9900;
}

.quick-company-item h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #FF9900;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    transition: all 0.3s ease;
}

.quick-company-item:hover h4 {
    transform: translateX(4px);
    color: #ffaa33;
}

.quick-company-item p {
    font-family: 'Google Sans', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin: 0;
    transition: color 0.4s ease;
}

.quick-company-item:hover p {
    color: rgba(255, 255, 255, 0.85);
}

/* Mobile */
@media (max-width: 992px) {
    .quick-company-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .quick-company-section {
        padding: 40px 4%;
    }

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

    .quick-company-item {
        padding: 24px 20px 26px;
    }

    .quick-company-item h3 {
        font-size: 17px;
    }

    .quick-company-item h4 {
        font-size: 19px;
    }

    .quick-company-item p {
        font-size: 13px;
    }

    .quick-company-item:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .quick-company-section {
        padding: 30px 3%;
    }

    .quick-company-item {
        padding: 18px 16px 20px;
    }

    .quick-company-item h3 {
        font-size: 14px;
    }

    .quick-company-item h4 {
        font-size: 17px;
    }

    .quick-company-item p {
        font-size: 12px;
    }

    .quick-company-item:hover {
        transform: translateY(-2px);
    }
}


/* ABOUT IMAGE SECTION */

.about-image-stats {
    position: relative;
    padding: 80px 5%;
    background: url('/images/enhanced-comp.webp') center center / cover no-repeat;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Dark overlay */
.about-image-stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.about-image-stats-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Glassmorphism inner container */
.about-image-stats-content {
    max-width: 550px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
    padding: 40px 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-image-stats-content:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 153, 0, 0.2);
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.about-stat-item {
    text-align: left;
    padding: 8px 12px;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
}



.about-stat-item:hover::before {
    width: 100%;
}

.about-stat-item:hover {
    transform: translateX(6px) scale(1.02);
    background: rgba(255, 255, 255, 0.04);
}

.about-stat-number {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #FF9900;
    line-height: 1.1;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-stat-item:hover .about-stat-number {
    color: #ffaa33;
    transform: scale(1.05);
}

.about-stat-label {
    font-family: 'Google Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.about-stat-item:hover .about-stat-label {
    color: rgba(255, 255, 255, 0.95);
}

/* Mobile */
@media (max-width: 768px) {
    .about-image-stats {
        padding: 50px 4%;
        min-height: 250px;
    }

    .about-image-stats-content {
        max-width: 100%;
        padding: 28px 30px;
        gap: 8px 30px;
        border-radius: 12px;
    }

    .about-stat-number {
        font-size: 32px;
    }

    .about-stat-label {
        font-size: 12px;
    }

    .about-stat-item:hover {
        transform: translateX(3px) scale(1.01);
    }
}

@media (max-width: 480px) {
    .about-image-stats {
        padding: 40px 3%;
        min-height: 200px;
    }

    .about-image-stats-content {
        padding: 20px 20px;
        gap: 5px 20px;
        border-radius: 10px;
    }

    .about-stat-number {
        font-size: 26px;
    }

    .about-stat-label {
        font-size: 11px;
    }

    .about-stat-item:hover {
        transform: none;
    }
}