/* =====================================================
   SCHOLAR RESEARCH SOLUTION
   PREMIUM LUXURY WEBSITE CSS
   PART A
===================================================== */


/* GOOGLE FONT */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');



/* =====================================================
   ROOT VARIABLES
===================================================== */

:root{

    --gold:#c9a227;

    --gold-light:#e7c75f;

    --black:#050505;

    --dark:#0c0c0c;

    --dark2:#141414;

    --white:#ffffff;

    --grey:#b5b5b5;

    --border:
    rgba(255,255,255,0.08);

    --glass:
    rgba(255,255,255,0.04);

    --transition:
    all .4s ease;

}



/* =====================================================
   RESET
===================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--black);

    color:var(--white);

    overflow-x:hidden;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}


img{

    max-width:100%;

    display:block;

}



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


.container{

    width:90%;

    max-width:1250px;

    margin:auto;

}



section{

    padding:100px 0;

}



/* =====================================================
   NAVBAR
===================================================== */


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

}



.navbar{


    width:90%;

    max-width:1300px;

    height:100px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 25px;


    background:

    rgba(5,5,5,.75);


    backdrop-filter:blur(15px);


    border:

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


    border-radius:0 0 20px 20px;


}



.logo img{


    height:115px;

    width:auto;

    object-fit:contain;

}



.logo img:hover{


    transform:scale(1.05);

}



/* Navigation */

.nav-menu{


    display:flex;

    align-items:center;

    gap:35px;


}



.nav-menu a{


    position:relative;


    font-size:15px;


    font-weight:400;


    color:#ddd;


    transition:var(--transition);


}



.nav-menu a:hover,
.nav-menu .active{


    color:var(--gold-light);


}



.nav-menu a::after{


    content:"";


    position:absolute;


    bottom:-8px;


    left:0;


    width:0;


    height:2px;


    background:var(--gold);


    transition:.4s;


}


.nav-menu a:hover::after,
.nav-menu .active::after{


    width:100%;


}



/* ===============================
   FINAL MOBILE MENU FIX
================================ */


.menu-btn{

    display:none;

}


@media(max-width:850px){


.navbar{

    position:relative;

}



.menu-btn{

    display:block;

    background:none;

    border:0;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:10000;

}



.nav-menu{


    position:absolute;

    top:75px;

    left:0;


    width:100%;


    background:#050505;


    display:flex;

    flex-direction:column;

    align-items:center;


    padding:35px 0;


    gap:25px;


    transform:translateY(-120%);


    transition:.4s ease;


    opacity:0;


    visibility:hidden;


}



.nav-menu.show{


    transform:translateY(0);


    opacity:1;


    visibility:visible;


}



}

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


.hero{


    min-height:100vh;


    display:flex;


    align-items:center;


    position:relative;


    overflow:hidden;


    padding-top:120px;



    background:


    radial-gradient(

    circle at 80% 20%,

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

    transparent 35%

    ),


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}



/* Decorative Glow */


.hero-bg-circle{


    position:absolute;


    border-radius:50%;


    filter:blur(100px);


}



.hero-bg-circle.one{


    width:400px;

    height:400px;


    background:

    rgba(201,162,39,.08);


    right:-150px;


    top:100px;


}



.hero-bg-circle.two{


    width:350px;

    height:350px;


    background:

    rgba(255,255,255,.03);


    left:-150px;


    bottom:50px;


}



.hero-container{


    width:90%;


    max-width:1250px;


    margin:auto;


}



.hero-left{


    max-width:850px;


}



/* Hero Tag */


.hero-tag{


    display:inline-flex;


    align-items:center;


    gap:12px;


    color:var(--gold-light);


    font-size:14px;


    letter-spacing:2px;


    text-transform:uppercase;


    margin-bottom:30px;


}


.hero-tag span{


    width:40px;


    height:1px;


    background:var(--gold);


}



/* Hero Heading */


.hero h1{


    font-size:78px;


    line-height:1.08;


    font-weight:700;


    letter-spacing:-2px;


    margin-bottom:30px;


}



.hero h1 span{


    color:var(--gold-light);


}



/* Hero Paragraph */


.hero p{


    color:#c5c5c5;


    max-width:700px;


    font-size:18px;


    line-height:1.9;


    margin-bottom:45px;


}



/* Buttons */


.hero-buttons{


    display:flex;


    gap:20px;


    flex-wrap:wrap;


}



.btn-primary{


    padding:16px 38px;


    background:

    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    color:#111;


    font-weight:600;


    border-radius:50px;


    transition:.4s;


}



.btn-primary:hover{


    transform:translateY(-5px);


    box-shadow:

    0 15px 40px

    rgba(201,162,39,.35);


}



.btn-secondary{


    padding:15px 38px;


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


    border-radius:50px;


    color:white;


    transition:.4s;


}



.btn-secondary:hover{


    background:var(--gold);


    color:#111;


}



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


.section-heading{


    text-align:center;


    max-width:750px;


    margin:0 auto 70px;


}



.section-heading span{


    color:var(--gold-light);


    letter-spacing:3px;


    font-size:13px;


}



.section-heading h2{


    margin-top:15px;


    font-size:45px;


    line-height:1.2;


}



.section-heading p{


    margin-top:20px;


    color:var(--grey);


    font-size:17px;


}
/* =====================================================
        TRUST BAR
===================================================== */


.trust-bar{

    background:#080808;

    position:relative;

    padding:40px 0;

    border-top:1px solid rgba(255,255,255,.06);

    border-bottom:1px solid rgba(255,255,255,.06);

}



.trust-container{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:20px;

}



.trust-box{

    text-align:center;

    padding:30px 20px;

    position:relative;

}



.trust-box:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:20%;

    width:1px;

    height:60%;

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

}



.trust-box h2{

    font-size:48px;

    font-weight:700;

    margin-bottom:8px;

    background:

    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    background-clip:text;

    -webkit-text-fill-color:transparent;

}



.trust-box p{

    color:#b8b8b8;

    font-size:15px;

    letter-spacing:.5px;

}



/* Trust Bar Hover Effect */

.trust-box{

    transition:.4s;

}



.trust-box:hover{

    transform:translateY(-8px);

}



.trust-box:hover h2{

    filter:drop-shadow(0 0 15px rgba(201,162,39,.5));

}



/* =====================================================
        TRUST BAR RESPONSIVE
===================================================== */


@media(max-width:900px){

    .trust-container{

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

    }


    .trust-box:nth-child(2)::after{

        display:none;

    }

}



@media(max-width:600px){

    .trust-container{

        grid-template-columns:1fr;

    }


    .trust-box::after{

        display:none;

    }


    .trust-box h2{

        font-size:40px;

    }

}
/* =====================================================
        INTRO SECTION
===================================================== */


.intro{

    background:

    linear-gradient(

    180deg,

    #050505,

    #0b0b0b

    );

    position:relative;

    overflow:hidden;

}



