/*
    Theme Name: Landing Page Mantis Theme
    Author: Miara
    Author URI: miarasatu@gmail.com
    Description: theme special to build step by step the Mantis Landing Page
    Version: 1.0
    Text Domain: mantis
*/

/* GLOBAL STYLE */
/* 
body {
} */

ul {
    list-style: none;
    padding: 0;
}

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

.text-mantis {
    color: #27666f;
}

.title-mantis, .subtitle-mantis {
    font-family: "GFS Didot", serif;
    /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.subtitle-mantis {
    font-size: .9rem;
}

.paragraph-mantis {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: .9rem;
}

.shadowed-mantis, .signature-title {
    text-shadow: 0 0 1rem rgb(3, 3, 3);
}

.book-now-btn {
    display: block !important;
    width: fit-content !important;
    background-color: #27666f;
    padding: .5rem 2rem;
    border: none;
    color: white !important;
    font-size: .8rem;
    text-wrap: nowrap;
}

.book-now-btn.lg {
    font-size: 1rem;
    padding: .7rem 2.5rem;
}

.opac-bg-mantis {
    background-color: #27656f40;
}

.dark-opac-bg-mantis {
    background-color: #223b08bd;
}

@media (min-width: 992px) {
    .title-mantis {
        font-size: 2rem;
    }

    .subtitle-mantis {
        font-size: 1rem;   
    }

    .paragraph-mantis {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

/* GLOBAL STYLE END */

/* NAV STYLE */

#mainNav {
    transition: all 0.3s ease-in-out;
}

.navbar-transparent {
    background-color: transparent;
}
.navbar-scrolled {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


#logo-mantis {
    width: auto;
    /* height: 4.5rem; */
    height: 6rem;
    margin-right: 2rem;
}

#menu-principale a, #menu-principale button {
    text-decoration: none;
    font-size: .8rem;
}

.current-menu-item .page_item .page-item-240 .current_page_item .current-menu-ancestor .current-menu-parent .current_page_parent .current_page_ancestor
#menu-principale .current-menu-item,
#menu-principale .current_page_item
/* #menu-principale .current-menu-ancestor,
#menu-principale .current-menu-parent, 
#menu-principale .current_page_parent,
#menu-principale .current_page_ancestor*/ 
{
    border-bottom: 2px solid #27666f;
}

.hover-content {
    min-width: 10rem;
    margin-left: 1rem;
}

@media (min-width: 992px) {
    /* cacher le sous-menu */
    .navbar-nav .sub-menu {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: .3rem;
        padding: 1rem;
        list-style: none;
        min-width: 200px;
        z-index: 999;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .hover-content {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        transform: translateX(-50%);
    }

    #lang-option:hover .hover-content {
      opacity: 1;
      visibility: visible;
    }

    /* afficher au hover */
    .navbar-nav li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
    }

    .navbar-nav .sub-menu .menu-item {
        border-bottom: 1px solid #27656f7a;
    }
}

#lang-btn {
    background-color: transparent;
    border: none;
}

li.fixed-color a {
    color: #27666f;
}

.navbar-nav .sub-menu {
    padding-left: 1rem;
}

.navbar-nav li {
    position: relative;
}

.navbar-nav .sub-menu .menu-item {
    margin: .5rem 0;
}

.undernav {
    margin-top: 6rem;
}

/* NAV STYLE END */

/* WELCOME VIDEO STYLE */

#welcome-video-section, #whale-section, #restaurant-bar-section, #harmony-wellness-section, #sustainability-section {
    position: relative;
    color: white;
}

#welcome-video-section .video, #whale-section .video, #restaurant-bar-section .video, #harmony-wellness-section .video, #sustainability-section .video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

#welcome-content, #whale-content, #restaurant-bar-content, #harmony-wellness-content {
    position: absolute;
    bottom: 7.5%;
    width: 100%;
    /* text-shadow: 0 0 .5rem rgb(57, 57, 57); */
}

#welcome-content #welcome-title, #whale-content #whale-title, #restaurant-bar-content #restaurant-bar-title {
    width: 100%;
}

