/*==================================================
  GOOGLE FONTS
==================================================*/
:root{

    /* Colors */
    --ex-primary:#9E4421;
    --ex-primary-dark:#7E3618;
    --ex-secondary:#2A140C;

    --ex-bg:#F9F4EC;
    --ex-white:#ffffff;

    --ex-text:#2A140C;
    --ex-text-light:#6D625C;

    --ex-border:#E9DDD3;

    --ex-shadow:
        0 10px 30px rgba(0,0,0,.05);

    --ex-shadow-lg:
        0 20px 50px rgba(0,0,0,.08);

    --ex-radius:18px;
    --ex-radius-lg:60px;

    --transition:.35s ease;
	
	--heading-font:"Fraunces", ui-serif, Georgia, serif;
	--body-font:"Inter", sans-serif;
	
	--primary:#BF5A35;
	--cream:#F7F3EC;
	--text:#2F261F;
	--white:#fff;

}

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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--body-font);

    background:var(--ex-bg);

    color:var(--ex-text);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

    margin:0;

    padding:0;

}

section{

    position:relative;

}

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

.container{

    max-width:1380px;

}

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

.ex-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:rgba(249,244,236,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:.35s ease;
    border-bottom:1px solid #ede2d6;
}

.ex-header.sticky{
    border-color:#E9DDCF;
    box-shadow:0 8px 30px rgba(42,20,12,.08);
}

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

.ex-navbar{
    display:grid;
    grid-template-columns:240px 1fr 220px;
    align-items:center;
    height:84px;
    column-gap:30px;
}

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

.exchangez-logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.logo-icon{

    width:48px;

    height:48px;

    object-fit:contain;

    flex-shrink:0;

}

.logo-text{

    font-family:"Fraunces", ui-serif, Georgia, serif;

    font-size:24px;

    font-weight:600;

    line-height:1;

    letter-spacing:-0.03em;

    color:#2A140C;

    transition:.35s;

}

.logo-text span{

    color:#9E4421;

}

.exchangez-logo:hover .logo-text{

    color:#9E4421;

}

.exchangez-logo:hover .logo-text span{

    color:#2A140C;

}

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

.ex-logo{

    display:flex;

    align-items:center;

    gap:12px;
	margin-right:80px;

}

.ex-logo img{

    width:70px;

    height:auto;

}

/*==================================================
DESKTOP MENU
==================================================*/

.ex-nav{
    display:flex;
    justify-content:center;
}

.ex-nav ul{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:42px;
    margin:0;
    padding:0;
    list-style:none;
}

.ex-nav ul li a{
    position:relative;
    display:inline-block;
    padding:8px 0;
    font-size:16px;
    font-weight:500;
    color:var(--ex-text);
    text-decoration:none;
    transition:color .35s ease;
}

.ex-nav ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:2px;
    background:var(--ex-primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s ease;
}

.ex-nav ul li a:hover{
    color:var(--ex-primary);
}

.ex-nav ul li a:hover::after{
    transform:scaleX(1);
}

.ex-nav ul li a.active{
    color:var(--ex-primary);
}

.ex-nav ul li a.active::after{
    transform:scaleX(1);
}

/*==================================================
RIGHT AREA
==================================================*/

.ex-right{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:26px;
}

.ex-login{

    color:var(--ex-text);

    font-weight:600;

    font-size:15px;

}

.ex-login:hover{

    color:var(--ex-primary);

}

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

.ex-btn{

    background:var(--ex-primary);

    color:#fff;

    padding:6px 20px;

    border-radius:999px;

    font-size:15px;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

}

.ex-btn:hover{

    background:var(--ex-primary-dark);

    color:#fff;

    transform:translateY(-3px);

}

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

.ex-mobile-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    display:none;

    align-items:center;

    justify-content:center;

    background:var(--ex-primary);

    color:#fff;

    font-size:24px;

    cursor:pointer;

}

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

.ex-mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:#fff;

    z-index:99999;

    padding:35px;

    transition:.4s;

    box-shadow:-10px 0 30px rgba(0,0,0,.08);

}

.ex-mobile-menu.active{

    right:0;

}

.ex-close{

    width:44px;

    height:44px;

    border:none;

    background:var(--ex-primary);

    color:#fff;

    border-radius:50%;

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.ex-mobile-menu ul{

    margin-top:40px;

}

.ex-mobile-menu li{

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

}

.ex-mobile-menu li a{

    display:block;

    padding:16px 0;

    color:var(--ex-text);

    font-weight:600;

}

.mobile-action{

    margin-top:40px;

}

.mobile-login{

    display:block;

    margin-bottom:18px;

    font-weight:600;

    color:var(--ex-text);

}

.mobile-btn{

    display:block;

    text-align:center;

    background:var(--ex-primary);

    color:#fff;

    border-radius:999px;

    padding:14px;

}

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

.ex-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9990;

}

.ex-overlay.active{

    opacity:1;

    visibility:visible;

}

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

@media(max-width:1199px){

    .ex-nav{

        display:none;

    }

    .ex-mobile-btn{

        display:flex;

    }

}

@media(max-width:767px){

    .ex-navbar{

        min-height:78px;

    }

    .ex-logo img{

        width:145px;

    }

    .ex-login,

    .ex-btn{

        display:none;

    }

}

@media(max-width:480px){

    .ex-mobile-menu{

        width:100%;

    }

}

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

.hero-section{

    position:relative;

    overflow:hidden;

    padding:150px 0 110px;

    background:var(--ex-bg);

}

.hero-title,
.section-title,
.hero-stat h3{

    font-family:var(--heading-font);

}

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

.hero-bg{

    position:absolute;

    top:-180px;

    right:-120px;

    width:950px;

    height:950px;

    border-radius:50%;

    background:radial-gradient(circle,
            rgba(255,213,122,.55) 0%,
            rgba(255,228,177,.28) 40%,
            rgba(255,245,230,0) 72%);

    filter:blur(25px);

    pointer-events:none;

    z-index:0;

}

.hero-section .container{

    position:relative;

    z-index:2;

}

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

.hero-content{

    max-width:540px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:9px 18px;

    background:#F4D59B;

    color:var(--ex-primary);

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    margin-bottom:26px;

}

.hero-badge i{

    font-size:14px;

}

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

.hero-title{

    font-size:clamp(3rem,5vw,5.25rem);

    line-height:.95;

    letter-spacing:-1px;

    color:var(--ex-secondary);

    margin-bottom:30px;

    font-weight:700;

}

.hero-title span{

    display:block;

    margin-top:8px;

    color:var(--ex-primary);

}

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

.hero-text{

    max-width:470px;

    font-size:1.35rem;

    line-height:1.7;

    color:var(--ex-text-light);

    margin-bottom:38px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:48px;

}

.btn-primary-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:17px 34px;

    background:var(--ex-primary);

    color:#fff;

    border-radius:60px;

    font-size:17px;

    font-weight:600;

    box-shadow:0 15px 35px rgba(158,68,33,.18);

    transition:.35s ease;

}

.btn-primary-custom:hover{

    background:var(--ex-primary-dark);

    color:#fff;

    transform:translateY(-4px);

}

.btn-primary-custom i{

    transition:.35s;

}

.btn-primary-custom:hover i{

    transform:translateX(5px);

}

.btn-outline-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

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

    border-radius:60px;

    background:#fff;

    color:var(--ex-secondary);

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.btn-outline-custom:hover{

    background:var(--ex-secondary);

    border-color:var(--ex-secondary);

    color:#fff;

}

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

.hero-stats{

    display:flex;

    align-items:flex-start;

    gap:65px;

    flex-wrap:wrap;

}

.hero-stat h3{

    font-size:2.3rem;

    margin-bottom:2px;

    color:var(--ex-secondary);

}

.hero-stat span{

    font-size:15px;

    color:var(--ex-text-light);

}

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

.hero-image-wrapper{

    position:relative;

    max-width:650px;

    margin-left:auto;

}

.hero-image{

    overflow:hidden;

    border-radius:34px;

    background:#fff;

    box-shadow:0 30px 70px rgba(0,0,0,.08);

}

.hero-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

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

.trade-card{

    position:absolute;

    left:-25px;

    bottom:40px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    background:#fff;

    border:1px solid rgba(0,0,0,.05);

    border-radius:22px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    min-width:250px;

}

.trade-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#FFF3EE;

    color:var(--ex-primary);

    font-size:20px;

}

.trade-card small{

    display:block;

    color:#8A817A;

    font-size:14px;

    margin-bottom:3px;

}

