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


:root {

    --primary: #2563eb;
    --primary-light: #60a5fa;
    --dark: #050816;
    --dark-soft: #0b1224;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: rgba(255,255,255,0.08);
    --card: rgba(255,255,255,0.04);

}


* {

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

}


html {

    scroll-behavior:smooth;

}


body {

    font-family: "Nunito", sans-serif;
    background:var(--dark);
    color:white;
    overflow-x:hidden;

}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Petrona", serif;
}

span{
        font-family: "Petrona", serif;
}


a {

    text-decoration:none;
    color:inherit;

}


.container {

    width:min(1180px,90%);
    margin:auto;

}



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


.btn-primary {

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    padding:14px 28px;
    border-radius:100px;

    font-size:15px;
    font-weight:500;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:.3s;

}


.btn-primary:hover {

    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(37,99,235,.35);

}



.btn-secondary {

    background: #fff;
    color: #000000;

    padding:14px 28px;
    border-radius:100px;

    font-size:15px;
    font-weight:500;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:.3s;


}


.btn-secondary:hover {

    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(255, 255, 255, 0.35);

}



/* =========================
   HEADER
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Nunito", sans-serif;
}


body{
    background:#050505;
    min-height:200vh;
}



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


.navbar{

    position:absolute;
    top:30px;
    left:0;
    width:100%;
    z-index:9999;

    transition:.4s ease;
}



.nav-container{

    max-width:1280px;
    margin:auto;

    padding:0 30px;

    display:flex;
    align-items:center;
    justify-content:space-between;

}



/* SCROLL GLASS */


.navbar.scrolled{

    position:fixed;
    top:0;

    padding:15px 0;


    background:rgba(10,10,10,.45);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);


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

}




/* LOGO */


.logo img{

    width:140px;

}



.mobile-logo{

    display:none;

}


.mobile-logo img{

    width:34px;

}




/* MENU */


.nav-links{

    display:flex;
    align-items:center;
    gap:40px;

}



.nav-links a{

    color:white;
    text-decoration:none;

    font-size:15px;
    font-weight:500;

    transition:.3s;

}


.nav-links a:hover{

    color:#3b82f6;

}




/* DESKTOP BUTTON */


.desktop-btn{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    padding:14px 28px;
    border-radius:100px;

    font-size:15px;
    font-weight:500;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:.3s;

}



.desktop-btn:hover{

    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(37,99,235,.35);

}




/* MOBILE ICON */


.menu-toggle{

    display:none;

    width:45px;
    height:45px;

    border-radius:50%;

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

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

    color:white;

    font-size:22px;

    cursor:pointer;

}





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


.mobile-menu{


    position:fixed;

    inset:0;

    background:rgba(5,5,5,.88);


    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);


    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


    gap:35px;


    opacity:0;

    pointer-events:none;


    transform:translateY(-30px);


    transition:.4s ease;


    z-index:99999;


}




.mobile-menu.active{


    opacity:1;

    pointer-events:auto;

    transform:translateY(0);


}




.mobile-menu a{


    color:white;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

}




.close-menu{


    position:absolute;

    top:25px;

    right:25px;


    width:45px;

    height:45px;


    border-radius:50%;


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


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


    color:white;


    font-size:30px;


    cursor:pointer;


}




.mobile-project-btn{


        background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#ffffff!important;


    padding:14px 32px;


    border-radius:50px;


    font-size:16px!important;

}





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


@media(max-width:768px){



.nav-container{

    padding:0 20px;

}



.logo{

    display:none;

}



.mobile-logo{

    display:block;

}



.nav-links{

    display:none;

}



/* hide desktop button */

.desktop-btn{

    display:none;

}



.menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}



}




/* =========================
HERO CENTER ALIGN
========================= */

.hero-grid {

display:flex;
justify-content:center;
align-items:center;
text-align:center;

}

.hero{

    min-height:100vh;
    background:url("Images/Background.png") right center / cover no-repeat;
    display:flex;
    align-items:center;

}

.hero-content {
    
    max-width: 900px;
    margin: 100px auto 0;

}


.badge{

display:inline-flex;
align-items:center;
justify-content:center;

padding:10px 18px;

border-radius:999px;

border: 1px solid rgba(252, 252, 252, .3);

background:rgba(252, 252, 252, 0);

color:#fff;

font-size:14px;
font-weight:600;
letter-spacing:.2px;

margin:0 auto 28px;


}

