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


/* ==========================================
ROOT VARIABLES
Professional Color System
========================================== */
:root{

    /* PRIMARY COLORS */
    --primary-color: #f59e0b;
    --primary-light: #ffcc70;

    /* DARK COLORS */
    --dark-bg: #050816;
    --dark-secondary: #0b1120;
    --dark-card: rgba(255,255,255,0.05);

    /* TEXT COLORS */
    --white-color: #ffffff;
    --text-gray: #cbd5e1;
    --text-light: #94a3b8;

    /* BORDER */
    --border-color: rgba(255,255,255,0.08);

    /* SHADOW */
    --shadow-primary:
        0 10px 40px rgba(0,0,0,0.35);

    /* GLASS EFFECT */
    --glass-bg:
        rgba(255,255,255,0.05);

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

}


/* ==========================================
GLOBAL RESET
========================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ==========================================
HTML
Smooth Scroll
========================================== */
html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}


/* ==========================================
BODY
Main Website Styling
========================================== */
body{

    /* FONT */
    font-family:'Poppins',sans-serif;

    /* BACKGROUND */
    background: var(--dark-bg);

    /* TEXT COLOR */
    color: var(--white-color);

    /* FONT RENDERING */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* OVERFLOW */
    overflow-x:hidden;

    /* POSITION */
    position:relative;

    /* LINE HEIGHT */
    line-height:1.7;

}


/* ==========================================
BODY BEFORE GLOW EFFECT
Luxury Background Glow
========================================== */
body::before{

    content:"";

    position:fixed;

    width:500px;
    height:500px;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,0.12),
            transparent 70%
        );

    top:-200px;
    right:-200px;

    z-index:-1;

    filter:blur(100px);

}


/* ==========================================
BODY AFTER GLOW EFFECT
Secondary Glow
========================================== */
body::after{

    content:"";

    position:fixed;

    width:400px;
    height:400px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,0.08),
            transparent 70%
        );

    bottom:-150px;
    left:-150px;

    z-index:-1;

    filter:blur(120px);

}


/* ==========================================
CUSTOM SCROLLBAR
========================================== */

/* WIDTH */
::-webkit-scrollbar{
    width:10px;
}

/* TRACK */
::-webkit-scrollbar-track{
    background: var(--dark-bg);
}

/* THUMB */
::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            var(--primary-color),
            var(--primary-light)
        );

    border-radius:20px;
}


/* ==========================================
GLOBAL SECTION SPACING
========================================== */
section{
    position:relative;
    padding:120px 0;
}


/* ==========================================
CONTAINER MAX WIDTH
========================================== */
.container{
    max-width:1320px;
}


/* ==========================================
GLOBAL IMAGE CONTROL
========================================== */
img{
    max-width:100%;
    display:block;
}


/* ==========================================
GLOBAL LINKS
========================================== */
a{
    text-decoration:none;
    transition:0.4s ease;
}


/* ==========================================
GLOBAL BUTTON RESET
========================================== */
button{
    border:none;
    outline:none;
}


/* ==========================================
GLOBAL INPUT RESET
========================================== */
input,
textarea{

    outline:none;
    border:none;

}


/* ==========================================
SELECTION COLOR
========================================== */
::selection{
    background: var(--primary-color);
    color: var(--dark-bg);
}


/* ==========================================
UTILITY CLASS
Section Title
========================================== */
.section-title{

    font-size: clamp(40px, 6vw, 72px);

    font-weight:800;

    line-height:1.1;

    margin-bottom:25px;

    letter-spacing:-2px;

}


/* ==========================================
UTILITY CLASS
Section Paragraph
========================================== */
.section-description{

    color: var(--text-gray);

    font-size:18px;

    line-height:1.9;

    max-width:700px;

}


/* ==========================================
RESPONSIVE DESIGN
========================================== */
@media(max-width:992px){

    section{
        padding:90px 0;
    }

}


@media(max-width:768px){

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

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

}


