*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Lato',sans-serif;
    background: var(--bg);
    overflow-x: hidden;
}
h1,h2,h3{
    font-family: 'Gotu',sans-serif;
}
h1{
    font-size: 3rem;
    font-weight: 400;
}
h3{
    font-weight: 100;
}
p{
    line-height: 1.5;
}
:root{
 --primary: #a48d78;
 --bg :#F3EEE4;
 --secondary:#c8b9a4;
 /* --oat:#e6dac8;  og*/
 --oat:#EDE6DB;
 --mist:#f4f1ea;
 --white:#faf9f6;
 --swiper-navigation-size: 60px;
 /* --bg:#F6F3EC; */
 --text:#4B3B35;
 --teal:#006D6D;
 --darkteal:#004F4F;
 --rose:#CE9777;
 /* --foot: #863D28; */
 --amber:#C68A2A;
 --plum:#863D28;
 --softbeige:#E5C2A7;
 --brown:#3A2D28;
 --primary-body:#3F352C;
 --sec-body:#6A5A4D;
 --mute:#A89278;
 --taupe:#5C4A42;
 --foot:#4A3E31;
 --accent-p: #8B7159;
 --hover:#735E4C ;
 --accent-s:#B49E88;
 --accent-sup:#675543;
 --outline:#B49E88;
 --outline-bg:transparent;
 

 /* --button-p:#8B7159; */
}
nav{
    width: 100%;
    background: var(--bg);
    position: fixed;
    top:0;
    z-index: 10;
}
button{
    font-family: 'Lato',sans-serif;
    font-weight: 400;
    transition: .3s ease;   
    border:2px solid     
}
.mob{
    display: none;
}
.cta button:hover{
    cursor: pointer;
    /* background: var(--teal); */
    background-color: #735E4C;
    color: white;
    /* border: 2px solid var(--amber); */
}
.buttons{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap:40px;
}
.cta button,.card button,.buttons button{
    border: 2px solid transparent;
    border-radius: 30px;
    width: max-content;
    padding: .6rem 1rem;
    /* background: var(--mist); */
    /* background: var(--teal); */
    background: var(--accent-p);
    color:var(--white);
    font-size: 1rem;
    transition: .3s ease;
}
.buttons button{
    /* background-color: var(--primary); */
    /* background: var(--teal); */
    /* background: transparent; */
    background-color: var(--outline-bg);
    color:var(--outline);
    cursor: pointer;
    border: 2px solid var(--outline);
}
.buttons button:hover{
    background:var(--outline);
    color:var(--foot);
    
    border-color: var(--outline);
}

.logo{
    width: 160px;
    height: 120px;
    position: relative;
}
.logo img{
       position: absolute;
    width: 130%;
    height: 122%;
    /* top: -12px; */
    object-fit: cover;
    margin-top: -16px;
}
.navbar{
    display: flex;
    width: 85%;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}
.nav-links{
    display: flex;
    list-style: none;
    align-items: center;
    gap:20px;
    font-size: 1.2rem;
    transition: .3s ease;
}
.nav-links li:hover .nav-links li{
    border-bottom: 1px solid var(--primary);
    scale: 1;
    
}
.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
  background-color:var(--bg);
  color: var(--primary);
  /* padding: 16px; */
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: var(--primary);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */


.nav-links li{
    scale: 0.95;
    transition: .3s ease;
    
}
a{
    text-decoration: none;
    color:var(--primary);
}
.sticky-cta{
    position: fixed;
    bottom:10%;
    left:-190px;
    z-index: 10;
    width: 225px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .3s ease;
    background: var(--mist);
    cursor: pointer;
    border:1px solid black;
}
.sticky-cta img{
    width: 28px;
    object-fit: contain;
    transition: .3s ease;
}
.sticky-cta.active{
    left:0;
}
.sticky-cta.active:hover > img{
    transform: translateX(-15px) rotateY(180deg);
}
.sticky-cta.active > img{
    transform: rotateY(180deg) translateX(10px);
    transition: .3s ease;
}
.sticky-cta .cta button{
    /* width: 0; */
    /* opacity: 0; */
    border-radius: 0;
    border: 0;
}
.sticky-cta:hover > img{
transform: translateX(3px);
}
section{
    width: 100%;
    min-height: 90vh;
    position: relative;
    /* top:10vh; */
}
.wrapper{
    width: 85%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* position: relative; */
}
#hero{
    min-height: 100vh;

}
#hero p{
    font-size: .8rem;
}
#hero .hero-headings{
    text-align: center;
}
#hero img,#hero video{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.5);
}
#hero .cta button{
    width: auto;
    padding:1rem 1rem;
    /* background-color: var(--rose); */
    background: var(--accent-p);
    color:var(--white);
    border:2px solid transparent;
}
#hero .cta button:hover{
    background:#735E4C;
    color: var(--white);
    /* border-color: var(--amber); */
}
.hero-headings{
  position: absolute;
    display: flex;
    flex-direction: column;
    gap: 20px;
    top: 35%;
    /* left: 5%; */
    color: var(--mist);
    /* width: 45%; */
    /* height: 85%; */
    justify-content: center;
    align-items: center;
}
.hero-headings h1{
    /* width: 65%; */
    line-height: 1.2;
}
#about{
    height: 90vh!important;
    min-height: 0!important;
    background: var(--white)!important;
}
#about img{
    width: 130px;
}

#about .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 100%; */
    text-align: center;
    gap:20px;
    
}
#about h2{
    font-size: 1.8rem;
    width: 65%;
    color:var(--brown);
    color:var(--primary-body);
    /* color: black; */
}
#about h4,#about-enforme h4,#contact h4{
    /* color:var(--secondary); */
    color:var(--brown)!important;
    color:var(--primary-body);
    font-size: 1.1rem;
    font-weight: 400;
    width: 65%;
    line-height: 1.5;
    /* opacity: .5; */
}

/*split screen */
#third{
    /* background: var(--primary); */
    background-color: var(--oat);
    color:var(--brown);
    min-height: auto!important;
    
}
#third .wrapper{
    min-height: 70vh;
}
#third h2{
    color: var(--mist);
    font-size: 3rem;
    position: absolute;
    z-index: 3;
    top:50px;
    /* padding-top: 50px; */
    
}

.gallery {
  display:flex;	
  /* margin-top:150px; */
  padding:2rem 0;
}

.gallery h3 {
	font-size:clamp(2rem, 2vw, 6em);
    color:var(--brown);
}

.gallery p {
	font-size:clamp(1rem, 1.2vw, 1.5em);
	line-height:1.4;
    color: var(--brown);
    width: 85%;
}



.left {
	width:45vw;
    position: relative;
    left:0!important;
}

.right {
	height:70vh;
	/* outline:1px solid purple; */
	width:60%;
	display:flex;
	flex-direction:column;
	justify-content:center;
    align-items: center;
    right:0!important;
}

.desktopContent {
	margin:auto;
	/* width:80%; */
}

.desktopContentSection {
	min-height:70vh;
	/* outline:1px solid green; */
	display:flex;
	flex-direction:column;
	justify-content:center;
    gap:20px;
}
.desktopContentSection a{
    width: max-content;
    border-radius: 30px;
}
.desktopContentSection button{
    width: auto;
    padding:1rem;
    /* background-color: var(--brown); */
    background: var(--outline-bg);
    border-radius: 30px;
    font-family: 'Lato',sans-serif;
    font-weight: 400;
    font-size: 1rem;
    border: 2px solid var(--outline);
    color:var(--accent-p);
    cursor: pointer;
    /* color:var(--oat); */
}
.desktopContentSection button:hover{
background: var(--outline);
color:var(--foot);
color:white;

}
.desktopPhotos {
	width: 35vw;
    height: 25vw;
	border-radius:20px;
	position:relative;
	overflow:hidden;
	box-shadow:4px 4px 4px rgba(0, 0, 0, 0.4);
    bottom:10%;
}

.desktopPhoto {
	position:absolute;
	width:100%;
	height:100%;
}
.desktopPhoto img{
    position:absolute;
	width:100%;
	height:100%;
    object-fit:cover;
}








/* small screen / mobile layout */
.mobileContent {
	display:none;
	width:80vw;
}

.mobilePhoto img{
	width:80vw;
	height:80vw;
	margin-top:5em;
	border-radius:6vw;
    object-fit: cover;
}


