/* ================================================== [ Design Tokens ] ================================================== */
:root {
    /* Colors */
    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;

    --dark-blue: #253D7F;
    --cyan: #28d7d0;
    --soft-red: #E65A4B;
    --dark-green: #1A806C;
    --green: #00A56E;
    --gold: #C8A573;
    --lime: #A4FC56;
    --charcoal: #414042;
    --gray: #646464;

    --yellow: #FFCD42;
    
    --primary: var(--dark-blue);

    --body-bg: var(--white);
    --border-color: #FFDC8C;

    --shadow-3px : 3px;

    /* Fonts */
    --font-primary: 'Montserrat', sans-serif;

    --font-sinkinSans: 'Sinkin Sans', sans-serif;
    --font-konnect: 'Konnect', sans-serif;
    --font-dynaPuff: 'DynaPuff', sans-serif;
    --font-arboria: 'Arboria', sans-serif;
    --font-assistant: 'Assistant', sans-serif;
    --font-babyBlooming: 'Baby Blooming', sans-serif;

    /* Font sizes */
    --fs-base: 16px;
    --fs-h1: 48px;
    --fs-h2: 40px;
    --fs-h3: 32px;
    --fs-h4: 26px;
    --fs-h5: 22px;
    --fs-h6: 18px;

    --fs-18: 18px;
    --lh-24: 24px;

    --fs-20: 20px;

    --fs-22: 22px;
    --lh-26: 26px;

    --fs-32: 32px;
    --lh-39: 39px;

    --fs-36: 36px;
    --lh-40: 40px;

    /* Line heights */
    --lh-base: 26px;
    --lh-h1: 56px;
    --lh-h2: 48px;
    --lh-h3: 40px;
    --lh-h4: 34px;
    --lh-h5: 30px;
    --lh-h6: 26px;

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 60px;

    /* Layout */
    --container: 1024px;
    --container-padding: 20px;
    --gutter: 24px;

    /* Radius */
    --radius-20: 20px;
    /* --radius-md: 12px;
    --radius-pill: 50px; */

    /* Content */
    --marker-color: var(--primary);
    --blockquote-border: var(--primary);
    --blockquote-bg: var(--white);
    --pre-bg: var(--white);
    --pre-color: var(--primary);

    /* Motion */
    --transition: 0.3s ease-in-out;
}

/* ================================================== [ Base / Reset ] ================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    scrollbar-width: thin;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-base);
    color: var(--primary);
    background: var(--body-bg);
    overflow-x: hidden;
}

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

figure {
    margin: 0;
}

a,
button,
input,
textarea {
    outline: none;
}

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

hr {
    margin-block: var(--space-md);
    border: none;
    border-top: 1px solid var(--dark-blue);
    opacity: 1;
}

br {
    margin-bottom: 0 !important;
}

/* ================================================== [ Typography & Content ] ================================================== */
p {
    margin-bottom: var(--space-md);
}

strong,
b {
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); }

ul,
ol {
    padding-left: 20px;
    margin-bottom: var(--space-md);
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

li::marker {
    color: var(--marker-color);
}

blockquote {
    padding: 16px 16px 16px 24px;
    margin-bottom: var(--space-md);
    border-left: 5px solid var(--blockquote-border);
    background: var(--blockquote-bg);
}

pre {
    background: var(--pre-bg);
    color: var(--pre-color);
    padding: 16px;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    overflow: auto;
}

pre code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ================================================== [ Layout & Utilities ] ================================================== */
.container,
.container-fluid {
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--gutter) / -2);
    row-gap: var(--gutter);
}

.row > * {
    padding-inline: calc(var(--gutter) / 2);
}

.img-cover * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ================================================== [ Tables, Forms & Common Elements ] ================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
}

th,
td {
    border: 1px solid var(--dark-blue);
    padding: 8px 12px;
    text-align: left;
}

th {
    background: var(--primary);
    color: var(--white);
}

textarea {
    resize: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

/* ================================================== [ Buttons ] ================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    text-transform: uppercase;
    justify-content: center;
    gap: 10px;
    padding: 4px 14px;
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 20px;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -ms-transition: var(--transition);
    -o-transition: var(--transition);
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    -ms-border-radius: 9999px;
    -o-border-radius: 9999px;
}

.btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-primary {
    color: var(--white);
    background: var(--dark-blue);
    border-color: var(--dark-blue);
}

.btn-primary:is(:hover, :focus-visible, :active) {
    background: var(--soft-red);
    color: var(--white);
    border-color: var(--soft-red);
}

.btn-secondary {
    color: var(--primary);
    background: var(--transparent);
    border-color: var(--primary);
}

.btn-secondary:is(:hover, :focus-visible, :active) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* ================================================== [ Pages – Error 404 ] ================================================== */
.error-404 {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) 0;
}

.error-404 .heading {
    text-align: center;
}

/* ================================================== [ Pages – Typography Page ] ================================================== */
.typography {
	padding-block: 120px;
}

.typography img {
	max-width: 300px;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center;
	margin-bottom: 20px;
}

.typography img.align-left {
	margin-right: 40px;
	float: left;
}

.typography img.align-right {
	margin-left: 40px;
	float: right;
}

.typography img.align-center {
	margin-inline: auto;
	display: block;
}

/* ================================================== [ Common Title Start ] ================================================== */
.title-32 * { font-family: var(--font-dynaPuff); font-size: var(--fs-32); font-weight: 500; color: var(--white); line-height: var(--lh-39); margin-bottom: 20px; }
.title-36 * { font-family: var(--font-primary); font-size: var(--fs-36); font-weight: 700; color: var(--white); line-height: var(--lh-40); margin-bottom: 20px; }