.trade-card h6{

    margin:0;

    font-size:20px;

    color:var(--ex-secondary);

}

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

.hero-image img{

    transition:transform .8s ease;

}

.hero-image:hover img{

    transform:scale(1.04);

}

.trade-card{

    transition:.35s ease;

}

.trade-card:hover{

    transform:translateY(-6px);

}

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

/* Large Desktop */
@media (min-width:1600px){

    .hero-section{
        padding:180px 0 140px;
    }

    .hero-content{
        max-width:610px;
    }

    .hero-title{
        font-size:4rem;
    }

    .hero-text{
        max-width:540px;
        font-size:1.45rem;
    }

    .hero-image-wrapper{
        max-width:720px;
    }

}

/* Laptop */
@media (max-width:1399px){

    .hero-title{
        font-size:3.6rem;
    }

    .hero-image-wrapper{
        max-width:580px;
    }

    .hero-stats{
        gap:50px;
    }

}

/* Bootstrap LG */
@media (max-width:1199px){

    .hero-section{
        padding:140px 0 90px;
    }

    .hero-title{
        font-size:3rem;
    }

    .hero-text{
        font-size:1.15rem;
    }

    .hero-image-wrapper{
        max-width:100%;
    }

    .trade-card{
        left:20px;
        bottom:20px;
    }

}

/* Tablet */
@media (max-width:991px){

    .hero-section{
        padding:130px 0 80px;
    }

    .hero-content{
        max-width:100%;
        text-align:center;
        margin-bottom:50px;
    }

    .hero-text{
        max-width:650px;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-stats{
        justify-content:center;
        gap:40px;
    }

    .hero-image-wrapper{
        margin:auto;
        max-width:650px;
    }

    .trade-card{
        left:30px;
        bottom:30px;
    }

}

/* Mobile Landscape */
@media (max-width:767px){

    .hero-section{
        padding:115px 0 70px;
    }

    .hero-title{
        font-size:2.2rem;
        line-height:1;
    }

    .hero-text{
        font-size:1rem;
        line-height:1.8;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary-custom,
    .btn-outline-custom{

        width:100%;
        max-width:300px;

    }

    .hero-stats{

        justify-content:space-between;
        gap:25px;

    }

    .hero-stat{

        flex:1;
        text-align:center;

    }

    .hero-image{

        border-radius:26px;

    }

    .trade-card{

        position:relative;

        left:auto;

        right:auto;

        bottom:auto;

        margin:20px auto 0;

        width:100%;

        max-width:320px;

    }

}

/* Small Mobile */
@media (max-width:575px){

    .hero-section{

        padding:105px 0 60px;

    }

    .hero-badge{

        font-size:13px;

        padding:8px 15px;

    }

    .hero-title{

        font-size:1.6rem;

    }

    .hero-text{

        font-size:.95rem;

    }

    .hero-stats{

        flex-direction:column;

        align-items:center;

        gap:22px;

    }

    .hero-stat h3{

        font-size:2rem;

    }

    .trade-card{

        padding:16px;

    }

    .trade-card h6{

        font-size:18px;

    }

}

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

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-content{

    animation:heroFadeUp .9s ease forwards;

}

.hero-image-wrapper{

    animation:heroFadeUp 1.1s ease forwards;

}

.trade-card{

    animation:heroFloat 4s ease-in-out infinite;

}

/*==================================================
 BUTTON MICRO INTERACTIONS
==================================================*/

.btn-primary-custom,
.btn-outline-custom{

    position:relative;

    overflow:hidden;

}

.btn-primary-custom::before,
.btn-outline-custom::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.btn-primary-custom:hover::before,
.btn-outline-custom:hover::before{

    left:140%;

}

/*==================================================
 ACCESSIBILITY
==================================================*/

.btn-primary-custom:focus,
.btn-outline-custom:focus,
.hero-badge:focus{

    outline:3px solid rgba(158,68,33,.35);

    outline-offset:4px;

}

/*==================================================
 REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==================================================
Feature Bar
==================================================*/

.ex-feature-bar{

    background:#fbf2e3;

    border-top:1px solid #E7DDD2;

    border-bottom:1px solid #E7DDD2;

    padding:18px 0;

}

.ex-feature-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    column-gap:34px;

    row-gap:12px;

}

.ex-feature-wrapper span{

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

    font-size:13px;

    font-weight:500;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:#786A5E;

    line-height:1;

}

.ex-feature-wrapper .separator{

    color:#CDBEAF;

    font-size:16px;

    font-weight:400;

    letter-spacing:0;

    margin:0 -6px;

}

/*=====================================================
    HOW IT WORKS SECTION
=====================================================*/

.ex-how-it-works{
    position:relative;
    padding:90px 0 100px;
    background:#FBF7F2;
    overflow:hidden;
}

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

.ex-how-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:48px;
    gap:40px;
}

.ex-section-label{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#B45A2B;
    margin-bottom:14px;
}

.ex-how-heading h2{
    font-family:"Fraunces",ui-serif,Georgia,serif;
    font-size:3rem;
    font-weight:700;
    line-height:1;
    letter-spacing:-2px;
    color:#28130C;
    margin:0;
}

.ex-how-guide{
    flex-shrink:0;
    padding-bottom:10px;
}

.ex-how-guide a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#B45A2B;
    font-size:18px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.ex-how-guide a:hover{
    gap:14px;
    color:#8F3E1C;
}

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

.ex-step-card{
    position:relative;
    background:#FFFDFC;
    border:1px solid #E8DDD2;
    border-radius:26px;
    min-height:198px;
    padding:32px 30px 28px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:
        0 2px 8px rgba(0,0,0,.03),
        0 10px 24px rgba(0,0,0,.04);
}

.ex-step-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.05),
        0 20px 45px rgba(0,0,0,.07);
}

/*=====================================================
    TOP RIGHT CORNER
=====================================================*/

.ex-card-corner{
    position:absolute;
    top:0;
    right:0;
    width:76px;
    height:76px;
    background:#F8F1EA;
    border-bottom-left-radius:38px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.ex-card-corner svg{
    width:22px;
    height:22px;
    color:#7A5644;
}

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

.ex-step-number{
    display:block;
    font-family:"Fraunces",ui-serif,Georgia,serif;
    font-size:34px;
    font-weight:500;
    color:#A44E26;
    margin-bottom:26px;
}

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

.ex-step-card h3{
    font-family:"Fraunces",ui-serif,Georgia,serif;
    font-size:26px;
    font-weight:600;
    color:#28130C;
    margin-bottom:12px;
}

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

.ex-step-card p{
    margin:0;
    max-width:250px;
    color:#685F59;
    font-size:17px;
    line-height:1.45;
    font-family:"Inter",sans-serif;
}

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

@media(max-width:991px){

    .ex-how-header{
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:35px;
    }

    .ex-how-heading h2{
        font-size:46px;
    }

    .ex-how-guide{
        padding-bottom:0;
    }

}

@media(max-width:767px){

    .ex-how-it-works{
        padding:70px 0;
    }

    .ex-how-heading h2{
        font-size:36px;
    }

    .ex-step-card{
        min-height:auto;
        padding:28px 24px;
    }

    .ex-step-card p{
        max-width:100%;
    }

}

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

.ex-categories{
    position:relative;
    padding:90px 0;
    background:#FBF7F2;
    border-top:1px solid #E9DED2;
}

.ex-categories .container{
    max-width:1280px;
}

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

.ex-cat-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:40px;
    gap:30px;
}

.ex-section-subtitle{
    display:block;
    margin-bottom:14px;
    color:#B15A2C;
    font-size:13px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-family:Inter,sans-serif;
}

.ex-cat-title h2{

    margin:0;

    font-family:"Fraunces",serif;

    font-size:58px;

    font-weight:700;

    line-height:1.05;

    letter-spacing:-1.8px;

    color:#2A160F;

}

.ex-cat-link a{

    display:flex;

    align-items:center;

    gap:6px;

    color:#B15A2C;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    font-family:Inter,sans-serif;

    transition:.35s;

}

.ex-cat-link a:hover{

    gap:12px;

    color:#8F4320;

}

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

.ex-category-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    height:72px;

    padding:0 22px;

    border-radius:22px;

    border:1px solid #E8DDD2;

    background:#FFFDFC;

    text-decoration:none;

    transition:.35s ease;

    overflow:hidden;

}

.ex-category-card:hover{

    transform:translateY(-5px);

    border-color:#D6B89D;

    box-shadow:

    0 10px 25px rgba(0,0,0,.05);

}

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