@media(max-width:576px){

    section{
        padding:70px 0;
    }

    .section-title{
        font-size:38px;
    }

}

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

.luxury-navbar{

    /* GLASS EFFECT */
    background: rgba(5, 8, 22, 0.45);

    /* BLUR EFFECT */
    backdrop-filter: blur(18px);

    /* SPACING */
    padding: 18px 0;

    /* TRANSITION */
    transition: 0.4s ease;

    /* BORDER */
    border-bottom: 1px solid rgba(255,255,255,0.06);

}


/* =========================================================
NAVBAR ON SCROLL
========================================================= */

.luxury-navbar.scrolled{

    background: rgba(5, 8, 22, 0.92);

    padding: 14px 0;

    box-shadow: 0 10px 40px rgba(0,0,0,0.35);

}


/* =========================================================
LOGO
========================================================= */

.logo-text{

    /* TEXT COLOR */
    color: white !important;

    /* FONT SIZE */
    font-size: 30px;

    /* FONT WEIGHT */
    font-weight: 800;

    /* LETTER SPACING */
    letter-spacing: 2px;

    /* FLEX */
    display: flex;

    align-items: center;

    gap: 10px;

}


/* =========================================================
LOGO ICON
========================================================= */

.logo-icon{

    width: 42px;
    height: 42px;

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

    background: linear-gradient(
        135deg,
        #f59e0b,
        #ffcc70
    );

    color: #050816;

    border-radius: 12px;

    font-size: 22px;

    box-shadow:
        0 10px 25px rgba(245,158,11,0.35);

}


/* =========================================================
NAV LINKS
========================================================= */

.navbar-nav{

    gap: 10px;

}


/* =========================================================
SINGLE NAV LINK
========================================================= */

.nav-link{

    position: relative;

    color: white !important;

    font-size: 15px;

    font-weight: 500;

    padding: 10px 18px !important;

    transition: 0.4s ease;

}


/* =========================================================
HOVER EFFECT
========================================================= */

.nav-link:hover{

    color: #f59e0b !important;

}


/* =========================================================
UNDERLINE EFFECT
========================================================= */

.nav-link::after{

    content: "";

    position: absolute;

    left: 18px;
    bottom: 5px;

    width: 0%;

    height: 2px;

    background: #f59e0b;

    transition: 0.4s ease;

}


/* =========================================================
HOVER UNDERLINE
========================================================= */

.nav-link:hover::after{

    width: calc(100% - 36px);

}


/* =========================================================
ACTIVE LINK
========================================================= */

.active-link{

    color: #f59e0b !important;

}


/* =========================================================
ACTIVE UNDERLINE
========================================================= */

.active-link::after{

    width: calc(100% - 36px);

}


/* =========================================================
CONSULTATION BUTTON
========================================================= */

.btn-consultation{

    background: linear-gradient(
        135deg,
        #f59e0b,
        #ffcc70
    );

    color: #050816;

    padding: 14px 28px;

    border-radius: 50px;

    font-weight: 600;

    transition: 0.4s ease;

    box-shadow:
        0 12px 30px rgba(245,158,11,0.25);

}


/* =========================================================
BUTTON HOVER
========================================================= */

.btn-consultation:hover{

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(245,158,11,0.35);

    color: #050816;

}


/* =========================================================
CUSTOM TOGGLER
========================================================= */

.custom-toggler{

    border: none;

    box-shadow: none !important;

}


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

@media(max-width:991px){

    .navbar-collapse{

        margin-top: 25px;

        padding: 25px;

        border-radius: 24px;

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

        backdrop-filter: blur(14px);

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

    }

}


/* =========================================================
MOBILE NAV LINKS
========================================================= */

@media(max-width:991px){

    .nav-link{

        padding: 14px 0 !important;

    }

}


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

@media(max-width:991px){

    .nav-right{

        margin-top: 20px;

    }

}


/* =========================================================
SMALL DEVICE
========================================================= */