.hero h1 {


    
font-size:64px;
line-height:1.05;
font-weight:400;

margin-bottom:30px;

}


.hero h1 span {

display:block;

background: rgb(255, 255, 255);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


.hero p {

max-width:720px;

margin:0 auto 35px;

font-size:18px;

line-height:30px;

color:#94a3b8;

}



/* Buttons */

.hero-buttons {

display:flex;

justify-content:center;

gap:16px;

margin-bottom:70px;

}




/* Remove old visual */

.hero-visual,
.dashboard-card,
.team-grid,
.member,
.avatar {

display:none;

}



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


@media(max-width:1000px){


.hero h1 {

font-size:48px;
font-weight:200;

}


}


@media(max-width:600px){


.hero {

padding:40px 0 80px;

}


.hero h1 {

font-size:38px;
font-weight:200;

}


.hero p {

font-size:16px;

}


.hero-buttons {

flex-direction:column;

}



}



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

.services{
    padding:120px 0;
}

/*=========================
Section Intro
=========================*/

.section-intro{
    max-width:900px;
    margin-bottom:70px;
}

.section-tag{
display:inline-flex;
align-items:center;
justify-content:center;

padding:10px 18px;

border-radius:100px;

background:rgba(37,99,235,.12);

border:1px solid rgba(96,165,250,.25);

color:#3b82f6;

font-size:14px;
font-weight:500;
letter-spacing:.2px;

font-family: "Nunito", sans-serif;

}

.section-title{
    font-size:48px;
    line-height:54px;
    letter-spacing :0px;
    font-weight:200;
    margin-bottom:30px;
}

.section-description{
    max-width:760px;

    font-size:18px;
    line-height:24px;
    
    color:#9AA4B5;
}

/*=========================
Service Cards
=========================*/

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.service-card{
    background:#13151b;
    border:1px solid rgba(255, 255, 255, 0);
    border-radius:22px;
    padding:35px 30px;
    transition:all .35s ease;
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:#3b82f6;
}

.service-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.service-top h3{
    font-size:20px;
    line-height:26px;
    font-weight:500;
}

.service-icon{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);

    flex-shrink:0;
}

.service-icon img{
    width:24px;
    filter: brightness(0) saturate(100%) invert(100%);
}

.service-card p{
    margin:40px 0 24px;
    color:#A3A3A3;
    font-size:16px;
    line-height:22px;
}

.service-image{
    display:block;
    width:100%;
    border-radius:16px;
}

/*=========================================
Responsive
=========================================*/

@media(max-width:1000px){

.services{
    padding:80px 0;
}

.section-intro{
    margin-bottom:50px;
}

.section-title{
    font-size:48px;
    font-weight:400;
}

.section-description{
    font-size:18px;
    line-height:24px;
}

.service-grid{
    grid-template-columns:1fr;
    gap:25px;
}

.service-card{
    padding:22px;
}

.service-top h3{
    font-size:20px;
}

}

@media(max-width:600px){

.services{
    padding:70px 0;
}

.section-intro{
    margin-bottom:40px;
}

.section-tag{
    font-size:14px;
    padding:10px 20px;
    
}

.section-title{
    font-size:32px;
    line-height:38px;
    letter-spacing:0px;
    font-weight:400;
}

.section-description{
    font-size:16px;
    line-height:22px;
}

.service-card{
    padding:20px;
}

.service-top{
    gap:15px;
}

.service-top h3{
    font-size:20px;
    line-height:26px;
}

.service-icon{
    width:50px;
    height:50px;
}

.service-icon img{
    width:22px;
}

.service-card p{
    margin:40px 0 20px;
    font-size:16px;
    line-height:22px;
}

.service-image{
    border-radius:14px;
}

}



/*=========================================
PHILOSOPHY
=========================================*/

.philosophy{
    padding: 120px 0px;
}

.philosophy-grid{

    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:80px;
    align-items:center;

}

.philosophy-image img{

    width:100%;
    display:block;
    border-radius:22px;

}

.philosophy-content{

    max-width:520px;

}

.philosophy .section-tag{

    margin-bottom:25px;

}

.philosophy .section-title{

    margin-bottom:30px;
    font-weight:400;

}

.philosophy .section-description{

    margin-bottom:35px;

}

.philosophy .butn{

    display:inline-flex;

}

/*=========================
Responsive
=========================*/

@media(max-width:1000px){

.philosophy{

    padding:80px 0;

}

.philosophy-grid{

    grid-template-columns:1fr;
    gap:50px;

}

.philosophy-content{

    max-width:100%;

}

}

