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

:root {
    --navbg: rgb(255, 255, 255);
    --navmbbuttonbg: rgb(245, 245, 245);
    --navmbbg: rgb(240, 240, 240);
    --bg: rgba(211, 211, 211, 0.46);
    --icon: rgba(0, 68, 255, 0.736);
    --text: rgb(112, 109, 109); 
    --textHover: rgb(0, 0, 0);
    --bgHover: rgb(223, 222, 222);
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: system-ui;
    min-height: 100vh;
}

a, p, li {
    text-decoration: none;
    font-size: 1.6rem;
    list-style: none;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.col {
    flex-direction: column;
}

.hide {
    display: none;
}
/* Start of Header section */

header {
    width: 100vw;
}

.navigation {
    background-color: var(--navbg);
    box-shadow: 0rem 0rem 1rem .1rem lightgray;
    list-style: none;
}

.navigation a {
    display: inline-block;
    padding: .8rem 1.6rem .8rem 1.6rem;
    color: var(--text);
    font-weight: bold;
    font-size: 1.4rem;
    width: 100%;
}

.navigation a:hover{
    color: var(--textHover);

}

.navigation li::after {
    content: "";
    border: solid .1rem lightgray;
}

.navigation li:last-of-type::after {
    border: none;
}

.nav-sub-dp, .nav-sub-tp {
    position: absolute;
    background-color: var(--navbg);
    min-width: 18rem;
    display: none;
    margin-left: .3rem;
}

.nav-sub-dp a:hover, .nav-sub-tp a:hover {
    color: var(--textHover);
}

@keyframes hover-fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

.dp:hover ~ .nav-sub-dp, .tp:hover ~ .nav-sub-tp {
    display: block;
    animation-name: hover-fade;
    animation-duration: 300ms;
}

.nav-sub-dp:hover, .nav-sub-tp:hover {
    display: block;
}
/* needs JS research
.navigation li:nth-of-type(2) a::after{ 
    content: "";
    display: inline-block;
    margin-left: 1rem;
    margin-right: -1rem;
    border-style: solid;
    border-width: .45rem 0 .45rem .6rem;
    border-color: transparent transparent transparent gray;
} */

/* Mobile navigator segment */

.mb-nav { /* start of mobile icon */
    position: fixed;
    left: calc(100% - 3rem);
    width: 3rem;
    height: 3rem;
    display: none;
}

.mb-icon {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    position: relative;
    background-color: var(--navmbbuttonbg);
    border-radius: .4rem;
    z-index: 2;
    top: 2rem;
    right: 2rem;
}

.mb-icon .top, .mb-icon .mid, .mb-icon .bot {
    border: .2rem solid var(--text);
    width: 2rem;
    margin: .2rem;
    border-radius: .5rem;
    transition-property: transform;
    transition: 300ms;
}

#check-box {
    display: none;
}

#check-box:checked ~ .mb-icon .top {
    transform: rotate(45deg) translate(6px, 5px);

}

#check-box:checked ~ .mb-icon .mid {
    opacity: 0;
}

#check-box:checked ~ .mb-icon .bot { /* End of Mobile Icon */
    transform: rotate(-45deg) translate(6px, -5px);
}

#check-box:checked ~ .mb-menu {
    transform: translateX(-30rem);
}

.mb-menu {
    position: absolute;
    height: 100vh;
    width: 27rem;
    background-color: var(--navmbbg);
    box-sizing: border-box;
    top: 0rem;
    right: -30rem;
    box-shadow: .5rem 0 1rem .3rem gray;
    display: flex;
    padding-top: 5.3rem;
    transition: 300ms linear;
}

.mb-menu ul {
    width: 100%;
}

.mb-menu ul li, .mb-menu ul p {
    font-size: 1.8rem;
    padding: 1.5rem;
    width: 100%;
}

.mb-menu ul li {
    padding-left: 3rem;
    transition: 200ms linear;
}

.mb-menu a {
    font-weight: 700;
    color: var(--text);
    display: block;
    width: 100%;
    height: 100%;
    transition: 200ms linear;
}

.mb-menu a:hover{
    background-color: var(--bgHover);
}

.mb-menu li:hover {
    transform: translate(1rem);
}


/* Start of main section */

.dp-choices, .map-choices, .tp-choices, .tp-tours {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.479);
    padding: calc(50vh - 20rem) 0 0 0;
    display: none;
    z-index: 2;
}

.marrakeshMap, .agadirMap, .casablancaMap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.479);
    padding: 1rem;
    display: none;
    z-index: 2;
    overflow-y: auto;
}

.agaMaps, .casaMaps {
    padding: 2rem 0;
    margin: auto;
}

.agaMap, .casaMap {
    max-width: 120rem;
}

.agaMap img, .casaMap img {
    width: auto;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
}

.mksMaps {
    flex-wrap: wrap;
    max-width: 110rem;
    margin: auto;
    padding: 2rem 0;
}

.mksMaps p, .agaMaps p, .casaMaps p, .swiper-slide p {
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 1.8rem;
}

.mksMap {
    margin: 0 .1rem;
    width: 50rem;
    cursor: zoom-in;
}

.mksMap img{
    width: 50rem;
    height: auto;
    object-fit: contain;
}