.intro::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:

    rgba(201,162,39,.08);

    border-radius:50%;

    filter:blur(120px);

    left:-200px;

    top:50px;

}



.intro .section-title{

    text-align:center;

    max-width:850px;

    margin:0 auto 55px;

    position:relative;

    z-index:2;

}



.intro .section-title span{

    color:var(--gold-light);

    letter-spacing:4px;

    font-size:13px;

    font-weight:500;

}



.intro .section-title h2{

    margin-top:18px;

    font-size:48px;

    line-height:1.25;

    font-weight:700;

    color:#fff;

}



/* Intro Content Box */


.intro-content{

    max-width:950px;

    margin:auto;

    padding:50px 60px;

    background:

    rgba(255,255,255,.03);

    border:

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

    border-radius:30px;

    backdrop-filter:blur(15px);

    position:relative;

    z-index:2;

    box-shadow:

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

}



.intro-content::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:2px;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );

}



.intro-content p{

    color:#c7c7c7;

    font-size:17px;

    line-height:2;

    text-align:center;

    margin-bottom:25px;

}



.intro-content strong{

    color:var(--gold-light);

    font-weight:600;

}



/* Intro Hover Effect */


.intro-content:hover{

    border-color:

    rgba(201,162,39,.35);

    transform:translateY(-5px);

    transition:.4s;

}



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


@media(max-width:768px){


    .intro .section-title h2{

        font-size:34px;

    }


    .intro-content{

        padding:35px 25px;

    }


    .intro-content p{

        font-size:15px;

        text-align:left;

    }


}



@media(max-width:480px){


    .intro .section-title h2{

        font-size:28px;

    }


}
/* =====================================================
   CSS PART B
   SERVICES / PROCESS / RESEARCH / ACHIEVEMENTS
===================================================== */


/* =====================================================
        SERVICES SECTION
===================================================== */


.services{

    background:#080808;

    position:relative;

}


.services::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-150px;

    top:100px;

    background:rgba(201,162,39,.08);

    border-radius:50%;

    filter:blur(100px);

}



.services-grid{


    display:grid;

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

    gap:30px;


}



.service-card{


    background:

    rgba(255,255,255,.03);


    border:

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


    padding:45px 35px;


    border-radius:25px;


    position:relative;


    overflow:hidden;


    transition:.45s;


}



.service-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:3px;


    background:

    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


    transform:scaleX(0);


    transition:.45s;


}



.service-card:hover::before{


    transform:scaleX(1);


}



.service-card:hover{


    transform:translateY(-12px);


    border-color:

    rgba(201,162,39,.4);


    box-shadow:

    0 25px 50px rgba(0,0,0,.4);


}



.service-icon{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    rgba(201,162,39,.1);


    border:

    1px solid rgba(201,162,39,.3);


    margin-bottom:30px;


}



.service-icon i{


    font-size:30px;


    color:var(--gold-light);


}



.service-card h3{


    font-size:25px;


    margin-bottom:18px;


}



.service-card p{


    color:#bdbdbd;


    line-height:1.9;


    font-size:15px;


    margin-bottom:25px;


}



.service-card a{


    color:var(--gold-light);


    font-size:15px;


    display:flex;


    align-items:center;


    gap:10px;


}



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


.why-us{


    background:

    linear-gradient(

    180deg,

    #080808,

    #0e0e0e

    );


}



.why-grid{


    display:grid;


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


    gap:35px;


}



.why-item{


    display:flex;


    gap:25px;


    padding:35px;


    border:

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


    border-radius:20px;


    background:

    rgba(255,255,255,.025);


    transition:.4s;


}



.why-item:hover{


    border-color:var(--gold);


    transform:translateY(-5px);


}



.number{


    min-width:65px;


    height:65px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    background:

    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    color:#111;


    font-size:20px;


    font-weight:700;


}



.why-item h3{


    margin-bottom:12px;


    font-size:22px;


}



.why-item p{


    color:#bdbdbd;


    font-size:15px;


    line-height:1.8;


}



/* =====================================================
        PUBLICATION PROCESS
===================================================== */


.process{


    background:#050505;


}



.timeline{


    display:flex;


    align-items:center;


    justify-content:center;


}



.step{


    text-align:center;


    width:220px;


}



.circle{


    width:80px;


    height:80px;


    margin:auto;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    color:#111;


    font-size:24px;


    font-weight:700;


    margin-bottom:25px;


}



.step h4{


    font-size:20px;


    margin-bottom:12px;


}



.step p{


    color:#aaa;


    font-size:14px;


    line-height:1.7;


}



.line{


    width:80px;


    height:1px;


    background:

    rgba(201,162,39,.5);


}



/* =====================================================
        HIGHLIGHT SECTION
===================================================== */


.highlight{


    background:#080808;


}



.highlight-box{


    padding:80px;


    border-radius:35px;


    background:


    linear-gradient(

    135deg,

    #121212,

    #080808

    );


    border:

    1px solid rgba(201,162,39,.25);


    position:relative;


    overflow:hidden;


}



.highlight-box::after{


    content:"";


    position:absolute;


    width:300px;


    height:300px;


    background:

    rgba(201,162,39,.12);


    border-radius:50%;


    right:-120px;


    top:-120px;


    filter:blur(80px);


}



.highlight-content{


    position:relative;


    z-index:2;


    max-width:750px;


}



.highlight-content span{


    color:var(--gold-light);


    letter-spacing:3px;


}



.highlight-content h2{


    font-size:48px;


    margin:20px 0;


    line-height:1.2;


}



.highlight-content p{


    color:#c0c0c0;


    font-size:17px;


    line-height:1.9;


    margin-bottom:35px;


}



/* =====================================================
        RESEARCH FIELDS
===================================================== */


.research-fields{


    background:#0b0b0b;


}



.fields-grid{


    display:grid;


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


    gap:25px;


}



.field-card{


    padding:35px;


    border-radius:20px;


    border:

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


    background:

    rgba(255,255,255,.03);


    transition:.4s;


}



.field-card:hover{


    transform:translateY(-8px);


    border-color:var(--gold);


}



.field-card i{


    color:var(--gold-light);


    font-size:32px;


    margin-bottom:20px;


}



.field-card h3{


    margin-bottom:12px;


}



.field-card p{


    color:#aaa;


    font-size:14px;


    line-height:1.8;


}



/* =====================================================
        ACHIEVEMENTS
===================================================== */


.achievements{


    background:#050505;


}



.achievement-grid{


    display:grid;


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


    gap:25px;


}



.achievement-card{


    text-align:center;


    padding:40px 25px;


    border-radius:20px;


    background:

    rgba(255,255,255,.03);


    border:

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


}



.achievement-card h2{


    font-size:55px;


    color:var(--gold-light);


}



.achievement-card h4{


    margin:15px 0;


    font-size:20px;


}



