/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
/* ==========================================================
   GLOBAL FONTS
========================================================== */

:root {

    --default-font:
        "Roboto",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif;

    --heading-font:
        "Raleway",
        sans-serif;

    --nav-font:
        "Poppins",
        sans-serif;

}


/* ==========================================================
   GLOBAL COLORS
========================================================== */

:root {

    /* Main website background */
    --background-color: #050505;

    /* Normal body text */
    --default-color: #e8e8e8;

    /* Headings */
    --heading-color: #ffffff;

    /* Main brand color - Luxury Gold */
    --accent-color: #D4AF37;

    /* Cards / surfaces */
    --surface-color: #111111;

    /* Text placed on gold buttons */
    --contrast-color: #050505;

}


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

:root {

    /* Navigation text */
    --nav-color: #ffffff;

    /* Navigation hover / active */
    --nav-hover-color: #D4AF37;

    /* Mobile menu background */
    --nav-mobile-background-color: #0a0a0a;

    /* Dropdown background */
    --nav-dropdown-background-color: #111111;

    /* Dropdown text */
    --nav-dropdown-color: #ffffff;

    /* Dropdown hover */
    --nav-dropdown-hover-color: #D4AF37;

}

/* ==========================================================
   DARK / BLACK BACKGROUND
   Global website theme
========================================================== */

.dark-background {
    --background-color: #050505;
    --default-color: #e8e8e8;
    --heading-color: #ffffff;
    --accent-color: #D4AF37;
    --surface-color: #111111;
    --contrast-color: #050505;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   MODERN DRAWER HEADER
   DRAWER MENU ON DESKTOP + TABLET + MOBILE
========================================================== */


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

.modern-header {

    --header-height: 76px;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--header-height);

    padding: 0;

    z-index: 9990;

    background: transparent;

    border-bottom: 1px solid transparent;

    transition:
        height 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


/* ==========================================================
   HEADER AFTER SCROLL
========================================================== */

body.scrolled .modern-header {

    --header-height: 68px;

    background:
        rgba(15, 15, 15, 0.78);

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

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

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

}


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

.header-container {

    width:
        min(
            1440px,
            calc(100% - 80px)
        );

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


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

.modern-logo {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;

    line-height: 1;

}


.modern-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 70px;
    object-fit: contain;
    transition:
        max-width 0.35s ease,
        max-height 0.35s ease;
}


body.scrolled .modern-logo img {
    max-width: 195px;
    max-height: 58px;
}


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

.menu-toggle {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    padding: 0;

    margin: 0;

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

    border-radius: 50%;

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

    color: #ffffff;

    cursor: pointer;

    outline: none;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.menu-toggle:hover {

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

    border-color:
        rgba(255, 255, 255, 0.35);

}


.menu-toggle:active {

    transform: scale(0.92);

}


/* ==========================================================
   MENU BUTTON LINES
========================================================== */

.menu-toggle span {

    position: absolute;

    left: 50%;

    width: 21px;

    height: 1.5px;

    border-radius: 10px;

    background: #ffffff;

    transform:
        translateX(-50%);

    transition:
        top 0.3s ease,
        transform 0.3s ease;

}


.menu-toggle span:first-child {

    top: 21px;

}


.menu-toggle span:last-child {

    top: 31px;

}


/* ==========================================================
   MENU BUTTON ACTIVE STATE
========================================================== */

body.drawer-open .menu-toggle {

    opacity: 0;

    pointer-events: none;

}


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

.drawer-overlay {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    background:
        rgba(0, 0, 0, 0.62);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 9997;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

}


.drawer-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* ==========================================================
   RIGHT DRAWER
========================================================== */

.menu-drawer {

    position: fixed;

    top: 0;

    right: 0;

    width:
        min(
            480px,
            90vw
        );

    height: 100dvh;

    background:
        #000;

    color: #d4af37;

    z-index: 9998;

    overflow: hidden;

    transform:
        translate3d(100%, 0, 0);

    visibility: hidden;

    transition:
        transform 0.55s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        ),
        visibility 0.55s;

    box-shadow:
        -30px 0 90px
        rgba(0, 0, 0, 0.35);

}


.menu-drawer.active {

    transform:
        translate3d(0, 0, 0);

    visibility: visible;

}


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

.drawer-header {

    height: 90px;

    min-height: 90px;

    padding:
        0 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

}


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

.drawer-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    line-height: 1;

}


.drawer-logo img {

    display: block;

    width: auto;

    height: auto;

    max-width: 195px;

    max-height: 58px;

    object-fit: contain;

}


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

.drawer-close {

    width: 46px;

    height: 46px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

    color: #ffffff;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.4s ease;

}


.drawer-close i {

    font-size: 15px;

}


.drawer-close:hover {

    background: #ffffff;

    color: #101010;

    border-color: #ffffff;

    transform:
        rotate(90deg);

}


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

.drawer-content {

    height:
        calc(
            100dvh - 90px
        );

    padding:
        42px 32px 32px;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

}


/* ==========================================================
   DRAWER LABEL
========================================================== */

.drawer-label {

    margin:
        0 0 22px;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

}


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

.mobile-nav {

    display: flex;

    flex-direction: column;

    width: 100%;

}


.mobile-nav a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding:
        18px 0;

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

    text-decoration: none;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    font-weight: 500;

    line-height: 1.2;

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

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;

}


.mobile-nav a span {

    display: block;

}


.mobile-nav a i {

    flex-shrink: 0;

    margin-left: 20px;

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

    font-size: 17px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}


.mobile-nav a:hover {

    color: #ffffff;

    padding-left: 10px;

}


.mobile-nav a:hover i {

    color: #ffffff;

    transform:
        translate(
            5px,
            -5px
        );

}


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

.drawer-bottom {

    margin-top: auto;

    padding-top: 40px;

}


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

.drawer-cta {

    width: 100%;

    min-height: 56px;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #111111;

    background: #ffffff;

    border-radius: 100px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.drawer-cta:hover {

    color: #111111;

    transform:
        translateY(-2px);

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

}


.drawer-cta i {

    font-size: 17px;

    transition:
        transform 0.3s ease;

}


.drawer-cta:hover i {

    transform:
        translate(
            4px,
            -4px
        );

}


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

.drawer-socials {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

}


.drawer-socials a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

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

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

    border-radius: 50%;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.drawer-socials a:hover {

    background: #ffffff;

    color: #111111;

    border-color: #ffffff;

    transform:
        translateY(-3px);

}


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

@media (min-width: 1400px) {

    .header-container {

        width:
            min(
                1440px,
                calc(100% - 100px)
            );

    }


    .modern-logo img {

        max-width: 190px;

        max-height: 54px;

    }


    .menu-toggle {

        width: 58px;

        height: 58px;

    }


    .menu-toggle span {

        width: 22px;

    }


    .menu-drawer {

        width: 500px;

    }


    .drawer-header {

        padding:
            0 38px;

    }


    .drawer-content {

        padding:
            50px 38px 38px;

    }

}


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

@media (min-width: 992px)
       and (max-width: 1399px) {

    .header-container {

        width:
            calc(
                100% - 70px
            );

    }

}


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

@media (min-width: 768px)
       and (max-width: 991px) {

    .modern-header {

        --header-height: 72px;

    }


    .header-container {

        width:
            calc(
                100% - 50px
            );

    }


    .modern-logo img {

        max-width: 160px;

        max-height: 46px;

    }


    .menu-toggle {

        width: 52px;

        height: 52px;

    }

}


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

@media (max-width: 767px) {

    .modern-header {

        --header-height: 68px;

    }


    body.scrolled .modern-header {

        --header-height: 62px;

    }


    .header-container {

        width:
            calc(
                100% - 30px
            );

    }


    .modern-logo img {

        max-width: 140px;

        max-height: 42px;

    }


    body.scrolled .modern-logo img {

        max-width: 128px;

        max-height: 39px;

    }


    .menu-toggle {

        width: 48px;

        height: 48px;

    }


    .menu-drawer {

        width: 100%;

    }


    .drawer-header {

        height: 76px;

        min-height: 76px;

        padding:
            0 22px;

    }


    .drawer-content {

        height:
            calc(
                100dvh - 76px
            );

        padding:
            30px 22px 24px;

    }


    .drawer-logo img {

        max-width: 135px;

        max-height: 40px;

    }


    .drawer-close {

        width: 43px;

        height: 43px;

    }


    .mobile-nav a {

        padding:
            15px 0;

        font-size:
            clamp(
                23px,
                7vw,
                30px
            );

    }


    .drawer-bottom {

        padding-top: 30px;

    }

}


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

@media (max-width: 480px) {

    .header-container {

        width:
            calc(
                100% - 24px
            );

    }


    .modern-logo img {

        max-width: 125px;

        max-height: 38px;

    }


    .menu-toggle {

        width: 45px;

        height: 45px;

    }


    .menu-toggle span {

        width: 18px;

    }


    .menu-toggle span:first-child {

        top: 18px;

    }


    .menu-toggle span:last-child {

        top: 26px;

    }


    .drawer-header {

        padding:
            0 18px;

    }


    .drawer-content {

        padding:
            27px 18px 20px;

    }


    .mobile-nav a {

        padding:
            14px 0;

        font-size:
            clamp(
                22px,
                7.5vw,
                27px
            );

    }


    .drawer-cta {

        min-height: 52px;

    }

}


/* ==========================================================
   VERY SMALL DEVICES
========================================================== */

@media (max-width: 360px) {

    .modern-logo img {

        max-width: 110px;

        max-height: 34px;

    }


    .menu-toggle {

        width: 42px;

        height: 42px;

    }


    .menu-toggle span {

        width: 17px;

    }


    .drawer-header {

        padding:
            0 16px;

    }


    .drawer-content {

        padding:
            24px 16px 18px;

    }

}


/* ==========================================================
   BODY WHEN DRAWER IS OPEN
========================================================== */

body.drawer-open {

    overflow: hidden;

}


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

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

    .modern-header,
    .modern-logo img,
    .menu-toggle,
    .menu-drawer,
    .drawer-overlay,
    .drawer-close,
    .mobile-nav a,
    .mobile-nav a i,
    .drawer-cta,
    .drawer-socials a {

        transition: none !important;

    }

}
/* ==============================================================
# FOOTER
============================================================== */

.footer {

    position:
        relative;

    background:
        #050505;

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

    padding:
        70px 0 25px;

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

    overflow:
        hidden;

}


/* ==============================================================
# SUBTLE GOLD GLOW
============================================================== */

.footer::before {

    content:
        "";

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    left:
        -250px;

    bottom:
        -300px;

    border-radius:
        50%;

    background:
        rgba(
            212,
            175,
            55,
            0.06
        );

    filter:
        blur(
            90px
        );

    pointer-events:
        none;

}


/* ==============================================================
# FOOTER MAIN
============================================================== */

.footer-main {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding-bottom:
        55px;

}


/* ==============================================================
# FOOTER BRAND
============================================================== */

.footer-brand {

    max-width:
        430px;

}


.footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    text-decoration:
        none;

    margin-bottom:
        20px;

}


.footer-logo img {

    display:
        block;

    max-width:
        190px;

    max-height:
        60px;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

}


.footer-brand p {

    max-width:
        400px;

    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.8;

}


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

.footer-contact {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        22px;

}


/* ==============================================================
# EMAIL
============================================================== */

.footer-email {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        500;

    text-decoration:
        none;

    transition:
        all 0.3s ease;

}


.footer-email i {

    color:
        var(--accent-color);

    font-size:
        17px;

}


.footer-email:hover {

    color:
        var(--accent-color);

}


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

.footer-social {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.footer-social a {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

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

    font-size:
        15px;

    text-decoration:
        none;

    transition:
        all 0.35s ease;

}


.footer-social a:hover {

    color:
        #050505;

    background:
        var(--accent-color);

    border-color:
        var(--accent-color);

    transform:
        translateY(
            -4px
        );

    box-shadow:
        0 8px 25px
        rgba(
            212,
            175,
            55,
            0.2
        );

}


/* ==============================================================
# FOOTER BOTTOM
============================================================== */

.footer-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding-top:
        22px;

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

}


/* ==============================================================
# COPYRIGHT
============================================================== */

.footer-copyright {

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

    font-size:
        11px;

    line-height:
        1.6;

}


.footer-copyright strong {

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

    font-weight:
        500;

    margin-left:
        3px;

}


/* ==============================================================
# FOOTER META
============================================================== */

.footer-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

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

    font-size:
        11px;

}


.footer-meta a {

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

    text-decoration:
        none;

    transition:
        color 0.3s ease;

}


.footer-meta a:hover {

    color:
        var(--accent-color);

}


