/* Normalize
---------------------------------------------------------------*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /*font-family: 'Epunda Sans', sans-serif;*/
    font-family: "Hind Siliguri", sans-serif;
    font-weight: 400;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}

img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

/* Site
--------------------------------------------------------------*/
.site {
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
    grid-template-rows: 95vh repeat(10, min-content);
}

/* Page Site
--------------------------------------------------------------*/
.page-site {
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
    grid-template-rows: 70vh repeat(10, min-content);
}

.page-header {
    grid-column: full-start / full-end;
    height: 100%;
    position: relative;

    /* IN THE END */
    overflow: hidden;
}

.page-banner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;

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

    background-size: cover;
    background-position: center;

    /* THIS creates the animation! */
    transition: transform 1s;
}

.banner__wrapper {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.4));
}

.banner__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    line-height: 1.5;
}

.banner__text-box h1 {
    display: inline-block;
    font-size: 30px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.banner__text-box h1 span {
    font-weight: 500;
}

/* Header
--------------------------------------------------------------*/
.header {
    max-width: 1200px;
    padding: 15px 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02);
}

.header__logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.header__logo-link:hover,
.header__logo-link:active {
    text-decoration: none;
    outline: none;
}

.header__logo-link h1 {
    font-size: 35px;
    color: #ffffff;
    padding: 0;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: "Story Script", sans-serif;
}

.header__logo {
    display: block;
    height: 90px;
    margin-right: 12px;
}

.header__logo-text {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

/* NAV LIST (Desktop) */
.header-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    column-gap: 25px;
}

.header-nav__list li a:active,
.header-nav__list li a:focus,
.header-nav__list li a:focus-visible {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.header-nav__link:link,
.header-nav__link:visited {
    position: relative; /* Required for positioning the ::after pseudo-element */
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    /*padding: 10px 0;*/
    transition: color 0.3s ease-in-out;
}

/* Underline effect */
.header-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #ddd; /* Color of the underline */
    transform: scaleX(0); /* Start hidden */
    transform-origin: left; /* Animate from left to right */
    transition: transform 0.3s ease-in-out;
}

/* Hover effect to trigger the underline */
.header-nav__link:hover::after {
    transform: scaleX(1); /* Expand the underline */
}

.header-nav__link [name="home-outline"] {
    font-size: 20px;
}

.header-nav__link:hover,
.header-nav__link:active {
    color: #fff;
}

.header-nav__item {
    position: relative;
}

.dropdown__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    /* Keep this */
    top: 50px;
    /* CHANGE THIS VALUE! Start with 7rem and increase if needed. */
    left: 0;
    /* Keep this to align with the parent nav item */
    min-width: 160px;
    z-index: 9999;
    /* Ensure it's above other content */
    background-color: rgba(0, 0, 0, 0.6);
    /* Good idea to explicitly set a background color */

    /* Hide by default (desktop) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* This initial transform will push it down a bit further */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s;
}

.dropdown__menu li a {
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    display: block;
    padding: 10px 15px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    white-space: nowrap;
}

.dropdown__menu li a:hover,
.dropdown__menu li a:active {
    color: #fff;
}

/* Ensure the hover effect brings it to the correct position */
.header-nav__item:hover > .dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-login-link {
    text-decoration: none;
    border-radius: 3px;
    background-color: #9F0909;
    transition: all 0.3s;
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    display: inline-block;
}

.header-login-link:hover {
    background-color: #3c599b;
}

/* BTN Mobile NAV (Hamburger/Close button) */
.btn-mobile-nav {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: none;
    /* Hidden on desktop by default */
}

.btn-mobile-nav [name="close-outline"] {
    display: none;
}

/* Icon Mobile NAV styling */
.icon-mobile-nav {
    height: 38px;
    width: 38px;
    color: #333;
}

/* Slider
--------------------------------------------------------------*/
.slider {
    grid-column: full-start / full-end;
    height: 100%;
    position: relative;

    /* IN THE END */
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;

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

    background-size: cover;
    background-position: center;

    /* THIS creates the animation! */
    transition: transform 1s;
}

.slide__wrapper {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.4));
}

.slide__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    line-height: 1.5;
}

