:root {
            --bg-lime: #FA191D;
            --brand-dark: #ffffff;
            --brand-lime: #FA191D;
            --brand-darker: #142114;
        }

        body {
            background-color: var(--bg-lime);
            font-family: 'Inter', sans-serif;
            padding: 2rem;
            color: white; 
        }

        @media (max-width: 768px) {
            body { padding: 1rem; }
        }

        /* Main Rounded Container */
        .main-wrapper {
            background-color: var(--brand-dark);
            border-radius: 40px;
            overflow: hidden;
            max-width: 1300px;
            margin: 0 auto;
            box-shadow: 0 50px 100px rgba(0,0,0,0.3);
            position: relative;
        }

       /* =========================================
   WATERMARK TEXT
========================================= */
.hero-section {
    padding: 6rem 3rem 0rem 3rem;
    margin: 0rem 3rem 0rem 3rem;
    position: relative;
    z-index: 1;
    overflow: visible;
    border-radius: 40px;
    
    /* Refined Multi-layer Gradient */
    background:#fff;

    /* The image has a very soft inner border-glow */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.05),
        0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Optional: To get that extra 'foggy' look from the image */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    
    pointer-events: none;
    z-index: 1;
}

/* =========================================
   WATERMARK
========================================= */

.watermark {

    position: absolute;

    top: 1%;

    left: 50%;

    transform: translateX(-50%);

    font-family: 'Archivo Black', sans-serif;

    font-size: clamp(7rem, 14vw, 10rem);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -8px;

    color:#fa191d24;

    white-space: nowrap;

    pointer-events: none;

    z-index: 0;

    width: 100%;

    text-align: center;

    overflow: hidden;
}
        /* Navbar Customization */
        .navbar-custom {
            padding: 2rem 3rem;
            position: relative;
            z-index: 10;
        }

        .nav-pill-container {
            background: #FA191D;
            backdrop-filter: blur(10px);
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0.4rem 1.5rem;
        }

        .nav-link {
            color: #fff !important;
            font-size: 0.9rem;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            transition: all 0.3s;
        }

        .nav-link:hover, .nav-link.active {
            color: #fff !important;
        }

        .btn-get-started {
            background-color: var(--brand-lime);
            color: var(--brand-dark);
            border-radius: 50px;
            padding: 0.6rem 1.8rem;
            font-weight: 800;
            font-size: 0.85rem;
            border: none;
            box-shadow: 0 10px 20px rgba(212, 243, 74, 0.2);
        }

        /* Hero Content */
      /* =========================================
   HERO SECTION EXACT BG
========================================= */
 
        .hero-title {
            font-weight: 900;
            font-size: clamp(2.5rem, 6vw, 2rem);
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: -0.02em;
			color:#FA191D; 
        }

        /* Search Box */
        .search-container {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 60px;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            max-width: 550px;
            margin-top: 2rem;
        }

        .search-input {
            background: transparent;
            border: none;
            color: white;
            padding-left: 1.5rem;
            width: 100%;
        }

        .search-input:focus {
            outline: none;
            box-shadow: none;
        }

        .btn-search-icon {
            background: var(--brand-lime);
            color: var(--brand-dark);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        /* Tags */
        .tag-pill {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            color: #999;
            font-size: 0.75rem;
            padding: 0.4rem 1rem;
            text-decoration: none;
            margin-right: 0.5rem;
            transition: all 0.2s;
        }

        .tag-pill:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        /* Floating 3D Image */
        .image-card-3d {
            border-radius: 3rem;  
            position: relative;
            overflow: hidden;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-25px); }
        }

/* RIGHT SIDE IMAGE CONTAINER */

.image-card-3d{
    position: relative;
    height: 450px;
    overflow: visible;

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

/* HOUSE IMAGE */

.carousel_image{

    position: absolute;

    right: -60px;

    top:0px;

    width: 700px;

    max-width: none;

    height: 500px;

    object-fit: contain;

    z-index: 5;

    filter:
    drop-shadow(0 40px 60px rgba(0,0,0,0.45));

    animation: floatHouse 5s ease-in-out infinite;
}

/* FLOAT EFFECT */

@keyframes floatHouse{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-15px);
    }

    100%{
        transform: translateY(0px);
    }
}
        /* Secondary Section */
        .recent-section {
            background-color: var(--brand-darker);
            padding: 6rem 3rem;
        }

        .prop-card {
            background: var(--brand-dark);
            border-radius: 2.5rem;
            border: 1px solid rgba(255,255,255,0.05);
            overflow: hidden;
            height: 100%;
            transition: transform 0.3s ease;
        }

        .prop-card:hover {
            transform: translateY(-10px);
        }

        .prop-img {
            height: 280px;
            width: 100%;
            object-fit: cover;
        }
 

        .sketch-arrow {
            width: 40px;
            filter: invert(1);
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--brand-dark); }
        ::-webkit-scrollbar-thumb { background: var(--brand-lime); border-radius: 10px; }
		
		/* =========================================
   SECTION
========================================= */

