/*Reset to Default*/

* {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: small;
  box-sizing: border-box;
  list-style: none;
}

#trip-body{
  overflow-y: scroll;
  overflow-x: hidden;
}

.index-page{   /*Applies to the index page only*/
  background-color: #d6d5d5;
}

#trip-body a {
  text-decoration: none;
}

/*Declaring variables*/

:root {
  --trip-blue: rgb(27, 177, 169);
  --trip-green: rgba(55, 87, 29, 0.893);
  --trip-orange: orange;

  /*Set 1 fonts*/
  --trip-body-font: "Hind", sans-serif;
  --trip-heading-font: "Red Hat Text", sans-serif;
  --trip-button-font: "Encode Sans SC", sans-serif;
}

/*======================================================================*/
/*====================== NAVIGATION BAR STYLING  =======================*/
/*======================================================================*/

.notice-box{
  display: flex;
  min-height: 5vh;
  align-items: center;
  justify-content: center;
  background-color: rgb(253, 253, 253);
}

.notice-box p{
  font-size: 1rem;
  font-family: var(--trip-button-font);
  color: rgb(45, 161, 165);
  font-weight: 500;
  margin: 0;
}

nav{
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: rgb(27, 177, 169);
  font-family: var(--trip-button-font);
}

nav .logo img{
  max-width: 10rem;
}

nav .logo img:hover{
  max-width: 4.2rem;
}

.nav-links{
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin: 0;
}

.nav-links li{
  list-style: none;
}

.nav-links a{
  color: #fff;
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 12px;
  text-align: center;
}

.nav-links a:hover{
  color: var(--trip-orange);
  transition:ease-in 0.1s ;  
}

.burger{
  display: none;
  cursor: pointer;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px;
  transition: all 0.3s ease;
}

nav .login{
  border: white 1px solid;
  border-radius: 40px;
  padding: 0.6rem 2rem;
  font-family: var(--trip-button-font);
  color: #fff;
  font-size: 1.1rem;
}

nav .login:hover{
  color: rgb(94, 236, 255);
  border-color: rgb(94, 236, 255);
  font-size: 1.13rem;
}


/*======================================================================*/
/*==========================  FOOTER STYLING  ==========================*/
/*======================================================================*/

#trip-footer {
  background-color: rgb(3, 3, 43);
  min-height: 5vh;
  min-width: fit-content;
}

#trip-footer{
  padding: 5rem 4rem;
}

#trip-footer .links-title{
  color: var(--trip-orange);
  font-size: 1.2rem;
}

#trip-footer .separated-links{
  display: flex;
  flex-direction: row;
}

#trip-footer .links-group{
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 0;
}

#trip-footer .links-group li{
  padding: 0.8rem 0rem;
}

#trip-footer a{
  color: var(--trip-blue);
}

#trip-footer .links-group li img{
  width: 25%;
}

#trip-footer .contact-details{
color: #a8a7a7;
margin: 2rem 0rem 0rem 0rem;
}
/*======================================================================*/
/*==========================  CUSTOM TOOLS  ============================*/
/*======================================================================*/

/* ---General Button--- */

.custom-button {
  padding: 0.8rem 2rem;
  border: 0.1rem solid var(--trip-orange);
  border-radius: 40px;
  width: fit-content;
  text-align: center;
  max-height: 4rem;
  font-weight: 500;
  font-family: var(--trip-button-font);
  color: var(--trip-orange);
  font-size: 1rem;
  letter-spacing: 0.2rem;
}
.custom-button:hover {
  background-color: rgba(216, 216, 216, 0.438);
  color: var(--trip-orange);
  font-weight: 900;
}


/*======================================================================*/
/*======================== HOME PAGE STYLING  ==========================*/
/*======================================================================*/

/*---Section-1-Landing page---*/

#index-main {
  padding: 0rem;
  background-color: rgb(255, 254, 254);
  background-image: url(/Assets/Front1-01.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

#home-landing {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#home-landing .platform-text {
  padding-top: 4rem;
  padding-bottom: 4rem;
  align-self: center;
  font-size: 8rem;
  font-family: var(--trip-heading-font);
  font-style: bold;
  color: rgb(236, 235, 235);
  font-weight: 600;
  text-align: center;
  
}

#home-landing .platform-text span {
  align-self: center;
  font-size: 8rem;
  font-family: var(--trip-heading-font);
  color: var(--trip-orange);
  font-weight: 600;
}

#home-landing .pull-text{
  background-color: #4ccde088;
  margin-left: 50rem;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  align-self: flex-end;
}
 
#home-landing h3{
  font-size: 1.5 rem;
  font-family: var(--trip-heading-font);
  color: rgb(17, 14, 1);
  font-weight: 600;
  margin: 4rem 5rem 2rem 5rem;
}

#home-landing h4{
  font-size: 1.2rem;
  font-family: var(--trip-heading-font);
  color: rgb(17, 14, 1);
  font-weight: 600;
  margin: 2rem 5rem 4rem 5rem;

}
 

#home-landing .custom-button {
  text-align: center;
  margin: 3rem;
  color: #fff;
  background-color: rgb(27, 177, 169);
  border-color: white;
  border-width: 2px;
}

/*---Section-2-Services---*/

#services-section{
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
}


#services-section .intro-text{
align-self: center;
margin: 8rem 0rem 1rem 0rem;
font-family: var(--trip-heading-font);
font-size: 3.5rem;
color: var(--trip-green);
font-weight:bolder;

}

#services-section .service-items-group{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 3rem 0rem;
}

#services-section img{
  width: 40%;
}

#services-section .non-indented-group {
 padding-right: 40%;
 margin-left: 3rem;
}

#services-section .indented-group {
padding-left: 40%;
margin-right: 3rem;
}

#services-section .service-items-group .text-group{
margin: 0rem 3rem;
}


#services-section .service-items-group h1{
  font-family: var(--trip-heading-font);
  font-size: 3rem;
  font-weight: bold;
  color: rgb(27, 177, 169);
}

#services-section .service-items-group h3{
  font-family: var(--trip-body-font);
  font-size: 1.2rem;
  font-weight: bold;
  padding-right: 15%;
  margin: 1rem 0rem 2rem 0rem;
  color: rgb(87, 87, 87);
  text-rendering: optimizeLegibility;
}

#services-section .non-indented-group a {
  text-align: center;
  margin-top: 1rem;
  color: #fff;
  background-color: var(--trip-orange);
}

#services-section .indented-group a {
  text-align: center;
  margin-top: 1rem;
  color: #fff;
  background-color: var(--trip-orange);
}

/*----------Section-3-About Us-----------*/

/*Brand subsection*/

#about-section .brand{
  background-image: url("/Assets/pexels-sebastian-arie-voortman-165505.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
  padding: 3rem;
  margin: 4rem 0rem;
}

#about-section .brand h2{
  font-family: var(--trip-heading-font);
  color: white;
  font-size: 4rem;
  font-weight: bolder;
  margin: 3rem 0rem 4rem 0rem;
}
#about-section .brand-info-group{
  display: flex;
  flex-direction: row;
  align-items: center;
}

#about-section .brand img{
width:50%;
}

#about-section .brand-texts{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .brand p{
font-family: var(--trip-body-font);
font-size: 1.2rem;
color: #fff;
}

#about-section .brand .custom-button{
 border-color: #fff;
 color: #fff;
 margin: 1rem 0rem;
}

/*Delivery/Anemities Subsection*/

#about-section .delivery{
margin: 8rem 0rem 8rem 0rem;
}

