*{
    text-decoration: none;
    list-style: none;
    margin: 0px;
    font-family: "Poppins", serif;
    transition: 0.5s all;
}



.no-scroll {
    overflow: hidden;
    height: 100vh;
}

a {
    color: white;
}

.navbar {
    background-color: #202b3d;
    display: flex;
    padding: 0px 20px;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.logo img{
    width: 100px;
    height: 100px;
    margin-left: 20px;
}
.navlinks ul {
display: flex;
}
.navlinks ul li a{
    padding: 20px;
    color: white;
}

.navbar .navlinks ul li.active a {

    color: #AA9167;
}
.navlinks a:hover {
    color: #CEC1A6;
}

footer {
    background-color: #202b3d;
    color: white;
}
.navbar .menu-hamburger {
    display: none;
    position: absolute;
    right: 50px;
    width: 35px;
}
@media screen and (max-width:875px) {
    .navbar {
        padding: 0px;
    }
    .navbar .navlinks ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 0;
    }
    .navbar .navlinks ul li a {
        color: black;
        font-weight: 600;
        font-size: 1.4em;
    }
    .navbar .navlinks ul li  {
        margin: 25px;
    }
    .navbar .navlinks {
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        right: 0;
        position: absolute;
        background-color: rgb(255, 255, 255,0.5);
        backdrop-filter: blur(7px);
        width: 100%;
        height: 100vh;
        padding: 0;
        margin: 0;
        margin-left: -100%;
        transition: all 0.5s ease;
    }
    .navbar .menu-hamburger {
        display: block;
        z-index: 100;
    }
    .navlinks.mobile-menu {
        margin-left: 0;
    }
}



.footer-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}

.footer-nav .footer-logo img{
    width: 110px;
    height:170px;
}