#welcome-content #welcome-description, #whale-content #whale-description, #restaurant-bar-content #restaurant-bar-description, #harmony-wellness-content #harmony-wellness-description  {
    width: 100%;
}

@media (min-width: 992px) {
    #welcome-content #welcome-title, #whale-content #whale-title, #restaurant-bar-content #restaurant-bar-title, #gallery-excerpt-section #gallery-subtitle {
        max-width: 50%;
    }

    #welcome-content #welcome-description, #whale-content #whale-description, #restaurant-bar-content #restaurant-bar-description, #explore-section #explore-description, #harmony-wellness-content #harmony-wellness-description {
        max-width: 50%;
    }
}

/* WELCOME VIDEO STYLE END */

/* ART SECTION */

#art-section {

}

/* ART SECTION END */

/* SIGNATURE SECTION */

#signature-experience-section {
}

#signature-list .item img{
    width: 100%;
    aspect-ratio: 0.8;
    object-fit: cover;
}

.item .opac-bg {
    background-color: #27656f40;
}

.signature-title {
    bottom: 1rem;
    left: 1rem;
    font-size: 1rem;
    color: white;
    /* text-shadow: 0 0 .5rem gray; */
    max-width: 90%;
    overflow-wrap: break-word;
}

/* SIGNATURE SECTION END */

/* ISLAND SECTION */

#island-carousel .owl-stage-outer, #explore-carousel .owl-stage-outer {
    padding-left: 4rem;
}

@media (min-width: 992px) {
    #island-carousel .owl-stage-outer, #explore-carousel .owl-stage-outer {
        padding-left: 6rem;
    }
}

#island-carousel .owl-stage-outer .item, #explore-carousel .owl-stage-outer .item, #activities-carousel .owl-stage-outer .item {
    margin: 0 1rem;
}

/* carousel style */
#island-carousel, #explore-carousel, #activities-carousel {
    position: relative;
    margin-bottom: 2rem;
}
#island-carousel .owl-nav, #explore-carousel .owl-nav, #activities-carousel .owl-nav {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}
#island-carousel .owl-nav i, #explore-carousel .owl-nav i, #activities-carousel .owl-nav i{
    color: #58c3ca;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2rem;
}

/* #island-carousel .owl-dots {
    position: absolute;
    bottom: 0;
    left: 1rem;
    display: flex;
    gap: 1rem;
    font-size: 1.2rem;
} */

.island-img, .explore-img, .activities-img {
    aspect-ratio: 1;
    object-fit: cover;
}


#island-content li {
    line-height: 2rem;
}

#island-content, #explore-content, #activities-content {
  width: 100%;
  height: 100%;
  /* max-width: calc(540px / 2); */
  padding-right: 1rem;
  margin-left: 0;
}

@media (min-width: 576px) {
  #island-content, #explore-content { padding-right: calc((100vw - 540px) / 2); }
}

@media (min-width: 768px) {
  /* #island-content { max-width: 720px; } */
  #island-content, #explore-content{ padding-right: calc((100vw - 720px) / 2); }
}

@media (min-width: 992px) {
  /* #island-content { max-width: 960px; } */
  #island-content, #explore-content { padding-right: calc((100vw - 960px) / 2); }
}

@media (min-width: 1200px) {
  /* #island-content { max-width: 1140px; } */
  #island-content, #explore-content { padding-right: calc((100vw - 1140px) / 2); }
}

@media (min-width: 1400px) {
  /* #island-content { max-width: 1320px; } */
  #island-content, #explore-content { padding-right: calc((100vw - 1320pw) / 2); }
}


/* ISLAND SECTION END */

/* HARMONY WELLNESS */

#harmony-wellness-section {

}

#harmony-wellness-content #harmony-wellness-title {
    width: 100%;
}

/* HARMONY WELLNESS END */

/* ACTIVITIES AND ADVENTURE */
#activities-section {

}

#activities-carousel .owl-stage {
    padding-left: 0 !important;
}

#activities-content {
  width: 100%;
  height: 100%;
  /* max-width: calc(540px / 2); */
  /* padding-left: calc((100vw - 1320px) / 2); */
  padding-left: 1rem;
  margin-right: 0;
}