@media(max-width:600px){

.philosophy{

    padding:70px 0;

}

.philosophy-grid{

    gap:35px;

}

.philosophy-image img{

    border-radius:16px;

}

.philosophy .section-tag{

    margin-bottom:20px;

}

.philosophy .section-title{

    margin-bottom:25px;

}

.philosophy .section-description{

    margin-bottom:30px;

}

.philosophy .butn{

    width:100%;
    justify-content:center;

}

.philosophy-content .btn-secondary {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

}




/*=========================================
MARQUEE
=========================================*/

.marquee{

    padding:40px 0;

    overflow:hidden;

    background: #3b83f622;
}

.marquee-track{

    display:flex;

    width:max-content;

    animation:marquee 28s linear infinite;

}

.marquee-track:hover{

    animation-play-state:paused;

}

.marquee-content{

    display:flex;
    align-items:center;

}

.marquee-content span{

    position:relative;

    display:flex;
    align-items:center;

    padding:0 60px;

    white-space:nowrap;

    font-size:68px;
    line-height:80px;
    font-weight:400;
    letter-spacing:-2px;

    background:linear-gradient(
        90deg,
        #ffffff,
        #1f3557
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.marquee-content span:not(:last-child)::after{

    content:"";

    width:10px;
    height:10px;

    border-radius:50%;

    background:#3b82f6;

    position:absolute;

    right:-5px;

    opacity:.7;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*=========================
Responsive
=========================*/

@media(max-width:1000px){

.marquee{

    padding:60px 0;

}

.marquee-content span{

    font-size:52px;

    padding:0 45px;

}

}

@media(max-width:600px){

.marquee{

    padding:40px 0;

}

.marquee-content span{

    font-size:32px;

    letter-spacing:-1px;

    padding:0 25px;

}

.marquee-content span:not(:last-child)::after{

    width:6px;
    height:6px;

    right:-3px;

}

}



/*=========================================*
  WORK SECTION
*=========================================*/

.work{
    padding:120px 0;
}

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

.section-intro{
    max-width:900px;
    margin-bottom:70px;
}

.section-tag{
    display:inline-flex;
align-items:center;
justify-content:center;

padding:10px 18px;

border-radius:100px;

background:rgba(37,99,235,.12);

border:1px solid rgba(96,165,250,.25);

color:#3b82f6;

font-size:14px;
font-weight:500;
letter-spacing:.2px;

margin:0 auto 28px;
}

.section-title{
    font-size:48px;
    line-height:54px;
    font-weight:400;

    margin-bottom:30px;
}

.section-description{
    max-width:760px;

    font-size:18px;
    line-height:24px;

    color:#9AA4B5;

    margin-bottom:30px;
}

/*=========================================*
  WORK LIST
*=========================================*/

.work-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/*=========================================*
  WORK CARD
*=========================================*/

.work-card{

    background:#13151b;
    border:1px solid rgba(255, 255, 255, 0);

    border-radius:22px;

    padding:22px;

    transition:all .35s ease;
}

.work-card:hover{

    transform:translateY(-5px);

    border-color:#3b82f6;

    box-shadow:0 20px 45px rgba(59,130,246,.12);

}

/*=========================================*
  WORK HEADER
*=========================================*/

.work-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;

}

.work-header h3{

    font-size:20px;

    line-height:26px;

    font-weight:500;

}

/*=========================================*
  WORK TOOLS
*=========================================*/

.work-tools{

    display:flex;

    align-items:center;

    gap:12px;

}

.tool-logo{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    box-sizing:border-box;

}

.tool-logo img{

    width:28px;

    height:28px;

    display:block;

    object-fit:contain;

}



/*=========================================*
  FIGMA
*=========================================*/

.figma-logo{

    background:#08001f;

    border:1px solid #777;

}

/*=========================================*
  WORDPRESS
*=========================================*/

.wordpress-logo{

    background:#fff;

    border:2px solid #aaa;

}

.wordpress-logo img{

    width:28px;

    height:28px;

    display:block;

    object-fit:contain;

}

.work-image{
    height:220px;
    border-radius:16px;
}

.work-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*=========================================*
  TABLET
*=========================================*/

@media (max-width:1000px){

    .work{
        padding:80px 0;
    }

    .section-intro{
        margin-bottom:50px;
    }

    .section-title{
        font-size:48px;
        line-height:54px;
    }

    .section-description{
        font-size:18px;
        line-height:24px;
    }

    .work-list{
        grid-template-columns:1fr;
        gap:25px;
    }

    .work-card{
        padding:30px;
        border-radius:28px;
    }

    .work-header{
        margin-bottom:30px;
    }

    .work-header h3{
        font-size:20px;
        line-height:26px;
    }

    .work-tools{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .tool-logo{
        width:40px;
        height:40px;
    }

    .tool-logo img{
        width:28px;
        height:28px;
        object-fit:contain;
    }

    .figma-logo,
    .wordpress-logo{
        border-radius:50%;
    }

    .tool-arrow{
        width:20px;
        height:40px;
    }

    .tool-arrow img{
        width:20px;
        height:20px;
        object-fit:contain;
    }

    .work-image{
        height:300px;
        border-radius:16px;
    }

    .work-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .work .section-intro .btn-secondary{
        display:block;
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

    .work-card:hover{
        transform:translateY(-4px);
    }

}

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

@media (max-width:600px){

    .work{
        padding:70px 0;
    }

    .section-intro{
        margin-bottom:40px;
    }

    .section-tag{
        font-size:14px;
        padding:10px 20px;
    }

    .section-title{
        font-size:32px;
        line-height:38px;
        letter-spacing:0;
    }

    .section-description{
        font-size:16px;
        line-height:22px;
    }

    .work-list{
        grid-template-columns:1fr;
        gap:20px;
    }

    .work-card{
        padding:20px;
        border-radius:22px;
    }

    .work-header{
        display:flex;
        align-items:center;
        justify-content:space-between;

        gap:15px;

        margin-bottom:25px;
    }

    .work-header h3{
        font-size:20px;
        line-height:26px;
    }

    .work-tools{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .tool-logo{
        width:40px;
        height:40px;
    }

    .tool-logo img{
        width:28px;
        height:28px;
        object-fit:contain;
    }

    .figma-logo,
    .wordpress-logo{
        border-radius:50%;
    }

    .tool-arrow{
        width:20px;
        height:40px;
    }

    .tool-arrow img{
        width:20px;
        height:20px;
        object-fit:contain;
    }

    .work-image{
        height:300px;
        border-radius:16px;
    }

    .work-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .work-card:hover{
        transform:none;
        box-shadow:none;
    }

    .work-card:hover .work-image img{
        transform:none;
    }

}



/*=========================================*
*CLIENTS SECTION*
*=========================================*/

.clients{
    padding:120px 0;
    background: #3b83f622;
}


/*=========================*
*Section Intro*
*=========================*/

.clients .section-intro{
    max-width:900px;
    margin-bottom:70px;
}



.clients .section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border-radius:100px;

    background:rgba(37,99,235,.12);
    border:1px solid rgba(96,165,250,.25);

    color:#3b82f6;

    font-size:14px;
    font-weight:500;
    letter-spacing:.2px;

    margin:0 auto 28px;
}

.clients .section-title{
    font-size:48px;
    line-height:54px;
    letter-spacing:0;
    font-weight:400;

    margin-bottom:30px;
}

.clients .section-description{
    max-width:760px;

    font-size:18px;
    line-height:24px;

    color:#9AA4B5;
}


/*=========================*
*Client Grid*
*=========================*/

.client-grid{
    display:grid;

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

    gap:20px;
}


/*=========================*
*Client Item*
*=========================*/

.client-item{
    min-height:150px;

    display:flex;
    align-items:center;
    justify-content:center;

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

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

    border-radius:22px;

    transition:all .35s ease;
}

.client-item:hover{
    transform:translateY(-6px);

    border-color:#3b82f6;
}


/*=========================*
*Client Logo*
*=========================*/

.client-logo{
    width:100px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.client-logo img{
    display:block;

    width:100%;
    height:auto;

    max-height:55px;

    object-fit:contain;
}


/*=========================*
*Worldwide*
*=========================*/

.worldwide-content{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;
}

.worldwide-icon{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:12px;
}

.worldwide-icon img{
    width:40px;

    filter: brightness(0) saturate(100%) invert(100%);
}

.worldwide-content span{
    font-size:14px;

    line-height:20px;

    color:#A3A3A3;
}


/*=========================================*
*Responsive - Tablet*
*=========================================*/

@media(max-width:1000px){

    .clients{
        padding:80px 0;
    }

    .clients .section-intro{
        margin-bottom:50px;
    }

    .clients .section-title{
        font-size:48px;
        line-height:54px;
    }

    .clients .section-description{
        font-size:18px;
        line-height:24px;
    }

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

        gap:20px;
    }

    .client-item{
        min-height:140px;
    }

}


/*=========================================*
*Responsive - Mobile*
*=========================================*/

@media(max-width:600px){

    .clients{
        padding:70px 0;
    }

    .clients .section-intro{
        margin-bottom:40px;
    }

    .clients .section-tag{
        font-size:14px;

        padding:10px 20px;
    }

    .clients .section-title{
        font-size:32px;
        line-height:38px;

        letter-spacing:0;
    }

    .clients .section-description{
        font-size:16px;
        line-height:22px;
    }

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

        gap:15px;
    }

    .client-item{
        min-height:130px;

        border-radius:18px;
    }

    .client-logo{
        width:85px;
    }

    .client-logo img{
        max-height:45px;
    }

    .worldwide-icon{
        width:34px;
        height:34px;

        margin-bottom:10px;
    }

    .worldwide-icon img{
        width:34px;
    }

    .worldwide-content span{
        font-size:13px;
        line-height:18px;
    }

}




/*=========================================*
*TESTIMONIALS SECTION*
*=========================================*/

.testimonials{
    padding:120px 0;
}


/*=========================*
*Section Intro*
*=========================*/

.testimonials .section-intro{
    max-width:900px;
    margin-bottom:70px;
}

.testimonials .section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border-radius:100px;

    background:rgba(37,99,235,.12);
    border:1px solid rgba(96,165,250,.25);

    color:#3b82f6;

    font-size:14px;
    font-weight:500;
    letter-spacing:.2px;

    margin:0 auto 28px;
}

.testimonials .section-title{
    font-size:48px;
    line-height:54px;

    letter-spacing:0;

    font-weight:400;

    margin-bottom:30px;
}

.testimonials .section-description{
    max-width:760px;

    font-size:18px;
    line-height:24px;

    color:#9AA4B5;
}


/*=========================*
*Slider Wrapper*
*=========================*/

.testimonial-slider-wrap{
    position:relative;

    width:100%;

    padding:8px 0;
}


/*=========================*
*Slider*
*=========================*/

.testimonial-slider{
    width:100%;

    overflow:hidden;

    padding:8px 0;

    margin:-8px 0;
}


/*=========================*
*Track*
*=========================*/

.testimonial-track{
    display:flex;

    gap:30px;

    padding:8px 0;

    margin:-8px 0;

    transition:transform .45s ease;
}


/*=========================*
*Testimonial Card*
*=========================*/

.testimonial-card{
    flex:0 0 calc((100% - 60px) / 3);

    box-sizing:border-box;

    min-height:330px;

    padding:30px;

    display:flex;
    flex-direction:column;

    background:#13151b;
    border:1px solid rgba(255, 255, 255, 0);

    border-radius:22px;

    transition:
        transform .35s ease,
        border-color .35s ease;
}


/*=========================*
*Card Hover*
*=========================*/

.testimonial-card:hover{
    transform:translateY(-4px);

    border-color:#3b82f6;
}


/*=========================*
*Rating*
*=========================*/

.rating{
    font-size:18px;

    line-height:1;

    letter-spacing:3px;

    margin-bottom:28px;

    color:#eae307;
}


/*=========================*
*Testimonial Text*
*=========================*/

.testimonial-card p{
    margin:0;

    flex:1;

    color:#9AA4B5;

    font-size:16px;

    line-height:24px;
}


/*=========================*
*Author*
*=========================*/

.testimonial-author{
    display:flex;

    align-items:center;

    gap:14px;

    margin-top:35px;
}

.testimonial-author img{
    width:48px;
    height:48px;

    flex-shrink:0;

    border-radius:50%;

    object-fit:cover;
}

.testimonial-author div{
    display:flex;

    flex-direction:column;

    gap:4px;
}

.testimonial-author strong{
    font-size:15px;

    line-height:20px;

    font-weight:500;

    color:#fff;
}

.testimonial-author span{
    font-size:13px;

    line-height:18px;

    color:#888;
}


/*=========================*
*Navigation Arrows*
*=========================*/

.testimonial-arrow{
    position:absolute;

    top:50%;

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

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

    background:#212121;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    z-index:10;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        opacity .3s ease;
}


/* Left Arrow */

.testimonial-prev{
    left:-50px;

    transform:translate(-50%,-50%);
}


/* Right Arrow */

.testimonial-next{
    right:-50px;

    transform:translate(50%,-50%);
}


/* Arrow Hover */

.testimonial-prev:hover{
    background:#3b82f6;

    border-color:#3b82f6;

    transform:translate(-50%,-50%) scale(1.05);
}

.testimonial-next:hover{
    background:#3b82f6;

    border-color:#3b82f6;

    transform:translate(50%,-50%) scale(1.05);
}


/* Disabled Arrow */

.testimonial-prev:disabled{
    opacity:.35;

    cursor:not-allowed;

    transform:translate(-50%,-50%);
}

.testimonial-next:disabled{
    opacity:.35;

    cursor:not-allowed;

    transform:translate(50%,-50%);
}


/*=========================================*
*TABLET*
*=========================================*/

@media(max-width:1000px){

    .testimonials{
        padding:80px 0;
    }

    .testimonials .section-intro{
        margin-bottom:50px;
    }

    .testimonials .section-title{
        font-size:48px;

        line-height:54px;
    }

    .testimonials .section-description{
        font-size:18px;

        line-height:24px;
    }


    /* 2 Cards */

    .testimonial-track{
        gap:20px;
    }

    .testimonial-card{
        flex:0 0 calc((100% - 20px) / 2);

        padding:25px;

        min-height:320px;
    }


    /* Arrows */

    .testimonial-arrow{
        width:46px;
        height:46px;

        font-size:20px;
    }

    .testimonial-prev{
        left:-23px;
    }

    .testimonial-next{
        right:-23px;
    }

}


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

@media(max-width:600px){

    .testimonials{
        padding:70px 0;
    }

    .testimonials .section-intro{
        margin-bottom:40px;
    }

    .testimonials .section-tag{
        font-size:14px;

        padding:10px 20px;
    }

    .testimonials .section-title{
        font-size:32px;

        line-height:38px;

        letter-spacing:0;
    }

    .testimonials .section-description{
        font-size:16px;

        line-height:22px;
    }


    /* 1 Card */

    .testimonial-track{
        gap:15px;
    }

    .testimonial-card{
        flex:0 0 100%;

        min-height:310px;

        padding:22px;

        border-radius:18px;
    }


    .rating{
        font-size:16px;

        margin-bottom:24px;
    }

    .testimonial-card p{
        font-size:16px;

        line-height:22px;
    }

    .testimonial-author{
        margin-top:28px;
    }


    /* Mobile Arrows */

    .testimonial-arrow{
        width:42px;
        height:42px;

        font-size:18px;
    }

    .testimonial-prev{
        left: 0px;
    }

    .testimonial-next{
        right: 0px;
    }

}


/* =========================================
CONTACT Section
========================================= */

.contact {
    padding: 120px 0 100px;
}


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

.contact-box {

    position: relative;

   background:

linear-gradient(
135deg,
rgba(37,99,235,.25),
rgba(96,165,250,.05)
);

    border-radius: 35px;

    padding: 80px;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 90px;

    overflow: hidden;
    box-shadow:
        25px 25px 25px 60px rgb(0, 0, 0);

}




/* Optional subtle overlay */

.contact-box::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.12);

    pointer-events: none;

}


/* Keep content above overlay */

.contact-content,
.contact-form-wrapper {

    position: relative;

    z-index: 1;

}


/* =========================================
CONTACT CONTENT
========================================= */

.contact-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.contact-content .section-label {

    display: inline-block;

    margin-bottom: 22px;

}


.contact-content h2 {

    max-width: 650px;
    font-weight: 400;

    margin: 0;

    font-size: clamp(42px, 4vw, 64px);

    line-height: 1.08;

    letter-spacing: -2px;

}


.contact-content h2 .highlight {

    display: inline;

}


.contact-description {

    max-width: 570px;

    margin: 25px 0 0;

    font-size: 17px;

    line-height: 1.7;

}


/* =========================================
CONTACT DETAILS
========================================= */

.contact-details {

    margin-top: 55px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px 45px;

}


.contact-detail {

    min-width: 0;

}


.contact-detail-label {

    display: block;

    margin-bottom: 10px;

    font-size: 12px;

    font-weight: 200;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.65);

}