.footer-navlinks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-nav .footer-navlinks ul {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-nav .footer-navlinks ul li {
    padding: 5px;
}
.footer-nav p {
    color: #b2b5b9;
}
.footer-nav ul li a {
    color: white;
}

.footer-nav ul li a:hover{
    color: #CEC1A6;
}

.footer-nav .footer-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-nav .footer-cat ul {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-nav .footer-cat ul li {
    padding: 5px;
}

.footer-nav .footer-cat ul li a:hover {
    color: #cec1a6;
}

.footer-nav .footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-nav .footer-contact ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.footer-nav .socialmedia {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-nav .socialmedia .socialmedia-logo {
    display: flex;
    flex-direction: row;
    margin-top: 20px;  
}
.footer-nav .socialmedia .socialmedia-logo .facebook-logo {
    width: 40px;
    height: 40px;
    
}

.footer-nav .socialmedia .socialmedia-logo .instagram-logo {
    width: 40px;
    height: 40px;
    margin-left: 20px;
}

.footer-nav .socialmedia .socialmedia-logo .airbnb-logo {
    width: 40px;
    height: 40px;
    margin-left: 20px;
}

.footer-nav .socialmedia .socialmedia-logo .tiktok-logo {
    width: 40px;
    height: 40px;
    margin-left: 20px;
}

@media screen and (max-width:1100px){
.footer-nav {
    display: flex;
    flex-direction: column;
}
}

@keyframes change {
    0% { background-image: url(image/Logo/main-image.jpg)}
    33% { background-image: url(image/Logo/main-image-2.jpg) }
    66% { background-image: url(image/Logo/main-image-3.jpg) }
    100% {background-image: url(image/Logo/main-image-4.jpg)}
  }


.main-img { 
    background-image: url(image/Logo/main-image.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: change 30s infinite ease-in-out;

}


.main-img p{
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.8);
    font-size: 2em;
    margin-left: 20px;
}

.surligne{
    color: rgb(255, 162, 0)
}

@media screen and (max-width:1000px){
    .main-img p {
        font-size: 1.5em;
    }
}

@media screen and (max-width:500px){
    .main-img p {
        font-size: 1.2em;
    }
}

.main-cat{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 300px 300px;
    margin-right: 50px;
    margin-left: 50px;
    margin-top: 50px;
    gap: 50px;
    justify-content: space-between;
   
   
    
}
.cat-title{
    
    grid-column-start: 1;
    grid-column-end: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
}
.main-cat-1{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(0, 0, 0, 0.5)),url(image/Logo/cat-image.jpg);
    background-size: cover;
    border-radius: 1em;
    text-shadow: 5px 5px 10px rgb(0, 0, 0);
    font-size: 2em;
}
.main-cat-2{
    display: flex;
    align-items: center;
    justify-content: center;
    background:linear-gradient(rgba(12, 12, 12, 0.5), rgba(0, 0, 0, 0.5)),url(image/Logo/cat-image-2.jpg);
    background-size: cover;
    border-radius: 1em;
    text-shadow: 5px 5px 10px rgb(0, 0, 0);
    font-size: 2em;
}
.main-cat-3{
    
    display: flex;
    align-items: center;
    justify-content: center;
    background:linear-gradient(rgba(12, 12, 12, 0.5), rgba(0, 0, 0, 0.5)),url(image/Logo/cat-image-3.jpg);
    background-size: cover;
    border-radius: 1em;
    text-shadow: 5px 5px 10px rgb(0, 0, 0);
    font-size: 2em;
}



.main-cat-1:hover{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(206, 193, 166, 0.5)),url(image/Logo/cat-image.jpg);
    background-size: cover;
 
}
.main-cat-2:hover{
    display: flex;
    align-items: center;
    justify-content: center;
    background:linear-gradient(rgba(12, 12, 12, 0.5),  rgba(206, 193, 166, 0.5)),url(image/Logo/cat-image-2.jpg);
    background-size: cover;


}
.main-cat-3:hover{
    
    display: flex;
    align-items: center;
    justify-content: center;
    background:linear-gradient(rgba(12, 12, 12, 0.5),  rgba(206, 193, 166, 0.5)),url(image/Logo/cat-image-3.jpg);
    background-size: cover;
 
}

@media screen and (max-width:1919px){

    .main-cat {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 0;
        margin-left: 0;
    }

    .main-cat-1{
        width: 100%;
        height: 300px;
        border-radius: 0;
    }

    .main-cat-2{
        width: 100%;
        height: 300px;
        border-radius: 0;
    }

    .main-cat-3{
        width: 100%;
        height: 300px;
        border-radius: 0;
    }
    .main-img{
        background-repeat: no-repeat;
    }
}



@media screen and (max-width:1358px) {


    .main-cat-1 {
        text-shadow: 5px 5px 10px rgb(0, 0, 0);
        font-size: 1.5em;
    }
    
    .main-cat-2 {
        text-shadow: 5px 5px 10px rgb(0, 0, 0);
        font-size: 1.5em;
    }
    
    .main-cat-3 {
        text-shadow: 5px 5px 10px rgb(0, 0, 0);
        font-size: 1.5em;
    }
     

    
}


.main-contact{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 100px;
    color: white;
    margin-top: 100px;
    flex-wrap: wrap;

}

.main-contact h1 {
    font-size: 4em;
    padding: 20px;
}

.main-contact-1 {
 color: black;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-weight: 600;
}
.main-contact-1 p {
    margin-bottom: 20px;
    margin-left: 10px;
}
.main-contact h1,h2{
    font-weight: 600;
}


.main-contact-2{
    background-color: #202b3d;
    padding: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.main-contact-tel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-contact-tel-title{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-contact-tel-title img{
    width: 40px;
    height: 40px;
    padding: 10px;
}

.main-contact-tel a{
margin-top: 10px;
}


.main-contact-mail{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}


.main-contact-mail-title{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-contact-mail-title img{
    width: 40px;
    height: 40px;
    padding: 10px;
}

.main-contact-tel a:hover{
    color: #AA9167;    
}

.main-contact-mail a:hover{
    color: #AA9167;
}

@media screen and (max-width:1495px) {
    .main-contact{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    } 
    .main-contact-2{
        margin-top: 50px;
    }
}

@media screen and (max-width:923px) {
.main-contact-2 h1 {
    font-size: 3em;
}
}

@media screen and (max-width:802px) {
    .main-contact-2 h1 {
        font-size: 2em;
    }
    }

@media screen and (max-width:771px) {
    .main-contact-1 h1{
        font-size: 3em;
    }
}

@media screen and (max-width:638px) {
    .main-contact-1 h1{
        font-size: 2em;
    }
    .main-contact {
        padding: 0px;
        margin-right: 0px;
        margin-left: 0px;
    }
    .main-contact-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width:500px){

    .main-contact-2{
        
        background-color: #202b3d;
        border-radius: 0;
        padding: 0;

    }

    .main-contact{
        background-color: #202b3d;
    }

    .main-contact-1{
        background-color: white;
    }
}

.socialmedia-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.socialmedia-main-1{
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: 50%;
}

.socialmedia-main-1 h1{
    padding: 10px;
    font-size: 3em;
    font-weight: 600;
}

.socialmedia-main-1 p {
    padding: 10px;
    font-weight: 600;
}

.socialmedia-main-2{
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #202b3d;
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 1em;
    gap: 50px;
}

.socialmedia-main-2 .socialmedia-logo {
    width: 100px;
    height: 100px;
}



@media screen and (max-width:925px) {
    .socialmedia-main-2 .socialmedia-logo{
        width: 50px;
        height: 50px;
    }
    
}

@media screen and (max-width:772px)
{
    .socialmedia-main-1 h1{
        font-size: 3em;
    }
}

@media screen and (max-width:638px)
{
     .socialmedia-main-1 h1{
        font-size: 2em;
    }

    .socialmedia-main-2 {
        padding: 20px;
    }
}

@media screen and (max-width:500px)
{

    .socialmedia-main-2{
        gap: 20px;
    }
}

@media screen and (max-width:400px){
    .socialmedia-main-2 .socialmedia-logo{
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width:320px){
    .socialmedia-main-2 {
        border-radius: 0;
    }
}

.category {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.category-1{
    padding: 40px;
}

.category-2 {
    display: flex;
    flex-direction: row;

    align-items: center;
    width: cover;
}

.cat-1 {
    font-size: 2em;
    width: 500px;
    height: 800px;
    margin: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(0, 0, 0, 0.5)),url(image/Logo/cat-image.jpg);
    background-size: cover;
}


.cat-2 {
    font-size: 2em;
    width: 500px;
    height: 800px;
    margin:30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(0, 0, 0, 0.5)),url(image/Logo/cat-image-2.jpg);
    background-size: cover;
}


.cat-3{
    font-size: 2em;
    width: 500px;
    height: 800px;
    margin: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(0, 0, 0, 0.5)),url(image/Logo/cat-image-3.jpg);
    background-size: cover;
 
}


.cat-1:hover{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(206, 193, 166, 0.5)),url(image/Logo/cat-image.jpg);
    background-size: cover;
    margin-top: -10px;
    transition: 0.5s;
 
}

.cat-2:hover{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(206, 193, 166, 0.5)),url(image/Logo/cat-image-2.jpg);
    background-size: cover;
    margin-top: -10px;
    transition: 0.5s;
 
}

.cat-3:hover{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 12, 12, 0.5), rgba(206, 193, 166, 0.5)),url(image/Logo/cat-image-3.jpg);
    background-size: cover;
    margin-top: -10px;
    transition: 0.5s;
    

}