@media (min-width: 576px) {
  #activities-content { padding-left: calc((100vw - 540px) / 2); }
}

@media (min-width: 768px) {
  /* #island-content { max-width: 720px; } */
  #activities-content{ padding-left: calc((100vw - 720px) / 2); }
}

@media (min-width: 992px) {
  /* #island-content { max-width: 960px; } */
  #activities-content { padding-left: calc((100vw - 960px) / 2); }
}

@media (min-width: 1200px) {
  /* #island-content { max-width: 1140px; } */
  #activities-content { padding-left: calc((100vw - 1140px) / 2); }
}

@media (min-width: 1400px) {
  /* #island-content { max-width: 1320px; } */
  #activities-content { padding-right: calc((100vw - 1320pw) / 2); }
}
/* ACTIVITIES AND ADVENTURE END */

/* GALLERY EXCERPT STYLE */
#gallery-excerpt-section {
    
}

#gallery-excerpt-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: .2rem;
}

#gallery-excerpt-content .div2 {
    grid-row: span 2 / span 2;
    
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: .2rem;
}

#gallery-excerpt-content .div3 {
    grid-row: span 2 / span 2;
    grid-row-start: 4;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: .2rem;
}
    
#gallery-excerpt-content .div21 {
    grid-column: span 7 / span 7;
}

#gallery-excerpt-content .div22 {
    grid-column: span 4 / span 4;
    grid-row-start: 2;
}

#gallery-excerpt-content .div23 {
    grid-column: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 2;
}

@media (min-width: 768px) {
    #gallery-excerpt-content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 0.2rem;
    }
        
    #gallery-excerpt-content .div1 {
        grid-column: span 3 / span 3;
        grid-row: auto;
        
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: .2rem;
    }

    #gallery-excerpt-content .div2 {
        grid-column: span 5 / span 5;
        grid-column-start: 4;
        grid-row: auto;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: .2rem;
    }

    #gallery-excerpt-content .div3 {
        grid-column: span 4 / span 4;
        grid-column-start: 9;
        grid-row: auto;

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(7, 1fr);
        gap: .2rem;
    }

    #gallery-excerpt-content .div11 {
        grid-column: auto;
        grid-row: span 3 / span 3;
    }

    #gallery-excerpt-content .div12 {
        grid-column: auto;
        grid-row: span 2 / span 2;
        grid-row-start: 4;
    }

    #gallery-excerpt-content .div21 {
        grid-column: span 5 / span 5;
        grid-row: span 3 / span 3;
    }

    #gallery-excerpt-content .div22 {
        grid-column: span 3 / span 3;
        grid-row: span 2 / span 2;
        grid-row-start: 4;
    }

    #gallery-excerpt-content .div23 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 4;
        grid-row-start: 4;
    }

    #gallery-excerpt-content .div31 {
        grid-column: auto;
        grid-row: span 4 / span 4;
    }

    #gallery-excerpt-content .div32 {
        grid-column: auto;
        grid-row: span 3 / span 3;
        grid-row-start: 5;
    }
}

/* GALLERY EXCERPT STYLE END */

/* SUSTAINABILITY STYLE */

#sustainability-section {
    width: 100vw;
    height: 100vh;
}

#sustainability-content {
    width: 100%;
}

#sustainability-text-content {
    aspect-ratio: 4; /* équivalent à la taille d'une carte */
}

#sustainability-image-content .item {
    aspect-ratio: 1;
}

#sustainability-image-content img.item {
    object-fit: cover;
}

#sustainability-image-content .text.item {
    background-color: #58c3ca;
}

@media (min-width: 992px) {
    #sustainability-content {
        width: 75%;
        max-width: 960px;
    }
}
/* SUSTAINABILITY STYLE END */

/* GUEST VOICE STYLE */
#guest-voice-section, #mainFooter, #cover-photo-section {
    background-color: #27666f;
    color: white;
}

#guest-voice-content, #footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

#guest-voice-content .item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.251);
}

@media (min-width: 768px) {
    #guest-voice-content .item {
        width: calc(100%/3 - (4rem/3));
    }
}
/* GUEST VOICE STYLE END */

/* COVER PHOTO SECTION STYLE */