#testimonials{
position: relative;
/* background: var(--mist); */
}
#testimonials .bg,#retreat .bg{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
/* opacity: .5; */
object-fit: cover;
filter: brightness(.6) sepia(.6);
}
/* services section */
#services h2,#testimonials h2{
    margin:20px auto 10px auto;
    color: var(--brown);
    font-size:3rem;
}
#testimonials h2{
    /* color:var(--white); */
}
.service-wrapper{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    place-items: center;
    /* width: 85%; */
    padding:1rem;
    gap:40px 20px;
}
.card,.flip-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding:2rem; */
    gap:10px;
    text-align: center;
    border-radius: 16px;
    width: 100%;
    transition: .3s ease;
    transform-style:preserve-3d ;
    perspective: 800px;
    position: relative;
}
.card:hover .front{
    /* scale: 1.05; */
    transform: rotateY(-180deg);
}
.card:hover .back{
    /* scale: 1.05; */
    transform: rotateY(0);
    opacity: 1;
    
}
.front,.back{
    backface-visibility: hidden;
    transition: .3s ease;
    border: 2px solid var(--rose);
    border-radius: 16px;
    width: 100%;
}
.back{
position: absolute;
height: 100%;
/* background-color: #2a2a2a; */
transform: rotateY(180deg);
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.2rem;
gap:20px;
/* opacity: 0; */
transform-style: preserve-3d;
}

.card img{
    width: 100%;
    height: 350px;
    border-radius: 15px 15px 0 0 ;
    background: var(--mist);
    object-fit: cover;
}

.card p{
    width: 90%;
    font-weight: 300;
    line-height: 1.5;
}
.card h3{
    font-size: 1.2rem;
    color: var(--brown);
    margin:5px auto;
}
.card button{
    margin:5px auto 10px auto;
    border:2px solid var(--accent-p);
    background: transparent;
    color:var(--accent-p)!important;
}

.card button:hover{
    background-color: var(--accent-p);
    /* color: var(--foot)!important; */
    cursor: pointer;
}
.card button:hover a{
    color:var(--foot);
    color:white;
    
}
.card a{
    border-radius: 25px;
    padding: 0;
    color:var(--accent-p);
}
.card span,.card h3{
    font-weight: 600;
}
.card span{
    color:var(--primary);
    font-size: 1.5rem;
}
footer{
    position: relative;
    background: var(--foot);
    color:white;
    /* top:10vh; */
}

footer .logo{
  order:1;
  width: 60px;
  height: 80px;
  top:20px;
}
footer .logo img{
    width: 100%;
    height: 100%;
}
.footer-socials h3{
/* margin-top: -15%; */
font-weight: 800;
}
.footer-socials h4{

    font-weight: 400;
    font-size: 1rem;
}
.footer-socials a{
    color:var(--white)!important;
}
.footer-socials img{
    width: 30px;
    height: 30px;
    position: relative;
    margin-top:15px;
    color:var(--white);
}
.footer-container{
    display: flex;
    width: 85%;
    margin: auto;
    align-items: center;
    justify-content: space-around;
    /* color: var(--primary)!important; */
}
footer,.footer-wrap,.footer-socials{
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
    align-items: center;
    gap:10px;
    padding: 2rem 0;
    height: 100%;
}
.footer-wrap h4{
    font-size: 1.2rem;
}
.footer-wrap span{
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
}
.footer-wrap{
    display: flex;
}
footer p{
    font-weight: 300;
    /* margin:20px auto; */
    font-size: .8rem;
}
#news {
/* background-image: url('../assets/images/home-1-background-4.webp')!important; */
display: grid;
place-items: center;
}
#news .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: .5;
}
.holder{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
}
.left-holder{
    width: 30vw;
    height: 500px;
    position: relative;
}
.left-holder img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.right-holder{
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-left:40px;
    gap:10px;
}
.right-holder h2{
    color:var(--primary);
}
.right-holder h4{
    color:var(--primary);
    font-size: 1.5rem;
}
.right-holder p{
    color:var(--secondary);
    font-size: 1.1rem;
}
.form{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:5px;
    margin-top:20px;
}
.form input{
    width: 250px;
    padding:1rem;
    border-radius: 30px;
    /* border: 0; */
}
.form button{
    width: 150px;
    padding: 1rem;
    border-radius: 30px;
    border: 0;
    background: var(--oat);
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Lato',sans-serif;
    color:var(--white);
}
.close{
    position: absolute;
    right:5%;
    top:40%;
    display: none;
}
.close.active .bar:nth-of-type(1){
 transform: rotateZ(45deg) translateY(7px);
}
.close.active .bar:nth-of-type(2){
    opacity: 0;
}
.close.active .bar:nth-of-type(3){
 transform: rotateZ(-45deg) translateY(-7px);
}
.bar{
    width: 20px;
    height: 3px;
    background: black;
    margin:2px auto;
    transition: .3s ease;
}