.footer-separator {

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

}


.crafted-by {

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

}


/* ==============================================================
# ADEXP LOGO
============================================================== */

.adexp-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-left:
        2px;

}


.adexp-link img {

    display:
        block;

    width:
        75px;

    height:
        auto;

    max-height:
        28px;

    object-fit:
        contain;

    opacity:
        0.75;

    transition:
        all 0.3s ease;

}


.adexp-link:hover img {

    opacity:
        1;

    transform:
        translateY(
            -1px
        );

}


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

@media (max-width: 991px) {

    .footer {

        padding:
            60px 0 22px;

    }


    .footer-main {

        align-items:
            flex-start;

    }


    .footer-contact {

        align-items:
            flex-start;

    }


    .footer-bottom {

        align-items:
            flex-start;

    }

}


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

@media (max-width: 767px) {

    .footer {

        padding:
            55px 0 20px;

    }


    .footer-main {

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;

        gap:
            35px;

        padding-bottom:
            40px;

    }


    .footer-brand {

        max-width:
            100%;

    }


    .footer-logo {

        justify-content:
            center;

    }


    .footer-logo img {

        max-width:
            170px;

    }


    .footer-brand p {

        margin:
            0 auto;

        max-width:
            330px;

    }


    .footer-contact {

        align-items:
            center;

        width:
            100%;

    }


    .footer-email {

        font-size:
            13px;

    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;

        gap:
            15px;

    }


    .footer-copyright {

        max-width:
            100%;

    }


    .footer-meta {

        justify-content:
            center;

        flex-wrap:
            wrap;

    }

}


/* ==============================================================
# SMALL MOBILE
============================================================== */

@media (max-width: 400px) {

    .footer-meta {

        gap:
            7px;

        font-size:
            10px;

    }


    .footer-copyright {

        font-size:
            10px;

    }


    .adexp-link img {

        width:
            65px;

    }

}
/*--------------------------------------------------------------
# Luxury Event Preloader
--------------------------------------------------------------*/

#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;

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

  background: #000000;

  overflow: hidden;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}


/*--------------------------------------------------------------
# Preloader Content
--------------------------------------------------------------*/

#preloader .preloader-content {
  position: relative;

  width: 260px;

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

  text-align: center;
}


/*--------------------------------------------------------------
# Animated Gold Ring
--------------------------------------------------------------*/

#preloader .preloader-ring {
  position: absolute;

  width: 170px;
  height: 170px;

  border-radius: 50%;

  border: 1px solid rgba(212, 175, 55, 0.15);

  border-top-color: var(--accent-color);
  border-right-color: rgba(212, 175, 55, 0.55);

  animation: preloader-ring-spin 2s linear infinite;

  box-shadow:
    0 0 25px rgba(212, 175, 55, 0.08),
    inset 0 0 25px rgba(212, 175, 55, 0.04);
}


/* Second rotating ring */

#preloader .preloader-ring::before {
  content: "";

  position: absolute;

  inset: 10px;

  border-radius: 50%;

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

  border-bottom-color: var(--accent-color);

  animation: preloader-ring-reverse 3s linear infinite;
}


/*--------------------------------------------------------------
# Logo
--------------------------------------------------------------*/

#preloader .preloader-logo {
  position: relative;

  width: 95px;
  height: 95px;

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

  z-index: 2;

  animation: preloader-logo-reveal 1.4s ease forwards;
}


#preloader .preloader-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  /* Use this only if your logo is a white logo */
  filter:
    drop-shadow(0 0 10px rgba(212, 175, 55, 0.18));

  animation: preloader-logo-glow 2.5s ease-in-out infinite;
}


/*--------------------------------------------------------------
# Brand Name
--------------------------------------------------------------*/

#preloader .preloader-brand {
  position: relative;

  z-index: 3;

  margin-top: 35px;

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

  animation: preloader-brand-reveal 1.2s ease 0.4s both;
}


#preloader .preloader-brand span {
  color: #ffffff;

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

  font-size: 21px;

  font-weight: 700;

  letter-spacing: 7px;

  margin-left: 7px;
}


#preloader .preloader-brand small {
  color: var(--accent-color);

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

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 4px;

  margin-top: 7px;

  margin-left: 4px;
}


/*--------------------------------------------------------------
# Loading Bar
--------------------------------------------------------------*/

#preloader .preloader-loader {
  position: relative;

  width: 120px;
  height: 1px;

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

  margin-top: 30px;

  overflow: hidden;

  animation: preloader-loader-reveal 1s ease 0.7s both;
}


#preloader .preloader-loader span {
  position: absolute;

  top: 0;
  left: -100%;

  width: 100%;
  height: 100%;

  background: var(--accent-color);

  box-shadow:
    0 0 10px var(--accent-color),
    0 0 20px rgba(212, 175, 55, 0.4);

  animation: preloader-loading 1.6s ease-in-out infinite;
}


/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

@keyframes preloader-ring-spin {

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }

}


@keyframes preloader-ring-reverse {

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }

}


@keyframes preloader-logo-reveal {

  0% {
    opacity: 0;
    transform: scale(0.65);
  }

  60% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}


@keyframes preloader-logo-glow {

  0%,
  100% {
    filter:
      drop-shadow(0 0 5px rgba(212, 175, 55, 0.08));
  }

  50% {
    filter:
      drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
  }

}


@keyframes preloader-brand-reveal {

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

  100% {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes preloader-loader-reveal {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}


@keyframes preloader-loading {

  0% {
    left: -100%;
  }

  50% {
    left: 0;
  }

  100% {
    left: 100%;
  }

}


/*--------------------------------------------------------------
# Preloader Hidden State
--------------------------------------------------------------*/

#preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


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

@media (max-width: 575px) {

  #preloader .preloader-content {
    width: 220px;
  }

  #preloader .preloader-ring {
    width: 150px;
    height: 150px;
  }

  #preloader .preloader-logo {
    width: 82px;
    height: 82px;
  }

  #preloader .preloader-brand {
    margin-top: 30px;
  }

  #preloader .preloader-brand span {
    font-size: 18px;
    letter-spacing: 6px;
  }

  #preloader .preloader-brand small {
    font-size: 7px;
    letter-spacing: 3px;
  }

}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}
/* ==============================================================
# GLOBAL SECTIONS
============================================================== */

section,
.section {

    width: 100%;

    color: var(--default-color);

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

    padding: 110px 0;

    scroll-margin-top: 80px;

    overflow: clip;

}


/* ==============================================================
# GLOBAL SECTION TITLES
============================================================== */

.section-title {

    position: relative;

    padding-bottom: 55px;

}


.section-title h2 {

    position: relative;

    display: inline-block;

    margin: 0 0 20px;

    padding: 0;

    color: var(--heading-color);

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

    font-size: clamp(
        38px,
        5vw,
        64px
    );

    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -2px;

}


/* Gold underline */

.section-title h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -12px;

    width: 45px;

    height: 2px;

    background: var(--accent-color);

}


/* Description */

.section-title p {

    max-width: 650px;

    margin: 0;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 25%
        );

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

    font-size: 16px;

    line-height: 1.7;

}


/* ==============================================================
# SECTION EYEBROW
============================================================== */

.section-title .eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--accent-color);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.section-title .eyebrow::before {

    content: "";

    width: 30px;

    height: 1px;

    background: var(--accent-color);

}


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

@media (max-width: 1199px) {

    section,
    .section {

        scroll-margin-top: 65px;

        padding: 90px 0;

    }

}


@media (max-width: 767px) {

    section,
    .section {

        padding: 75px 0;

    }


    .section-title {

        padding-bottom: 40px;

    }


    .section-title h2 {

        font-size: clamp(
            36px,
            11vw,
            50px
        );

        letter-spacing: -1.5px;

        margin-bottom: 17px;

    }


    .section-title h2::after {

        bottom: -9px;

        width: 35px;

    }


    .section-title p {

        font-size: 14px;

        line-height: 1.65;

    }


    .section-title .eyebrow {

        margin-bottom: 14px;

        font-size: 9px;

        letter-spacing: 2.5px;

    }

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

.hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    height: 100vh;

    height: 100svh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 0 80px;

    background: #080808;

}


/* ==========================================================
   HERO VIDEO
========================================================== */

.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 1;

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        /* Bottom dark gradient */
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.15) 35%,
            rgba(0, 0, 0, 0.55) 100%
        ),

        /* Center readability */
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.48) 100%
        );

}


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

.hero-content {

    position: relative;

    z-index: 3;

    width: 100%;

    min-height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #ffffff;

}


.hero-content-inner {

    width: min(
        1100px,
        calc(100% - 40px)
    );

    margin: 0 auto;

}


/* ==========================================================
   HERO LABEL
========================================================== */

.hero-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 25px;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.hero-label-line {

    display: block;

    width: 35px;

    height: 1px;

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

}


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

.hero-title {

    margin: 0;

    min-height: 1.15em;

    color: #ffffff;

    font-size:
        clamp(
            48px,
            7vw,
            100px
        );

    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -3px;

    text-shadow:
        0 5px 30px
        rgba(0, 0, 0, 0.25);

}


/* ==========================================================
   TYPING CURSOR
========================================================== */

.typing-cursor {

    display: inline-block;

    margin-left: 4px;

    color: #ffffff;

    font-weight: 300;

    animation:
        typingCursorBlink
        0.8s
        infinite;

}


@keyframes typingCursorBlink {

    0%,
    45% {

        opacity: 1;

    }

    46%,
    100% {

        opacity: 0;

    }

}


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

.hero-description {

    max-width: 720px;

    margin:
        25px auto 0;

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

    font-size:
        clamp(
            16px,
            2vw,
            21px
        );

    line-height: 1.65;

    font-weight: 400;

    text-shadow:
        0 3px 20px
        rgba(0, 0, 0, 0.30);

}


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

.hero-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 35px;

}


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

.hero-primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding:
        0 24px;

    color: #111111;

    background: #ffffff;

    border:
        1px solid
        #ffffff;

    border-radius: 100px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.hero-primary-btn i {

    font-size: 16px;

    transition:
        transform 0.3s ease;

}


.hero-primary-btn:hover {

    color: #111111;

    transform:
        translateY(-3px);

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

}


.hero-primary-btn:hover i {

    transform:
        translate(
            4px,
            -4px
        );

}


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

.hero-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:
        0 24px;

    color: #ffffff;

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

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

    border-radius: 100px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.hero-secondary-btn:hover {

    color: #ffffff;

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

    border-color:
        rgba(
            255,
            255,
            255,
            0.50
        );

    transform:
        translateY(-3px);

}


/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.hero-scroll {

    position: absolute;

    left: 35px;

    bottom: 30px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 14px;

    transform:
        rotate(-90deg)
        translateX(-100%);

    transform-origin:
        left top;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

    white-space: nowrap;

}


.hero-scroll-line {

    width: 50px;

    height: 1px;

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

}


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

.hero-sound-toggle {

    position: absolute;

    right: 35px;

    bottom: 30px;

    z-index: 5;

    min-height: 44px;

    padding:
        0 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #ffffff;

    background:
        rgba(
            0,
            0,
            0,
            0.30
        );

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

    border-radius: 100px;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.5px;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.hero-sound-toggle:hover {

    background:
        rgba(
            0,
            0,
            0,
            0.55
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.50
        );

    transform:
        translateY(-2px);

}


/* ==========================================================
   SOUND ICONS
========================================================== */

.sound-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

}


/* Default = muted */

.sound-unmuted {

    display: none;

}


/* When sound is active */

.hero-sound-toggle.sound-active
.sound-muted {

    display: none;

}


.hero-sound-toggle.sound-active
.sound-unmuted {

    display: inline-flex;

}


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

@media (max-width: 767px) {

    .hero-sound-toggle {

        right: 18px;

        bottom: 20px;

        width: 44px;

        height: 44px;

        min-height: 44px;

        padding: 0;

    }


    .hero-sound-toggle .sound-text {

        display: none;

    }


    .hero-sound-toggle .sound-icon {

        font-size: 16px;

    }

}


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

@media (max-width: 991px) {

    .hero {

        padding:
            90px 0 70px;

    }


    .hero-title {

        letter-spacing:
            -2px;

    }


    .hero-scroll {

        left: 20px;

        bottom: 25px;

    }

}


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

