@charset "UTF-8"; 

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap'); 

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root { 

    /*COLORS*/

    --background-main: #121417; 
    --background-soft: #1a1d21; 
    --background-card: #20242a;
    
    --beige-main: #f5f1ea;
    --beige-soft: #ebe4d8;
    --beige-dark: #d8cfc0;

    --cream-light: #faf7f2;
    --warm-white: #f8f5ef;

    --gold: #c6a46c; 
    --gold-soft: #a88b5c; 
    --gold-light: #e0c48a; 
    
    --blue-deep: #1e3a8a; 
    --red-accent: #b91c1c; 
    
    --text-main: #f5f5f5; 
    --text-soft: #b0b3b8; 

    --text-dark: #1b1b1b;
    --text-brown: #5f5648;

    --border-light: rgba(255, 255, 255, 0.08);
    --border-soft: rgba(255,255,255,0.04);
    --gold-border: 1px solid rgba(198,164,108,0.25);
    --beige-border: 1px solid rgba(198,164,108,0.18);

    --overlay-dark: rgba(0,0,0,0.72);
    --overlay-light: rgba(0,0,0,0.3);
    --overlay-beige:
    linear-gradient(
        to bottom,
        rgba(245,241,234,0.88),
        rgba(245,241,234,0.96)
    );

    /*TYPOGRAPHY*/

    --font-title: "Cinzel", serif;
    --font-body: "Inter", sans-serif;

    --title-big: 5.5rem;
    --title-medium: 3rem;
    --title-small: 1.5rem;

    --text-large: 1.15rem;
    --text-normal: 1rem;
    --text-small: 0.9rem;

    --letter-spacing-title: 2px;

    /*SPACING*/

    --section-padding: 9rem;
    --container-width: 1280px;

    --content-width: 550px;


    --card-padding: 2.5rem;

    --button-padding: 1rem 2.2rem;

    /*EFFECTS*/
    
    --radius: 14px;
    --radius-small: 8px;
    --radius-large: 24px;

    --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);
    --shadow-medium: rgba(0,0px,60px,0.35);
    --shadow-heavy: rgba(0,30px,100px,0.45);

    --gradient-dark:
    linear-gradient(
    to right,
    rgba(0,0,0,0.88),
    rgba(0,0,0,0.3)
);

    --gradient-soft:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.75)
);

--gradient-beige:
    linear-gradient(
        135deg,
        #faf7f2,
        #ebe4d8
    );

    --blur-light: blur(8px);
    --blur-medium: blur(14px);
    --blur-heavy: blur(24px);

    --gold-glow: 0 0 30px rgba(198,164,108,0.08);

    --gold-strong: #c3bf76;

    --transition-slow: 1s ease;
    --transition-medium: 0.6s ease;
    --transition-fast: 0.3s ease;

    --luxury-transition: cubic-bezier(0.19,1,0.22,1);
    
} 

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

html {
    scroll-behavior: smooth;
}


body { 
    font-family: "Inter", sans-serif; 

    color: var(--text-main);
    
    background: linear-gradient(to bottom, rgba(0,0,0,0.2),
    rgba(0,0,0,0.9)
    );

    background-color: var(--background-main);
    line-height: 1.7; 

    overflow-x: hidden;
    position: relative;
} 

body::before {
    content: "";
    position: fixed;

    inset: 0;

    background-image: radial-gradient(rgba(255,255,255,0.08) 0.5px,
    transparent 0.05px
    );

    background-size: 4px 4px;

    opacity: 0.03;

    pointer-events: none;
    
    z-index: 9999;
}

h1, h2, h3 { 
    font-family: "Cinzel", serif; 
    letter-spacing: var(--letter-spacing-title); 
    line-height: 1.1;
    font-weight: 600;
} 

p { 
    color: var(--text-soft); 
    font-size: var(--text-normal);
} 

a { 
    text-decoration: none; 
    color: inherit; 
}

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

section {
    padding: var(--section-padding) 0;
    position: relative;
}

header {
    width: 100%;
    position: sticky;

    top: 0px;
    padding: 10px 0px;
    margin-bottom: 0%;

    z-index: 1000;

    background: rgba(0,0,0, 0.45);
    backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.logo {
    display: flex;
    flex-direction: row;
    gap: 12px
}
.logo img {
    width: 150%;
    max-width: 100px;
    height: 100px;
}

.logo h1 {
    font-size: 1.7rem;
    color: var(--gold);
    letter-spacing: 3px;

    margin-top: 50px;
}

.navbar {
    display: flex;
    justify-content: space-between;

    align-items: center;
    min-height: 95px;
}

.nav-container {
    width: 90%;
    max-width: 1200px;

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

    padding: 18px 0px;
}


.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-menu a {
    position: relative;
    font-size: 0.88rem;
    text-transform: uppercase;

    letter-spacing: 1px;
    transition: var(--transition-medium);
}

.nav-menu a:hover {
    color: var(--gold);
}

.nav-menu a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--gold);

    transition: var(--transition-medium);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu .btn-nav::after {
    display: none;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 140%;
    left: 0;
    background: rgba(10, 10, 10, 0.99);
    list-style: none;
    min-width: 200px;

    border: var(--gold-border);

    backdrop-filter: var(--border-light);
    padding: 10px 0px;
    border-radius: var(--radius);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition-medium);
}

.dropdown-menu li {
    padding: 14px 22px;

    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dropdown-menu li:hover {
    background: rgba(255, 255, 255, 0.03);
}

@media (hover: hover) and (pointer:fine) {

    .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

}

#menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--gold);

    transition: var(--transition-fast);
}

.menu-icon:hover {
    color: var(--gold-light);
}

.btn-nav {
    display: inline-block;
    padding: 8px 18px;
    line-height: 1;
    margin-top: 4.5px;

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

    transform: translateY(-3px);

    color: var(--gold);
    box-shadow: var(--gold-glow);
}

.btn-nav:hover {
    border: var(--gold-border);
    color: var(--gold);
    box-shadow: var(--gold-glow);
}

.nav-menu .btn-nav:hover {
    color: #fff7e8;

    border-color: var(--gold);

    box-shadow:
        0 0 8px rgba(198,164,108,0.55),
        0 0 18px rgba(198,164,108,0.35),
        0 0 30px rgba(198,164,108,0.18);

    text-shadow:
        0 0 6px rgba(255,230,180,0.9);

    background: rgba(198,164,108,0.05);

    transform: translateY(-3px) scale(1.03);
}

.btn-primary, 
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: var(--button-padding);

    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.82rem;

    transition: all var(--transition-medium);

    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, 
    var(--gold), 
    var(--gold-soft)
    );
    color: #111;

    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);

    background: linear-gradient(
        135deg,
        #e2c48a,
        #c79b52
    );

    color: #000;

    box-shadow:
        0 0 10px rgba(198,164,108,0.35),
        0 0 24px rgba(198,164,108,0.18);

    filter: brightness(1.08);
    
}

.btn-secondary {
    border: 1px solid rgba(255,255,255, 0.18);
    color: var(--text-main);
}

.btn-secondary:hover {
    color: #fff7e8;

    border-color: var(--gold);

    box-shadow:
        0 0 8px rgba(198,164,108,0.55),
        0 0 18px rgba(198,164,108,0.35),
        0 0 30px rgba(198,164,108,0.18);

    text-shadow:
        0 0 6px rgba(255,230,180,0.9);

    background: rgba(198,164,108,0.05);

    transform: translateY(-3px) scale(1.03);
}

/*HERO SECTION*/