.achievement-card p{


    color:#aaa;


    font-size:14px;


}
/* =====================================================
   CSS PART C
   TESTIMONIALS / FOOTER / WHATSAPP / RESPONSIVE
===================================================== */


/* =====================================================
        TESTIMONIAL SECTION
===================================================== */


.testimonials{

    background:#080808;

}



.testimonial-grid{


    display:grid;

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

    gap:30px;


}



.testimonial-card{


    padding:40px 35px;


    border-radius:25px;


    background:

    rgba(255,255,255,.03);


    border:

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


    position:relative;


    transition:.4s;


}



.testimonial-card:hover{


    transform:translateY(-10px);


    border-color:

    rgba(201,162,39,.5);


}



.quote{


    width:55px;


    height:55px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    rgba(201,162,39,.12);


    color:var(--gold-light);


    margin-bottom:25px;


}



.testimonial-card p{


    color:#c4c4c4;


    line-height:1.9;


    font-size:15px;


    font-style:italic;


    margin-bottom:25px;


}



.testimonial-card h4{


    color:white;


    font-size:18px;


}



.testimonial-card span{


    color:var(--gold-light);


    font-size:14px;


}



/* =====================================================
        FINAL CONSULTATION SECTION
===================================================== */


.consultation{


    padding:110px 0;


    background:


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}



.consultation-box{


    text-align:center;


    padding:80px 50px;


    border-radius:35px;


    border:

    1px solid rgba(201,162,39,.3);


    background:

    rgba(255,255,255,.03);


}



.consultation-box span{


    color:var(--gold-light);


    letter-spacing:4px;


    font-size:13px;


}



.consultation-box h2{


    font-size:50px;


    max-width:900px;


    margin:25px auto;


    line-height:1.2;


}



.consultation-box p{


    max-width:700px;


    margin:auto;


    color:#c0c0c0;


    line-height:1.9;


    margin-bottom:40px;


}



.consult-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



/* =====================================================
        FOOTER
===================================================== */


.footer{


    background:#030303;


    border-top:

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


}



.footer-grid{


    display:grid;


    grid-template-columns:1.4fr 1fr 1.2fr 1fr;


    gap:45px;


    padding:80px 0 50px;


}



.footer-logo img{


    width:170px;


    margin-bottom:25px;


}



.footer-column p{


    color:#a9a9a9;


    line-height:1.9;


    font-size:15px;


}



.footer-column h3{


    color:white;


    font-size:22px;


    margin-bottom:25px;


    position:relative;


}



.footer-column h3::after{


    content:"";


    width:45px;


    height:2px;


    background:var(--gold);


    position:absolute;


    bottom:-8px;


    left:0;


}



.footer-column ul li{


    margin-bottom:14px;


}



.footer-column ul li a{


    color:#b5b5b5;


    transition:.3s;


}



.footer-column ul li a:hover{


    color:var(--gold-light);


    padding-left:8px;


}



.contact-item{


    display:flex;


    gap:15px;


    margin-bottom:18px;


}



.contact-item i{


    color:var(--gold-light);


    margin-top:6px;


}



.footer-btn{


    display:inline-flex;


    align-items:center;


    gap:10px;


    margin-top:20px;


    padding:14px 28px;


    border-radius:40px;


    background:var(--gold);


    color:#111;


    font-weight:600;


}



.social-links{


    display:flex;


    gap:12px;


    margin-top:25px;


}



.social-links a{


    width:42px;


    height:42px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    border:

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


    color:white;


    transition:.3s;


}



.social-links a:hover{


    background:var(--gold);


    color:#111;


}



.footer-bottom{


    text-align:center;


    padding:22px;


    border-top:

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


    color:#777;


    font-size:14px;


}



/* =====================================================
        WHATSAPP BUTTON
===================================================== */


.whatsapp-btn{


    position:fixed;


    right:25px;


    bottom:25px;


    width:65px;


    height:65px;


    background:#25D366;


    color:white;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:34px;


    z-index:9999;


    animation:

    whatsapp 2s infinite;


}



@keyframes whatsapp{


    0%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,.5);

    }


    70%{

        box-shadow:

        0 0 0 20px rgba(37,211,102,0);

    }


    100%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,0);

    }


}



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


@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}



.hero-left,
.service-card,
.why-item,
.field-card,
.achievement-card,
.testimonial-card{


    animation:

    fadeUp .8s ease both;


}



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


@media(max-width:1100px){


    .services-grid,
    .fields-grid{


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


    }


    .achievement-grid{


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


    }


    .footer-grid{


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


    }


    .hero h1{


        font-size:60px;


    }


}




    .timeline{


        flex-direction:column;


    }


    .line{


        width:1px;


        height:50px;


    }


    .why-grid,
    .testimonial-grid{


        grid-template-columns:1fr;


    }







@media(max-width:600px){


    section{

        padding:75px 0;

    }


    .container{

        width:88%;

    }


    .services-grid,
    .fields-grid,
    .achievement-grid,
    .footer-grid{


        grid-template-columns:1fr;


    }



    .hero h1{


        font-size:38px;


    }


    .hero p{


        font-size:15px;


    }


    .section-heading h2{


        font-size:32px;


    }


    .highlight-box,
    .consultation-box{


        padding:40px 25px;


    }


    .highlight-content h2,
    .consultation-box h2{


        font-size:32px;


    }


    .whatsapp-btn{


        width:58px;

        height:58px;

        font-size:28px;


    }


}
/* =====================================================
   SERVICES PAGE CSS PART A
   HERO / INTRO / SERVICE CARDS
===================================================== */


/* =====================================================
        SERVICES PAGE HERO
===================================================== */


.page-hero{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding-top:120px;

    position:relative;

    overflow:hidden;


    background:


    radial-gradient(

    circle at top right,

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

    transparent 35%

    ),


    linear-gradient(

    135deg,

    #050505,

    #111

    );

}



.page-hero::before{


    content:"";


    position:absolute;


    width:450px;


    height:450px;


    background:

    rgba(201,162,39,.08);


    border-radius:50%;


    filter:blur(120px);


    left:-200px;


    bottom:-100px;


}



.page-hero-content{


    max-width:950px;


    position:relative;


    z-index:2;


}



.page-hero-content span{


    color:var(--gold-light);


    letter-spacing:5px;


    font-size:14px;


}



.page-hero-content h1{


    margin-top:25px;


    font-size:70px;


    line-height:1.15;


    font-weight:700;


}



.page-hero-content h1::first-line{


    color:white;


}



.page-hero-content p{


    max-width:750px;


    margin:30px auto;


    color:#c0c0c0;


    font-size:18px;


    line-height:1.9;


}



/* =====================================================
        SERVICE INTRO
===================================================== */


.service-intro{


    background:#080808;


    padding-bottom:40px;


}



.service-intro .section-heading{


    margin-bottom:20px;


}





/* =====================================================
        MAIN SERVICE SECTION
===================================================== */


.main-services{


    background:#080808;


}



.main-services .services-grid{


    display:grid;


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


    gap:30px;


}