@media(max-width:576px){

    .logo-text{

        font-size: 24px;

    }

}

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

.hero-section{

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    background: #050816;

    padding-top: 120px;

}


/* =========================================================
BACKGROUND VIDEO
========================================================= */

.hero-video{

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

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

    .hero-video{

        object-fit: cover;

        object-position: 70% center;

    }

}


/* =========================================================
DARK OVERLAY
========================================================= */

.hero-overlay{

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(5,8,22,0.92),
            rgba(5,8,22,0.75),
            rgba(5,8,22,0.55)
        );

}


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

.hero-glow{

    position: absolute;

    border-radius: 50%;

    filter: blur(140px);

    opacity: 0.12;

}


/* LEFT GLOW */

.hero-glow-1{

    width: 450px;
    height: 450px;

    background: #f59e0b;

    top: -100px;
    left: -100px;

}


/* RIGHT GLOW */

.hero-glow-2{

    width: 400px;
    height: 400px;

    background: #3b82f6;

    bottom: -120px;
    right: -100px;

}


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

.hero-content{

    position: relative;

    z-index: 10;

}


/* =========================================================
TEXT WRAPPER
========================================================= */

.hero-text-wrapper{

    max-width: 780px;

}


/* =========================================================
SUBTITLE
========================================================= */

.hero-subtitle{

    display: inline-block;

    color: #f59e0b;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 4px;

    margin-bottom: 25px;

}


/* =========================================================
MAIN TITLE
========================================================= */

.hero-title{

    font-size: clamp(60px, 8vw, 110px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -4px;

    margin-bottom: 30px;

    color: #ffffff;

}


/* =========================================================
DESCRIPTION
========================================================= */

.hero-description{

    font-size: 18px;

    line-height: 1.9;

    color: #cbd5e1;

    max-width: 650px;

}


/* =========================================================
BUTTON WRAPPER
========================================================= */

.hero-buttons{

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 45px;

    flex-wrap: wrap;

}


/* =========================================================
PRIMARY BUTTON
========================================================= */

.hero-btn-primary{

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ffcc70
        );

    color: #050816;

    padding: 16px 36px;

    border-radius: 60px;

    font-weight: 700;

    transition: 0.4s ease;

    box-shadow:
        0 15px 35px rgba(245,158,11,0.25);

}


/* BUTTON HOVER */

.hero-btn-primary:hover{

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(245,158,11,0.4);

}


/* =========================================================
SECONDARY BUTTON
========================================================= */

.hero-btn-secondary{

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

    color: white;

    padding: 16px 36px;

    border-radius: 60px;

    backdrop-filter: blur(10px);

    transition: 0.4s ease;

}


/* BUTTON HOVER */

.hero-btn-secondary:hover{

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

    transform: translateY(-5px);

}


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

.hero-stats{

    display: flex;

    gap: 25px;

    margin-top: 70px;

    flex-wrap: wrap;

}


/* =========================================================
STAT CARD
========================================================= */

.stat-card{

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

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

    backdrop-filter: blur(18px);

    border-radius: 24px;

    padding: 28px 32px;

    min-width: 180px;

    transition: 0.4s ease;

}


/* CARD HOVER */

.stat-card:hover{

    transform: translateY(-8px);

    border-color: rgba(245,158,11,0.35);

}


/* NUMBER */

.stat-card h3{

    color: #f59e0b;

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 10px;

}


/* TEXT */

.stat-card p{

    color: #cbd5e1;

    margin: 0;

}


/* =========================================================
RIGHT SIDE WRAPPER
========================================================= */

.hero-right{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}


/* =========================================================
FEATURE PROJECT CARD
========================================================= */

.feature-project-card{

    position: relative;

    width: 100%;

    max-width: 420px;

    padding: 45px;

    border-radius: 35px;

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

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

    backdrop-filter: blur(18px);

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.35);

}


/* =========================================================
TOP LIGHT EFFECT
========================================================= */