.ex-category-icon{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#F8EFE7;

    border:1px solid #EFE2D8;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.ex-category-icon i{

    font-size:16px;

    color:#B15A2C;

    transition:.35s;

}

.ex-category-card:hover .ex-category-icon{

    background:#B15A2C;

}

.ex-category-card:hover .ex-category-icon i{

    color:#fff;

    transform:scale(1.05);

}

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

.ex-category-name{

    font-family:"Fraunces",serif;

    font-size:1rem;

    font-weight:600;

    color:#2A160F;

    line-height:1;

}

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

@media(max-width:991px){

.ex-cat-header{

flex-direction:column;

align-items:flex-start;

}

.ex-cat-title h2{

font-size:46px;

}

}

@media(max-width:767px){

.ex-categories{

padding:70px 0;

}

.ex-cat-title h2{

font-size:36px;

}

.ex-category-card{

height:64px;

padding:0 18px;

}

.ex-category-name{

font-size:16px;

}

}

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

.ex-marketplace{
    position:relative;
    padding:90px 0;
    background:#FBF7F2;
    border-top:1px solid #E9DED2;
}

.ex-marketplace .container{
    max-width:1280px;
}

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

.ex-market-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:42px;
    gap:30px;
}

.ex-market-header h2{
    margin:0;
    font-family:"Fraunces",serif;
    font-size:48px;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-1.5px;
    color:#24130C;
}

.ex-view-all{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#B15A2C;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    transition:.35s;
}

.ex-view-all:hover{
    color:#8E4422;
    gap:14px;
}

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

.listing-card{
    background:#FFFDFC;
    border:1px solid #E7DDD2;
    border-radius:24px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.03);
    height:100%;
}

.listing-card:hover{
    transform:translateY(-6px);
    border-color:#D8C2AE;
    box-shadow:
        0 15px 35px rgba(0,0,0,.06);
}

.listing-card a{
    color:inherit;
    text-decoration:none;
    display:block;
}

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

.listing-image{
    position:relative;
    overflow:hidden;
}

.listing-image img{
    width:100%;
    height:235px;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.listing-card:hover .listing-image img{
    transform:scale(1.06);
}

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

.listing-content{
    padding:18px 18px 20px;
}

.listing-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.listing-meta span{
    font-family:Inter,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#8D7E73;
}

.listing-meta strong{
    font-size:15px;
    font-weight:700;
    color:#28130C;
    font-family:"Fraunces",serif;
}

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

.listing-content h3{
    margin:0 0 12px;
    font-family:"Fraunces",serif;
    font-size:21px;
    font-weight:600;
    line-height:1.25;
    color:#28130C;
}

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

.listing-wants,
.listing-location{

    display:flex;

    align-items:flex-start;

    gap:8px;

    margin:0 0 8px;

    font-size:14px;

    color:#6C625B;

    line-height:1.5;

    font-family:Inter,sans-serif;

}

.listing-location{

    margin-bottom:0;

}

.listing-wants i,
.listing-location i{

    color:#B15A2C;

    margin-top:2px;

    font-size:14px;

}

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

@media(max-width:1199px){

.listing-image img{

height:220px;

}

}

@media(max-width:991px){

.ex-market-header{

flex-direction:column;

align-items:flex-start;

}

.ex-market-header h2{

font-size:36px;

}

}

@media(max-width:767px){

.ex-marketplace{

padding:70px 0;

}

.ex-market-header h2{

font-size:26px;

}

.listing-content{

padding:16px;

}

.listing-content h3{

font-size:18px;

}

.listing-image img{

height:220px;

}

}

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

.ex-testimonials{
    position:relative;
    padding:110px 0;
    background:#6B1808;
    overflow:hidden;
}

.ex-testimonials .container{
    max-width:1280px;
}

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

.ex-testimonial-title{
    margin:10px 0 0;
    font-family:"Fraunces",ui-serif,Georgia,serif;
    font-size:48px;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-1.8px;
    color:#FFF7F0;
}

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

.testimonial-card{

    position:relative;

    background:#803225;

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

    border-radius:26px;

    padding:34px;

    min-height:330px;

    transition:all .35s ease;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    background:#8A382A;

    box-shadow:

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

}

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

.quote-icon{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    color:#F2B24A;

    font-size:18px;

}

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

.testimonial-text{

    color:#FFF4EC;

    font-size:18px;

    line-height:1.8;

    font-family:Inter,sans-serif;

    margin-bottom:34px;

}

/*=========================================================
USER
=========================================================*/

.testimonial-user{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

}

.user-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#A65D2A;

    color:#FFD98C;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:18px;

    flex-shrink:0;

}

.user-info h5{

    margin:0 0 4px;

    font-size:17px;

    color:#FFF;

    font-weight:600;

    font-family:Inter,sans-serif;

}

.user-info span{

    display:block;

    color:#E2B8A5;

    font-size:14px;

    line-height:1.5;

}

/*=========================================================
RATING
=========================================================*/

.testimonial-rating{

    display:flex;

    gap:4px;

}

.testimonial-rating i{

    color:#F5B543;

    font-size:15px;

}

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

@media(max-width:991px){

.ex-testimonials{

padding:90px 0;

}

.ex-testimonial-title{

font-size:38px;

}

.testimonial-card{

min-height:auto;

}

}

@media(max-width:767px){

.ex-testimonials{

padding:70px 0;

}

.ex-testimonial-title{

font-size:26px;

}

.testimonial-card{

padding:26px;

}

.testimonial-text{

font-size:16px;

line-height:1.7;

}

.user-avatar{

width:42px;

height:42px;

font-size:16px;

}

.user-info h5{

font-size:16px;

}

.user-info span{

font-size:13px;

}

}

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

.ex-stories{
    position:relative;
    padding:100px 0;
    background:#FBF7F2;
    overflow:hidden;
}

.ex-stories .container{
    max-width:1280px;
}

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

.ex-stories-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:50px;
}

.ex-stories-header h2{
    margin:10px 0 0;
    font-family:"Fraunces",serif;
    font-size:48px;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-1.6px;
    color:#28130C;
}

.stories-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#A04C27;

    text-decoration:none;

    font-family:Inter,sans-serif;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.stories-link:hover{

    color:#7C3517;

    gap:16px;

}

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

.story-card{

    background:#fffdf8;

    border-radius:26px;

    overflow:hidden;

    border:1px solid #E8DDD2;

    transition:.35s ease;

    height:100%;

    box-shadow:

    0 3px 10px rgba(0,0,0,.03);

}

.story-card:hover{

    transform:translateY(-6px);

    box-shadow:

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

}

.story-card a{

    color:inherit;

    text-decoration:none;

    display:block;

}

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

.story-image{

    overflow:hidden;

}

.story-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

    transition:transform .65s ease;

}

.story-card:hover img{

    transform:scale(1.06);

}

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

.story-content{

    padding:24px;

}

.story-meta{

    display:block;

    margin-bottom:14px;

    color:#A57A63;

    font-size:11px;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

    font-family:Inter,sans-serif;

}

.story-content h3{

    margin:0 0 14px;

    font-family:"Fraunces",serif;

    font-size:20px;

    font-weight:600;

    line-height:1.18;

    color:#28130C;

}

.story-content p{

    margin:0;

    color:#6B625C;

    font-family:Inter,sans-serif;

    font-size:16px;

    line-height:1.75;

}

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

@media(max-width:991px){

.ex-stories{

padding:80px 0;

}

.ex-stories-header{

flex-direction:column;

align-items:flex-start;

}

.ex-stories-header h2{

font-size:36px;

}

.story-image img{

height:220px;

}

}

@media(max-width:767px){

.ex-stories{

padding:70px 0;

}

.ex-stories-header h2{

font-size:26px;

}

.story-content{

padding:20px;

}

.story-content h3{

font-size:24px;

}

.story-content p{

font-size:15px;

line-height:1.7;

}

.story-image img{

height:210px;

}

}

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

.ex-cta-section{

    background:#FBF7F2;

    padding:110px 0;

}
.ex-cta-section .container{width:1200px;}
.ex-cta-box{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    padding:50px 30px;

    text-align:center;

    background:linear-gradient(135deg,#A24A23 0%,#C87534 100%);

    box-shadow:

    0 35px 70px rgba(120,55,20,.18);

}

/* Decorative circles */

.ex-cta-box::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

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

    top:-180px;

    left:-120px;

}

.ex-cta-box::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    bottom:-120px;

    right:-80px;

}

.ex-section-subtitle.light{

    color:#FFE7D0;

}