#cover-photo-section { 
    width: 100vw;
    height: 80vh;
}

img#cover-photo {
    width: 100vw;
    height: 80vh;
    object-fit: cover;
    border-radius: 1rem;
}
img#cover-photo-logo {
    width: 15rem;
}

@media (min-width: 768px) {
    img#cover-photo {
        border-radius: 1.5rem;
    }
    img#cover-photo-logo {
        width: 17.5rem;
    }
}

@media (min-width: 992px) {
    img#cover-photo-logo {
        width: 20rem;
    }
}

/* COVER PHOTO SECTION STYLE END */

/* FOOTER STYLE */
#mainFooter {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#mainFooter a {
    color: white;
    text-decoration: none;
}

#mainFooter .item {
    width: 100%;
    border: 1px solid white;
}

#mainFooter .item .item-title {
    font-size: 1.5rem;
}

#mainFooter .item .icon {
    width: 2rem;
}

#mainFooter .item .value, #mainFooter .item #tag-us-btn {
    font-size: .9rem;
}

#mainFooter .item .title {
    font-size: .9rem;
}

#mainFooter #get-social .value {
    text-decoration: underline;
}

#mainFooter #get-social #tag-us-btn {
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

@media (min-width: 768px) {
    #footer-content .item {
        width: calc(100%/3 - (4rem/3));
    }
}
/* FOOTER STYLE END */

/* GALLERY PAGE STYLE */

.title-mantis.lg-title {
    width: 100%;
    margin: 0 auto;
}

.nav-escaper {
    padding-top: 8rem;
}

@media (min-width: 768px) {
    .title-mantis.lg-title {
        width: 70%;
    }
}

@media (min-width: 992px) {
    .title-mantis.lg-title {
        width: 50%;
    }
}

/* eviter le débordement des images */

.gallery-section > div {
    position: relative;
    overflow: hidden;
}
/* forcer les <a> à occuper les places des grille */
.gallery-section > div a {
    display: block;
    width: 100%;
    height: 100%;
}
/* afficher les images suivant les tailles des <a> */
.gallery-section > div img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.4s ease;
}

/* ajouter padding top pour éviter la couverture par le nav */
.nav-scaper {
    padding-top: 8rem;
}

/* RECONNECT SECTION STYLE */

#reconnect-section {
    width: 100%;
}

#reconnect-content {   
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: .2rem;
}
    
#reconnect-content .div2 {
    grid-row: span 2 / span 2;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: .2rem;

}

#reconnect-content .div21 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: .2rem;
}

#reconnect-content .div22 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: .2rem;
}

#reconnect-content .div211 {
    grid-column: span 2 / span 2;
}

#reconnect-content .div212 {
    grid-column: span 3 / span 3;
    grid-column-start: 3;
}

#reconnect-content .div213 {
    grid-column: span 5 / span 5;
    grid-row-start: 2;
}  

#reconnect-content .div221 {
    grid-column: span 3 / span 3;
}

#reconnect-content .div222 {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
}

#reconnect-content .div223 {
    grid-column-start: 3;
    grid-row-start: 2;
}

@media (min-width: 768px) {
    #reconnect-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: .2rem;
    }

    #reconnect-content .div2 {
        grid-column: span 2 / span 2;
        grid-row: auto;
        
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: .2rem;
    }

    #reconnect-content .div21 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: .2rem;
    }

    #reconnect-content .div22 {
        display: grid;
        grid-template-columns: repeat(11, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: .2rem;
    }

    #reconnect-content .div211 {
        grid-row: auto;
        grid-column: span 2 / span 2;
    }

    #reconnect-content .div212 {
        grid-column: span 3 / span 3;
        grid-column-start: 3;
    }

    #reconnect-content .div213 {
        grid-column: span 3 / span 3;
        grid-column-start: 6;
        grid-row-start: auto;
    }

    #reconnect-content .div221 {
        grid-column: span 3 / span 3;
        grid-row: auto;
    }

    #reconnect-content .div222 {
        grid-column: span 4 / span 4;
        grid-column-start: 4;
        grid-row-start: auto;
    }

    #reconnect-content .div223 {
        grid-column: span 4 / span 4;
        grid-column-start: 8;
        grid-row-start: auto; 
    }
}
/* RECONNECT SECTION STYLE END */