.feature-project-card::before{

    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    background: rgba(245,158,11,0.15);

    border-radius: 50%;

    top: -40px;
    right: -40px;

    filter: blur(40px);

}


/* =========================================================
CARD TEXT
========================================================= */

.feature-project-card span{

    color: #f59e0b;

    font-size: 13px;

    letter-spacing: 3px;

}


/* TITLE */

.feature-project-card h3{

    font-size: 52px;

    line-height: 1.1;

    margin: 20px 0;

    color: #ffffff;

}


/* PARAGRAPH */

.feature-project-card p{

    color: #cbd5e1;

    line-height: 1.8;

}


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

@media(max-width:992px){

    .hero-section{

        min-height: auto;

        padding:
            140px 0 100px;

        text-align: center;

    }

    .hero-description{

        margin: auto;

    }

    .hero-buttons{

        justify-content: center;

    }

    .hero-stats{

        justify-content: center;

    }

    .hero-right{

        margin-top: 50px;

    }

    .feature-project-card{

        max-width: 100%;

    }

}


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

@media(max-width:768px){

    .hero-title{

        letter-spacing: -2px;

    }

}


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

@media(max-width:576px){

    .hero-title{

        font-size: 58px;

    }

    .hero-buttons{

        flex-direction: column;

        align-items: stretch;

    }

    .hero-btn-primary,
    .hero-btn-secondary{

        text-align: center;

    }

    .feature-project-card{

        padding: 28px;

        border-radius: 28px;

    }

    .feature-project-card h3{

        font-size: 38px;

    }

    .hero-description{

        font-size: 17px;

    }

}


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

body{

    overflow-x: hidden;

}

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

.about-section{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #050816,
            #0b1120
        );

}


/* =========================================================
BACKGROUND GLOW
========================================================= */

.about-glow{

    position: absolute;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,0.12),
            transparent 70%
        );

    top: -120px;
    right: -120px;

    filter: blur(120px);

}


/* =========================================================
IMAGE WRAPPER
========================================================= */

.about-image-wrapper{

    position: relative;

    max-width: 560px;

}


/* =========================================================
ABOUT IMAGE
========================================================= */

.about-image{

    width: 100%;

    border-radius: 32px;

    object-fit: cover;

    transition: 0.5s ease;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.35);

}


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

.about-image-wrapper:hover .about-image{

    transform: scale(1.03);

}


/* =========================================================
EXPERIENCE CARD
========================================================= */

.experience-card{

    position: absolute;

    bottom: 30px;
    right: -40px;

    width: 220px;

    padding: 30px;

    border-radius: 28px;

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

    backdrop-filter: blur(20px);

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

    box-shadow:
        0 20px 50px rgba(0,0,0,0.25);

}


/* =========================================================
EXPERIENCE NUMBER
========================================================= */

.experience-card h3{

    font-size: 58px;

    color: #f59e0b;

    font-weight: 800;

    margin-bottom: 10px;

}


/* =========================================================
EXPERIENCE TEXT
========================================================= */

.experience-card p{

    color: #cbd5e1;

    margin: 0;

}


/* =========================================================
SECTION SUBTITLE
========================================================= */

.section-subtitle{

    display: inline-block;

    color: #f59e0b;

    font-size: 14px;

    letter-spacing: 4px;

    font-weight: 600;

    margin-bottom: 20px;

}


/* =========================================================
ABOUT TEXT
========================================================= */

.about-text{

    color: #94a3b8;

    line-height: 1.9;

    margin-top: 25px;

}


/* =========================================================
FEATURE WRAPPER
========================================================= */

.about-features{

    margin-top: 45px;

    display: flex;

    flex-direction: column;

    gap: 28px;

}


/* =========================================================
SINGLE FEATURE
========================================================= */

.feature-item{

    display: flex;

    gap: 22px;

    align-items: flex-start;

}


/* =========================================================
FEATURE ICON
========================================================= */