@media (max-width: 767px) {

    .hero {

        min-height: 100svh;

        height: 100svh;

        padding:
            90px 0 80px;

    }


    .hero-video {

        object-position:
            center center;

    }


    .hero-content-inner {

        width:
            calc(
                100% - 36px
            );

    }


    .hero-label {

        margin-bottom: 18px;

        font-size: 9px;

        letter-spacing: 2px;

    }


    .hero-label-line {

        width: 25px;

    }


    .hero-title {

        font-size:
            clamp(
                40px,
                11vw,
                58px
            );

        line-height:
            1.08;

        letter-spacing:
            -1.5px;

    }


    .hero-description {

        margin-top: 20px;

        font-size: 15px;

        line-height: 1.55;

    }


    .hero-buttons {

        flex-direction: column;

        width: 100%;

        margin-top: 28px;

        gap: 10px;

    }


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

        width: 100%;

        max-width: 300px;

    }


    .hero-scroll {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .hero-title {

        font-size:
            clamp(
                36px,
                11vw,
                50px
            );

    }


    .hero-description {

        font-size: 14px;

    }


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

        min-height: 48px;

    }

}


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

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

    .typing-cursor {

        animation: none;

    }

}
/* ==========================================================
   EVENT HIGHLIGHTS SECTION
========================================================== */

.event-highlights {

    position: relative;

    width: 100%;

    padding:
        120px 0 110px;

    overflow: hidden;

    background:
        var(--background-color);

}


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

.highlights-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 65px;

}


.highlights-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color:
        var(--accent-color);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.highlights-eyebrow::before {

    content: "";

    width: 35px;

    height: 1px;

    background:
        var(--accent-color);

}


.highlights-heading h2 {

    max-width: 750px;

    margin: 0;

    font-size:
        clamp(
            42px,
            6vw,
            82px
        );

    line-height: 0.98;

    letter-spacing: -3px;

    font-weight: 700;

}


.highlights-heading h2 span {

    display: block;

    color:
        var(--accent-color);

}


.highlights-description {

    max-width: 500px;

}


.highlights-description p {

    margin: 0;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 30%
        );

    font-size: 17px;

    line-height: 1.7;

}


/* ==========================================================
   CAROUSEL WRAPPER
========================================================== */

.highlights-carousel-wrapper {

    padding-left:
        max(
            20px,
            calc(
                (100vw - 1320px) / 2
            )
        );

    padding-right: 0;

}


/* ==========================================================
   CAROUSEL
========================================================== */

.highlights-carousel {

    display: flex;

    gap: 24px;

    overflow-x: auto;

    overflow-y: hidden;

    padding:
        0 0 20px;

    scroll-behavior: smooth;

    scroll-snap-type:
        x mandatory;

    scrollbar-width: none;

    -ms-overflow-style: none;

}


.highlights-carousel::-webkit-scrollbar {

    display: none;

}


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

.event-card {

    position: relative;

    flex:
        0 0
        clamp(
            340px,
            32vw,
            450px
        );

    scroll-snap-align: start;

    overflow: hidden;

    background:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 94%
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--default-color),
            transparent 90%
        );

    border-radius: 20px;

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;

}


.event-card:hover {

    transform:
        translateY(-8px);

    border-color:
        color-mix(
            in srgb,
            var(--accent-color),
            transparent 45%
        );

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

}


/* ==========================================================
   VIDEO WRAPPER
========================================================== */

.event-video-wrapper {

    position: relative;

    width: 100%;

    height:
        clamp(
            380px,
            38vw,
            500px
        );

    overflow: hidden;

    background: #111111;

}


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

.event-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        transform 0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.event-card:hover .event-video {

    transform:
        scale(1.06);

}


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

.event-video-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.05) 30%,
            rgba(0, 0, 0, 0.65) 100%
        );

    z-index: 1;

    pointer-events: none;

}


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

.event-play {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translate(
            -50%,
            -50%
        );

    color: #111111;

    background: #ffffff;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    z-index: 3;

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

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;

}


.event-play i {

    margin-left: 3px;

    font-size: 23px;

}


.event-play:hover {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);

}


/* Hide play button while playing */

.event-video-wrapper.is-playing
.event-play {

    opacity: 0;

    pointer-events: none;

}


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

.event-sound {

    position: absolute;

    right: 18px;

    bottom: 18px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        rgba(
            0,
            0,
            0,
            0.35
        );

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

    border-radius: 50%;

    cursor: pointer;

    z-index: 4;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}


.event-sound:hover {

    background:
        rgba(
            0,
            0,
            0,
            0.65
        );

    transform:
        scale(1.08);

}


.event-sound i {

    font-size: 15px;

}


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

.event-number {

    position: absolute;

    top: 20px;

    left: 20px;

    z-index: 3;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

}


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

.event-card-content {

    padding:
        27px 28px 30px;

}


.event-category {

    margin-bottom: 11px;

    color:
        var(--accent-color);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.event-card-content h3 {

    margin:
        0 0 13px;

    color:
        var(--heading-color);

    font-size:
        clamp(
            23px,
            2.2vw,
            30px
        );

    line-height: 1.12;

    letter-spacing: -0.8px;

}


.event-card-content p {

    min-height: 58px;

    margin:
        0 0 23px;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 30%
        );

    font-size: 14px;

    line-height: 1.6;

}


/* ==========================================================
   EVENT LINK
========================================================== */

.event-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--heading-color);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

}


.event-link i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--default-color),
            transparent 75%
        );

    border-radius: 50%;

    font-size: 13px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.event-link:hover {

    color:
        var(--accent-color);

}


.event-link:hover i {

    transform:
        translate(
            3px,
            -3px
        );

    background:
        var(--accent-color);

    color:
        var(--contrast-color);

    border-color:
        var(--accent-color);

}


/* ==========================================================
   CAROUSEL CONTROLS
========================================================== */

.highlights-controls {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 28px;

    padding-right:
        max(
            20px,
            calc(
                (100vw - 1320px) / 2
            )
        );

}


/* ==========================================================
   PROGRESS
========================================================== */

.highlights-progress {

    display: flex;

    align-items: center;

    gap: 13px;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 45%
        );

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

}


.highlights-progress > span:first-child {

    color:
        var(--heading-color);

}


.highlights-progress-line {

    position: relative;

    width: 180px;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 80%
        );

}


.highlights-progress-line span {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 20%;

    background:
        var(--accent-color);

    transition:
        width 0.5s ease;

}


/* ==========================================================
   ARROWS
========================================================== */

.highlights-arrows {

    display: flex;

    align-items: center;

    gap: 8px;

}


.highlights-arrows button {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--heading-color);

    background:
        transparent;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--default-color),
            transparent 78%
        );

    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


.highlights-arrows button:hover {

    background:
        var(--accent-color);

    border-color:
        var(--accent-color);

    color:
        var(--contrast-color);

    transform:
        translateY(-2px);

}


.highlights-arrows button i {

    font-size: 16px;

}


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

@media (max-width: 991px) {

    .event-highlights {

        padding:
            90px 0 80px;

    }


    .highlights-header {

        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 45px;

    }


    .highlights-heading h2 {

        font-size:
            clamp(
                42px,
                8vw,
                65px
            );

    }


    .highlights-carousel-wrapper {

        padding-left:
            25px;

    }


    .event-card {

        flex:
            0 0
            min(
                410px,
                65vw
            );

    }


    .event-video-wrapper {

        height:
            430px;

    }


    .highlights-controls {

        padding-right:
            25px;

    }

}


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

@media (max-width: 767px) {

    .event-highlights {

        padding:
            75px 0 70px;

    }


    .highlights-header {

        width:
            calc(
                100% - 36px
            );

        margin:
            0 auto 35px;

    }


    .highlights-eyebrow {

        font-size: 9px;

        letter-spacing: 2px;

    }


    .highlights-heading h2 {

        font-size:
            clamp(
                39px,
                11vw,
                55px
            );

        letter-spacing:
            -2px;

    }


    .highlights-description p {

        font-size: 15px;

        line-height: 1.6;

    }


    .highlights-carousel-wrapper {

        padding-left:
            18px;

    }


    .highlights-carousel {

        gap: 15px;

        padding-bottom:
            12px;

        scroll-snap-type:
            x mandatory;

    }


    .event-card {

        flex:
            0 0
            calc(
                100vw - 36px
            );

        border-radius:
            16px;

    }


    .event-video-wrapper {

        height:
            430px;

    }


    .event-card-content {

        padding:
            23px 22px 25px;

    }


    .event-card-content h3 {

        font-size:
            25px;

    }


    .event-card-content p {

        min-height:
            auto;

        font-size:
            13px;

    }


    .event-play {

        width: 56px;

        height: 56px;

    }


    .highlights-controls {

        margin-top:
            22px;

        padding:
            0 18px 0 0;

    }


    .highlights-progress-line {

        width:
            100px;

    }


    .highlights-arrows button {

        width: 43px;

        height: 43px;

    }

}


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

@media (max-width: 480px) {

    .event-video-wrapper {

        height:
            390px;

    }


    .event-card-content h3 {

        font-size:
            23px;

    }


    .highlights-progress-line {

        width:
            75px;

    }

}


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

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

    .highlights-carousel {

        scroll-behavior:
            auto;

    }


    .event-card,
    .event-video,
    .event-play,
    .event-sound,
    .event-link i {

        transition:
            none;

    }

}


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

.services {

    position: relative;

    background:
        var(--background-color);

}


/* ==============================================================
# SERVICES INTRO
============================================================== */

.services-intro {

    margin-bottom: 30px;

}


.services-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: var(--accent-color);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.services-label::before {

    content: "";

    width: 28px;

    height: 1px;

    background:
        var(--accent-color);

}


.services-intro h3 {

    max-width: 500px;

    margin: 0 0 15px;

    color:
        var(--heading-color);

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

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    line-height: 1.05;

    letter-spacing: -1.5px;

}


.services-intro h3 span {

    color:
        var(--accent-color);

}


.services-intro p {

    max-width: 480px;

    margin: 0;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 30%
        );

    font-size: 15px;

    line-height: 1.7;

}


/* ==============================================================
# SERVICES ACCORDION
============================================================== */

.services-accordion {

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

}


/* Accordion item */

.services-accordion .accordion-item {

    background:
        transparent;

    border: 0;

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

}


/* ==============================================================
# ACCORDION BUTTON
============================================================== */

.services-accordion .accordion-button {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    width: 100%;

    min-height: 82px;

    padding:
        18px 5px;

    color:
        var(--heading-color);

    background:
        transparent;

    box-shadow: none;

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

    font-size: 19px;

    font-weight: 600;

    text-align: left;

}


/* Remove bootstrap focus */

.services-accordion
.accordion-button:focus {

    border: 0;

    box-shadow: none;

}


/* Remove bootstrap white background */

.services-accordion
.accordion-button:not(.collapsed) {

    color:
        var(--accent-color);

    background:
        transparent;

    box-shadow: none;

}


/* ==============================================================
# SERVICE NUMBER
============================================================== */

.service-number {

    flex:
        0 0 38px;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 55%
        );

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;

}


.accordion-button:not(.collapsed)
.service-number {

    color:
        var(--accent-color);

}


/* ==============================================================
# SERVICE TITLE
============================================================== */

.service-title {

    flex: 1;

    transition:
        color 0.3s ease;

}


/* ==============================================================
# BOOTSTRAP CHEVRON
============================================================== */

.services-accordion
.accordion-button::after {

    width: 25px;

    height: 25px;

    margin-left: auto;

    background-size:
        14px;

    border-radius: 50%;

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

    background-position:
        center;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;

}


.services-accordion
.accordion-button:not(.collapsed)::after {

    background-color:
        var(--accent-color);

}


/* ==============================================================
# ACCORDION BODY
============================================================== */

.services-accordion
.accordion-body {

    padding:
        0 50px 25px 63px;

}


.services-accordion
.accordion-body p {

    max-width: 500px;

    margin:
        0 0 18px;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 30%
        );

    font-size: 14px;

    line-height: 1.7;

}


/* ==============================================================
# SERVICE TAGS
============================================================== */

.service-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.service-tags span {

    padding:
        6px 11px;

    color:
        color-mix(
            in srgb,
            var(--default-color),
            transparent 20%
        );

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

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

    border-radius: 50px;

    font-size: 10px;

    letter-spacing: 0.3px;

}


/* ==============================================================
# PHOTO GRID
============================================================== */

.event-photo-grid {

    display: grid;

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

    grid-template-rows:
        repeat(2, minmax(250px, 320px));

    gap: 14px;

}


/* ==============================================================
# PHOTO CARD
============================================================== */

.event-photo-card {

    position: relative;

    overflow: hidden;

    min-height: 250px;

    border-radius: 14px;

    background:
        var(--surface-color);

    cursor: pointer;

}


/* First image */

.event-photo-large {

    grid-row:
        span 1;

}


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

.event-photo-card img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ==============================================================
# IMAGE OVERLAY
============================================================== */