.hero {
    min-height: 92vh;
    display: flex;
    position: relative;
    overflow: hidden;

    flex-direction: column;

    justify-content: center;

    padding-top: 8rem;

    background: var(--gradient-dark),
    url('images/background.png');

    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

.hero h1 {
    font-size: var(--title-big);
    max-width: 1000px;
    padding-left: 1rem;

    line-height: 5rem;

    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0px 10px 30px rgba(0,0,0,0.5)
}

.highlight {
    color: var(--gold);
}

.hero p {
    font-size: var(--text-large);

    max-width: var(--container-width);
    margin: 1rem;

    color: #dddddd;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    margin: 3rem;
}

.why {
    position: relative;

    background: var(--warm-white);

    padding: 4.5rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.why::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

.why .section-title {
    color: var(--text-dark);

    text-align: center;

    margin-bottom: 3.5rem;

    font-size: 2rem;
}

.why-grid {
    display: grid;

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

    align-items: center;
}

.why-item {
    position: relative;
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 1.5rem, 2rem;

    transition: var(--transition-fast);
}

.why-item:hover {
    transform: translateY(-3px);
}

.why-item:not(:last-child)::after {
    content: "";

    position: absolute;
    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 1px;
    height: 80%;

    background: rgba(198,164,108,0.2);
}

.why-item img {
    width: 38px;
    height: 38px;

    object-fit: contain;

    margin-bottom: 1.3rem;

    opacity: 0.9;

    transition: var(--transition-fast);
}

.why-item:hover img {
    transform: scale(1.05);
}

.why-item span {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-dark);

    letter-spacing: 1.4px;
    line-height: 1.6;

    text-transform: uppercase;
}

/*ABOUT SECTION*/

.about-short {
    background: #050505;

    border-top: var(--gold-border);
    border-bottom: var(--gold-border);

    padding: 0;
}

.about-wrapper {
    display: grid;
    grid-template-columns: 52% 48%;
    align-items: stretch;
}

.about-content {
    display: flex;
    align-items: center;
    position: relative;

    padding: 6rem 7rem 6rem 4rem;
}

.about-content .container {
    max-width: 520px;
}

.about-short .section-title {
    text-align: left;
    font-size: 2.3rem;

    margin-bottom: 2rem;

    color: var(--text-main);
}

.about-content .section-title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -14px;

    width: 60px;
    height: 2px;

    background: var(--gold);
}

.about-content p {
    max-width: 540px;

    font-size: 1rem;
    line-height: 2;

    margin-bottom: 3rem;
    color: var(--text-soft);
}

.about-img {
    position: relative;
    min-height: 650px;
    overflow: hidden;
}

.about-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
    object-position: center center;

    transform: scale(0.9);

    filter: 
    grayscale(35%)
    brightness(0.9)
    contrast(1.1);
}

.about-img::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
    to left,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.45)
    );
}

.stats-grid {
    display: flex;
    gap: 3rem;

    margin-top: 1rem;
    margin-right: 2rem;
    
}

.stat {
    display: flex;
    align-items: center;
    min-width: auto;

    gap: 1rem;
}

.stat img {
    width: 20px;
    height: 22px;

    object-fit: contain;
    object-position: center;

    border: 1px solid var(--gold);
    border-radius: 42%;
    padding: 10px;
    margin: 1.4rem auto 1.8rem;

    display: block;

    box-sizing: content-box;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(5px);
}

.stat h3 {
    font-size: 2.8rem;
    color: var(--gold);

    margin-bottom: 0.4rem;
    line-height: 1;
}

.stat p {
    margin: 0;
    color: var(--text-main);

    font-size: 0.78rem;
    max-width: 120px;

    text-transform: uppercase;
    letter-spacing: 1.5px;
    
}

/*SERVICES*/

.services {
    background: #050505;

    border-bottom: var(--gold-border);

    padding: 6rem 0;
}

.services .section-title {
    position: relative;
    text-align: center;
    color: var(--text-main);

    font-size: 2.4rem;
    margin-bottom: 4.5rem;
}

.services .section-title::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: -14px;

    transform: translateX(-50%);

    width: 70%;
    height: 2px;

    background: var(--gold);
}
.services::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 78%;
    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(198,164,108,0.9),
        transparent
    );

    box-shadow:
        0 0 12px rgba(198,164,108,0.35),
        0 0 22px rgba(198,164,108,0.18);
}

.services::after {
    content: "";

    position: absolute;

    top: -100px;
    left: 0;

    width: 100%;
    height: 100px;

    background: linear-gradient(
        to bottom,
        transparent,
        #050505
    );

    pointer-events: none;
}

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

.service-card {
    position: relative;

    min-height: 430px;
    padding: 3rem 2rem;

    border: 1px solid rgba(198,164,108,0.35);

    overflow: hidden;
    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    

    transition: var(--transition-medium);

    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

.service-card:hover {
    border: var(--gold-border);
    color: var(--gold);

    box-shadow:
        0 0px 30px rgba(198,164,108,0.55),
        0 0px 18px rgba(198,164,108,0.35),
        0 0 30px rgba(198,164,108,0.18);

    transform: translateY(-10px);
    border-color: var(--gold);
}

.service-card > * {
    position: relative;
    z-index: 2;
}

.service-card img {
    width: 20px;
    height: 22px;

    display: flex;

    object-fit: contain;

    padding: 10px;

    border: 1px solid var(--gold);
    border-radius: 42%;

    box-sizing: content-box;
    margin: 0 auto 1.5rem auto;

    background: rgba(0,0,0, 0.45);
    backdrop-filter: blur(5px);
}

.service-card h3 {
    font-size: 1.4rem;
    
    text-align: center;
    color: var(--gold);

    margin-bottom: 1rem;
    line-height: 1.4;
}

.service-card p {
    color: var(--text-soft);

    font-size: 0.95rem;
    line-height: 1.9;
}

.service-card-1 {
    background-image: url('images/grid-1.png');
}

.service-card-2 {
    background-image: url('images/grid-2.png');
}

.service-card-3 {
    background-image: url('images/grid-3-bk.png');

}

.service-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.35) 35%,
        rgba(0,0,0,0.78) 65%,
        rgba(0,0,0,0.96) 100%
    );

    z-index: 1;
}

.service-cta {
    display: flex;
    justify-content: center;

    margin-top: 5rem;
}

.service-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 1rem 3.5rem;

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

    background: transparent;
    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 500;

    position: relative;
    overflow: hidden;

    transition: var(--transition-medium);
}

.service-cta .btn-primary:hover {
    background: rgba(198,164,108,0.06);

    color: #fff7e8;

    border-color: var(--gold);

    transform: translateY(-3px) scale(1.02);

    box-shadow:
        0 0 8px rgba(198,164,108,0.45),
        0 0 18px rgba(198,164,108,0.28),
        0 0 28px rgba(198,164,108,0.12);

    text-shadow:
        0 0 6px rgba(255,230,180,0.75);
}

/*QUOTE*/

.quote-1 {
    position: relative;
    display: flex;

    padding: 5rem 0;

    background-image: url('images/quote-img.png');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

.quote-1::before {
    content: "";

    position: absolute;

    top: -100px;
    left: 0;

    width: 100%;
    height: 100px;

    background: linear-gradient(
        to bottom,
        transparent,
        #050505
    );

    z-index: 2;
    pointer-events: none;
}

.quote-1::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 78%;
    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(198,164,108,0.9),
        transparent
    );

    box-shadow:
        0 0 12px rgba(198,164,108,0.35),
        0 0 22px rgba(198,164,108,0.18);

    z-index: 3;
}

.quote-1 .container {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
}

.quote-1-content {
    max-width: 760px;

    display: flex;
    align-items: flex-start;
    gap: 1.5rem;

}

.quote-1 img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}

.quote-1 h2 {
    color: var(--gold);

    font-size: 2rem;
    line-height: 1.5;
    font-weight: 500;

    max-height: 850px;
    text-align: right;
}

.quote-end-color {
    color: var(--gold);
}

/*CTA CONTACT*/

.contact-cta {
    background: var(--gradient-beige);

    padding: 3.5rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}
.contact-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.contact-cta-text {
    color: var(--text-dark);

    font-size: 2.4rem;
    margin-bottom: 0.7rem;
}

.contact-cta-text p {
    color: var(--text-brown);

    font-size: 1rem;
    line-height: 1.7;
    padding-top: 5px;
    text-align: center;
}

.contact-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 1.2rem 3.8rem;

    background-color: var(--gold);
    color: #fff;

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

    text-transform: uppercase;
    letter-spacing: 2px;

    font-size: 0.85;
    font-weight: 500;

    transition: var(--transition-medium);
}

.contact-cta .btn-primary:hover {
    background: transparent;
    color: var(--gold);

    box-shadow:
        0 0 8px rgba(212, 175, 55, 0.6),
        0 0 20px rgba(212, 175, 55, 0.5),
        0 0 40px rgba(212, 175, 55, 0.3);
}

/*LOCATION*/