.property-showcase-section{

    position: relative;

    padding: 70px 55px 50px;

    overflow: hidden;

    background:

    radial-gradient(
    circle at top right,
    rgba(145,255,0,0.14) 0%,
    rgba(145,255,0,0.04) 18%,
    transparent 38%
    ),

    radial-gradient(
    circle at center,
    rgba(255,255,255,0.04) 0%,
    transparent 55%
    ),

    linear-gradient(
    135deg,
    #12180d 0%,
    #0f140b 45%,
    #1a260e 100%
    );
}

/* =========================================
   TOP AREA
========================================= */

.property-top-area{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:42px;
}

/* LEFT */

.left-content h2{

    color:#000;

    font-size:56px;

    line-height:0.92;

    font-weight:900;

    letter-spacing:-3px;

    margin:0;
}

/* RIGHT */

.right-content{

    max-width:380px;

    text-align:left;

    padding-top:10px;
}

.right-content p{

    color:#d2d2d2;

    font-size:15px;

    line-height:1.7;

    margin-bottom:22px;
}

.right-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#bfff35;

    color:#111;

    padding:13px 24px;

    border-radius:50px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;
}

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

.property-grid{

    display:grid;

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

    gap:24px;
}

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

.property-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.015)
    );

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

    transition:0.4s;
}

.property-card:hover{

    transform:translateY(-8px);
}

/* IMAGE */

.property-card img{

    width:100%;

    height:230px;

    object-fit:cover;
}

/* CONTENT */

.property-card-content{

    padding:22px;
}

.property-card-content h4{

    color:#000;

    font-size:24px;

    font-weight:700;

    margin-bottom:6px;
}

.property-card-content span{

    display:flex;

    align-items:center;

    gap:6px;

    color:#8f8f8f;

    font-size:12px;

    margin-bottom:18px;
}

/* BUTTON */

.property-card-content button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    border:none;

    background:transparent;

    border:1px solid rgba(191,255,53,0.35);

    color:#bfff35;

    border-radius:50px;

    padding:9px 18px;

    font-size:12px;

    font-weight:700;
}

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

.stats-wrapper{

    margin-top:38px;

    border-radius:24px;

    padding:24px 28px;

    background:
    linear-gradient(
    90deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.02)
    );

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

    backdrop-filter:blur(16px);

    display:grid;

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

    gap:22px;
}

/* ITEM */

.stat-box{

    display:flex;

    align-items:center;

    gap:14px;
}

/* ICON */

.stat-icon{

    width:46px;
    height:46px;

    border-radius:50%;

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

    border:1px solid rgba(191,255,53,0.10);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#bfff35;

    font-size:16px;
}

/* TEXT */

.stat-box h3{

    color:#fff;

    font-size:28px;

    font-weight:800;

    margin:0;
}

.stat-box p{

    color:#9b9b9b;

    font-size:12px;

    margin:0;
}


/* =========================================
SECTION WRAPPER
========================================= */

.property-showcase-section{

    position: relative;

    padding: 70px 45px 40px;

    overflow: hidden;

    border-radius: 0 0 38px 38px;

    background:#fff;
}

/* =========================================
TOP AREA
========================================= */

.property-top-area{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:40px;

    margin-bottom:45px;
}

/* LEFT */

.left-content{

    position:relative;
}

.left-content h2{

    font-size:72px;

    line-height:0.92;

    font-weight:900;

    color:#000;

    margin:0;

    letter-spacing:-4px;

    text-transform:uppercase;

    font-family:'Archivo Black',sans-serif;
}

/* ARROW */

.sketch-arrow{

    position:absolute;

    right:-70px;

    top:65px;

    width:95px;

    opacity:0.9;
}