.slide__text-box h1 {
    display: inline-block;
    font-size: 45px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.slide__text-box h1 span {
    font-weight: 500;
}

.slider__btn {
    position: absolute;
    top: 50%;
    z-index: 10;
    border: none;
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.slider__btn--left {
    left: 6%;
    transform: translate(-50%, -50%);
}

.slider__btn--right {
    right: 6%;
    transform: translate(50%, -50%);
}

.dots {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.dots__dot {
    border: none;
    background-color: #b9b9b9;
    opacity: 0.7;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    margin-right: 1.75rem;
    cursor: pointer;
    transition: all 0.5s;
    box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7);
}

.dots__dot:last-child {
    margin: 0;
}

.dots__dot--active {
    background-color: #f7f7f7;
    opacity: 1;
}

/* Section About
--------------------------------------------------------------*/
.section-about {
    grid-column: full-start / full-end;
    background-color: #f7f7f7;
    padding: 80px 0;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
}

.section-about__wrapper {
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 96px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
    align-items: center;
}

.section-about__text-content {
    font-size: 16px;
    grid-column: center-start / col-end 5;
    line-height: 1.7;
    text-align: justify;
}

.section-about__text-content p:not(:last-child) {
    margin-bottom: 10px;
}

.section-about__text-content h3 {
    font-weight: 300;
    font-size: 21px;
    color: #333;
    font-family: "Story Script", sans-serif;
    text-align: left;
}

.section-about__text-content h2 {
    font-size: 30px;
    color: #333;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 14px;
    text-align: left;
}

.section-about__img-content {
    grid-column: col-start 7 / col-end 12;
    height: 450px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.section-about__img-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 3px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02);
}

.about-img--1 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 3;
}

.about-img--2 {
    grid-column: 3 / span 4;
    grid-row: 2 / span 4;
}

/* Our Gallery
--------------------------------------------------------------*/
.section-gallery {
    grid-column: full-start / full-end;
    padding: 60px 0 20px;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
}

.section-gallery,
.section-title-text-box {
    grid-column: center-start / center-end;
    text-align: center;
    margin-bottom: 40px;
}

.section-title-text-box h2 {
    font-size: 35px;
    color: #333;
    font-weight: 500;
    line-height: 1.2;
}

.section-gallery__wrapper {
    grid-column: center-start / center-end;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 7vw);
    grid-gap: 10px;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery__item--1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.gallery__item--2 {
    grid-column: 3/span 3;
    grid-row: 1/span 2;
}

.gallery__item--3 {
    grid-column: 6 / span 3;
    grid-row: 1 / span 3;
}

.gallery__item--4 {
    grid-column: 1 / span 3;
    grid-row: 3/span 2;
}

.gallery__item--5 {
    grid-column: 4/span 2;
    grid-row: 3/span 2;
}

.gallery__item--6 {
    grid-column: 6 / span 3;
    grid-row: 4 / span 2;
}

.gallery__item--7 {
    grid-column: 1 / span 2;
    grid-row: 5 / span 2;
}

.gallery__item--8 {
    grid-column: 3/span 2;
    grid-row: 5/span 2;
}

.gallery__item--9 {
    grid-column: 5/span 1;
    grid-row: 5/span 1;
}

.gallery__item--10 {
    grid-column: 5/span 1;
    grid-row: 6/span 2;
}

.gallery__item--11 {
    grid-column: 6/span 2;
    grid-row: 6/span 2;
}

.gallery__item--12 {
    grid-column: 8/span 1;
    grid-row: 6/span 2;
}

.gallery__item--13 {
    grid-column: 1/span 1;
    grid-row: 7/span 1;
}

.gallery__item--14 {
    grid-column: 2/span 2;
    grid-row: 7/span 1;
}

.gallery__item--15 {
    grid-column: 4/span 1;
    grid-row: 7/span 1;
}

.section-gallery__btn-box {
    margin-top: 50px;
    grid-column: center-start / center-end;
    text-align: center;
}

.btn-link {
    text-decoration: none;
    color: #555;
    padding: 6px 10px;
    font-size: 19px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    align-items: center;
    transition: all 0.4s ease-in-out;
}

.btn-icon {
    color: currentColor; /* your desired icon color */
    transition: color 0.4s ease-in-out;
}

.section-gallery__btn-box .btn-link:hover {
    color: #09754d;
    border-bottom: 1px solid #b8b8b8;
}

/* Section Packages
--------------------------------------------------------------*/
.section-packages {
    grid-column: full-start / full-end;
    padding: 80px 0;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
}

.section-packages .section-title-text-box {
    grid-column: col-start 3 / col-end 6;
    text-align: center;
    margin-bottom: 40px;
}

.section-title-text-box h2 {
    font-size: 35px;
    color: #333;
    font-weight: 500;
    line-height: 1.2;
}

.packages__wrapper {
    grid-column: center-start / center-end;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 40px;
    grid-row-gap: 30px;
}