.location {
    background: #050505;
    padding: 6rem 0;

    border-top: var(--gold-border);
}

.location-wrapper {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1rem;
    
    align-items: stretch;
}

.location .container {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 3rem;
    align-items: stretch;
}

.location-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location .section-title {
    position: relative;
    color: var(--gold);

    font-size: 2.2rem;
    margin-bottom: 2.5rem;
}

.location .section-title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -12px;

    width: 60px;
    height: 2px;

    background: var(--gold);
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.location-item span {
    width: 22px;
    height: 22px;

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

    flex-shrink: 0;
}

.location-item img {
    width: 20px;
    height: 20px;

    object-fit: contain;

}

.location-item p {
    color: var(--text-soft);
    font-size: 1rem;

    line-height: 1.7;
}

.location-item strong {
    color: var(--text-main);
    font-weight: 500;
}

.map-placeholder {
    overflow: hidden;

    border: 1px solid rgba(198,164,108,0.03);
    min-height: 260px;
    position: relative;
}

.map-placeholder iframe {
    width: 100%;
    height: 100%;

    filter: 
    grayscale(100%)
    brightness(0.55)
    contrast(1.1);
}

/*ABOUT PAGE*/
/*ABOUT PAGE HERO*/

.page-hero {
    position: relative;
    min-height: 78vh;

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

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    ),
    url('images/hero-about2.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.page-hero::after {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 100%;
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero h1 {
    font-size: 5.5rem;
    color: var(--text-main);

    margin-bottom: 1rem;
    line-height: 1.1;

    animation: forwards 1.2s ease;
}

.page-hero h2 {
    font-size: 5.5rem;
    color: var(--gold);

    line-height: 0.2;
    margin-bottom: 3rem;
}

.page-hero p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.2rem;
    color: #f0f0f0;

    animation: forwards 1.6s ease;
}

.about-intro {
    background: var(--warm-white);

    text-align: center;

    padding: 6rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.about-intro::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

.about-intro p:last-child {
    margin-bottom: 0;
}

.about-intro p {
    font-size: 1.2rem;

    line-height: 2.1;

    color: var(--text-dark);

    margin-bottom: 3rem;
}

.whatis-bg {
    background: var(--warm-white);
    padding: 5rem 0;

    position: relative;
}

.about-grid-section {
    position: relative;
    background: var(--warm-white);
    padding: 7rem 0;
}

.about-grid-section::after{
    content: "";

    position: absolute;
    left: 50%;
    top: -81px;
    

    transform: translate(-50%);

    width: 80%;
    height: 2px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(80,55,35,0.75),
        transparent
    );

    box-shadow:
        0 0 10px rgba(80,55,35,0.18);

    z-index: 2;
}


.about-grid {
    width: 90%;
    max-width: 1280px;
    background: var(--beige-main);

    margin: auto;

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

    gap: 2rem;

}

.about-card {
    position: relative;
    overflow: hidden;

    min-width: 0;
    min-height: 500px;
    padding: 10rem 2rem 2rem;
    border-radius: var(--radius);

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

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    transition: 0.7s ease;

    background-size: 108%;
    background-repeat: no-repeat;
    background-position: top center;
}

.about-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.03) 0%,
        rgba(0,0,0,0.12) 30%,
        rgba(245,241,234,0.50) 52%,
        rgba(245,241,234,0.96) 74%,
        rgba(245,241,234,1) 100%
    );

    z-index: 1;
}

.about-card > * {
    position: relative;
    z-index: 2;
}

.about-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);

    box-shadow:
    0 10px 40px rgba(0,0,0,0.4),
    0 0 25px rgba(198,164,108,0.15);
}

.about-card:nth-child(1) {
    background-image: url('images/whatispdr-about.png');
    background-position: center top;
}

.about-card:nth-child(2) {
    background-image: url('images/international-about.png');
    background-position: center top;
}

.about-card:nth-child(3) {
    background-image: url('images/culture-about.png');
    background-position: center -17px;
}

.about-card h3 {
    text-align: center;
    font-size: 1.7rem;
    color: var(--gold);

    margin-top: 3rem;
    margin-bottom: 1rem;

    width: 100%;
    max-width: 100%;

    overflow-wrap: anywhere;

}

.about-card p {
    color: var(--text-dark);
    line-height: 1.9;
    font-size: 1rem;

    max-width: 280px;
    margin: auto;
}


.about-card h5 {
    margin-top: auto;
    padding-top: 3rem;

    text-align: center;

    color: var(--gold);

    font-size: 0.9rem;
    font-weight: 400;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-statement {
    background: var(--warm-white);
    padding: 6rem 0;
    border-top: var(--beige-border);
}

.about-statement::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 0px;
    

    transform: translate(-50%);

    width: 80%;
    height: 2px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(80,55,35,0.75),
        transparent
    );

    box-shadow:
        0 0 10px rgba(80,55,35,0.18);

    z-index: 2;
}


.about-card-img img {
    width: 50px;
    height: -50px;
    top: 20px;
    left: 0%;

    display: flex;

    object-fit: contain;


    padding: 10px;

    border-radius: 42%;

    box-sizing: content-box;
    margin: 0 auto;

    background: rgba(0,0,0, 0.45);
    backdrop-filter: blur(5px);

    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
}

.about-statement {
    position: relative;
    display: flex;

    padding: 5rem 0;

    background-image: url('images/about-quote-pg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

.about-statement::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.85) 65%,
        rgba(0,0,0,0.98) 100%
    );

    z-index: 2;
    pointer-events: none;
}

.about-statement::after {
    content: "";

    position: absolute;

    top: -2px;
    left: 50%;

    transform: translateX(-50%);

    width: 78%;
    height: 5px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(198,164,108,0.9),
        transparent
    );

    box-shadow:
        0 0 12px rgba(198,164,108,0.35),
        0 0 22px rgba(198,164,108,0.18);

    z-index: 999;
}

.about-statement .container {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.about-statement-content {
    max-width: 860px;

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

    text-align: center;

    margin: auto;
    gap: 1.5rem;

}

.about-statement img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}

.about-statement h2 {
    color: var(--warm-white);

    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: 500;

    max-height: 850px;
    text-align: center;

}

/*WHAT IS PDR*/

.page-hero-pdr {
    position: relative;
    min-height: 78vh;

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

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    ),
    url('images/heropdr.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


.page-hero-pdr::after {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 100%;
}

.page-hero-pdr .container {
    position: relative;
    z-index: 2;
}

.page-hero-pdr h1 {
    font-size: 5.5rem;
    color: var(--text-main);

    margin-bottom: 7px;
    line-height: 0.8;

    animation: forwards 1.2s ease;
}

.page-hero-pdr h2 {
    font-size: 5rem;
    color: var(--gold);

    line-height: 1;
    margin-bottom: 3rem;
}

.page-hero-pdr p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.2rem;
    color: #f0f0f0;

    animation: forwards 1.6s ease;
}

.pdr-intro {
    background: var(--warm-white);

    padding: 5rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.pdr-intro::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

.pdr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 4rem;
    align-items: center;
}

.pdr-text h2 {
    color: var(--text-dark);

    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.pdr-text p {
    color: var(--text-brown);

    line-height: 2;
    margin-bottom: 1.5rem;
}

.pdr-image {
    min-height: 500px;
    border-radius: var(--radius);

    background-image: url('images/pdr-image.png');
    background-size: cover;
    background-position: center;

    border: 1px solid rgba(198,164,108,0.35);
}

.pdr-benefits {
    background: #050505;

    padding: 7rem 0;

    border-top: var(--gold-border);
    border-bottom: var(--gold-border);
}

.pdr-benefits .section-title {
    text-align: center;

    color: var(--text-main);

    margin-bottom: 4rem;

    position: relative;

    font-size: 2.4rem;
    margin-bottom: 4.5rem;
}

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

    gap: 2rem;
}

