/*==============================================================
ABOUT PAGE
BERGER PAINTS
==============================================================*/

/*==============================================================
GLOBAL
==============================================================*/

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

.section-subtitle{
    display:inline-block;
    color:var(--primary);
    font-size:.9rem;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:18px;
}

.section-title{
    font-size:clamp(2rem,4vw,3.4rem);
    font-weight:800;
    color:#1F2937;
    line-height:1.15;
    margin-bottom:28px;
}

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

p{
    color:var(--muted);
    line-height:1.9;
    font-size:1rem;

}

/*==============================================================
BUTTONS
==============================================================*/

.btn-primary-lg{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 36px;

    border-radius:999px;

    background:linear-gradient(135deg,#5A189A,#7B2CBF);

    color:#fff;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 15px 40px rgba(90,24,154,.25);

}

.btn-primary-lg:hover{

    transform:translateY(-4px);

    color:#fff;

}

.btn-outline-light{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    border:2px solid rgba(255,255,255,.7);

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.btn-outline-light:hover{

    background:#fff;

    color:var(--primary);

}

/*==============================================================
HERO
==============================================================*/

.about-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:url('../images/about/about-banner.jpg') center/cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(90deg,
        rgba(25,18,45,.82),
        rgba(53,24,95,.55),
        rgba(90,24,154,.18));

}

.about-hero .container{

    position:relative;

    z-index:5;

}

.hero-label{

    display:inline-flex;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:.82rem;

    letter-spacing:2px;

    margin-bottom:24px;

}

.about-hero h1{

    color:#fff;

    font-size:clamp(3rem,6vw,5.5rem);

    font-weight:900;

    line-height:1.05;

    margin-bottom:30px;

}

.about-hero h1 span{

    color:#FFD54F;

}

.about-hero p{

    color:rgba(255,255,255,.88);

    max-width:620px;

    font-size:1.1rem;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-scroll{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    animation:bounce 2.5s infinite;

    z-index:5;

}

.hero-scroll i{

    font-size:1.3rem;

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,8px);

}

}

/*==============================================================
STORY
==============================================================*/

.about-story{

    background:#fff;

}

.image-stack{

    position:relative;

}

.img-main{

    width:100%;

    border-radius:28px;

    box-shadow:var(--shadow);

}

.experience-card{

    position:absolute;

    right:-25px;

    bottom:40px;

    width:190px;

    padding:28px;

    background:#fff;

    border-radius:22px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    text-align:center;

}

.experience-card h2{

    font-size:3rem;

    color:var(--primary);

    margin:0;

    font-weight:800;

}

.experience-card p{

    margin-top:10px;

    margin-bottom:0;

    color:#555;

    font-weight:600;

}

.story-features{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.story-features div{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 22px;

    border-radius:18px;

    background:#F7F8FC;

    transition:.35s;

}

.story-features div:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.story-features i{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EFE7FF;

    color:var(--primary);

    font-size:1.3rem;

}

.story-features span{

    font-weight:600;

    color:#374151;

}

/*==============================================================
IMAGE EFFECT
==============================================================*/

.img-main{

    transition:1.1s;

}

.image-stack:hover .img-main{

    transform:scale(1.04);

}

.image-stack{

    overflow:hidden;

    border-radius:28px;

}

/*==============================================================
ANIMATION
==============================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.fade-up.show{

    opacity:1;

    transform:none;

}

/*==============================================================
BACKGROUND SHAPE
==============================================================*/

.about-story{

    position:relative;

    overflow:hidden;

}

.about-story::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(circle,
        rgba(90,24,154,.08),
        transparent 70%);

    top:-120px;

    left:-120px;

    border-radius:50%;

}

.about-story::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
        rgba(255,179,0,.08),
        transparent 70%);

    right:-180px;

    bottom:-180px;

    border-radius:50%;

}


/*==============================================================
COMPANY AT A GLANCE
==============================================================*/

.company-glance{

    background:linear-gradient(180deg,#fafbff,#f3f5fb);

    position:relative;

    overflow:hidden;

}

.company-glance::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(74,20,140,.08),
    transparent 70%);

    right:-180px;

    top:-180px;

}

.counter-card{

    background:#fff;

    border-radius:24px;

    padding:50px 30px;

    text-align:center;

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    transition:.4s;

    height:100%;

    position:relative;

    overflow:hidden;

}

