/*
=========================================================
 JABB TECH HUB - ABOUT PAGE STYLESHEET
 Premium Black & Gold Theme
 Matched With about.html
 File: about.css
=========================================================
*/


/* ======================================================
   VARIABLES
====================================================== */
/* HEADER ANIMATION */

.header {

    animation:
    headerDrop .8s ease forwards;

}


@keyframes headerDrop {

    from {

        opacity:0;

        transform:
        translateY(-40px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }

}
:root {

    --gold:#d4af37;
    --gold-light:#f5d76e;

    --black:#050505;
    --dark:#0d0d0d;

    --white:#ffffff;

    --gray:#b8b8b8;

    --transition:
    all .4s ease;

}


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


.about-hero {

    min-height:85vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    overflow:hidden;


    background:

    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.9)
    ),

    url("../images/about-bg.jpg");


    background-size:cover;

    background-position:center;

}



.about-hero::before {


    content:"";

    position:absolute;

    width:450px;

    height:450px;


    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.3),
        transparent 70%
    );


    top:-150px;

    right:-150px;


}



.about-hero .container {

    position:relative;

    z-index:2;

}



.about-hero h1 {


    color:white;

    font-size:

    clamp(2.5rem,5vw,4.5rem);


    font-weight:800;


    letter-spacing:2px;


    text-transform:uppercase;


    animation:

    fadeUp 1s ease;


}



.about-hero p {


    color:#ddd;

    max-width:800px;

    margin:25px auto;

    font-size:1.2rem;

    line-height:1.8;


    animation:

    fadeUp 1.2s ease;


}





/* ======================================================
   OUR STORY SECTION
====================================================== */


.our-story {


    padding:100px 0;

    background:

    var(--black);


}



.our-story .container {


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:60px;


    align-items:center;


}



.story-image {


    position:relative;


}



.story-image img {


    width:100%;


    border-radius:20px;


    position:relative;


    z-index:2;


    box-shadow:

    0 20px 50px rgba(0,0,0,.6);


    transition:

    .5s ease;


}



.story-image:hover img {


    transform:scale(1.05);


}



.story-image::after {


    content:"";


    position:absolute;


    inset:

    20px -20px -20px 20px;


    border:

    3px solid var(--gold);


    border-radius:20px;


    z-index:1;


}



.story-content h2 {


    color:white;


    font-size:2.7rem;


    margin-bottom:25px;


}



.story-content h2::after {


    content:"";


    display:block;


    width:80px;


    height:4px;


    margin-top:15px;


    background:

    var(--gold);


}



.story-content p {


    color:

    var(--gray);


    line-height:1.9;


    margin-bottom:20px;


    font-size:1.05rem;


}





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


.mission-vision {


    padding:100px 0;


    background:


    linear-gradient(
        135deg,
        #080808,
        #151515
    );


}



.mission-vision .container {


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:35px;


}



.mission-box,
.vision-box {


    padding:45px;


    border-radius:20px;


    background:


    rgba(255,255,255,.05);


    border:

    1px solid rgba(212,175,55,.3);


    backdrop-filter:

    blur(10px);


    transition:

    var(--transition);


}



.mission-box:hover,
.vision-box:hover {


    transform:

    translateY(-12px);


    border-color:

    var(--gold);


    box-shadow:

    0 20px 50px rgba(212,175,55,.15);


}



.mission-box i,
.vision-box i {


    font-size:45px;


    color:

    var(--gold);


    margin-bottom:25px;


}



.mission-box h2,
.vision-box h2 {


    color:white;


    margin-bottom:20px;


}



.mission-box p,
.vision-box p {


    color:

    var(--gray);


    line-height:1.8;


}





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


.core-values {


    padding:100px 0;


    background:

    var(--black);


}



.section-title {


    text-align:center;


    margin-bottom:60px;


}



.section-title h2 {


    color:white;


    font-size:2.8rem;


}



.section-title p {


    color:

    var(--gray);


}



.values-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}



.value-card {


    padding:35px 25px;


    text-align:center;


    background:

    #111;


    border-radius:20px;


    border:

    1px solid rgba(255,255,255,.08);


    transition:

    var(--transition);


}



.value-card:hover {


    transform:

    translateY(-12px);


    border-color:

    var(--gold);


}



.value-card i {


    font-size:40px;


    color:

    var(--gold);


    margin-bottom:20px;


}



.value-card h3 {


    color:white;


    margin-bottom:15px;


}



.value-card p {


    color:

    var(--gray);


    line-height:1.7;


}

/* ======================================================
   WHY CHOOSE US SECTION
====================================================== */


.why-us {

    padding:100px 0;

    background:#080808;

}



.why-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