.benefit {
    position: relative;

    min-height: 430px;
    padding: 1rem 2rem;

    border: 1px solid rgba(198,164,108,0.35);

    overflow: hidden;
    display: flex;
    flex-direction: column;

    justify-content: center;

    transition: var(--transition-medium);

    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

.benefit:hover {
    border: var(--gold-border);
    color: var(--gold);

    box-shadow:
        0 0px 30px rgba(198,164,108,0.55),
        0 0px 18px rgba(198,164,108,0.35),
        0 0 30px rgba(198,164,108,0.18);

    transform: translateY(-10px);
    border-color: var(--gold);
}

.benefit h2 {
    color: var(--warm-white);

    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: 500;

    max-height: 850px;
    text-align: center;
}

.benefit h3 {
    font-size: 1.4rem;

    color: var(--gold);
    text-align: center;

    margin-bottom: 1rem;
    line-height: 1.4;
}

.benefit p {
    color: var(--text-soft);
    text-align: center;

    font-size: 0.95rem;
    line-height: 1.9;
}

.benefit img {
    width: 9rem;
    height: 9rem;

    display: flex;

    padding: 30px;

    object-fit: contain;

    box-sizing: content-box;    
    margin: 0 auto 1.5rem auto;

    background: rgba(0,0,0, 0.45);
    backdrop-filter: blur(5px);
}

/*BEFORE AFTER WHAT IS PDR*/

.before-after {
    background: var(--warm-white);

    padding: 5rem 0;
}

.before-after .section-title {
    text-align: center;

    color: var(--text-dark);

    margin-bottom: 2rem;

    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: 500;

    max-height: 850px;
    text-align: center;
}

.beforeafter-slider{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.beforeafter-track{
    display: flex;
    gap: 2.5rem;

    overflow: hidden;
    width: 100%;
}

.beforeafter-card{
    flex: 0 0 460px;

    display: flex;
    flex-direction: column;

    gap: 1.2rem;
}

.beforeafter-card img{
    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: contain;
    border-radius: 20px;

    transition: .45s ease;
    box-shadow: var(--shadow-paper);
}

.beforeafter-card:hover img{
    transform: scale(1.03);
    box-shadow: var(--shadow-medium);
}

/* Navigation */

.slider-btn-prev,
.slider-btn-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 56px;
    height: 56px;

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

    border: 1px solid rgba(198,164,108,.35);
    border-radius: 50%;

    background: rgba(5,5,5,.85);
    backdrop-filter: blur(10px);

    color: var(--gold);

    cursor: pointer;
    z-index: 10;

    transition: .35s ease;
}

.slider-btn-prev{
    left: 8px;
}

.slider-btn-next{
    right: 8px;
}

.slider-btn-prev:hover,
.slider-btn-next:hover{
    background: var(--gold);
    color: #050505;
    transform: translateY(-50%) scale(1.08);
}


.pdr-cta {
    background: var(--gradient-beige);

    padding: 5rem 0;

    text-align: center;

    border-top: var(--beige-border);
}

.pdr-cta h2 {
    color: var(--text-dark);

    font-size: 2.3rem;

    margin-bottom: 1rem;
}

.pdr-cta p {
    color: var(--text-brown);

    margin-bottom: 2.5rem;
}

.pdr-contact {
    display: inline-flex;

    padding: 1rem 3rem;

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

    padding: 1.2rem 3.8rem;

    background-color: var(--gold);
    color: #fff;

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

    text-transform: uppercase;
    letter-spacing: 2px;

    font-size: 0.85;
    font-weight: 500;

    transition: var(--transition-medium);
}

.pdr-contact:hover {
    background: transparent;
    color: var(--gold);

    box-shadow:
    0 0 8px rgba(212, 175, 55, 0.6),
    0 0 20px rgba(212, 175, 55, 0.5),
    0 0 40px rgba(212, 175, 55, 0.3);
}

/*INTERNATIONAL EXPERIENCE*/

.experience-hero {
    position: relative;
    min-height: 78vh;

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

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    ),
    url('images/herointernational.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.experience-hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    height: 100%;
}

.experience-hero .container {
    position: relative;
    z-index: 2;
}

.experience-hero h1 {
    font-size: 5.5rem;
    color: var(--text-main);

    margin-bottom: 1rem;
    line-height: 1.1;
}

.experience-hero h2 {
    font-size: 5.5rem;
    color: var(--gold);

    line-height: 0.8;
    margin-bottom: 3rem;
}

.experience-hero p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.2rem;
    color: #f0f0f0;
}

.experience-intro {
    background: var(--warm-white);

    text-align: center;

    padding: 7rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.experience-intro::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

.experience-intro p {
    font-size: 1.2rem;
    line-height: 2.1;

    color: var(--text-dark);

    margin-bottom: 2rem;
}

.experience-intro p:last-child {
    margin-bottom: 0;
}

/*COUNTRIES EXPERIENCE*/

.experience-countries {
    background: relative;

    background: #050505;

    padding: 7rem 0;

    border-top: var(--gold-border);
    border-bottom: var(--gold-border);
}

.experience-countries .section-title {
    text-align: center;
    color: var(--text-main);

    font-size: 2.4rem;
    margin-bottom: 4.5rem;
}

.countries-grid {
    display: grid;

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

    gap: 1.8rem;
}

.country-card {
    position: relative;
    min-height: 280px;

    border: 1px solid rgba(198,164,108,0.35);

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

    text-align: center;

    transition: var(--transition-medium);

    background: #0a0a0a;
}

.country-card:hover {
    border: var(--gold-border);
    color: var(--gold);

    box-shadow:
        0 0px 30px rgba(198,164,108,0.55),
        0 0px 18px rgba(198,164,108,0.35),
        0 0 30px rgba(198,164,108,0.18);

    transform: translateY(-10px);
    border-color: var(--gold);
}

.country-card img {
    width: 100%;
    height: 100%;

    display: flex;

    object-fit: cover;

    border-bottom: 1px solid rgba(198,164,108,0.35);

    background-size: cover;
}

.country-card span {
    color: var(--gold);

    font-size: 1.1rem;
    
    letter-spacing: 2px;
    text-transform: uppercase;
}


/*QUOTE 3*/

.quote-3 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 5rem 0;

    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.4) 45%,
        rgba(0,0,0,.95) 65%,
        #000 100%
    );
    background-image: url('images/quote-3.png');
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

.quote-3::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.85) 65%,
        rgba(0,0,0,0.98) 100%
    );

    z-index: 2;
    pointer-events: none;
}

.quote-3::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 78%;
    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(198,164,108,0.9),
        transparent
    );

    box-shadow:
        0 0 12px rgba(198,164,108,0.35),
        0 0 22px rgba(198,164,108,0.18);

    z-index: 3;
}

.quote-3 .container {
    position: relative;
    z-index: 2;

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

.quote-3-content {
    width: 38%;
    min-width: 350px;

    display: flex;
    flex-direction: column;
    align-items: right;

    text-align: center;

}

.quote-3 img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}

.quote-3 h2 {
    color: var(--gold);

    font-size: 2rem;
    line-height: 1.5;
    font-weight: 500;

    max-height: 850px;
    text-align: right;
}

.quote-3-end {
    color: var(--text-main);
}

.quote-3-line {
    width: 120px;
    height: 2px;

    margin-top: 2rem;

    background: #c6a46c;
    box-shadow: 0 0 10px rgba(198,164,108,.4);

    transform: translateX(14rem);
}

/*EXPERIENCE CONTACT*/

.experience-cta {
    background: var(--gradient-beige);

    padding: 5rem 0;

    text-align: center;

    border-top: var(--beige-border);
}

.experience-cta h2 {
    color: var(--text-dark);

    font-size: 2.3rem;

    margin-bottom: 1rem;
}

.experience-cta p {
    color: var(--text-brown);

    margin-bottom: 2.5rem;
}

.experience-contact {
    display: inline-flex;

    padding: 1rem 3rem;

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

    padding: 1.2rem 3.8rem;

    background-color: var(--gold);
    color: #fff;

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

    text-transform: uppercase;
    letter-spacing: 2px;

    font-size: 0.85;
    font-weight: 500;

    transition: var(--transition-medium);
}

.experience-contact:hover {
    background: transparent;
    color: var(--gold);

    box-shadow:
    0 0 8px rgba(212, 175, 55, 0.6),
    0 0 20px rgba(212, 175, 55, 0.5),
    0 0 40px rgba(212, 175, 55, 0.3);
}

/*CULTURE AND PHILOSOPHY*/

.culture-hero {
    position: relative;
    min-height: 78vh;

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

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    ),
    url('images/heroculture2.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.culture-hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    height: 100%;
}

.culture-hero .container {
    position: relative;
    z-index: 2;
}