.event-photo-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 25px;

    background:
        linear-gradient(
            to top,
            rgba(
                0,
                0,
                0,
                0.85
            ) 0%,
            rgba(
                0,
                0,
                0,
                0.35
            ) 45%,
            rgba(
                0,
                0,
                0,
                0
            ) 75%
        );

    opacity: 0;

    transition:
        opacity 0.45s ease;

}


/* ==============================================================
# PHOTO CONTENT
============================================================== */

.event-photo-content {

    width: 100%;

    transform:
        translateY(15px);

    transition:
        transform 0.45s
        ease;

}


.event-photo-content span {

    display: block;

    margin-bottom: 8px;

    color:
        var(--accent-color);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.event-photo-content h3 {

    max-width: 280px;

    margin: 0;

    color: #ffffff;

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

    font-size:
        clamp(
            20px,
            2vw,
            28px
        );

    line-height: 1.1;

}


/* Arrow */

.event-photo-content i {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #ffffff;

    background:
        var(--accent-color);

    border-radius: 50%;

    font-size: 14px;

}


/* ==============================================================
# PHOTO HOVER
============================================================== */

.event-photo-card:hover img {

    transform:
        scale(1.08);

}


.event-photo-card:hover
.event-photo-overlay {

    opacity: 1;

}


.event-photo-card:hover
.event-photo-content {

    transform:
        translateY(0);

}


/* ==============================================================
# TOUCH DEVICES
============================================================== */

@media (hover: none) {

    .event-photo-overlay {

        opacity: 1;

        background:
            linear-gradient(
                to top,
                rgba(
                    0,
                    0,
                    0,
                    0.8
                ) 0%,
                rgba(
                    0,
                    0,
                    0,
                    0
                ) 70%
            );

    }


    .event-photo-content {

        transform:
            translateY(0);

    }

}


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

@media (max-width: 991px) {

    .services-intro {

        margin-bottom: 25px;

    }


    .event-photo-grid {

        grid-template-rows:
            repeat(
                2,
                300px
            );

    }

}


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

@media (max-width: 767px) {

    .services {

        padding-top:
            70px;

    }


    .services-intro h3 {

        font-size:
            36px;

    }


    .services-accordion
    .accordion-button {

        min-height:
            72px;

        padding:
            15px 0;

        font-size:
            17px;

        gap:
            12px;

    }


    .service-number {

        flex:
            0 0 30px;

        font-size:
            10px;

    }


    .services-accordion
    .accordion-body {

        padding:
            0 35px 22px 42px;

    }


    .event-photo-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            repeat(
                2,
                240px
            );

        gap:
            10px;

    }


    .event-photo-card {

        min-height:
            220px;

        border-radius:
            10px;

    }


    .event-photo-overlay {

        padding:
            18px;

    }


    .event-photo-content h3 {

        font-size:
            18px;

    }


    .event-photo-content i {

        width:
            32px;

        height:
            32px;

        font-size:
            12px;

    }

}


/* ==============================================================
# SMALL MOBILE
============================================================== */

@media (max-width: 480px) {

    .event-photo-grid {

        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(
                4,
                270px
            );

    }


    .event-photo-card {

        min-height:
            270px;

    }

}

/* ==============================================================
# COMPANY ABOUT SECTION
============================================================== */

.company-about {

    position: relative;

    min-height: 850px;

    display: flex;

    align-items: center;

    padding:
        140px 0;

    overflow: hidden;

    background:
        #050505;

}


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

.company-about .about-video {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

}


.company-about
.about-video-element {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    min-width: 100%;

    min-height: 100%;

    transform:
        translate(-50%, -50%);

    object-fit: cover;

}


/* ==============================================================
# VIDEO OVERLAY
============================================================== */

.company-about
.about-video-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.94) 0%,
            rgba(0, 0, 0, 0.82) 40%,
            rgba(0, 0, 0, 0.62) 70%,
            rgba(0, 0, 0, 0.78) 100%
        );

}


/* Additional cinematic gradient */

.company-about
.about-video-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 75% 50%,
            rgba(
                212,
                175,
                55,
                0.10
            ),
            transparent 35%
        );

}


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

.company-about
.container {

    position: relative;

    z-index: 3;

}


/* ==============================================================
# ABOUT CONTENT
============================================================== */

.about-content {

    max-width: 720px;

}


/* ==============================================================
# EYEBROW
============================================================== */

.about-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color:
        var(--accent-color);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

}


.about-eyebrow-line {

    display: inline-block;

    width: 40px;

    height: 1px;

    background:
        var(--accent-color);

}


/* ==============================================================
# MAIN HEADING
============================================================== */

.about-content h2 {

    max-width: 700px;

    margin: 0 0 25px;

    color:
        #ffffff;

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

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    font-weight: 700;

    line-height: 1.02;

    letter-spacing:
        -3px;

}


/* Gold text */

.about-content h2 span {

    color:
        var(--accent-color);

}


/* Italic emphasis */

.about-content h2 em {

    color:
        var(--accent-color);

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

    font-style:
        italic;

    font-weight:
        500;

}


/* ==============================================================
# SUB HEADING
============================================================== */

.about-content h4 {

    max-width: 600px;

    margin:
        0 0 25px;

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

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

    font-size:
        clamp(
            20px,
            2vw,
            27px
        );

    font-weight:
        500;

    line-height:
        1.4;

}


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

.about-content p {

    max-width:
        650px;

    margin:
        0 0 15px;

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

    font-size:
        15px;

    line-height:
        1.8;

}


/* ==============================================================
# HIGHLIGHTS
============================================================== */

.about-highlights {

    display:
        flex;

    align-items:
        center;

    gap:
        0;

    margin:
        35px 0;

}


.about-highlight {

    min-width:
        125px;

    padding:
        0 25px;

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

}


.about-highlight:first-child {

    padding-left:
        0;

}


.about-highlight:last-child {

    border-right:
        0;

}


.about-highlight strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--accent-color);

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

    font-size:
        30px;

    line-height:
        1;

}


.about-highlight span {

    display:
        block;

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

    font-size:
        10px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


/* ==============================================================
# ABOUT CTA
============================================================== */

.about-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 22px;

    color:
        #050505;

    background:
        var(--accent-color);

    border:
        1px solid
        var(--accent-color);

    border-radius:
        50px;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.5px;

    text-decoration:
        none;

    transition:
        all 0.35s ease;

}


.about-cta i {

    font-size:
        14px;

    transition:
        transform 0.35s ease;

}


.about-cta:hover {

    color:
        #050505;

    background:
        #F1D77A;

    border-color:
        #F1D77A;

    transform:
        translateY(-2px);

}


.about-cta:hover i {

    transform:
        translate(
            3px,
            -3px
        );

}


/* ==============================================================
# FOUNDERS WRAPPER
============================================================== */

.founders-wrapper {

    position:
        relative;

    max-width:
        480px;

    margin-left:
        auto;

}


/* ==============================================================
# FOUNDERS LABEL
============================================================== */

.founders-label {

    position:
        absolute;

    top:
        -20px;

    left:
        -25px;

    z-index:
        5;

    padding:
        10px 15px;

    background:
        var(--accent-color);

    color:
        #050505;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


/* ==============================================================
# FOUNDER CARD
============================================================== */

.founder-card {

    position:
        relative;

    overflow:
        hidden;

    background:
        rgba(
            15,
            15,
            15,
            0.75
        );

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

    box-shadow:
        0 30px 80px
        rgba(
            0,
            0,
            0,
            0.45
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


/* ==============================================================
# FOUNDER IMAGE
============================================================== */

.founder-image {

    position:
        relative;

    height:
        500px;

    overflow:
        hidden;

}


.founder-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(
                0,
                0,
                0,
                0.85
            ) 100%
        );

    z-index:
        1;

}


.founder-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.founder-card:hover
.founder-image img {

    transform:
        scale(
            1.06
        );

}


/* ==============================================================
# FOUNDER INFO
============================================================== */

.founder-info {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        3;

    padding:
        30px;

}


/* Small title */

.founder-small-title {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--accent-color);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


/* Founder heading */

.founder-info h3 {

    margin:
        0 0 12px;

    color:
        #ffffff;

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

    font-size:
        30px;

    line-height:
        1.1;

}


/* Founder description */

.founder-info p {

    max-width:
        370px;

    margin:
        0 0 18px;

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

    font-size:
        13px;

    line-height:
        1.6;

}


/* ==============================================================
# FOUNDER NAMES
============================================================== */

.founder-names {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding-top:
        15px;

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

}


.founder-names span {

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

    font-size:
        9px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.founder-names strong {

    color:
        #ffffff;

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

    font-size:
        16px;

    font-weight:
        600;

}


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

@media (max-width: 991px) {

    .company-about {

        min-height:
            auto;

        padding:
            110px 0;

    }


    .about-content {

        max-width:
            100%;

    }


    .founders-wrapper {

        max-width:
            550px;

        margin:
            40px auto 0;

    }


    .founder-image {

        height:
            550px;

    }

}


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

@media (max-width: 767px) {

    .company-about {

        padding:
            80px 0;

    }


    /* Darker mobile overlay */

    .company-about
    .about-video-overlay {

        background:
            rgba(
                0,
                0,
                0,
                0.84
            );

    }


    .about-eyebrow {

        margin-bottom:
            18px;

        font-size:
            9px;

        letter-spacing:
            3px;

    }


    .about-eyebrow-line {

        width:
            25px;

    }


    .about-content h2 {

        font-size:
            clamp(
                40px,
                12vw,
                55px
            );

        letter-spacing:
            -2px;

    }


    .about-content h4 {

        font-size:
            19px;

    }


    .about-content p {

        font-size:
            14px;

        line-height:
            1.75;

    }


    .about-highlights {

        margin:
            28px 0;

    }


    .about-highlight {

        min-width:
            auto;

        flex:
            1;

        padding:
            0 12px;

    }


    .about-highlight strong {

        font-size:
            25px;

    }


    .about-highlight span {

        font-size:
            8px;

    }


    .founders-wrapper {

        margin-top:
            45px;

    }


    .founders-label {

        top:
            -15px;

        left:
            15px;

    }


    .founder-image {

        height:
            450px;

    }


    .founder-info {

        padding:
            22px;

    }


    .founder-info h3 {

        font-size:
            25px;

    }

}


/* ==============================================================
# SMALL MOBILE
============================================================== */

@media (max-width: 480px) {

    .company-about {

        padding:
            70px 0;

    }


    .about-content h2 {

        font-size:
            39px;

    }


    .about-highlights {

        width:
            100%;

    }


    .about-highlight {

        padding:
            0 8px;

    }


    .about-highlight strong {

        font-size:
            22px;

    }


    .about-highlight span {

        font-size:
            7px;

        letter-spacing:
            0.5px;

    }


    .founder-image {

        height:
            400px;

    }


    .founder-info {

        padding:
            18px;

    }


    .founder-info h3 {

        font-size:
            22px;

    }


    .founder-info p {

        font-size:
            12px;

    }

}

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

.testimonials {

    position:
        relative;

    background:
        #050505;

    overflow:
        hidden;

}


/* ==============================================================
# BACKGROUND DECORATION
============================================================== */

.testimonials::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -250px;

    top:
        50%;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        rgba(
            212,
            175,
            55,
            0.045
        );

    filter:
        blur(
            100px
        );

    pointer-events:
        none;

}


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

.testimonial-heading {

    position:
        relative;

    z-index:
        2;

    max-width:
        700px;

    margin:
        0 auto 65px;

    text-align:
        center;

}


.testimonial-eyebrow {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--accent-color);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        4px;

}


.testimonial-heading h2 {

    margin:
        0 0 20px;

    color:
        #ffffff;

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

    font-size:
        clamp(
            42px,
            5vw,
            64px
        );

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        -2px;

}


.testimonial-heading h2 span {

    color:
        var(--accent-color);

    font-style:
        italic;

    font-weight:
        500;

}


.testimonial-heading p {

    max-width:
        580px;

    margin:
        0 auto;

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

    font-size:
        14px;

    line-height:
        1.8;

}


/* ==============================================================
# MAIN CAROUSEL
============================================================== */

.testimonial-carousel {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        42% 58%;

    max-width:
        1050px;

    min-height:
        500px;

    margin:
        0 auto;

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

    border-radius:
        30px;

    background:
        #0d0d0d;

    box-shadow:
        0 30px 100px
        rgba(
            0,
            0,
            0,
            0.45
        );

}


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

.testimonial-image-wrapper {

    position:
        relative;

    min-height:
        500px;

    padding:
        35px;

}


/* ==============================================================
# IMAGE FRAME
============================================================== */

