/* ==========================
ABOUT PAGE BANNER PREMIUM
========================== */


.about-banner{

    position:relative;

    width:100%;

    height:50vh;


    background:
    linear-gradient(
    rgba(13,36,30,.72),
    rgba(13,36,30,.72)
    ),
    url("../images/bg.jpeg");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;

    color:white;

    overflow:hidden;


    animation:bannerZoom 12s infinite alternate;

}



/* Background Zoom */

@keyframes bannerZoom{


    from{

        background-size:100%;

    }


    to{

        background-size:110%;

    }


}



/* Decorative Glow */


.about-banner::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    background:

    radial-gradient(

    circle,

    rgba(201,162,39,.25),

    transparent 70%

    );


    top:-150px;


    right:-120px;


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


}




@keyframes floatGlow{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(30px);

    }


}





/* ==========================
BACK BUTTON
========================== */


.back-arrow{


    position:absolute;


    top:30px;


    left:8%;



    display:flex;


    align-items:center;


    gap:10px;



    padding:12px 24px;



    background:var(--gold);



    color:var(--green);



    text-decoration:none;



    border-radius:50px;



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


    font-size:15px;


    font-weight:600;



    box-shadow:

    0 10px 25px rgba(0,0,0,.35);



    transition:.4s;


    z-index:10;


}



.back-arrow:hover{


    background:white;


    transform:

    translateX(-8px)

    scale(1.05);


}





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


.about-banner h1{


    font-family:'Cormorant Garamond',serif;


    font-size:64px;


    font-weight:700;


    color:white;


    margin-bottom:10px;



    opacity:0;


    animation:

    fadeUp 1s ease forwards;


}



.about-banner h2{


    font-family:'Cormorant Garamond',serif;


    font-size:40px;


    font-weight:600;


    color:var(--gold);



    opacity:0;


    animation:

    fadeUp 1s .3s ease forwards;


}




.about-banner p{


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


    font-size:20px;


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



    opacity:0;


    animation:

    fadeUp 1s .6s ease forwards;


}





@keyframes fadeUp{


    from{


        opacity:0;


        transform:

        translateY(40px);


    }


    to{


        opacity:1;


        transform:

        translateY(0);


    }


}





/* ==========================
GOLD LINE
========================== */


.about-banner h2::after{


    content:"";


    display:block;


    width:0;


    height:3px;


    background:var(--gold);


    margin:15px auto 0;



    animation:

    lineGrow 1s 1s forwards;


}




@keyframes lineGrow{


    to{


        width:90px;


    }


}





/* ==========================
MOBILE
========================== */


@media(max-width:768px){


.about-banner{


    height:40vh;


}



.about-banner h1{


    font-size:46px;


}



.about-banner h2{


    font-size:32px;


}



.about-banner p{


    font-size:16px;


}



.back-arrow{


    top:20px;


    left:20px;


    padding:8px 16px;


    font-size:13px;


}


}


/*====================================
 PREMIUM ABOUT SECTION
====================================*/


.about{

padding:90px 8%;

background:var(--bg-dark);

position:relative;

overflow:hidden;

}



/* Background Glow */

.about::before{

content:"";

position:absolute;

width:500px;

height:500px;

right:-200px;

top:-200px;

background:

radial-gradient(
circle,
rgba(201,162,39,.18),
transparent 70%
);

border-radius:50%;

}



/* Section Title */

.section-title{

text-align:center;

margin-bottom:70px;

position:relative;

z-index:1;

}


.section-title h2{

font-family:'Cormorant Garamond',serif;

font-size:55px;

color:var(--gold);

font-weight:700;

text-transform:uppercase;

letter-spacing:2px;

}



.section-title p{

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

font-size:18px;

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

margin-top:12px;

}



.section-title::after{

content:"";

display:block;

width:90px;

height:3px;

background:var(--gold);

margin:20px auto 0;

}



/* Container */


.about-container{

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}



/* Image */


.about-image{

position:relative;

}



.about-image::before{

content:"";

position:absolute;

width:140px;

height:140px;

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

left:-25px;

top:-25px;

border-radius:25px;

}