.why-item {


    text-align:center;


    padding:40px 30px;


    background:#111;


    border-radius:20px;


    border:

    1px solid rgba(255,255,255,.08);


    transition:

    var(--transition);


}



.why-item:hover {


    transform:

    translateY(-12px);


    border-color:

    var(--gold);


    box-shadow:

    0 20px 40px rgba(212,175,55,.15);


}



.why-item i {


    font-size:45px;


    color:

    var(--gold);


    margin-bottom:25px;


}



.why-item h3 {


    color:white;


    font-size:1.4rem;


    margin-bottom:15px;


}



.why-item p {


    color:

    var(--gray);


    line-height:1.7;


}





/* ======================================================
   COMPANY STATISTICS SECTION
====================================================== */


.company-stats {


    padding:80px 0;


    background:


    linear-gradient(
        135deg,
        #050505,
        #121212
    );


}



.company-stats .container {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}



.stat-box {


    text-align:center;


    padding:40px 25px;


    background:


    rgba(255,255,255,.05);


    border-radius:20px;


    border:

    1px solid rgba(212,175,55,.25);


    transition:

    var(--transition);


}



.stat-box:hover {


    transform:

    translateY(-10px);


    border-color:

    var(--gold);


}



.stat-box h2 {


    color:

    var(--gold);


    font-size:3.2rem;


    font-weight:800;


    margin-bottom:10px;


}



.stat-box p {


    color:white;


    font-size:1.1rem;


}





/* ======================================================
   EXPERTISE SECTION
====================================================== */


.expertise {


    padding:100px 0;


    background:


    var(--black);


}



.expertise-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



.expertise-card {


    position:relative;


    overflow:hidden;


    padding:40px 30px;


    background:


    rgba(255,255,255,.04);


    border-radius:20px;


    border:

    1px solid rgba(212,175,55,.2);


    transition:

    var(--transition);


}



.expertise-card::before {


    content:"";


    position:absolute;


    width:0;


    height:0;


    top:50%;


    left:50%;


    transform:

    translate(-50%,-50%);


    background:


    radial-gradient(

        circle,

        rgba(212,175,55,.25),

        transparent 70%

    );


    transition:.5s;


}



.expertise-card:hover::before {


    width:350px;


    height:350px;


}



.expertise-card:hover {


    transform:

    translateY(-12px);


    border-color:

    var(--gold);


}



.expertise-card i {


    position:relative;


    font-size:45px;


    color:

    var(--gold);


    margin-bottom:25px;


}



.expertise-card h3 {


    position:relative;


    color:white;


    font-size:1.5rem;


    margin-bottom:15px;


}



.expertise-card p {


    position:relative;


    color:

    var(--gray);


    line-height:1.8;


}





/* ======================================================
   TEAM SECTION
====================================================== */


.team {


    padding:100px 0;


    background:#080808;


}



.team-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:35px;


}



.team-card {


    background:#111;


    overflow:hidden;


    border-radius:20px;


    text-align:center;


    border:

    1px solid rgba(255,255,255,.08);


    transition:

    var(--transition);


}



.team-card:hover {


    transform:

    translateY(-15px);


    border-color:

    var(--gold);


    box-shadow:

    0 20px 50px rgba(212,175,55,.15);


}



.team-card img {


    width:100%;


    height:350px;


    object-fit:cover;


    transition:.5s;


}



.team-card:hover img {


    transform:

    scale(1.08);


}



.team-card h3 {


    color:

    var(--gold);


    font-size:1.5rem;


    margin-top:25px;


}



.team-card p {


    color:

    var(--gray);


    padding:

    0 25px 30px;


    line-height:1.7;


}

/* ======================================================
   CALL TO ACTION SECTION
====================================================== */


.about-cta {


    position:relative;


    padding:100px 0;


    text-align:center;


    background:


    linear-gradient(

        rgba(0,0,0,.85),

        rgba(0,0,0,.9)

    ),

    url("../images/cta-bg.jpg");


    background-size:cover;


    background-position:center;


}



.about-cta h2 {


    color:white;


    font-size:

    clamp(2rem,4vw,3.2rem);


    margin-bottom:20px;


}



.about-cta p {


    color:#ddd;


    max-width:800px;


    margin:

    0 auto 40px;


    line-height:1.8;


    font-size:1.1rem;


}



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