/* SHARE TIME SECTION STYLE */

#share-time-section {
    width: 100%;
}

#share-time-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: .2rem;
}

#share-time-content .div1 {
    grid-row: span 2 / span 2;
}

#share-time-content .div2 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;

    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: .2rem;
}
    
#share-time-content .div21 {
    grid-column: span 4 / span 4;
    grid-row: span 2 / span 2;
}

#share-time-content .div22 {
    grid-column: span 6 / span 6;
    grid-row: span 2 / span 2;
    grid-column-start: 5;
}

#share-time-content .div23 {
    grid-column: span 6 / span 6;
    grid-row: span 2 / span 2;
    grid-row-start: 3;
}

#share-time-content .div24 {
    grid-column: span 4 / span 4;
    grid-row: span 2 / span 2;
    grid-column-start: 7;
    grid-row-start: 3;
}

#share-time-content .div25 {
    grid-column: span 5 / span 5;
    grid-row: span 2 / span 2;
    grid-row-start: 5;
}

#share-time-content .div26 {
    grid-column: span 5 / span 5;
    grid-row: span 2 / span 2;
    grid-column-start: 6;
    grid-row-start: 5;
}

@media (min-width: 768px) {
    #share-time-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: .2rem;
    }

    #share-time-content .div1 {
        grid-row: span 2 / span 2;
    }

    #share-time-content .div2 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;

        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: .2rem;
    }

    #share-time-content .div21 {
        grid-column: span 2 / span 2;
        grid-row: span 5 / span 5;
    }

    #share-time-content .div22 {
        grid-column: span 2 / span 2;
        grid-row: span 3 / span 3;
        grid-column-start: 1;
        grid-row-start: 6;
    }

    #share-time-content .div23 {
        grid-column: span 3 / span 3;
        grid-row: span 3 / span 3;
        grid-column-start: 3;
        grid-row-start: 1;
    }

    #share-time-content .div24 {
        grid-column: span 3 / span 3;
        grid-row: span 5 / span 5;
        grid-column-start: 3;
        grid-row-start: 4;
    }

    #share-time-content .div25 {
        grid-column: span 3 / span 3;
        grid-row: span 4 / span 4;
        grid-column-start: 6;
        grid-row-start: 1;
    }

    #share-time-content .div26 {
        grid-column: span 3 / span 3;
        grid-row: span 4 / span 4;
        grid-column-start: 6;
        grid-row-start: 5;
    }
}

/* SHARE TIME SECTION STYLE END */

/* BALANCE SECTION STYLE */

#balance-section {
    width: 100%;
    /* height: 100vh; */
}

#balance-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: .2rem;
}


#balance-content .div1 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 2;
}

#balance-content .div2 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-row-start: 4;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: .2rem;
}

#balance-content .div3 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-row-start: 6;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: .2rem;
}

.div31 {
    grid-column: span 2 / span 2;
    grid-row: span 7 / span 7;
}

.div32 {
    grid-column: span 3 / span 3;
    grid-row: span 5 / span 5;
    grid-column-start: 1;
    grid-row-start: 8;
}

.div33 {
    grid-column: span 3 / span 3;
    grid-row: span 7 / span 7;
    grid-column-start: 3;
    grid-row-start: 1;
}

.div34 {
    grid-column: span 2 / span 2;
    grid-row: span 5 / span 5;
    grid-column-start: 4;
    grid-row-start: 8;
}

@media (min-width: 768px) {
    #balance-content { 
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 0.2rem;
    }
        
    #balance-content .div1 {
        grid-column: span 3 / span 3;
        grid-row: span 2 / span 2;
    }

    #balance-content .div2 {
         grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 4;

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: .2rem;
    }

    #balance-content .div3 {
        grid-column: span 3 / span 3;
        grid-row: span 2 / span 2;
        grid-column-start: 6;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(12, 1fr);
        gap: .2rem;
    }
}
/* BALANCE SECTION STYLE END */

/* MOODBOARD PAGE STYLE END */