/* ===========================================================
   IRIDIUM LIVING
   MartinMedia.nl
=========================================================== */

:root {
    --gold: #c7a15b;
    --gold-dark: #a68142;
    --dark: #444444;
    --text: #555;
    --light: #f8f8f8;
    --white: #ffffff;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow: 0 20px 50px rgba(0,0,0,.08);
    --transition: .35s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter",sans-serif;
    font-size: 16px;
    color: var(--text);
    line-height: 1.8;
    background: #fff;
}

img {
    max-width: 100%;
    display: block;
}

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

section {
    padding: 120px 0;
}

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

h1,
h2,
h3,
h4,
h5 {
    font-family: "Cormorant Garamond",serif;
    color: #111;
}

.section-label {
    display: inline-block;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
}

.section-title {
    font-size: 54px;
    font-weight: 600;
    margin-bottom: 25px;
}

.section-text {
    max-width: 850px;
    margin: auto;
    color: #666;
}

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

.btn-gold:hover {
    background: var(--gold-dark);
}

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

.nav-link {
    margin: 0 15px;
}

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

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            rgba(0,0,0,.28),
            rgba(0,0,0,.38)
        );
}

.hero-label {
    font-size: 14px;
}

.hero h1 {
    font-size: 65px;
    margin: 25px 0;
}

/* ===========================================================
   WELCOME
=========================================================== */

/* ===========================================================
   APARTMENTS
=========================================================== */

.card-body {
    padding: 35px;
}

.card-icons {
    font-size: 14px;
}

.card-body ul {
    margin: 30px 0;
    padding-left: 20px;
}

.card-body li {
    margin-bottom: 10px;
}

/* ===========================================================
   FACILITIES
=========================================================== */

/* ===========================================================
   BOOKING
=========================================================== */

.booking h2 {
    color: #fff;
}

.booking-info {
    color: #ddd;
}

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

.location-list {
    font-size: 18px;
}

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

.footer a {
    color: #bbb;
}

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

@media (max-width:1200px) {
    .hero h1 {
        font-size: 62px;
    }

    .section-title {
        font-size: 46px;
    }
}

@media (max-width:992px) {
    .navbar {
        background: #111;
    }

    .hero {
        text-align: center;
        padding-top: 140px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero-features {
        row-gap: 30px;
    }

    .section-title {
        font-size: 38px;
    }

    .booking-form {
        margin-top: 40px;
    }
}

@media (max-width:768px) {
    section {
        padding: 80px 0;
    }

	.hero { height: auto !important; padding-bottom: 30px; }
    .hero h1 {
        font-size: 38px;
    }

    .hero-text {
        font-size: 18px;
    }

    .card-icons {
        flex-direction: column;
        gap: 10px;
    }

    .booking-form {
        padding: 30px;
    }

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

@media (max-width:576px) {
    .hero h1 {
        font-size: 32px;
    }

    .section-title {
        font-size: 32px;
    }

    .btn {
        width: 100%;
    }

    .feature {
        flex-direction: column;
        text-align: center;
    }
}

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

.navbar {
    padding: 28px 0;
    transition: .35s ease;
    z-index: 9999;
}

.navbar.scrolled {
    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);	
    -webkit-backdrop-filter: blur(18px);
    padding: 14px 0;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
}

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    height: 58px;
    width: auto;
}

.navbar-nav {
    gap: 18px;
}

.nav-link {
    position: relative;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 0 !important;
}

.nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: .3s;
}

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

.nav-link:hover {
    color: #fff;
}

.language-switch {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-switch a {
    color: white;
    font-size: 35px;
    transition: .3s;
}

.language-switch a:hover {
    transform: translateY(-3px);
}

.navbar.scrolled .nav-link{
    color:#222 !important;
}

.navbar.scrolled .language-switch a{
    color:#222;
}

.navbar.scrolled .nav-link.active {
color: var(--gold) !important;
}

.navbar.scrolled .navbar-toggler-icon{

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(34,34,34,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

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

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 85vh;
	min-height: 920px;
    overflow: hidden;
    background: url("../img/header.png") center center;
    background-size: cover;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.22)
        );
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top,
        rgba(255,255,255,.06),
        transparent 60%);
}

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