@media (max-width: 65rem) { 
    .mksMaps {
        padding-top: 20rem;;
        max-width: 70rem;
    }
    .mksMap, .mksMap img {
        width: 30rem;
    }
}

@media (max-width: 39rem) {
    .mksMaps {
        padding-top: 0rem !important;
    }
    .switch {
        flex-direction: column-reverse;
    }
    .swiper-button-next, .swiper-button-prev {
        display: none !important;
    }
}

.mySwiper {
    width: 100vw;
    height: 100vh;
    position: fixed !important;
    background-color: rgba(0, 0, 0, 0.479);
    display: none;
    z-index: 2;
}

.mySwiper .in-div {
    position: relative;
    top: 5rem;
    right: 3rem;
    z-index: 2;
}

.swiper-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.swiper-button-next, .swiper-button-prev {
    color: whitesmoke !important;
    font-weight: 800;
}

.mksMap-zoom {
    margin: auto;
    max-width: 100rem;
    display: flex;
}

.mksMap-zoom img {
    height: 100% !important;
    width: auto;
    object-fit: contain;
    max-width: 100%;
}

main {
    display: block;
    background-color: var(--bg);
    width: 100vw;
 }

 .hero, .dp-hero, .map-hero, .tp-hero {
    flex-wrap: wrap;
    width: calc(100% - 3rem);
    max-width: 126rem;
    margin: auto;
 }

 .hero {
    padding: 7.5rem 0;
 }

 .hero p {
    text-align: center;
 }

 .container, .dp-container, .map-container, .tp-container {
    padding: 2rem 0;
    min-width: 29rem;
    cursor: pointer;
 }

 .container {
    width: 50%;
 }

 .dp-container, .map-container, .tp-container {
    width: 33%;
 }

 .in-div { 
    width: calc(100% - 1rem);
    background-color: transparent;
    height: .1rem;
    display: flex;
 }


 .close-icon { /* Close icon segment */
    box-sizing: border-box;
    position: relative;
    bottom: 1rem;
    left: 1rem;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4rem;
    margin-left: auto;
    cursor: pointer;
    background-color: whitesmoke;
 }

 .close-icon::before, .close-icon::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 1rem;
    top: 8px;
    left: 3px
 }

 .close-icon::after {
    transform: rotate(-45deg);
 }

 @media (max-width: 75rem) {
    .container {
        width: 50%;
    }
    .container:nth-of-type(3) {
        background-color: whitesmoke;
    }
 }

@media (max-width: 60rem) {
    .dp-choices, .map-choices, .tp-choices, .tp-tours {
        padding: calc(42vh - 20rem) 0 0 0;
    }
    .dp-container, .map-container, .tp-container {
        width: 100%;
    }
    .close-icon {
        left: 1.5rem !important;
    }
}

 @media (max-width: 50rem) {
    .container, .dp-container, .tp-container {
        width: 100%;
    }
    .whitesmoke {
        background-color: whitesmoke !important;
    }
    .gainsboro {
        background-color: gainsboro !important;
    }
 }

 @media (max-width: 40rem) {
    .navigation {
        display: none;
    }
    .mb-nav {
        display: flex;
    }

    .contacts {
        flex-direction: column;
    }
    .contacts div:first-child {
        margin-right: 0 !important;
        margin-bottom: 1rem;
    }
    .contacts .separator {
        height: .3rem !important;
        width: 16rem;
        margin: 2rem 0 !important;
    }
 }

 .container-icon {
    background-color: white;
    width: 12rem;
    height: 10.8rem;
    border-radius: 48%;
    box-shadow: 0 0 3rem 0 rgba(0, 0, 0, 0.3);
 }

 .container-icon span {
    font-size: 4.8rem;
    width: 100%;
    height: 100%;
    color: var(--icon);
    display: flex;
    justify-content: center;
    align-items: center;
 }

 .container .container-name {
    margin: 1rem 0 0 0;
 }

 .container:hover .container-name p,
  .dp-container:hover .container-name p,
   .map-container:hover .container-name p, 
    .tp-container:hover .container-name p {
    color: var(--textHover);
 }


 .container-name p, .container-name a {
    font-weight: bold;
    font-size: 2.3rem !important;
    color: var(--text);
 }

 .container-name a:hover {
    color: var(--textHover);
 }

 .c-one {
    background-color: whitesmoke;
 }

 .c-two {
    background-color: gainsboro;
 }

 /* Map Swiper Segment */


 /* Start of footer section */

 footer {
    width: 100vw;
 }
 
  .contacts {
     padding: 2rem 0;
     box-shadow: 0 -1rem 2.5rem 0 rgba(0,0,0,0.3);
  }

  .contacts .separator {
    border: solid var(--textHover) .3rem;
    height: 10rem;
    margin: 0 2rem;
    border-radius: 2rem;
  }
 
  .contacts ul {
     list-style: none;
     text-align: center;
  }
 
  .contacts li {
     font-size: 1.8rem;
     font-weight: 600;
  }
 
  .contacts a {
     color: rgb(97, 97, 97);
  }
 
  .social a {
     display: block;
     width: 5rem;
     height: 5rem;
     border-radius: 1.5rem;
     margin: 1rem 0.5rem 0 .5rem;
  }
 
  .social .whatsapp {
     background: center / contain no-repeat url(/social/whatsapp.png);
  }