/* Premium Service Card */


.main-services .service-card{


    min-height:390px;


    display:flex;


    flex-direction:column;


}



.main-services .service-card h3{


    font-size:26px;


}



.main-services .service-card p{


    flex-grow:1;


}





.main-services .service-card a{


    margin-top:auto;


}





.main-services .service-icon{


    position:relative;


    overflow:hidden;


}



.main-services .service-icon::after{


    content:"";


    position:absolute;


    width:100%;


    height:100%;


    background:


    radial-gradient(

    circle,

    rgba(231,199,95,.25),

    transparent 65%

    );


    opacity:0;


    transition:.4s;


}



.main-services .service-card:hover .service-icon::after{


    opacity:1;


}






/* =====================================================
        PUBLICATION PROCESS SECTION
===================================================== */


.publication-process{


    background:


    linear-gradient(

    180deg,

    #050505,

    #0c0c0c

    );


}



.publication-process .timeline{


    margin-top:60px;


}



.publication-process .step{


    padding:20px;


}



.publication-process .circle{


    box-shadow:


    0 10px 30px rgba(201,162,39,.25);


}



.publication-process .step h4{


    color:white;


}



.publication-process .step p{


    color:#aaa;


}



.publication-process .line{


    background:


    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


}





/* =====================================================
        SERVICE PAGE RESPONSIVE
===================================================== */


@media(max-width:1100px){


    .page-hero-content h1{


        font-size:55px;


    }


    .main-services .services-grid{


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


    }


}



@media(max-width:768px){


    .page-hero{


        min-height:60vh;


    }


    .page-hero-content h1{


        font-size:40px;


    }


    .page-hero-content p{


        font-size:15px;


    }


}



@media(max-width:600px){


    .main-services .services-grid{


        grid-template-columns:1fr;


    }


}
/* =====================================================
   SERVICES PAGE CSS PART B
   WHY SERVICES / RESEARCH / CTA / FOOTER
===================================================== */


/* =====================================================
        WHY SERVICES SECTION
===================================================== */


.why-services{


    background:


    linear-gradient(

    180deg,

    #080808,

    #050505

    );


    position:relative;


}



.why-services::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    right:-150px;


    top:100px;


    background:


    rgba(201,162,39,.08);


    border-radius:50%;


    filter:blur(120px);


}



.why-services .why-grid{


    position:relative;


    z-index:2;


}





.why-services .why-item{


    background:


    rgba(255,255,255,.035);


    backdrop-filter:blur(10px);


    border:


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


}



.why-services .why-item:hover{


    border-color:


    rgba(201,162,39,.6);


    box-shadow:


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


}



.why-services .number{


    background:


    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    box-shadow:


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


}



/* =====================================================
        RESEARCH FIELDS SECTION
===================================================== */


.research-fields{


    background:#090909;


    position:relative;


}



.research-fields::after{


    content:"";


    position:absolute;


    width:300px;


    height:300px;


    background:


    rgba(201,162,39,.07);


    border-radius:50%;


    left:-150px;


    bottom:50px;


    filter:blur(100px);


}




.research-fields .fields-grid{


    position:relative;


    z-index:2;


}





.research-fields .field-card{


    min-height:260px;


    display:flex;


    flex-direction:column;


    justify-content:center;


}



.research-fields .field-card:hover{


    transform:translateY(-10px);


    background:


    rgba(201,162,39,.05);


}



.research-fields .field-card i{


    width:70px;


    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    rgba(201,162,39,.1);


    border:


    1px solid rgba(201,162,39,.3);


}



.research-fields .field-card h3{


    font-size:23px;


    margin-top:25px;


}



/* =====================================================
        FINAL CONSULTATION CTA
===================================================== */


.consultation{


    position:relative;


    overflow:hidden;


}



.consultation::before{


    content:"";


    position:absolute;


    width:450px;


    height:450px;


    background:


    rgba(201,162,39,.1);


    border-radius:50%;


    filter:blur(130px);


    top:-150px;


    right:-150px;


}



.consultation-box{


    position:relative;


    z-index:2;


    overflow:hidden;


}



.consultation-box::before{


    content:"";


    position:absolute;


    width:120px;


    height:2px;


    background:


    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


    top:0;


    left:50%;


    transform:translateX(-50%);


}



.consultation-box h2{


    background:


    linear-gradient(

    135deg,

    white,

    var(--gold-light)

    );


    background-clip:text;


    -webkit-text-fill-color:transparent;


}



.consult-buttons .btn-primary{


    box-shadow:


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


}



.consult-buttons .btn-secondary:hover{


    background:var(--gold-light);


    color:#111;


}



/* =====================================================
        SERVICES PAGE FOOTER IMPROVEMENTS
===================================================== */


.footer{


    position:relative;


}



.footer-logo img{


    height:100px;


    width:auto;


    object-fit:contain;


}



.footer-column h3{


    letter-spacing:.5px;


}



.footer-column ul li a{


    position:relative;


}



.footer-column ul li a::before{


    content:"";


    position:absolute;


    left:-15px;


    top:50%;


    width:0;


    height:1px;


    background:var(--gold);


    transition:.3s;


}



.footer-column ul li a:hover::before{


    width:8px;


}





/* =====================================================
        WHATSAPP BUTTON IMPROVEMENT
===================================================== */


.whatsapp-btn{


    box-shadow:


    0 10px 30px rgba(37,211,102,.35);


}



.whatsapp-btn:hover{


    transform:scale(1.1);


}





/* =====================================================
        FINAL RESPONSIVE FIXES
===================================================== */


@media(max-width:900px){


    .why-services .why-grid{


        grid-template-columns:1fr;


    }


    .research-fields .fields-grid{


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


    }


}



@media(max-width:600px){


    .research-fields .fields-grid{


        grid-template-columns:1fr;


    }



    .consultation-box h2{


        font-size:30px;


    }



    .consultation-box p{


        font-size:15px;


    }



}
/* =====================================================
   JOURNALS PAGE CSS PART A
   HERO / SERVICES / CATEGORIES
===================================================== */


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


.journal-hero{


    background:


    radial-gradient(

    circle at 80% 20%,

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

    transparent 35%

    ),


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}



.journal-hero .page-hero-content{


    max-width:1000px;


}



.journal-hero h1{


    font-size:72px;


}



.journal-hero p{


    max-width:780px;


}





/* =====================================================
        JOURNAL INTRO
===================================================== */


.journal-intro{


    background:#080808;


    padding-bottom:50px;


}




.journal-intro .section-heading h2{


    max-width:850px;


    margin-left:auto;


    margin-right:auto;


}





/* =====================================================
        JOURNAL SERVICES
===================================================== */


.journal-services{


    background:


    linear-gradient(

    180deg,

    #080808,

    #050505

    );


}





.journal-grid{


    display:grid;


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


    gap:30px;


}