/* swiper  */
.swiper {
      width: 100%;
      height: 100%;
      margin-top:5%;
    }
.swiper-button-next,.swiper-button-prev{
    color:var(--primary)!important;
    /* width: 20px!important; */
      /* height: 20px!important; */
}
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      font-family: 'Lato',sans-serif!important;
      background: #faf9f6ef;
      display: flex!important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem 5rem;
      gap:10px;
      text-align: left!important;
      /* width: 85%!important; */
      /* margin:0 auto!important; */
      text-align: left;
      /* height: 50vh!important; */
      
    }
.swiper-slide h3{
    margin:40px 40px 0 auto;
    text-align: right;
    color:var(--teal);
}
.swiper-slide p{
    text-align: left;
    font-weight: 300;
}
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* services page */
    #services-hero h1,#about-hero h1,#enforme-hero h1,#contact-hero h1{
        color:var(--white);
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size: 5rem;
        width: 100%;
        display: inline;
        text-align: center;
        /* font-family: 'Lato',sans-serif; */
    }
    #services-hero h3{
        font-size: 1.2rem;
        position: absolute;
        color: white;
        top:75%;
        left:50%;
        transform: translate(-50%,-75%);
        text-align: center;
    }
    #about,#about-enforme,#contact{
        background: var(--secondary);
        height: 100%!important;
        padding:50px 0;
    }
    #contact{
        background: var(--bg);
    }
    #about-enforme{
        background: var(--bg);
    }
    #about-enforme h4,#contact h4{
        color:#2a2a2a;
        width: 60%;
    }
    #about .wrapper,#about-enforme .wrapper,#contact .wrapper{
        /* flex-direction: row;  */
        gap:20px;
    }
    #about-enforme .all-services{
        display: flex;
    }
    #about-enforme .serv{
       max-height: 1000px;
    width: 100%;
    height: 130px;
    justify-content: flex-start;
    align-items: center;
    }
    #about-enforme h2{
        color: var(--white);
        font-size: 2rem;
    }
    #about-enforme .serv h2{
        font-size: 1.2rem;
    }
    #about-enforme .serv p, #about-enforme .serv h2{
        z-index: 2;
        margin:0;
    }
    #about-enforme img{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
        z-index: 0;
        opacity: .3;
        filter: brightness(.4);
    }
    #about-enforme .down{
        top:0;
    }
    #about-enforme .wrapper .cta,#about-enforme .wrapper .cta button,#contact .cta,#contact .cta button{
        width: 300px;
    }
   
    .note{
        font-size: .8rem;
        font-weight: 300;
    }
    .jayla li{
        margin: 5px auto;
    }
    .jayla strong{
        font-weight: 800;
        color:var(--brown);
    }
.jayla li h3,.jayla p{
    text-align: left!important;
    color:var(--taupe);
}
.jayla p{
    margin-top:-10px;
}
.img-hold{
    width: 30vw;
}
.text-hold{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.text-hold ul{
    margin-left:30px;
}
.offerings{
    display: flex;
}
    #about .wrap{
        display: flex;
        flex-direction: column;
        gap:5px;
        justify-content: center;
    }
    #about h4{
        width: 60%;
        color:var(--white);
    }
    
   .zoom{
    width: 10%!important;

   }
    #about img{
        width: 400px;
        /* height: 450px; */
    }
    .about span:first-of-type{
        margin-top:10px;
    }
    .about span{
        color:#2a2a2a;
        font-style: italic;
    }
    .about .wrapper{
        /* flex-direction: row!important; */
    }