/* RIGHT */

.right-content{

    max-width:370px;

    padding-top:10px;
}

.right-content p{

    color:#000000;
font-weight:bold;
    font-size:14px;

    line-height:1.8;

    margin-bottom:22px;
}

/* BUTTON */

.properties-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#b7f536;

    color:#121212;

    padding:12px 24px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:0.3s;
}

.properties-btn:hover{

    transform:translateY(-3px);

    color:#111;
}

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

.property-grid{

    display:grid;

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

    gap:24px;

    align-items:stretch;
}

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

.property-card{

    position:relative;

    overflow:hidden;

    border-radius:34px;

    min-height:430px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.015)
    );

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

    backdrop-filter:blur(20px);

    transition:0.4s;

    padding:18px;
}

.property-card:hover{

    transform:translateY(-8px);
}

/* IMAGE */

.property-image{

    width:100%;

    height:255px;

    border-radius:26px;

    object-fit:cover;
}

/* DARK OVERLAY */

.property-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,0) 10%,
        rgba(0,0,0,0.55) 100%
    );

    pointer-events:none;
}

/* CONTENT */

.property-card-content{

    position:absolute;

    left:28px;

    bottom:28px;

    z-index:2;
}

.property-card-content h4{

    color:#000;

    font-size:32px;

    font-weight:700;

    margin-bottom:8px;
}

.property-card-content span{

    display:flex;

    align-items:center;

    gap:7px;

    color:#b5b5b5;

    font-size:13px;

    margin-bottom:18px;
}

/* BUTTON */

.explore-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:rgba(250,25,29,0.50);

    border:1px solid rgba(183,245,54,0.35);

    color:#FA191D;

    padding:10px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:0.3s;
}

.explore-btn:hover{

    background:#b7f536;

    color:#111;
}

/* SMALL CARD */

.small-card .property-image{

    height:255px;
}

/* =========================================
STATS SECTION
========================================= */

.stats-wrapper{

    margin-top:32px;

    border-radius:22px;

    padding:22px 28px;

    background:

    linear-gradient(
        90deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );

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

    backdrop-filter:blur(18px);

    display:grid;

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

    gap:20px;
}

/* ITEM */

.stat-box{

    display:flex;

    align-items:center;

    gap:14px;
}

/* ICON */

.stat-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(183,245,54,0.08);

    border:1px solid rgba(183,245,54,0.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#c9ff61;

    font-size:17px;
}

/* TEXT */

.stat-box h3{

    color:#fff;

    font-size:28px;

    margin:0;

    font-weight:800;
}

.stat-box p{

    margin:0;

    color:#9f9f9f;

    font-size:12px;
}

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

@media(max-width:991px){

    .property-top-area{

        flex-direction:column;
    }

    .left-content h2{

        font-size:54px;
    }

    .property-grid{

        grid-template-columns:1fr;
    }

    .stats-wrapper{

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

@media(max-width:767px){

    .property-showcase-section{

        padding:55px 20px 25px;
    }

    .left-content h2{

        font-size:42px;

        letter-spacing:-2px;
    }

    .sketch-arrow{

        display:none;
    }

    .property-card{

        min-height:380px;
    }

    .stats-wrapper{

        grid-template-columns:1fr;
    }
}
/* =========================================
PROPERTY GRID
========================================= */

.property-grid{

    display:flex;

    gap:24px;

    align-items:stretch;
}

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

.property-card{

    position:relative;

    overflow:hidden;

    border-radius:34px;

    min-height:430px;

    flex:1;

    transition:
    flex 0.5s ease,
    transform 0.4s ease;

    cursor:pointer;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.015)
    );

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

    backdrop-filter:blur(20px);

    padding:18px;
}

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

/* when hovering grid */
.property-grid:hover .property-card{

    flex:0.8;
}

/* hovered card expands */
.property-grid .property-card:hover{

    flex:1.7;

    transform:translateY(-8px);
}

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

.property-image{

    width:100%;

    height:255px;

    border-radius:26px;

    object-fit:cover;

    transition:0.5s ease;
}

/* image zoom */

.property-card:hover .property-image{

    transform:scale(1.06);
}

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


.property-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(250,25,29,0.04),
        rgba(250,25,29,0.01),
        rgba(255,255,255,0.95)
    );
    pointer-events:none;
    z-index:-1;
}
 

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