.title-32.title-darkBlue * { color: var(--dark-blue); }
.title-36.title-darkBlue * { color: var(--dark-blue); }

.title-32.title-gold * { color: var(--gold); }
.title-36.title-gold * { color: var(--gold); }

.title-32.title-yellow * { color: var(--yellow); }
.title-36.title-yellow * { color: var(--yellow); }

.title-32.title-borderColor * { color: var(--border-color); }
.title-36.title-borderColor * { color: var(--border-color); }

.title-32.title-green * { color: var(--green); }
.title-36.title-green * { color: var(--green); }

.title-32.title-softRed * { color: var(--soft-red); }
.title-36.title-softRed * { color: var(--soft-red); }

.title-32.title-black * { color: var(--black); }
.title-36.title-black * { color: var(--black); }

.disc-12 * { font-family: var(--font-primary); font-size: 12px; font-weight: 400; color: var(--white); letter-spacing: 0.03px; line-height: 16px; }
.disc-12 small { font-size: 8px; }
.disc-12 strong { font-weight: 700; }

.disc-14 * { font-family: var(--font-primary); font-size: 14px; font-weight: 400; color: var(--white); letter-spacing: 0.03px; line-height: var(--lh-24); }

.disc-14 strong {
    font-weight: 700;
}

.disc-12.disc-black * { color: var(--black); }
.disc-14.disc-black * { color: var(--black); }

.disc-18 * { font-family: var(--font-primary); font-size: var(--fs-18); font-weight: 400; color: var(--white); letter-spacing: 0.03px; line-height: var(--lh-24); }
/* ================================================== [ Common Title End ] ================================================== */

.custom-bg-softRed { background-color: var(--soft-red); }
.custom-bg-gold { background-color: var(--gold); }
.custom-bg-darkBlue { background-color: var(--dark-blue); }
.custom-bg-darkGreen { background-color: var(--dark-green); }