#services-hero, #about-hero,#enforme-hero,#contact-hero{
    /* top:10vh; */
    min-height: 70vh;
}
#services-hero img, #about-hero img,#enforme-hero img,#contact-hero img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter:brightness(.6);
    z-index: -1;
}   

#all-services h3{
    margin-top:50px;    
    width: 65%;
    color:var(--taupe);
    text-align: center;
}
.all-services{
     display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:20px;
    margin-top: 20px;
    width: 100%;
    padding:3rem 0;
}
#all-services .all-services{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    
}
.serv{
    display: flex;
    flex-direction: column;
    gap:10px;
    width: 300px;
    margin: auto;
    text-align: center;
    border:3px solid var(--oat);
    padding:1rem;
    border-radius: 15px;
    box-shadow: 0 3px .5rem gray;
    max-height: 250px;
    overflow: hidden;
    position: relative;
    transition: max-height .3s linear;
    /* will-change: max-height; */
    background:var(--oat);
    color:var(--brown);
}
.serv h2{
    font-size: 1.2rem;
    font-weight: 400;
    color:var(--brown);
}
.serv img{
    width: 100%;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center bottom;
    position: relative;
}

.down{
    top:30px;
    
}
.serv.active{
    /* transition: max-height 300ms linear; */
    /* will-change: max-height; */
    max-height: 1000px;
    align-self: flex-start;
}
.prices{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    flex-wrap: wrap;
}
.prices span{
    font-weight: 600;
    color: var(--brown);
    background: var(--mist);
    padding: 1rem ;
    border-radius: 20px;
    cursor: pointer;
}

.more{
    
    position: absolute;
    bottom:-5px;
    left:50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-family: 'Lato',sans-serif;
    color: #2a2a2a;
    font-weight: 400;
    padding: .2rem .5rem;
    border-radius: 0 0 10px 10px;
    /* border: 1px solid var(--primary); */
    /* opacity: .7; */
    background: linear-gradient(to bottom, transparent 5%,var(--mist) 25% ,var(--oat)) ;
    width: 100%;
    height: 35%;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: all;
    z-index: 2;
}
.more.active{
    opacity: 0;
    pointer-events: none;
}

.serv p{
    font-weight: 300;
    line-height: 1.2;
    margin:30px auto 20px auto;
    color:var(--taupe);
}
#packages,#corporate,#retreat,#benefits{
    padding:2rem 0;
    position: relative;
}
.back{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    opacity: .5;
    /* filter:grayscale(.2); */
}
#packages h1,#corporate h1,#benefits h1,#all-services h1{
    color: var(--primary);
    color:var(--brown);
    text-align: center;
    display: inline;
    width: 100%;
    /* align-self: flex-start; */
}
#retreat{
    padding:0;
}
#retreat h1{
    color: var(--mist);
    text-align: center;
    margin:10px auto;
    
}
#packages h1{
    margin-top: 20px;
}
#packages .all-services{
    grid-template-columns: repeat(2,1fr);
}
.content-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #faf9f6bb;
    border-radius: 15px;
}
.content-left,.content-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
    width: calc(85vw/2);
    position: relative;
    text-align: center;
    color:var(--brown);
}
.content-left p{
width: 80%;
line-height: 1.5;
text-align: left;
color:var(--taupe);
}
.content-right:first-of-type{
    /* right:-20px; */
}
.content-wrap img{
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
}
.content-wrap h1{
color: var(--primary);
}
#corporate{
    /* background: var(--secondary); */
    padding:0;
    
}
#corporate h1{
    color:var(--white);
    margin-top: 20px;
}
#corporate .all-services,#retreat .all-services{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
#corporate .serv {
    /* width: 450px; */
}
#corporate .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: .5;
    filter: brightness(.6);
    padding:-2rem 0;
}
.desc{
        color: var(--mist);
}
#corporate h2{
    color:black;
}
#corporate .serv p{
    width: 100%;
}
.table{
    display: flex;
    flex-direction: column;
    margin:10px auto 20px auto;
}