.property-card-content{

    position:absolute;

    left:28px;

    bottom:28px;

    z-index:2;

    transition:0.4s ease;
}

.property-card-content h4{

    color:#000;

    font-size:32px;

    font-weight:700;

    margin-bottom:8px;
}

.property-card-content span{

    display:flex;

    align-items:center;

    gap:7px;

    color:#b5b5b5;

    font-size:13px;

    margin-bottom:18px;
}

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

.explore-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border:1px solid rgba(250,25,29,0.50);

    color:#FA191D;

    padding:10px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:0.3s;
}

.explore-btn:hover{

    background:#FA191D;

    color:#fff;
}

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

@media(max-width:991px){

    .property-grid{

        flex-direction:column;
    }

    .property-grid:hover .property-card{

        flex:1;
    }

    .property-grid .property-card:hover{

        flex:1;
    }
}

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

.dream-home-section{

    position:relative;

    margin:40px 45px 55px;

    border-radius:28px;

    overflow:hidden;

    min-height:330px;

    display:flex;

    align-items:center;

    padding:55px;

    background:
    
    linear-gradient(
        90deg,
        rgba(16,20,12,0.96) 0%,
        rgba(16,20,12,0.88) 28%,
        rgba(16,20,12,0.40) 55%,
        rgba(16,20,12,0.08) 100%
    ),

    url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;

    background-position:center;
}

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

.dream-home-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top left,
        rgba(181,255,59,0.14) 0%,
        transparent 35%
    );

    pointer-events:none;
}

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

.dream-home-content{

    position:relative;

    z-index:2;

    max-width:420px;
}

/* HEADING */

.dream-home-content h2{

    color:#fff;

    font-size:54px;

    line-height:1.02;

    font-weight:900;

    letter-spacing:-2px;

    text-transform:uppercase;

    margin-bottom:32px;

    font-family:'Archivo Black',sans-serif;
}

/* BUTTON */

.dream-home-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:50px;

    background:#b8f43d;

    color:#111;

    text-decoration:none;

    font-size:13px;

    font-weight:800;

    transition:0.35s ease;
}

.dream-home-btn:hover{

    transform:translateY(-3px);

    background:#d3ff75;

    color:#111;
}

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

@media(max-width:991px){

    .dream-home-section{

        margin:30px 20px;

        padding:40px 30px;

        min-height:280px;

        background-position:center right;
    }

    .dream-home-content h2{

        font-size:38px;
    }
}

@media(max-width:767px){

    .dream-home-section{

        min-height:240px;

        padding:30px 22px;
    }

    .dream-home-content h2{

        font-size:30px;

        line-height:1.1;
    }

    .dream-home-btn{

        padding:12px 22px;

        font-size:12px;
    }
}


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

.upcoming-projects-wrapper{

    position:relative;

    padding:70px 45px 40px;

    overflow:hidden;

    background:

    radial-gradient(
        circle at top right,
        rgba(181,255,59,0.12) 0%,
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #0d120c 0%,
        #11180f 40%,
        #17210f 100%
    );
}

/* =========================================
TOP AREA
========================================= */

.upcoming-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:45px;

    gap:30px;
}

.upcoming-header h2{

    color:#fff;

    font-size:68px;

    line-height:0.92;

    letter-spacing:-4px;

    font-weight:900;

    margin:0;

    text-transform:uppercase;

    font-family:'Archivo Black',sans-serif;
}

.upcoming-header p{

    max-width:420px;

    color:#cfcfcf;

    font-size:15px;

    line-height:1.8;

    margin:0;
}

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

.upcoming-grid{

    display:flex;

    gap:24px;
}

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

.upcoming-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    min-height:470px;

    flex:1;

    transition:
    flex 0.5s ease,
    transform 0.4s ease;

    cursor:pointer;

    background:#161616;
}

/* HOVER EFFECT */

.upcoming-grid:hover .upcoming-card{

    flex:0.9;
}

.upcoming-grid .upcoming-card:hover{

    flex:1.8;

    transform:translateY(-8px);
}

/* IMAGE */

.upcoming-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:0.5s ease;
}

.upcoming-card:hover img{

    transform:scale(1.06);
}

/* OVERLAY */

.upcoming-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,0.10) 10%,
        rgba(0,0,0,0.82) 100%
    );
}

/* CONTENT */

