/* =========================================================
   CREATIVE ENDS — MASTER STYLE SYSTEM
   Premium Cinematic Website Framework
   ========================================================= */

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

:root {

    /* Primary Brand Colors */
    --primary-dark: #463B2E;
    --primary-gold: #DBB96E;
    --secondary-gold: #D6C0A4;
    --soft-bg: #F7F5F2;
    --cool-gray: #AEB4BC;
    --white: #ffffff;
    --black: #111111;

    /* Overlay Colors */
    --overlay-dark: rgba(0, 0, 0, 0.45);
    --overlay-light: rgba(255, 255, 255, 0.08);

    /* Gradients */
    --gradient-gold:
        linear-gradient(
            135deg,
            #DBB96E 0%,
            #D6C0A4 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #463B2E 0%,
            #2D241C 100%
        );

    /* Typography */
    --heading-font: 'Playfair Display', serif;
    --body-font: 'Inter', sans-serif;

    /* Font Sizes */
    --fs-h1: 72px;
    --fs-h2: 54px;
    --fs-h3: 38px;
    --fs-h4: 28px;
    --fs-body: 16px;
    --fs-small: 14px;

    /* Spacing */
    --section-padding: 120px;
    --container-width: 1320px;

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    /* Shadows */
    --shadow-soft:
        0 10px 30px rgba(0,0,0,0.08);

    --shadow-premium:
        0 20px 60px rgba(0,0,0,0.18);

    /* Transition */
    --transition:
        all 0.4s ease;

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--body-font);
    font-size:var(--fs-body);
    line-height:1.7;
    color:var(--primary-dark);
    background:var(--soft-bg);
    overflow-x:hidden;
}

/* =========================
   GLOBAL TYPOGRAPHY
========================= */

h1,h2,h3,h4,h5,h6{
    font-family:var(--heading-font);
    font-weight:600;
    line-height:1.2;
    color:var(--primary-dark);
}

h1{
    font-size:var(--fs-h1);
}

h2{
    font-size:var(--fs-h2);
}

h3{
    font-size:var(--fs-h3);
}

h4{
    font-size:var(--fs-h4);
}

p{
    margin-bottom:20px;
    color:#555;
}

a{
    text-decoration:none;
    transition:var(--transition);
}

/* =========================
   CONTAINER SYSTEM
========================= */

.container{
    width:100%;
    max-width:var(--container-width);
    margin:auto;
    padding:0 20px;
}

/* =========================
   SECTION SPACING
========================= */

.section{
    padding:var(--section-padding) 0;
}

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

.btn-primary{

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

    padding:16px 36px;

    background:var(--gradient-gold);

    color:var(--primary-dark);

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow-soft);

    position:relative;

    overflow:hidden;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-premium);

}

.btn-outline{

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

    padding:16px 36px;

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

    color:var(--primary-gold);

    border-radius:50px;

    transition:var(--transition);

}

.btn-outline:hover{

    background:var(--primary-gold);

    color:var(--primary-dark);

}

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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:var(--transition);

    padding:24px 0;

}

.site-header.scrolled{

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

    backdrop-filter:blur(12px);

    box-shadow:var(--shadow-soft);

}

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo img{

    width:220px;

}

/* =========================
   NAVIGATION
========================= */

.nav-links{

    display:flex;

    gap:40px;

    list-style:none;

}

.nav-links a{

    color:var(--white);

    font-weight:500;

    position:relative;

}

.site-header.scrolled .nav-links a{

    color:var(--primary-dark);

}

.nav-links a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;

    height:2px;

    background:var(--primary-gold);

    transition:var(--transition);

}

.nav-links a:hover::after{

    width:100%;

}

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

.hero-section{

    position:relative;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    color:var(--white);

}

.hero-slider{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:-2;

}

.hero-slide{

    position:absolute;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center;

    animation:heroZoom 16s infinite;

}

.hero-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:var(--overlay-dark);

    z-index:-1;

}

.hero-content{

    max-width:760px;

}

.hero-content h1{

    color:var(--white);

    margin-bottom:24px;

}

.hero-content p{

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

    font-size:20px;

    margin-bottom:40px;

}

/* =========================
   GLASS CARD
========================= */

.glass-card{

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

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

    backdrop-filter:blur(18px);

    border-radius:var(--radius-md);

    padding:40px;

    box-shadow:var(--shadow-premium);

}

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

.services-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

.service-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-md);

    background:var(--white);

    box-shadow:var(--shadow-soft);

    transition:var(--transition);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-premium);

}

.service-image{

    height:260px;

    background-size:cover;

    background-position:center;

}

.service-content{

    padding:30px;

}

/* =========================
   PORTFOLIO SECTION
========================= */

.portfolio-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.portfolio-item{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-md);

}

.portfolio-item img{

    width:100%;

    display:block;

    transition:1s ease;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

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

.cta-section{

    position:relative;

    background:var(--gradient-dark);

    color:var(--white);

    text-align:center;

    border-radius:var(--radius-lg);

    overflow:hidden;

}

.cta-section h2{

    color:var(--white);

}

/* =========================
   FORMS
========================= */

.form-group{

    margin-bottom:24px;

}

.form-control{

    width:100%;

    padding:16px 20px;

    border:none;

    border-radius:14px;

    background:#fff;

    box-shadow:var(--shadow-soft);

    outline:none;

}

textarea.form-control{

    min-height:160px;

    resize:none;

}

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

.site-footer{

    background:#1f1b17;

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

    padding-top:100px;

}

.footer-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

}

.footer-title{

    color:var(--white);

    margin-bottom:20px;

}

.footer-links{

    list-style:none;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

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

}

.footer-links a:hover{

    color:var(--primary-gold);

}

.footer-bottom{

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

    margin-top:60px;

    padding:30px 0;

    text-align:center;

}

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

.whatsapp-float{

    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    border-radius:50%;

    background:#25D366;

    display:flex;

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

    color:#fff;

    font-size:28px;

    z-index:9999;

    box-shadow:var(--shadow-premium);

}

/* =========================
   UTILITIES
========================= */

.text-center{
    text-align:center;
}

.mt-30{
    margin-top:30px;
}

.mt-50{
    margin-top:50px;
}

.mb-30{
    margin-bottom:30px;
}

.mb-50{
    margin-bottom:50px;
}

/* =========================
   KEYFRAMES
========================= */

@keyframes heroZoom{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.12);
    }

}