.feature-icon{

    width: 70px;
    height: 70px;

    flex-shrink: 0;

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

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,0.15),
            rgba(255,204,112,0.08)
        );

    border: 1px solid rgba(245,158,11,0.15);

}


/* ICON */

.feature-icon i{

    color: #f59e0b;

    font-size: 30px;

}


/* =========================================================
FEATURE TITLE
========================================================= */

.feature-item h5{

    font-size: 22px;

    margin-bottom: 10px;

}


/* =========================================================
FEATURE TEXT
========================================================= */

.feature-item p{

    color: #94a3b8;

    line-height: 1.8;

    margin: 0;

}


/* =========================================================
BUTTON WRAPPER
========================================================= */

.about-buttons{

    display: flex;

    gap: 20px;

    margin-top: 50px;

    flex-wrap: wrap;

}


/* =========================================================
PRIMARY BUTTON
========================================================= */

.about-btn-primary{

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ffcc70
        );

    color: #050816;

    padding: 16px 38px;

    border-radius: 60px;

    font-weight: 700;

    transition: 0.4s ease;

    box-shadow:
        0 18px 40px rgba(245,158,11,0.2);

}


/* HOVER */

.about-btn-primary:hover{

    transform: translateY(-5px);

}


/* =========================================================
SECONDARY BUTTON
========================================================= */

.about-btn-secondary{

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

    color: white;

    padding: 16px 38px;

    border-radius: 60px;

    backdrop-filter: blur(12px);

    transition: 0.4s ease;

}


/* HOVER */

.about-btn-secondary:hover{

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

}


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

@media(max-width:992px){

    .experience-card{

        right: 20px;

        bottom: 20px;

    }

}


@media(max-width:768px){

    .experience-card{

        width: 180px;

        padding: 24px;

    }

    .experience-card h3{

        font-size: 42px;

    }

}


@media(max-width:576px){

    .about-buttons{

        flex-direction: column;

    }

    .about-btn-primary,
    .about-btn-secondary{

        width: 100%;

        text-align: center;

    }

}

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

.services-section{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #0b1120,
            #050816
        );

}


/* =========================================================
BACKGROUND GLOW
========================================================= */

.services-glow{

    position: absolute;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,0.08),
            transparent 70%
        );

    top: -100px;
    left: -100px;

    filter: blur(120px);

}


/* =========================================================
SECTION HEADER
========================================================= */

.section-header{

    max-width: 850px;

    margin: auto;

}


/* =========================================================
SERVICE CARD
========================================================= */

.service-card{

    position: relative;

    height: 100%;

    border-radius: 32px;

    overflow: hidden;

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

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

    backdrop-filter: blur(20px);

    transition: 0.5s ease;

}


/* =========================================================
CARD HOVER
========================================================= */

.service-card:hover{

    transform:
        translateY(-14px);

    border-color:
        rgba(245,158,11,0.2);

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

}


/* =========================================================
IMAGE WRAPPER
========================================================= */

.service-image-wrapper{

    height: 260px;

    overflow: hidden;

}


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

.service-image{

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.6s ease;

}


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

.service-card:hover .service-image{

    transform: scale(1.08);

}


/* =========================================================
SERVICE CONTENT
========================================================= */

.service-content{

    padding: 35px;

}


/* =========================================================
SERVICE ICON
========================================================= */

.service-icon{

    width: 75px;
    height: 75px;

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

    border-radius: 24px;

    margin-bottom: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,0.12),
            rgba(255,204,112,0.06)
        );

}


/* ICON */

.service-icon i{

    font-size: 34px;

    color: #f59e0b;

}


/* =========================================================
TITLE
========================================================= */

.service-content h3{

    font-size: 28px;

    margin-bottom: 18px;

}


/* =========================================================
DESCRIPTION
========================================================= */

.service-content p{

    color: #94a3b8;

    line-height: 1.9;

    margin-bottom: 30px;

}


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

.service-btn{

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #f59e0b;

    font-weight: 600;

    transition: 0.4s ease;

}