.upcoming-card-content{

    position:absolute;

    left:28px;

    right:28px;

    bottom:28px;

    z-index:2;
}

/* TAG */

.project-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 16px;

    border-radius:50px;

    margin-bottom:18px;

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

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

    color:#cbff63;

    font-size:12px;

    font-weight:700;
}

/* TITLE */

.upcoming-card-content h3{

    color:#fff;

    font-size:34px;

    font-weight:800;

    margin-bottom:12px;
}

/* TEXT */

.upcoming-card-content p{

    color:#d4d4d4;

    font-size:14px;

    line-height:1.8;

    margin-bottom:22px;
}

/* BUTTON */

.project-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:#b8f43d;

    color:#111;

    text-decoration:none;

    font-size:13px;

    font-weight:800;

    transition:0.3s;
}

.project-btn:hover{

    background:#d8ff78;

    color:#111;
}

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

@media(max-width:991px){

    .upcoming-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .upcoming-header h2{

        font-size:48px;
    }

    .upcoming-grid{

        flex-direction:column;
    }

    .upcoming-grid:hover .upcoming-card{

        flex:1;
    }

    .upcoming-grid .upcoming-card:hover{

        flex:1;
    }
}

@media(max-width:767px){

    .upcoming-projects-wrapper{

        padding:55px 20px 25px;
    }

    .upcoming-header h2{

        font-size:38px;

        letter-spacing:-2px;
    }

    .upcoming-card{

        min-height:400px;
    }
} 

.testimonials-section{

    position:relative;

    padding:70px 45px 80px;

    overflow:hidden;

    background:

    radial-gradient(
        circle at top right,
        rgba(181,255,59,0.10) 0%,
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #0d120c 0%,
        #10160d 45%,
        #17210f 100%
    );
}

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

.testimonials-top{

    margin-bottom:45px;
}

/* SMALL TITLE */

.testimonials-small{

    color:#b8f43d;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;
}

/* TITLE */

.testimonials-title{

    color:#fff;

    font-size:72px;

    line-height:0.92;

    letter-spacing:-4px;

    font-weight:900;

    margin:0 0 18px;

    text-transform:uppercase;

    font-family:'Archivo Black',sans-serif;
}

/* BREADCRUMB */

.testimonials-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    color:#8d8d8d;

    font-size:13px;

    margin-bottom:24px;
}

/* LINE */

.testimonials-line{

    width:100%;

    height:1px;

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

/* =========================================
LAYOUT
========================================= */

.testimonials-layout{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:40px;

    margin-top:45px;
}

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

.testimonials-image{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    min-height:600px;
}

.testimonials-image img{

    width:100%;

    height:100%;

    object-fit:cover;
}

/* =========================================
RIGHT CONTENT
========================================= */

.testimonials-content h2{

    color:#fff;

    font-size:48px;

    font-weight:900;

    margin-bottom:22px;

    line-height:1;

    text-transform:uppercase;

    font-family:'Archivo Black',sans-serif;
}

/* PARAGRAPH */

.testimonials-content p{

    color:#bcbcbc;

    font-size:14px;

    line-height:1.9;

    margin-bottom:38px;

    max-width:720px;
}

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

.testimonials-cards{

    display:grid;

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

    gap:20px;
}

/* CARD */

.testimonial-card{

    position:relative;

    border-radius:24px;

    padding:26px;

    overflow:hidden;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

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

    backdrop-filter:blur(18px);

    transition:0.4s ease;
}

.testimonial-card:hover{

    transform:translateY(-8px);

    border-color:rgba(181,255,59,0.18);
}

/* QUOTE */

.quote-icon{

    color:#c7ff5e;

    font-size:34px;

    margin-bottom:18px;
}

/* REVIEW */

.review-text{

    color:#d5d5d5;

    font-size:13px;

    line-height:1.8;

    margin-bottom:20px;
}

/* STARS */

.stars{

    color:#c7ff5e;

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:20px;
}

/* PROFILE */

.client-profile{

    display:flex;

    align-items:center;

    gap:14px;
}

/* IMAGE */

.client-profile img{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;
}

/* NAME */

.client-profile h4{

    color:#fff;

    font-size:15px;

    margin:0 0 4px;

    font-weight:700;
}

/* ROLE */

.client-profile span{

    color:#8f8f8f;

    font-size:12px;
}

/* =========================================
SLIDER DOTS
========================================= */

.testimonial-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:40px;
}