.about-image img{

width:100%;

height:480px;

object-fit:cover;

border-radius:25px;

position:relative;

z-index:1;

box-shadow:

0 25px 60px rgba(0,0,0,.45);

transition:.5s ease;

}



.about-image:hover img{

transform:translateY(-10px);

box-shadow:

0 35px 70px rgba(201,162,39,.25);

}



/* Text */


.about-text{

position:relative;

z-index:2;

}



.about-label{

display:inline-block;

font-size:14px;

letter-spacing:4px;

font-weight:700;

color:var(--gold);

margin-bottom:15px;

}



.about-text h2{

font-family:'Cormorant Garamond',serif;

font-size:52px;

line-height:1.1;

color:var(--white);

margin-bottom:18px;

}



.about-text h3{

font-family:'Cormorant Garamond',serif;

font-size:32px;

color:var(--gold-light);

line-height:1.3;

margin-bottom:25px;

}



.about-text p{

font-size:17px;

line-height:1.9;

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

margin-bottom:18px;

}



/* Highlight Box */


.about-highlight{

display:flex;

align-items:center;

gap:15px;

margin-top:35px;

padding:18px 28px;

background:var(--card-dark);

border-left:4px solid var(--gold);

border-radius:12px;

width:max-content;

box-shadow:

0 15px 35px rgba(0,0,0,.25);

transition:.4s;

}



.about-highlight:hover{

transform:translateX(10px);

}



.about-highlight i{

font-size:24px;

color:var(--gold);

}



.about-highlight span{

font-size:16px;

font-weight:600;

color:var(--cream);

}



/* Responsive */


@media(max-width:900px){


.about{

padding:70px 6%;

}


.about-container{

grid-template-columns:1fr;

gap:50px;

}


.about-image img{

height:350px;

}


.about-image::before{

display:none;

}


.section-title h2{

font-size:40px;

}


.about-text h2{

font-size:40px;

}


.about-text h3{

font-size:26px;

}


.about-highlight{

width:100%;

justify-content:center;

}

}
/* =========================
   GLOBAL REACH
========================= */

.global-section{

    width:100%;

    padding:40px 8% 70px;

    background:var(--bg-dark);

    text-align:center;

}



.global-content{

    max-width:800px;

    margin:0 auto 50px;

}



.global-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    color:var(--gold);

    font-weight:700;

    margin-bottom:12px;

    letter-spacing:.5px;

}



.line{

    width:70px;

    height:4px;

    background:var(--gold);

    margin:18px auto 28px;

    border-radius:20px;

}



.global-content p{

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

    font-size:21px;

    font-weight:400;

    color:var(--text-light);

    line-height:1.7;

    margin-bottom:30px;

}



.earth-icon{

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

    font-size:68px;

    color:#3cb371;

    animation:rotateEarth 20s linear infinite;

}



@keyframes rotateEarth{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*=========================
      LIVE WORLD MAP
=========================*/

.map-image{

    width:100%;

    max-width:1200px;

    margin:40px auto 0;

}

#worldMap{

    width:100%;

    height:600px;

    border-radius:18px;

    overflow:hidden;

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

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

}

@media(max-width:768px){

    #worldMap{

        height:420px;

    }

}



/* Mobile */

@media(max-width:768px){

.global-section{

    padding:60px 20px;

}


.global-content h2{

    font-size:42px;

}


.global-content p{

    font-size:18px;

}


.earth-icon{

    font-size:50px;

}

}



.read-more-btn .btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 30px;

    background:var(--gold);

    color:var(--bg-dark);

    text-decoration:none;

    border-radius:30px;

    transition:.3s;

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

    font-size:15px;

    font-weight:600;

}



.read-more-btn .btn i{

    font-size:14px;

    transition:transform .3s ease;

}



.read-more-btn .btn:hover{

    background:var(--white);

}



.read-more-btn .btn:hover i{

    transform:translateX(5px);

}
/*=========================*
OUR VALUES PREMIUM SECTION
*=========================*/

.choose{

background:var(--section-dark);

padding:90px 8%;

text-align:center;

position:relative;

overflow:hidden;

}