.contact-detail p,
.contact-detail a {

    margin: 0;

    color: white;

    font-size: 14px;

    line-height: 1.6;

    text-decoration: none;

}


.contact-detail a {

    transition: opacity 0.25s ease;

}


.contact-detail a:hover {

    opacity: 0.7;

}


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

.contact-form-wrapper {

    display: flex;

    align-items: center;

}


#contact-form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 25px;

}


/* =========================================
FORM ROW
========================================= */

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

}


/* =========================================
FORM GROUP
========================================= */

.form-group {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.form-group label {

    font-size: 13px;

    font-weight: 200;

    color: rgba(255, 255, 255, 0.7);

}


/* =========================================
INPUTS
========================================= */

#contact-form input,
#contact-form textarea,
#contact-form select {

    width: 100%;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 10px;

    padding: 15px 16px;

    color: white;

    font-family: "Nunito", sans-serif;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;

}


#contact-form input,
#contact-form select {

    height: 52px;

}


#contact-form textarea {

    min-height: 130px;

    resize: vertical;

    line-height: 1.5;

}


/* =========================================
PLACEHOLDER
========================================= */

#contact-form input::placeholder,
#contact-form textarea::placeholder {

    color: rgba(255, 255, 255, 0.42);

}


/* =========================================
SELECT
========================================= */