.culture-hero h1 {
    font-size: 5.5rem;
    color: var(--text-main);

    margin-bottom: 1rem;
    line-height: 1.1;

    animation: forwards 1.2s ease;
}

.culture-hero h2 {
    font-size: 5.5rem;
    color: var(--gold);

    line-height: 0.2;
    margin-bottom: 3rem;
}

/*CULTURE INTRO*/

.culture-intro {
    background: var(--warm-white);

    text-align: center;

    padding: 6rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.culture-intro::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

.culture-heading {
    max-width: 850px;

    margin: 0 auto 5rem;

    text-align: center;
}

.culture-intro p {
    color: var(--text-dark);

    font-size: 1.15rem;
    line-height: 2;

}

/*BIBLE VERSE CARD*/

.verse-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4rem;
    position: relative;
}

.verse-grid::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;

    width: 1px;

    background: rgba(198,164,108,0.65);
    transform: translateX(-50%);
}

.verse-card {
    position: relative;
    padding: 0 2rem;
    min-height: 260px;
    overflow: visible;

}

/*BG QUOTE*/

.verse-card:first-child::before {
    content: "“";
    position: absolute;
    top: -50px;
    left: -20px;

    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20rem;
    font-weight: 700; 
    line-height: 1;

    color: rgba(198,164,108,0.12);

    z-index: 1;

}

.verse-card:last-child::after {
    content: "”";

    position: absolute;
    right: -10px;
    bottom: -155px;

    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20rem;
    font-weight: 700;
    line-height: 1;

    color: rgba(198,164,108,0.12);

    z-index: 1;
}

.quote-mark {
    display: none;
}