.journal-card{


    padding:40px 35px;


    min-height:330px;


    border-radius:25px;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.45s;


    position:relative;


    overflow:hidden;


}





.journal-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:3px;


    background:


    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


    transform:scaleX(0);


    transition:.4s;


}





.journal-card:hover::before{


    transform:scaleX(1);


}





.journal-card:hover{


    transform:translateY(-12px);


    border-color:


    rgba(201,162,39,.5);


    box-shadow:


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


}





.journal-icon{


    width:75px;


    height:75px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    border:


    1px solid rgba(201,162,39,.35);


    margin-bottom:30px;


}





.journal-icon i{


    color:var(--gold-light);


    font-size:30px;


}





.journal-card h3{


    font-size:24px;


    margin-bottom:18px;


}





.journal-card p{


    color:#bcbcbc;


    font-size:15px;


    line-height:1.9;


}





/* =====================================================
        JOURNAL CATEGORIES
===================================================== */


.journal-categories{


    background:#0b0b0b;


    position:relative;


    overflow:hidden;


}





.journal-categories::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    background:


    rgba(201,162,39,.08);


    border-radius:50%;


    filter:blur(120px);


    left:-150px;


    top:100px;


}





.category-grid{


    display:grid;


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


    gap:25px;


    position:relative;


    z-index:2;


}





.category-box{


    padding:35px 25px;


    text-align:center;


    border-radius:22px;


    background:


    rgba(255,255,255,.03);


    border:


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


    transition:.4s;


}





.category-box:hover{


    transform:translateY(-10px);


    border-color:


    var(--gold);


    background:


    rgba(201,162,39,.05);


}





.category-box i{


    width:70px;


    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:0 auto 25px;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    color:var(--gold-light);


    font-size:30px;


}





.category-box h3{


    font-size:21px;


    margin-bottom:15px;


}





.category-box p{


    color:#aaa;


    font-size:14px;


    line-height:1.8;


}





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


@media(max-width:1100px){


    .journal-grid{


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


    }



    .category-grid{


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


    }



    .journal-hero h1{


        font-size:55px;


    }


}





@media(max-width:600px){


    .journal-grid{


        grid-template-columns:1fr;


    }



    .category-grid{


        grid-template-columns:1fr;


    }



    .journal-hero h1{


        font-size:38px;


    }



}
/* =====================================================
   JOURNALS PAGE CSS PART B
   PROCESS / BENEFITS / CTA / FINAL POLISH
===================================================== */


/* =====================================================
        JOURNAL PROCESS SECTION
===================================================== */


.journal-process{


    background:


    linear-gradient(

    180deg,

    #050505,

    #0b0b0b

    );


    position:relative;


}



.journal-process::after{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    right:-200px;


    top:150px;


    background:


    rgba(201,162,39,.08);


    border-radius:50%;


    filter:blur(120px);


}





.journal-process .timeline{


    position:relative;


    z-index:2;


    margin-top:60px;


}





.journal-process .step{


    background:


    rgba(255,255,255,.02);


    padding:30px 20px;


    border-radius:20px;


}





.journal-process .circle{


    box-shadow:


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


}





.journal-process .step h4{


    font-size:21px;


    margin-bottom:15px;


}



.journal-process .step p{


    color:#aaa;


    line-height:1.8;


}





.journal-process .line{


    background:


    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


}






/* =====================================================
        JOURNAL BENEFITS
===================================================== */


.journal-benefits{


    background:#080808;


}





.benefit-grid{


    display:grid;


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


    gap:30px;


}





.benefit-card{


    padding:45px 30px;


    text-align:center;


    border-radius:25px;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.4s;


}





.benefit-card:hover{


    transform:translateY(-10px);


    border-color:


    rgba(201,162,39,.5);


    box-shadow:


    0 20px 45px rgba(0,0,0,.4);


}





.benefit-card i{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:0 auto 25px;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    border:


    1px solid rgba(201,162,39,.35);


    color:


    var(--gold-light);


    font-size:32px;


}





.benefit-card h3{


    font-size:24px;


    margin-bottom:15px;


}





.benefit-card p{


    color:#b5b5b5;


    line-height:1.8;


    font-size:15px;


}







/* =====================================================
        JOURNAL CTA SECTION
===================================================== */


.journal-benefits + .consultation{


    background:


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}





.journal-benefits + .consultation .consultation-box{


    background:


    rgba(255,255,255,.035);


    backdrop-filter:blur(15px);


}





.journal-benefits + .consultation h2{


    max-width:900px;


    margin-left:auto;


    margin-right:auto;


}





.journal-benefits + .consultation p{


    max-width:750px;


}





/* =====================================================
        FOOTER FINAL POLISH
===================================================== */


.footer{


    overflow:hidden;


}





.footer::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    background:


    rgba(201,162,39,.06);


    border-radius:50%;


    right:-150px;


    bottom:-150px;


    filter:blur(100px);


}





.footer-grid{


    position:relative;


    z-index:2;


}





.footer-bottom{


    position:relative;


    z-index:2;


}





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


@media(max-width:1000px){


    .benefit-grid{


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


    }


}





@media(max-width:850px){


    .journal-process .timeline{


        flex-direction:column;


    }



    .journal-process .line{


        width:2px;


        height:55px;


    }


}





@media(max-width:600px){


    .benefit-grid{


        grid-template-columns:1fr;


    }



    .journal-process .step{


        width:100%;


    }



    .benefit-card{


        padding:35px 25px;


    }



}
/* =====================================================
   TEAM PAGE CSS PART A
   HERO / INTRO / LEADERSHIP
===================================================== */


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


.team-hero{


    background:


    radial-gradient(

    circle at 80% 20%,

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

    transparent 35%

    ),


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}



.team-hero .page-hero-content{


    max-width:950px;


}



.team-hero h1{


    font-size:70px;


    line-height:1.15;


}





/* =====================================================
        TEAM INTRO
===================================================== */


.team-intro{


    background:#080808;


}



.team-intro .section-heading{


    max-width:850px;


}





.team-intro-box{


    margin-top:60px;


    display:grid;


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


    gap:30px;


}





.intro-item{


    padding:40px 30px;


    text-align:center;


    background:


    rgba(255,255,255,.035);


    border:


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


    border-radius:25px;


    transition:.4s;


}





.intro-item:hover{


    transform:translateY(-10px);


    border-color:


    rgba(201,162,39,.5);


}





.intro-item i{


    width:75px;


    height:75px;


    display:flex;


    justify-content:center;


    align-items:center;


    margin:0 auto 25px;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    border:


    1px solid rgba(201,162,39,.3);


    color:var(--gold-light);


    font-size:32px;


}





.intro-item h3{


    font-size:23px;


    margin-bottom:15px;


}





.intro-item p{


    color:#b5b5b5;


    font-size:15px;


    line-height:1.8;


}






/* =====================================================
        LEADERSHIP SECTION
===================================================== */