.cta-buttons {


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



.cta-buttons a {


    display:inline-block;


    padding:

    15px 35px;


    border-radius:50px;


    text-decoration:none;


    font-weight:600;


    transition:

    var(--transition);


}



.btn-primary {


    background:

    var(--gold);


    color:#000;


}



.btn-primary:hover {


    background:

    var(--gold-light);


    transform:

    translateY(-5px);


}



.btn-secondary {


    border:

    2px solid var(--gold);


    color:

    var(--gold);


}



.btn-secondary:hover {


    background:

    var(--gold);


    color:#000;


    transform:

    translateY(-5px);


}





/* ======================================================
   IMAGE HOVER EFFECTS
====================================================== */


.story-image img,
.team-card img {


    transition:

    transform .6s ease,

    filter .6s ease;


}



.story-image:hover img,
.team-card:hover img {


    filter:

    brightness(1.1);


}





/* ======================================================
   SCROLL REVEAL ANIMATION
====================================================== */


.reveal {


    opacity:0;


    transform:

    translateY(50px);


    transition:

    all .8s ease;


}



.reveal.active {


    opacity:1;


    transform:

    translateY(0);


}



@keyframes fadeUp {


    from {


        opacity:0;


        transform:

        translateY(40px);


    }



    to {


        opacity:1;


        transform:

        translateY(0);


    }

}





/* ======================================================
   GOLD GLOW EFFECT
====================================================== */


.about-hero h1,
.section-title h2,
.about-cta h2 {


    text-shadow:


    0 0 20px rgba(212,175,55,.25);


}



.gold-glow {


    animation:

    goldPulse 3s infinite;


}



@keyframes goldPulse {


    0%,100% {


        box-shadow:

        0 0 0 rgba(212,175,55,0);


    }



    50% {


        box-shadow:

        0 0 30px rgba(212,175,55,.35);


    }


}





/* ======================================================
   CARD PREMIUM BORDER EFFECT
====================================================== */


.value-card,
.why-item,
.expertise-card,
.mission-box,
.vision-box,
.team-card {


    position:relative;


    overflow:hidden;


}





/* ======================================================
   TABLET RESPONSIVE DESIGN
====================================================== */


@media(max-width:1024px){



    .our-story .container {


        grid-template-columns:

        1fr;


    }



    .values-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



    .why-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



    .company-stats .container {


        grid-template-columns:

        repeat(2,1fr);


    }



    .expertise-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



    .team-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



}





/* ======================================================
   MOBILE RESPONSIVE DESIGN
====================================================== */


@media(max-width:768px){



    .about-hero {


        min-height:

        70vh;


    }



    .about-hero h1 {


        font-size:

        2.2rem;


    }




    .mission-vision .container,
    .values-grid,
    .why-grid,
    .company-stats .container,
    .expertise-grid,
    .team-grid {


        grid-template-columns:

        1fr;


    }




    .mission-box,
    .vision-box {


        padding:

        30px;


    }




    .section-title h2 {


        font-size:

        2rem;


    }





    .team-card img {


        height:

        300px;


    }





    .cta-buttons {


        flex-direction:

        column;


        align-items:center;


    }




    .cta-buttons a {


        width:

        90%;


    }



}







/* ======================================================
   SMALL DEVICES
====================================================== */


@media(max-width:480px){



    .about-hero p {


        font-size:

        1rem;


    }



    .story-content h2 {


        font-size:

        2rem;


    }




    .stat-box h2 {


        font-size:

        2.5rem;


    }




    .expertise-card,
    .value-card,
    .why-item {


        padding:

        25px 20px;


    }



}






/* ======================================================
   ACCESSIBILITY
====================================================== */


a:focus,
button:focus {


    outline:

    2px solid var(--gold);


    outline-offset:

    4px;


}




::selection {

    background:
    var(--about-gold);

    color:
    #000;

}


/* ======================================================
   ABOUT PAGE FOOTER OVERRIDE
====================================================== */


.footer{

    background:#000;

    padding:70px 8% 20px;

}


.footer .container{

    display:grid;

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

    gap:40px;

}


.footer-logo h2{

    color:#D4AF37;

    margin-bottom:20px;

}


.footer-logo p{

    color:#ccc;

    line-height:1.8;

}


.footer-links h3,
.footer-contact h3{

    color:#D4AF37;

    margin-bottom:20px;

}


.footer-links ul{

    list-style:none;

    padding:0;

}


.footer-links ul li{

    margin-bottom:12px;

}


.footer-links ul li a{

    color:#ccc;

    text-decoration:none;

    display:inline-block;

    position:relative;

    transition:.4s ease;

}


.footer-links ul li a:hover{

    color:#D4AF37;

    transform:translateX(10px);

}


.footer-bottom{

    border-top:1px solid #222;

    margin-top:40px;

    padding-top:20px;

    text-align:center;

    color:#999;

}
@media(max-width:768px){


.footer .container{

    grid-template-columns:1fr;

    text-align:center;

}


}


/* END OF ABOUT.CSS */