#contact-form select {

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

    background-image:

        linear-gradient(45deg, transparent 50%, white 50%),

        linear-gradient(135deg, white 50%, transparent 50%);

    background-position:

        calc(100% - 19px) 22px,

        calc(100% - 14px) 22px;

    background-size:

        5px 5px,

        5px 5px;

    background-repeat: no-repeat;

}


#contact-form select option {

    background: #161616;

    color: white;

}


/* =========================================
FOCUS
========================================= */

#contact-form input:focus,
#contact-form textarea:focus,
#contact-form select:focus {

    border-color: rgba(255, 255, 255, 0.65);

    background: rgba(255, 255, 255, 0.07);

}


/* =========================================
SUBMIT BUTTON
========================================= */

.contact-submit {

    width: fit-content;

    min-width: 170px;

    margin-top: 5px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    cursor: pointer;

}

/* =========================================
CONTACT SUBMIT BUTTON
========================================= */

.contact-submit {

    border: 1px solid hsla(0, 0%, 100%, 0.6);
    
    background:rgba(255, 255, 255, 0.1);
    
    padding:14px 28px;
    border-radius:100px;

    font-size:15px;
    font-weight:200;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:.3s;

}


/* =========================================
DISABLED STATE
========================================= */

.contact-submit:disabled {

    border: 1px solid hsla(0, 0%, 100%, 0.6);
    
    background:rgba(255, 255, 255, 0.1);
    
    padding:14px 28px;
    border-radius:100px;

    font-size:15px;
    font-weight:500;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:.3s;

}