.package__item {
    color: #333;
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
    grid-row-gap: 20px;
}

.package__img {
    width: 100%;
    height: 230px;
    grid-row: 1/-1;
    grid-column: 1/-1;
    z-index: 1;
}

.room__price {
    background-color: #f7f7f7;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.room__price span {
    display: inline-block;
}

.room__price span:first-child {
    font-size: 17px;
    display: inline-block;
    color: #000;
    margin-right: 3px;
}

.room__price span:nth-child(2) {
    font-size: 13px;
    color: #333;
}

.package__title {
    grid-column: 1/-1;
    grid-row: 1/-1;
    z-index: 3;
    background-color: #09754d;
    color: #fff;
    padding: 8px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    width: 85%;
    justify-self: center;
    align-self: end;
    transform: translateY(50%);
    border-radius: 3px;
}

.room__type,
.room__capacity {
    margin-top: 20px;
}

.room__type,
.room__capacity,
.bed__type,
.room__view {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
}

.room__type svg,
.room__capacity svg,
.bed__type svg,
.room__view svg {
    fill: #8d8d8d;
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

.room__view p {
    margin-right: 16px;
}

.room__bottom-info {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    padding: 10px 15px;
}

.package__btn {
    text-decoration: none;
    font-size: 15px;
    grid-column: 2/-1;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid transparent;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Section Experience
--------------------------------------------------------------*/
.section-experience {
    padding: 80px 0;
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
    background-color: #021C33;
}

.experience__wrapper {
    grid-column: center-start / center-end;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
    align-items: center;
}

.experience__img-content {
    grid-column: col-start 1 / col-end 4;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 7vw);
    gap: 20px;
}

.experience__img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.experience__img--1 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 3;
}

.experience__img--2 {
    grid-column: 4 / span 2;
    grid-row: 1 / span 3;
}

.experience__img--3 {
    grid-column: 1 / span 5;
    grid-row: 4 / span 2;
}

.experience__text-content {
    grid-column: col-end 4 / col-end 8;
    font-size: 18px;
    color: #fff;
}

.experience__text-content h2 {
    font-size: 35px;
    font-weight: 400;
}

.experience__text-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #dddddd;
    font-weight: 300;
    font-size: 18px;
}

.experience__text-content ul li {
    display: flex;
    align-items: center;
}

.experience__text-content ul li ion-icon[name="happy-outline"],
.experience__text-content ul li ion-icon[name="today-outline"] {
    margin-right: 5px;
    font-size: 20px;
    filter: brightness(70%);
}

.experience__text-content ul li:not(:last-child) {
    margin-bottom: 5px;
}

/* Section Travel
--------------------------------------------------------------*/
.section-travel {
    background-color: #f7f7f7;
    padding: 80px 0;
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
}

.section-travel__wrapper {
    grid-column: center-start / center-end;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end])
    [center-end] minmax(15px, 1fr) [full-end];
    align-items: start;
}

.section-travel__text-content{
    grid-column: col-start 1 / col-end 3;
}

.section-travel__text-content h2 {
    font-size: 35px;
    font-weight: 400;
}

.section-travel__wrapper p{
    text-align: justify;
    font-size: 17px;
}

.section-travel__wrapper p:not(:last-child) {
    margin-bottom: 15px;
}

.section-travel__img-content{
    grid-column: col-end 4 / full-end;
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    grid-gap: 20px;
}

.travel-destination__img-item{
    height: 170px;
}

.travel-destination__img-item img{
    height: 100%;
}

.travel-destination__img-box h4{
    font-weight: 300;
    font-size: 17px;
    text-align: center;
    background-color: #444;
    color: #fff;
    padding: 5px 0;
}

/* Section How We Are
--------------------------------------------------------------*/
.section-how-we-are {
    background-color: #fff;
    padding: 80px 0;
    grid-column: full-start / full-end;
}

.how-we-are__wrapper {
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr)
        [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end])
        [center-end] minmax(15px, 1fr) [full-end];
    grid-row-gap: 40px;
}

.how-we-are__wrapper-left-img {
    grid-column: col-start 1 / col-end 2;
}

.how-we-are__wrapper h3 {
    grid-column: center-start / col-end 2;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.how-we-are__content {
    grid-column: col-start 4 / col-end 8;
}

.how-we-are__content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 17px;
}

.how-we-are__content ul li:not(:last-child) {
    margin-bottom: 5px;
}

.how-we-are__content ul li {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-column-gap: 10px;
    align-items: start;
}

.how-we-are__content ul li img {
    width: 30px;
    height: 30px;
}

