/* =========================
   CUSTOM FONT: MORTEND
========================= */

@font-face {
    font-family: 'Mortend';
    src: url('../fonts/mortend/Mortend-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mortend';
    src: url('../fonts/mortend/Mortend-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mortend';
    src: url('../fonts/mortend/Mortend-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mortend';
    src: url('../fonts/mortend/Mortend-Extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Versi outline (font khusus) */
@font-face {
    font-family: 'MortendOutline';
    src: url('../fonts/mortend/Mortend-ExtraboldOutline.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* =========================
   CUSTOM FONT: SANDIEGO
========================= */

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SanDiego';
    src: url('../fonts/sandiego/SanDiego-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* =========================
   MAIN STYLE
========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
			margin: 0;
			font-family: 'SanDiego', sans-serif;
			font-weight: 400;
		}

        /* ===== TOP BAR ===== */
		.topbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100px;
			z-index: 1055;

			/* Gradient background */
			background: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 1.0) 0%,
				rgba(0, 0, 0, 0.55) 55%,
				rgba(0, 0, 0, 0.0) 100%
			);

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

        .topbar-inner {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .topbar-left,
        .topbar-center,
        .topbar-right {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .topbar-left,
        .topbar-right {
            flex: 1;
        }

        .topbar-center {
            flex: 1;
            justify-content: center;
        }

        .topbar-right {
            justify-content: flex-end;
        }

        .navbar-brand,
        .nav-link,
        .topbar .btn {
            color: #fff !important;
        }
		
		.logo-desktop,
		.mobile-logo {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			line-height: 1;
		}

		.logo-desktop {
			height: 42px;
		}

		.logo-desktop img {
			display: block;
			max-height: 64px;
			width: auto;
			object-fit: contain;
		}

		.mobile-logo {
			height: 64px;
		}

		.mobile-logo img {
			display: block;
			max-height: 64px;
			width: auto;
			object-fit: contain;
		}

        .desktop-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 28px;
            height: 100%;
        }

        .desktop-nav .nav-link {
			font-family: 'Mortend', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1;
            padding: 0;
            margin: 0;
            text-transform: uppercase;
            color: #fff;
            opacity: 0.95;
            transition: opacity 0.3s ease;
        }

        .desktop-nav .nav-link:hover {
            opacity: 0.75;
            color: #fff;
        }
		
		/* ===== LANGUAGE FLAG ===== */
		.lang-flag {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: 1px solid rgba(255,255,255,0.18);
			background: rgba(255,255,255,0.05);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			text-decoration: none;
            text-transform: uppercase;
		}

		.lang-flag:hover {
			background: rgba(255,255,255,0.12);
		}

		.lang-flag img {
			width: 30px;
			height: 30px;
			object-fit: cover;
			border-radius: 50%;
		}

		/* Mobile flag */
		.mobile-flag {
			width: 40px;
			height: 40px;
			object-fit: cover;
			border-radius: 50%;
		}

        .lang-pill {
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.05);
            border-radius: 999px;
            height: 38px;
            padding: 0 14px;
            text-decoration: none;
            text-transform: uppercase;
            color: #fff;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: background 0.3s ease;
            line-height: 1;
            font-size: 0.9rem;
        }

        .lang-pill:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .mobile-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 0;
            background: rgba(255, 255, 255, 0.10);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        /* ===== OFFCANVAS ===== */
        .offcanvas.custom-offcanvas {
            background: #111;
            color: #fff;
        }

        .offcanvas.custom-offcanvas .offcanvas-title {
            color: #fff;
        }

        .offcanvas.custom-offcanvas .btn-close {
            filter: invert(1) grayscale(100%);
        }

        .offcanvas-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.9rem 1rem;
            border-radius: 0.75rem;
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            text-decoration: none;
            transition: background 0.3s ease;
            text-transform: uppercase;
        }

        .offcanvas-link:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .offcanvas-link.active-lang {
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.10);
        }

        /* ===== SECTIONS ===== */
        .section {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3em;
            min-height: 100vh;
            height: 100vh;
            position: relative;
            color: white;
            text-align: center;
            overflow: hidden;
        }

        .section1 { background-color: transparent; }
        .section2 { background-color: lightblue; }
        .section3,
        .section4 { background-color: transparent; }
        .section5 { background-color: pink; }
        .section6,
        .section7 { background-color: transparent; }
		
	/* ===== SECTION 1 ===== */
		.section1 {
			position: relative;
			overflow: hidden;
		}

		.section1-bg-image {
			display: block;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section1::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.62);
			z-index: 1;
		}

		.hero-content,
		.scroll-down {
			position: relative;
			z-index: 2;
		}

		.hero-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 900px;
			margin: 0 auto;
			padding: 20px;
			text-align: center;
		}

		.hero-title-image-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.hero-title-image {
			display: block;
			max-width: 520px;
			width: 100%;
			height: auto;
			margin: 0 auto;
			object-fit: contain;
		}
	
	/* ===== SECTION 2 - ABOUT ===== */
		.section2 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
		}

		.section2-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		/* Overlay */
		.section2::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.6);
			z-index: 1;
		}

		/* Content di atas overlay */
		.about-content,
		.section2 .scroll-down {
			position: relative;
			z-index: 2;
		}		
		
		.section2 {
			text-align: center;
			padding: 120px 30px 80px;
			height: auto;
			min-height: 100vh;
		}

		.about-content {
			width: min(100%, 1300px);
			margin: 0 auto;
			padding: 0;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.about-title {
			margin: 0 0 36px;
			font-family: 'Mortend', sans-serif;
			font-size: 2.8rem;
			font-weight: 800; /* sesuaikan dengan Mortend-Extrabold / Bold yang kamu punya */
			letter-spacing: 2px;
			line-height: 1.2;
			color: #fff;
			text-transform: uppercase;
		}

		.about-content p {
			margin: 0 0 14px;
			font-family: 'SanDiego' !important;
			font-weight: normal;
			font-size: 1.3rem;
			line-height: 1.8;
			color: #fff;
		}

	/* ===== SECTION 3 ===== */
		.section3 {
			position: relative;
			overflow: hidden;
			text-align: center;
			background-color: transparent;
			padding: 120px 40px 80px;
			height: auto;
			min-height: 100vh;
		}

		.section3-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section3::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.68);
			z-index: 1;
		}

		.vision-mission-content,
		.section3 .scroll-down {
			position: relative;
			z-index: 2;
		}

		.vision-mission-content {
			width: min(100%, 1400px);
			margin: 0 auto;
			padding: 0;
			color: #fff;
		}

		.vm-row {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 36px;
			margin-bottom: 42px;
		}

		.vm-row:last-child {
			margin-bottom: 0;
		}

		.vm-label-col {
			flex: 0 0 280px;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
		}

		.vm-label-col-right {
			justify-content: flex-end;
		}

		.vm-label-img {
			display: block;
			width: 100%;
			max-width: 500px;
			height: auto;
			object-fit: contain;
		}

		.vm-text-col {
			flex: 1 1 auto;
			text-align: left;
		}

		.vm-text-col-wide {
			flex: 1 1 auto;
		}

		.vm-paragraph,
		.vm-bullet-list li,
		.vm-number-list li {
			font-family: 'SanDiego', sans-serif;
			font-size: 1.15rem;
			font-weight: 400;
			line-height: 1.6;
			color: #fff;
		}

		.vm-paragraph {
			margin: 0;
			max-width: 900px;
		}

		.vm-bullet-list,
		.vm-number-list {
			margin: 0;
			padding-left: 26px;
			text-align: left;
		}

		.vm-bullet-list li,
		.vm-number-list li {
			margin-bottom: 12px;
		}

		.vm-bullet-list li:last-child,
		.vm-number-list li:last-child {
			margin-bottom: 0;
		}

		.vm-number-list strong {
			font-weight: 700;
		}
		
	/* ===== SECTION 4 ===== */
		.section4 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
			text-align: center;
			padding: 120px 30px 80px;
			height: auto;
			min-height: 100vh;
		}

		.section4-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section4::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.58);
			z-index: 1;
		}

		.section4-content,
		.section4 .scroll-down {
			position: relative;
			z-index: 2;
		}

		.section4-content {
			width: min(100%, 1400px);
			margin: 0 auto;
			padding: 0;
			color: #fff;
		}

		.wwd-header {
			max-width: 1100px;
			margin: 0 auto 60px;
		}

		.wwd-title {
			margin: 0 0 10px;
			font-family: 'Mortend', sans-serif;
			font-size: 4rem;
			font-weight: 800;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #fff;
		}

		.wwd-subtitle {
			margin: 0 0 12px;
			font-family: 'Mortend', sans-serif;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.15;
			text-transform: uppercase;
			color: #fff;
		}

		.wwd-description {
			margin: 0;
			font-family: 'SanDiego', sans-serif;
			font-size: 1.3rem;
			font-weight: 600;
			line-height: 1.6;
			color: #fff;
		}

		.wwd-flow-wrapper {
			position: relative;
			width: 100%;
			max-width: 1260px;
			margin: 0 auto 26px;
			padding-top: 78px;
		}

		.wwd-center-line {
			position: absolute;
			top: 0;
			left: 50%;
			width: calc(100% - 120px);
			height: 72px;
			border: 3px solid rgba(255, 255, 255, 0.95);
			border-bottom: 0;
			border-radius: 26px 26px 0 0;
			transform: translateX(-50%);
		}

		.wwd-center-marker {
			position: absolute;
			top: -58px;
			left: 50%;
			width: 3px;
			height: 58px;
			background: rgba(255, 255, 255, 0.95);
			transform: translateX(-50%);
		}

		.wwd-center-marker::before {
			content: "";
			position: absolute;
			top: -10px;
			left: 50%;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.98);
			transform: translateX(-50%);
		}

		.wwd-items {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 26px;
			align-items: start;
		}

		.wwd-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.wwd-badge-wrap {
			margin-bottom: 18px;
		}

		.wwd-badge {
			width: 120px;
			height: 120px;
			object-fit: contain;
			display: block;
		}

		.wwd-card {
			width: 100%;
			min-height: 138px;
			padding: 22px 18px;
			border: 3px solid rgba(255, 255, 255, 0.95);
			border-radius: 24px;
			background: rgba(180, 180, 180, 0.45);
			backdrop-filter: blur(4px);
			-webkit-backdrop-filter: blur(4px);

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

		.wwd-card p {
			margin: 0;
			font-family: 'SanDiego', sans-serif;
			font-size: 1.0rem;
			font-weight: 400;
			line-height: 1.45;
			color: #fff;
		}

		.wwd-footer-text {
			max-width: 1240px;
			margin: 0 auto;
			font-family: 'SanDiego', sans-serif;
			font-size: 1.25rem;
			font-weight: 700;
			line-height: 1.45;
			color: #fff;
		}

	/* ===== SECTION 5 ===== */
		.section5 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
			text-align: center;
		}

		.section5-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section5::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.48);
			z-index: 1;
		}

		.section5-content {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding: 70px 20px 36px;
			color: #fff;
		}

		.le-header {
			max-width: 1180px;
			margin: 0 auto 34px;
		}

		.le-title {
			margin: 0 0 10px;
			font-family: 'Mortend', sans-serif;
			font-size: 4rem;
			font-weight: 800;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #fff;
		}

		.le-subtitle {
			margin: 0 0 12px;
			font-family: 'Mortend', sans-serif;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.15;
			text-transform: uppercase;
			color: #fff;
		}

		.le-description {
			margin: 0;
			font-family: 'SanDiego', sans-serif;
			font-size: 1.3rem;
			font-weight: 600;
			line-height: 1.55;
			color: #fff;
		}

		.le-flow-wrapper {
			position: relative;
			width: 100%;
			max-width: 1260px;
			margin: 0 auto 26px;
			padding-top: 78px;
		}

		.le-center-line {
			position: absolute;
			top: 0;
			left: 50%;
			width: calc(100% - 120px);
			height: 62px;
			border: 3px solid rgba(255, 255, 255, 0.95);
			border-bottom: 0;
			border-radius: 26px 26px 0 0;
			transform: translateX(-50%);
		}

		.le-center-marker {
			position: absolute;
			top: -58px;
			left: 50%;
			width: 3px;
			height: 58px;
			background: rgba(255, 255, 255, 0.95);
			transform: translateX(-50%);
		}

		.le-center-marker::before {
			content: "";
			position: absolute;
			top: -10px;
			left: 50%;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.98);
			transform: translateX(-50%);
		}

		.le-items {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 26px;
			align-items: start;
		}

		.le-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.le-badge-wrap {
			margin-bottom: 16px;
		}

		.le-badge {
			display: block;
			width: 170px;
			height: auto;
			object-fit: contain;
		}

		.le-card {
			width: 100%;
			min-height: 138px;
			padding: 22px 18px;
			border: 3px solid rgba(255, 255, 255, 0.95);
			border-radius: 24px;
			background: rgba(180, 180, 180, 0.45);
			backdrop-filter: blur(4px);
			-webkit-backdrop-filter: blur(4px);
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.le-card p {
			margin: 0;
			font-family: 'SanDiego', sans-serif;
			font-size: 1rem;
			font-weight: 700;
			line-height: 1.4;
			color: #fff;
		}

		.le-footer-text {
			max-width: 1240px;
			margin: 0 auto;
			font-family: 'SanDiego', sans-serif;
			font-size: 1.25rem;
			font-weight: 700;
			line-height: 1.45;
			color: #fff;
		}
		
	/* ===== SECTION 6 ===== */
		.section6 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
			text-align: center;
		}

		.section6-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section6::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.42);
			z-index: 1;
		}

		.section6-content {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding: 70px 20px;
			color: #fff;
		}

		.portfolio-header {
			max-width: 1100px;
			margin: 0 auto 42px;
		}

		.portfolio-title {
			margin: 0 0 12px;
			font-family: 'Mortend', sans-serif;
			font-size: 4.4rem;
			font-weight: 800;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #fff;
		}

		.portfolio-subtitle {
			margin: 0;
			font-family: 'Mortend', sans-serif;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.15;
			text-transform: uppercase;
			color: #fff;
		}

		.portfolio-text-box {
			width: 100%;
			max-width: 1080px;
			margin: 0 auto;
			padding: 0 10px;
		}

		.portfolio-text-box p {
			margin: 0;
			font-family: 'SanDiego', sans-serif;
			font-size: 2.25rem;
			font-weight: 500;
			line-height: 1.65;
			color: #fff;
		}
		
	/* ===== SECTION 7 ===== */
		.section7 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
			text-align: center;
		}

		.section7-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section7::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.42);
			z-index: 1;
		}

		.section7-content {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding: 70px 20px;
			color: #fff;
		}

		/* Header */
		.portfolio2-header {
			max-width: 1100px;
			margin: 0 auto;
		}

		.portfolio2-title {
			margin: 0 0 12px;
			font-family: 'Mortend', sans-serif;
			font-size: 4.4rem;
			font-weight: 800;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #fff;
		}

		.portfolio2-subtitle {
			margin: 0;
			font-family: 'Mortend', sans-serif;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.15;
			text-transform: uppercase;
			color: #fff;
		}

	/* ===== SECTION 7 CAROUSEL ===== */
		.portfolio2-carousel-wrap {
			width: 100%;
			max-width: 1320px;
			margin: 40px auto 0;
			padding: 0 10px;
		}

		.portfolio2-item {
			border-radius: 20px;
			overflow: hidden;
		}

		.portfolio2-image {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
			border-radius: 20px;
		}

		/* Owl nav */
		.portfolio2-carousel .owl-nav {
			margin-top: 24px;
			display: flex;
			justify-content: center;
			gap: 14px;
			font-size: 1.1rem;
		}

		.portfolio2-carousel .owl-nav button.owl-prev,
		.portfolio2-carousel .owl-nav button.owl-next {
			width: 44px;
			height: 44px;
			border-radius: 50% !important;
			border: 1px solid rgba(255, 255, 255, 0.35) !important;
			background: rgba(255, 255, 255, 0.10) !important;
			color: #fff !important;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}

		.portfolio2-carousel .owl-nav button.owl-prev:hover,
		.portfolio2-carousel .owl-nav button.owl-next:hover {
			background: rgba(255, 255, 255, 0.22) !important;
		}

		/* Owl dots */
		.portfolio2-carousel .owl-dots {
			margin-top: 18px;
			text-align: center;
		}

		.portfolio2-carousel .owl-dots .owl-dot span {
			width: 10px;
			height: 10px;
			margin: 5px 6px;
			background: rgba(255, 255, 255, 0.35);
			transition: all 0.3s ease;
		}

		.portfolio2-carousel .owl-dots .owl-dot.active span,
		.portfolio2-carousel .owl-dots .owl-dot:hover span {
			background: #fff;
		}
		
		/* ===== PORTFOLIO CAPTION ===== */
		.portfolio2-caption {
			margin-top: 14px;
			font-family: 'SanDiego', sans-serif;
			font-size: 1rem;
			font-weight: 600;
			line-height: 1.4;
			color: #fff;
			text-align: center;
		}

		.portfolio2-lightbox-link {
			display: block;
			width: 100%;
			text-decoration: none;
		}

		.portfolio2-lightbox-link img {
			display: block;
			width: 100%;
		}
		
	/* ===== SECTION 8 ===== */
		.section8 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
			text-align: center;
		}

		.section8-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section8::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.58);
			z-index: 1;
		}

		.section8-content {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding: 70px 24px 50px;
			color: #fff;
		}

		.clients-header {
			max-width: 1100px;
			margin: 0 auto 42px;
		}

		.clients-title {
			margin: 0 0 12px;
			font-family: 'Mortend', sans-serif;
			font-size: 4.2rem;
			font-weight: 800;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #fff;
		}

		.clients-subtitle {
			margin: 0;
			font-family: 'Mortend', sans-serif;
			font-size: 1.9rem;
			font-weight: 700;
			line-height: 1.2;
			text-transform: uppercase;
			color: #fff;
		}

		.clients-logo-grid {
			width: 100%;
			max-width: 1240px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(5, minmax(0, 1fr));
			gap: 24px 34px;
			align-items: center;
			justify-items: center;
		}

		.client-logo-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 72px;
		}

		.client-logo-item img {
			display: block;
			max-width: 100%;
			max-height: 68px;
			width: auto;
			height: auto;
			object-fit: contain;
		}		
	
	/* ===== SECTION 9 ===== */
		.section9 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
			text-align: center;
		}

		.section9-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section9::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.52);
			z-index: 1;
		}

		.section9-content {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding: 40px 24px 30px;
			color: #fff;
		}

		.contact-header {
			margin: 0 auto 18px;
		}

		.contact-title {
			margin: 0;
			font-family: 'Mortend', sans-serif;
			font-size: 4.2rem;
			font-weight: 800;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #fff;
		}

		.contact-map-wrap {
			width: 100%;
			max-width: 1050px;
			margin: 0 auto 20px;
			border-radius: 26px;
			overflow: hidden;
		}

		.contact-map-image {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
			border-radius: 26px;
		}

		.contact-info {
			width: 100%;
			max-width: 1150px;
			margin: 0 auto;
		}

		.contact-address-ko {
			margin: 0 0 8px;
			font-family: 'SanDiego', sans-serif;
			font-size: 2.1rem;
			font-weight: 700;
			line-height: 1.3;
			color: #fff;
		}

		.contact-address-en {
			margin: 0 0 18px;
			font-family: 'SanDiego', sans-serif;
			font-size: 1.1rem;
			font-weight: 500;
			line-height: 1.5;
			color: #fff;
		}

		.contact-phone-list {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 12px 28px;
			margin-bottom: 18px;
		}

		.contact-phone-list span {
			font-family: 'SanDiego', sans-serif;
			font-size: 1rem;
			font-weight: 600;
			line-height: 1.4;
			color: #fff;
		}

		.contact-email-list {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 14px 34px;
			margin-bottom: 26px;
		}

		.contact-email-list a {
			font-family: 'SanDiego', sans-serif;
			font-size: 1rem;
			font-weight: 500;
			line-height: 1.4;
			color: #fff;
			text-decoration: none;
		}

		.contact-email-list a:hover {
			color: #fff;
			text-decoration: underline;
		}

		.contact-social-list {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 18px 70px;
		}

		.contact-social-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			min-width: 180px;
		}

		.contact-social-item i {
			font-size: 2.7rem;
			line-height: 1;
			color: #fff;
		}

		.contact-social-item span {
			font-family: 'SanDiego', sans-serif;
			font-size: 0.95rem;
			font-weight: 600;
			line-height: 1.4;
			color: #fff;
			text-align: center;
		}	

	/* ===== SECTION 10 ===== */
		.section10 {
			position: relative;
			overflow: hidden;
			background-color: transparent;
			text-align: center;
		}

		.section10-bg-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			z-index: 0;
		}

		.section10::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.42);
			z-index: 1;
		}

		.section10-content {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding: 70px 20px;
			color: #fff;
		}

		/* Header */
		.portfolio3-header {
			max-width: 1100px;
			margin: 0 auto;
		}

		.portfolio3-title {
			margin: 0 0 12px;
			font-family: 'Mortend', sans-serif;
			font-size: 4.4rem;
			font-weight: 800;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #fff;
		}

		.portfolio3-subtitle {
			margin: 0;
			font-family: 'Mortend', sans-serif;
			font-size: 2rem;
			font-weight: 700;
			line-height: 1.15;
			text-transform: uppercase;
			color: #fff;
		}

		/* Carousel */
		.portfolio3-carousel-wrap {
			width: 100%;
			max-width: 1320px;
			margin: 40px auto 0;
			padding: 0 10px;
		}

		.portfolio3-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 20px;
			overflow: hidden;
		}

		.portfolio3-lightbox-link {
			display: block;
			width: 100%;
			text-decoration: none;
		}

		.portfolio3-lightbox-link img {
			display: block;
			width: 100%;
		}

		.portfolio3-image {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
			border-radius: 20px;
		}

		.portfolio3-caption {
			margin-top: 14px;
			font-family: 'SanDiego', sans-serif;
			font-size: 1rem;
			font-weight: 600;
			line-height: 1.4;
			color: #fff;
			text-align: center;
		}

		/* Owl nav */
		.portfolio3-carousel .owl-nav {
			margin-top: 24px;
			display: flex;
			justify-content: center;
			gap: 14px;
		}

		.portfolio3-carousel .owl-nav button.owl-prev,
		.portfolio3-carousel .owl-nav button.owl-next {
			width: 44px;
			height: 44px;
			border-radius: 50% !important;
			border: 1px solid rgba(255, 255, 255, 0.35) !important;
			background: rgba(255, 255, 255, 0.10) !important;
			color: #fff !important;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}

		.portfolio3-carousel .owl-nav button.owl-prev:hover,
		.portfolio3-carousel .owl-nav button.owl-next:hover {
			background: rgba(255, 255, 255, 0.22) !important;
		}

		/* Owl dots */
		.portfolio3-carousel .owl-dots {
			margin-top: 18px;
			text-align: center;
		}

		.portfolio3-carousel .owl-dots .owl-dot span {
			width: 10px;
			height: 10px;
			margin: 5px 6px;
			background: rgba(255, 255, 255, 0.35);
			transition: all 0.3s ease;
		}

		.portfolio3-carousel .owl-dots .owl-dot.active span,
		.portfolio3-carousel .owl-dots .owl-dot:hover span {
			background: #fff;
		}		
		
		
		
		
	
	/* ===== TABLET (≤ 992px) ===== */
		@media (max-width: 992px) {

		/* SECTION 1 */
			.hero-content {
				max-width: 700px;
				padding: 20px;
			}

			.hero-title-image {
				max-width: 420px;
			}


		/* SECTION 2 - ABOUT */
			.section2 {
				padding: 120px 24px 76px;
			}

			.about-content {
				width: min(100%, 900px);
				padding: 0;
			}

			.about-title {
				font-size: 2.2rem;
				margin-bottom: 28px;
				letter-spacing: 1.5px;
			}

			.about-content p {
				font-size: 1.1rem;
				line-height: 1.7;
			}			
			
		/* SECTION 3 - VISION */
			.section3 {
				padding: 118px 28px 76px;
			}

			.vision-mission-content {
				width: min(100%, 1000px);
				padding: 0;
			}

			.vm-row {
				gap: 24px;
				margin-bottom: 30px;
			}

			.vm-label-col {
				flex: 0 0 210px;
			}

			.vm-label-img {
				max-width: 210px;
			}

			.vm-paragraph,
			.vm-bullet-list li,
			.vm-number-list li {
				font-size: 1rem;
				line-height: 1.65;
			}
			
		/* SECTION 4 - TABLET */
			.section4 {
				padding: 118px 24px 76px;
			}

			.section4-content {
				width: min(100%, 1100px);
				padding: 0;
			}

			.wwd-header {
				margin-bottom: 48px;
			}

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

			.wwd-subtitle {
				font-size: 1.55rem;
			}

			.wwd-description {
				font-size: 1.08rem;
				line-height: 1.55;
			}

			.wwd-flow-wrapper {
				max-width: 100%;
				padding-top: 84px;
			}

			.wwd-center-line {
				width: calc(100% - 60px);
				height: 60px;
			}

			.wwd-center-marker {
				top: -50px;
				height: 50px;
			}

			.wwd-items {
				grid-template-columns: repeat(2, 1fr);
				gap: 22px;
			}

			.wwd-badge {
				width: 110px;
				height: 110px;
			}

			.wwd-card {
				min-height: 132px;
				padding: 20px 16px;
			}

			.wwd-card p {
				font-size: 0.98rem;
				line-height: 1.45;
			}

			.wwd-footer-text {
				font-size: 1.02rem;
				line-height: 1.5;
			}
			
		/* SECTION 5 - TABLET */
			.section5-content {
				max-width: 1100px;
				padding: 84px 24px 34px;
			}

			.le-header {
				margin-bottom: 30px;
			}

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

			.le-subtitle {
				font-size: 1.55rem;
			}

			.le-description {
				font-size: 1.08rem;
				line-height: 1.55;
			}

			.le-flow-wrapper {
				padding-top: 70px;
				margin-bottom: 22px;
			}

			.le-center-line {
				width: calc(100% - 60px);
				height: 56px;
			}

			.le-center-marker {
				top: -50px;
				height: 50px;
			}

			.le-items {
				grid-template-columns: repeat(2, 1fr);
				gap: 22px;
			}

			.le-badge {
				width: 150px;
			}

			.le-card {
				min-height: 128px;
				padding: 20px 16px;
			}

			.le-card p {
				font-size: 0.96rem;
				line-height: 1.45;
			}

			.le-footer-text {
				font-size: 1.02rem;
				line-height: 1.5;
			}
			
		/* SECTION 6 - TABLET */
			.section6-content {
				max-width: 1100px;
				padding: 84px 24px;
			}

			.portfolio-header {
				margin-bottom: 34px;
			}

			.portfolio-title {
				font-size: 3.2rem;
			}

			.portfolio-subtitle {
				font-size: 1.55rem;
			}

			.portfolio-text-box {
				max-width: 900px;
			}

			.portfolio-text-box p {
				font-size: 1.65rem;
				line-height: 1.6;
			}
			
		/* SECTION 7 - TABLET */
			.section7-content {
				max-width: 1100px;
				padding: 84px 24px;
			}

			.portfolio2-title {
				font-size: 3.2rem;
			}

			.portfolio2-subtitle {
				font-size: 1.55rem;
			}
			
			.portfolio2-caption {
				font-size: 0.95rem;
			}
			
		/* SECTION 7 CAROUSEL - TABLET */
			.portfolio2-carousel-wrap {
				margin-top: 30px;
				padding: 0;
			}

			.portfolio2-image {
				height: 340px;
			}
			
		/* SECTION 8 - TABLET */
			.section8-content {
				max-width: 1100px;
				padding: 84px 24px 48px;
			}

			.clients-header {
				margin-bottom: 34px;
			}

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

			.clients-subtitle {
				font-size: 1.45rem;
				line-height: 1.25;
			}

			.clients-logo-grid {
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: 22px 24px;
			}

			.client-logo-item {
				min-height: 64px;
			}

			.client-logo-item img {
				max-height: 56px;
			}
			
		/* SECTION 9 - TABLET */
			.section9-content {
				max-width: 1100px;
				padding: 70px 24px 34px;
			}

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

			.contact-map-wrap {
				max-width: 920px;
				margin-bottom: 18px;
			}

			.contact-address-ko {
				font-size: 1.7rem;
			}

			.contact-address-en {
				font-size: 1rem;
				margin-bottom: 16px;
			}

			.contact-phone-list span,
			.contact-email-list a {
				font-size: 0.95rem;
			}

			.contact-social-list {
				gap: 18px 42px;
			}

			.contact-social-item {
				min-width: 150px;
			}

			.contact-social-item i {
				font-size: 2.3rem;
			}
			
		/* SECTION 10 - TABLET */
			.section10-content {
				max-width: 1100px;
				padding: 84px 24px;
			}

			.portfolio3-title {
				font-size: 3.2rem;
			}

			.portfolio3-subtitle {
				font-size: 1.55rem;
			}

			.portfolio3-carousel-wrap {
				margin-top: 30px;
				padding: 0;
			}

			.portfolio3-image {
				height: auto;
			}

			.portfolio3-caption {
				font-size: 0.95rem;
			}

		}	
		
		/* ===== MOBILE (≤ 576px) ===== */
		@media (max-width: 576px) {

		/* SECTION 1 */
			.hero-content {
				max-width: 100%;
				padding: 16px;
			}

			.hero-title-image {
				max-width: 300px;
			}


		/* SECTION 2 - ABOUT */
			.section2 {
				padding: 110px 18px 72px;
			}

			.about-content {
				width: 100%;
				padding: 0;
			}

			.about-title {
				font-size: 1.3rem;
				margin-bottom: 20px;
				letter-spacing: 1px;
			}

			.about-content p {
				font-size: 0.92rem;
				line-height: 1.65;
			}
			
		/* SECTION 3 - VISION */
			.section3 {
				padding: 108px 18px 72px;
			}

			.vision-mission-content {
				width: 100%;
				padding: 0;
			}

			.vm-row {
				flex-direction: column;
				align-items: center;
				gap: 14px;
				margin-bottom: 28px;
			}

			.vm-label-col,
			.vm-label-col-right {
				flex: 0 0 auto;
				justify-content: center;
			}

			.vm-label-img {
				max-width: 180px;
			}

			.vm-text-col,
			.vm-text-col-wide {
				width: 100%;
				text-align: center;
			}

			.vm-paragraph,
			.vm-bullet-list li,
			.vm-number-list li {
				font-size: 0.95rem;
				line-height: 1.6;
			}

			.vm-bullet-list,
			.vm-number-list {
				padding-left: 22px;
				display: inline-block;
				text-align: left;
			}
			
		/* SECTION 4 - MOBILE */
			.section4 {
				padding: 108px 18px 72px;
			}

			.section4-content {
				width: 100%;
				padding: 0;
			}

			.wwd-header {
				margin-bottom: 30px;
			}

			.wwd-title {
				font-size: 1.9rem;
				line-height: 1.1;
				letter-spacing: 1px;
			}

			.wwd-subtitle {
				font-size: 1rem;
				line-height: 1.3;
				margin-bottom: 10px;
			}

			.wwd-description {
				font-size: 0.88rem;
				line-height: 1.55;
				font-weight: 500;
			}

			.wwd-flow-wrapper {
				padding-top: 0;
			}

			.wwd-center-line,
			.wwd-center-marker {
				display: none;
			}

			.wwd-items {
				grid-template-columns: 1fr;
				gap: 18px;
			}

			.wwd-item {
				gap: 10px;
			}

			.wwd-badge-wrap {
				margin-bottom: 0;
			}

			.wwd-badge {
				width: 92px;
				height: 92px;
			}

			.wwd-card {
				min-height: auto;
				padding: 18px 16px;
				border-radius: 20px;
			}

			.wwd-card p {
				font-size: 0.92rem;
				line-height: 1.5;
				font-weight: 400;
			}

			.wwd-footer-text {
				font-size: 0.92rem;
				line-height: 1.55;
				font-weight: 600;
			}
			
		/* SECTION 5 - MOBILE */
			.section5 {
				min-height: 100vh;
				height: auto;
			}

			.section5-content {
				padding: 82px 18px 34px;
			}

			.le-header {
				margin-bottom: 24px;
			}

			.le-title {
				font-size: 1.9rem;
				line-height: 1.1;
				letter-spacing: 1px;
			}

			.le-subtitle {
				font-size: 1rem;
				line-height: 1.3;
				margin-bottom: 10px;
			}

			.le-description {
				font-size: 0.88rem;
				line-height: 1.55;
				font-weight: 500;
			}

			.le-flow-wrapper {
				padding-top: 0;
				margin-bottom: 22px;
			}

			.le-center-line,
			.le-center-marker {
				display: none;
			}

			.le-items {
				grid-template-columns: 1fr;
				gap: 18px;
			}

			.le-item {
				gap: 10px;
			}

			.le-badge-wrap {
				margin-bottom: 0;
			}

			.le-badge {
				width: 130px;
			}

			.le-card {
				min-height: auto;
				padding: 18px 16px;
				border-radius: 20px;
			}

			.le-card p {
				font-size: 0.92rem;
				line-height: 1.5;
				font-weight: 600;
			}

			.le-footer-text {
				font-size: 0.92rem;
				line-height: 1.55;
				font-weight: 600;
			}

		/* SECTION 6 - MOBILE */
			.section6 {
				min-height: 100vh;
				height: auto;
			}

			.section6-content {
				padding: 82px 18px 48px;
			}

			.portfolio-header {
				margin-bottom: 24px;
			}

			.portfolio-title {
				font-size: 2rem;
				line-height: 1.1;
				letter-spacing: 1px;
			}

			.portfolio-subtitle {
				font-size: 1rem;
				line-height: 1.3;
			}

			.portfolio-text-box {
				max-width: 100%;
				padding: 0;
			}

			.portfolio-text-box p {
				font-size: 1rem;
				line-height: 1.8;
				font-weight: 500;
			}
		/* SECTION 7 - MOBILE */
			.section7 {
				min-height: 100vh;
				height: auto;
			}

			.section7-content {
				padding: 82px 18px 48px;
			}

			.portfolio2-title {
				font-size: 2rem;
				line-height: 1.1;
				letter-spacing: 1px;
			}

			.portfolio2-subtitle {
				font-size: 1rem;
				line-height: 1.3;
			}
			
			.portfolio2-caption {
				font-size: 0.9rem;
				margin-top: 10px;
			}
			
		/* SECTION 7 CAROUSEL - MOBILE */
			.portfolio2-carousel-wrap {
				margin-top: 24px;
				padding: 0;
			}

			.portfolio2-image {
				height: 240px;
			}

			.portfolio2-carousel .owl-nav {
				margin-top: 18px;
				gap: 10px;
			}

			.portfolio2-carousel .owl-nav button.owl-prev,
			.portfolio2-carousel .owl-nav button.owl-next {
				width: 40px;
				height: 40px;
			}
			
		/* SECTION 8 - MOBILE */
			.section8 {
				min-height: 100vh;
				height: auto;
			}

			.section8-content {
				padding: 82px 18px 40px;
			}

			.clients-header {
				margin-bottom: 24px;
			}

			.clients-title {
				font-size: 2rem;
				line-height: 1.1;
				letter-spacing: 1px;
			}

			.clients-subtitle {
				font-size: 0.95rem;
				line-height: 1.35;
			}

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

			.client-logo-item {
				min-height: 56px;
			}

			.client-logo-item img {
				max-height: 44px;
			}
			
		/* SECTION 9 - MOBILE */
			.section9 {
				min-height: 100vh;
				height: auto;
			}

			.section9-content {
				padding: 82px 18px 34px;
			}

			.contact-header {
				margin-bottom: 14px;
			}

			.contact-title {
				font-size: 2rem;
				line-height: 1.1;
				letter-spacing: 1px;
			}

			.contact-map-wrap {
				margin-bottom: 16px;
				border-radius: 18px;
			}

			.contact-map-image {
				border-radius: 18px;
			}

			.contact-address-ko {
				font-size: 1.05rem;
				line-height: 1.4;
				margin-bottom: 8px;
			}

			.contact-address-en {
				font-size: 0.88rem;
				line-height: 1.55;
				margin-bottom: 14px;
			}

			.contact-phone-list {
				flex-direction: column;
				gap: 8px;
				margin-bottom: 14px;
			}

			.contact-phone-list span {
				font-size: 0.9rem;
			}

			.contact-email-list {
				flex-direction: column;
				gap: 8px;
				margin-bottom: 20px;
			}

			.contact-email-list a {
				font-size: 0.9rem;
			}

			.contact-social-list {
				gap: 18px;
				flex-direction: column;
				align-items: center;
			}

			.contact-social-item {
				min-width: auto;
				gap: 6px;
			}

			.contact-social-item i {
				font-size: 2rem;
			}

			.contact-social-item span {
				font-size: 0.88rem;
			}
			
		/* SECTION 10 - MOBILE */
			.section10 {
				min-height: 100vh;
				height: auto;
			}

			.section10-content {
				padding: 82px 18px 48px;
			}

			.portfolio3-title {
				font-size: 2rem;
				line-height: 1.1;
				letter-spacing: 1px;
			}

			.portfolio3-subtitle {
				font-size: 1rem;
				line-height: 1.3;
			}

			.portfolio3-carousel-wrap {
				margin-top: 24px;
				padding: 0;
			}

			.portfolio3-image {
				height: auto;
			}

			.portfolio3-caption {
				font-size: 0.9rem;
				margin-top: 10px;
			}

			.portfolio3-carousel .owl-nav {
				margin-top: 18px;
				gap: 10px;
			}

			.portfolio3-carousel .owl-nav button.owl-prev,
			.portfolio3-carousel .owl-nav button.owl-next {
				width: 40px;
				height: 40px;
			}

		}

        .scroll-down {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2rem;
            color: white;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }

        .scroll-down:hover {
            transform: translateX(-50%) translateY(5px);
        }

        @media (max-width: 991.98px) {
            .topbar .desktop-only {
                display: none !important;
            }

            .topbar-left {
                justify-content: flex-start;
            }

            .topbar-center {
                justify-content: center;
            }

            .topbar-right {
                justify-content: flex-end;
            }
        }

        @media (min-width: 992px) {
            .topbar .mobile-only {
                display: none !important;
            }

            .topbar-left {
                justify-content: flex-start;
            }

            .topbar-center {
                justify-content: center;
            }

            .topbar-right {
                justify-content: flex-end;
            }
        }