.contact-submit .btn-text {
    color: #fff;
}

/* =========================================
ENABLED STATE
========================================= */

.contact-submit:not(:disabled) {

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    padding:14px 28px;
    border-radius:100px;

    font-size:15px;
    font-weight:500;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:.3s;

}


/* =========================================
ENABLED HOVER
========================================= */

.contact-submit:not(:disabled):hover {

    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(37,99,235,.35);

}


/* Arrow animation */

.contact-submit:not(:disabled):hover img {

    transform: translate(3px, -3px);

}


.contact-submit img {

    display: block;

    transition: transform 0.25s ease;

}


.contact-submit:hover img {

    transform: translate(3px, -3px);

}


/* =========================================
DISABLED BUTTON
========================================= */

.contact-submit:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}


/* =========================================
FORM STATUS
========================================= */

.contact-status {

    display: none;

    padding: 12px 15px;

    border-radius: 8px;

    font-size: 14px;

    line-height: 1.5;

}


.contact-status.success {

    display: block;

    background: rgba(70, 180, 100, 0.12);

    border: 1px solid rgba(70, 180, 100, 0.3);

    color: #9be7ae;

}


.contact-status.error {

    display: block;

    background: rgba(220, 70, 70, 0.12);

    border: 1px solid rgba(220, 70, 70, 0.3);

    color: #ffaaaa;

}