#about-section .delivery h2{
font-family: var(--trip-body-font);
font-size: 3.5rem;
text-align: center;
margin: 3rem 0rem 4rem 0rem;
color: rgb(27, 177, 169);
font-weight: 900;
}

#about-section .delivery p{
  font-family: var(--trip-heading-font);
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem 0rem 3rem 0rem;
  font-weight: 500;
  padding: 0rem 30%;
  color: rgb(87, 87, 87);
}

#about-section .delivery .amenities{
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 5rem 0rem 0rem 0rem;
}

#about-section .delivery .amenities .amenity-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .delivery .amenities img{
  width: 50%;
}

#about-section .delivery .amenities h3{
  font-family: var(--trip-heading-font);
  font-size: 1.8rem;
  margin: 1.5rem 0rem;
  color: var(--trip-green);
}

/*Partners subsection*/

#about-section .partners{
  margin: 3rem 0rem;
background-color: #fff;
padding: 6rem 0rem;
}

#about-section .partners h2{
  text-align: center;
  color: var(--trip-orange);
  margin: 0rem 0rem 8rem 0rem;
  font-family: var(--trip-heading-font);
  font-size: 2.5rem;
  font-weight: 700;
}

#about-section .partners .partners-logo {
  width: 8%;
  margin: 0rem 5rem;
}

/*----PARTNERS LOGO SLIDESHOW----*/
#partners .logo-slider {
  margin-top: 5rem;
  margin-bottom: 3rem;
}

#partners .logo-slider .partners-intro {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.container {
  overflow: hidden;
}

.slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;
}
.logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}
.fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*----END OF PARTNERS LOGO SLIDESHOW----*/

/*Testimonies subsection*/

#about-section .testimonies{
  margin: 6rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .testimonies h2{
  font-family: var(--trip-body-font);
font-size: 3.5rem;
text-align: center;
margin: 2rem 0rem 4rem 0rem;
color: rgb(27, 177, 169);
font-weight: 900;
}

#about-section .testimonies .blockquote{
  height: 10rem;
  margin: 0rem 20%;
  text-align: center;
}

#about-section .testimonies .blockquote p{
font-family: var(--trip-body-font);
font-size: 1.2rem;
}

#about-section .testimonies .blockquote .blockquote-footer cite{
  display: block;
}

#about-section .testimonies .custom-button{
margin: 3rem;
color: #fff;
background-color: rgb(27, 177, 169);
border-color: white;
border-width: 2px;
align-self: flex-end;
margin-right: 10%;
}


/*======================================================================*/
/*======================= BUSINESS PAGE  STYLING =======================*/
/*======================================================================*/

#business-main {
  padding: 2rem 0rem 0rem 0rem;
}

/*------- Intro section -------*/

#business-main .intro-section{
  background-image: url(/Assets/business-background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
}

#business-main .intro-section h1{
  font-family: var(--trip-heading-font);
  color: var(--trip-blue);  
  align-self: center;
  margin: 30rem 0rem 2rem 0rem;
  font-size: 2.5rem;
  font-weight: 550;
}

#business-main .intro-section span{
  color: rgb(117, 5, 67);
  font-size: 2.5rem;
  font-weight: 550;
}

/*------- Bookings section -------*/

#business-main .Bookings{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #c9c9c9;
}

#business-main .Bookings h3{
  margin: 5rem 0rem 2rem 0rem;
  font-size: 3rem;
  font-family: var(--trip-heading-font);
  font-weight: 700;
  color: rgb(18, 3, 105);
}

#business-main .Bookings .form-inputs{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#business-main .Bookings .form-inputs .form-divider{
  margin: 2rem 1rem;
  width: 100%;
}

#business-main .Bookings .custom-button{
  text-align: center;
  margin: 1rem 5rem 6rem 5rem;
  color: #fff;
  background-color: rgb(27, 177, 169);
  border: none;
  border-radius: 10px;
  width: 20%;
}

#business-main .Bookings .custom-button:hover{
  width: 20.5%;
}
/*------- Join-us section -------*/

#business-main .join-us{
  background-color: var(--trip-orange);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#business-main .join-us h4{
color: #fff;
font-size: 4.5rem;
margin: 5rem 0rem 2rem 0rem;
font-family: var(--trip-heading-font);
font-weight: 600;
}

#business-main .join-us p{
font-size: 1.3rem;
text-align: center;
margin: 1rem 18%;
font-family: var(--trip-body-font);
color: rgb(49, 49, 49);
font-weight: 500;
}

#business-main .join-us .custom-button{
  border-color: #fff;
  color: #fff;
  margin: 1rem 0rem 4rem 0rem;
}

#business-main .join-us .custom-button:hover{
  color: rgb(49, 49, 49);
}

/*------- Business Packages/profiles section -------*/
#business-main .biz-profiles {
  background-color: #fff;
  padding: 3rem 4rem;
  display: flex;
  flex-direction: column;
}

#business-main .biz-profiles h3{
  color: rgb(117, 5, 67);
  font-size: 3.2rem;
  font-family: var(--trip-heading-font);
  font-weight: 600;
  margin: 3rem 0rem 5rem 0rem;
  align-self: center;
}

  #business-main .biz-profiles .profiles-group{
    display: grid;
    grid-template-columns: auto auto;
    gap: 3rem;
}

  #business-main .biz-profiles .profiles-group .profile-item{
    display: flex;
    flex-direction: row;
    padding: 2rem;
    border: 1px gray solid;
    border-radius: 20px;
}

  #business-main .biz-profiles .profiles-group .profile-item img{
    width: 35%;
    margin: 0rem 2rem;
    border-radius: 15px;
}

  #business-main .biz-profiles .profiles-group .profile-item:hover{
    width: 101%;
}
  
  #business-main .biz-profiles .profiles-group .profile-item .profile-text .heading-text{
    font-size: 1.8rem;
    font-family: var(--trip-body-font);
    font-weight: 600;
}

  #business-main .biz-profiles .profiles-group .profile-item .bronze .heading-text{
    color: #CD7F32;
}
  #business-main .biz-profiles .profiles-group .profile-item .silver .heading-text{
    color:  #7a7a7a;
}

  #business-main .biz-profiles .profiles-group .profile-item .gold .heading-text{
    color: #d1b306;
}

  #business-main .biz-profiles .profiles-group .profile-item .platinum .heading-text{
    color: #969696;
}


/*------- Executive transfers section -------*/

#business-main .executive-transfers{
background-color: #c9c9c9;
margin: 0rem;
display: flex;
flex-direction: column;
align-items: center;
padding: 0rem 4rem;
}

#business-main .executive-transfers h2{
  margin: 4rem 0rem 1rem 0rem;
  font-weight: 600;

}

#business-main .executive-transfers img{
  width: 20%;
}


#business-main .executive-transfers .transfers-info-group{
display: flex;
flex-direction: row;
align-items: center ;
margin: 1rem 0rem 2rem 0rem;
}

#business-main .executive-transfers .transfers-info-group p{
 margin: 4rem;
 width: 60%;
 font-size: 1.2rem;
}

  #business-main .executive-transfers .custom-button{
    background-color: var(--trip-blue);
    border-color: #fff;
    color: #fff;
    margin: 1rem 10rem 4rem 0rem;
    align-self: flex-end;
}


/*======================================================================*/
/*========================= TOURS PAGE  STYLING  =======================*/
/*======================================================================*/

#tours-main .tours-intro-section{
  background-image: url(/Assets/pexels-julius-silver-753626.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 40vh;
  display: flex;
  flex-direction: row;
  padding: 2rem;
}