.ex-cta-title{

    font-family:"Fraunces",serif;

    font-size:62px;

    font-weight:700;

    line-height:1.08;

    letter-spacing:-2px;

    color:#fff;

    margin:18px 0 28px;

}

.ex-cta-text{

    max-width:700px;

    margin:0 auto 40px;

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.90);

    font-family:Inter,sans-serif;

}

.ex-cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.btn-cta-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:999px;

    background:#fff;

    color:#A24A23;

    font-weight:600;

    font-size:16px;

    text-decoration:none;

    transition:.35s;

}

.btn-cta-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.btn-cta-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

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

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-cta-outline:hover{

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

    transform:translateY(-4px);

}

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

@media(max-width:991px){

.ex-cta-box{

padding:70px 40px;

}

.ex-cta-title{

font-size:48px;

}

}

@media(max-width:767px){
.ex-cta-section .container{width:100%;}
.ex-cta-section{

padding:70px 0;

}

.ex-cta-box{

padding:50px 24px;

border-radius:24px;

}

.ex-cta-title{

font-size:34px;

letter-spacing:-1px;

}

.ex-cta-text{

font-size:16px;

line-height:1.7;

}

.ex-cta-buttons{

flex-direction:column;

}

.btn-cta-primary,

.btn-cta-outline{

width:100%;

justify-content:center;

}

}

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

.exchangez-footer{

    background:#FAF4E8;

    border-top:1px solid #E8DDD0;

    margin-top:0;

}

/* Top Area */

.exchangez-footer .container{

    max-width:1200px;

}

.exchangez-footer .row{

    padding:72px 0 58px;

}

/* Logo */

.footer-logo{

    display:inline-block;

    margin-bottom:26px;

}

.footer-logo img{

    width:168px;

    height:auto;

    display:block;

}

.footer-brand p{

    margin:0;

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

    font-size:18px;

    font-weight:400;

    line-height:1.55;

    color:#66584B;

}

/* Headings */

.footer-menu h6{

    margin:0 0 22px;

    font-family:'Fraunces',serif;

    font-size:18px;

    font-weight:600;

    letter-spacing:.08em;

    color:#6A472F;

}

/* Links */

.footer-menu ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-menu li{

    margin-bottom:16px;

}

.footer-menu li:last-child{

    margin-bottom:0;

}

.footer-menu a{

    color:#56463A;

    text-decoration:none;

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

    font-size:17px;

    font-weight:400;

    transition:.35s ease;

}

.footer-menu a:hover{

    color:#A5522B;

    padding-left:6px;

}

/* Bottom */

.footer-bottom{

    border-top:1px solid #E8DDD0;

    padding:18px 0;

}

.footer-bottom p{

    margin:0;

    text-align:center;

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

    font-size:15px;

    color:#7A6C60;

}

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

@media(max-width:991px){

.footer-brand{

margin-bottom:45px;

}

.footer-menu{

margin-bottom:35px;

}

}

@media(max-width:767px){

.exchangez-footer .row{

padding:55px 0 40px;

text-align:center;

}

.footer-logo img{

margin:auto;

}

.footer-brand{

margin-bottom:45px;

}

.footer-menu{

margin-bottom:35px;

}

.footer-menu h6{

margin-bottom:18px;

}

.footer-menu li{

margin-bottom:12px;

}

.footer-bottom{

padding:16px 0;

}

.footer-bottom p{

font-size:14px;

}

}

/*==================================
Floating Buttons
==================================*/

.floating-buttons{

    position:fixed;

    right:28px;

    bottom:28px;

    display:flex;

    flex-direction:column;

    gap:16px;

    z-index:999;

}

/* Common */

.floating-buttons a{

    width:60px;

    height:60px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(135deg,#9E4421,#C66B35);

    box-shadow:

    0 15px 35px rgba(158,68,33,.25),

    inset 0 1px 1px rgba(255,255,255,.25);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

/* Hover */

.floating-buttons a:hover{

    transform:translateY(-6px) scale(1.08);

    box-shadow:

    0 22px 45px rgba(158,68,33,.35);

}

/* Icons */

.floating-buttons i{

    font-size:26px;

}

/* Back Top */

.back-top{

    opacity:0;

    visibility:hidden;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

/* WhatsApp */

.whatsapp-btn{

    background:linear-gradient(135deg,#25D366,#0BBE57);

}

/* Pulse */

.whatsapp-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:20px;

    border:2px solid rgba(37,211,102,.45);

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    100%{

        transform:scale(1.6);

        opacity:0;

    }

}

/* Mobile */

@media(max-width:767px){

.floating-buttons{

right:16px;

bottom:16px;

}

.floating-buttons a{

width:54px;

height:54px;

border-radius:18px;

}

.floating-buttons i{

font-size:22px;

}

}

/*=====================================================
    AUTH PAGE
======================================================*/

.ex-auth-page{
    padding:140px 0 90px;
    background:#F8F2E9;
    min-height:100vh;
}

.ex-auth-section{
    position:relative;
}

.ex-auth-section .container{
    max-width:1320px;
}

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

.ex-auth-section .row{
    align-items:center;
}

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

.ex-auth-card{

    position:relative;

    padding:42px;

    border-radius:30px;

    background:linear-gradient(135deg,#7F1D0E 0%,#A7461A 60%,#B75A23 100%);

    color:#fff;

    overflow:hidden;

    box-shadow:0 30px 70px rgba(84,29,5,.18);

}

.ex-auth-card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:-170px;

    border-radius:50%;

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

}

.ex-auth-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

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

}

.ex-auth-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

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

    font-size:13px;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:30px;

}

.ex-auth-badge .dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#FFC857;

}

.ex-auth-card h1{

    font-family:"Fraunces",serif;

    font-size:48px;

    line-height:1.08;

    font-weight:700;

    margin-bottom:28px;

    color:#fff;

}

.ex-auth-card p{

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,.92);

    margin-bottom:34px;

}

.ex-benefits{

    margin:0;

    padding:0;

    list-style:none;

}

.ex-benefits li{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:20px;

    font-size:18px;

    font-weight:500;

}

.ex-benefits i{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F5C542;

    color:#6A2408;

    border-radius:50%;

    font-size:14px;

    flex-shrink:0;

}

.ex-members{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:55px;

}

.avatars{

    display:flex;

}

.avatars img{

    width:48px;

    height:48px;

    border-radius:50%;

    border:3px solid #fff;

    margin-left:-12px;

    object-fit:cover;

}

.avatars img:first-child{

    margin-left:0;

}

.ex-members strong{

    display:block;

    font-size:17px;

    font-weight:700;

}

.ex-members span{

    display:block;

    margin-top:4px;

    font-size:15px;

    color:rgba(255,255,255,.88);

}

.ex-auth-wrapper{

    position:relative;

    max-width:470px;

    margin-left:auto;

}

.ex-auth-panel{

    transition:.45s ease;

}

.ex-auth-panel h2{

    font-family:"Fraunces",serif;

    font-size:48px;

    line-height:1.1;

    color:#2B120A;

    margin-bottom:14px;

}

.ex-auth-panel p{

    font-size:20px;

    color:#6A5B50;

    margin-bottom:36px;

}

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

.google-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    height:62px;

    background:#FFFFFF;

    border:1px solid #E8DED2;

    border-radius:50px;

    text-decoration:none;

    color:#2A140C;

    font-size:16px;

    font-weight:600;

    transition:all .35s ease;

    box-shadow:0 4px 18px rgba(0,0,0,.04);

}

.google-btn img{

    width:22px;

    height:22px;

}

.google-btn:hover{

    transform:translateY(-3px);

    background:#FFF8F3;

    border-color:#D9C5B4;

    box-shadow:0 12px 30px rgba(42,20,12,.08);

}

/*=====================================================
    DIVIDER
======================================================*/

.divider{

    display:flex;

    align-items:center;

    gap:18px;

    margin:34px 0;

}

.divider::before,

.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#E7DDD3;

}

.divider span{

    color:#8C7A6A;

    font-size:14px;

    white-space:nowrap;

}

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

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#46342A;

}

.form-group input{

    width:100%;

    height:62px;

    padding:0 22px;

    border:1px solid #E5D9CD;

    border-radius:50px;

    background:#FFFFFF;

    color:#2A140C;

    font-size:16px;

    outline:none;

    transition:all .30s ease;

}

.form-group input::placeholder{

    color:#B4A79B;

}

.form-group input:focus{

    border-color:#9E4421;

    box-shadow:0 0 0 4px rgba(158,68,33,.10);

}

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