/* =========================================
TABLET — 1000px
========================================= */

@media (max-width: 1000px) {

    .contact {
        padding: 90px 0 80px;
    }

    .contact-box {
        padding: 60px;
        gap: 60px;
        grid-template-columns: 1fr;
    }

    .contact-content h2 {
        max-width: 700px;
        font-size: clamp(40px, 6vw, 56px);
    }

    .contact-description {
        max-width: 650px;
    }

    .contact-details {
        margin-top: 45px;
        grid-template-columns: 1fr 1fr;
    }

    .contact-form-wrapper {
        align-items: flex-start;
    }

}


/* =========================================
MOBILE — 600px
========================================= */

@media (max-width: 600px) {

    .contact {
        padding: 70px 0 60px;
    }

    .contact-box {
        padding: 40px 25px;
        border-radius: 25px;
        gap: 50px;
    }

    .contact-content h2 {
        font-size: 38px;
        line-height: 1.12;
        letter-spacing: -1.2px;
    }

    .contact-description {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.65;
    }

    .contact-details {
        margin-top: 40px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    #contact-form {
        gap: 22px;
    }

    .form-group {
        gap: 8px;
    }

    #contact-form input,
    #contact-form select {
        height: 50px;
    }

    #contact-form textarea {
        min-height: 120px;
    }

    .contact-submit {
        width: 100%;
    }

}