#tours-main .tours-intro-section h1{
  font-size: 8rem;
  text-align: start;
  font-family: var(--trip-heading-font);
  font-weight: 900;
  margin: auto;
  width: 50%;
  padding: 0rem 4rem 0rem 0rem;
  -webkit-text-fill-color: var(--trip-green); /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: rgb(255, 255, 255);
}

#tours-main .tours-intro-section h3{
  font-size: 4rem;
  text-align: center;
  font-family: var(--trip-heading-font);
  font-weight: 600;
  text-align: center;
  margin: auto;
  width: 50%;
  background-color: #ffffff6c;
  padding: 4rem 2rem;
color: rgb(87, 48, 5);
}

#tours-main .available-tours{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  margin: 0rem 0rem 4rem 0rem;
}

#tours-main .available-tours .card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#tours-main .available-tours .card .card-body{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#tours-main .packages h4{
  text-align: center;
  font-size: 3rem;
  font-family: var(--trip-heading-font);
  margin: 6rem 0rem 4rem 0rem;
  color: var(--trip-blue);
  font-weight: 600;
}

/*----Custom packages----*/

#tours-main .custom-tours h1{
  font-size: 2.5rem;
  color: var(--trip-green);
  font-family: var(--trip-heading-font);
  margin: 2rem 0rem 2rem 0rem;
  font-weight: 600;
}

#tours-main .custom-tours h5{
  font-size: 2rem;
  color: black;
  font-family: var(--trip-body-font);
  margin: 2rem 0rem 1rem 0rem;
  font-weight: 500;
}

#tours-main .custom-tours{
  padding: 3rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #c9c9c9;
}

#tours-main .custom-tours h3{
  margin: 5rem 0rem 2rem 0rem;
  font-size: 3rem;
  font-family: var(--trip-heading-font);
  font-weight: 700;
  color: rgb(18, 3, 105);
}

#tours-main .custom-tours .form-inputs{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#tours-main .custom-tours .form-inputs .form-divider{
  margin: 2rem 1rem;
  width: 100%;
}

#tours-main .custom-tours .custom-button{
  text-align: center;
  margin: 1rem 5rem 0rem 5rem;
  color: #fff;
  background-color: rgb(27, 177, 169);
  border: none;
  border-radius: 10px;
  width: 20%;
}

#tours-main .custom-tours .custom-button:hover{
  width: 20.5%;
}

/*======================================================================*/
/*======================== EVENTS PAGE  STYLING  =======================*/
/*======================================================================*/

#events-main .intro-events{
  background-image: url(/Assets/event-gif-2.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed  ;
  min-height: 50vh;
}

#events-main .intro-events h1{
text-align: center;
padding: 4rem 0rem 0rem 0rem;
font-size: 8rem;
font-family: var(--trip-heading-font);
font-weight: 900;
color: #e0f00a;
background-color: #bebebe86;
}

#events-main .available-events{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  margin: 0rem 0rem 4rem 0rem;
}

#events-main h4{
  text-align: center;
  font-size: 3rem;
  font-family: var(--trip-button-font);
  margin: 6rem 0rem 2rem 0rem;
  color: rgb(66, 66, 66);
  font-weight: 600;
}

#events-main h6{
  text-align: center;
  font-size: 1.5rem;
  font-family: var(--trip-body-font);
  margin: 0rem 0rem 6rem 0rem;
  color: var(--trip-blue);
  font-weight: 600;
}

#events-main .available-events .card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#events-main .available-events .card .card-body{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#events-main .suggest-event{
  display: flex;
  flex-direction: column;
  background-image: url(/Assets/event-suggestion-background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  height: 30vh;
  justify-content: center;
}

#events-main .suggest-event h3{
  text-align: center;
  margin: 2rem 0rem;
  font-size: 2rem;
  font-weight: 400;
  font-family: var(--trip-button-font);
  color: #ffffff; 
}

#events-main .suggest-event p{
  text-align: center;
  font-size: 1.3rem;
  font-family: var(--trip-body-font);
  color: #fff;
  padding: 0rem 25rem;
}

#events-main .suggest-event .custom-button{
  align-self: center;
  margin: 2rem 0rem;
}

/*======================================================================*/
/*======================= CAREERS PAGE  STYLING ========================*/
/*======================================================================*/

#careers-main{
  padding: 2rem 2rem 3rem 2rem;
}

#careers-main .careers-intro{
  background-image: url(/Assets/background-vacancies-01.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
}

#careers-main .careers-intro h1{
align-self: center;
margin: 22rem 0rem 2rem 0rem;
font-family: var(--trip-heading-font);
color: #fff;
font-size: 4rem;
}

#careers-main .vacancies .vacancy-item{
  display: grid;
 grid-template-columns: 1fr 2fr 3fr 4fr;
 align-items: center;
 padding: 4rem;
}

#careers-main .vacancies .vacancy-item img{
  width: 20%;
}

#careers-main .vacancies .vacancy-item .title {
  font-size: 1.2rem;
  font-family: var(--trip-body-font);
  font-weight: 600;
}

#careers-main .vacancies .vacancy-item .requirements .req-item{
  font-size: 1rem;
  font-family: var(--trip-body-font);
  list-style: circle;
}

#careers-main .career-oppotunities h3 {
  font-family: var(--trip-heading-font);
  text-align: center;
  font-size: 1.2rem;
  margin: 1rem 0rem;
}

#careers-main .career-oppotunities .email-link {
  font-family: var(--trip-heading-font);
  font-size: 1.5rem;
  margin: 40% 40%;
}


/*======================================================================*/
/*===================== CONTACT-US PAGE  STYLING  ======================*/
/*======================================================================*/

#contact-main .contact-form {
  padding: 3rem 6rem;
  margin-bottom: 2rem;
  min-height: 80vh;
  text-align: center;
}

#contact-main .contact-form h2 {
  text-align: center;
  font-family: var(--trip-heading-font);
  color: var(--trip-orange);
  font-size: 2rem;
  font-weight: 700;
  margin: 1rem 0rem 4rem 0rem;
}

#contact-main .contact-form h4{
  margin: 0rem 0rem 3rem 0rem;
  font-size: 1.2rem;
  font-family: var(--trip-body-font);
}

#contact-main .contact-form .form-group {
  max-width: 44vw;
}

#contact-main .contact-form .form-inputs{
  margin: 0rem 0rem 2rem 0rem;
  font-family: var(--trip-body-font);
  color: var(--trip-green);
  font-size: 1.4rem;
  font-weight: 500;
  text-align: start;
}

#contact-main .contact-form .form-label{
font-family: var(--trip-body-font);
color: rgb(58, 58, 58);
}

#contact-main .contact-form .form-control{
border-color: rgb(190, 190, 190);
margin: 0rem 0rem 1rem 0rem;
}


#contact-main .contact-form .custom-button {
  margin: 1rem 0rem 0rem 0rem;
  min-width: 40%;
  min-height: 1rem;
  background-color: var(--trip-orange);
  border-color: var(--trip-orange);
  color: #fff;
  font-size: 1.1rem;
 text-align: center;
}

#contact-main .contact-form .form-group .custom-button:hover {
  background-color: #c58b0d;
  border-color: #c58b0d;
  font-size: 1.1rem;
}

/*======================================================================*/
/*======================= FEEDBACK PAGE  STYLING  ======================*/
/*======================================================================*/

#feedback-main{
  display: flex;
  flex-direction: column;
  border: #7a7a7a 1px solid;
  border-radius: 20px;
  padding:1rem;
  align-self: center;
  margin: 10% 15% 20% 15%;
  background-color: #f7e5ab;
}

#feedback-main img{
  width: 30%;
  align-self: center;