@media screen and (max-width:1700px){
    .category-2{
        display: flex;
        flex-direction: column;
        margin-right: 0;
        margin-left: 0;
        width: 100%;
    }

    .cat-1{
        background-size: cover;
        width:100%;
        height:300px;
        margin: 0;
        margin-bottom: 30px;

    }

    .cat-2{
        background-size: cover;
        width: 100%;
        height:300px;
        margin: 0;
        margin-bottom: 30px;

    }

    .cat-3{
        background-size: cover;
        width: 100%;
        height:300px;
        margin: 0;
        margin-bottom: 30px;

    }
    
}


.Products-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    
 

}
.Products{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 450px 450px 450px 450px 450px 450px ;
    gap: 70px;
    margin-top: 100px;
    margin-bottom: 100px;
}

.Products a{
    color: black;
}

.Product{
    border-radius: 1em;
    overflow: hidden;
    padding: 20px 20px;
}

.Product-image{
    width: 450px;
    height: 300px;
    overflow: hidden;
    border-radius: 1em;
}

.Product-1 {
    border-radius: 1em;
    overflow: hidden;
    position: relative;
    width: 450px;
    height: 300px;
}

.Product-image img {
    overflow: hidden;
    width: 450px;
    height: 300px;
    border-radius: 1em;
    transition: 1s all ease-in-out;
    object-fit: cover;
}