/*.ex-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:50px;

    background:#9E4421;

    color:#FFFFFF;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:all .35s ease;

    box-shadow:0 15px 35px rgba(158,68,33,.18);

}

.ex-btn:hover{

    background:#8A3818;

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(158,68,33,.25);

}*/

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

.switch-text{

    text-align:center;

    margin-top:28px;

    color:#6C5A4C;

    font-size:16px;

}

.switch-text a{

    color:#9E4421;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.switch-text a:hover{

    color:#7B3115;

}

/*=====================================================
    TERMS
======================================================*/

.ex-auth-panel small{

    display:block;

    margin-top:24px;

    text-align:center;

    color:#9A8A7D;

    line-height:1.7;

    font-size:13px;

}

/*=====================================================
    PANEL TOGGLE
======================================================*/

.ex-auth-panel{

    display:none;

    animation:fadeSlide .45s ease;

}

.ex-auth-panel.active{

    display:block;

}

@keyframes fadeSlide{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:1199px){

    .ex-auth-card h1{

        font-size:38px;

    }

    .ex-auth-panel h2{

        font-size:36px;

    }

}

@media (max-width:991px){

    .ex-auth-page{

        padding:110px 0 70px;

    }

    .ex-auth-card{

        margin-bottom:40px;

    }

    .ex-auth-wrapper{

        max-width:100%;

    }

}

@media (max-width:767px){

    .ex-auth-page{

        padding:95px 0 50px;

    }

    .ex-auth-card{

        padding:28px;

        border-radius:24px;

    }

    .ex-auth-card h1{

        font-size:24px;

    }

    .ex-auth-card p{

        font-size:17px;

    }

    .ex-benefits li{

        font-size:16px;

    }

    .ex-auth-panel h2{

        font-size:24px;

        text-align:center;

    }

    .ex-auth-panel p{

        text-align:center;

        font-size:17px;

    }

    .ex-members{

        flex-direction:column;

        align-items:flex-start;

    }

    .google-btn{

        height:58px;

    }

    .form-group input{

        height:58px;

    }

    .ex-btn{

        height:58px;

    }

}

.password-box{

    position:relative;

}

.password-box input{

    padding-right:60px;

}

.toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    border:0;

    background:none;

    cursor:pointer;

    color:#8B7768;

    font-size:20px;

}
.h-5.w-5 {
    width: 24px;
    height: 24px;
}

/*======================================
BROWSE PAGE
======================================*/

.ex-browse-page{

    padding:140px 0 100px;

    background:#F8F2E8;

    min-height:100vh;

}

.ex-browse-top{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:28px;

}

.ex-browse-heading h1{

    font-family:"Fraunces",serif;

    font-size:58px;

    font-weight:700;

    line-height:1;

    color:#2D140D;

    margin-bottom:12px;

    letter-spacing:-1px;

}

.ex-browse-heading p{

    font-size:17px;

    color:#6E6159;

    margin:0;

}

.ex-browse-search{

    width:330px;

    position:relative;

    flex-shrink:0;

}

.ex-browse-search i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#AA5B33;

    font-size:15px;

}

.ex-browse-search input{

    width:100%;

    height:50px;

    border:1px solid #E7D9C8;

    border-radius:999px;

    background:#FFFDF9;

    padding:0 22px 0 48px;

    font-size:15px;

    outline:none;

    transition:.35s;

}

.ex-browse-search input:focus{

    border-color:#B15A30;

    box-shadow:0 0 0 4px rgba(177,90,48,.08);

}

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

.ex-category-scroll{

    display:flex;

    align-items:center;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    flex-wrap:nowrap;

    padding-bottom:8px;

    margin-bottom:35px;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

}

.ex-category-scroll::-webkit-scrollbar{

    display:none;

}

.ex-category-scroll button{

    flex:0 0 auto;

    white-space:nowrap;

    padding:4px 12px;

    border-radius:999px;

    border:1px solid #E6D9CC;

    background:#FFFDF9;

    color:#5B4638;

    font-size:13px;

    font-weight:500;

    cursor:pointer;

    transition:.35s ease;

}

.ex-category-scroll button:hover,

.ex-category-scroll button.active{

    background:#9E4421;

    border-color:#9E4421;

    color:#fff;

}

.ex-listing-grid{

    display:grid;

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

    gap:28px;

}
.ex-category-wrapper{

    width:100%;

    overflow:hidden;

    position:relative;

}
.ex-listing-card{

    background:#FFFDF9;

    border:1px solid #E7D9C8;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    position:relative;

}

.ex-listing-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 60px rgba(36,18,12,.10);

}

.ex-card-image{

    display:block;

    overflow:hidden;

}

.ex-card-image img{

    width:100%;

    height:270px;

    object-fit:cover;

    transition:.55s;

    display:block;

}

.ex-listing-card:hover img{

    transform:scale(1.06);

}

.ex-card-content{

    padding:18px 20px 20px;

}

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

.ex-card-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;

}

.ex-card-meta span{

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    color:#A15A34;

    text-transform:uppercase;

}

.ex-card-meta strong{

    font-size:15px;

    font-weight:700;

    color:#2A140C;

}

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

.ex-card-content h3{

    margin:0 0 14px;

}

.ex-card-content h3 a{

    font-family:"Fraunces",serif;

    font-size:20px;

    line-height:1.25;

    font-weight:600;

    color:#2A140C;

    text-decoration:none;

    transition:.35s;

}

.ex-listing-card:hover h3 a{

    color:#9E4421;

}

/*======================================
WANTS
======================================*/

.ex-card-wants{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:15px;

    color:#6C6057;

    font-size:13px;

    line-height:1.7;

}

.ex-card-wants i{

    color:#9E4421;

    font-size:12px;

    margin-top:2px;

    flex-shrink:0;

}

/*======================================
LOCATION
======================================*/

.ex-card-location{

    display:flex;

    align-items:center;

    gap:10px;

    padding-top:18px;

    border-top:1px solid #EFE5D8;

    color:#7B6E65;

    font-size:14px;

}

.ex-card-location i{

    color:#A44C24;

    font-size:16px;

}

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

.ex-listing-card{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}

.ex-listing-card:hover{

    border-color:#DFC8B3;

}

.ex-listing-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    pointer-events:none;

    box-shadow:0 0 0 1px transparent;

    transition:.35s;

}

.ex-listing-card:hover::after{

    box-shadow:0 0 0 1px rgba(158,68,33,.10);

}

/*======================================
LARGE DESKTOP
======================================*/

@media(max-width:1400px){

.ex-listing-grid{

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

gap:24px;

}

}

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

@media(max-width:991px){

.ex-browse-top{

flex-direction:column;

align-items:flex-start;

}

.ex-browse-search{

width:100%;

}

.ex-listing-grid{

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

gap:22px;

}

.ex-card-image img{

height:240px;

}

}

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

@media(max-width:767px){

.ex-browse-page{

padding:110px 0 60px;

}

.ex-browse-heading h1{

font-size:40px;

}

.ex-browse-heading p{

font-size:16px;

}

.ex-listing-grid{

grid-template-columns:1fr;

gap:22px;

}

.ex-card-image img{

height:230px;

}

.ex-card-content{

padding:18px;

}

.ex-card-content h3 a{

font-size:16px;

}

.ex-card-wants{

font-size:14px;

}

}

.ex-browse-search input{

transition:

border-color .3s ease,

box-shadow .3s ease,

background .3s ease;

}

.ex-browse-search input:focus{

background:#FFFFFF;

}

.ex-listing-card{

transition:

transform .4s cubic-bezier(.22,.61,.36,1),

box-shadow .4s,

border-color .4s;

}

.ex-listing-card:hover{

transform:translateY(-10px);

}

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

.ex-category-hero{

    background:#F9F4EC;

    padding:130px 0 80px;

}

.ex-category-heading{

    max-width:620px;

}

.ex-category-heading h1{
    font-family:'Fraunces',serif;
    font-size:48px;
    font-weight:600;
    line-height:1.05;
    letter-spacing:-0.8px;
    color:#2A140C;
    margin-bottom:10px;
}

.ex-category-heading p{
    font-family:'Inter',sans-serif;
    font-size:18px;
    font-weight:400;
    line-height:1.6;
    color:#6D6258;
}

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

@media(max-width:991px){

.ex-category-hero{

    padding:70px 0;

}

.ex-category-heading h1{

    font-size:38px;

}

.ex-category-heading p{

    font-size:15px;

}

}