.how-we-are__heading {
    font-size: 20px;
    line-height: 1.6;
    color: #7b7b7b;
    margin: 0;
    font-weight: 300;
}

.how-we-are__heading span {
    font-style: italic;
    color: #333;
}

.company-achievements__info {
    grid-column: center-start / center-end;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.company-achievement__item {
    display: flex;
    align-items: center;
}

.company-achievement__item-text {
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-size: 17px;
    padding-bottom: 15px;
}

.company-achievement__item-text span {
    display: block;
}

.company-achievement__item-text span:first-child {
    font-size: 45px;
    font-weight: 500;
    color: #4c4c4c;
}

/* Get in Touch
--------------------------------------------------------------*/
.get-in-touch__text-content {
    grid-column: col-start 5 / full-end;
    background-color: #f7f7f7;
    padding: 0 80px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.get-in-touch__location-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 60px;
    padding: 10px;
    background-color: #CCBA9F;
    display: grid;
    justify-content: center;
    justify-items: start;
    color: #fff;
    font-size: 40px;
}

.get-in-touch__location-icon ion-icon {
    pointer-events: none; /* Optional: ensures click targets the container */
}

.get-in-touch__text-content h3 {
    font-family: "Story Script", sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #1e9b42;
}

.get-in-touch__text-content h2 {
    font-size: 40px;
    font-weight: 500;
}

.get-in-touch__text-content p {
    font-size: 17px;
}

.cta-btn {
    text-decoration: none;
    color: #333;
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    margin-top: 10px;
    transition: all 0.4s ease-in-out;
}

.cta-btn:hover {
    background-color: #333;
    color: #fff;
}

.get-in-touch__text-content a ion-icon[name="call-outline"] {
    background-color: #1e9b42;
    font-size: 28px;
    color: #f7f7f7;
    padding: 5px 10px;
}

/* Icon style on hover of the whole button */
.cta-btn:hover ion-icon[name="call-outline"] {
    background-color: #fff; /* or any other color */
    color: #333;
}

.cta-btn span {
    padding: 0 10px;
}

.get-in-touch__img-content {
    grid-column: full-start / col-end 4;
    background-color: #333;
}

.get-in-touch__img-content img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Site Footer
--------------------------------------------------------------*/
.site-footer {
    background-image: linear-gradient(to right bottom, rgba(6, 17, 56, 0.4), rgba(6, 17, 56, 0.8)), url(../images/background-images/background-img-1.jpg);
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: [full-start] minmax(15px, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 146px) [col-end] ) [center-end]
    minmax(15px, 1fr) [full-end];
    padding: 60px 0;
}

.site-footer__wrapper {
    grid-column: center-start / center-end;
}

.footer-logo h2 {
    font-size: 35px;
    font-weight: 400;
    font-family: "Story Script", sans-serif;
}

.footer-logo h2 a {
    text-decoration: none;
    color: #ddd;
}

/* FOOTER TOP CONTENT */
.site-footer__top-content {
    border-bottom: 1px dotted #333;
    padding-bottom: 40px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .site-footer__top-content {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 20px;
    }

    .footer-social-links {
        justify-content: center;
    }
}

.footer-social-links {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.footer-social-links a {
    color: #ddd;
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: grid;
    border-radius: 4px;
    place-items: center;
    background-color: #131d3d;
    transition: all 0.4s ease-in-out;
}

.footer-social-links a:hover {
    background-color: #1f2a50;
}

/* FOOTER CENTER CONTENT */
.site-footer__center-content {
    color: #ddd;
    font-size: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    grid-gap: 30px;
}

.site-footer-address {
    color: #afafaf;
    font-size: 16px;
}

.site-footer-address span:first-child {
    font-weight: 500;
    font-size: 16px;
}

.site-footer-number {
    justify-self: center;
}

.site-footer-number span:first-child {
    font-weight: 500;
    font-size: 25px;
    display: block;
}

.site-footer-number span:nth-child(2) {
    font-size: 16px;
    display: block;
    color: #afafaf;
}

.site-footer-tagline {
    text-align: right;
}

.site-footer-tagline span:first-child {
    font-size: 20px;
}

.site-footer-tagline span:nth-child(2) {
    font-size: 19px;
    display: block;
    color: #afafaf;
}

/* FOOTER BOTTOM CONTENT */
.site-footer__bottom-content {
    color: #b1b1b1;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
}

.site-footer__bottom-content p:nth-child(2) a {
    text-decoration: none;
    color: #b1b1b1;
}

.site-footer__bottom-content p:nth-child(2) ion-icon {
    font-size: 12px;
}