/*Lead Page Section*/

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
 }

 .header{
    min-height: 60vh;
    width: 100%;
    /*sets the background color to grey & background image*/
    background-image: linear-gradient(rgba(5, 4, 4, 0.7), rgba(4,9,30,0.7)); 
    background-image: url(Images/NYskyline.png);
    background-color: center;
    background-size: cover;
    position: relative;
}

/*-------BEGIN NAV BAR--------*/

nav img{
   width: 60px;
   padding: 10px;
   padding-top: 30px;
 }
 
 nav ul{
   width: 97%;/*-nav bar position-*/
   list-style: none;
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
 
 nav li{
   height: 30px;
 }
 
 nav a{
   height: 100%;
   padding: 0px 20px;/*-sidebar height & width-*/
   text-decoration: none;
   display: flex;
   align-items: center;
   color: white;
   font-weight: 600;
 }
 
 .sidebar a:hover{
   background-color:  rgba(8, 232, 221, 0.138);
 }
 
 
 .nav-links li{
   color: rgb(255, 255, 254);
   text-decoration: none;
   font-size: 1rem;
 }
 
 .nav-links li:after{
   content: '';
   width: 0%;
   height: 3px;
   background: #f7bd00;
   display: block;
   margin: auto;
   transition: 0.5s;
 }
 
 .nav-links li:hover::after{
   width: 70%; /*-width of orange line-*/
 }
 
 /*-logo - first element from left-*/
 nav li:first-child{
   margin-right: auto;
 }
 
 .sidebar{
   position: fixed;
   top: 0;
   right: 0;
   height: 100vh;
   width: 250px;
   z-index: 999;
   display: none;
   flex-direction:column;
   align-items:flex-start;
   justify-content: flex-start;
   background-color: rgba(8, 232, 222, 0.7);
   backdrop-filter: blur(10px);
   box-shadow: -5px 0 10px rgba(55, 55, 55, 0.9)
 }
 
 .sidebar li{
   width: 100%;
   padding-top: 30px;
 }
 
 .sidebar a{
   width: 100%;
}
 
 /*-change color of menu & close button-*/
 svg {
   fill: white;
 }
 
 /*-default position of menu-*/
 .menu-button{
   display: none;
 }
 
 @media (max-width: 760px){
   .hideOnMobile{
     display: none;
   }
 
   .menu-button{
     display: block;
   }
 
   .nav-links li{
     color: rgb(255, 255, 254);
     text-decoration: none;
     font-size: 1rem;
   }
 
   .nav-links li:after{
     content: '';
     width: 0%;
     height: 3px;
     background:none;
     display: block;
     margin: auto;
     transition: 0.5s;
   }
   
   .nav-links li:hover::after{
     width: 70%;
   }
 }
 
 @media (max-width:400px){
   .sidebar{
     width: 50%;
   }
 }

@media(max-height: 501px){
   .header{
      min-height: 600vh, 200%;
      width: 100%;
      /*sets the background color to grey & background image*/
      background-image: linear-gradient(rgba(5, 4, 4, 0.7), rgba(4,9,30,0.7)); 
      background-image: url(Images/NYskyline.png);
      background-color: center;
      background-size: cover;
      position: relative;
  }
}

/*----END NAV BAR----*/

/*Main Body*/

.text-box{
   width: 90%;
   color: rgba(245, 241, 241, 0.733);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   text-align: center;
}


.text-box h1{
   font-size: 2rem;
}

.text-box h3{
    font-size: 2rem;
   }

.text-box p{
   margin: 10px 0 40px;
   font-size: 1.2rem;
   color: rgb(255, 252, 252);
}

@media(max-width: 760px){

   .text-box h1{
      font-size: 1.4rem;
   }
  
  .text-box p{
     margin: 10px 0 40px;
     font-size: 0.4rem;
     color: rgb(255, 252, 252);
  }
}

@media(max-width: 320px){

   .text-box h1{
      font-size: 1.2rem;
   }
  
  .text-box p{
     margin: 10px 0 40rem;
     font-size: 1rem;
     color: rgb(255, 252, 252);
  }
}

/*-Button Setting -*/

.hero-btn{
   display: inline-block;
   text-decoration: none;
   color: white;
   border: 1px solid white;
   padding: 12px 34px;
   font-size: 1.5rem;
   background: #08e8de;
   position: relative;
   cursor: pointer;
}

@media(max-width: 320px){
   .hero-btn{
      font-size: 0.69rem;
   }
}

.hero-btn:hover{
   border: 1px solid #faf8f8;
   background-color: #08e8de;
   transition: 1s;
}


/*adjusting font size for smaller screens*/

@media(max-width: 1100px){
  
   .contact-left{
      width: 80vw;
   }

   .contact-right{
      display: none;
   }

}

/*-About Us Background-*/




/*--------Why Us Section - orange background---------*/

.why-background {
   width: 100%;
   margin: auto;
   background-color: #08e8de;
   background-position: center;
   padding-bottom: 50px;
}


.why {
   width: 80%;
   margin: auto;
   background-color: #08e8de;
   text-align: center;
   padding-top: 100px;
   padding-bottom: 50px;
}

/*-Font Size-*/

h1{
   font-size: 1.5rem;
   font-weight: 600;
   text-align: center;
}

h3{
   text-align: center;
   font-size: 1.2rem;
   font-weight: 600;
   margin: 10px 0;
}

p{
   color: rgb(70, 65, 65);
   font-size: 1rem;
   font-weight: 400;
   line-height: 28px;
   padding-top: 10px;
   padding-bottom: 50px;
}

/*aligns all elements into one row*/
.row{
   margin-top: 0%;
   display: flex;
   justify-content: space-between;
}


/*about-us-*/
.about-us-background {
   width: 100%;
   margin: auto;
   background-color: #08e8de;
   background-position: center;
   padding-bottom: 20px;
}

/*-Begin To remove-*/
.about-us {
   width: 80%;
   margin: auto;
   background-color: #08e8de;
   text-align: justify;
   padding-top: 100px;
   padding-bottom: 20px;
}

.line-spacing{
   margin: 0px;
}

.about-us-col{
   flex-basis: 48%;
   padding: 30px 2px;
   padding-left: 100px;
   text-align: justify;
}

@media(max-width: 320px){
   .about-us{
      text-align: left;
   }
}

.about-us-col img{
max-width: 80%;
}

.about-us-col ul li{
   color: rgb(70, 65, 65);
   font-size: 2.5rem;
   font-weight: 300;
}
/*-End To remove-*/

/*- supercede
.about-us{
   width: 80%;
   margin: auto;
   padding-top: 0px;
   padding-bottom: 100px;
   padding-left: 20px;
   padding-right: 20px;
}
-*/

/*why Column Setting Settings*/
.why-col{
   flex-basis: 30%;
   background: white;
   border-radius:10px;
   margin-bottom: 5%;
   padding: 20px 12px;
   box-sizing: border-box; 
   transition: 0.5s /*transition for the shadow*/
}

/*box shadow*/
.why-col:hover{
   box-shadow:0 0 20px 0px rgba(0,0,0,0.5);
}

/*boxes align vertically*/
@media(max-width: 1100px){
   .row{flex-direction: column;
   }
}

/*--------------offices-----------*/

.offices-background{
   width: 100%;
   margin: auto;
   background-color:  #08e8de;
   background-position: center;
   padding-bottom: 50px;
}

.offices{
   width: 80%;
   margin: auto;
   background-color: #08e8de;
   text-align: center;
   padding-top: 50px;
   
}

.offices-col{
   flex-basis: 32%; /*toggles the width size*/
   border-radius: 10px; /*rounds the corners*/
   margin-bottom: 25px;
   position: relative;
   overflow: hidden;
}



.offices h1{
   color: black;
}

.offices p{
   color: black;
}

.offices-col img{
   width: 100%;
   max-height:360px; /*WLA - defined height to be all equal*/
   display: block;/*48:24 displays the rounded corners at the bottom of the image*/
}


.layer{
   background: transparent;
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   transition: 0.5s;
}

.layer:hover{
   background: #dedcd982;
}

/*Text positioning - 47:04*/
.layer h3{
   width: 100%;
   font-weight: 500;
   color: #fff;
   font-size: 1.5rem;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   position: absolute;
   transition: 0.5s;
}

.layer:hover h3{
   bottom: 40%;
   opacity: 1;
}


/*---------------Address---------------*/

.city{
   width: 80%;
   margin: auto;
   text-align: center;
   padding-top: 100px;
}

.city-col{
   flex-basis: 31%; /*toggles the width size*/
   border-radius: 10px; /*rounds the corners*/
   margin-bottom: 0%;
   text-align: center;
}

.city-col img{
   width: 100%;
   max-height: 360px; 
   border-radius: 20px;
}
.city-col p{
   padding-left: 0%;
}

.city-col h3{
   margin-top: 16px;
   margin-bottom: 15px;
}

.center{
   max-width: 50%;
   margin: auto;
   text-align: justify;
   padding-top: 100px;
}

/*-Begin get started today-*/
.get-started{
   width: 80%;
   margin: auto;
   background-position: center;
   padding-top: 0px;
   padding-bottom: 25px;
   padding-left: 20px;
   padding-right: 20px;
}

.line-spacing{
   margin: 0px;
}

.get-started-col{
   flex-basis: 48%;
   padding: 30px 2px;
   padding-left: 20px;
}

.get-started-col h1{
   text-align: left;
}

.get-started-col p{
   text-align: justify;
}

.get-started-col img{
   width: 500px;
   }

@media(max-width: 1300px){
   
   .get-started-col{
      flex-basis: 48%;
      background-position: center;
   }

   .get-started-col h1{
      text-align: left;
   }

   .get-started-col p{
      text-align: justify;
   }
   
   .get-started-col img{
      display: none;
   }

   .get-started-col {
      margin-right: 0%;
   }
}

/*-General small screen setting-*/
@media(max-width: 320px){
   .get-started-col p{
      text-align: left;
   }
}

.get-started ul li{
   color: rgb(70, 65, 65);
   font-size: 2.5rem;
   font-weight: 300;
}

/*-end get started today-*/

/*-Begin Executive Profile-*/

.executive-profile{
   width: 80%;
   margin: auto;
   padding-top: 50px;
   padding-bottom: 50px;
   background-color: #08e8de;
}

.line-spacing{
   margin: 0px;
}

.executive-profile-col{
   flex-basis: 48%;
   padding: 0px 0px;
   padding-left: 5%;
   padding-right: 5%;
   background-position: center;
   text-align: justify;
}

@media(max-width: 320px){
   .executive-profile-col p{
      text-align: left;
      padding-bottom: 0px;
   }
}

.executive-profile-col h1{
   text-align: left;
}

.executive-profile-col img{
   max-width: 500px;
   }

   @media(max-width: 760px){
      .executive-profile img{
         max-width: 100%;
      }
   }

.executive-profile ul li{
   color: rgb(70, 65, 65);
   font-size: 2.5rem;
   font-weight: 300;
}

@media (max-width: 1300px){

   .executive-profile{
      width: 80%;
      margin: auto;
      padding-top: 25px;
      padding-bottom: 25px;
      background-color: #08e8de;
   }

   .executive-profile-col{
      flex-basis: 48%;
      padding: 25px 0px;
      padding-left: 5%;
      padding-right: 5%;
   }

   .executive-profile-col h1{
      text-align: left;
   }

   .get-started-col img{
      max-width: 100%;
   }

   .get-started-col {
      margin-right: 12%;
   }

   .row{flex-direction: column;
   }

}

/*-End Executive Profile-*/

.blank{
   padding-bottom: 50px;
}

/*-----why-choose-us-----*/

.why-choose-us-background{
   width: 80%;
   margin: auto;
   background-color:  white;
   background-position: center;
   text-align: center;
   padding-top: 100px;
   padding-bottom: 0px;
}

.why-choose-us{
   width: 90%;
   margin: auto;
   padding-top: 0px;
   text-align: justify;  
   background-color: blue(47, 0, 255); 
}

.why-choose-us-col{
   flex-basis: 30%;
   border-radius: 10px;
   margin-bottom: 5%;
   text-align: center;
   background-color: rgb(225, 225, 225);
   padding: 0px;
   padding-right: 27px;
   padding-bottom: 20px;
   cursor: text;
   display: flex;
}



.why-choose-us-col h3{
   text-align: center;
}

.why-choose-us-col p{
   text-align: justify;
}

@media(max-width: 320px){
   .why-choose-us-col p{
      text-align: left;
   }
}

.why-choose-us-col img{

      height: 80px;
      margin-left: 5px;
      margin-right: 30px;
      border-radius: 50%;  /* changes the image to circle*/  
}

.why-choose-us-col h3{
   margin-top: 25px;
   text-align: middle;
   font-size: 1.rem;
}

.why-choose-us-col p{
   padding: 0;
}

.why-choose-us-col .fa{ /* color of stars. note that there is a . before fa*/
   color: #08e8de;
}

@media(max-width: 760px){
   .why-choose-us-col img{
      .whychooseus-col img{
         margin-left: 0px;
         margin-right: 15px;
      }
   }
}

/*------End why-choose-us---------*/


/*-----testimonialn 55:00-----*/

.testimonial{
   width: 80%;
   margin: auto;
   padding-top: 100px;
   text-align: center;   
}

.testimonial-col{
   flex-basis: 40%;
   border-radius: 10px;
   margin-bottom: 5%;
   text-align: left;
   background-color: #f0c4bf8f;
   padding: 25px;
   cursor: pointer;
   display: flex;
}

/*57:30*/
.testimonial-col img{

      height: 80px;
      margin-left: 5px;
      margin-right: 30px;
      border-radius: 50%;  /* changes the image to circle*/  
}

.testimonial-col p{
   padding: 0;
}

.testimonial-col h3{
   margin-top: 15px;
   text-align: left;
}

.testimonial-col .fa{ /* color of stars. note that there is a . before fa*/
   color: #08e8de;
}

@media(max-width: 760px){
   .testimonial-col img{
      .testimonial-col img{
         margin-left: 0px;
         margin-right: 15px;
      }
   }
}

/*--bottom grey section---*/
.cta{
   margin: 0px auto;
   width: 100%;
   background-color: rgb(90, 90, 90);
   background-image: linear-gradient(rgba(0, 0, 0, 0.222),rgba(0,0,0,0.222)), url(); /*-redundant-*/
   background-position: center;
   background-size: cover;
   text-align: center;
   padding: 100px 0;
   padding-bottom: 0px;
}

/*1:04:*/
.cta h1{
   color:#ffffff;
   margin-bottom: 40px;
   padding: 0;
}





@media(max-width: 760px){
   .cta h1{
      font-size: 1.5rem;
   }  
}


/*------footer------*/

.footer{
   width: 100%;
   text-align: center;
   padding: 0px 0;
}

.footer h4{
   margin-bottom: 25px;
   margin-top: 20px;
   font-weight: 600;
   color: white;
}

.footer p{
   font-size: 1rem;
   color: white;
}


/*-----useful links----*/
.cta ul li a{
   color: white;
}

/*block horizonal alignment*/
.useful-links ul li{
   list-style: none;
   display: inline-block;
   padding: 8px 12px;
   position: relative;
}

/*--faq bold--*/
.footer li{
   color: white;
   font: bold;
   font-weight: 600;
}


.icons .fa{
   color:white;
   margin: 0 13px;
   cursor: pointer;
   padding: 0px 0;
}

/*----------why us page------------*/

.sub-header{
   height: 50vh;
   width: 100%;

   /*--------background image added below----------*/
   background-image: linear-gradient(rgba(4, 9, 30, 0.5),rgba(4, 9, 30, 0.5)),url(images/dininghall.jpg);
   background-position: center;
   background-size: cover;
   text-align: center;
   color: white;
}

.sub-header h1{
   margin-top: 30px;
}

/*-----------why us 5:34-----------*/
.why-us{
   width: 80%;
   margin: auto;
   padding-top: 80px;
   padding-bottom: 0px;
}

.why-col{
   flex-basis: 48%;
   padding: 30px 2px;
   text-align: left;
}

.why-col img{
   width: 100%; 
}

.why-col h1{
   padding-top: 0;
   }

.why-col p{
   padding: 25px 0 25px;
   font-size: 1.5rem;
}

.orange-btn{
   border: 1px solid #08e8de;
   background: transparent;
   color: #08e8de;
}

.orange-btn:hover{
   color:#fff
}


/*------Contact Us Page---------*/
.contact-container{
   height: 80svh;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   padding: 5%;
   
}

.contact-left{
   display:flex;
   flex-direction: column;
   align-items: start;
   gap: 10px;
}

.contact-left-title h2{
   font-weight: 600;
   color: black;
   font: bold;
   font-size: 2rem;
   margin-bottom: 5px;
}

/*-grey underline-*/
.contact-left-title hr{
   border: none;
   width: 200px;
   height: 5px;
   background-color: Grey;
   border-radius: 10px;
   margin-bottom: 20px;
}

.contact-inputs{
   width: 300px;
   height: 50px;
   border: none;
   outline: none;
   padding-left: 25px;
   font-weight: 500;
   color: grey;
   border-radius: 25px;
}

.contact-left textarea{
   width: 280px;
   height: 140px;
   border: solid 1px;
   padding-top: 25px;
   border-radius: 25px;
   color: rgb(197, 196, 196);

}

.contact-inputs:focus{
   border: 2px solid orange;
}

.contact-inputs::placeholder{
   color:rgb(177, 177, 177);
}

.contact-left button{
   display: flex;
   align-items: center;
   padding: 15px 30px;
   font-size: 1.5rem;
   color: #fff;
   gap: 10px;
   border: none;
   border-radius: 50px;
   background: linear-gradient(270deg,#ff994f,#fa6d86);
   cursor: pointer;
}

.contact-left button img{
   height: 20px;
}

.contact-right img{
   width: 500px;
}

@media (max-width: 760px){

   .header{
      min-height: 40vh;
   }

   .contact-container{
      height: 80svh;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 5%;
   }
   
   .contact-left{
      display:flex;
      flex-direction: column;
      align-items: start;
      gap: 10px;
   }
   
   .contact-left-title h2{
      font-weight: 600;
      color: black;
      font: bold;
      font-size: 1.5rem;
      margin-bottom: 5px;
   }
   
   .contact-left-title hr{
      border: none;
      width: 245px;
      height: 5px;
      background-color: Grey;
      border-radius: 10px;
      margin-bottom: 20px;
   }
   
   .contact-inputs{
      width: 230px;
      height: 30px;
      border: none;
      outline: none;
      padding-left: 25px;
      font-weight: 500;
      color: grey;
      border-radius: 25px;
   }
   
   .contact-left textarea{
      width: 210px;
      height: 100px;
      border: solid 1px;
      padding-top: 0px;
      font-weight: 500;
      border-radius: 25px;
      color: rgb(197, 196, 196);
      }
   
   .contact-inputs:focus{
      border: 2px solid orange;
   }
   
   .contact-inputs::placeholder{
      color:rgb(177, 177, 177);
   }
   
   .contact-left button{
      display: flex;
      align-items: center;
      padding: 15px 30px;
      font-size: 1rem;
      color: #fff;
      gap: 10px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(270deg,#ff994f,#fa6d86);
      cursor: pointer;
   }
   
   .contact-left button img{
      height: 20px;
   }
   
   .contact-right img{
      width: 500px;
   }
}


@media (max-width: 360px){

   .header{
      min-height: 30vh;
   }

   .contact-container{
      height: 80svh;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
   
   .contact-left{
      display:flex;
      flex-direction: column;
      align-items: start;
      gap: 10px;
   }
   
   .contact-left-title h2{
      font-weight: 600;
      color: black;
      font: bold;
      font-size: 1.2rem;
      margin-bottom: 5px;
   }
   
   .contact-left-title hr{
      border: none;
      width: 245px;
      height: 5px;
      background-color: Grey;
      border-radius: 10px;
      margin-bottom: 20px;
   }
   
   .contact-inputs{
      width: 230px;
      height: 30px;
      border: none;
      outline: none;
      padding-left: 25px;
      font-weight: 500;
      color: grey;
      border-radius: 25px;
   }
   
   .contact-left textarea{
      width: 210px;
      height: 100px;
      border: solid 1px;
      padding-top: 25px;
      font-weight: 500;
      border-radius: 25px;
      color: rgb(188, 188, 188);
      }
   
   .contact-inputs:focus{
      border: 2px solid orange;
   }
   
   .contact-inputs::placeholder{
      color:rgb(177, 177, 177);
   }
   
   .contact-left button{
      display: flex;
      align-items: center;
      padding: 15px 30px;
      font-size: 1rem;
      color: #fff;
      gap: 10px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(270deg,#ff994f,#fa6d86);
      cursor: pointer;
   }
   
   .contact-left button img{
      height: 20px;
   }
   
   .contact-right img{
      width: 500px;
   }
}

@media(max-height: 750px){

   .header{
      min-height: 40vh;
   }

   .contact-container{
      height: 80svh;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

   }
   
   .contact-left{
      display:flex;
      flex-direction: column;
      align-items: start;
      gap: 10px;
   }
   
   .contact-left-title h2{
      font-weight: 600;
      color: black;
      font: bold;
      font-size: 1.2rem;
      margin-bottom: 5px;
   }
   
   .contact-left-title hr{
      border: none;
      width: 245px;
      height: 5px;
      background-color: Grey;
      border-radius: 10px;
      margin-bottom: 20px;
   }
   
   .contact-inputs{
      width: 230px;
      height: 30px;
      border: none;
      outline: none;
      padding-left: 25px;
      font-weight: 500;
      color: grey;
      border-radius: 25px;
   }
   
   .contact-left textarea{
      width: 210px;
      height: 100px;
      border: solid 1px;
      padding-top: 0px;
      font-weight: 500;
      border-radius: 25px;
      color: rgb(188, 188, 188);
      }
   
   .contact-inputs:focus{
      border: 2px solid orange;
   }
   
   .contact-inputs::placeholder{
      color:rgb(177, 177, 177);
   }
   
   .contact-left button{
      display: flex;
      align-items: center;
      padding: 15px 30px;
      font-size: 1rem;
      color: #fff;
      gap: 10px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(270deg,#ff994f,#fa6d86);
      cursor: pointer;
   }
   
   .contact-left button img{
      height: 20px;
   }
   
   .contact-right img{
      width: 500px;
   }
}

@media (max-height: 600px){

   .text-box h1{
      font-size: 1.2rem;
   }

   .header{
      min-height: 40svh, 500px;
   }

   .hideOnMobile{
      display: none;
    }
  
    .menu-button{
      display: block;
    }

   .contact-container{
      height: 90%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 5%;

    }
   
   .contact-left{
      display:flex;
      flex-direction: column;
      align-items: start;
      gap: 10px;
   }
   
   .contact-left-title h2{
      font-weight: 600;
      color: black;
      font: bold;
      font-size: 1.2rem;
      margin-bottom: 5px;
   }
   
   .contact-left-title hr{
      border: none;
      width: 245px;
      height: 5px;
      background-color: Grey;
      border-radius: 10px;
      margin-bottom: 20px;
   }
   
   .contact-inputs{
      width: 230px;
      height: 30px;
      border: none;
      outline: none;
      padding-left: 25px;
      font-weight: 500;
      color: grey;
      border-radius: 25px;
   }
   
   .contact-left textarea{
      width: 210px;
      height: 100px;
      border: solid, 1px;
      padding-top: 25px;
      font-weight: 500;
      border-radius: 25px;
      color: rgb(188, 188, 188);
      }
   
   .contact-inputs:focus{
      border: 2px solid orange;
   }
   
   .contact-inputs::placeholder{
      color:rgb(177, 177, 177);
   }
   
   .contact-left button{
      display: flex;
      align-items: center;
      padding: 15px 30px;
      font-size: 1rem;
      color: #fff;
      gap: 10px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(270deg,#ff994f,#fa6d86);
      cursor: pointer;
   }
   
   .contact-left button img{
      height: 20px;
   }
   
   .contact-right img{
      width: 500px;
   }
}

@media (max-height: 439px){

   .text-box{
      display: none;
   }

   .header{
      min-height: 50svh, 800px;
   }

   .hideOnMobile{
      display: none;
    }
  
    .menu-button{
      display: block;
    }

   .contact-container{
      height: 90%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 5%;

    }
   
   .contact-left{
      display:flex;
      flex-direction: column;
      align-items: start;
      gap: 10px;
   }
   
   .contact-left-title h2{
      font-weight: 600;
      color: black;
      font: bold;
      font-size: 1.2rem;
      margin-bottom: 5px;
   }
   
   .contact-left-title hr{
      border: none;
      width: 245px;
      height: 5px;
      background-color: Grey;
      border-radius: 10px;
      margin-bottom: 20px;
   }
   
   .contact-inputs{
      width: 230px;
      height: 30px;
      border: none;
      outline: none;
      padding-left: 25px;
      font-weight: 500;
      color: grey;
      border-radius: 25px;
   }
   
   .contact-left textarea{
      width: 210px;
      height: 100px;
      border: solid, 1px;
      padding-top: 25px;
      font-weight: 500;
      border-radius: 25px;
      color: rgb(188, 188, 188);
      }
   
   .contact-inputs:focus{
      border: 2px solid orange;
   }
   
   .contact-inputs::placeholder{
      color:rgb(177, 177, 177);
   }
   
   .contact-left button{
      display: flex;
      align-items: center;
      padding: 15px 30px;
      font-size: 1rem;
      color: #fff;
      gap: 10px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(270deg,#ff994f,#fa6d86);
      cursor: pointer;
   }
   
   .contact-left button img{
      height: 20px;
   }
   
   .contact-right img{
      width: 500px;
   }
}

 /*------End Contact US---------*/

 /*------Contact Us Page - REMOVE---------*/
 .container {
   width: 50%;
   margin: 50px auto;
   background-color: #fff;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   text-align: left;
 }
 
 form {
   display: flex;
   flex-direction: column;
 }
 
 label,
 input,
 textarea {
   margin-bottom: 10px;
 }
 
 input[type="text"],
 input[type="email"],
 textarea {
   padding: 8px;
   border-radius: 30px;
   border: 1px solid #ccc;
 }


 textarea#message {
   padding: 8px;
   border-radius: 3px;
   border: 1px solid #ccc;
   height: 200px;
   resize: vertical;

 }

 input[type="submit"] {
   padding: 10px;
   border: none;
   background-color: orange;
   color: #fff;
   cursor: pointer;
   border-radius: 3px;
 }
 
 input[type="submit"]:hover {
   background-color: rgb(255, 209, 122);
 }
 
 /*------End Contact US---------*/




 /*---- back to homepage-------*/
 .back-button-center {
   text-align: center;
}

 .back-button-center ul{
   list-style-type: none;
   font-size: 1rem;
   color: blue;
   padding-bottom: 60px;
 }
  /*---- End Not used below-------*/