@media(max-width:767px){

.ex-category-hero{

    padding:60px 0 50px;

}

.ex-category-heading h1{

    font-size:28px;

}

.ex-category-heading p{

    font-size:14px;

}

}

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

.ex-category-grid{

    background:#F6F1E8;

    padding:70px 0 90px;

}

.ex-category-card{

    display:block;

    background:#fff;

    border:1px solid #E7DCD1;

    border-radius:24px;

    padding:28px;

    position:relative;

    overflow:hidden;

    text-decoration:none;

    transition:all .35s cubic-bezier(.4,0,.2,1);

    box-shadow:0 4px 12px rgba(43,20,12,.05);

}

.ex-category-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#E89A2D,#A54821,#5D1E12);

}

.ex-category-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:18px;

}

.ex-category-info{

    display:flex;

    gap:16px;

}

.ex-category-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#F8EFE4;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#B45A28;

    font-size:22px;

    transition:.35s;

}

.ex-category-info h3{

    margin:0;

    font-family:'Fraunces',serif;

    font-size:30px;

    font-weight:600;

    color:#2A140C;

}

.ex-category-info span{

    display:block;

    margin-top:6px;

    font-size:14px;

    color:#7D7067;

}

.ex-category-card p{

    margin:0;

    font-size:17px;

    color:#6B625C;

    line-height:1.7;

}

.ex-category-arrow{

    font-size:26px;

    color:#6A3B20;

    transition:.35s;

}

/* Hover */

.ex-category-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 45px rgba(55,26,10,.12);

    border-color:#D8B48A;

}

.ex-category-card:hover .ex-category-arrow{

    transform:translateX(8px);

}

.ex-category-card:hover .ex-category-icon{

    transform:rotate(-10deg) scale(1.08);

    background:#B55A28;

    color:#fff;

}

/*=====================================================
    EXCHANGEZ - BROWSE CATEGORY
======================================================*/

.exz_browse_section{
    position:relative;
    padding:100px 0;
    background:#fdf7ec;
    overflow:hidden;
}

.exz_browse_heading{
    text-align:left;
    margin-bottom:60px;
}

.exz_browse_title{
    margin:0 0 12px;
    font-size:56px;
    line-height:1.1;
    font-weight:700;
    color:#2b160d;
    letter-spacing:-1px;
}

.exz_browse_subtitle{
    margin:0;
    font-size:20px;
    color:#74584b;
    line-height:30px;
}


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

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


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

.exz_browse_card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:28px 24px;
    background:#fffdf8;
    border-radius:22px;
    border:1px solid #ecd8c8;
    overflow:hidden;
    text-decoration:none;
    transition:.45s ease;
    box-shadow:0 8px 22px rgba(67,35,17,.05);
}


/* Top Border */

.exz_browse_topbar{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
}

.exz_browse_orange{
    background:#f29c38;
}

.exz_browse_red{
    background:#a7461d;
}

.exz_browse_brown{
    background:#7b2e1b;
}

.exz_browse_gold{
    background:#f0b13b;
}


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

.exz_browse_icon{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:50%;
    background:#fcf1e2;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.45s ease;
}

.exz_browse_icon i{
    font-size:24px;
    color:#b05a21;
    transition:.45s ease;
}


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

.exz_browse_content{
    flex:1;
}

.exz_browse_content h3{
    margin:0;
    color:#2b160d;
    font-size:20px;
    font-weight:700;
    line-height:1.2;
	font-family: 'Fraunces',serif;
}

.exz_browse_content span{
    display:block;
    margin:6px 0 14px;
    font-size:15px;
    color:#87695b;
}

.exz_browse_content p{
    margin:0;
    font-size:14px;
    line-height:28px;
    color:#6c5648;
}


/*=========================================
ARROW
=========================================*/

.exz_browse_arrow{
    margin-left:auto;
    color:#6f4c39;
    font-size:24px;
    transition:.45s ease;
}


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

.exz_browse_card:hover{

    transform:translateY(-10px);

    border-color:#d7904a;

    box-shadow:0 25px 55px rgba(105,55,15,.18);

}

.exz_browse_card:hover .exz_browse_arrow{

    transform:translateX(8px);

    color:#d17a2a;

}

.exz_browse_card:hover .exz_browse_icon{

    background:#b86222;

    transform:rotate(-8deg) scale(1.08);

}

.exz_browse_card:hover .exz_browse_icon i{

    color:#ffffff;

}

.exz_browse_card:hover h3{

    color:#a44d1d;

}


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

.exz_browse_card:focus{

    outline:none;

}

.exz_browse_card:focus-visible{

    box-shadow:0 0 0 4px rgba(226,152,63,.25);

}


/*=========================================
TRANSITIONS
=========================================*/

.exz_browse_card,
.exz_browse_icon,
.exz_browse_icon i,
.exz_browse_arrow,
.exz_browse_content h3{

    transition:all .40s ease;

}


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

@media (max-width:1199px){

.exz_browse_title{

font-size:48px;

}

.exz_browse_grid{

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

}

}


@media (max-width:991px){

.exz_browse_section{

padding:80px 0;

}

.exz_browse_heading{

margin-bottom:45px;

}

.exz_browse_title{

font-size:42px;

}

.exz_browse_content h3{

font-size:18px;

}

}


@media (max-width:767px){

.exz_browse_grid{

grid-template-columns:1fr;

}

.exz_browse_title{

font-size:34px;

}

.exz_browse_subtitle{

font-size:18px;

line-height:28px;

}

.exz_browse_card{

padding:22px;

}

}


@media (max-width:575px){

.exz_browse_section{

padding:60px 0;

}

.exz_browse_title{

font-size:30px;

}

.exz_browse_card{

gap:14px;

}

.exz_browse_icon{

width:48px;

height:48px;

flex:0 0 48px;

}

.exz_browse_icon i{

font-size:20px;

}

.exz_browse_content h3{

font-size:16px;

}

.exz_browse_content p{

font-size:13px;

line-height:24px;

}

.exz_browse_arrow{

font-size:20px;

}

}

/*=========================================================
    EXCHANGEZ - HOW IT WORKS
=========================================================*/

.exz_steps_section{
    position:relative;
    padding:110px 0;
    background:#fbf4e8;
    overflow:hidden;
}

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

.exz_steps_heading{
    max-width:760px;
    margin:0 auto 90px;
    text-align:center;
}

.exz_steps_badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    background:#fff4e8;
    border:1px solid #efd5bc;
    border-radius:50px;
    color:#b65f2f;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.exz_steps_title{
    margin:0;
    font-size:68px;
    line-height:1.08;
    font-weight:700;
    color:#2d170f;
    letter-spacing:-1px;
}

.exz_steps_title span{
    color:#b45f2c;
}

.exz_steps_desc{
    max-width:640px;
    margin:24px auto 0;
    font-size:20px;
    line-height:34px;
    color:#6d5649;
}

/*==================================
ROWS
==================================*/

.exz_steps_row{
    display:grid;
    grid-template-columns:1fr 520px;
    align-items:center;
    gap:90px;
    margin-bottom:100px;
}

.exz_steps_reverse{
    grid-template-columns:520px 1fr;
}

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

.exz_steps_number{
    font-size:72px;
    line-height:1;
    font-weight:300;
    color:#e2b798;
    margin-bottom:10px;
}

.exz_steps_content h3{
    margin:0 0 18px;
    font-size:52px;
    line-height:1.15;
    color:#2d170f;
    font-weight:700;
}

.exz_steps_content p{
    margin:0 0 25px;
    color:#72584a;
    font-size:19px;
    line-height:34px;
}

.exz_steps_content ul{
    padding:0;
    margin:0;
    list-style:none;
}

.exz_steps_content ul li{
    position:relative;
    padding-left:30px;
    margin-bottom:14px;
    color:#6c5549;
    font-size:17px;
    line-height:28px;
}

.exz_steps_content ul li:before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid #c36b33;
}

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