/* =========================================
VERY SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .contact-box {
        padding: 35px 20px;
        border-radius: 22px;
    }

    .contact-content h2 {
        font-size: 32px;
    }

    .contact-description {
        font-size: 14px;
    }

    .contact-detail p,
    .contact-detail a {
        font-size: 14px;
    }

}






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

footer{

    padding:80px 0 30px;

}


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

.footer-top{

    display:flex;

    flex-direction:column;

}


/* =========================
LOGO + DESCRIPTION
========================= */

.footer-brand{

    max-width:500px;

    padding-bottom:60px;

}


.footer-logo{

    display:inline-flex;

    align-items:center;

}


.footer-logo img{

    width:140px;

    height:auto;

    display:block;

}


/* Mobile Logo */

.footer-mobile-logo{

    display:none;

}


.footer-mobile-logo img{

    width:34px;

    height:auto;

    display:block;

}

footer{
    padding:80px 0 30px;
    background-color:#0A0A0A;
}

/* Description */

.footer-brand h2{

    max-width:600px;

    margin-top:30px;

    font-weight: 400;
    font-size:32px;

    line-height:40px;

}


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

.footer-info{
    display:grid;

    grid-template-columns:
        1.3fr
        1.3fr
        1fr;

    column-gap:60px;
    row-gap:45px;

    padding:0px 0px 50px 0px;

    border-bottom:1px solid var(--border);
}


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

.footer-column{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}


/* Heading */

.footer-label{

    color:#9AA4B5;

    font-size:14px;

    font-weight:200;

}


/* Text */

.footer-column p{

    margin:0;

    max-width:300px;

    font-size:16px;

    line-height:24px;

}


/* Links */

.footer-column a{

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    transition:.3s ease;

}


.footer-column a:hover{

    color:#3b82f6;

}


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

.social-icons{

    display:flex;

    align-items:center;

    gap:10px;

}


.social-icons a{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

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

    border-radius:50px;

    font-size:13px;

    transition:.3s ease;

}


.social-icons a:hover{

    color:#3b82f6;

    border-color:#3b82f6;

    transform:translateY(-3px);

}


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

.footer-bottom{

    padding-top:30px;

    text-align:center;

}


.footer-bottom p{

    margin:0;

    font-size:13px;

}


/* =================================================
TABLET
601px - 1000px
================================================= */

@media(max-width:1000px){

    .footer-brand{

        padding-bottom:50px;

    }


    .footer-info{

        grid-template-columns:1fr 1fr;

        column-gap:40px;

        row-gap:40px;

    }

}


/* =================================================
MOBILE
600px AND BELOW
================================================= */

@media(max-width:600px){

    footer{

        padding:60px 0 25px;

    }


    /* =========================
    BRAND
    ========================= */

    .footer-brand{

        max-width:100%;

        padding-bottom:40px;

    }


    /* Hide Desktop Logo */

    .footer-logo{

        display:none;

    }


    /* Show Mobile Logo */

    .footer-mobile-logo{

        display:inline-flex;

        align-items:center;

    }


    .footer-mobile-logo img{

        width:38px;

    }


    .footer-brand p{

        max-width:100%;

        margin-top:18px;

        font-size:15px;

    }


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

    .footer-info{

        display:flex;

        flex-direction:column;

        gap:35px;

        padding:40px 0;

    }


    .footer-column{

        width:100%;

    }


    .footer-column p{

        max-width:100%;

    }


    /* =========================
    SOCIALS
    ========================= */

    .social-icons{

        flex-wrap:wrap;

    }


    .social-icons a{

        padding:10px 18px;

    }


    /* =========================
    BOTTOM
    ========================= */

    .footer-bottom{

        padding-top:25px;

    }


    .footer-bottom p{

        font-size:12px;

    }

}