/* DOT */

.testimonial-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#5d5d5d;

    transition:0.3s;
}

.testimonial-dot.active{

    background:#b8f43d;

    box-shadow:0 0 10px #b8f43d;
}

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

@media(max-width:1100px){

    .testimonials-layout{

        grid-template-columns:1fr;
    }

    .testimonials-image{

        min-height:420px;
    }

    .testimonials-cards{

        grid-template-columns:1fr;
    }
}

@media(max-width:767px){

    .testimonials-section{

        padding:55px 20px 60px;
    }

    .testimonials-title{

        font-size:42px;

        letter-spacing:-2px;
    }

    .testimonials-content h2{

        font-size:34px;
    }

    .testimonials-image{

        min-height:320px;
    }
}
/* =========================================
FIX 3 CARDS PER SLIDE
========================================= */

.testimonialSwiper .swiper-slide{

    width:100% !important;
}

/* KEEP 3 CARDS */

.testimonials-cards{

    display:grid !important;

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

    gap:20px;

    width:100%;
}

/* MOBILE */

@media(max-width:991px){

    .testimonials-cards{

        grid-template-columns:1fr !important;
    }
}
/* =========================================
SWIPER PAGINATION
GREEN DOTS BELOW CARDS
========================================= */

.testimonialSwiper{

    position:relative;

    padding-bottom:70px;
}

/* DOTS CONTAINER */

.testimonialSwiper .swiper-pagination{

    position:absolute !important;

    bottom:0 !important;

    left:50% !important;

    transform:translateX(-50%);

    width:auto !important;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;
}

/* NORMAL DOT */

.testimonialSwiper .swiper-pagination-bullet{

    width:10px;

    height:10px;

    background:#4c4c4c;

    opacity:1;

    transition:0.3s ease;
}

/* ACTIVE DOT */

.testimonialSwiper .swiper-pagination-bullet-active{

    background:#b8f43d;

    box-shadow:0 0 12px rgba(184,244,61,0.8);

    transform:scale(1.15);
}

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

.footer-section{

    position:relative;

    overflow:hidden;

    padding:40px 45px 20px;

    border-radius:35px;

    background:

    radial-gradient(
        circle at top right,
        rgba(181,255,59,0.12) 0%,
        transparent 30%
    ),

    linear-gradient(
        135deg,
        #0b1009 0%,
        #10170d 45%,
        #182311 100%
    );

    border:1px solid rgba(255,255,255,0.05);
}

/* =========================================
NEWSLETTER BOX
========================================= */

.footer-newsletter{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    padding:28px 32px;

    margin-bottom:45px;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;
}

/* BG IMAGE */

.footer-newsletter::before{

    content:"";

    position:absolute;

    inset:0;

    background:url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop') center/cover;

    opacity:0.08;

    z-index:0;
}

.footer-newsletter > *{

    position:relative;

    z-index:2;
}

/* TITLE */

.newsletter-content h3{

    color:#fff;

    font-size:20px;

    font-weight:800;

    margin-bottom:8px;

    text-transform:uppercase;
}

.newsletter-content p{

    color:#c3c3c3;

    font-size:13px;

    margin:0;
}

/* INPUT AREA */

.newsletter-form{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:420px;
}

/* INPUT */

.newsletter-input{

    position:relative;

    flex:1;
}

.newsletter-input input{

    width:100%;

    height:54px;

    border:none;

    outline:none;

    border-radius:50px;

    padding:0 55px 0 22px;

    color:#fff;

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

    border:1px solid rgba(255,255,255,0.05);
}

/* ICON */

.newsletter-input i{

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:#9f9f9f;
}

/* BUTTON */

.newsletter-btn{

    border:none;

    background:#b8f43d;

    color:#111;

    height:54px;

    padding:0 28px;

    border-radius:50px;

    font-weight:700;

    transition:0.3s;
}

.newsletter-btn:hover{

    transform:translateY(-3px);
}

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

.footer-main{

    display:grid;

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

    gap:40px;

    padding-bottom:35px;
}

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

.footer-logo{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-weight:800;

    margin-bottom:18px;
}

.footer-logo i{

    color:#b8f43d;
}

/* TEXT */

.footer-about{

    color:#bcbcbc;

    font-size:14px;

    line-height:1.8;

    margin-bottom:24px;

    max-width:260px;
}