.testimonial-image-frame {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    min-height:
        430px;

    overflow:
        hidden;

    border-radius:
        22px;

    background:
        #111111;

}


.testimonial-image-frame img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        opacity
        0.4s ease,
        transform
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.testimonial-image-frame:hover img {

    transform:
        scale(
            1.04
        );

}


/* ==============================================================
# IMAGE OVERLAY
============================================================== */

.testimonial-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(
                0,
                0,
                0,
                0.45
            )
        );

    pointer-events:
        none;

}


/* ==============================================================
# GOLD CIRCLE
============================================================== */

.testimonial-gold-circle {

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        5px;

    top:
        25px;

    border:
        1px solid
        var(--accent-color);

    border-radius:
        50%;

    opacity:
        0.5;

}


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

.testimonial-quote-icon {

    position:
        absolute;

    left:
        15px;

    bottom:
        25px;

    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            212,
            175,
            55,
            0.5
        );

    border-radius:
        50%;

    background:
        #050505;

    color:
        var(--accent-color);

    font-size:
        30px;

    z-index:
        5;

}


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

.testimonial-content {

    display:
        flex;

    align-items:
        center;

    padding:
        55px 65px;

}


.testimonial-content-inner {

    width:
        100%;

}


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

.testimonial-stars {

    display:
        flex;

    gap:
        5px;

    margin-bottom:
        28px;

}


.testimonial-stars i {

    color:
        var(--accent-color);

    font-size:
        13px;

}


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

.testimonial-content blockquote {

    margin:
        0;

    max-width:
        580px;

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

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

    font-size:
        clamp(
            21px,
            2.2vw,
            30px
        );

    font-weight:
        400;

    line-height:
        1.55;

    letter-spacing:
        -0.3px;

}


/* ==============================================================
# CLIENT
============================================================== */

.testimonial-client {

    margin-top:
        35px;

    padding-top:
        25px;

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

}


.testimonial-client h3 {

    margin:
        0 0 7px;

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        600;

}


.testimonial-client span {

    color:
        var(--accent-color);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}


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

.testimonial-navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        40px;

}


.testimonial-nav-btn {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        transparent;

    color:
        #ffffff;

    cursor:
        pointer;

    transition:
        all 0.3s ease;

}


.testimonial-nav-btn:hover {

    color:
        #050505;

    background:
        var(--accent-color);

    border-color:
        var(--accent-color);

    transform:
        translateY(
            -3px
        );

}


/* ==============================================================
# PROGRESS
============================================================== */

.testimonial-progress {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.testimonial-progress span {

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

    font-size:
        10px;

    font-weight:
        600;

}


#testimonialCurrent {

    color:
        var(--accent-color);

}


.testimonial-line {

    width:
        55px;

    height:
        1px;

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

}


/* ==============================================================
# BOTTOM TEXT
============================================================== */

.testimonial-bottom-text {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        35px;

}


.testimonial-bottom-text span {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

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

    font-size:
        10px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.testimonial-bottom-text i {

    color:
        var(--accent-color);

}


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

@media (max-width: 991px) {

    .testimonial-carousel {

        grid-template-columns:
            1fr;

        max-width:
            650px;

    }


    .testimonial-image-wrapper {

        min-height:
            430px;

    }


    .testimonial-image-frame {

        min-height:
            380px;

    }


    .testimonial-content {

        padding:
            45px;

    }

}


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

@media (max-width: 767px) {

    .testimonials {

        padding:
            80px 0;

    }


    .testimonial-heading {

        margin-bottom:
            45px;

    }


    .testimonial-heading h2 {

        font-size:
            45px;

    }


    .testimonial-heading p {

        font-size:
            13px;

    }


    .testimonial-carousel {

        border-radius:
            24px;

    }


    .testimonial-image-wrapper {

        min-height:
            380px;

        padding:
            20px;

    }


    .testimonial-image-frame {

        min-height:
            340px;

        border-radius:
            18px;

    }


    .testimonial-gold-circle {

        width:
            60px;

        height:
            60px;

        right:
            0;

        top:
            15px;

    }


    .testimonial-quote-icon {

        width:
            55px;

        height:
            55px;

        left:
            5px;

        bottom:
            10px;

        font-size:
            24px;

    }


    .testimonial-content {

        padding:
            35px 25px 30px;

    }


    .testimonial-stars {

        margin-bottom:
            20px;

    }


    .testimonial-content blockquote {

        font-size:
            19px;

        line-height:
            1.55;

    }


    .testimonial-client {

        margin-top:
            25px;

        padding-top:
            20px;

    }


    .testimonial-navigation {

        margin-top:
            30px;

    }


    .testimonial-nav-btn {

        width:
            42px;

        height:
            42px;

    }

}


/* ==============================================================
# SMALL MOBILE
============================================================== */

@media (max-width: 400px) {

    .testimonial-image-wrapper {

        min-height:
            330px;

    }


    .testimonial-image-frame {

        min-height:
            290px;

    }


    .testimonial-content {

        padding:
            30px 20px;

    }


    .testimonial-content blockquote {

        font-size:
            17px;

    }


    .testimonial-line {

        width:
            35px;

    }

}

/*--------------------------------------------------------------
# Location Section
--------------------------------------------------------------*/

.location-section {
  background: #000000;
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle background glow */
.location-section::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  left: -250px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent-color);
  opacity: 0.035;
  filter: blur(100px);
  border-radius: 50%;
  pointer-events: none;
}

.location-section::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  right: -200px;
  bottom: -200px;
  background: var(--accent-color);
  opacity: 0.025;
  filter: blur(100px);
  border-radius: 50%;
  pointer-events: none;
}


/*--------------------------------------------------------------
# Location Heading
--------------------------------------------------------------*/

.location-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}

.location-eyebrow {
  display: inline-block;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 15px;
}

.location-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -2px;
}

.location-heading h2 span {
  color: var(--accent-color);
}

.location-heading p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  line-height: 1.8;
  margin: 22px auto 0;
  max-width: 560px;
}


/*--------------------------------------------------------------
# Location Info
--------------------------------------------------------------*/

.location-info {
  height: 100%;
  min-height: 460px;
  padding: 42px;
  position: relative;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.018)
    );
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.4s ease;
}

.location-info::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.15);
}

.location-info::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: -125px;
  top: -125px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.06);
}

.location-info:hover {
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateY(-5px);
}


/*--------------------------------------------------------------
# Location Number + Icon
--------------------------------------------------------------*/

.location-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}

.location-number {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.3);
}

.location-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--accent-color);
  font-size: 25px;
  transition: all 0.4s ease;
}

.location-info:hover .location-icon {
  background: var(--accent-color);
  color: #000;
  transform: rotate(8deg);
}


/*--------------------------------------------------------------
# Location Text
--------------------------------------------------------------*/

.location-info h3 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 15px;
}

.location-address {
  color: rgba(255, 255, 255, 0.65);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 30px;
}


/*--------------------------------------------------------------
# Location Details
--------------------------------------------------------------*/

.location-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.6;
}

.location-detail i {
  color: var(--accent-color);
  font-size: 18px;
  flex-shrink: 0;
}


/*--------------------------------------------------------------
# Directions Button
--------------------------------------------------------------*/

.location-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  width: fit-content;
  margin-top: 25px;
  padding: 13px 20px 13px 24px;
  border: 1px solid var(--accent-color);
  border-radius: 50px;
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.35s ease;
}

.location-button i {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: #000000;
  border-radius: 50%;
  transition: all 0.35s ease;
}

.location-button:hover {
  background: var(--accent-color);
  color: #000000;
}

.location-button:hover i {
  transform: rotate(45deg);
}


/*--------------------------------------------------------------
# Map
--------------------------------------------------------------*/

.location-map {
  height: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #111111;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/*
 * Dark overlay over Google Maps.
 * This gives the map a darker appearance while keeping
 * the location and roads visible.
 */
.location-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.12),
      rgba(0, 0, 0, 0.25)
    );
  z-index: 2;
}

.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter:
    grayscale(1)
    invert(0.92)
    contrast(1.15)
    brightness(0.72);
}


/*--------------------------------------------------------------
# Map Label
--------------------------------------------------------------*/

.map-label {
  position: absolute;
  left: 25px;
  top: 25px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.map-label i {
  color: var(--accent-color);
  font-size: 15px;
}


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 991px) {

  .location-section {
    padding: 80px 0;
  }

  .location-heading {
    margin-bottom: 45px;
  }

  .location-info {
    min-height: auto;
    padding: 35px;
  }

  .location-map {
    min-height: 430px;
  }

}


@media (max-width: 767px) {

  .location-section {
    padding: 70px 0;
  }

  .location-heading {
    margin-bottom: 35px;
  }

  .location-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .location-heading h2 {
    font-size: 44px;
    letter-spacing: -1px;
  }

  .location-heading p {
    font-size: 14px;
    line-height: 1.7;
    padding: 0 15px;
  }

  .location-info {
    min-height: auto;
    padding: 30px 25px;
    border-radius: 22px;
  }

  .location-info-top {
    margin-bottom: 25px;
  }

  .location-icon {
    width: 54px;
    height: 54px;
    font-size: 21px;
  }

  .location-info h3 {
    font-size: 27px;
  }

  .location-address {
    font-size: 15px;
  }

  .location-map {
    min-height: 380px;
    border-radius: 22px;
  }

  .map-label {
    left: 15px;
    top: 15px;
    font-size: 10px;
    padding: 9px 13px;
  }

}


@media (max-width: 480px) {

  .location-section {
    padding: 60px 0;
  }

  .location-heading h2 {
    font-size: 38px;
  }

  .location-info {
    padding: 25px 20px;
  }

  .location-map {
    min-height: 330px;
  }

  .location-button {
    width: 100%;
  }

}
/* ==============================================================
# PORTFOLIO SECTION
============================================================== */
/* ==============================================================
# PORTFOLIO SECTION
============================================================== */

.portfolio {

    background:
        #050505;

    padding:
        120px 0;

    overflow:
        hidden;

}


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

.portfolio .section-title {

    max-width:
        800px;

    margin:
        0 auto;

    padding-bottom:
        50px;

    text-align:
        center;

}


.portfolio-kicker {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--accent-color);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        4px;

}


.portfolio .section-title h2 {

    margin:
        0 0 20px;

    padding:
        0;

    color:
        #ffffff;

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

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -2px;

}


.portfolio .section-title h2::after {

    display:
        none;

}


.portfolio .section-title h2 span {

    color:
        var(--accent-color);

    font-style:
        italic;

    font-weight:
        500;

}


.portfolio .section-title p {

    max-width:
        650px;

    margin:
        0 auto;

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

    font-size:
        15px;

    line-height:
        1.8;

}


/* ==============================================================
# FILTERS
============================================================== */

.portfolio-filters {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        40px;

}


.portfolio-filter {

    padding:
        11px 21px;

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

    border-radius:
        50px;

    background:
        transparent;

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

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

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        0.5px;

    cursor:
        pointer;

    transition:
        all 0.3s ease;

}


.portfolio-filter:hover {

    color:
        #ffffff;

    border-color:
        var(--accent-color);

}


.portfolio-filter.active {

    color:
        #050505;

    background:
        var(--accent-color);

    border-color:
        var(--accent-color);

    box-shadow:
        0 5px 25px
        rgba(
            212,
            175,
            55,
            0.15
        );

}


/* ==============================================================
# UNIFORM GRID
============================================================== */

.portfolio-grid {

    display:
        grid;

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

    gap:
        18px;

}


/* ==============================================================
# IMAGE CARD
============================================================== */

.portfolio-card {

    position:
        relative;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

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

    border-radius:
        20px;

    background:
        #111111;

    transition:
        all 0.4s ease;

}


/* ==============================================================
# IMAGE LINK
============================================================== */

.portfolio-image {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    overflow:
        hidden;

    border-radius:
        inherit;

}


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

.portfolio-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


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

.portfolio-image::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

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

    transition:
        background 0.4s ease;

}


.portfolio-card:hover
.portfolio-image::before {

    background:
        rgba(
            0,
            0,
            0,
            0.25
        );

}


/* ==============================================================
# IMAGE ZOOM
============================================================== */

.portfolio-card:hover
.portfolio-image img {

    transform:
        scale(
            1.08
        );

}


/* ==============================================================
# GOLD BORDER ON HOVER
============================================================== */

.portfolio-card:hover {

    border-color:
        rgba(
            212,
            175,
            55,
            0.7
        );

    box-shadow:
        0 15px 45px
        rgba(
            0,
            0,
            0,
            0.45
        ),
        0 0 0 1px
        rgba(
            212,
            175,
            55,
            0.12
        );

    transform:
        translateY(
            -4px
        );

}