/* ================================================== [ Wave Start ] ================================================== */
.wave-section { position: relative; background: #0d2c6c; padding: 140px 0 160px; clip-path: polygon( 0 0, 100% 0, 100% 78%, 85% 82%, 70% 76%, 55% 84%, 40% 78%, 25% 86%, 10% 82%, 0 88% ); }
/* ================================================== [ Wave End ] ================================================== */

/* ================================================== [ Header Start ] ================================================== */
.header .header-block { margin-top: 40px; display: flex; align-items: start; gap: 40px; justify-content: space-between; }

.header .logo-parent { display: flex; align-items: start; justify-content: space-between; max-width: 664px; width: 100%; gap: 20px; }

.header .left { max-width: 347px; width: 100%; }
.header .center { aspect-ratio: 297 / 321; max-width: 297px; width: 100%; }
.header .right { aspect-ratio: 157 / 147; max-width: 157px; width: 100%; }

.header .left * { font-family: var(--font-primary); font-style: normal; font-weight: 700; font-size: var(--fs-22); line-height: var(--lh-26); color: var(--dark-blue); margin-bottom: 0; }
.header .left { position: relative; padding: 14px 26px; background-color: var(--lime); border-radius: var(--radius-20); -webkit-border-radius: var(--radius-20); -moz-border-radius: var(--radius-20); -ms-border-radius: var(--radius-20); -o-border-radius: var(--radius-20); border-bottom-right-radius: 0; }
.header .left::after { position: absolute; display: block; height: auto; width: 33px; aspect-ratio: 33 / 27; top: calc(100% - 5px); right: -12px; content: ""; background: url('../images/svgs/message-bottom-icon.svg') no-repeat; background-size: contain; background-position: top; z-index: -1; }

.header .logo-cover a { display: block; height: 100%; width: 100%; }
.header .logo-cover img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
/* ================================================== [ Header End ] ================================================== */

/* ================================================== [ Banner Start ] ================================================== */
/* .home-banner .banner-bg { width: 100%; }
.home-banner .banner-bg * { width: 100%; } */
/* ================================================== [ Banner End ] ================================================== */

/* ================================================== [ Banner End ] ================================================== */

/* ================================================== [ Breakfast Balcony Start ] ================================================== */
.breakfast-balcony { background-color: var(--cyan); }
.breakfast-balcony .breakfast-balcony-block { display: flex; align-items: center; gap: 40px; }

.breakfast-balcony .breakfast-balcony-block .heading { position: relative; }

.breakfast-balcony .breakfast-balcony-left { position: relative; width: calc(67% - 20px); height: 634px; overflow-x: clip; }
.breakfast-balcony .breakfast-balcony-left .breakfast-balcony-img { height: 100%; border-top-right-radius: 200px; overflow: hidden; }
.breakfast-balcony .breakfast-balcony-left img { height: 100%; width: 100%; }

.breakfast-balcony .breakfast-balcony-right { width: calc(33% - 20px); }

.breakfast-balcony .title-32 { max-width: 403px; width: 100%; margin-left: -186px; }
.breakfast-balcony .disc-14 { max-width: 222px; width: 100%; }

.breakfast-balcony .egg-yolk-img { user-select: none; position: absolute; top: -40px; left: 145px; max-width: 222px; width: 100%; }
.breakfast-balcony .bottom-right-img { user-select: none; position: absolute; bottom: 58px; right: 0; max-width: 401px; width: 100%; }

.breakfast-balcony .bottom-right-img .text { position: absolute; bottom: 80px; right: 90px; }
.breakfast-balcony .bottom-right-img .text * { font-family: var(--font-dynaPuff); font-style: normal; font-weight: 500; font-size: 18px; line-height: 22px; letter-spacing: 0.07px; color: var(--white); text-align: center; }
.breakfast-balcony .bottom-right-img .text span { color: #FFDC00; }
/* ================================================== [ Breakfast Balcony End ] ================================================== */

/* ================================================== [ Dark Blue Section Start ] ================================================== */
.darkblue-section { overflow-x: clip; position: relative; margin-top: -164px; }
.darkblue-section .darkblue-section-block { position: relative; background-color: var(--dark-blue); margin-top: -40px; overflow: hidden; }

.darkblue-section .top-section { margin-bottom: 120px; }
.darkblue-section .top-section .heading { max-width: 845px; width: 100%; text-align: center; margin-inline: auto; }
.darkblue-section .top-section .heading .title-36 { max-width: 800px; width: 100%; text-align: center; margin-inline: auto; }

.bottom-shape-blue { height: auto; }

.top-shape-blue { position: relative; width: calc(100% + 2px); z-index: 4; }
.darkblue-section-block { position: relative; z-index: 5; }
.bottom-shape-blue { position: relative; width: 100%; z-index: 6; }

/* .top-shape-blue { height: auto; min-width: 800px; position: relative; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); width: calc(100% + 2px); } */

.top-shape-blue * ,
.bottom-shape-blue * { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* .bottom-shape-blue::after { position: absolute; display: block; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: url('../images/thumb/bottom-shape-texture.webp') no-repeat; background-size: cover; background-position: center; mix-blend-mode: multiply; } */
.bottom-shape-blue .bottom-shape-texture { position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; mix-blend-mode: multiply; }
.bottom-shape-blue::before { position: absolute; display: block; content: ""; bottom: 44.59%; left: 0; width: 22.39%; aspect-ratio: 323 / 273; background: url('../images/thumb/grass-icon.png') no-repeat; background-size: cover; background-position: center; z-index: 9; }
.bottom-shape-blue::after { position: absolute; display: block; content: ""; bottom: 0; right: 12.36%; width: 17.63%; aspect-ratio: 254 / 264; background: url('../images/thumb/thumb-icon.png') no-repeat; background-size: cover; background-position: center; z-index: 9; }

.darkblue-section-block::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/thumb/center-shape-texture.webp'); background-repeat: repeat-y; background-position: top center;   background-size: min(1440px, 100%) auto; mix-blend-mode: multiply; }
.top-shape-blue::after { position: absolute; display: block; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: url('../images/thumb/top-shape-texture.webp') no-repeat; background-size: cover; background-position: center; mix-blend-mode: multiply; }

.darkblue-section-block > * { position: relative; z-index: 3;  }

.darkblue-section-block .top-section-block { margin-top: 50px; }

.darkblue-section-block .top-section-block { display: flex; align-items: start; gap: 40px; }
.darkblue-section-block .top-section-block .top-left-part { width: calc(67% - 20px); }
.darkblue-section-block .top-section-block .top-left-part .image-content { box-shadow: 0px 0px 40px var(--black); height: 530px; }

.darkblue-section-block .top-section-block .top-right-part { width: calc(33% - 20px); margin-top: 24px; padding-right: 20px; }
.darkblue-section-block .top-right-part ul { max-width: 300px; width: 100%; display: flex; flex-direction: column; gap: 18px; list-style-type: disc; }
.darkblue-section-block .top-right-part ul li::marker { color: var(--white); font-size: 14px; }
.darkblue-section-block .top-right-part ul li { font-size: var(--fs-20); line-height: var(--lh-24); font-weight: 400; color: var(--white); }

.darkblue-section-block .top-left-part { position: relative; }
.darkblue-section-block .top-left-part .text-block { max-width: 420px; position: absolute; bottom: 30px; right: 20px; }
/* .darkblue-section-block .top-left-part .text-block * { font-family: var(--font-dynaPuff); font-size: var(--fs-32); font-weight: 500; color: var(--white); line-height: var(--lh-39); margin-bottom: 0; text-shadow: -3px  0   0 var(--dark-green), 3px  0   0 var(--dark-green), 0   -3px 0 var(--dark-green), 0    3px 0 var(--dark-green), -3px -3px 0 var(--dark-green), 3px -3px 0 var(--dark-green), -3px  3px 0 var(--dark-green), 3px  3px 0 var(--dark-green); } */

.darkblue-section-block .top-left-part .text-block * {
    font-family: var(--font-dynaPuff);
    font-size: var(--fs-32);
    font-weight: 500;
    color: var(--white);
    line-height: var(--lh-39);
    margin-bottom: 0;
    text-shadow: 
    calc(-1 * var(--shadow-3px)) 0 0 var(--dark-green),
    var(--shadow-3px) 0 0 var(--dark-green),
    0 calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    0 var(--shadow-3px) 0 var(--dark-green),
    calc(-1 * var(--shadow-3px)) calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    var(--shadow-3px) calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    calc(-1 * var(--shadow-3px)) var(--shadow-3px) 0 var(--dark-green),
    var(--shadow-3px) var(--shadow-3px) 0 var(--dark-green);
}


.darkblue-section-block .bottom-section { position: relative; max-width: 1920px; width: 100%; margin-inline: auto; }
.darkblue-section-block .bottom-section .heading { max-width: 876px; width: 100%; margin-inline: auto; text-align: center; margin-bottom: 30px; }

.darkblue-section-block .birds-icon { position: absolute; right: -40px; top: -180px; aspect-ratio: 462 / 425; height: auto; width: 462px; }

.darkblue-section-block .location-section { max-width: 746px; width: 100%; margin-inline: auto; }

.darkblue-section-block .location-bottom { margin-top: 60px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.darkblue-section-block .location-bottom .card-round { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.darkblue-section-block .location-bottom .card-round .image { height: 100px; width: 100px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--dark-green); } 
.darkblue-section-block .location-bottom .card-round .image * { height: 60%; width: 60%; object-fit: scale-down; object-position: center; } 

.darkblue-section-block .location-bottom .card-round .disc-14 * { margin-bottom: 0; } 

.darkblue-section-block .location-top { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 30px; } 
.darkblue-section-block .location-top .down-icon { height: 14px; width: 14px; } 

.darkblue-section-block .location-top .text-block { display: flex; align-items: stretch; gap: 10px; } 
.darkblue-section-block .location-top .text-block .disc-12 * { max-width: 170px; width: 100%; text-align: center; margin-bottom: 0; } 

.darkblue-section-block .location-top .text-block .bracket-left { height: auto; width: 8px; border: 1px solid #ffffff; border-right: unset; } 
.darkblue-section-block .location-top .text-block .bracket-right { height: auto; width: 8px; border: 1px solid #ffffff; border-left: unset; } 

.darkblue-section-block .location-center .circle { background-color: var(--dark-blue); display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; border: 15px solid var(--gold); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } 

.darkblue-section-block .location-center .circle .circle-content { display: flex; flex-direction: column; } 
.darkblue-section-block .location-center .circle .text * { font-family: var(--font-primary); font-size: 17px; font-weight: 400; color: var(--gold); letter-spacing: -0.40px; line-height: 34px; margin-bottom: 0; } 
.darkblue-section-block .location-center .circle .text { padding-inline: 10px; } 
.darkblue-section-block .location-center .circle .text span { font-size: 25px; line-height: 34px; letter-spacing: -0.27px; } 
.darkblue-section-block .location-center .circle .text:first-child { border-bottom: 1px solid var(--gold); } 

.darkblue-section-block .location-center .circle-block { display: flex; flex-direction: column; gap: 16px; justify-content: center; max-width: 143px; text-align: center; flex-grow: 1; } 
.darkblue-section-block .location-center .circle-block .disc-14 * { max-width: 125px; margin-inline: auto; margin-bottom: 0; line-height: 120%; } 

.darkblue-section-block .location-center { display: flex; gap: 0; } 

.darkblue-section-block .location-center .circle-block.big-circle-block { max-width: 172px; width: 100%; } 

.darkblue-section-block .location-center .big-circle-block .circle { position: relative; } 

.darkblue-section-block .location-center .big-circle-block .circle::after { content: ""; display: block; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); height: 14px; width: 14px; background: url('../images/svgs/down-icon.svg') no-repeat; background-size: 100%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } 
.darkblue-section-block .location-center .big-circle-block .circle::before { content: ""; display: block; position: absolute; aspect-ratio: 1 / 1; width: calc(100% + 100px); border: 4px dotted var(--gold); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; z-index: -1; } 

.grass-icon { position: absolute; width: 400px; bottom: -30px; left: 0; z-index: 1; }  
.thumbsup-icon { position: absolute; width: 200px; height: 200px; bottom: 0; left: 0; z-index: 1; } 
.darkblue-section-block .bottom-shape-section { position: relative; } 

.darkblue-section-block .location-map-img-block { max-width: 746px; width: 100%; margin-inline: auto; } 
.darkblue-section-block .location-map-img-block >* { max-width: 100%; width: 100%; height: auto; aspect-ratio: 746 / 344; } 

/* ================================================== [ Dark Blue Section End ] ================================================== */

/* ================================================== [ Dark Blue Section Start ] ================================================== */
.pool-section { margin-top: -200px; overflow: clip; }
.pool-section .pool-section-block { position: relative; background: url('../images/thumb/pool-image.webp') no-repeat; width: 100%; background-size: cover; padding-block: 300px 60px; background-position: center; }

.pool-section .text-content { display: flex; flex-direction: column; gap: 70px; }
.pool-section .text-content .pool-text-top { position: relative; max-width: 466px; width: 100%; margin-inline: auto 0; }
.pool-section .text-content .pool-text-bottom { position: relative; max-width: 507px; width: 100%; margin-inline: 0 auto; }

.pool-section .text-content .pool-text-top >* ,
.pool-section .text-content .pool-text-bottom >* { position: relative; z-index: 3; }

.pool-section .text-content .pool-text-top::after { display: block; content: ""; position: absolute; top: 50%; left: 50%; background-color: var(--white); height: 600px; width: 600px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); filter: blur(70px); -webkit-filter: blur(80px); }

.pool-section .text-content .pool-text-bottom::after { display: block; content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: var(--white); height: 300px; width: 300px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; filter: blur(60px); -webkit-filter: blur(40px); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }

/* .pool-section .text-content .pool-text-top .title-32 * { text-shadow: -3px  0   0 var(--dark-blue), 3px  0   0 var(--dark-blue), 0   -3px 0 var(--dark-blue), 0    3px 0 var(--dark-blue), -3px -3px 0 var(--dark-blue), 3px -3px 0 var(--dark-blue), -3px  3px 0 var(--dark-blue), 3px  3px 0 var(--dark-blue); }
.pool-section .text-content .pool-text-bottom .title-32 * { margin-bottom: 0; text-shadow: -3px  0   0 var(--dark-green), 3px  0   0 var(--dark-green), 0   -3px 0 var(--dark-green), 0    3px 0 var(--dark-green), -3px -3px 0 var(--dark-green), 3px -3px 0 var(--dark-green), -3px  3px 0 var(--dark-green), 3px  3px 0 var(--dark-green); } */

/* Pool section top text */
.pool-section .text-content .pool-text-top .title-32 * {
    text-shadow: 
    calc(-1 * var(--shadow-3px)) 0 0 var(--dark-blue),
    var(--shadow-3px) 0 0 var(--dark-blue),
    0 calc(-1 * var(--shadow-3px)) 0 var(--dark-blue),
    0 var(--shadow-3px) 0 var(--dark-blue),
    calc(-1 * var(--shadow-3px)) calc(-1 * var(--shadow-3px)) 0 var(--dark-blue),
    var(--shadow-3px) calc(-1 * var(--shadow-3px)) 0 var(--dark-blue),
    calc(-1 * var(--shadow-3px)) var(--shadow-3px) 0 var(--dark-blue),
    var(--shadow-3px) var(--shadow-3px) 0 var(--dark-blue);
}

/* Pool section bottom text */
.pool-section .text-content .pool-text-bottom .title-32 * {
    margin-bottom: 0;
    text-shadow: 
    calc(-1 * var(--shadow-3px)) 0 0 var(--dark-green),
    var(--shadow-3px) 0 0 var(--dark-green),
    0 calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    0 var(--shadow-3px) 0 var(--dark-green),
    calc(-1 * var(--shadow-3px)) calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    var(--shadow-3px) calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    calc(-1 * var(--shadow-3px)) var(--shadow-3px) 0 var(--dark-green),
    var(--shadow-3px) var(--shadow-3px) 0 var(--dark-green);
}

.pool-section .leaf-icons { position: absolute; top: 100px; left: 53%; width: 114px; aspect-ratio: 114 / 168; height: auto; z-index: 4; }
/* ================================================== [ Dark Blue Section End ] ================================================== */

/* ================================================== [ Facilities Section Start ] ================================================== */
.facilities-section { position: relative; margin-top: 75px; background-color: var(--soft-red); }
.orange-shape-icon { position: absolute; user-select: none; bottom: calc(100% - 2px); left: 0; width: 100%; }
.orange-shape-icon img { width: 100%; }

.facilities-block { max-width: 975px; margin-inline: 0 auto; padding-block: 35px; display: flex; flex-direction: column; gap: 24px; }
.facilities-block .facilities-top-block { max-width: 600px; width: 100%; }
.facilities-block .title-32 * { font-family: var(--font-primary); font-weight: 600; }

.facilities-block .facilities-top-block .logo { max-width: 406px; width: 100%; aspect-ratio: 406 / 115; }

.facilities-block .facilities-bottom-block { position: relative; }
.facilities-block .facilities-bottom-block .map-img { pointer-events: none; user-select: none; position: absolute; bottom: 0; right: 0; aspect-ratio: 722 / 658; max-width: 722px; width: 100%; height: auto; }

.facilities-block .list-parent-block { display: flex; gap: 60px; }
.facilities-block .list-block ul { padding-left: 0; margin-block: 0; list-style: none; }
.facilities-block .list-block ul li span { margin-right: 8px; }

.facilities-block .facilities-bottom-block .disc-14 * { line-height: 22px; }

.facilities-block .facilities-bottom-block .title * { font-family: var(--font-primary); font-style: normal; font-weight: 600; font-size: var(--fs-20); line-height: 27px; letter-spacing: 0.16px; color: var(--white); margin-bottom: 8px; }

.facilities-section .facilities-side-icon { position: absolute; top: 150px; right: 0; width: 250px; aspect-ratio: 233 / 565; height: auto; }

/* ================================================== [ Facilities Section End ] ================================================== */

/* ================================================== [ Highlights Start ] ================================================== */
/* Scrubber */
.scrubber { overflow: visible; position: relative; height: 1px; margin-top: 0; background: var(--border-color); border-radius: 10px; margin-bottom: 5px; max-width: 1024px; width: 100%; margin-inline: auto; }
.scrubber-handle { position: absolute; top: 50%; height: 8px; width: 230px; background: var(--border-color); border-radius: 10px; transform: translateY(-50%); touch-action: none; cursor: pointer; }

.highlights { overflow: hidden; padding-block: 40px; background-color: var(--soft-red); }
.highlights .swiper { overflow: visible; }

.highlights .highlights-slider .top-block { text-align: center; width: 80%; margin-inline: auto; padding: 30px 24px 24px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.highlights .highlights-slider .top-block * { font-family: var(--font-dynaPuff); font-style: normal; font-weight: 500; font-size: var(--fs-18); line-height: var(--lh-24); color: var(--border-color); margin-bottom: 0; }
.highlights .highlights-slider .bottom-block .image-block { width: 100%; height: auto; aspect-ratio: 450 / 300; }
.highlights .highlights-slider .bottom-block .image-block { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; overflow: hidden; }
.highlights .highlights-slider .bottom-block .text-block { position: absolute; bottom: 12px; left: 16px; display: flex; align-items: end; gap: 8px; padding-right: 10px; }
.highlights .highlights-slider .bottom-block .text-block .text * { font-family: var(--font-primary); font-style: normal; font-weight: 700; font-size: 12px; line-height: 17px; color: var(--white); margin-bottom: 0; text-shadow: -1px  0   0 var(--black), 1px  0   0 var(--black), 0   -1px 0 var(--black), 0    1px 0 var(--black), -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px  1px 0 var(--black), 1px  1px 0 var(--black); }

.highlights .swiper-slide { height: auto; }
.highlights .highlights-card { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.highlights .highlights-card::after { content: ""; position: absolute; z-index: -1; display: block; border-radius: 20px; height: 70%; width: 80%; top: 0; left: 50%; background-color: var(--dark-green); transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }

.highlights .highlights-card::before { content: ""; position: absolute; z-index: -1; display: block; height: 100px; width: 70%; bottom: -80px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); background: linear-gradient(0deg, #0000, #00000070); filter: blur(10px); -webkit-filter: blur(10px); }

.highlights .container:has(.highlights-block) { overflow-y: clip; }
.highlights .highlights-block { position: relative; padding-bottom: 100px; }
.highlights .highlights-block::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; right: 100%; display: block; background-color: var(--soft-red); z-index: 3; opacity: .8; box-shadow: -30px 0px 70px #000000; }
.highlights .highlights-block::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 100%; display: block; background-color: var(--soft-red); z-index: 3; opacity: .8; box-shadow: 30px 0px 70px #000000; }
.highlights .number-one { width: 84px; height: auto; aspect-ratio: 84 / 67; }
/* ================================================== [ Highlights End ] ================================================== */

/* ================================================== [ Room To Create Section Start ] ================================================== */
.room-to-create-section{position: relative;}
.room-to-create-section .room-to-create-bg{ height: 900px; }
.room-to-create-main-details{position: relative; height: 100%;}
.room-to-create-details{ position: absolute; right: 0px; bottom: 0; /* bottom: 35px; */ max-width: 612px; padding: 35px 0; }
.room-to-create-details .disc-14 *{ max-width: 288px; margin-left: auto; margin-right: auto; line-height: var(--fs-h4);}
/* .room-to-create-details .disc-14 *{ color: inherit; line-height: inherit;} */
.room-to-create-section .room-to-create-bg *{ height: 100%; width: 100%; object-fit: cover; object-position: center; }
.room-to-create-details .disc-14 *:last-child{ margin-bottom: 0; }
.room-to-create-wrapper{position: absolute; top: 0; right: 0; bottom: 0; left: 0; top: 0;}
.room-to-create-wrapper .container{ height: 100%; width: 100%; }
.room-to-create-main-details .red-shape{position: absolute; right: 78px; top: -36px;}
.room-to-create-wrapper .green-shape{ position: absolute; bottom: -45px; right: 13px; }

/* .room-to-create-details .title-32 *{ margin-bottom: 32px; color: var(--soft-red); text-shadow: -3px  0   0 var(--white), 3px  0   0 var(--white), 0   -3px 0 var(--white), 0    3px 0 var(--white), -3px -3px 0 var(--white), 3px -3px 0 var(--white), -3px  3px 0 var(--white), 3px  3px 0 var(--white);} */

.room-to-create-details .title-32 * {
    margin-bottom: 32px;
    color: var(--soft-red);
    text-shadow: 
    calc(-1 * var(--shadow-3px)) 0 0 var(--white),
    var(--shadow-3px) 0 0 var(--white),
    0 calc(-1 * var(--shadow-3px)) 0 var(--white),
    0 var(--shadow-3px) 0 var(--white),
    calc(-1 * var(--shadow-3px)) calc(-1 * var(--shadow-3px)) 0 var(--white),
    var(--shadow-3px) calc(-1 * var(--shadow-3px)) 0 var(--white),
    calc(-1 * var(--shadow-3px)) var(--shadow-3px) 0 var(--white),
    var(--shadow-3px) var(--shadow-3px) 0 var(--white);
}
/* ================================================== [Room To Create Section End ] ================================================== */

/* ================================================== [Where Happiness Begins Section Start ] ================================================== */
.happiness-begins-details { position: relative; }
.happiness-begins-details::before { filter: blur(100px); position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); background-color: var(--black); width: 80%; height: 30%; -webkit-filter: blur(100px); }

.where-happiness-begins-section{background: var(--dark-green); padding: 430px 0 0;}
.happiness-begins-wrapper .golden-shape *{width: 100%; height: 100%;}
.happiness-begins-wrapper .happiness-begins-block{background-color: var(--gold); padding-top: 10px; position: relative; z-index: 2;}
.happiness-begins-details{margin-top: -461px; position: relative;}
.happiness-begins-details .happiness-begins-img{height: 768px;}
.happiness-begins-details .happiness-begins-img *{height: 100%; width: 100%; object-fit: cover;}
.happiness-begins-details .image-block{position: relative;}
.happiness-begins-details .image-details{ max-width: 577px; padding: 68px; position: absolute; bottom: 0; z-index: 1;}
.happiness-begins-details .happiness-details{ padding: 0px 43px 148px 70px; background-image: url('../images/thumb/happiness-begins-details-img.webp'); background-repeat: no-repeat; background-size: cover; position: relative;}
.happiness-details .senyum-by-hunza-wrapper{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;}
.happiness-details .senyum-by-hunza-wrapper .left-block{padding: 38px 0 0;}
.happiness-details .senyum-by-hunza-wrapper .left-block .fs-36 *{color: var(--lime); font-weight: 500; margin-bottom: 66px; font-size: 36px; line-height: 49px;}
.happiness-details .senyum-by-hunza-wrapper .left-block .senyum-small-details *{ font-weight: 400; font-size: 12px; letter-spacing: 0.13px; line-height: 16px; color: var(--black); }
.happiness-details .senyum-by-hunza-wrapper .left-block .block-title *{font-size: 24px ; font-weight: 700; line-height: 33px; color: var(--black); letter-spacing: 0.28px; margin-bottom: 23px;}
.senyum-by-hunza-wrapper .left-block{max-width: 482px;}
.senyum-by-hunza-wrapper .we-believe-wrapper{display: flex; gap: 40px;}
.senyum-by-hunza-wrapper .we-believe-wrapper  .icon-wrapper{display: flex; align-items: center; margin-bottom: 10px; gap: 16px;}
.senyum-by-hunza-wrapper .we-believe-wrapper  .icon-wrapper h4{margin-bottom: 0; color: var(--lime); font-weight: 600; font-size: 24px; line-height: 32px;}
.senyum-by-hunza-wrapper .we-believe-wrapper .icon-block p{font-weight: 400; font-size: 12px; letter-spacing: 0.13px; line-height: 16px; color: var(--black); margin-bottom: 0;}
.senyum-by-hunza-wrapper .we-believe-wrapper .icon-block{margin-bottom: 30px;}
.happiness-begins-details .happiness-details .happiness-family-img{ position: absolute; bottom: 0; right: 0; width: 636px; bottom: -3px;}
.happiness-begins-details .star-img{position: absolute; top: -112px; left: -96px;}
.where-happiness-begins-section .happiness-begins-wrapper{position: relative;}
.happiness-begins-wrapper .coconut-tree-img{position: absolute; right: 0; top: -34px;}
.happiness-begins-wrapper .golden-shape{margin-bottom: -1px;}
.happiness-details .senyum-by-hunza-wrapper .left-block .fs-36{position: relative; display: inline-block;}
.happiness-details .senyum-by-hunza-wrapper .left-block .fs-36::after{ content: ""; display: inline-block; width: 141px; height: 67px; background-image: url('../images/svgs/happiness-begins-txt.svg'); background-repeat: no-repeat; background-size: cover; position: absolute; top: 20px; right: -40px; }

/* .happiness-begins-details .image-details .title-32 *{text-shadow: -3px  0   0 var(--dark-green), 3px  0   0 var(--dark-green), 0   -3px 0 var(--dark-green), 0    3px 0 var(--dark-green), -3px -3px 0 var(--dark-green), 3px -3px 0 var(--dark-green), -3px  3px 0 var(--dark-green), 3px  3px 0 var(--dark-green);} */

.happiness-begins-details .image-details .title-32 * {
    text-shadow: 
    calc(-1 * var(--shadow-3px)) 0 0 var(--dark-green),
    var(--shadow-3px) 0 0 var(--dark-green),
    0 calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    0 var(--shadow-3px) 0 var(--dark-green),
    calc(-1 * var(--shadow-3px)) calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    var(--shadow-3px) calc(-1 * var(--shadow-3px)) 0 var(--dark-green),
    calc(-1 * var(--shadow-3px)) var(--shadow-3px) 0 var(--dark-green),
    var(--shadow-3px) var(--shadow-3px) 0 var(--dark-green);
}
/* ================================================== [Where Happiness Begins Section End ] ================================================== */

/* ================================================== [ Register Form Start ] ================================================== */
.register-form { position: relative; background-color: var(--gold); padding-block: 110px 80px; overflow-x: clip; }
.register-form::after { content: ""; display: block; position: absolute; height: auto; width: 300px; aspect-ratio: 300 / 6; top: 50px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); filter: blur(14px); -webkit-filter: blur(14px); z-index: 3; background-color: var(--black); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; user-select: none; pointer-events: none; }

.register-form .heading { text-align: center; margin-bottom: 30px; }

.register-form .form-map-container { margin-top: 50px; }
.register-form .form-map-container .form-map-block { width: 100%; min-height: 300px; aspect-ratio: 1024 / 350; height: auto; }

.register-form .form-block { max-width: 940px; margin-inline: auto; display: flex; justify-content: space-between; gap: 16px; }

.register-form .form-left ,
.register-form .form-right { display: flex; flex-direction: column; gap: 16px; max-width: 436px; width: 100%; }

.input-block { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-family: var(--font-primary); font-style: normal; font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-24); letter-spacing: 0.04px; color: var(--charcoal); margin-bottom: 0; cursor: pointer; width: fit-content; }

.form-control::placeholder { font-family: var(--font-primary); font-style: normal; font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-24); color: #2e251b; }
.form-control { border: unset; font-family: var(--font-primary); font-style: normal; font-weight: 700; font-size: var(--fs-18); line-height: var(--lh-24); letter-spacing: -1.83px; color: #414042; background-color: #b49568; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; padding: 6px 12px; }

.form-select:focus,
.form-control:focus { border: none; background-color: #b49568; box-shadow: unset; }

.form-select { cursor: pointer; border: unset; background-color: #b49568; color: #2e251b; padding: 6px 12px; font-size: var(--fs-18); list-style: none; line-height: var(--lh-24); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; }
.form-select:has(option[value=""]:not(:checked)) { font-weight: 700; }

.form-check-input[type=checkbox] { height: 15px; width: 15px; cursor: pointer; background-color: #b49568; border-color: var(--transparent); } 
.form-check-input[type=checkbox]:focus { box-shadow: none; border-color: var(--soft-red); }
.form-check-input[type=checkbox]:checked { background-color: var(--soft-red); border-color: var(--soft-red); }

.form-select { --bs-form-select-bg-img: unset; }
.select-block { position: relative; }
.select-block::after { position: absolute; content: ""; height: 20px; width: auto; aspect-ratio: 10 / 20; background: url('../images/svgs/select-icon.svg') no-repeat; background-size: 100%; z-index: 3; top: 50%; transform: translateY(-50%); display: block; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); pointer-events: none; right: 12px; }

.checkbox-block { display: flex; align-items: start; gap: 12px; }
.checkbox-block label { font-family: var(--font-primary); font-size: 12px; font-weight: 400; color: #414042; letter-spacing: 0.01px; line-height: 16px; user-select: none; cursor: pointer; }

/* .form-container { position: relative; z-index: 5; } */
/* .form-top-icon { width: 320px; aspect-ratio: 320 / 300; user-select: none; position: absolute; bottom: calc(100% - 40px); right: -130px; } */
.form-top-icon { width: 320px; aspect-ratio: 320 / 300; user-select: none; position: fixed; z-index: 9999; bottom: 20px; right: 20px; }
.form-top-icon::before { display: block; content: ""; aspect-ratio: 60 / 4; height: auto; width: 30%; background-color: var(--black); position: absolute; bottom: 13px; left: 36%; transform: translateX(-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; filter: blur(6px); -webkit-filter: blur(6px); pointer-events: none; }

.is-invalid { border-color: #dc3545; }
.error-text { color: #dc3545; font-size: 13px; margin-top: 4px; display: block; }

.recaptcha-error-text { color: #dc3545; font-size: 13px; margin-top: 4px; display: block; }
/* ================================================== [ Register Form End ] ================================================== */

/* ================================================== [ Footer Start ] ================================================== */
.footer { padding-block: 50px 60px; }
.footer .disc-12 * { color: var(--gray); letter-spacing: -0.16px; margin-bottom: 0; }

.footer .footer-list ul { list-style: none; padding-left: 0; margin-block: 6px 0; display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.footer .footer-list ul li *:hover { color: var(--soft-red); }
.footer .footer-list ul li { position: relative; display: flex; text-align: center; align-items: center; }
.footer .footer-list ul li::after { margin-inline: 6px; content: "|"; font-size: 12px; }
.footer .footer-list ul li:last-child::after { display: none; }

.footer .footer-block { display: flex; justify-content: space-between; gap: 20px; }
.footer .footer-block .right { display: flex; flex-direction: column; max-width: 300px; width: 100%; gap: 20px; }
.footer .footer-block .left { display: flex; flex-direction: column; max-width: 655px; width: 100%; gap: 20px; }

.footer .f-logo { display: block; aspect-ratio: 144 / 86; height: auto; width: 144px; }

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

.footer .f-contact { display: flex; align-items: start; gap: 24px; margin-bottom: 10px; }
.footer .contact-details * { font-weight: 300; }    

.footer .contact-details .title * { margin-bottom: 7px; }
.footer .contact-details .phone * { color: var(--gray); font-size: 28px; line-height: 100%; display: block; }
.footer .contact-details .phone *:hover { color: var(--black); }
.footer .contact-details .website-link * { color: #006737; font-size: var(--fs-20); line-height: 100%; display: block; }
.footer .contact-details .website-link *:hover { text-decoration: underline; }

.footer .social-lists ul { padding-left: 0; margin-block: 8px 0; display: flex; align-items: center; gap: 10px; list-style: none; }
.footer .social-lists ul li a { display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; }
.footer .social-lists ul li a svg path { transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.footer .social-lists ul li a:hover svg path { fill: #0b6b3a; }
/* ================================================== [ Footer End ] ================================================== */

/* ================================================== [ Footer End ] ================================================== */
.smart-living { padding-block: 80px 120px; position: relative; background-color: var(--soft-red); z-index: 1; }
.smart-living .smart-living-side-icon { position: absolute; top: 50%; transform: translateY(-50%); aspect-ratio: 308 / 807; width: 308px; height: auto; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }

.smart-living .smart-living-card { height: 100%; display: flex; align-items: center; gap: 60px; padding: 30px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.smart-living .smart-living-card .left-block { max-width: 483px; width: 100%; aspect-ratio: 483 / 590; height: auto; }
.smart-living .smart-living-card .right-block { max-width: 355px; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }

.smart-living .smart-living-card .right-block .disc-12 { max-width: 290px; width: 100%; margin-inline: auto; }

.slide-nav { display: flex; align-items: center; gap: 20px; position: absolute; right: 50px; bottom: 40px; }
.slide-btn { width: 76px; cursor: pointer; height: auto; aspect-ratio: 1 / 1; }
.slide-btn img { object-fit: cover; object-position: center; height: 100%; width: 100%; }
.slide-btn.slide-prev-btn { transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); }

.smart-living-block { position: relative; }
.smart-living-block::after { content: ""; filter: blur(40px); width: 80%; height: 100%; background-color: var(--black); position: absolute; top: 30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-filter: blur(40px); }

.smart-living-block .h-circle-img { width: 175px; aspect-ratio: 1 / 1; height: auto; }
.smart-living-block .swiper-slide { height: auto; }
/* ================================================== [ Footer End ] ================================================== */

/* ================================================== [ Home Banner Start ] ================================================== */
.home-banner { overflow-x: clip; }
.home-banner .banner-text { background-color: var(--cyan); padding-left: 16.3vw; margin-top: -3vw; padding-bottom: 4vw; }


.home-banner .banner-text .disc-14 * {
  margin-bottom: 0;
  max-width: 27.5vw; /* 396px */
  white-space: nowrap;
  font-size: 0.97vw; /* 14 */
  line-height: 1.37vw; /* 24 */
}

.home-banner .banner-text .title-32 * { font-size: 2.5vw; line-height: 110%; margin-bottom: 1.39vw; font-family: var(--font-primary); font-weight: 800; }

.home-banner .banner-text .main-block {
  box-shadow: 1.39vw 3.47vw 2.78vw var(--black); /* 20 50 40 */
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 2.08vw 2.08vw 2.08vw 4.17vw; /* 30 30 30 60 */
  background-color: var(--white);
  border-radius: 13.89vw; /* 200 */
  border-bottom-left-radius: 0 !important;
}

.home-banner .banner-text .parent {
  position: relative;
  width: fit-content;
  z-index: 1;
}

.home-banner .banner-text .image-block {
  height: 16.67vw; /* 240 */
  width: 16.67vw;
  overflow: hidden;
  border-radius: 50%;
}

.home-banner .boy-img {
  position: absolute;
  top: -12.5vw;   /* -180 */
  right: -17.36vw; /* -250 */
  aspect-ratio: 572 / 367;
  width: 39.72vw; /* 572 */
  height: auto;
  z-index: 1;
}

.home-banner .banner-text-tree {
  position: absolute;
  aspect-ratio: 171 / 346;
  top: -4.86vw;   /* -70 */
  left: -5.56vw; /* -80 */
  z-index: -1;
  width: 11.88vw;
  height: auto;
}
/* ================================================== [ Home Banner End ] ================================================== */

.main >* { overflow-x: clip; }