.hero-label {
    display: inline-block;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.hero h1 {
    color: #fff;
    font-weight: 600;
    line-height: 1.02;
    text-shadow: 0 4px 20px rgba(0,0,0,.45);
}

.hero-text {
    max-width: 720px;
    margin: auto;
    color: rgba(255,255,255,.88);
    font-size: 20px;
    font-weight: 300;
}

.hero-features {
    margin-top: 25px;
}

.feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #fff;
}

.feature .icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--gold);
    transition: .3s;
}

.feature:hover .icon {
    transform: translateY(-5px);
    background: var(--gold);
    color: white;
}

.feature div:last-child {
    font-size: 15px;
    line-height: 1.5;
}

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

.btn {
    transition: .35s;
    font-weight: 600;
    border-radius: 60px;
    letter-spacing: .5px;
    padding: 16px 38px;
}

.btn-gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
            180deg,
            #d8b46b,
            #b98d43
        );
    color: white;
    border: none;
    box-shadow: 0 15px 35px rgba(183,140,64,.35);
}

.btn-gold:hover {
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(183,140,64,.45);
}

.btn-gold::before {
    content: "";
    position: absolute;
    left: -80%;
    top: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );
    transform: skewX(-20deg);
}

.btn-gold:hover::before {
    animation: shine .8s linear;
}

@keyframes shine {
    to {
        left: 140%;
    }
}

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

.scroll-down {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.scroll-down span {
    display: block;
    width: 34px;
    height: 56px;
    border-radius: 40px;
    border: 2px solid rgba(255,255,255,.45);
    position: relative;
}

.scroll-down span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    transform: translateX(-50%);
    animation: mouse 2s infinite;
}

@keyframes mouse {
    0% {
        opacity: 1;
        top: 12px;
    }

    100% {
        opacity: 0;
        top: 34px;
    }
}

/* ==============================================================
  WELCOME
============================================================== */

.welcome {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.welcome::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(199,161,91,.08),
        transparent 70%);
}

.welcome::after {
    content: "";
    position: absolute;
    left: -150px;
    bottom: -150px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0,0,0,.03),
        transparent 70%);
}

.welcome .container {
    position: relative;
    z-index: 5;
}

.welcome .section-title {
    margin-bottom: 30px;
}

.welcome p {
    font-size: 18px;
    line-height: 1.9;
    color: #666;
}

/* ==============================================================
  APARTMENTS
============================================================== */

.apartments {
    background: #f6f6f6;
    position: relative;
}

.apartments::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(

            180deg,

            rgba(255,255,255,.7),

            transparent 120px

        );
    pointer-events: none;
}

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

.apartment-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    transition: .45s;
    height: 100%;
    position: relative;
}

.apartment-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 35px 70px rgba(0,0,0,.14);
}

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

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}

/* donkere overlay */

.card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(

            180deg,

            transparent,

            rgba(0,0,0,.35)

        );
}

/* ==============================================================
  BADGE
============================================================== */

.badge-type {
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 2;
    background: #fff;
    color: #111;
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

/* ==============================================================
  BODY
============================================================== */

.apartment-card .card-body {
    padding: 35px;
}

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

.card-icons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
    color: #666;
}

.card-icons span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.card-icons i {
    color: var(--gold);
}

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

.apartment-card p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 28px;
}

/* ==============================================================
  LIST
============================================================== */

.apartment-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

.apartment-card li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    color: #555;
}

.apartment-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: bold;
}

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

.apartment-card .btn {
    width: 100%;
}

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

.apartment-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient(

            90deg,

            #d6b06d,

            #a47b37

        );
    transition: .4s;
    z-index: 5;
}

.apartment-card:hover::before {
    width: 100%;
}

/* ==============================================================
  GOLD SHINE
============================================================== */

.apartment-card::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -80%;
    width: 60%;
    height: 250%;
    transform: rotate(28deg);
    background: linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );
}

.apartment-card:hover::after {
    animation: cardshine .9s linear;
}

@keyframes cardshine {
    to {
        left: 160%;
    }
}

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

.apartments .section-title {
    margin-bottom: 18px;
}