/* ==============================================================
# FULLSCREEN BUTTON
============================================================== */

.portfolio-view {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        3;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(
            0,
            0,
            0,
            0.4
        );

    backdrop-filter:
        blur(
            8px
        );

    -webkit-backdrop-filter:
        blur(
            8px
        );

    font-size:
        17px;

    text-decoration:
        none;

    opacity:
        0;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            0.7
        );

    transition:
        all 0.35s ease;

}


.portfolio-card:hover
.portfolio-view {

    opacity:
        1;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            1
        );

}


.portfolio-view:hover {

    color:
        #050505;

    background:
        var(--accent-color);

    border-color:
        var(--accent-color);

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            1.08
        );

}


/* ==============================================================
# BOTTOM BUTTON
============================================================== */

.portfolio-more {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        50px;

}


.portfolio-more-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 24px;

    border:
        1px solid
        var(--accent-color);

    border-radius:
        50px;

    color:
        var(--accent-color);

    background:
        transparent;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.5px;

    text-decoration:
        none;

    transition:
        all 0.3s ease;

}


.portfolio-more-btn i {

    transition:
        transform 0.3s ease;

}


.portfolio-more-btn:hover {

    color:
        #050505;

    background:
        var(--accent-color);

}


.portfolio-more-btn:hover i {

    transform:
        translate(
            3px,
            -3px
        );

}


/* ==============================================================
# LARGE TABLET
============================================================== */

@media (max-width: 1199px) {

    .portfolio-grid {

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

    }

}


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

@media (max-width: 991px) {

    .portfolio {

        padding:
            100px 0;

    }


    .portfolio-grid {

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

        gap:
            14px;

    }

}


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

@media (max-width: 767px) {

    .portfolio {

        padding:
            80px 0;

    }


    .portfolio .section-title {

        padding-bottom:
            40px;

    }


    .portfolio .section-title h2 {

        font-size:
            43px;

    }


    .portfolio .section-title p {

        font-size:
            13px;

    }


    /* Horizontal filter scrolling */

    .portfolio-filters {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding:
            3px 2px 12px;

        margin-bottom:
            28px;

        scrollbar-width:
            none;

    }


    .portfolio-filters::-webkit-scrollbar {

        display:
            none;

    }


    .portfolio-filter {

        flex:
            0 0 auto;

        padding:
            10px 17px;

        font-size:
            10px;

    }


    /* Two equal columns */

    .portfolio-grid {

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

        gap:
            10px;

    }


    .portfolio-card {

        border-radius:
            14px;

    }


    .portfolio-view {

        width:
            40px;

        height:
            40px;

        font-size:
            14px;

    }

}


/* ==============================================================
# SMALL MOBILE
============================================================== */

@media (max-width: 400px) {

    .portfolio-grid {

        gap:
            8px;

    }


    .portfolio-card {

        border-radius:
            12px;

    }


    .portfolio-view {

        width:
            35px;

        height:
            35px;

        font-size:
            12px;

    }

}
/* ==============================================================
# MEET OUR TEAM
============================================================== */

.team-section {

    position: relative;

    padding:
        130px 0;

    background:
        #050505;

    color:
        #ffffff;

    overflow:
        hidden;

}


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

.team-section::before {

    content:
        "";

    position:
        absolute;

    width:
        550px;

    height:
        550px;

    top:
        50%;

    right:
        -200px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        rgba(
            212,
            175,
            55,
            0.06
        );

    filter:
        blur(
            100px
        );

    pointer-events:
        none;

}


/* ==============================================================
# INTRO
============================================================== */

.team-intro {

    position:
        relative;

    z-index:
        2;

    max-width:
        500px;

}


.team-eyebrow {

    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        var(--accent-color);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        4px;

}


.team-intro h2 {

    margin:
        0 0 25px;

    color:
        #ffffff;

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

    font-size:
        clamp(
            50px,
            6vw,
            78px
        );

    font-weight:
        700;

    line-height:
        0.95;

    letter-spacing:
        -3px;

}


.team-intro h2 span {

    display:
        block;

    color:
        var(--accent-color);

    font-style:
        italic;

    font-weight:
        500;

}


.team-description {

    max-width:
        450px;

    margin:
        0;

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

    font-size:
        15px;

    line-height:
        1.9;

}


/* ==============================================================
# CURRENT MEMBER INFO
============================================================== */

.team-current {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        45px;

}


.team-current-line {

    width:
        35px;

    height:
        1px;

    background:
        var(--accent-color);

}


.team-current-number {

    color:
        var(--accent-color);

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

    font-size:
        12px;

    font-weight:
        700;

}


.team-current-info {

    padding-left:
        5px;

}


.team-current-info h3 {

    margin:
        0 0 5px;

    color:
        #ffffff;

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

    font-size:
        18px;

    font-weight:
        600;

}


.team-current-info p {

    margin:
        0;

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

    font-size:
        12px;

}


/* ==============================================================
# SCROLL HINT
============================================================== */

.team-scroll-hint {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        55px;

}


.team-scroll-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            212,
            175,
            55,
            0.5
        );

    border-radius:
        50%;

    color:
        var(--accent-color);

    font-size:
        16px;

}


.team-scroll-hint strong {

    display:
        block;

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

    font-size:
        11px;

    font-weight:
        600;

}


.team-scroll-hint small {

    display:
        block;

    margin-top:
        3px;

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

    font-size:
        10px;

}


/* ==============================================================
# TEAM STAGE
============================================================== */

.team-stage {

    position:
        relative;

    width:
        100%;

    max-width:
        570px;

    height:
        650px;

    margin:
        0 auto;

    perspective:
        1200px;

    touch-action:
        pan-y;

}


/* ==============================================================
# TEAM CARDS
============================================================== */

.team-card {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        min(
            400px,
            75%
        );

    height:
        540px;

    overflow:
        hidden;

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

    border-radius:
        35px;

    background:
        #111111;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            0.82
        )
        translateX(
            120px
        )
        rotate(
            5deg
        );

    opacity:
        0;

    box-shadow:
        0 30px 80px
        rgba(
            0,
            0,
            0,
            0.5
        );

    transition:
        transform
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        opacity
        0.5s ease,
        border-color
        0.4s ease;

    pointer-events:
        none;

}


.team-card img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

}


/* ==============================================================
# ACTIVE CARD
============================================================== */

.team-card.active {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            1
        )
        translateX(
            0
        )
        rotate(
            0deg
        );

    opacity:
        1;

    z-index:
        10;

    border-color:
        rgba(
            212,
            175,
            55,
            0.7
        );

    pointer-events:
        auto;

}


/* ==============================================================
# CARD 2
============================================================== */

.team-card.next-1 {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            0.94
        )
        translateX(
            45px
        )
        rotate(
            4deg
        );

    opacity:
        0.8;

    z-index:
        9;

}


/* ==============================================================
# CARD 3
============================================================== */

.team-card.next-2 {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            0.88
        )
        translateX(
            90px
        )
        rotate(
            7deg
        );

    opacity:
        0.45;

    z-index:
        8;

}


/* ==============================================================
# CARD 4+
============================================================== */

.team-card.next-3 {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            0.82
        )
        translateX(
            130px
        )
        rotate(
            9deg
        );

    opacity:
        0.2;

    z-index:
        7;

}


/* ==============================================================
# PREVIOUS CARDS
============================================================== */

.team-card.previous {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            0.85
        )
        translateX(
            -120px
        )
        rotate(
            -8deg
        );

    opacity:
        0;

    z-index:
        1;

}


/* ==============================================================
# GOLD INNER BORDER
============================================================== */

.team-card.active::after {

    content:
        "";

    position:
        absolute;

    inset:
        10px;

    border:
        1px solid
        rgba(
            212,
            175,
            55,
            0.35
        );

    border-radius:
        27px;

    pointer-events:
        none;

}


/* ==============================================================
# COUNTER
============================================================== */

.team-counter {

    position:
        absolute;

    right:
        20px;

    bottom:
        30px;

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 15px;

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

    border-radius:
        50px;

    background:
        rgba(
            0,
            0,
            0,
            0.5
        );

    backdrop-filter:
        blur(
            10px
        );

}


#teamCurrentNumber {

    color:
        var(--accent-color);

    font-size:
        12px;

    font-weight:
        700;

}


.team-counter-divider {

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

}


#teamTotalNumber {

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

    font-size:
        11px;

}


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

.team-navigation {

    position:
        absolute;

    left:
        20px;

    bottom:
        30px;

    z-index:
        20;

    display:
        flex;

    gap:
        8px;

}


.team-nav-btn {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(
            0,
            0,
            0,
            0.45
        );

    backdrop-filter:
        blur(
            10px
        );

    cursor:
        pointer;

    transition:
        all 0.3s ease;

}


.team-nav-btn:hover {

    color:
        #050505;

    background:
        var(--accent-color);

    border-color:
        var(--accent-color);

    transform:
        translateY(
            -2px
        );

}


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

@media (max-width: 991px) {

    .team-section {

        padding:
            100px 0;

    }


    .team-intro {

        max-width:
            650px;

        margin:
            0 auto;

        text-align:
            center;

    }


    .team-intro h2 span {

        display:
            inline;

    }


    .team-description {

        margin:
            0 auto;

    }


    .team-current {

        justify-content:
            center;

    }


    .team-scroll-hint {

        justify-content:
            center;

        margin-top:
            35px;

    }


    .team-stage {

        height:
            600px;

        margin-top:
            30px;

    }


    .team-card {

        height:
            520px;

    }

}


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

@media (max-width: 767px) {

    .team-section {

        padding:
            80px 0;

    }


    .team-eyebrow {

        font-size:
            8px;

        letter-spacing:
            3px;

    }


    .team-intro h2 {

        font-size:
            52px;

        letter-spacing:
            -2px;

    }


    .team-description {

        font-size:
            13px;

        line-height:
            1.8;

    }


    .team-stage {

        height:
            520px;

        margin-top:
            15px;

    }


    .team-card {

        width:
            72%;

        height:
            440px;

        border-radius:
            26px;

    }


    .team-card.active::after {

        inset:
            7px;

        border-radius:
            20px;

    }


    .team-card.next-1 {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.93
            )
            translateX(
                28px
            )
            rotate(
                4deg
            );

    }


    .team-card.next-2 {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.87
            )
            translateX(
                55px
            )
            rotate(
                7deg
            );

    }


    .team-counter {

        right:
            15px;

        bottom:
            15px;

    }


    .team-navigation {

        left:
            15px;

        bottom:
            15px;

    }


    .team-nav-btn {

        width:
            40px;

        height:
            40px;

        font-size:
            13px;

    }

}


/* ==============================================================
# SMALL MOBILE
============================================================== */

@media (max-width: 480px) {

    .team-stage {

        height:
            480px;

    }


    .team-card {

        width:
            76%;

        height:
            410px;

        border-radius:
            22px;

    }


    .team-intro h2 {

        font-size:
            46px;

    }


    .team-current {

        margin-top:
            35px;

    }

}

/*--------------------------------------------------------------
# FAQ Section
--------------------------------------------------------------*/

.faq {
  background: #000000;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}


/*--------------------------------------------------------------
# Background Decoration
--------------------------------------------------------------*/

.faq::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  left: -300px;
  top: 20%;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0.025;
  filter: blur(100px);
  pointer-events: none;
}

.faq::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  right: -250px;
  bottom: -150px;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0.025;
  filter: blur(100px);
  pointer-events: none;
}

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


/*--------------------------------------------------------------
# FAQ Intro
--------------------------------------------------------------*/

.faq-intro {
  position: sticky;
  top: 120px;
  padding-right: 50px;
}

.faq-eyebrow {
  display: inline-block;
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.faq-intro h2 {
  color: #ffffff;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -2px;
  margin: 0 0 25px;
}

.faq-intro h2 span {
  display: block;
  color: var(--accent-color);
}

.faq-intro > p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  line-height: 1.9;
  max-width: 450px;
  margin: 0;
}


/*--------------------------------------------------------------
# FAQ Contact Card
--------------------------------------------------------------*/

.faq-contact-card {
  margin-top: 45px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 430px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  transition: all 0.35s ease;
}

.faq-contact-card:hover {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.045);
  transform: translateY(-3px);
}

.faq-contact-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--accent-color);
  font-size: 20px;
}

.faq-contact-card span {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  margin-bottom: 5px;
}

.faq-contact-card a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.faq-contact-card a i {
  color: var(--accent-color);
  margin-left: 5px;
  transition: 0.3s;
}

.faq-contact-card a:hover {
  color: var(--accent-color);
}

.faq-contact-card a:hover i {
  transform: translate(3px, -3px);
}