.leadership-team{


    background:


    linear-gradient(

    180deg,

    #050505,

    #0b0b0b

    );


}





.leader-grid{


    display:grid;


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


    gap:35px;


}







/* =====================================================
        TEAM CARD
===================================================== */


.team-card{


    background:


    rgba(255,255,255,.035);


    border:


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


    border-radius:30px;


    overflow:hidden;


    transition:.45s;


    position:relative;


}





.team-card:hover{


    transform:translateY(-12px);


    border-color:


    rgba(201,162,39,.55);


    box-shadow:


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


}





/* =====================================================
        TEAM IMAGE
===================================================== */


.team-image{


    height:350px;


    overflow:hidden;


}





.team-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.6s;


}





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


    transform:scale(1.08);


}






/* =====================================================
        TEAM CONTENT
===================================================== */


.team-content{


    padding:35px;


}





.team-content h3{


    font-size:28px;


    margin-bottom:8px;


}





.team-content span{


    color:var(--gold-light);


    font-size:15px;


    letter-spacing:.5px;


}





.team-content p{


    margin-top:18px;


    color:#bdbdbd;


    line-height:1.8;


    font-size:15px;


}






/* =====================================================
        TEAM SOCIAL ICONS
===================================================== */


.team-social{


    display:flex;


    gap:12px;


    margin-top:25px;


}





.team-social a{


    width:42px;


    height:42px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    border:


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


    color:white;


    transition:.3s;


}





.team-social a:hover{


    background:var(--gold);


    color:#111;


    border-color:var(--gold);


}






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


.team-message{


    background:#080808;


}





.message-box{


    padding:80px;


    border-radius:35px;


    background:


    linear-gradient(

    135deg,

    #111,

    #070707

    );


    border:


    1px solid rgba(201,162,39,.25);


    position:relative;


    overflow:hidden;


}





.message-box::before{


    content:"";


    position:absolute;


    width:250px;


    height:250px;


    background:


    rgba(201,162,39,.12);


    border-radius:50%;


    right:-100px;


    top:-100px;


    filter:blur(90px);


}





.message-content{


    position:relative;


    z-index:2;


}





.message-content span{


    color:var(--gold-light);


    letter-spacing:4px;


    font-size:13px;


}





.message-content h2{


    font-size:45px;


    line-height:1.3;


    margin:20px 0;


}





.message-content p{


    color:#bcbcbc;


    font-size:17px;


    line-height:1.9;


    max-width:800px;


}





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


@media(max-width:1000px){


    .team-intro-box{


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


    }


    .leader-grid{


        grid-template-columns:1fr;


    }


}






@media(max-width:600px){


    .team-hero h1{


        font-size:40px;


    }



    .team-intro-box{


        grid-template-columns:1fr;


    }



    .team-image{


        height:300px;


    }



    .message-box{


        padding:40px 25px;


    }



    .message-content h2{


        font-size:30px;


    }


}
/* =====================================================
   TEAM PAGE CSS PART B
   TEAM GRID / VALUES / CTA / FOOTER
===================================================== */


/* =====================================================
        CONSULTING TEAM GRID
===================================================== */


.consulting-team{


    background:#080808;


    position:relative;


}



.consulting-team::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    left:-150px;


    top:100px;


    background:


    rgba(201,162,39,.08);


    border-radius:50%;


    filter:blur(120px);


}





.team-grid{


    display:grid;


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


    gap:25px;


    position:relative;


    z-index:2;


}





.team-grid .team-card{


    border-radius:25px;


}





.team-grid .team-image{


    height:280px;


}





.team-grid .team-content{


    padding:28px 25px;


}





.team-grid .team-content h3{


    font-size:22px;


}





.team-grid .team-content span{


    font-size:14px;


}





.team-grid .team-content p{


    font-size:14px;


    line-height:1.7;


}





.team-grid .team-social{


    margin-top:20px;


}






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

/* =====================================================
        IMPROVED CORE VALUES SECTION
===================================================== */


.team-values{

    background:
    linear-gradient(
    180deg,
    #050505,
    #0b0b0b
    );

    position:relative;

    overflow:hidden;

}



.team-values::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:

    rgba(201,162,39,.08);

    border-radius:50%;

    filter:blur(120px);

    right:-150px;

    top:100px;

}





.values-grid{

    display:grid;

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

    gap:35px;

    max-width:1100px;

    margin:auto;

}





.value-card{

    min-height:330px;

    padding:45px 35px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;


    border-radius:28px;


    background:

    linear-gradient(

    145deg,

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

    rgba(255,255,255,.02)

    );


    border:

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


    transition:.45s;


    position:relative;

    overflow:hidden;

}





.value-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;


    background:

    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


    transform:scaleX(0);

    transition:.4s;

}



.value-card:hover::before{

    transform:scaleX(1);

}





.value-card:hover{

    transform:translateY(-12px);

    border-color:

    rgba(201,162,39,.45);


    box-shadow:

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

}





.value-card i{

    width:85px;

    height:85px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    rgba(201,162,39,.12);


    border:

    1px solid rgba(201,162,39,.35);


    color:var(--gold-light);


    font-size:34px;


    margin-bottom:30px;


}





.value-card h3{

    font-size:24px;

    margin-bottom:18px;

}





.value-card p{

    max-width:280px;

    color:#b8b8b8;

    font-size:15px;

    line-height:1.9;

}





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


@media(max-width:1000px){


    .values-grid{

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

        max-width:750px;

    }


}



@media(max-width:600px){


    .values-grid{

        grid-template-columns:1fr;

    }


    .value-card{

        min-height:auto;

        padding:40px 25px;

    }


}




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


.team-values + .consultation{


    background:


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}





.team-values + .consultation .consultation-box{


    background:


    rgba(255,255,255,.035);


    border-color:


    rgba(201,162,39,.35);


}





.team-values + .consultation h2{


    max-width:850px;


    margin-left:auto;


    margin-right:auto;


}





.team-values + .consultation p{


    max-width:750px;


}






/* =====================================================
        FOOTER TEAM PAGE POLISH
===================================================== */


.footer-logo img{


    height:55px;


    width:auto;


    object-fit:contain;


}





.footer-column ul li{


    transition:.3s;


}





.footer-column ul li:hover{


    transform:translateX(5px);


}





.contact-item p{


    margin:0;


}






/* =====================================================
        WHATSAPP BUTTON FINAL STYLE
===================================================== */


.whatsapp-btn{


    transition:.3s;


}



.whatsapp-btn:hover{


    transform:scale(1.12);


}






/* =====================================================
        TEAM RESPONSIVE DESIGN
===================================================== */


@media(max-width:1200px){


    .team-grid{


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


    }



    .values-grid{


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


    }


}






@media(max-width:900px){


    .team-grid{


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


    }



}






@media(max-width:600px){


    .team-grid{


        grid-template-columns:1fr;


    }



    .values-grid{


        grid-template-columns:1fr;


    }



    .team-grid .team-image{


        height:320px;


    }


}