.apartments .section-label {
    margin-bottom: 12px;
}

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

.apartments .row {
    row-gap: 40px;
}

/* ==============================================================
  FACILITIES
============================================================== */

.facilities {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.facilities::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            rgba(246,246,246,.7),
            transparent 180px);
}

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

.facility {
    background: #fff;
    border-radius: 22px;
    padding: 50px 30px;
    text-align: center;
    transition: .4s;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,.07);
}

.facility:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 70px rgba(0,0,0,.14);
}

.facility::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(
            90deg,
            #e1c07d,
            #b8893e);
    transform: scaleX(0);
    transition: .35s;
}

.facility:hover::before {
    transform: scaleX(1);
}

.facility i {
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 30px;
    border-radius: 50%;
    font-size: 34px;
    color: var(--gold);
    background: rgba(199,161,91,.08);
    transition: .35s;
}

.facility:hover i {
    background: var(--gold);
    color: white;
    transform: rotate(8deg)
        scale(1.08);
}

.facility h6 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 15px;
}

.facility p {
    font-size: 15px;
    color: #777;
}

/* ==============================================================
  BOOKING
============================================================== */

.booking {
    position: relative;
	background: #56504a !important;
	overflow: hidden;
}

.booking::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        rgba(199,161,91,.15),
        transparent 50%);
}

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

.booking .section-title {
    color: #fff;
}

.booking p {
    color: #ddd;
}

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

.booking-info {
    margin-top: 50px;
}

.booking-info .d-flex {
    padding: 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    margin-bottom: 20px;
    transition: .35s;
}

.booking-info .d-flex:hover {
    background: rgba(255,255,255,.08);
}

.booking-info i {
    color: var(--gold);
    font-size: 24px;
    width: 42px;
}

.booking-info strong {
    display: block;
    color: white;
    margin-bottom: 5px;
}

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

.booking-form {
    background: #fff;
    border-radius: 28px;
    padding: 55px;
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
}

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

.booking-form label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

/* ==============================================================
  INPUT
============================================================== */

.form-control,
.form-select {
    height: 58px;
    border-radius: 14px;
    border: 1px solid #ddd;
    padding-left: 20px;
    transition: .3s;
    font-size: 15px;
    background: #fafafa;
}

textarea.form-control {
    height: 170px;
    resize: none;
    padding-top: 18px;
}

.form-control:hover,
.form-select:hover {
    border-color: #c7a15b;
}

.form-control:focus,
.form-select:focus {
    background: #fff;
    border-color: #c7a15b;
    box-shadow: 0 0 0 .2rem rgba(199,161,91,.12);
}

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

.location {
    background: #fafafa;
}

.location-list {
    margin-top: 45px;
}

.location-list div {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    font-size: 18px;
}

.location-list i {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(199,161,91,.10);
    color: var(--gold);
    margin-right: 20px;
}

/* ==============================================================
  MAP
============================================================== */

.map-wrapper {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.map-wrapper iframe {
    width: 100%;
    height: 580px;
    border: 0;
    filter: grayscale(.2)
        contrast(1.05);
}

/* ==============================================================
  LOCATION CARD EFFECT
============================================================== */

.map-wrapper:hover {
    transform: translateY(-5px);
    transition: .4s;
    box-shadow: 0 35px 80px rgba(0,0,0,.20);
}

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

.footer {
    position: relative;
    background: #333;
    color: #bfbfbf;
    padding: 110px 0 35px;
    overflow: hidden;
}

.footer::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -220px;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(199,161,91,.10),
        transparent 70%);
}

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

.footer-logo {
    height: 120px;
    width: auto;
    margin: 0 auto 20px auto
}

.footer h5 {
    color: #fff;
    margin-bottom: 30px;
    font-size: 22px;
}

.footer p {
    color: #999;
    line-height: 1.9;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: #bfbfbf;
    transition: .3s;
}

.footer-links a:hover {
    color: var(--gold);
    padding-left: 8px;
}

.social-icons {
    display: flex;
    gap: 14px;
    margin-top: 25px;
}

.social-icons a {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #1d1d1d;
    color: white;
    transition: .35s;
}