/*--------------------------------------------------------------
# FAQ List
--------------------------------------------------------------*/

.faq-list {
  position: relative;
  padding-left: 35px;
}


/* Vertical gold line */

.faq-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(212, 175, 55, 0.5),
    transparent
  );
}


/*--------------------------------------------------------------
# FAQ Item
--------------------------------------------------------------*/

.faq-item {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item:hover {
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.faq-item.faq-active {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.035);
}


/*--------------------------------------------------------------
# FAQ Question
--------------------------------------------------------------*/

.faq-question {
  width: 100%;
  min-height: 80px;
  border: 0;
  outline: none;
  background: transparent;
  color: #ffffff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  cursor: pointer;
}


/* Number */

.faq-number {
  width: 35px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: 0.3s;
}

.faq-active .faq-number {
  color: var(--accent-color);
}


/* Question Text */

.faq-question-text {
  flex: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  transition: 0.3s;
}

.faq-question:hover .faq-question-text,
.faq-active .faq-question-text {
  color: #ffffff;
}


/*--------------------------------------------------------------
# FAQ Toggle
--------------------------------------------------------------*/

.faq-toggle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.35s ease;
}

.faq-toggle i {
  font-size: 14px;
  transition: transform 0.35s ease;
}

.faq-item:hover .faq-toggle {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.faq-active .faq-toggle {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #000000;
}

.faq-active .faq-toggle i {
  transform: rotate(45deg);
}


/*--------------------------------------------------------------
# FAQ Answer
--------------------------------------------------------------*/

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.faq-answer p {
  overflow: hidden;
  margin: 0;
  padding: 0 82px 0 79px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  line-height: 1.8;
}


/* Active Answer */

.faq-active .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.faq-active .faq-answer p {
  padding-bottom: 25px;
}


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 1199px) {

  .faq {
    padding: 100px 0;
  }

  .faq-intro {
    padding-right: 20px;
  }

  .faq-list {
    padding-left: 20px;
  }

}


@media (max-width: 991px) {

  .faq {
    padding: 80px 0;
  }

  .faq-intro {
    position: relative;
    top: auto;
    padding-right: 0;
    margin-bottom: 20px;
  }

  .faq-intro h2 {
    font-size: 50px;
  }

  .faq-intro > p {
    max-width: 600px;
  }

  .faq-contact-card {
    margin-top: 30px;
  }

  .faq-list {
    padding-left: 0;
  }

  .faq-list::before {
    display: none;
  }

}


@media (max-width: 767px) {

  .faq {
    padding: 70px 0;
  }

  .faq-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .faq-intro h2 {
    font-size: 42px;
    letter-spacing: -1px;
  }

  .faq-intro > p {
    font-size: 14px;
    line-height: 1.8;
  }

  .faq-contact-card {
    padding: 16px;
    margin-top: 25px;
  }

  .faq-item {
    border-radius: 15px;
  }

  .faq-question {
    min-height: 70px;
    padding: 17px;
    gap: 12px;
  }

  .faq-number {
    width: 25px;
    font-size: 10px;
  }

  .faq-question-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .faq-toggle {
    width: 34px;
    height: 34px;
  }

  .faq-answer p {
    padding: 0 17px 0 54px;
    font-size: 13px;
    line-height: 1.75;
  }

  .faq-active .faq-answer p {
    padding-bottom: 20px;
  }

}


@media (max-width: 480px) {

  .faq-intro h2 {
    font-size: 36px;
  }

  .faq-question {
    padding: 15px;
  }

  .faq-question-text {
    font-size: 13px;
  }

  .faq-toggle {
    width: 30px;
    height: 30px;
  }

  .faq-toggle i {
    font-size: 12px;
  }

  .faq-answer p {
    padding-left: 50px;
    padding-right: 15px;
  }

}

/*--------------------------------------------------------------
# Dynamic Pages Section
--------------------------------------------------------------*/

.dynamic-pages {
  background: var(--background-color);
  padding: 100px 0;
}

/* Section Header */

.dynamic-pages .section-title {
  max-width: 760px;
  margin: 0 auto 55px;
  padding-bottom: 0;
}

.dynamic-pages .section-title .eyebrow {
  display: inline-block;
  color: var(--accent-color);
  font-family: var(--nav-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.dynamic-pages .section-title h2 {
  color: var(--heading-color);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 18px;
  padding: 0;
}

.dynamic-pages .section-title h2::after {
  display: none;
}

.dynamic-pages .section-title h2 span {
  color: var(--accent-color);
}

.dynamic-pages .section-title p {
  max-width: 650px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: 15px;
  line-height: 1.8;
}


/*--------------------------------------------------------------
# Dynamic Pages Grid
--------------------------------------------------------------*/

.dynamic-pages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}


/*--------------------------------------------------------------
# Dynamic Page Card
--------------------------------------------------------------*/

.dynamic-page-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.dynamic-page-image {
  position: relative;
  width: 100%;
  height: 390px;
  overflow: hidden;
  border-radius: 24px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
}


/* Image */

.dynamic-page-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
}


/* Dark Gradient */

.dynamic-page-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05) 20%,
      rgba(0, 0, 0, 0.25) 45%,
      rgba(0, 0, 0, 0.92) 100%
    );

  transition: 0.5s ease;
}


/* Gold border effect */

.dynamic-page-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 24px;
  border: 1px solid transparent;
  transition: 0.4s ease;
  pointer-events: none;
}


/*--------------------------------------------------------------
# Arrow Icon
--------------------------------------------------------------*/

.dynamic-page-icon {
  position: absolute;
  top: 20px;
  right: 20px;

  width: 48px;
  height: 48px;

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

  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);

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

  z-index: 4;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: all 0.4s ease;
}

.dynamic-page-icon i {
  transition: transform 0.4s ease;
}


/*--------------------------------------------------------------
# Card Content
--------------------------------------------------------------*/

.dynamic-page-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;

  z-index: 4;
}

.dynamic-page-number {
  display: block;

  color: var(--accent-color);

  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;

  margin-bottom: 8px;

  opacity: 0.9;
}

.dynamic-page-content h3 {
  color: #fff;

  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;

  margin: 0 0 8px;

  transition: color 0.3s ease;
}

.dynamic-page-content p {
  color: rgba(255, 255, 255, 0.75);

  font-size: 13px;
  line-height: 1.6;

  margin: 0;

  max-width: 260px;

  transition: color 0.3s ease;
}


/*--------------------------------------------------------------
# Hover
--------------------------------------------------------------*/

.dynamic-page-card:hover .dynamic-page-image img {
  transform: scale(1.08);
  filter: brightness(0.85);
}

.dynamic-page-card:hover .dynamic-page-image::before {
  border-color: var(--accent-color);
  box-shadow:
    inset 0 0 0 1px var(--accent-color),
    0 15px 50px rgba(0, 0, 0, 0.35);
}

.dynamic-page-card:hover .dynamic-page-overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05) 10%,
      rgba(0, 0, 0, 0.2) 40%,
      rgba(0, 0, 0, 0.95) 100%
    );
}

.dynamic-page-card:hover .dynamic-page-icon {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #000;
  transform: rotate(0deg) scale(1.05);
}

.dynamic-page-card:hover .dynamic-page-icon i {
  transform: translate(3px, -3px);
}

.dynamic-page-card:hover .dynamic-page-content h3 {
  color: var(--accent-color);
}


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

@media (max-width: 1199px) {

  .dynamic-pages {
    padding: 85px 0;
  }

  .dynamic-pages-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dynamic-page-image {
    height: 360px;
  }

}


/*--------------------------------------------------------------
# Small Tablet
--------------------------------------------------------------*/

@media (max-width: 991px) {

  .dynamic-pages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .dynamic-page-image {
    height: 400px;
  }

}


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

@media (max-width: 575px) {

  .dynamic-pages {
    padding: 70px 0;
  }

  .dynamic-pages .section-title {
    margin-bottom: 35px;
  }

  .dynamic-pages .section-title h2 {
    font-size: 34px;
  }

  .dynamic-pages .section-title p {
    font-size: 14px;
  }

  .dynamic-pages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dynamic-page-image {
    height: 380px;
    border-radius: 20px;
  }

  .dynamic-page-image::before {
    border-radius: 20px;
  }

  .dynamic-page-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .dynamic-page-content h3 {
    font-size: 21px;
  }

}






/*--------------------------------------------------------------
	# Recent Posts / Journal Section
--------------------------------------------------------------*/

.recent-posts {
  background: var(--background-color);
  padding: 110px 0;
  position: relative;
}

/*--------------------------------------------------------------
# Blog Section Header
--------------------------------------------------------------*/

.blog-section-header {
  max-width: 800px;
  margin: 0 auto 65px;
  text-align: center;
}

.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.blog-eyebrow span {
  width: 28px;
  height: 1px;
  background: var(--accent-color);
  display: block;
}

.blog-section-header h2 {
  margin: 0;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -2px;
}

.blog-section-header h2 em {
  display: block;
  color: var(--accent-color);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -1px;
}

.blog-section-header p {
  max-width: 650px;
  margin: 25px auto 0;
  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 25%
  );
  font-size: 16px;
  line-height: 1.8;
}


/*--------------------------------------------------------------
# Blog Card
--------------------------------------------------------------*/

.recent-posts .blog-card {
  height: 100%;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  overflow: hidden;
  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.recent-posts .blog-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(212, 175, 55, 0.06);
}


/*--------------------------------------------------------------
# Blog Image
--------------------------------------------------------------*/

.recent-posts .blog-image {
  position: relative;
  display: block;
  height: 310px;
  overflow: hidden;
}

.recent-posts .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.recent-posts .blog-card:hover .blog-image img {
  transform: scale(1.08);
}


/* Image Overlay */

.recent-posts .blog-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75),
      transparent 55%
    );
  z-index: 1;
  pointer-events: none;
}


/*--------------------------------------------------------------
# Blog Category
--------------------------------------------------------------*/

.recent-posts .blog-category {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;

  padding: 8px 15px;

  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(212, 175, 55, 0.45);

  border-radius: 50px;

  color: var(--accent-color);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;

  backdrop-filter: blur(10px);
}


/*--------------------------------------------------------------
# Blog Arrow
--------------------------------------------------------------*/

.recent-posts .blog-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;

  width: 48px;
  height: 48px;

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

  border-radius: 50%;

  background: var(--accent-color);
  color: #000;

  font-size: 18px;

  z-index: 3;

  opacity: 0;
  transform: translateY(10px) rotate(-20deg);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.recent-posts .blog-card:hover .blog-arrow {
  opacity: 1;
  transform: translateY(0) rotate(0);
}


/*--------------------------------------------------------------
# Blog Content
--------------------------------------------------------------*/

.recent-posts .blog-content {
  padding: 28px 28px 30px;
}


/*--------------------------------------------------------------
# Blog Meta
--------------------------------------------------------------*/

.recent-posts .blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;

  margin-bottom: 18px;

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

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.recent-posts .blog-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.recent-posts .blog-meta i {
  color: var(--accent-color);
  font-size: 12px;
}


/*--------------------------------------------------------------
# Blog Title
--------------------------------------------------------------*/

.recent-posts .blog-content h3 {
  margin: 0 0 15px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
}

.recent-posts .blog-content h3 a {
  color: #fff;
  transition: color 0.3s ease;
}

.recent-posts .blog-content h3 a:hover {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
# Blog Description
--------------------------------------------------------------*/

.recent-posts .blog-content p {
  margin: 0 0 23px;

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

  font-size: 14px;
  line-height: 1.75;
}


/*--------------------------------------------------------------
# Read Story
--------------------------------------------------------------*/

.recent-posts .read-story {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: var(--accent-color);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  transition: gap 0.3s ease;
}

.recent-posts .read-story i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.recent-posts .read-story:hover {
  gap: 14px;
}

.recent-posts .read-story:hover i {
  transform: translateX(3px);
}


/*--------------------------------------------------------------
# View All Stories
--------------------------------------------------------------*/

.recent-posts .blog-view-all {
  text-align: center;
  margin-top: 60px;
}

.recent-posts .blog-view-all a {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 14px 25px;

  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 50px;

  color: #fff;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  transition: all 0.35s ease;
}

.recent-posts .blog-view-all a i {
  color: var(--accent-color);
  font-size: 16px;
  transition: transform 0.35s ease;
}

.recent-posts .blog-view-all a:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #000;
}

.recent-posts .blog-view-all a:hover i {
  color: #000;
  transform: translate(3px, -3px);
}


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

@media (max-width: 991px) {

  .recent-posts {
    padding: 90px 0;
  }

  .blog-section-header {
    margin-bottom: 50px;
  }

  .recent-posts .blog-image {
    height: 280px;
  }

}


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