/* Background Glow */

.choose::before{

content:"";

position:absolute;

width:400px;

height:400px;

left:-180px;

top:-180px;

background:

radial-gradient(
circle,
rgba(201,162,39,.15),
transparent 70%
);

border-radius:50%;

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

}



/*=========================*
SECTION HEADING
*=========================*/


.section-heading{

position:relative;

z-index:2;

margin-bottom:60px;

}



.section-heading span{

display:block;

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

font-size:14px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:15px;

}



.section-heading h2{

font-family:'Cormorant Garamond',serif;

font-size:52px;

color:var(--gold);

font-weight:700;

margin-bottom:15px;

letter-spacing:1px;

text-transform:uppercase;

animation:valueReveal .8s ease forwards;

}



.section-heading p{

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

font-size:17px;

font-weight:400;

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

line-height:1.8;

max-width:750px;

margin:20px auto 0;

}



.line{

width:90px;

height:4px;

background:var(--gold);

margin:0 auto;

border-radius:20px;

box-shadow:

0 0 15px rgba(201,162,39,.45);

animation:valueReveal .9s ease forwards;

}



/*=========================*
GRID
*=========================*/


.values-grid{

max-width:1300px;

margin:auto;

display:grid;

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

gap:30px;

position:relative;

}



/*=========================*
CARDS
*=========================*/


.value-card{

background:var(--cream);

border:1px solid rgba(201,162,39,.5);

border-radius:22px;

padding:40px 25px;

min-height:270px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

transition:.45s ease;

cursor:pointer;

box-shadow:

0 15px 35px rgba(0,0,0,.18);

position:relative;

overflow:hidden;


opacity:1;

transform:translateY(0);

animation:valueCardReveal .8s ease forwards;

}



.value-card:nth-child(1){

animation-delay:.15s;

}


.value-card:nth-child(2){

animation-delay:.30s;

}


.value-card:nth-child(3){

animation-delay:.45s;

}


.value-card:nth-child(4){

animation-delay:.60s;

}



/* Shine Effect */


.value-card::before{

content:"";

position:absolute;

top:-100%;

left:-120%;

width:70%;

height:250%;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transform:rotate(25deg);

transition:.8s;

}



.value-card:hover::before{

left:150%;

}



/* Border Glow */


.value-card::after{

content:"";

position:absolute;

inset:0;

border-radius:22px;

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

opacity:0;

transition:.5s;

}



.value-card:hover::after{

opacity:1;

}



.value-card:hover{

transform:translateY(-12px);

box-shadow:

0 25px 55px rgba(0,0,0,.25);

border-color:var(--gold);

}



/* Icon */


.value-card i{

font-size:48px;

color:var(--gold);

margin-bottom:22px;

transition:.4s;

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

}



.value-card:hover i{

transform:scale(1.15);

}



/* Title */


.value-card h3{

font-family:'Cormorant Garamond',serif;

font-size:32px;

color:var(--bg-dark);

margin-bottom:15px;

font-weight:700;

line-height:1.2;

}



/* Description */


.value-card p{

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

font-size:16px;

color:#555;

line-height:1.8;

margin:0;

}



/*=========================*
ANIMATIONS
*=========================*/


@keyframes valueReveal{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}



@keyframes valueCardReveal{


from{

opacity:0;

transform:translateY(50px) scale(.96);

}


to{

opacity:1;

transform:translateY(0) scale(1);

}

}



@keyframes valueIconFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-8px);

}

}



@keyframes valuesGlow{


0%,100%{

transform:translate(0,0) scale(1);

}


50%{

transform:translate(70px,50px) scale(1.2);

}

}



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


@media(max-width:992px){


.values-grid{

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

gap:25px;

}

}



@media(max-width:768px){


.choose{

padding:60px 5%;

}


.section-heading h2{

font-size:38px;

}


.section-heading p{

font-size:15px;

}


.values-grid{

grid-template-columns:1fr;

gap:20px;

}


.value-card{

min-height:230px;

padding:30px 20px;

}


.value-card i{

font-size:40px;

}


.value-card h3{

font-size:28px;

}

}