/* HOVER */

.service-btn:hover{

    gap: 16px;

    color: #ffcc70;

}


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

@media(max-width:768px){

    .service-content{

        padding: 28px;

    }

}


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

.contact-section{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #050816,
            #0b1120
        );

    padding: 120px 0;

}


/* =========================================================
BACKGROUND GLOW
========================================================= */

.contact-glow{

    position: absolute;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,0.08),
            transparent 70%
        );

    left: -120px;
    bottom: -120px;

    filter: blur(120px);

}


/* =========================================================
SECTION TITLE FIX
========================================================= */

.contact-section .section-title{

    color: #ffffff;

    margin-top: 20px;

}


/* =========================================================
DESCRIPTION
========================================================= */

.contact-section .section-description{

    color: #cbd5e1;

    line-height: 1.9;

    margin-top: 25px;

}


/* =========================================================
CONTACT INFO WRAPPER
========================================================= */

.contact-info-wrapper{

    display: flex;

    flex-direction: column;

    gap: 24px;

}


/* =========================================================
INFO CARD
========================================================= */

.contact-info-card{

    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 30px;

    border-radius: 28px;

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

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

    backdrop-filter: blur(18px);

    transition: 0.4s ease;

}


/* =========================================================
CARD HOVER
========================================================= */

.contact-info-card:hover{

    transform: translateY(-8px);

    border-color:
        rgba(245,158,11,0.2);

}


/* =========================================================
ICON
========================================================= */

.contact-icon{

    width: 70px;
    height: 70px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,0.12),
            rgba(255,204,112,0.06)
        );

}


/* ICON */

.contact-icon i{

    color: #f59e0b;

    font-size: 28px;

}


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

.contact-info-card h5{

    color: #ffffff;

    margin-bottom: 10px;

}


/* PARAGRAPH */

.contact-info-card p{

    color: #cbd5e1;

    line-height: 1.8;

    margin: 0;

}


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

.whatsapp-contact-btn{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 18px 32px;

    border-radius: 60px;

    margin-top: 10px;

    background:
        linear-gradient(
            135deg,
            #25d366,
            #1ebe5d
        );

    color: white;

    font-weight: 600;

    transition: 0.4s ease;

}


/* HOVER */

.whatsapp-contact-btn:hover{

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(37,211,102,0.3);

}


/* =========================================================
FORM WRAPPER
========================================================= */

.contact-form-wrapper{

    padding: 45px;

    border-radius: 32px;

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

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

    backdrop-filter: blur(18px);

}


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

.custom-input{

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

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

    border-radius: 18px;

    padding: 18px 24px;

    color: #ffffff;

    min-height: 60px;

}


/* INPUT FOCUS */

.custom-input:focus{

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

    border-color:
        rgba(245,158,11,0.4);

    box-shadow: none;

    color: #ffffff;

}


/* PLACEHOLDER */

.custom-input::placeholder{

    color: #94a3b8;

}


/* =========================================================
TEXTAREA
========================================================= */

textarea.custom-input{

    resize: none;

    min-height: 180px;

}


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

.submit-btn{

    display: inline-flex;

    align-items: center;

    gap: 12px;

    border: none;

    padding: 18px 34px;

    border-radius: 60px;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ffcc70
        );

    color: #050816;

    font-weight: 700;

    transition: 0.4s ease;

}


/* HOVER */

.submit-btn:hover{

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(245,158,11,0.3);

}


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

@media(max-width:768px){

    .contact-form-wrapper{

        padding: 30px;

    }

}

/* =========================================================
PROJECT SECTION
========================================================= */

.projects-section{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #050816,
            #0b1120
        );

    padding: 120px 0;

}


/* =========================================================
BACKGROUND GLOW
========================================================= */

.projects-glow{

    position: absolute;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,0.08),
            transparent 70%
        );

    right: -120px;
    top: -120px;

    filter: blur(120px);

}