margin: 2rem;
}

#feedback-main h2{
  align-self: center;
  margin: 1rem;
  font-size: 1.2em;
  padding: 0% 10%;
  text-align: center;
  max-width: 80%;
  font-weight: 400;
  color: var(--trip-green);
}

#feedback-main a{
  align-self: center;
  margin: 2rem;
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  background-color: var(--trip-orange);
  color: #fff;
}

/*======================================================================*/
/*========================== MEDIA QUERIES =============================*/
/*======================================================================*/


/*                       -START OF MEDIA QUERIES-                        */


/*======================================================================*/
/*========================== MEDIA QUERIES =============================*/
/*======================================================================*/

@media screen and (max-width: 1200px) { /*....Large screens....*/

  #home-landing {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    padding: 0rem;
  }
 
#home-landing .pull-text {
  padding: 0rem;
  font-size: 1.1rem;
  align-self: flex-end;
  width: 60%;
  background-color: #4ccde088;
  margin-left: 60rem;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  }
 
#home-landing h3{
  font-size: 1.5 rem;
  font-family: var(--trip-heading-font);
  color: rgb(17, 14, 1);
  font-weight: 600;
  margin: 4rem 5rem 2rem 5rem;
}

#home-landing h4{
  font-size: 1.2rem;
  font-family: var(--trip-heading-font);
  color: rgb(17, 14, 1);
  font-weight: 600;
  margin: 2rem 5rem 4rem 5rem;

}

#contact-main .contact-form{
  min-height: auto;
}

}

@media screen and (max-width: 980px) { /*....Desktops and laptops....*/

/*=========================== WHOLE PAGE MEDIA QUERIES ===========================*/

  html{
    overflow-x: hidden;
    width:100%;
  }
  
  body{
       overflow-x: hidden;
    width:100%;
    position: relative;
  }

  

/*=========================== NAVIGATION MEDIA QUERIES ===========================*/

.nav-links{
  width: 60%;
}

/*============================== FOOTER MEDIA QUERIES =============================*/

#trip-footer .links-group li img{
  width: 30%;
}

/*========================= INDEX/HOME BODY MEDIA QUERIES =========================*/

#home-landing {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  padding: 0rem;
}

  
#home-landing .pull-text {
  padding: 0rem;
  font-size: 1.1rem;
  align-self: flex-end;
  width: 60%;
  }
   
/*---Section-1-Landing page---*/

#index-main {
  min-height: 85vh;
  padding: 0rem;
  background-color: rgb(255, 254, 254);
  background-image: url(/Assets/Front1-01.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

#home-landing {
  display: flex;
  flex-direction: column;
  padding: 0rem;
}

#home-landing .pull-text {
  padding: 0rem;
  font-size: 1.1rem;
  align-self: flex-end;
  width: 60%;
  }


#home-landing .platform-text span {
  align-self: center;
  font-size: 8rem;
  font-family: var(--trip-heading-font);
  color: var(--trip-orange);
  font-weight: 600;
}

#home-landing .pull-text{
  background-color: #4ccde088;
  margin-left: 60rem;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
}
 
#home-landing h3{
  font-size: 1.5 rem;
  font-family: var(--trip-heading-font);
  color: rgb(17, 14, 1);
  font-weight: 600;
  margin: 4rem 5rem 2rem 5rem;
}

#home-landing h4{
  font-size: 1.2rem;
  font-family: var(--trip-heading-font);
  color: rgb(17, 14, 1);
  font-weight: 600;
  margin: 2rem 5rem 4rem 5rem;

}
 

#home-landing .custom-button {
  text-align: center;
  margin: 3rem;
  color: #fff;
  background-color: rgb(27, 177, 169);
  border-color: white;
  border-width: 2px;
}

/*---Section-2-Services---*/

#services-section{
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  padding: 0rem 3rem;
}


#services-section .intro-text{
align-self: center;
margin: 8rem 0rem 1rem 0rem;
font-family: var(--trip-heading-font);
font-size: 3.5rem;
color: var(--trip-green);
font-weight:bolder;

}

#services-section .service-items-group{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 3rem 0rem;
}

#services-section img{
  width: 40%;
}

#services-section .non-indented-group {
 padding-right: 30%;
}

#services-section .indented-group {
padding-left: 32%;
  
}

#services-section .service-items-group .text-group{
margin: 0rem 3rem;
}


#services-section .service-items-group h1{
  font-family: var(--trip-heading-font);
  font-size: 2.5rem;
  font-weight: bold;
  color: rgb(27, 177, 169);
}

#services-section .service-items-group h3{
  font-family: var(--trip-body-font);
  font-size: 1.1rem;
  font-weight: bold;
  padding-right: 5%;
  margin: 1rem 0rem 2rem 0rem;
  color: rgb(87, 87, 87);
  text-rendering: optimizeLegibility;
}

#services-section .non-indented-group a {
  text-align: center;
  margin-top: 1rem;
  color: #fff;
  background-color: var(--trip-orange);
}

#services-section .indented-group a {
  text-align: center;
  margin-top: 1rem;
  color: #fff;
  background-color: var(--trip-orange);
}


/*----------Section-3-About Us-----------*/

/*Brand subsection*/

#about-section .brand{
  background-image: url("/Assets/pexels-sebastian-arie-voortman-165505.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
  padding: 3rem;
  margin: 4rem 0rem;
}



#about-section .brand h2{
  font-family: var(--trip-heading-font);
  color: white;
  font-size: 4rem;
  font-weight: bolder;
  margin: 3rem 0rem 4rem 0rem;
}
#about-section .brand-info-group{
  display: flex;
  flex-direction: row;
  align-items: center;
}

#about-section .brand img{
width:50%;
}

#about-section .brand-texts{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .brand p{
font-family: var(--trip-body-font);
font-size: 1.2rem;
color: #fff;
}

#about-section .brand .custom-button{
 border-color: #fff;
 color: #fff;
 margin: 1rem 0rem;
}

/*Delivery/Anemities Subsection*/

#about-section .delivery{
margin: 8rem 0rem 8rem 0rem;
}

#about-section .delivery h2{
font-family: var(--trip-body-font);
font-size: 3.5rem;
text-align: center;
margin: 3rem 0rem 4rem 0rem;
color: rgb(27, 177, 169);
font-weight: 900;
}

#about-section .delivery p{
  font-family: var(--trip-heading-font);
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem 0rem 3rem 0rem;
  font-weight: 500;
  padding: 0rem 25%;
  color: rgb(87, 87, 87);
  }

#about-section .delivery .amenities{
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 5rem 0rem 0rem 0rem;
}

#about-section .delivery .amenities .amenity-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .delivery .amenities img{
  width: 50%;
  }

#about-section .delivery .amenities h3{
  font-family: var(--trip-heading-font);
  font-size: 1.8rem;
  margin: 1.5rem 0rem;
  color: var(--trip-green);
  }

/*Partners subsection*/

#about-section .partners{
  margin: 3rem 0rem;
background-color: #fff;
padding: 6rem 0rem;
}

#about-section .partners h2{
  text-align: center;
  color: var(--trip-orange);
  margin: 0rem 0rem 8rem 0rem;
  font-family: var(--trip-heading-font);
  font-size: 2.5rem;
  font-weight: 700;
}

#about-section .partners .partners-logo {
  width: 8%;
  margin: 0% 6%;
}

/*----PARTNERS LOGO SLIDESHOW----*/
#partners .logo-slider {
  margin-top: 5rem;
  margin-bottom: 3rem;
}

#partners .logo-slider .partners-intro {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.container {
  overflow: hidden;
}

.slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;
}
.logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}
.fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*----END OF PARTNERS LOGO SLIDESHOW----*/

/*Testimonies subsection*/

#about-section .testimonies{
  margin: 6rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .testimonies h2{
  font-family: var(--trip-body-font);
font-size: 3.5rem;
text-align: center;
margin: 2rem 0rem 4rem 0rem;
color: rgb(27, 177, 169);
font-weight: 900;
}

#about-section .testimonies .blockquote{
  height: 10rem;
  margin: 0rem 20%;
  text-align: center;
}

#about-section .testimonies .blockquote p{
font-family: var(--trip-body-font);
font-size: 1.2rem;
}

#about-section .testimonies .blockquote .blockquote-footer cite{
  display: block;
}

#about-section .testimonies .custom-button{
margin: 3rem;
color: #fff;
background-color: rgb(27, 177, 169);
border-color: white;
border-width: 2px;
align-self: flex-end;
margin-right: 10%;
}

/*========================= BUSINESS BODY MEDIA QUERIES =========================*/

#business-main{
  padding: 1rem 0rem 0rem 0rem;
  margin: 0rem;
}

  #business-main .Bookings .custom-button{
    width: 40%;
  }

#business-main .join-us{
  padding: 0rem 1rem;
}

#business-main .join-us h4{
  font-size: 3.2rem;
  text-align: center;
}

#business-main .biz-profiles h3{
  padding: 0rem 1rem;
  font-size: 3rem;
}


#business-main .biz-profiles .profiles-group .profile-item{
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#business-main .biz-profiles .profiles-group .profile-item img{
  width: 60%;
  margin: 0rem 0rem;
  border-radius: 15px;
 align-self: center;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .heading-text{
  font-size: 1.5rem;
  text-align: center;
  padding: 0.5rem 0rem;
  margin: 1rem 0rem;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .benefits{
  margin: 0rem;
  font-size: 1rem;
  text-align: center;
  padding: 0rem;
}



/*=========================== TOURS BODY MEDIA QUERIES ===========================*/



#tours-main .tours-intro-section h1{
  font-size: 6rem;

}

#tours-main .tours-intro-section h3{
  font-size: 3.5rem;
}

#tours-main .packages h4{
  font-size: 3rem;
}


#tours-main .available-tours .card .card-img{
  width: 60%;
}

#tours-main .available-tours .card .card-body .card-title{
  font-size: 1rem;
}

#tours-main .available-tours .card .card-body .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#tours-main .custom-tours{
  padding: 0rem 1rem;
}

#tours-main .custom-tours h1{
  font-size: 3rem;
  text-align: center;
}

#tours-main .custom-tours .custom-button{
    width: 40%;
    padding: 1rem 0rem ; 
    font-size: 1rem;
    margin: 2rem 1rem;
    text-align: center;
  }


/*========================== EVENTS BODY MEDIA QUERIES ===========================*/


#events-main .suggest-event{
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#events-main .suggest-event h3{

  margin: 1rem 0rem;
  font-size: 1.8rem;
  font-weight: 400;
}

#events-main .suggest-event p{
  font-size: 1.2rem;
  padding: 1rem 20%;
}

#events-main .suggest-event .custom-button{
  font-size: 1rem;
  padding: 0.6rem 1rem;
  margin: 1rem 0rem;
}

/*========================== CAREERS BODY MEDIA QUERIES ==========================*/


#careers-main .careers-intro h1{
  font-size: 3rem;
  align-self: center;
  margin: 17rem 0rem 1rem 0rem;
}

#careers-main .career-oppotunities .vacancies .vacancy-item img{
  width: 50%;
}

#careers-main .career-oppotunities .vacancies .vacancy-item .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

/*=========================== CONTACT US MEDIA QUERIES ===========================*/

#contact-main .contact-form{
  padding: 0rem 2rem;
  }
  
  #contact-main .contact-form h2{
    font-size: 2.5rem;
    margin: 3rem 0rem;
  }
  
  #contact-main .contact-form .form-group {
  max-width: 65vw;
    }
  
  #contact-main .contact-form .custom-button{
      margin: 0rem 0rem 1rem 0rem;
    }
}

@media screen and (max-width: 768px) { /*....Large phones and tablets....*/
  
/*=========================== WHOLE PAGE MEDIA QUERIES ===========================*/

   html{
    overflow-x: hidden;
    width:100%;
  }
  
  body{
       overflow-x: hidden;
    width:100%;
    position: relative;
  }

/*=========================== NAVIGATION MEDIA QUERIES ===========================*/

.nav-links{
  position: absolute;
  right: 0px;
  height: 80vh;
  top: 27px;
  background-color: var(--trip-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  transform: translate(100%);
  transition: transform 0.5s ease-in;
  justify-content: space-around;
}

.login {
 margin: 1rem 0rem;
}

.nav-links li{
  opacity: 0;
}

.burger{
  display: block;
}

.nav-active{
  transform: translate(0);
}

@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1{
  transform: rotate(-45deg) translate(-5px,6px);
}

.toggle .line2{
  opacity: 0;
}

.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
}

/*============================== FOOTER MEDIA QUERIES =============================*/

#trip-footer .links-group li img{
  width: 20%;
}

/*========================= INDEX/HOME BODY MEDIA QUERIES =========================*/


#home-landing {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 0rem;
}

#home-landing .platform-text {
  margin: 2rem 0rem;
  font-size: 6rem;
}

#home-landing .platform-text span {
  font-size: 6rem;
}

#home-landing .pull-text{
  margin: 2rem 0rem 1rem 4rem;
  width: 70%;
  align-self: flex-end;
}

#home-landing .pull-text h3 {
padding: 0rem;
font-size: 1.3rem;
}

#home-landing .pull-text h4{
  padding: 0rem;
font-size: 1.1rem;
}
 
#home-landing .custom-button {
  margin: 2rem;
  font-size: 1rem;
}

#services-section {
  display: flex;
  flex-direction: column;
  margin-top: 0rem;
  padding: 0rem 1.5rem;
}

#services-section .intro-text{
font-size: 2.5rem;
text-align: center;
}

#services-section .service-items-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0rem;
}

#services-section img{
  width: 35%;
}

#services-section .non-indented-group {
 padding-right: 0%;
}

#services-section .indented-group {
padding-left: 0%;
  
}

#services-section .service-items-group .text-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0rem;
}

#services-section .service-items-group h1{
  margin-top: 0.5rem;
  font-size: 2.5rem;
}

#services-section .service-items-group h3{
  font-size: 1rem;
  font-weight:500;
  padding-right: 0%;
  margin: 0.5rem 0rem;
  padding: 0% 20%;
  text-align: center;
}

#about-section .brand{
  padding: 3rem 3rem;
}

#about-section .brand h2{
  font-size: 3rem;
  font-weight: bold;
}

#about-section .brand-info-group{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .brand img{
width:100%;
margin: 2rem 0rem;
}

#about-section .brand p{
font-size: 1rem;
margin-top: 1rem;
}

#about-section .delivery{
margin: 6rem 0rem;
}

#about-section .delivery h2{
font-size: 3rem;
margin-bottom: 1rem;
}

#about-section .delivery p{
  font-size: 1rem;
  margin: 1rem 0rem;
  font-weight: 400;
  padding: 0% 15%;
}

#about-section .delivery .amenities{
display: flex;
flex-direction: column;
margin: 3rem 0rem 0rem 0rem;
}

#about-section .delivery .amenities .amenity-item{
margin: 1rem 0rem;
}

#about-section .delivery .amenities img{
  width: 30%;
}