.social-icons a:hover {
    background: var(--gold);
    transform: translateY(-6px);
}

.footer hr {
    border-color: #252525;
    margin: 70px 0 35px;
}

/* ==============================================================
  SCROLL TO TOP
============================================================== */

.scroll-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gold);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: .35s;
    z-index: 9999;
    box-shadow: 0 18px 35px rgba(0,0,0,.25);
}

.scroll-top.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: #a47b37;
    transform: translateY(-4px);
}

/* ==============================================================
  SWIPER
============================================================== */

.swiper {
    overflow: visible;
}

.swiper-button-next,
.swiper-button-prev {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: #222;
    box-shadow: 0 12px 25px rgba(0,0,0,.15);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--gold);
}

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

img {
    transition: .5s;
}

.zoom-hover {
    overflow: hidden;
}

.zoom-hover img:hover {
    transform: scale(1.08);
}

/* ==============================================================
  FADE ANIMATION
============================================================== */

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all .8s ease;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

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

.gold-divider {
    width: 90px;
    height: 4px;
    border-radius: 10px;
    background: linear-gradient(
            90deg,
            #d8bc81,
            #b18439
        );
    margin: 30px auto;
}

/* ==============================================================
  LOADER
============================================================== */

.page-loader {
    position: fixed;
    inset: 0;
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.loader {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.12);
    border-top: 4px solid var(--gold);
    animation: spin .9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==============================================================
  AOS FIX
============================================================== */

[data-aos] {
    transition-duration: .8s !important;
}

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

@media (max-width:1400px) {
    .hero h1 {
        font-size: 72px;
    }

    .section-title {
        font-size: 50px;
    }
}

@media (max-width:1200px) {
    .hero h1 {
        font-size: 60px;
    }

    .booking-form {
        padding: 45px;
    }
}

@media (max-width:992px) {
    .navbar {
        background: #111;
    }

    .hero {
        padding-top: 140px;
        text-align: center;
    }

    .hero-features {
        row-gap: 35px;
    }

    .hero h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 42px;
    }

    .booking-form {
        margin-top: 50px;
    }

    .footer {
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }
}

@media (max-width:768px) {
    section {
        padding: 90px 0;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-text {
        font-size: 18px;
    }

    .feature {
        flex-direction: column;
        text-align: center;
    }

    .card-icons {
        flex-direction: column;
        gap: 15px;
    }

    .booking-form {
        padding: 35px;
    }

    .map-wrapper iframe {
        height: 400px;
    }
}

@media (max-width:576px) {
    .hero {
        min-height: 90vh;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 1.2;
    }

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

    .btn {
        width: 100%;
    }

    .booking-form {
        padding: 25px;
    }

    .scroll-top {
        right: 15px;
        bottom: 15px;
    }

    .footer {
        padding-top: 70px;
    }
}

.navbar .nav-link {
    position: relative;
    transition: .3s;
}

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

.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,#d6b06d,#b18439);
}

section,
header {
    scroll-margin-top: 110px;
}

.card-image {
    height: 280px;
}

.apartmentSwiper {
    width: 100%;
    height: 100%;
}

.apartmentSwiper .swiper-slide {
    overflow: hidden;
}

.apartmentSwiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}

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

/* Pagination */

.apartmentSwiper .swiper-pagination {
    top: 15px !important;
    bottom: auto !important;
}

.apartmentSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: white;
    opacity: .5;
}

.apartmentSwiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--gold);
}

.card-image .swiper-button-next,
.card-image .swiper-button-prev {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #222;
    opacity: 0;
    transition: .3s;
}

.card-image:hover .swiper-button-next,
.card-image:hover .swiper-button-prev {
    opacity: 1;
}

.card-image .swiper-button-next::after,
.card-image .swiper-button-prev::after {
    font-size: 14px;
    font-weight: bold;
}

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

.card-image::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 55%;
    height: 320%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        rgba(255,255,255,.08),
        transparent
    );
    transform: rotate(25deg);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

.apartment-card:hover .card-image::before {
    animation: imageGlow 2.3s ease;
}

@keyframes imageGlow {
    0% {
        left: -80%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 170%;
        opacity: 0;
    }
}