.exz_steps_card{

    position:relative;

    padding:38px;

    border-radius:24px;

    overflow:hidden;

    color:#fff;

    transition:.45s;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.exz_steps_gold{

    background:linear-gradient(135deg,#f5b63b,#e6872a);

}

.exz_steps_red{

    background:linear-gradient(135deg,#a23d18,#7f2308);

}

.exz_steps_orange{

    background:linear-gradient(135deg,#cf6c28,#a84d1d);

}

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

.exz_steps_icon{

    font-size:48px;

    margin-bottom:30px;

}

/*==================================
MOCKUP
==================================*/

.exz_steps_mockup{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.exz_steps_line{

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

    color:#5d402e;

    border-radius:30px;

    padding:12px 18px;

    font-size:15px;

    font-weight:500;

}

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

.exz_steps_card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.exz_steps_card:hover .exz_steps_icon{

    transform:rotate(-10deg) scale(1.12);

}

.exz_steps_icon{

    transition:.4s;

}

.exz_steps_content h3{

    transition:.35s;

}

.exz_steps_row:hover h3{

    color:#b45f2c;

}

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

@media(max-width:1400px){

.exz_steps_title{

font-size:58px;

}

.exz_steps_content h3{

font-size:44px;

}

}

@media(max-width:1199px){

.exz_steps_row{

grid-template-columns:1fr;

gap:45px;

}

.exz_steps_reverse{

grid-template-columns:1fr;

}

.exz_steps_reverse .exz_steps_card{

order:2;

}

.exz_steps_reverse .exz_steps_content{

order:1;

}

.exz_steps_card{

max-width:620px;

margin:auto;

}

}

@media(max-width:991px){

.exz_steps_section{

padding:90px 0;

}

.exz_steps_title{

font-size:48px;

}

.exz_steps_content h3{

font-size:38px;

}

.exz_steps_number{

font-size:58px;

}

.exz_steps_desc{

font-size:18px;

line-height:30px;

}

}

@media(max-width:767px){

.exz_steps_heading{

margin-bottom:60px;

}

.exz_steps_title{

font-size:38px;

}

.exz_steps_content h3{

font-size:30px;

}

.exz_steps_number{

font-size:50px;

}

.exz_steps_card{

padding:25px;

}

.exz_steps_row{

margin-bottom:70px;

}

}

@media(max-width:575px){

.exz_steps_section{

padding:70px 0;

}

.exz_steps_title{

font-size:32px;

line-height:1.2;

}

.exz_steps_content h3{

font-size:26px;

}

.exz_steps_desc{

font-size:16px;

line-height:28px;

}

.exz_steps_content p{

font-size:16px;

line-height:28px;

}

.exz_steps_content ul li{

font-size:15px;

}

.exz_steps_icon{

font-size:38px;

}

.exz_steps_line{

font-size:13px;

padding:10px 14px;

}

}

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

.exz_trust_section{
    padding:100px 0;
    background:#fbf4e8;
    border-top:1px solid #eddcc7;
}

.exz_trust_heading{
    text-align:center;
    margin-bottom:60px;
}

.exz_trust_title{
    margin:0;
    font-size:56px;
    font-weight:700;
    color:#2d170f;
    line-height:1.15;
}

.exz_trust_subtitle{
    margin-top:15px;
    font-size:18px;
    color:#7a6255;
}

.exz_trust_card{

    background:#ffffff;

    border:1px solid #ead8c4;

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.40s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.exz_trust_card:hover{

    transform:translateY(-10px);

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

    border-color:#d68c47;

}

.exz_trust_icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff5ea;

    color:#b86222;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

    transition:.40s;

}

.exz_trust_card:hover .exz_trust_icon{

    background:#b86222;

    color:#fff;

    transform:rotate(-8deg);

}

.exz_trust_card h3{

    font-size:30px;

    color:#2d170f;

    margin-bottom:15px;

    font-weight:700;

}

.exz_trust_card p{

    margin:0;

    color:#6d5649;

    line-height:30px;

    font-size:17px;

}

/*=========================================================
FAQ
=========================================================*/

.exz_faq_section{

    padding:110px 0;

    background:#fffaf2;

}

.exz_faq_heading{

    text-align:center;

    margin-bottom:60px;

}

.exz_faq_heading h2{

    font-size:56px;

    color:#2d170f;

    margin:0;

}

.exz_faq_wrapper{

    max-width:900px;

    margin:auto;

}

.exz_faq_item{

    background:#fff;

    border:1px solid #ead7c2;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

    transition:.35s;

}

.exz_faq_item:hover{

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.exz_faq_question{

    width:100%;

    padding:28px 35px;

    border:none;

    background:none;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:22px;

    font-weight:600;

    color:#2d170f;

    text-align:left;

}

.exz_faq_question span{

    font-size:26px;

    color:#b86222;

    transition:.35s;

}

.exz_faq_item.active .exz_faq_question span{

    transform:rotate(45deg);

}

.exz_faq_answer{

    display:none;

    padding:0 35px 30px;

}

.exz_faq_item.active .exz_faq_answer{

    display:block;

}

.exz_faq_answer p{

    margin:0;

    font-size:17px;

    color:#6d5649;

    line-height:30px;

}

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

.exz_cta_section{

    padding:100px 0 120px;

    background:#fbf4e8;

}

.exz_cta_box{

    max-width:900px;

    margin:auto;

    background:linear-gradient(135deg,#b14f21,#8e3415);

    border-radius:30px;

    padding:80px 60px;

    text-align:center;

    color:#fff;

    box-shadow:0 25px 70px rgba(0,0,0,.18);

}

.exz_cta_box h2{

    margin:0;

    font-size:60px;

    font-weight:700;

}

.exz_cta_box p{

    margin:20px 0 35px;

    font-size:20px;

    opacity:.92;

}

.exz_cta_btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 36px;

    background:#fff;

    color:#9c4218;

    text-decoration:none;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.exz_cta_btn:hover{

    transform:translateY(-5px);

    background:#f8efe5;

    color:#8d3615;

}


.exz_cta_btn i{

    transition:.35s;

}

.exz_cta_btn:hover i{

    transform:translateX(6px);

}

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

@media(max-width:991px){

.exz_trust_title,
.exz_faq_heading h2,
.exz_cta_box h2{

font-size:42px;

}

.exz_cta_box{

padding:60px 35px;

}

}

@media(max-width:767px){

.exz_trust_section,
.exz_faq_section,
.exz_cta_section{

padding:70px 0;

}

.exz_trust_title,
.exz_faq_heading h2,
.exz_cta_box h2{

font-size:34px;

}

.exz_faq_question{

font-size:18px;

padding:22px;

}

.exz_faq_answer{

padding:0 22px 22px;

}

.exz_cta_box{

padding:50px 25px;

border-radius:20px;

}

.exz_cta_box p{

font-size:17px;

}

.exz_cta_btn{

font-size:16px;

padding:15px 28px;

}

}

@media(max-width:575px){

.exz_trust_card{

padding:25px;

}

.exz_trust_card h3{

font-size:24px;

}

.exz_trust_card p{

font-size:15px;

line-height:26px;

}

.exz_cta_box h2{

font-size:28px;

}

}

/*=========================================================
    STORIES & GUIDES
=========================================================*/

.exz_story_section{
    position:relative;
    padding:110px 0;
    background:#fcf5e9;
    overflow:hidden;
}

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

.exz_story_heading{
    max-width:100%;
    margin:0 auto 70px;
}

.exz_story_badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:50px;
    background:#fff0df;
    color:#b45c2b;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

.exz_story_badge i{
    font-size:14px;
}

.exz_story_title{
    margin:0;
    font-size:48px;
    line-height:1.08;
    font-weight:700;
    color:#2d170f;
    letter-spacing:-1px;
	font-family: "Fraunces",ui-serif,Georgia,serif;
}

.exz_story_title span{
    color:#b45c2b;
}

.exz_story_subtitle{
    max-width:620px;
    margin-top:18px;
    font-size:21px;
    line-height:34px;
    color:#6d5649;
}

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

.exz_story_featured{

    background:#fff;

    border:1px solid #ead8c4;

    border-radius:34px;

    overflow:hidden;

    margin-bottom:45px;

    box-shadow:0 18px 40px rgba(0,0,0,.05);

    transition:.45s;

}

.exz_story_featured:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 70px rgba(0,0,0,.10);

}

.exz_story_featured_image{

    position:relative;

    min-height:420px;

    background:linear-gradient(135deg,#df7d28,#af4a1c);

}

.exz_story_category{

    position:absolute;

    top:35px;

    left:35px;

    display:inline-block;

    padding:9px 18px;

    border-radius:50px;

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

    color:#2d170f;

    font-size:14px;

    font-weight:600;

}

.exz_story_featured_content{

    padding:60px;

}

.exz_story_meta{

    display:block;

    color:#8d725d;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.exz_story_featured_content h3{

    font-size:44px;
	font-family: "Fraunces",ui-serif,Georgia,serif;

    line-height:1.1;

    margin:0 0 25px;

    color:#2d170f;

    font-weight:700;

}

.exz_story_featured_content p{

    margin:0 0 35px;

    font-size:20px;

    line-height:34px;

    color:#6d5649;

}

.exz_story_btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#b45c2b;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.exz_story_btn:hover{

    color:#8d3d16;

}

.exz_story_btn i{

    transition:.35s;

}

.exz_story_btn:hover i{

    transform:translateX(8px);

}

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

.exz_story_card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #ead8c4;

    height:100%;

    transition:.4s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.exz_story_card:hover{

    transform:translateY(-10px);

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

}

.exz_story_thumb{

    height:240px;

}

.exz_story_thumb_red{

    background:linear-gradient(135deg,#a3411a,#711d08);

}

.exz_story_thumb_gold{

    background:linear-gradient(135deg,#f7bf38,#eb8e2d);

}

.exz_story_thumb_orange{

    background:linear-gradient(135deg,#f1c47c,#b76437);

}

.exz_story_body{

    padding:30px;

}

.exz_story_body h4{

    margin:16px 0;

    font-size:26px;

    line-height:1.2;

    color:#2d170f;

    font-weight:700;
	font-family: "Fraunces",ui-serif,Georgia,serif;

}

.exz_story_body p{

    margin:0;

    color:#6d5649;

    font-size:17px;

    line-height:30px;

}

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

.exz_story_card:hover .exz_story_thumb{

    transform:scale(1.05);

}

.exz_story_thumb{

    transition:.45s;

}

.exz_story_card:hover h4{

    color:#b45c2b;

}

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

@media(max-width:1200px){

.exz_story_title{

font-size:36px;

}

.exz_story_featured_content h3{

font-size:36px;

}

}

@media(max-width:991px){

.exz_story_section{

padding:90px 0;

}

.exz_story_title{

font-size:28px;

}

.exz_story_featured_image{

min-height:300px;

}

.exz_story_featured_content{

padding:45px;

}

.exz_story_featured_content h3{

font-size:28px;

}

}

@media(max-width:767px){

.exz_story_heading{

margin-bottom:50px;

}

.exz_story_title{

font-size:22px;

}

.exz_story_subtitle{

font-size:18px;

line-height:30px;

}

.exz_story_featured_content{

padding:30px;

}

.exz_story_featured_content h3{

font-size:23px;

}

.exz_story_thumb{

height:190px;

}

.exz_story_body h4{

font-size:22px;

}

}

@media(max-width:575px){

.exz_story_section{

padding:70px 0;

}

.exz_story_title{

font-size:18px;

}

.exz_story_featured{

border-radius:20px;

}

.exz_story_featured_image{

min-height:220px;

}

.exz_story_category{

left:20px;

top:20px;

padding:7px 15px;

font-size:13px;

}

.exz_story_featured_content{

padding:25px;

}

.exz_story_featured_content h3{

font-size:18px;

}

.exz_story_featured_content p{

font-size:16px;

line-height:28px;

}

.exz_story_body{

padding:22px;

}

.exz_story_body h4{

font-size:20px;

}

.exz_story_body p{

font-size:15px;

line-height:26px;

}

}

.story-hero{

background:var(--primary);
padding:130px 0;
position:relative;
overflow:hidden;

}

.story-hero::before{

content:"";
position:absolute;
width:700px;
height:700px;
background:rgba(255,255,255,.06);
border-radius:50%;
right:-250px;
top:-220px;

}

.story-hero::after{

content:"";
position:absolute;
width:500px;
height:500px;
background:rgba(255,255,255,.04);
left:-180px;
bottom:-250px;
border-radius:50%;

}

.story-hero .container{

position:relative;
z-index:2;
max-width:850px;

}

.back-btn{

display:inline-flex;
align-items:center;
gap:10px;
font-size:15px;
font-weight:600;
color:#fff;
margin-bottom:40px;
transition:.35s;

}

.back-btn:hover{

transform:translateX(-8px);
opacity:.9;

}

.hero-meta{

display:flex;
align-items:center;
gap:14px;
color:#FFE3D7;
font-size:15px;
margin-bottom:25px;

}

.hero_title_1{

font-family:"Fraunces",ui-serif,Georgia,serif;
font-size:48px;
font-weight:400;
line-height:1.08;
color:#fff;
margin-bottom:35px;
max-width:780px;

}

.hero-description{

font-size:22px;
line-height:1.8;
color:#FFE6DB;
max-width:760px;

}

@media(max-width:991px){

.story-hero{

padding:100px 0;

}

.hero_title_1{

font-size:52px;

}

.hero-description{

font-size:19px;

}

}

@media(max-width:767px){

.story-hero{

padding:80px 0;

}

.hero_title_1{

font-size:40px;

}

.hero-description{

font-size:18px;

}

.hero-meta{

flex-wrap:wrap;

}

}

@media(max-width:575px){

.hero_title_1{

font-size:34px;

}

.hero-description{

font-size:17px;

}

}

/*======================================
Story Content
======================================*/

.story-content{

    background:#F7F3EC;

}

.story-article{

    max-width:760px;
    margin:auto;

}

.story-article p{

    font-size:20px;
    line-height:2;
    color:#40342D;
    margin-bottom:38px;

}

.story-article .lead-paragraph{

    position:relative;

}

.dropcap{

    float:left;

    font-family:"Fraunces",ui-serif,Georgia,serif;

    font-size:88px;

    line-height:.82;

    margin-right:16px;

    margin-top:10px;

    color:#BF5A35;

    font-weight:400;

}

.story-article strong{

    font-weight:600;

}

.story-article a{

    color:#BF5A35;

    font-weight:600;

}

.story-article a:hover{

    text-decoration:underline;

}

.section-divider{

    width:100%;

    max-width:1180px;

    margin:40px auto 80px;

    border:none;

    height:1px;

    background:#DED4CB;

}

@media (max-width:991px){

.story-content{

padding:70px 0;

}

.story-article{

max-width:100%;

}

.story-article p{

font-size:19px;

}

.dropcap{

font-size:72px;

}

}

@media (max-width:767px){

.story-content{

padding:60px 0;

}

.story-article p{

font-size:18px;

line-height:1.9;

}

.dropcap{

font-size:58px;

margin-right:12px;

margin-top:6px;

}

}

@media (max-width:575px){

.story-article p{

font-size:17px;

}

.dropcap{

font-size:48px;

}

}

/*=====================================
KEEP READING
======================================*/

.keep-reading{

padding:100px 0 120px;

background:#F7F3EC;

}

.section-heading{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:55px;

}

.section-heading h2{

font-family:"Fraunces",ui-serif,Georgia,serif;

font-size:54px;

font-weight:400;

color:#2F261F;

margin:0;

}

.view-all{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

color:#BF5A35;

}

.view-all span{

transition:.35s;

}

.view-all:hover span{

transform:translateX(6px);

}

.categories{

    padding:90px 0;
}

.heading-row{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:45px;
    gap:20px;
}

.sub-title{

    display:block;
    color:#B3683B;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.heading-row h2{

    font-size:62px;
    line-height:1.1;
    font-weight:700;
}

.all-link{

    color:#B3683B;
    font-size:20px;
    font-weight:600;
    transition:.35s;
}

.all-link:hover{

    transform:translateX(6px);
}

.category-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.category-card{

    background:#fff;
    border:1px solid #E8D7C8;
    border-radius:28px;
    padding:20px 22px;

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

    transition:.35s ease;
}

.category-card:hover{

    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(96,52,28,.08);
    border-color:#C97D4B;
}

.icon{

    width:46px;
    height:46px;
    border-radius:50%;
    background:#F8F1E7;

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

    color:#B3683B;
    font-size:20px;

    transition:.35s;
}

.category-card:hover .icon{

    background:#B3683B;
    color:#fff;
    transform:rotate(-10deg) scale(1.08);
}

.category-card span{

    color:#2F180F;
    font-size:26px;
    font-weight:600;
}

/*-------------------
Tablet
--------------------*/

@media(max-width:992px){
.section-heading h2{font-size:30px;}
.heading-row{

    flex-direction:column;
    align-items:flex-start;
}

.heading-row h2{

    font-size:48px;
}

.category-grid{

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

.category-card span{

    font-size:22px;
}

}

/*-------------------
Mobile
--------------------*/

@media(max-width:600px){
.section-heading h2{font-size:22px;}
.categories{

    padding:60px 0;
}

.heading-row h2{

    font-size:38px;
}

.category-grid{

    grid-template-columns:1fr;
}

.category-card{

    padding:18px;
}

.category-card span{

    font-size:20px;
}

.icon{

    width:42px;
    height:42px;
    font-size:18px;
}

.all-link{

    font-size:18px;
}

}