#about-section .delivery .amenities h3{
  font-size: 1.5rem;
  margin: 1.2rem 0rem;
}

#about-section .partners{
padding: 4rem 0rem;
}

#about-section .partners h2{
  margin: 0rem 0rem 5rem 0rem;
  font-size: 2rem;
}

#about-section .partners .partners-logo {
  width: 15%;
  margin: 0% 1.5%;
}

/*----PARTNERS LOGO SLIDESHOW----*/
#partners .logo-slider {
  margin-top: 5rem;
  margin-bottom: 3rem;
}

#partners .logo-slider .partners-intro {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.container {
  overflow: hidden;
}

.slider {
  animation: slidein 20s linear infinite;
  white-space: nowrap;
}

.logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}

.fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*----END OF PARTNERS LOGO SLIDESHOW----*/

#about-section .testimonies{
  margin: 6rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-section .testimonies h2{
font-size: 2.5rem;
margin: 2rem 0rem 4rem 0rem;
}

#about-section .testimonies .blockquote{
  height: auto;
  margin: 0rem 20%;
}

#about-section .testimonies .blockquote p{
font-size: 1.1rem;
}

#about-section .testimonies .blockquote .blockquote-footer{
  margin: 1.5rem 0rem;
}

#about-section .testimonies .blockquote .blockquote-footer cite{
  margin: 0.5rem 0rem;
  display: block;
}

#about-section .testimonies .custom-button{
margin: 4rem 0rem 0rem 0rem;
align-self: center;
margin-right: 0%;
}


/*========================= BUSINESS BODY MEDIA QUERIES =========================*/

#business-main{
  padding: 1rem 0rem 0rem 0rem;
  margin: 0rem;
}

  #business-main .Bookings .custom-button{
    width: 40%;
  }

#business-main .join-us{
  padding: 0rem 1rem;
}

#business-main .join-us h4{
  font-size: 3rem;
  text-align: center;
}

#business-main .join-us p{
  font-size: 1.2rem;
}

#business-main .join-us .custom-button{
  font-size: 0.8rem;
  max-height: fit-content;
  padding: 0.8rem 1rem;
}

#business-main .biz-profiles h3{
  padding: 0rem 1rem;
  font-size: 3rem;
}

#business-main .biz-profiles .profiles-group .profile-item{
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#business-main .biz-profiles .profiles-group .profile-item img{
  width: 55%;
  margin: 0rem 0rem;
  border-radius: 15px;
 align-self: center;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .heading-text{
  font-size: 1.5rem;
  text-align: center;
  padding: 0.5rem 0rem;
  margin: 1rem 0rem;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .benefits{
  margin: 0rem;
  font-size: 1rem;
  text-align: center;
  padding: 0rem;
}

#business-main .executive-transfers img{
  width: 35%;
}



/*=========================== TOURS BODY MEDIA QUERIES ===========================*/

#tours-main .tours-intro-section{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0rem;
  min-height: 70vh;
}

#tours-main .tours-intro-section h1{
  font-size: 5rem;
  margin: auto auto auto 1rem;
  width: auto;
  padding: 0rem 6rem 0rem 0rem;
  -webkit-text-stroke-width: 1px;
  justify-self: flex-start;
}

#tours-main .tours-intro-section h3{
  font-size: 4rem;
  text-align: center;
  margin: auto;
  width: auto;
  padding: 1rem 0.5rem;
  justify-self: flex-end;
}

#tours-main .packages h4{
  font-size: 2.5rem;
  padding: 0rem 1rem;
}

#tours-main .available-tours{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  margin: 0rem 0rem 2rem 0rem;
  
}

#tours-main .available-tours .card .card-img{
  width: 60%;
}

#tours-main .available-tours .card .card-body .card-title{
  font-size: 1rem;
}

#tours-main .available-tours .card .card-body .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#tours-main .custom-tours{
  padding: 0rem 1rem;
}

#tours-main .custom-tours h1{
  font-size: 2.2rem;
  text-align: center;
}

#tours-main .custom-tours .custom-button{
    width: 40%;
    padding: 1rem 0rem ; 
    font-size: 1rem;
    margin: 2rem 1rem;
    text-align: center;
}


/*========================== EVENTS BODY MEDIA QUERIES ===========================*/

#events-main .upcoming-events h4{
  font-size: 2.5rem;
}

#events-main .upcoming-events .available-events{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  margin: 0rem 0rem 2rem 0rem;
  
}

#events-main .upcoming-events .available-events .card .card-img{
  width: 60%;
}

#events-main .upcoming-events .available-events .card .card-body .card-title{
  font-size: 1rem;
}

#events-main .upcoming-events .available-events .card .card-body .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#events-main .suggest-event{
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#events-main .suggest-event h3{

  margin: 1rem 0rem;
  font-size: 1.8rem;
  font-weight: 400;
}

#events-main .suggest-event p{
  font-size: 1.2rem;
  padding: 1rem;
}

#events-main .suggest-event .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  margin: 1rem 0rem;
}

/*========================== CAREERS BODY MEDIA QUERIES ==========================*/


#careers-main .careers-intro h1{
  font-size: 3rem;
  align-self: center;
  margin: 17rem 0rem 1rem 0rem;
}

#careers-main .career-oppotunities .vacancies .vacancy-item{
  display: grid;
  grid-template-columns: 0.5fr 1fr 2fr 1fr;
  padding: 1rem 0.5rem;
  margin-top: 1rem;
}


#careers-main .career-oppotunities .vacancies .vacancy-item img{
  width: 50%;
}

#careers-main .career-oppotunities .vacancies .vacancy-item .title{
  margin: 0rem 1rem 0rem 0rem;
}

#careers-main .career-oppotunities .vacancies .vacancy-item .custom-button{
  font-size: 0.6rem;
  padding: 0.6rem 1rem;
}


/*=========================== CONTACT US MEDIA QUERIES ===========================*/

#contact-main .contact-form{
  padding: 0rem 2rem;
  }
  
  #contact-main .contact-form h2{
    font-size: 2rem;
    margin: 3rem 0rem;
  }
  
  #contact-main .contact-form .form-group {
  max-width: 80vw;
    }
  
  #contact-main .contact-form .custom-button{
      margin: 0rem 0rem 1rem 0rem;
    }
  
}

@media screen and (max-width: 480px){ /*....Smaller devices....*/

/*=========================== WHOLE PAGE MEDIA QUERIES ===========================*/

/*No changes on the HTML and Body*/

/*=========================== NAVIGATION MEDIA QUERIES ===========================*/

.nav-links{
top: 93px;
}

/*============================== FOOTER MEDIA QUERIES =============================*/

#trip-footer .links-group li img{
width: 25%;
}

/*========================= INDEX/HOME BODY MEDIA QUERIES =========================*/


#home-landing {
min-height: 50vh;
}

#home-landing .platform-text {
  font-size: 4rem;
  margin: 1rem 0rem;
}
  
#home-landing .platform-text span {
  font-size: 4rem;
}

#home-landing .pull-text{
margin: 0rem 0rem 1rem 4rem;
width: 90%;
align-self: flex-end;
}

#services-section img{
width: 60%;
}

#about-section .delivery .amenities img{
width: 35%;
}

/*========================= BUSINESS BODY MEDIA QUERIES =========================*/

#business-main{
  padding: 1rem 0rem 0rem 0rem;
  margin: 0rem;
}

#business-main .intro-section h1{
text-align: center;
font-size: 2rem;
}

#business-main .intro-section span{
  text-align: center;
  font-size: 2rem;
}

  #business-main .Bookings h3{
    text-align: center;
    font-size: 2.5rem;
}