.counter-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#5A189A,#9D4EDD);

}

.counter-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.counter-card h2{

    font-size:3.4rem;

    color:var(--primary);

    font-weight:800;

    margin-bottom:12px;

}

.counter-card span{

    color:#6B7280;

    font-weight:600;

    display:block;

}

/*==============================================================
TIMELINE
==============================================================*/

.timeline-section{

    padding:120px 0;

    background:#fff;

}

.timeline{

    position:relative;

    margin-top:70px;

}

.timeline::before{

    content:"";

    position:absolute;

    top:60px;

    left:0;

    right:0;

    height:4px;

    background:#E8EAF1;

}

.timeline-item{

    position:relative;

    width:25%;

    float:left;

    text-align:center;

}

.timeline-item::before{

    content:"";

    width:24px;

    height:24px;

    background:#fff;

    border:6px solid var(--primary);

    border-radius:50%;

    position:absolute;

    left:50%;

    top:48px;

    transform:translateX(-50%);

    z-index:5;

}

.timeline .year{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:90px;

    height:90px;

    background:linear-gradient(135deg,#5A189A,#9D4EDD);

    color:#fff;

    border-radius:50%;

    font-weight:700;

    margin-bottom:90px;

    box-shadow:0 15px 35px rgba(90,24,154,.25);

}

.timeline .content{

    background:#fff;

    padding:25px;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    margin:20px;

    transition:.35s;

}

.timeline .content:hover{

    transform:translateY(-8px);

}

.timeline .content h5{

    font-weight:700;

    color:#2D3748;

    margin-bottom:10px;

}

.timeline .content p{

    font-size:.95rem;

    margin:0;

}

/*==============================================================
VISION & MISSION
==============================================================*/

.vision-mission{

    background:#F7F9FD;

}

.vm-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

    box-shadow:0 18px 40px rgba(0,0,0,.06);

    transition:.35s;

}

.vm-card:hover{

    transform:translateY(-8px);

}

.vm-icon{

    width:75px;

    height:75px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#5A189A,#7B2CBF);

    color:#fff;

    font-size:2rem;

    margin-bottom:25px;

}

.vm-card h3{

    font-weight:700;

    margin-bottom:18px;

}

.mission-list{

    margin:0;

    padding:0;

    list-style:none;

}

.mission-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:15px;

    color:#555;

}

.mission-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--primary);

    font-weight:700;

}

/*==============================================================
CORE VALUES
==============================================================*/

.core-values{

    padding:110px 0;

    background:#fff;

}

.value-card{

    background:#fff;

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

    box-shadow:0 18px 45px rgba(0,0,0,.05);

    transition:.4s;

    height:100%;

    position:relative;

    overflow:hidden;

}

.value-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#5A189A,#9D4EDD);

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.value-card:hover::before{

    transform:scaleX(1);

}

.value-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.10);

}

.value-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:25px;

    background:#F2EBFD;

    color:var(--primary);

    font-size:2rem;

    transition:.35s;

}

.value-card:hover .value-icon{

    background:linear-gradient(135deg,#5A189A,#9D4EDD);

    color:#fff;

    transform:rotate(10deg);

}

.value-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.value-card p{

    margin:0;

}

/*==============================================================
GLOBAL PRESENCE
==============================================================*/

.global-section{
    background:linear-gradient(180deg,#fafcff,#f4f7fc);
}

.global-section img{
    animation:floatMap 7s ease-in-out infinite;
}

@keyframes floatMap{
0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}

.global-section h3{

    font-size:2.8rem;
    color:var(--primary);
    font-weight:800;
    margin-bottom:8px;
}

.global-section span{
    color:#666;
    font-weight:600;
}

.global-section .row .col-6{
    border-left:4px solid var(--primary);
    padding-left:18px;
    margin-bottom:25px;
}

/*==============================================================
MANUFACTURING
==============================================================*/

.manufacturing{
    background:#fff;
    overflow:hidden;
}

.manufacturing img{
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:620px;
    transition:1s;
}

.manufacturing:hover img{
    transform:scale(1.05);
}

.manufacturing-content{
    padding:80px;
}

.manufacturing-content h2{
    font-size:2.8rem;
    font-weight:800;
    margin-bottom:25px;
    color:#1F2937;
}

.feature-list{
    margin-top:35px;
}

.feature-list div{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    font-weight:600;
    color:#374151;
}

.feature-list i{
    color:#5A189A;
    font-size:1.2rem;
}

/*==============================================================
SUSTAINABILITY
==============================================================*/

.sustainability{
    background:#F8FAFC;
}

.eco-box{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:22px;
    transition:.35s;
    box-shadow:0 15px 35px rgba(0,0,0,.05);
    height:100%;
}

.eco-box:hover{
    transform:translateY(-8px);
}

.eco-box i{
    font-size:2.5rem;
    color:#5A189A;
    margin-bottom:15px;
}

.eco-box h5{

    margin:0;

    font-weight:700;

}

/*==============================================================
INNOVATION
==============================================================*/

.innovation{

    padding:120px 0;

    background:#fff;

}

.innovation-card{

    background:#fff;

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.06);

    transition:.35s;

    height:100%;

}

.innovation-card:hover{

    transform:translateY(-10px);

}

.innovation-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    margin:auto auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#5A189A,#9D4EDD);

    color:#fff;

    font-size:2rem;

}