/* =========================================================
SECTION HEADER
========================================================= */

.section-header{

    max-width: 850px;

    margin: auto;

}


/* =========================================================
SECTION TITLE FIX
========================================================= */

.projects-section .section-title{

    color: #ffffff;

    margin-top: 20px;

}


/* =========================================================
SECTION DESCRIPTION FIX
========================================================= */

.projects-section .section-description{

    color: #cbd5e1;

    margin-top: 25px;

    line-height: 1.9;

}


/* =========================================================
PROJECT CARD
========================================================= */

.project-card{

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    height: 420px;

    background: #111827;

    cursor: pointer;

    transition: 0.5s ease;

}


/* =========================================================
LARGE CARD
========================================================= */

.large-project{

    height: 100%;

}


/* =========================================================
CARD HOVER
========================================================= */

.project-card:hover{

    transform: translateY(-12px);

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

}


/* =========================================================
PROJECT IMAGE
========================================================= */

.project-image{

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.7s ease;

}


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

.project-card:hover .project-image{

    transform: scale(1.08);

}


/* =========================================================
OVERLAY
========================================================= */

.project-overlay{

    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 40px;

    background:
        linear-gradient(
            to top,
            rgba(5,8,22,0.95),
            rgba(5,8,22,0.15)
        );

}


/* =========================================================
CATEGORY
========================================================= */

.project-category{

    color: #f59e0b;

    font-size: 14px;

    letter-spacing: 3px;

    margin-bottom: 16px;

    display: inline-block;

}


/* =========================================================
TITLE
========================================================= */

.project-overlay h3{

    color: #ffffff;

    font-size: 32px;

    margin-bottom: 16px;

}


/* =========================================================
DESCRIPTION
========================================================= */

.project-overlay p{

    color: #d1d5db;

    line-height: 1.8;

    max-width: 500px;

}


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

@media(max-width:992px){

    .large-project{

        height: 420px;

    }

}


@media(max-width:768px){

    .project-card{

        height: 320px;

    }

    .project-overlay{

        padding: 28px;

    }

    .project-overlay h3{

        font-size: 24px;

    }

}

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

.testimonial-section{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #0b1120,
            #050816
        );

}


/* =========================================================
BACKGROUND GLOW
========================================================= */

.testimonial-glow{

    position: absolute;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,0.08),
            transparent 70%
        );

    top: -100px;
    right: -100px;

    filter: blur(120px);

}


/* =========================================================
TESTIMONIAL CARD
========================================================= */

.testimonial-card{

    position: relative;

    height: 100%;

    padding: 40px;

    border-radius: 30px;

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

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

    backdrop-filter: blur(20px);

    transition: 0.5s ease;

}


/* =========================================================
CARD HOVER
========================================================= */

.testimonial-card:hover{

    transform:
        translateY(-12px);

    border-color:
        rgba(245,158,11,0.2);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.35);

}


/* =========================================================
QUOTE ICON
========================================================= */

.quote-icon{

    width: 70px;
    height: 70px;

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

    border-radius: 22px;

    margin-bottom: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,0.15),
            rgba(255,204,112,0.08)
        );

}


/* ICON */

.quote-icon i{

    color: #f59e0b;

    font-size: 34px;

}


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

.testimonial-text{

    color: #cbd5e1;

    line-height: 2;

    margin-bottom: 28px;

}


/* =========================================================
STARS
========================================================= */

.testimonial-stars{

    display: flex;

    gap: 8px;

    margin-bottom: 30px;

}


/* STAR */

.testimonial-stars i{

    color: #f59e0b;

}


/* =========================================================
CLIENT INFO
========================================================= */

.client-info{

    display: flex;

    align-items: center;

    gap: 16px;

}


/* =========================================================
CLIENT IMAGE
========================================================= */

.client-image{

    width: 70px;
    height: 70px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid rgba(245,158,11,0.3);

}


/* =========================================================
CLIENT NAME
========================================================= */