/* SOCIAL */

.footer-social{

    display:flex;

    align-items:center;

    gap:12px;
}

.footer-social a{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    color:#fff;

    text-decoration:none;

    transition:0.3s;
}

.footer-social a:hover{

    background:#b8f43d;

    color:#111;
}

/* =========================================
HEADINGS
========================================= */

.footer-heading{

    color:#fff;

    font-size:16px;

    font-weight:700;

    margin-bottom:22px;
}

/* LINKS */

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;
}

.footer-links a{

    color:#bcbcbc;

    text-decoration:none;

    font-size:14px;

    transition:0.3s;
}

.footer-links a:hover{

    color:#b8f43d;

    padding-left:4px;
}

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

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:16px;
}

.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#bcbcbc;

    font-size:14px;

    line-height:1.7;
}

.footer-contact-item i{

    color:#b8f43d;

    margin-top:3px;
}

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

.footer-bottom{

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

    padding-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;
}

/* COPYRIGHT */

.footer-copy{

    color:#a5a5a5;

    font-size:13px;
}

/* BOTTOM LINKS */

.footer-bottom-links{

    display:flex;

    align-items:center;

    gap:24px;
}

.footer-bottom-links a{

    color:#a5a5a5;

    text-decoration:none;

    font-size:13px;

    transition:0.3s;
}

.footer-bottom-links a:hover{

    color:#b8f43d;
}

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

@media(max-width:1100px){

    .footer-main{

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

    .newsletter-form{

        min-width:100%;
    }

    .footer-newsletter{

        flex-direction:column;

        align-items:flex-start;
    }
}

@media(max-width:767px){

    .footer-section{

        padding:25px 20px;
    }

    .footer-main{

        grid-template-columns:1fr;
    }

    .newsletter-form{

        flex-direction:column;

        width:100%;
    }

    .newsletter-btn{

        width:100%;
    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;
    }
}

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

.about-us-section{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:60px;

    padding:80px 55px;

    align-items:center;
}

.about-left h2{

    color:#fff;

    font-size:58px;

    line-height:1;

    margin-bottom:25px;

    font-weight:900;
}

.about-left p{

    color:#bdbdbd;

    line-height:1.9;

    margin-bottom:30px;
}

.about-features{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:35px;
}

.about-features div{

    color:#d8d8d8;

    display:flex;

    align-items:center;

    gap:12px;
}

.about-features i{

    color:#b8f43d;
}

.about-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:50px;

    background:#b8f43d;

    color:#111;

    text-decoration:none;

    font-weight:700;
}

.about-right img{

    width:100%;

    border-radius:30px;
}

/* =========================================
JOURNEY
========================================= */

.journey-section{

    padding:20px 55px 70px;
}

.journey-grid{

    display:grid;

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

    gap:20px;

    margin-top:35px;
}

.journey-card{

    padding:24px;

    border-radius:22px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.05);
}

.journey-card span{

    color:#b8f43d;

    font-size:13px;

    font-weight:700;
}

.journey-card h4{

    color:#fff;

    margin:14px 0 10px;
}

.journey-card p{

    color:#bcbcbc;

    font-size:13px;

    line-height:1.8;
}

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

.team-section{

    padding:0 55px 80px;
}

.team-grid{

    display:grid;

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

    gap:22px;

    margin-top:35px;
}

.team-card{

    overflow:hidden;

    border-radius:24px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

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

    text-align:center;

    padding-bottom:24px;
}

.team-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    margin-bottom:20px;
}

.team-card h4{

    color:#fff;

    margin-bottom:8px;
}

.team-card p{

    color:#bcbcbc;

    margin:0;
}

/* =========================================
ABOUT CONTENT EXACT DESIGN
========================================= */
/* =========================================
BUTTONS
========================================= */

.hero-buttons{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:35px;
}

/* PRIMARY BUTTON */

.hero-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 28px;

    border-radius:50px;

    background:#b8f43d;

    color:#111;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:0.3s;
}

.hero-btn-primary:hover{

    transform:translateY(-4px);
}

/* SECONDARY BUTTON */

.hero-btn-secondary-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 28px;

    border-radius:50px;

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

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

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:0.3s;
}

.hero-btn-secondary-custom:hover{

    background:#fff;

    color:#111;

    transform:translateY(-4px);
}
.hero-badge{

    color:#a1a79d;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;
}