.Product-image img:hover {
    transform: scale(1.1);
    object-fit: cover;
    overflow: hidden;
}


.Product-1 h1 {
    font-weight: 500;
    background: #202b3d;
    position: absolute;
    top: 4%;
    left: 4%;
    color: white;
    padding: 10px;
    border-radius: 1em;
    font-size: 1.2em;
    transition: 0.3s all ease-in-out;
}

.Product-1 h1:hover{
    transform: scale(1.1);

}

.Product-tags{
    display: none;
    position: absolute;
    bottom:5%;
    left: 50%;
    transform: translateX(-50%);
    gap: 20%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.Product-tag{
    display: none;
    font-size: 0.7em;
    background: rgba(255, 255, 255, 0.678);
    padding: 10px;
    border-radius: 1em;
    border: 2px solid rgba(255, 255, 255, 0.678);
    transition: 0.5s all ease-in-out;
}

.Product-tag:hover{
    transform: scale(1.1);
}

.Product-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    align-items: center;
    padding: 20px 0px;
}

.Product-name{
    display: flex;
    flex-direction: column;
}

.Product-name h1{
    padding: 5px 0px;
    font-size: 1.2em;
    font-weight: 600;
}

.Product-name p {
    padding: 5px 0px;
    font-size: 1em;
    font-weight: 400;
}