@media (max-width: 767px) {

  .recent-posts {
    padding: 75px 0;
  }

  .blog-section-header {
    margin-bottom: 40px;
    padding: 0 10px;
  }

  .blog-eyebrow {
    font-size: 9px;
    letter-spacing: 3px;
  }

  .blog-eyebrow span {
    width: 20px;
  }

  .blog-section-header h2 {
    font-size: 38px;
    letter-spacing: -1px;
  }

  .blog-section-header p {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 20px;
  }

  .recent-posts .blog-image {
    height: 260px;
  }

  .recent-posts .blog-content {
    padding: 23px 22px 25px;
  }

  .recent-posts .blog-content h3 {
    font-size: 20px;
  }

  .recent-posts .blog-content p {
    font-size: 13px;
  }

  .recent-posts .blog-meta {
    font-size: 9px;
  }

}


/*--------------------------------------------------------------
# Small Mobile
--------------------------------------------------------------*/

@media (max-width: 400px) {

  .blog-section-header h2 {
    font-size: 33px;
  }

  .recent-posts .blog-image {
    height: 230px;
  }

  .recent-posts .blog-meta {
    flex-direction: column;
    align-items: flex-start;
  }

}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/

.contact {
  position: relative;
  background: var(--background-color);
  padding: 110px 0;
  overflow: hidden;
}


/*--------------------------------------------------------------
# Contact Heading
--------------------------------------------------------------*/

.contact-heading {
  max-width: 850px;
  margin-bottom: 70px;
}

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--accent-color);

  font-family: var(--nav-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;

  margin-bottom: 18px;
}

.contact-eyebrow::before {
  content: "";
  width: 35px;
  height: 1px;
  background: var(--accent-color);
}

.contact-heading h2 {
  color: var(--default-color);
  font-family: var(--heading-font);

  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.02;

  font-weight: 700;

  margin: 0 0 25px;
  letter-spacing: -2px;
}

.contact-heading h2 span {
  display: block;
  color: var(--accent-color);
  font-style: italic;
  font-weight: 500;
}

.contact-heading p {
  max-width: 700px;

  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 30%
  );

  font-size: 17px;
  line-height: 1.8;

  margin: 0;
}


/*--------------------------------------------------------------
# Contact Information
--------------------------------------------------------------*/

.contact-info {
  height: 100%;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    );

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

  border-radius: 28px;

  padding: 40px 32px;

  position: relative;

  overflow: hidden;
}


/* Gold glow */

.contact-info::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

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

  border-radius: 50%;

  background: var(--accent-color);

  opacity: 0.08;

  filter: blur(40px);

  pointer-events: none;
}


.contact-info-header {
  margin-bottom: 35px;
}

.contact-info-header > span {
  color: var(--accent-color);

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

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 2.5px;
}

.contact-info-header h3 {
  color: var(--default-color);

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

  font-size: 32px;
  line-height: 1.2;

  font-weight: 600;

  margin: 10px 0 0;
}


/*--------------------------------------------------------------
# Contact Information Item
--------------------------------------------------------------*/

.contact-info-item {
  display: flex;

  align-items: center;

  position: relative;

  padding: 20px 0;

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

  color: var(--default-color);

  text-decoration: none;

  transition: all 0.35s ease;
}

.contact-info-item:last-of-type {
  border-bottom: 1px solid
    rgba(255, 255, 255, 0.08);
}


.contact-info-item:hover {
  padding-left: 8px;
  color: var(--default-color);
}


/*--------------------------------------------------------------
# Contact Icon
--------------------------------------------------------------*/

.contact-icon {
  width: 48px;
  height: 48px;

  min-width: 48px;

  display: flex;

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

  border-radius: 50%;

  border: 1px solid
    rgba(201, 164, 76, 0.35);

  color: var(--accent-color);

  margin-right: 15px;

  transition: all 0.35s ease;
}

.contact-info-item:hover .contact-icon {
  background: var(--accent-color);

  color: #000;

  transform: rotate(-8deg);
}


/*--------------------------------------------------------------
# Contact Information Content
--------------------------------------------------------------*/

.contact-info-content small {
  display: block;

  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 55%
  );

  font-size: 9px;

  letter-spacing: 2px;

  margin-bottom: 4px;
}

.contact-info-content h4 {
  color: var(--default-color);

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

  font-size: 16px;

  font-weight: 600;

  margin: 0 0 3px;
}

.contact-info-content p {
  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 35%
  );

  font-size: 13px;

  line-height: 1.5;

  margin: 0;
}


/* Arrow */

.contact-arrow {
  margin-left: auto;

  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 60%
  );

  font-size: 17px;

  transition: all 0.35s ease;
}

.contact-info-item:hover .contact-arrow {
  color: var(--accent-color);

  transform: translate(4px, -4px);
}


/*--------------------------------------------------------------
# Social Links
--------------------------------------------------------------*/

.contact-social {
  margin-top: 30px;
}

.contact-social > span {
  display: block;

  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 55%
  );

  font-size: 9px;

  letter-spacing: 2px;

  margin-bottom: 15px;
}

.contact-social-links {
  display: flex;

  gap: 10px;
}

.contact-social-links a {
  width: 42px;
  height: 42px;

  display: flex;

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

  border-radius: 50%;

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

  color: var(--default-color);

  font-size: 16px;

  transition: all 0.3s ease;
}

.contact-social-links a:hover {
  background: var(--accent-color);

  border-color: var(--accent-color);

  color: #000;

  transform: translateY(-4px);
}


/*--------------------------------------------------------------
# Contact Form Wrapper
--------------------------------------------------------------*/

.contact-form-wrapper {
  height: 100%;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.015)
    );

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

  border-radius: 28px;

  padding: 45px;

  position: relative;

  overflow: hidden;
}


/* Gold side glow */

.contact-form-wrapper::after {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -150px;
  bottom: -150px;

  border-radius: 50%;

  background: var(--accent-color);

  opacity: 0.06;

  filter: blur(45px);

  pointer-events: none;
}


/*--------------------------------------------------------------
# Form Top
--------------------------------------------------------------*/

.form-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 40px;

  padding-bottom: 30px;

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

.form-top > div:first-child > span {
  color: var(--accent-color);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 2.5px;
}

.form-top h3 {
  color: var(--default-color);

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

  font-size: 32px;

  line-height: 1.2;

  font-weight: 400;

  margin: 10px 0 0;
}

.form-top h3 strong {
  color: var(--accent-color);

  font-weight: 600;
}


/* Form Number */

.form-number {
  width: 55px;
  height: 55px;

  display: flex;

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

  border: 1px solid
    rgba(201, 164, 76, 0.3);

  border-radius: 50%;
}

.form-number span {
  color: var(--accent-color);

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

  font-size: 15px;
}


/*--------------------------------------------------------------
# Form Groups
--------------------------------------------------------------*/

.contact .form-group {
  position: relative;
}

.contact .form-group label {
  display: block;

  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 25%
  );

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.5px;

  margin-bottom: 9px;
}


/*--------------------------------------------------------------
# Form Inputs
--------------------------------------------------------------*/

.contact .php-email-form input,
.contact .php-email-form select,
.contact .php-email-form textarea {

  width: 100%;

  color: var(--default-color);

  background:
    rgba(0, 0, 0, 0.35);

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

  border-radius: 12px;

  box-shadow: none;

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

  font-size: 14px;

  padding: 14px 16px;

  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.contact .php-email-form input,
.contact .php-email-form select {
  height: 52px;
}


.contact .php-email-form textarea {
  min-height: 140px;

  resize: vertical;
}


.contact .php-email-form input::placeholder,
.contact .php-email-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}


.contact .php-email-form select {
  color: rgba(255, 255, 255, 0.7);

  cursor: pointer;
}


.contact .php-email-form select option {
  background: #111;
  color: #fff;
}


/* Focus */

.contact .php-email-form input:focus,
.contact .php-email-form select:focus,
.contact .php-email-form textarea:focus {

  outline: none;

  border-color: var(--accent-color);

  background: rgba(0, 0, 0, 0.55);

  box-shadow:
    0 0 0 3px
    rgba(201, 164, 76, 0.08);
}


/*--------------------------------------------------------------
# Submit
--------------------------------------------------------------*/

.form-submit {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 5px;
}

.contact .php-email-form button[type="submit"] {

  display: inline-flex;

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

  gap: 25px;

  min-width: 190px;

  border: 0;

  padding: 15px 22px;

  border-radius: 50px;

  background: var(--accent-color);

  color: #050505;

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

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.35s ease;
}

.contact .php-email-form button[type="submit"] i {
  font-size: 18px;

  transition: transform 0.35s ease;
}

.contact .php-email-form button[type="submit"]:hover {
  background: #fff;

  transform: translateY(-3px);

  box-shadow:
    0 12px 30px rgba(201, 164, 76, 0.18);
}

.contact .php-email-form button[type="submit"]:hover i {
  transform: translate(4px, -4px);
}


.form-submit p {
  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 55%
  );

  font-size: 11px;

  margin: 0;
}


/*--------------------------------------------------------------
# Form Messages
--------------------------------------------------------------*/

.contact .php-email-form .loading,
.contact .php-email-form .error-message,
.contact .php-email-form .sent-message {
  display: none;

  margin-bottom: 15px;

  padding: 12px 16px;

  border-radius: 10px;

  font-size: 13px;
}

.contact .php-email-form .loading {
  color: var(--default-color);

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

.contact .php-email-form .error-message {
  color: #ff8585;

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

.contact .php-email-form .sent-message {
  color: var(--accent-color);

  background: rgba(201, 164, 76, 0.08);
}


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 991px) {

  .contact {
    padding: 85px 0;
  }

  .contact-heading {
    margin-bottom: 50px;
  }

  .contact-form-wrapper {
    padding: 35px;
  }

}


@media (max-width: 767px) {

  .contact {
    padding: 70px 0;
  }

  .contact-heading h2 {
    font-size: 44px;

    letter-spacing: -1px;
  }

  .contact-heading p {
    font-size: 15px;
  }

  .contact-info {
    padding: 30px 24px;

    border-radius: 22px;
  }

  .contact-form-wrapper {
    padding: 28px 20px;

    border-radius: 22px;
  }

  .form-top {
    margin-bottom: 30px;
  }

  .form-top h3 {
    font-size: 27px;
  }

  .form-number {
    width: 45px;
    height: 45px;

    flex-shrink: 0;
  }

  .form-submit {
    align-items: flex-start;

    flex-direction: column;
  }

  .contact .php-email-form button[type="submit"] {
    width: 100%;
  }

}


@media (max-width: 575px) {

  .contact-heading h2 {
    font-size: 38px;
  }

  .contact-info-header h3 {
    font-size: 28px;
  }

  .contact-info-item {
    padding: 17px 0;
  }

  .contact-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;

    margin-right: 12px;
  }

  .contact-info-content h4 {
    font-size: 15px;
  }

  .contact-info-content p {
    font-size: 12px;
  }

  .contact-arrow {
    font-size: 14px;
  }

}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.blog-author-widget img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author-widget h4 {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author-widget .social-links {
  margin: 5px 0;
}

.blog-author-widget .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
  font-size: 18px;
}

.blog-author-widget .social-links a:hover {
  color: var(--accent-color);
}

.blog-author-widget p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 10px 0 0 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: none;
  color: var(--default-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 16px;
  transition: 0.3s;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  color: var(--accent-color);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

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

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

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

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 50px;
  font-size: 14px;
  padding: 5px 15px;
  margin: 0 6px 8px 0;
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}


.wenyu-enquiry-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-width: 190px;
    height: 58px;
    padding: 0 26px;

    border: 1px solid #d4af37;
    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #b8860b,
        #d4af37,
        #f5d477
    );

    color: #080808;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;
    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

/* Shine effect */
.wenyu-enquiry-btn::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}

/* Text */
.wenyu-enquiry-btn span {
    position: relative;
    z-index: 2;
}

/* Arrow */
.wenyu-enquiry-btn i {
    position: relative;
    z-index: 2;

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

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #080808;
    color: #f5d477;

    font-size: 15px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

/* Hover */
.wenyu-enquiry-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 35px rgba(212, 175, 55, 0.30);
}

.wenyu-enquiry-btn:hover::before {
    left: 130%;
}

.wenyu-enquiry-btn:hover i {
    transform: rotate(45deg);

    background: #fff;
    color: #111;
}

/* Click */
.wenyu-enquiry-btn:active {
    transform: translateY(-1px);
}

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

    .wenyu-enquiry-btn {
        width: 100%;
        height: 55px;
    }
}