@media(max-width:1000px){

    .team-values .values-grid{

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

    }

}



@media(max-width:600px){

    .team-values .values-grid{

        grid-template-columns:1fr !important;

    }

}
/* =====================================================
   ABOUT PAGE CSS PART A
   HERO / INTRO / MISSION / WHY CHOOSE
===================================================== */


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


.about-hero{


    background:


    radial-gradient(

    circle at 80% 20%,

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

    transparent 35%

    ),


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}





.about-hero .page-hero-content{


    max-width:1000px;


}





.about-hero h1{


    font-size:70px;


    line-height:1.15;


}





.about-hero p{


    max-width:800px;


}






/* =====================================================
        ABOUT INTRO SECTION
===================================================== */


.about-intro{


    background:#080808;


}





.about-grid{


    display:grid;


    grid-template-columns:1.2fr .8fr;


    gap:60px;


    align-items:center;


}







.about-content span{


    color:var(--gold-light);


    letter-spacing:4px;


    font-size:13px;


}





.about-content h2{


    font-size:48px;


    line-height:1.25;


    margin:20px 0 30px;


}





.about-content p{


    color:#bdbdbd;


    font-size:17px;


    line-height:1.9;


    margin-bottom:20px;


}






.about-highlight{


    display:grid;


    gap:25px;


}







.about-box{


    padding:35px;


    border-radius:25px;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.4s;


}





.about-box:hover{


    transform:translateY(-8px);


    border-color:


    rgba(201,162,39,.5);


}





.about-box i{


    width:70px;


    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    color:var(--gold-light);


    border:


    1px solid rgba(201,162,39,.3);


    font-size:30px;


    margin-bottom:20px;


}





.about-box h3{


    font-size:24px;


    margin-bottom:12px;


}





.about-box p{


    color:#b5b5b5;


    line-height:1.8;


    font-size:15px;


}








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


.mission-section{


    background:


    linear-gradient(

    180deg,

    #050505,

    #0b0b0b

    );


}






.mission-grid{


    display:grid;


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


    gap:35px;


}





.mission-card{


    padding:50px 40px;


    border-radius:30px;


    text-align:center;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.45s;


}





.mission-card:hover{


    transform:translateY(-12px);


    border-color:


    rgba(201,162,39,.45);


    box-shadow:


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


}





.mission-icon{


    width:85px;


    height:85px;


    margin:0 auto 30px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    border:


    1px solid rgba(201,162,39,.35);


}





.mission-icon i{


    font-size:35px;


    color:var(--gold-light);


}





.mission-card h3{


    font-size:28px;


    margin-bottom:18px;


}





.mission-card p{


    color:#b8b8b8;


    line-height:1.9;


    font-size:16px;


}







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


.about-why{


    background:#080808;


}





.why-about-grid{


    display:grid;


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


    gap:30px;


}





.about-feature{


    display:flex;


    gap:25px;


    padding:35px;


    border-radius:22px;


    background:


    rgba(255,255,255,.03);


    border:


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


    transition:.4s;


}





.about-feature:hover{


    transform:translateY(-8px);


    border-color:


    rgba(201,162,39,.5);


}






.feature-number{


    min-width:65px;


    height:65px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    color:#111;


    font-size:20px;


    font-weight:700;


}





.about-feature h3{


    font-size:23px;


    margin-bottom:12px;


}





.about-feature p{


    color:#b5b5b5;


    line-height:1.8;


    font-size:15px;


}








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


@media(max-width:1000px){


    .about-grid{


        grid-template-columns:1fr;


    }



    .mission-grid{


        grid-template-columns:1fr;


    }



}





@media(max-width:700px){


    .about-hero h1{


        font-size:40px;


    }



    .about-content h2{


        font-size:34px;


    }



    .why-about-grid{


        grid-template-columns:1fr;


    }



    .about-feature{


        flex-direction:column;


        text-align:center;


        align-items:center;


    }


}
/* =====================================================
   ABOUT PAGE CSS PART B
   APPROACH / ACHIEVEMENTS / CTA / FOOTER
===================================================== */


/* =====================================================
        PUBLICATION APPROACH
===================================================== */


.publication-approach{


    background:


    linear-gradient(

    180deg,

    #050505,

    #0b0b0b

    );


    position:relative;


    overflow:hidden;


}





.publication-approach::before{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    background:


    rgba(201,162,39,.08);


    border-radius:50%;


    filter:blur(120px);


    left:-150px;


    top:120px;


}





.approach-grid{


    display:grid;


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


    gap:25px;


    position:relative;


    z-index:2;


}





.approach-card{


    padding:40px 25px;


    text-align:center;


    border-radius:25px;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.4s;


    position:relative;


}





.approach-card:hover{


    transform:translateY(-10px);


    border-color:


    rgba(201,162,39,.5);


}





.approach-number{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:0 auto 25px;


    border-radius:50%;


    background:


    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    color:#111;


    font-size:25px;


    font-weight:700;


}





.approach-card h3{


    font-size:23px;


    margin-bottom:15px;


}





.approach-card p{


    color:#b5b5b5;


    font-size:15px;


    line-height:1.8;


}








/* =====================================================
        ABOUT ACHIEVEMENTS
===================================================== */


.about-achievements{


    background:#080808;


}





.about-achievements .achievement-grid{


    display:grid;


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


    gap:25px;


}





.about-achievements .achievement-card{


    padding:45px 25px;


    text-align:center;


    border-radius:25px;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.4s;


}





.about-achievements .achievement-card:hover{


    transform:translateY(-10px);


    border-color:


    rgba(201,162,39,.5);


}





.about-achievements h2{


    font-size:55px;


    background:


    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    background-clip:text;


    -webkit-text-fill-color:transparent;


}





.about-achievements p{


    margin-top:15px;


    color:#b5b5b5;


    font-size:15px;


}








/* =====================================================
        ABOUT CTA SECTION
===================================================== */


.about-achievements + .consultation{


    background:


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}





.about-achievements + .consultation .consultation-box{


    background:


    rgba(255,255,255,.035);


    border:


    1px solid rgba(201,162,39,.35);


    backdrop-filter:blur(15px);


}





.about-achievements + .consultation h2{


    max-width:900px;


    margin-left:auto;


    margin-right:auto;


}





.about-achievements + .consultation p{


    max-width:750px;


}








/* =====================================================
        FOOTER FINAL POLISH
===================================================== */


.about-achievements ~ .footer{


    position:relative;


    overflow:hidden;


}





.about-achievements ~ .footer::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    right:-150px;


    bottom:-150px;


    background:


    rgba(201,162,39,.06);


    border-radius:50%;


    filter:blur(100px);


}





.footer-grid{


    position:relative;


    z-index:2;


}








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


@media(max-width:1100px){


    .approach-grid{


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


    }



    .about-achievements .achievement-grid{


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


    }


}