#business-main .Bookings .form-group .form-inputs{
  display: row;
  flex-direction: column;
  padding: 0rem;
  align-items: center;
}

#business-main .Bookings .form-group .form-inputs .form-divider{
  display: row;
  flex-direction: column;
  align-items: flex-end;
}

  #business-main .Bookings .custom-button{
    width: 80%;
    padding: 1rem 0rem ; 
    font-size: 1rem;
    margin: 2rem 1rem;
    text-align: center;
}

#business-main .join-us{
  padding: 0rem 1rem;
}

#business-main .join-us h4{
  font-size: 2.5rem;
  text-align: center;
}

#business-main .join-us p{
  font-size: 1.2rem;
}

#business-main .join-us .custom-button{
  font-size: 0.8rem;
  max-height: fit-content;
  padding: 0.8rem 1rem;
}
#business-main .biz-profiles h3{
  padding: 0rem 1rem;
  font-size: 2.5rem;
}

#business-main .biz-profiles{
  padding: 0rem 0.5rem;
  display: grid;
}

#business-main .biz-profiles .profiles-group{
  display: grid;
  grid-template-columns: auto;
  gap: 1rem;
  padding: 1rem 0rem;
}

#business-main .biz-profiles .profiles-group .profile-item{
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#business-main .biz-profiles .profiles-group .profile-item img{
  width: 70%;
  margin: 0rem 0rem;
  border-radius: 15px;
 align-self: center;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .heading-text{
  font-size: 1.5rem;
  text-align: center;
  padding: 0.5rem 0rem;
  margin: 1rem 0rem;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .benefits{
  margin: 0rem;
  font-size: 1rem;
  text-align: center;
  padding: 0rem;
}

#business-main .executive-transfers {
  display: flex;
  flex-direction: column;
  align-items: center;

}

#business-main .executive-transfers .transfers-info-group{
  display: flex;
  flex-direction: column;
  align-items:center;  
}

#business-main .executive-transfers img{
  width: 60%;
}

#business-main .executive-transfers .transfers-info-group p{
  font-size: 1rem;
  margin: 2rem 0rem;
  padding: 0rem;
  width: 100%;
}

#business-main .executive-transfers .custom-button{
  margin: 0rem 0rem 3rem 0rem;
  align-self: center;
  font-size: 0.8rem;
}

/*=========================== TOURS BODY MEDIA QUERIES ===========================*/

#tours-main .tours-intro-section{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0rem;
}

#tours-main .tours-intro-section h1{
  font-size: 2rem;
  margin: auto auto auto 1rem;
  width: auto;
  padding: 0rem 2rem 0rem 0rem;
  -webkit-text-stroke-width: 0.5px;
}

#tours-main .tours-intro-section h3{
  font-size: 1.5rem;
  text-align: center;
  margin: auto;
  width: auto;
  padding: 1rem 0.5rem;
}

#tours-main .packages h4{
  font-size: 2.2rem;
  padding: 0rem 1rem;
}

#tours-main .available-tours{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: 0rem 0rem 2rem 0rem;
  
}

#tours-main .available-tours .card .card-img{
  width: 60%;
}

#tours-main .available-tours .card .card-body .card-title{
  font-size: 1rem;
}

#tours-main .available-tours .card .card-body .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#tours-main .custom-tours{
  padding: 0rem 1rem;
}

#tours-main .custom-tours h1{
  font-size: 2rem;
  text-align: center;
}

#tours-main .custom-tours h5{
  font-size: 1.2rem;
  text-align: center;
}

#tours-main .custom-tours .form-group .form-inputs{
  display: row;
  flex-direction: column;
  padding: 0rem 2rem;
  align-items: center;
  padding:0rem;
  }

#tours-main .custom-tours .form-group .form-inputs .form-divider{
  display: row;
  flex-direction: column;
  align-items: flex-end;
  }

#tours-main .custom-tours .custom-button{
    width: 80%;
    padding: 1rem 0rem ; 
    font-size: 1rem;
    margin: 2rem 1rem;
    text-align: center;
  }


/*========================== EVENTS BODY MEDIA QUERIES ===========================*/

#events-main .intro-events h1{
  font-size: 6rem;
}

#events-main .upcoming-events h4{
  font-size: 2.5rem;
}

#events-main .upcoming-events h6{
  font-size: 1.4rem;
}

#events-main .upcoming-events .available-events{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: 0rem 0rem 2rem 0rem;
  
}

#events-main .upcoming-events .available-events .card .card-img{
  width: 60%;
}

#events-main .upcoming-events .available-events .card .card-body .card-title{
  font-size: 1rem;
}

#events-main .upcoming-events .available-events .card .card-body .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#events-main .suggest-event{
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#events-main .suggest-event h3{

  margin: 1rem 0rem;
  font-size: 1.5rem;
  font-weight: 400;
}

#events-main .suggest-event p{
  font-size: 1rem;
  padding: 1rem;
}

#events-main .suggest-event .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  margin: 1rem 0rem;
}


/*========================== CAREERS BODY MEDIA QUERIES ==========================*/

#careers-main {
  padding: 0.5rem 0rem 2rem 0rem;
}

#careers-main .careers-intro h1{
  font-size: 1.8rem;
  align-self: center;
  margin: 15rem 0rem 1rem 0rem;
}

#careers-main .career-oppotunities{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#careers-main .career-oppotunities .vacancies{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#careers-main .career-oppotunities .vacancies .vacancy-item{
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  margin-top: 1rem;
}

#careers-main .career-oppotunities .vacancies .vacancy-item img{
  width: 20%;
}

#careers-main .career-oppotunities .vacancies .vacancy-item .title{
  margin: 1rem 0rem;
}

#careers-main .career-oppotunities .vacancies .vacancy-item .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#careers-main .career-oppotunities h3{
  font-size: 1rem;
}

#careers-main .career-oppotunities .email-link{
  padding: 0rem;
  margin: 0rem;
  font-size: 1.1rem;
}

/*=========================== CONTACT US MEDIA QUERIES ===========================*/
#contact-main .contact-form{
  padding: 0rem 1rem;
  }
  
  #contact-main .contact-form h2{
    font-size: 1.8rem;
    margin: 3rem 0rem;
  }
  
  #contact-main .contact-form .form-group {
  max-width: 100vw;
  padding: 0rem;
  margin: 0rem;
    }
  
  #contact-main .contact-form .custom-button{
      margin: 0rem 0rem 1rem 0rem;
    }
  
}

@media screen and (max-width: 320px){ /*....Smartwatches....*/

/*=========================== WHOLE PAGE MEDIA QUERIES ===========================*/

/*No changes*/

/*=========================== NAVIGATION MEDIA QUERIES ===========================*/

#trip-body nav .logo img{
  width: 7rem;
}

#trip-body nav .logo img:hover{
  max-width: 6rem;
}

#trip-body nav .login{
  font-size: 0.8rem;
  border: white 1px solid;
  border-radius: 40px;
  padding: 0.6rem 0.8rem;
}

.nav-links{
  height: 70vh;
  top: 64px;
}

/*============================== FOOTER MEDIA QUERIES =============================*/

#trip-footer {
  padding: 2rem 1rem;
}

#trip-footer .links-group li img{
  width: 32%;
}

/*========================= INDEX/HOME BODY MEDIA QUERIES =========================*/


#home-landing {
min-height: 50vh;
}

#home-landing .platform-text {
font-size: 4rem;
}

#home-landing .platform-text span {
font-size: 4rem;
}

#home-landing .pull-text{
margin: 1rem 0rem 1rem 2rem;
width: 100%;
}