.verse-top {
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.verse-text {
    font-family: var(--font-title);
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--beige-main);

    margin-bottom: 1rem;

    background: #26211c;
    border: 1px solid rgba(198,164,108,.25);

    border-radius: var(--radius);
    padding: 1rem 1.5rem;

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

.verse-reference {
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 2px;

    margin-bottom: 1.2rem;
}

.verse-line {
    width: 80px;
    height: 2px;

    background: rgba(198,164,108,0.65);

    margin-bottom: 1.5rem;
}

.verse-bottom {
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.8;
}

.mindset {
    background: #050505;

    padding: 7rem 0;
    border-top: var(--gold-border);
    border-bottom: var(--gold-border);
}

.mindset .section-title {
    text-align: center;
    color: var(--text-main);

    font-size: 2.4rem;
    margin-bottom: 4rem;
}

.mindset-grid {
    display: grid;

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

    gap: 1.8rem;
}

.mindset-item {
    position: relative;
    min-height: 280px;
    padding: 3rem 2rem;

    border: 1px solid rgba(198,164,108,0.35);

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

    text-align: center;

    transition: var(--transition-medium);

    background: #0a0a0a;
}

.mindset-item:hover {
    border: var(--gold-border);
    color: var(--gold);

    box-shadow:
        0 0px 30px rgba(198,164,108,0.55),
        0 0px 18px rgba(198,164,108,0.35),
        0 0 30px rgba(198,164,108,0.18);

    transform: translateY(-10px);
    border-color: var(--gold);
}

.mindset-item h3 {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.mindset-item p {
    color: var(--text-soft);
    line-height: 1.9;
}

.mindset-item img {
    width: 9rem;
    height: 9rem;

    display: flex;

    padding: 30px;

    object-fit: contain;

    box-sizing: content-box;    
    margin: 0 auto 1.5rem auto;

    background: transparent;
    backdrop-filter: blur(5px);
}

.work-philosophy {
    background: var(--warm-white);

    padding: 7rem 0;

    text-align: center;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.work-philosophy .section-title {
    color: var(--text-dark);
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

.philosophy-intro {
    color: var(--text-brown);
    font-size: 1.2rem;
    margin-bottom: 4rem;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;
}

.philosophy-item {
    background: var(--beige-main);
    padding: 2rem 2rem;

    border: 1px solid rgba(198,164,108,0.25);
    transition: var(--transition-medium);
}

.philosophy-item h3 {
    color: var(--gold);

    margin-bottom: 1rem;

    font-size: 1.4rem;
}

.philosophy-item p {
    color: var(--text-dark);
    line-height: 1.9;
}

.philosophy-item:hover {
    transform: translateY(-8px);
    border-color: var(--gold);

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

.philosophy-item img {
    width: 9rem;
    height: 9rem;

    display: flex;

    padding: 30px;

    object-fit: contain;

    box-sizing: content-box;    
    margin: 0 auto 1.5rem auto;

    background: transparent;
    backdrop-filter: blur(5px);
}

.commitment {
    position: relative;
    background: var(--warm-white);

    padding: 7rem 0;

    text-align: center;

    border-top: 1px solid rgba(198,164,108,0.18);
}

.commitment .section-title {
    color: var(--gold);
    font-size: 2.6rem;
    margin-bottom: 2rem;
}

.commitment p {
    max-width: 800px;
    margin: 0 auto 1.5rem;
    color: var(--text-dark);

    font-size: 1.1rem;
    line-height: 2;
}

.commitment::before {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 80%;
    height: 2px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(198, 163, 108, 0.56),
        transparent
    );
}

.commitment-section {
    position: relative;

    padding: 7rem 0;

    text-align: center;

    background:
    linear-gradient(
        rgba(0,0,0,0.70),
        rgba(0,0,0,0.85)
    ),
    url('images/commitment.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.commitment-quote h3 {
    color: var(--gold);
    font-size: 2rem;
    letter-spacing: 2px;
}

.quote-1::before {
    content: "";

    position: absolute;

    top: -100px;
    left: 0;

    width: 100%;
    height: 100px;

    background: linear-gradient(
        to bottom,
        transparent,
        #050505
    );

    z-index: 2;
    pointer-events: none;
}

.commitment-quote::after {
    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    transform: translateX(-50%);

    width: 78%;
    height: 5px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(198,164,108,0.9),
        transparent
    );

    box-shadow:
        0 0 12px rgba(198,164,108,0.35),
        0 0 22px rgba(198,164,108,0.18);

    z-index: 3;
}

/*SERVICES*/

.services-hero {
    position: relative;
    min-height: 78vh;

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

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    ),
    url('images/serviceshero2.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.services-hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    height: 100%;
}

.services-hero .container {
    position: relative;
    z-index: 2;
}

.services-hero h1 {
    font-size: 5.5rem;
    color: var(--text-main);

    margin-bottom: 1rem;
    line-height: 1.1;
}

.services-heroh1 {
    font-size: 5.5rem;
    color: var(--gold);

    line-height: 0.8;
    margin-bottom: 3rem;
}

.services-hero p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.2rem;
    color: #f0f0f0;
}

/*SERVICES CARDS*/

/*DEGRADADO AQUI v*/
.services-main {
    position: relative;

    background: var(--warm-white);

    padding: 4.5rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.services-main::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

/*DEGRADADO AQUI ^*/

.service-grid-service {
    width: 90%;
    max-width: 1280px;
    background: var(--beige-main);

    margin: auto;

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

    gap: 2rem;

}

.service-card-service {
    position: relative;
    overflow: hidden;

    min-width: 0;
    min-height: 500px;
    padding: 5rem 2rem 2rem;
    border-radius: var(--radius);

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

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    transition: 0.7s ease;

    background-size: 108%;
    background-repeat: no-repeat;
    background-position: top center;
}

.service-card-service::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.03) 0%,
        rgba(0,0,0,0.12) 30%,
        rgba(245,241,234,0.50) 52%,
        rgba(245,241,234,0.96) 74%,
        rgba(245,241,234,1) 100%
    );

    z-index: 1;
}

.service-card-service > * {
    position: relative;
    z-index: 2;
}

.service-card-service:hover {
    transform: translateY(-10px);
    border-color: var(--gold);

    box-shadow:
    0 10px 40px rgba(0,0,0,0.4),
    0 0 25px rgba(198,164,108,0.15);
}

.service-card-service:nth-child(1) {
    background-image: url('images/whatispdr-about.png');
    background-position: center 0%;
}

.service-card-service:nth-child(2) {
    background-image: url('images/grid-2.png');
    background-position: center -59px;
    
}

.service-card-service:nth-child(3) {
    background-image: url('images/grid-3-bk.png');
    background-position: center -40px;
    background-size: 100%;
}

.service-card-service h2 {
    text-align: center;
    font-size: 1.7rem;
    color: var(--gold);

    margin-top: 7rem;
    margin-bottom: 2.5rem;
    
    width: 100%;
    min-width: 90%;
    margin-left: auto;
    margin-right: auto;

    word-break: keep-all;
    overflow-wrap: normal;

    hyphens: none;
}

.service-card-service p {
    color: var(--text-dark);
    line-height: 1.9;
    font-size: 1rem;

    max-width: 280px;
    margin: 0 auto auto;
}

.service-card-service img {
    width: 50px;
    height: -50px;
    top: 80px;
    left: 0%;

    display: flex;

    object-fit: contain;


    padding: 10px;

    border-radius: 42%;

    box-sizing: content-box;
    margin: 0 auto;

    background: rgba(0,0,0, 0.45);
    backdrop-filter: blur(5px);

    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
}

.service-note-service {
    color: var(--gold);

    font-size: 0.6rem;
    font-style: italic;
    
    margin-top: 8px;
    text-align: center;
}

/*PROCESS*/

.process {
    position: relative;

    background: var(--warm-white);

    padding: 4.5rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.process .section-title {
    text-align: center;

    color: var(--text-main);

    position: relative;

    font-size: 2.4rem;
}

.process-grid {
    display: grid;

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

    align-items: center;
}

.step {
    position: relative;
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 1.5rem 2rem;

    transition: var(--transition-fast);
}

.step h3 {
    font-size: 1.4rem;

    color: var(--gold);
    text-align: center;

    margin-bottom: 1rem;
    line-height: 1.4;
}

.step p {
    color: var(--text-dark);
    text-align: center;

    font-size: 0.95rem;
    line-height: 1.9;
}

.step img {
    width: 50px;
    height: 50px;

    object-fit: contain;

    margin-bottom: 1.3rem;

    opacity: 0.9;

    transition: var(--transition-fast);
}

.step:hover {
    transform: translateY(-3px);
}

.step:not(:last-child)::after {
    content: "";

    position: absolute;
    right: 0;
    top: 10%;

    transform: translateY(-10%);

    width: 1px;
    height: 80%;

    background: rgba(198,164,108,0.2);
}

.step:hover img {
    transform: scale(1.05);
}

/*BENEFITS*/
/*PDR BENEFITS->LOOK THERE*/


/*TEAM PAGE*/

.team-hero {
    position: relative;
    min-height: 78vh;

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

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    ),
    url('images/serviceshero2.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.team-hero::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;
    height: 100%;
}

.team-hero .container {
    position: relative;
    z-index: 2;
}

.team-hero h1 {
    font-size: 5.5rem;
    color: var(--text-main);

    margin-bottom: 1rem;
    line-height: 1.1;
}

.team-heroh1 {
    font-size: 5.5rem;
    color: var(--gold);

    line-height: 0.8;
    margin-bottom: 3rem;
}

.team-hero p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.2rem;
    color: #f0f0f0;
}

.team-section {
    position: relative;

    background: var(--warm-white);

    padding: 4.5rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.team-section::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

.team-grid {
    display: flex;
    flex-direction: column;
}

.team-member-right,
.team-member-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 80px 0;
}

.team-maylon img {
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    border-radius:10px;
}

.team-jo img {
    width:110%;
    height:500px;
    object-fit:cover;
    display:block;
    border-radius:10px;
    margin: 0 -20px;
}

.team-ve img {
    width:105%;
    height:500px;
    object-fit:cover;
    display:block;
    border-radius:10px;
}

.team-info h2 {
    font-family: var(--font-title);
    font-size: var(--title-medium);
    font-weight: 500;
    color: var(--gold);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.role {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.role::after {
    content: "";
    display: block;
    width: 70px;
    height: 2px;
    background: var(--gold);
    margin-top: 1rem;
}

.team-info p:not(.role) {
    font-family: var(--font-body);
    font-size: var(--text-large);
    line-height: 1.9;
    color: var(--text-brown);
    margin-bottom: 1.5rem;
}

/*CONTACT PAGE*/

.contact-hero {
    position: relative;
    min-height: 78vh;

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

    text-align: center;

    overflow: hidden;

    background: linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    ),
    url('images/quote-img.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


.contact-hero::after {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 100%;
}

.contact-hero .container {
    position: relative;
    z-index: 2;
}

.contact-hero h2 {
    font-size: 5.5rem;
    color: var(--gold);

    margin-bottom: 7px;
    line-height: 0.8;

    animation: forwards 1.2s ease;
}

.contact-heroh2 {
    font-size: 5.5rem;
    color: var(--text-main);

    line-height: 0.8;
    margin-bottom: 3rem;
}

.contact-hero p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.2rem;
    color: #f0f0f0;

    animation: forwards 1.6s ease;
}

.contact-section {
    position: relative;

    background: var(--warm-white);

    padding: 4.5rem 0;

    border-top: var(--beige-border);
    border-bottom: var(--beige-border);
}

.contact-section::after {
    content: "";

    position: absolute;
    top: -90px;
    left: 0;

    width: 100%;
    height: 90px;

    background: linear-gradient(
        to bottom,
        rgba(245,241,234,0) 0%,
        rgba(245,241,234,0.30) 40%,
        var(--beige-main
        ) 75%,  
        var(--beige-main) 100%  
    );

    pointer-events: none;
}

.contact-grid {
    display: grid;
    grid-template-columns: 40% 28% 24%;
    gap: 4rem;
    align-items: flex-start;
}

.contact-form h3, 
.contact-info h3 {
    position: relative;

    font-family: var(--font-title);
    font-size: 2rem;
    color: var(--gold);

    text-align: center;
    margin-bottom: 3rem;
}

.contact-form h3::after,
.contact-info h3::after {
    content: "";
    position: absolute;

    width: 70px;
    height: 2px;
    left: 50%;
    bottom: -18px;

    background: var(--gold);

    transform: translateX(-50%);
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem 1.2rem;

    border:1px solid rgba(198,164,108,.35);
    background:rgba(255,255,255,.6);

    font-family: var(--font-body);
    font-size: 1rem;

    color:var(--text-dark);

    border-radius:6px;

    transition:.35s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(198,164,108,0.15);
}

.contact-info {
    border-left: 1px solid rgba(198,164,108,.25);
    padding-left: 3rem;
}

.contact-info-page{
    border-left:1px solid rgba(198,164,108,.22);
    padding-left:4rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 30px;
}

.contact-item strong {
    display: block;
    color: var(--gold);
    font-family: var(--font-title);
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.contact-item p {
    color: var(--text-brown);
    line-height: 1.8;
}

.contact-item img {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

.contact-map iframe {
    width: 100%;
    height: 420px;

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

    filter: 
    grayscale(100%)
    brightness(0.55)
    contrast(1.1);
}

/*FOOTER*/

.footer {
    background: #050505;
    border-top: var(--gold-border);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
    gap: 3rem;

    padding-bottom: 3rem;
}

.footer-content > div {
    position: relative;
}

.footer-content > div:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 0;
    right: -1.5rem;

    width: 1px;
    height: 100%;

    background: rgba(198,164,108,0.15);
}

/*BRAND*/

.footer h3 {
    color: var(--gold);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.footer p {
    color: var(--text-soft);

    line-height: 1.8;
    font-size: 0.95rem;
}

.footer-links {
    display: flex;
    flex-direction: column;

    gap: 0.9rem;
}

.footer-links a {
    color: var(--text-soft);

    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--gold);

    transform: translateX(3px);
}

.footer-contact {
    display: flex;
    flex-direction: column;

    gap: 1rem;
}

.whatsapp:hover {
    transform: translateX(3px);

    transition: var(--transition-fast);

    color: var(--gold);

}

.footer-instagram {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    color: var(--text-soft);
    transition: var(--transition-fast);
    transform: translateX(3px);
}

.footer-instagram:hover {
    color: var(--gold);

    transform: translateX(3px);
}

.footer > p {
    border-top: 1px solid rgba(198,164,108,0.12);

    padding: 1.5rem 0;

    text-align: center;

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

    font-size: 0.85rem;
}

.menu-toggle,
.close-menu,
.dropdown-toggle,
.dropdown-back,
.dropdown-back-btn{
    display: none;
}


/*======================================
            LEGAL PAGES
======================================*/

.legal-page{
    padding: 8rem 0;
}

.legal-content{
    max-width: 950px;
    margin: auto;

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

    border: var(--gold-border);

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

    padding: 4rem;

    backdrop-filter: blur(14px);

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

.legal-content h1{
    font-size: 3rem;
    color: var(--gold);

    margin-bottom: 1rem;

    text-transform: uppercase;

    text-align: center;
}

.effective-date{
    text-align: center;

    color: var(--gold-light);

    margin-bottom: 3rem;

    font-size: .95rem;
}

.legal-content h2{
    margin-top: 3rem;
    margin-bottom: 1rem;

    font-size: 1.6rem;

    color: var(--gold);
}

.legal-content p{
    color: var(--text-soft);

    margin-bottom: 1.3rem;

    line-height: 1.9;
}

.legal-content strong{
    color: white;
}

.legal-content ul{
    margin: 1rem 0 2rem 2rem;
}

.legal-content li{
    color: var(--text-soft);

    margin-bottom: .8rem;

    line-height: 1.8;
}

.legal-content a{
    color: var(--gold);

    transition: var(--transition-fast);
}

.legal-content a:hover{
    color: var(--gold-light);

    text-decoration: underline;
}

.legal-content h2::after{
    content:"";

    display:block;

    width:70px;
    height:2px;

    margin-top:10px;

    background:var(--gold);
}

.legal-content p:last-child{
    margin-bottom:0;
}

/* Contact Box */

.legal-content p:last-of-type{
    margin-top:2rem;

    padding:2rem;

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

    border:1px solid rgba(198,164,108,.15);

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




/*RESPONSIVE NON-DESKTOP*/


@media (max-width: 1200px) {

    /* CONTAINER */

    .container{
        width:92%;
    }

    /* HERO */

    .hero-content h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:4.8rem;
    }

    .hero-content h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-hero h2{
        font-size:4.8rem;
    }

    .hero-content p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .culture-hero p,
    .services-hero p,
    .team-hero p,
    .contact-hero p{
        max-width:680px;
        font-size:1.08rem;
    }

    /* HOME */

    .about-content{
        gap:4rem;
    }

    .about-image{
        width:420px;
    }

    .service-grid{
        gap:1.5rem;
    }

    .service-card{
        min-height:400px;
        padding:2.5rem 1.6rem;
    }

    /* ABOUT */

    .about-grid{
        width:95%;
        gap:1.5rem;
    }

    .about-card{
        min-height:470px;
    }

    /* PDR */

    .pdr-grid{
        gap:3rem;
    }

    .pdr-image{
        min-height:430px;
    }

    /* EXPERIENCE */

    .countries-grid{
        gap:1.4rem;
    }

    /* CULTURE */

    .verse-grid{
        gap:3rem;
    }

    /* SERVICES PAGE */

    .service-grid-service{
        width:95%;
        gap:1.5rem;
    }

    .service-card-service{
        min-height:470px;
    }

    /* TEAM */

    .team-member-left,
    .team-member-right{
        gap:50px;
    }

    /* CONTACT */

    .contact-grid{
        grid-template-columns:38% 30% 24%;
        gap:2.5rem;
    }

    /* FOOTER */

    .footer-content{
        gap:2rem;
    }
}

/*TABLET 998px*/

@media (max-width:992px){

    /* CONTAINER */

    .container{
        width:92%;
    }

    section{
        overflow:hidden;
    }

    /* HERO */

    .hero,
    .page-hero,
    .page-hero-pdr,
    .services-hero,
    .experience-hero,
    .culture-hero,
    .team-hero,
    .contact-hero{
        min-height:65vh;
        background-attachment:scroll;
    }

    .hero-content h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:4rem;
    }

    .hero-content h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-hero h2{
        font-size:4rem;
        line-height:1;
    }

    .hero-content p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .culture-hero p,
    .services-hero p,
    .team-hero p,
    .contact-hero p{
        font-size:1.05rem;
        max-width:620px;
    }

    /* SECTION TITLES */

    .section-title{
        font-size:2.1rem !important;
    }

    /* HOME */

    .about-content{
        grid-template-columns:1fr;
        text-align:center;
        gap:3rem;
    }

    .about-image{
        width:100%;
        max-width:520px;
        margin:auto;
    }

    .stats{
        justify-content:center;
    }

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

    .quote-1 .container{
        justify-content:center;
    }

    .quote-1-content{
        text-align:center;
        justify-content:center;
    }

    .quote-1 h2{
        text-align:center;
        font-size:1.8rem;
    }

    .contact-cta-content{
        flex-direction:column;
        text-align:center;
    }

    .location .container{
        grid-template-columns:1fr;
    }

    .location-wrapper{
        grid-template-columns:1fr;
    }

    /* ABOUT */

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

    /* PDR */

    .pdr-grid{
        grid-template-columns:1fr;
    }

    .pdr-image{
        order:-1;
        min-height:420px;
    }

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

    /* BEFORE / AFTER */

    .before-after-grid{
        grid-template-columns:1fr;
        max-width:600px;
    }

    /* EXPERIENCE */

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

    .quote-3 .container{
        justify-content:center;
    }

    .quote-3-content{
        width:100%;
        min-width:0;
    }

    .quote-3 h2{
        text-align:center;
    }

    .quote-3-line{
        transform:none;
        margin-inline:auto;
    }

    /* CULTURE */

    .verse-grid{
        grid-template-columns:1fr;
    }

    .verse-grid::after{
        display:none;
    }

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

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

    /* SERVICES PAGE */

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

    .process-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .step:not(:last-child)::after{
        display:none;
    }

    /* TEAM */

    .team-member-left,
    .team-member-right{
        grid-template-columns:1fr;
        gap:2.5rem;
        padding:60px 0;
    }

    .team-member-right .team-info{
        order:2;
    }

    .team-member-right div:first-child{
        order:1;
    }

    .team-maylon img,
    .team-jo img,
    .team-ve img{
        width:100%;
        margin:0;
    }

    /* CONTACT */

    .contact-grid{
        grid-template-columns:1fr;
        gap:4rem;
    }

    .contact-info,
    .contact-info-page{
        border:none;
        padding:0;
    }

    .contact-map iframe{
        height:350px;
    }

    /* FOOTER */

    .footer-content{
        grid-template-columns:repeat(2,1fr);
        gap:3rem;
    }

    .footer-content > div::after{
        display:none;
    }


    .legal-content{

        padding:3rem;
    }

}



/*MOVIL GRANDE*/

@media (max-width: 767px){

    .container{
        width:92%;
    }

    section{
        padding:4rem 0;
    }

    /* HERO */

    .hero,
    .page-hero,
    .page-hero-pdr,
    .experience-hero,
    .culture-hero,
    .services-hero,
    .team-hero,
    .contact-hero{
        min-height:65vh;
        background-attachment:scroll;
    }

    .hero h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:3.2rem;
        line-height:1.1;
    }

    .hero h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-heroh2{
        font-size:2.8rem;
        line-height:1;
        margin-bottom:2rem;
    }

    .hero p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .contact-hero p{
        font-size:1rem;
        line-height:1.8;
    }

    /* TITULOS */

    .section-title{
        font-size:2rem;
    }

    /* HOME */

    .service-grid,
    .stats,
    .countries-grid,
    .benefits-grid,
    .service-grid-service,
    .about-grid,
    .process-grid,
    .mindset-grid,
    .philosophy-grid,
    .before-after-grid,
    .verse-grid{
        grid-template-columns:1fr;
    }

    .verse-grid::after{
        display:none;
    }

    .location .container,
    .pdr-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    /* TEAM */

    .team-member-left,
    .team-member-right{
        grid-template-columns:1fr;
        gap:2.5rem;
        padding:3rem 0;
    }

    .team-jo img,
    .team-maylon img,
    .team-ve img{
        width:100%;
        height:420px;
        margin:0;
    }

    /* FOOTER */

    .footer-content{
        grid-template-columns:1fr;
        gap:2.5rem;
    }

    .footer-content > div::after{
        display:none;
    }

    /* CTA */

    .contact-cta-content{
        flex-direction:column;
        text-align:center;
    }

    .contact-cta .btn-primary,
    .service-cta .btn-primary,
    .experience-contact,
    .pdr-contact{
        width:100%;
        max-width:340px;
    }

    .legal-page{

        padding:5rem 0;
    }

    .legal-content{

        padding:2rem;
    }

    .legal-content h1{

        font-size:2.2rem;
    }

    .legal-content h2{

        font-size:1.35rem;
    }


}

/*MOVIL PEQUEÑO*/

    @media (max-width:575px){


    .menu-toggle{

        display: block;

        background: none;
        border: none;

        color: var(--gold);

        font-size: 2rem;

        cursor: pointer;

        z-index: 1100;
    }

    .menu-toggle.hide{

        display: none;
    }

    .close-menu{

        display: none;

        background: none;
        border: none;

        color: var(--gold);

        font-size: 2rem;

        cursor: pointer;

        align-self: flex-end;

        margin-bottom: 2rem;
    }

    .nav-menu{

        position: fixed;

        top: 0;
        right: 0;

        width: 290px;
        height: 100vh;

        padding: 2rem;

        display: flex;
        flex-direction: column;

        gap: 1rem;

        list-style: none;

        background: #050505;

        border-left: 1px solid rgba(198,164,108,.25);

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

        transform: translateX(100%);

        opacity: 0;
        visibility: hidden;

        transition: .4s ease;

        z-index: 1050;
    }

    .nav-menu.visible{

        transform: translateX(0);

        opacity: 1;

        visibility: visible;
    }

    .nav-menu.visible .close-menu{

        display: block;
    }

    .nav-menu > li{

        width: 100%;
    }

    .nav-menu > li > a {

        display: block;

        width: 100%;

        padding: 1rem;

        color: var(--text-main);
    
    }

    .dropdown {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    
    }

    .dropdown > a {
        flex: 1;
        display: block;
        padding: 1rem;
    }

    .dropdown-toggle {

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

    width: 40px;
    height: 40px;

    background: none;
    border: none;

    color: var(--gold);

    cursor: pointer;

    flex-shrink: 0;
    }


    .dropdown-menu {

        position: fixed;

        top: 0;
        right: 0;

        width: 290px;
        height:100vh;

        background: #050505;

        list-style: none;

        padding: 2rem;

        display: flex;
        flex-direction: column;
        gap: 1rem;

        transform: translateX(100%);

        transition: .35s ease;
        opacity: 0;
        visibility: hidden;

        z-index: 1100;
    }

    .dropdown.active .dropdown-menu {

        transform: translateX(0);

        opacity: 1;

        visibility: visible;
    }

    .dropdown-back {
        display: block;
        margin-bottom: 2rem;
    }

    .dropdown-back-btn {

        display: flex;
        align-items: center;
        gap: .8rem;

        background: none;
        border: none;

        color: var(--gold);

        font-size: 1rem;

        cursor: pointer;

        margin-bottom: 1.5rem;

    }

    .dropdown-menu li {

        width: 100%;
    }

    .dropdown-menu a {

        display: block;

        width: 100%;

        padding: 1rem 0;

        color: var(--text-main);
    }
    

    .navbar h1 {
        padding: 0 2rem;
        font-size: 1rem;
    }

    .container {
        width: 94%;
    }

    section {
        padding: 3.5rem 0;
    }


    .hero,
    .page-hero,
    .page-hero-pdr,
    .experience-hero,
    .culture-hero,
    .services-hero,
    .team-hero,
    .contact-hero{
        min-height:60vh;
    }

    .hero h1,
    .page-hero h1,
    .page-hero-pdr h1,
    .experience-hero h1,
    .culture-hero h1,
    .services-hero h1,
    .team-hero h1{
        font-size:2.4rem;
        line-height:1.15;
    }

    .hero h2,
    .page-hero h2,
    .page-hero-pdr h2,
    .experience-hero h2,
    .culture-hero h2,
    .services-heroh1,
    .team-heroh1,
    .contact-heroh2{
        font-size:2rem;
        line-height:1.1;
        margin-bottom:1.5rem;
    }

    .hero p,
    .page-hero p,
    .page-hero-pdr p,
    .experience-hero p,
    .contact-hero p{
        font-size:0.95rem;
        line-height:1.7;
    }

    /*TITULOS*/

    .section-title{
        font-size:1.8rem;
        margin-bottom:2.5rem;
    }

    /*TARJETAS*/

    .service-card,
    .benefit,
    .about-card,
    .service-card-service,
    .mindset-item,
    .philosophy-item,
    .country-card{
        padding:2rem 1.5rem;
        min-height:auto;
    }

    .service-card h3,
    .benefit h3,
    .about-card h3,
    .service-card-service h2{
        font-size:1.4rem;
    }

    .service-card p,
    .benefit p,
    .about-card p,
    .service-card-service p,
    .mindset-item p,
    .philosophy-item p{
        font-size:0.95rem;
    }

    /*BOTONES*/

    .btn-primary,
    .experience-contact,
    .pdr-contact{
        width:100%;
        padding:1rem;
        font-size:.8rem;
    }

    /*QUOTES*/

    .quote-1 h2,
    .quote-3 h2,
    .about-statement h2{
        font-size:1.5rem;
        text-align:center;
    }

    .quote-1-content,
    .quote-3-content,
    .about-statement-content{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .quote-3-content{
        width:100%;
        min-width:0;
    }

    .quote-3-line{
        transform:none;
        margin:2rem auto 0;
    }

    /*IMÁGENES EQUIPO*/

    .team-maylon img,
    .team-jo img,
    .team-ve img{
        height:320px;
    }

    /*MAPAS*/

    .map-placeholder{
        min-height:220px;
    }

    .contact-map iframe{
        height:300px;
    }

    /*BEFORE AND AFTER*/

.beforeafter-slider {
    position: relative;
}

.beforeafter .container{
    gap:2.5rem;
}

.beforeafter-track{
    gap: 1rem;
}

.beforeafter-card{
    flex: 0 0 100%;
}

.slider-btn-prev,
.slider-btn-next{
    width: 46px;
    height: 46px;

    top: 42%;

    z-index: 100;
}

.slider-btn-prev{
    left: .8rem;
}

.slider-btn-next{
    right: .8rem;
}


    /*FOOTER*/

    .footer{
        text-align:center;
    }

    .footer-links,
    .footer-contact{
        align-items:center;
    }

    .footer-instagram{
        justify-content:center;
    }

    /*ESTADÍSTICAS*/

    .stat h3{
        font-size:2.2rem;
    }

    .stat p{
        max-width:none;
        font-size:.75rem;
    }


    /*WHY*/

    .why-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1.5rem;
    }

    .why-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        padding: 0.5rem;

        border: none;
        text-align: center;
    }

    .why-item img {
        width: 42px;
        height: auto;
        margin-bottom: 1rem;
    }

    .why-item span {
        display: block;
        max-width: 140px;
        font-size: .95rem;
        line-height: 1.4;
        margin: 0 auto;
    }

    /*ABOUT*/


    .about-content,
    .about-img {
        width: 100%;
    }

    .about-content {
        padding: 3rem 0;
    }

    .about-content p {
        font-size: 1rem;
        line-height: 1.8;
        text-align: left;
    }

    .about-content h2 {
        text-align: left;

        }

    .about-wrapper {
        display: flex;
        flex-direction: column;
    }

    .about-content,
    .about-img {
        width: 100%;
    }

    .about-content {
        padding: 3rem 0;
    }

    .about-content p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .about-img img {
        display: block;
        width: 100%;
        max-height: 250px;
    }

    .stats-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .stat {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .stat h3 {
        font-size: 2.5rem;
    }

    .stat p {
        font-size: .9rem;
    }

    .about-wrapper{
        display:flex;
        flex-direction:column;
    }

    .about-content{
        padding:2rem 0 1rem;
    }

    .about-content p{
        text-align:left;
        margin-bottom:2rem;
    }

    .about-img{
        margin-top:1.5rem;
    }

    .about-img img{
        width:100%;
        max-height:320px;
        object-fit:cover;
        object-position:center;
        display:block;
    }

    .stats-grid{
        margin-top:2rem;
        gap:1.5rem;
    }

    .legal-content{

        padding:1.5rem;
    }

    .legal-content h1{

        font-size:1.9rem;
    }

}