.row{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    color:var(--white);
    background: #2a2a2aaf;
    border-radius: 10px;
    /* border:1px solid var(--mist); */
}
.row > *{
    border:1px solid var(--mist);
    padding:1rem;
}
.type h3,.model h3,.rate h3{
    font-weight: 800;
}
#benefits h1{
    margin:20px auto;
}
.benefits-wrap{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:20px;
    padding: 2rem;
}
.benefits-right h3{
    font-size: 1.5rem;
    text-align: left;
    color:var(--brown)
}
.benefits-left{
    width: 35vw;
}
.benefits-left img{
    width: 100%;
}
.benefits-right{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap:10px;
    margin:10px auto;
    width: 100%;
}
#benefits h2{
    color:var(--brown);
}
#benefits p{
    width: 65%;
    color:var(--taupe);
}
#benefits ul{
    margin-left:20px;
    display: flex;
    flex-direction: column;
    gap:10px;
    color:var(--taupe);
}
form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:20px;
    margin-top:20px;
    width: 50%;
    border:2px solid var(--rose);
    padding:1rem;
    border-radius: 10px;
    /* background: var(--softbeige); */
}
::placeholder{
    font-family: "Lato",sans-serif;
}
form input,textarea{
    padding: 1rem;
    border-radius: 10px;
    border:0;
    width: 100%;
    font-family: "Lato",sans-serif;
}
textarea{
resize: none;
height: 150px;
}
form button{
    width: 200px;
    padding: 1rem;
    border-radius: 30px;
    border: 0;
    background: var(--accent-p);
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Lato',sans-serif;
    color:var(--white);
    cursor: pointer;
    /* border:2px solid var(--amber); */
}
form button:hover{
    background: var(--accent-s);
    background: #735E4C;
    color:var(--white);
}
@media screen and (max-width: 599px) {
	.left {
		display:none;
	}
	
	.right {
		height:auto;
		width:100%;
		align-items:center;	
	}	
	
	.desktopPhotos {
		display:none;
	}
	
	.mobileContent {
		display:block;
	}
	

}
@media screen and (min-width:280px) and (max-width:599px) {
    h1{
        font-size: 2rem;
    }
    .hero-ings{
        text-align: center;
    }
    #about h2{
        font-size: 1.5rem;
        width: 90%;
    }
    #about h4{
        width: 90%;
    }
    #all-services h3{
        width: 85%;
    }
.service-wrapper{
    grid-template-columns: 1fr;
}   
#hero .hero-headings{
    top:30%;
    width: 95%;
} 
#hero .hero-headings h2{
    font-size: 1.2rem;
}
#hero .hero-headings h3{
    font-size: 1rem;
}
.holder{
    flex-direction: column;
}
.left-holder,.right-holder{
    width: 85%;
    margin: auto;
    /* padding:1rem; */
}

.form input{
    width: 200px;
}
.wrapper,.service-wrapper{
    width: 100%;
}
.navbar{
    flex-direction: column;
}
.nav-links{
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left:-100%
}
.close {
    display: block;
    z-index: 11;
}
nav .cta{
    display: none;
}
.logo{
    height: 80px;
    z-index: 11;
}
.nav-links.active{
    width: 100%;
left:0;
z-index: 10;
background: var(--mist);
}
.footer-container{
    flex-direction: column;
}
.mobileContent button{
    width: 100px;
    height: max-content;
    padding: .5rem;
    border-radius: 30px;
    border:2px solid var(--accent-p);
    background: transparent;
    margin: 25px auto;
}
 .red{
    margin:-50px auto 25px auto;
}
.mob{
    display: block;
}
.dropdown{
    display: none;
}
#all-services .all-services{
    flex-wrap: wrap;
}
#packages .all-services{
    grid-template-columns: 1fr;
}
.content-wrap{
flex-direction: column;
}
.content-left,.content-right{
    width: 85%;
    align-items: flex-start;
    padding:1rem .5rem;
    text-align: left;
}
.content-right{
    order:1;
}
#benefits h2{
    width: 85%;
}
.benefits-wrap{
    grid-template-columns: 1fr;
}
#benefits p{
    width: 85%;
}
.accordion{
    width: 100%;
    /* padding: 2rem; */
}
.accordion button{
    font-size: 1.1rem!important;
}
#faqs .container{
    padding: 2rem;
}
.offerings{
    flex-direction: column;
}
.img-hold{
    width: auto;
}
.logo img{
    width: 100%;
    height: auto;
}
form{
    width: 85%;
}

}