#home-landing .pull-text h3 {
font-size: 1rem;
}

#home-landing .pull-text h4{
font-size: 0.8rem;
}

#home-landing .custom-button {
margin: 2rem 0rem;
font-size: 0.7rem;
}


#about-section .brand .custom-button{
  font-size: 0.8rem;
}



/*========================= BUSINESS BODY MEDIA QUERIES =========================*/

#business-main{
  padding: 1rem 0rem 0rem 0rem;
  margin: 0rem;
}

#business-main .intro-section h1{
text-align: center;
font-size: 2rem;
}

#business-main .intro-section span{
  text-align: center;
  font-size: 2rem;
  }

  #business-main .Bookings h3{
    text-align: center;
    font-size: 2.5rem;
  }

#business-main .Bookings .form-group .form-inputs{
  display: row;
  flex-direction: column;
  padding: 0rem;
  align-items: center;
  }

#business-main .Bookings .form-group .form-inputs .form-divider{
  display: row;
  flex-direction: column;
  align-items: flex-end;
  }

  #business-main .Bookings .custom-button{
    width: 80%;
    padding: 1rem 0rem ; 
    font-size: 1rem;
    margin: 2rem 1rem;
    text-align: center;
  }

#business-main .join-us{
  padding: 0rem 1rem;
}

#business-main .join-us h4{
  font-size: 2.5rem;
  text-align: center;
}

#business-main .join-us p{
  font-size: 1.2rem;
}

#business-main .join-us .custom-button{
  font-size: 0.8rem;
  max-height: fit-content;
  padding: 0.5rem;
}
#business-main .biz-profiles h3{
  padding: 0rem 1rem;
  font-size: 2.5rem;
}

#business-main .biz-profiles{
  padding: 0rem 0.5rem;
  display: grid;
}

#business-main .biz-profiles .profiles-group{
  display: grid;
  grid-template-columns: auto;
  gap: 1rem;
  padding: 1rem 0rem;
}

#business-main .biz-profiles .profiles-group .profile-item{
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#business-main .biz-profiles .profiles-group .profile-item img{
  width: 70%;
  margin: 0rem 0rem;
  border-radius: 15px;
 align-self: center;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .heading-text{
  font-size: 1.5rem;
  text-align: center;
  padding: 0.5rem 0rem;
  margin: 1rem 0rem;
}

#business-main .biz-profiles .profiles-group .profile-item .profile-text .benefits{
  margin: 0rem;
  font-size: 1rem;
  text-align: center;
  padding: 0rem;
}

#business-main .executive-transfers {
  display: flex;
  flex-direction: column;
  align-items: center;

}

#business-main .executive-transfers .transfers-info-group{
  display: flex;
  flex-direction: column;
  align-items:center;  
}

#business-main .executive-transfers img{
  width: 60%;
}

#business-main .executive-transfers .transfers-info-group p{
  font-size: 1rem;
  margin: 2rem 0rem;
  padding: 0rem;
  width: 100%;
}

#business-main .executive-transfers .custom-button{
  margin: 0rem 0rem 3rem 0rem;
  align-self: center;
  font-size: 0.8rem;
}

/*=========================== TOURS BODY MEDIA QUERIES ===========================*/

#tours-main .tours-intro-section{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0rem;
}

#tours-main .tours-intro-section h1{
  font-size: 2rem;
  margin: auto auto auto 1rem;
  width: auto;
  padding: 0rem 2rem 0rem 0rem;
  -webkit-text-stroke-width: 0.5px;
}

#tours-main .tours-intro-section h3{
  font-size: 1.2rem;
  text-align: center;
  margin: auto;
  width: auto;
  padding: 1rem 0.5rem;
}

#tours-main .packages h4{
  font-size: 2rem;
  padding: 0rem 1rem;
}

#tours-main .available-tours{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: 0rem 0rem 2rem 0rem;
  
}

#tours-main .available-tours .card .card-img{
  width: 60%;
}

#tours-main .available-tours .card .card-body .card-title{
  font-size: 1rem;
}

#tours-main .available-tours .card .card-body .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#tours-main .custom-tours{
  padding: 0rem 1rem;
}

#tours-main .custom-tours h1{
  font-size: 2rem;
  text-align: center;
}

#tours-main .custom-tours h5{
  font-size: 1.2rem;
  text-align: center;
}

#tours-main .custom-tours .form-group .form-inputs{
  display: row;
  flex-direction: column;
  padding: 0rem 2rem;
  align-items: center;
  padding:0rem;
}

#tours-main .custom-tours .form-group .form-inputs .form-divider{
  display: row;
  flex-direction: column;
  align-items: flex-end;
}

#tours-main .custom-tours .custom-button{
    width: 80%;
    padding: 1rem 0rem ; 
    font-size: 1rem;
    margin: 2rem 1rem;
    text-align: center;
}

/*========================== EVENTS BODY MEDIA QUERIES ===========================*/

#events-main .intro-events h1{
  font-size: 3rem;
}

#events-main .upcoming-events h4{
  font-size: 2rem;
}

#events-main .upcoming-events h6{
  font-size: 1.1rem;
}

#events-main .upcoming-events .available-events{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: 0rem 0rem 2rem 0rem;
  
}

#events-main .upcoming-events .available-events .card .card-img{
  width: 60%;
}

#events-main .upcoming-events .available-events .card .card-body .card-title{
  font-size: 1rem;
}

#events-main .upcoming-events .available-events .card .card-body .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#events-main .suggest-event{
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#events-main .suggest-event h3{

  margin: 1rem 0rem;
  font-size: 1.3rem;
  font-weight: 400;
}

#events-main .suggest-event p{
  font-size: 0.8rem;
  padding: 1rem;
}

#events-main .suggest-event .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  margin: 1rem 0rem;
}

/*========================== CAREERS BODY MEDIA QUERIES ==========================*/

#careers-main {
  padding: 0.5rem 0rem 2rem 0rem;
}

#careers-main .careers-intro h1{
  font-size: 1.5rem;
  align-self: center;
  margin: 15rem 0rem 1rem 0rem;
}

#careers-main .career-oppotunities{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#careers-main .career-oppotunities .vacancies{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#careers-main .career-oppotunities .vacancies .vacancy-item{
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  margin-top: 1rem;
}

#careers-main .career-oppotunities .vacancies .vacancy-item img{
  width: 20%;
}

#careers-main .career-oppotunities .vacancies .vacancy-item .title{
  margin: 1rem 0rem;
}

#careers-main .career-oppotunities .vacancies .vacancy-item .custom-button{
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

#careers-main .career-oppotunities h3{
  font-size: 1rem;
}

#careers-main .career-oppotunities .email-link{
  padding: 0rem;
  margin: 0rem;
  font-size: 1.1rem;
}

/*=========================== CONTACT US MEDIA QUERIES ===========================*/
#contact-main .contact-form{
display: flex;
flex-direction: column;
align-items: center;
padding: 0rem 0.5rem;
margin: 0rem;
}

#contact-main .contact-form h2{
  font-size: 1.5rem;
  margin: 2rem 0rem;
}

#contact-main .contact-form .form-group {
max-width: 100vw;
padding: 0rem;
margin: 0rem;
  }

#contact-main .contact-form .form-group .form-inputs{
  display: row;
  flex-direction: column;
  padding: 0rem;
  align-items: center;
  }

#contact-main .contact-form .custom-button{
    padding: 0.6rem 2rem ; 
    font-size: 0.8rem;
    margin: 0rem 0rem 3rem 0rem;
    text-align: center;
  }

}