.Product-airbnb-redirect {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.Product-airbnb-redirect img{
    width: 50px;
    height: 50px;
}

@media screen and (max-width:1700px){
    
    .Products{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

}

@media screen and (max-width:600px){
    .Products-main h1 {
        font-size: 1.2em;
    }
}

@media screen and (max-width:490px) {
    .Product{
        padding: 0px;
        
    }
    .Product-image {
       
        width: 400px;
        height: 275px;
       
    }

    .Product-1 h1{
        left: 2%;
        font-size: 1em;
        padding: 8px;
    }

    .Product-tag{
        font-size: 0.6em;
        padding: 5px;
    }

    .Product-name h1{
        font-size: 1em;
    }

    .Product-name p{
        font-size: 0.8em;
    }

}

@media screen and (max-width:400px) {

    .Product {
        width: 300px;

    }
    
    .Product-image {
        width: 300px;
        height: 200px; 
    }

    .Product-image img{
        width: 300px;
        height: 200px;
    }

    .Product-1 h1{
        font-size: 0.8em;
    }

    .Product-name h1{
        font-size: 0.8em;
    }

    .Product-name p{
        font-size: 0.8em;
    }


    .Product-airbnb-redirect p{
        font-size: 0.8em;
    }
    .Product-airbnb-redirect img{
        width: 30px;
        height: 30px;

    }


}

/* Product for mosta */

.ProductsM{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 450px 450px;
    gap: 70px;
    margin-top: 100px;
    margin-bottom: 100px;
}

.ProductsM a{
    color: black;
}

.ProductM{
    border-radius: 1em;
    overflow: hidden;
    padding: 20px 20px;
}



@media screen and (max-width:1700px){
    
    .ProductsM{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

}

@media screen and (max-width:600px){
    .Products-main h1 {
        font-size: 1.2em;
    }
}



@media screen and (max-width:320px){

}

.Prev-nav{
    padding: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.Prev-nav a{
    color: black;
    font-size: 1em;
}

.Prev-nav a:hover{
    border-bottom: 5px #202b3d solid;
    transition: 0.1s ease-in-out;
}

.NavTown{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:50px
}

.NavTown a {
    padding: 5px 0px;
}

.NavTown a.marked{
    border-bottom: 5px #202b3d solid;
    
}

@media screen and (max-width:500px){
    .Prev-nav{
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
}

.Product-main-1 {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 100px;
    
}

.Product-presentation{
    display: flex;
    flex-direction: column;
    width: 40%;
    align-items: center;
}

.Product-title {
    font-weight: 500;
    padding: 20px;
}

.Product-desc{
    font-weight: 400;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: none;
    
}


.Product-location{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 30px;
}

.Product-location img {
    opacity: 80%;
    padding: 0 10px;
}

.Product-desc h2 {
    padding :10px 0px;
}

.Product-desc p {
    padding: 10px ;
    font-weight: 300;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(219,189,105,0.3757878151260504) 100%);
    border-radius: 1em;

}

.Product-disclaimer{
    padding: 0px 30px;
    border-radius: 1em;
}

.Product-disclaimer p{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(219,189,105,0.3757878151260504) 100%);
    border-radius: 1em;
    padding: 5px;
}

.Product-disclaimer a{
    color: black;
    text-decoration: underline;
}





.carousel-container {
    width: 90%;
    max-width: 800px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.carousel-container.zoomed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 1000;
    background: black;
    border-radius: 0;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 999;
}

.overlay.active {
    display: block;
}

.carousel {
    display: flex;
    height: 500px;
    will-change: transform;
}

.carousel-slide {
    min-width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.carousel-container.zoomed .carousel {
    height: 100%;
}

.carousel-container.zoomed .carousel img {
    object-fit: contain;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
}

/* Transition fluide pour le mode zoom */
.carousel-container.zoomed .carousel {
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 24px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.carousel-container.zoomed .carousel-btn {
    opacity: 0.7;
}

.carousel-container.zoomed .carousel-btn:hover {
    opacity: 1;
}

.btn-prev {
    left: 10px;
}

.btn-next {
    right: 10px;
}

.btn-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 1010;
}

.carousel-container.zoomed .btn-close {
    display: block;
}

@media (max-width: 768px) {
    .carousel {
        height: 300px;
    }
    
    .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

@keyframes fade {
    from {opacity: .5}
    to {opacity: 1}
}


@media screen and (max-width:1000px){
   


    .Product-title {
        display: flex;
        justify-content: center;
        margin-left: 0;
    }
}






@media screen and (max-width:1520px){
    .Product-main-1{
        flex-direction: column-reverse;
    }

    .Product-presentation{
        width: 100%;
    }

}

iframe{    
    width:100%;
    height: 400px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.Product-main-2{
    display: flex;
    flex-direction: row;
    padding: 50px;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}

@media screen and (max-width:1430px) {
    .Product-main-2{
        flex-direction: column;
    }
}

.Product-specs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 50px 0;
    gap: 3em;
}

.Product-spec{
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
}

.Product-spec p{
    display: flex;
    flex: row;
    align-items: center;
}
.Product-spec img {
    width: 30px;
    height: 30px;
}

.Product-spec p{
    font-weight: 600;
}

.Product-spec-title{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.Product-spec-title h2 {
    padding: 10px;
    font-size: 1.3em;
}
@media screen and (max-width:950px){

    .Product-main-2{
        padding : 20px 5px;
    }
}

@media screen and (max-width:860px){

    .Product-spec{
        font-size: 1em;
    }
}

@media screen and (max-width:830px){
    .Product-specs {
        grid-template-columns: 1fr 1fr;
        margin: 10px;
        gap: 1em;
    }

    .Product-spec{
        padding: 20px 0px;
        font-size: 1em;
    }
}
@media screen and (max-width:430px){

}
.Product-contact{
    background-color: #202b3d;
    padding: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    color: white;
}
.Product-contact-tel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.Product-contact-tel-title{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.Product-contact-tel-title img{
    width: 40px;
    height: 40px;
    padding: 10px;
}
.Product-contact-tel a{
margin-top: 10px;
}
.Product-contact-mail{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.Product-contact-mail-title{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.Product-contact-mail-title img{
    width: 40px;
    height: 40px;
    padding: 10px;
}
.Product-contact-tel a:hover{
    color: #AA9167;    
}
.Product-contact-mail a:hover{
    color: #AA9167;
}
.main-guidebook{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 1700px) {

    .main-guidebook{
        display: flex;
        flex-direction: column;
    }
}

.main-guidebook-1{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
}
.main-guidebook-btn{
    margin-top: 10px;
    padding: 10px;
    background: #202b3d;
    border-radius: 1em;
}
.main-guidebook-btn:hover{
    background-color: #AA9167;
}
.main-guidebook-2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-template-rows: 200px 200px  ;
    gap: 30px;
    padding: 30px;
    overflow: hidden;
}
.main-guidebook-img img{
    width: 300px;
    height: 200px;
}
.main-guidebook-img:hover{
    transform: scale(1.3);
}

@media screen and (max-width:1000px){
    .main-guidebook-2 {

        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px 200px;
    }
}

@media screen and (max-width:680px){
    .main-guidebook-2 {
        display: none;
    }
}
.rules-main{
    margin-top: 20px;
    margin-bottom: 100px;

}
.rules-title{
    display: flex;
    justify-content: center;
    padding: 20px;
}
.rules-description{
    padding: 20px;
    font-weight: 500;
    
}
.rule{
    margin-top: 20px;

}

.rule h2{
    margin-bottom: 20px;
}
.rule ol{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(219,189,105,0.3757878151260504) 100%);
    border-radius: 1em;
    width: 40%;
}
.rule ol li{
    font-weight: 500;
    padding: 10px;

}

---------------------------

.services-main{
    margin-top: 20px;
    margin-bottom: 100px;

}
.services-title{
    display: flex;
    justify-content: center;
    padding: 20px;
}
.services-description{
    padding: 20px;
    font-weight: 500;
    
}
.service{
    margin-top: 20px;

}

.service h2{
    margin-bottom: 20px;
}
.service ol{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(219,189,105,0.3757878151260504) 100%);
    border-radius: 1em;
    width: 40%;
}
.service ol li{
    font-weight: 500;
    padding: 10px;

}

@media screen and (max-width: 1700px){
    .rule  ol{
        width: 50%;
    }

    .service  ol{
        width: 50%;
    }
}
@media screen and (max-width: 1600px){
    .rule  ol{
        width: 60%;
    }
    .service  ol{
        width: 60%;
    }
}
@media screen and (max-width: 1200px){
    .rule  ol{
        width: 70%;
    }
    .service  ol{
        width: 70%;
    }
}
@media screen and (max-width: 1000px){
    .rule ol{
        width: 80%;
    }
    .service ol{
        width: 80%;
    }
}


.commingsoon-main {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.commingsoon-main h1{
   
    margin-top: 300px;
    font-size: 3em;
    opacity: 0.3;

}