.client-info h5{

    margin-bottom: 6px;

    font-size: 20px;

}


/* ROLE */

.client-info span{

    color: #94a3b8;

    font-size: 15px;

}


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

@media(max-width:768px){

    .testimonial-card{

        padding: 30px;

    }

}

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

.footer-section{

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #020617,
            #050816
        );

    padding-top: 120px;

}


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

.footer-glow{

    position: absolute;

    width: 450px;
    height: 450px;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,0.08),
            transparent 70%
        );

    top: -120px;
    right: -120px;

    filter: blur(120px);

}


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

.footer-logo{

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: white;

    font-size: 32px;

    font-weight: 800;

    margin-bottom: 30px;

}


/* ICON */

.footer-logo-icon{

    width: 45px;
    height: 45px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ffcc70
        );

    color: #050816;

}


/* =========================================================
DESCRIPTION
========================================================= */

.footer-description{

    color: #94a3b8;

    line-height: 2;

    max-width: 340px;

}


/* =========================================================
SOCIAL LINKS
========================================================= */

.footer-socials{

    display: flex;

    gap: 14px;

    margin-top: 30px;

}


/* ICON LINK */

.footer-socials a{

    width: 52px;
    height: 52px;

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

    border-radius: 18px;

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

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

    color: white;

    transition: 0.4s ease;

}


/* HOVER */

.footer-socials a:hover{

    transform: translateY(-5px);

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ffcc70
        );

    color: #050816;

}


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

.footer-title{

    color: white;

    margin-bottom: 30px;

    font-size: 24px;

}


/* =========================================================
LINKS
========================================================= */

.footer-links{

    list-style: none;

    padding: 0;

    margin: 0;

}


/* LIST */

.footer-links li{

    margin-bottom: 18px;

}


/* LINK */

.footer-links a{

    color: #94a3b8;

    transition: 0.4s ease;

}


/* HOVER */

.footer-links a:hover{

    color: #f59e0b;

    padding-left: 8px;

}


/* =========================================================
CONTACT INFO
========================================================= */

.footer-contact p{

    color: #94a3b8;

    line-height: 1.9;

    display: flex;

    gap: 12px;

    margin-bottom: 20px;

}


/* ICON */

.footer-contact i{

    color: #f59e0b;

}


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

.footer-bottom{

    margin-top: 80px;

    padding: 30px 0;

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

    text-align: center;

}


/* TEXT */

.footer-bottom p{

    color: #94a3b8;

    margin: 0;

}

/* =========================================================
FLOATING WHATSAPP
========================================================= */

.floating-whatsapp{

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 68px;
    height: 68px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #25d366,
            #1ebe5d
        );

    color: white;

    font-size: 34px;

    z-index: 999;

    box-shadow:
        0 15px 40px rgba(37,211,102,0.35);

    animation:
        whatsappPulse 2s infinite;

}


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

.floating-whatsapp:hover{

    transform: scale(1.08);

    color: white;

}


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

@keyframes whatsappPulse{

    0%{

        box-shadow:
            0 0 0 0 rgba(37,211,102,0.6);

    }

    70%{

        box-shadow:
            0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:
            0 0 0 0 rgba(37,211,102,0);

    }

}

/* =========================================================
BACK TO TOP
========================================================= */

.back-to-top{

    position: fixed;

    right: 25px;
    bottom: 110px;

    width: 62px;
    height: 62px;

    border: none;

    border-radius: 20px;

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

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #ffcc70
        );

    color: #050816;

    font-size: 24px;

    cursor: pointer;

    z-index: 999;

    opacity: 0;
    visibility: hidden;

    transition: 0.4s ease;

    box-shadow:
        0 15px 40px rgba(245,158,11,0.3);

}


/* =========================================================
SHOW BUTTON
========================================================= */

.back-to-top.show{

    opacity: 1;

    visibility: visible;

}


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

.back-to-top:hover{

    transform: translateY(-5px);

}