/*==============================================================
AWARDS
==============================================================*/

.awards{
    padding:120px 0;
    background:#fff;
}

.award-card{
    background:#fff;
    border-radius:24px;
    text-align:center;
    padding:45px 30px;
    transition:.35s;
    box-shadow:0 18px 40px rgba(0,0,0,.05);
    height:100%;
}

.award-card:hover{
    transform:translateY(-10px);
}

.award-icon{
    width:85px;
    height:85px;
    border-radius:50%;
    margin:auto auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F3E8FF;
    color:#5A189A;
    font-size:2rem;
}

/*==============================================================
CTA
==============================================================*/

.about-cta{
    padding:130px 0;
    background:
    linear-gradient(135deg,
    #4A148C,
    #7B2CBF);
}

.cta-box{
    text-align:center;
    color:#fff;
    max-width:850px;
    margin:auto;
}

.cta-box span{
    letter-spacing:2px;
    font-weight:700;
    color:#FFD54F;
}

.cta-box h2{
    font-size:3rem;
    font-weight:800;
    margin:25px 0;
}

.cta-box p{
    color:rgba(255,255,255,.88);
    font-size:1.05rem;
}

/*==============================================================
CONTACT STRIP
==============================================================*/

.contact-strip{

    padding:70px 0;

    background:#1F2937;

    color:#fff;

}

.contact-strip h3{

    font-size:2rem;

    font-weight:700;

    margin-bottom:12px;

}

.contact-strip p{

    color:#D1D5DB;

    margin:0;

}

.btn-contact-large{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    background:#fff;

    color:#4A148C;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-contact-large:hover{

    transform:translateY(-4px);

    color:#4A148C;

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

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

    .manufacturing-content{
    padding:60px 30px;
    }
    .timeline-item{
    width:100%;
    margin-bottom:60px;
    float:none;
    }

    .timeline::before{
    display:none;
    }

    .timeline-item::before{
    display:none;
    }

    .timeline .year{
    margin-bottom:20px;
    }

    .story-features{
    grid-template-columns:1fr;
    }

    .hero-buttons{
    flex-direction:column;
    }

    .hero-buttons a{
    width:100%;
    }

    .about-hero h1{
    font-size:3rem;
    }

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

    .cta-box h2{
    font-size:2.2rem;
    }

    .contact-strip{
    text-align:center;
    }

    .contact-strip .text-lg-end{
    text-align:center!important;
    margin-top:30px;
    }

}

@media(max-width:768px){

    .counter-card{
        padding:35px;
    }

    .value-card{
        padding:35px 25px;
    }

    .innovation-card{
        padding:35px 25px;
    }

    .award-card{
        padding:35px 25px;
    }

    .manufacturing img{
        min-height:350px;
    }

    .experience-card{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:25px;
        width:100%;
    }

    .hero-scroll{
        display:none;
    }

}

@media(max-width:576px){

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

    .about-hero{
        text-align:center;
    }

    .about-hero p{
        margin:auto auto 35px;
    }

    .section-title{
        font-size:1.9rem;
    }

    .cta-box h2{
        font-size:1.8rem;
    }

    .btn-primary-lg,
    .btn-outline-light{
        width:100%;
    }

}