@media(max-width:600px){


    .approach-grid{


        grid-template-columns:1fr;


    }



    .about-achievements .achievement-grid{


        grid-template-columns:1fr;


    }



    .about-achievements h2{


        font-size:45px;


    }



}
/* =====================================================
   CONTACT PAGE CSS PART A
   HERO / INTRO / CONTACT LAYOUT / FORM
===================================================== */


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


.contact-hero{


    background:


    radial-gradient(

    circle at 80% 20%,

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

    transparent 35%

    ),


    linear-gradient(

    135deg,

    #050505,

    #111

    );


}






.contact-hero .page-hero-content{


    max-width:950px;


}






.contact-hero h1{


    font-size:70px;


    line-height:1.15;


}







.contact-hero p{


    max-width:750px;


}







/* =====================================================
        CONTACT INTRO SECTION
===================================================== */


.contact-intro{


    background:#080808;


}







.contact-intro-box{


    display:grid;


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


    gap:30px;


}








.contact-highlight{


    padding:40px 30px;


    text-align:center;


    border-radius:25px;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.4s;


}







.contact-highlight:hover{


    transform:translateY(-10px);


    border-color:


    rgba(201,162,39,.5);


}







.contact-highlight i{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:0 auto 25px;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    border:


    1px solid rgba(201,162,39,.35);


    color:var(--gold-light);


    font-size:32px;


}






.contact-highlight h3{


    font-size:23px;


    margin-bottom:15px;


}







.contact-highlight p{


    color:#b5b5b5;


    line-height:1.8;


    font-size:15px;


}









/* =====================================================
        CONTACT MAIN SECTION
===================================================== */


.contact-main{


    background:


    linear-gradient(

    180deg,

    #050505,

    #0b0b0b

    );


}








.contact-grid{


    display:grid;


    grid-template-columns:.9fr 1.1fr;


    gap:60px;


    align-items:start;


}









/* =====================================================
        CONTACT INFORMATION
===================================================== */





.contact-info > span{


    color:var(--gold-light);


    letter-spacing:4px;


    font-size:13px;


}







.contact-info h2{


    font-size:45px;


    line-height:1.25;


    margin:20px 0;


}







.contact-info > p{


    color:#b8b8b8;


    line-height:1.9;


    font-size:16px;


    margin-bottom:35px;


}









.info-box{


    display:flex;


    gap:20px;


    align-items:center;


    padding:25px;


    margin-bottom:20px;


    border-radius:20px;


    background:


    rgba(255,255,255,.035);


    border:


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


    transition:.4s;


}







.info-box:hover{


    border-color:


    rgba(201,162,39,.5);


    transform:translateX(8px);


}







.info-icon{


    width:60px;


    height:60px;


    flex-shrink:0;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    rgba(201,162,39,.12);


    color:var(--gold-light);


    font-size:25px;


}







.info-box h3{


    font-size:20px;


    margin-bottom:5px;


}







.info-box p{


    color:#b5b5b5;


    font-size:15px;


}








/* =====================================================
        CONTACT FORM BOX
===================================================== */





.contact-form-box{


    padding:50px;


    border-radius:30px;


    background:


    rgba(255,255,255,.035);


    border:


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


    backdrop-filter:blur(15px);


}







.contact-form-box h2{


    font-size:38px;


    margin-bottom:15px;


}







.contact-form-box > p{


    color:#b5b5b5;


    margin-bottom:35px;


}







.form-group{


    margin-bottom:20px;


}







.form-group input,
.form-group textarea{


    width:100%;


    padding:17px 20px;


    background:


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


    border:


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


    border-radius:15px;


    color:white;


    font-family:inherit;


    font-size:15px;


    outline:none;


    transition:.3s;


}







.form-group textarea{


    resize:none;


}







.form-group input::placeholder,
.form-group textarea::placeholder{


    color:#888;


}







.form-group input:focus,
.form-group textarea:focus{


    border-color:var(--gold);


    background:


    rgba(201,162,39,.05);


}







.contact-form-box .btn-primary{


    border:none;


    cursor:pointer;


    font-family:inherit;


    font-size:16px;


}
/* =====================================================
   CONTACT PAGE CSS PART B
   SOCIAL / FOOTER / WHATSAPP / RESPONSIVE
===================================================== */


/* =====================================================
        CONTACT SOCIAL
===================================================== */


.contact-social{


    margin-top:40px;


}





.contact-social h3{


    font-size:22px;


    margin-bottom:20px;


}






.contact-social .social-links{


    display:flex;


    gap:15px;


}





.contact-social .social-links a{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    border:


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


    color:white;


    transition:.35s;


}







.contact-social .social-links a:hover{


    background:var(--gold);


    color:#111;


    transform:translateY(-5px);


}








/* =====================================================
        CONTACT FOOTER IMPROVEMENT
===================================================== */





.contact-main + .footer{


    border-top:


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


}







.footer-column .contact-item{


    display:flex;


    align-items:flex-start;


    gap:15px;


}







.footer-column .contact-item i{


    color:var(--gold-light);


    margin-top:5px;


}








.footer-btn{


    transition:.35s;


}







.footer-btn:hover{


    transform:translateY(-5px);


    box-shadow:


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


}








/* =====================================================
        WHATSAPP BUTTON ENHANCEMENT
===================================================== */





.whatsapp-btn{


    width:65px;


    height:65px;


    position:fixed;


    right:25px;


    bottom:25px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#25D366;


    color:white;


    border-radius:50%;


    font-size:34px;


    z-index:9999;


    animation:whatsappPulse 2s infinite;


}







.whatsapp-btn:hover{


    transform:scale(1.1);


}







@keyframes whatsappPulse{


    0%{


        box-shadow:

        0 0 0 0 rgba(37,211,102,.5);


    }


    70%{


        box-shadow:

        0 0 0 20px rgba(37,211,102,0);


    }


    100%{


        box-shadow:

        0 0 0 0 rgba(37,211,102,0);


    }


}








/* =====================================================
        CONTACT RESPONSIVE DESIGN
===================================================== */





@media(max-width:1100px){



.contact-grid{


    grid-template-columns:1fr;


    gap:45px;


}



.contact-form-box{


    max-width:850px;


    margin:auto;


}



}








@media(max-width:900px){



.contact-intro-box{


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


}



}








@media(max-width:700px){



.contact-hero h1{


    font-size:40px;


}





.contact-info h2{


    font-size:34px;


}





.contact-intro-box{


    grid-template-columns:1fr;


}





.contact-form-box{


    padding:35px 25px;


}





.contact-form-box h2{


    font-size:30px;


}





.info-box{


    padding:20px;


}





.whatsapp-btn{


    width:58px;


    height:58px;


    font-size:28px;


    right:18px;


    bottom:18px;


}





}





@media(max-width:480px){



.contact-hero p{


    font-size:15px;


}





.contact-info > p{


    font-size:15px;


}





.form-group input,
.form-group textarea{


    padding:15px;


}



}