/* TITLE */



 
/* DESCRIPTION */

.hero-description{

    color:#9da39a;

    font-size:15px;

    line-height:1.9;

    max-width:540px;

    margin-bottom:34px;
}

/* FEATURES */

.about-hero-features{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:38px;
}

.about-hero-features div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#d7d7d7;

    font-size:14px;

    font-weight:500;
}

.about-hero-features i{

    color:#b8f43d;

    font-size:15px;
}

/* BUTTON AREA */

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;
}

/* PRIMARY BUTTON */

.hero-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:52px;

    padding:0 28px;

    border-radius:50px;

    background:#b8f43d;

    color:#111;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:0.3s;
}

.hero-btn-primary:hover{

    transform:translateY(-4px);
}

/* SECONDARY BUTTON */

.hero-btn-secondary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;
}

.hero-btn-secondary i{

    width:42px;

    height:42px;

    border-radius:50%;

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

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;
}
/* =========================================
SECTION
========================================= */

.about-page-section{

    position:relative;

    padding:70px 55px 60px;

    overflow:hidden;

    background:

    radial-gradient(
        circle at top right,
        rgba(181,255,59,0.12) 0%,
        transparent 30%
    ),

    linear-gradient(
        135deg,
        #091008 0%,
        #0d150c 45%,
        #16210f 100%
    );

    border-radius:0 0 35px 35px;
}

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

.about-top{

    margin-bottom:35px;
}

.about-small{

    color:#fff;

    font-size:13px;

    text-transform:uppercase;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:10px;
}

.about-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    color:#8f8f8f;

    font-size:12px;

    margin-bottom:22px;
}

.about-line{

    width:100%;

    height:1px;

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

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

.about-main{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:60px;

    align-items:center;

    padding-bottom:55px;
}

/* =========================================
LEFT
========================================= */

.about-left h2{

    color:#fff;

    font-size:52px;

    line-height:1.05;

    margin-bottom:24px;

    font-weight:900;

    max-width:520px;
}

.about-left p{

    color:#aeb4ab;

    line-height:1.9;

    font-size:14px;

    margin-bottom:30px;

    max-width:520px;
}

/* FEATURES */

.about-features{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:35px;
}

.about-features div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#d7d7d7;

    font-size:14px;
}

.about-features i{

    color:#b8f43d;
}

/* BUTTON */

.about-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:50px;

    background:#b8f43d;

    color:#111;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:0.3s;
}

.about-btn:hover{

    transform:translateY(-4px);
}

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

.about-image{

    position:relative;

    border-radius:26px;

    overflow:hidden;
}

.about-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* =========================================
JOURNEY
========================================= */

.journey-wrapper{

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

    padding-top:45px;
}

.journey-title{

    color:#fff;

    font-size:28px;

    margin-bottom:35px;

    font-family:'Archivo Black',sans-serif;

    text-transform:uppercase;
}

/* GRID */

.journey-grid{

    display:grid;

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

    gap:18px;
}

/* CARD */

.journey-card{

    position:relative;

    padding:20px;

    border-radius:20px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.06);
}

/* YEAR */

.journey-year{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    border-radius:50px;

    border:1px solid rgba(184,244,61,0.4);

    color:#b8f43d;

    font-size:12px;

    font-weight:700;

    margin-bottom:14px;
}

/* TEXT */

.journey-card h4{

    color:#fff;

    font-size:16px;

    margin-bottom:12px;
}

.journey-card p{

    color:#9ea59d;

    font-size:12px;

    line-height:1.8;

    margin:0;
}

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

.about-stats{

    margin-top:35px;

    display:grid;

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

    gap:18px;
}

/* BOX */

.about-stat-box{

    padding:28px 20px;

    border-radius:22px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.02)
    );

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

    text-align:center;
}

.about-stat-box h2{

    color:#fff;

    font-size:48px;

    margin:0 0 10px;

    font-weight:900;
}

.about-stat-box p{

    color:#aab0a8;

    margin:0;

    font-size:14px;
}

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

@media(max-width:1200px){

    .journey-grid{

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

    .about-main{

        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .about-page-section{

        padding:50px 20px;
    }

    .about-left h2{

        font-size:38px;
    }

    .journey-grid,
    .about-stats{

        grid-template-columns:1fr;
    }

    .about-stats{

        gap:15px;
    }
}