/*google fonts roboto url*/
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* styles which applies on all page*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;list-style: none;
  font-family: 'Roboto', sans-serif;
}
/*main colors*/
:root{
  --font:#fff;
  --font-p:#ffffffb0;
  --bg:#000;
  --shadow:0 0 50px 25px rgba(223, 227, 6, 0.378);
}
body{
  width: 100%;
  height: 100vh;
}
.shown{
  animation: show-slowly 1s .1s ease-in-out forwards;
}
@keyframes show-slowly {
  0% {
    opacity: 0;
  }
  25%{
    opacity: .3;
  }
  50%{
    opacity: .5;
  }
  75%{
    opacity: .7;
  }
  100% {
    opacity: 1;
  }
}
/*home ==> for the first page */
.body-home{
  background-image: url('assets/home/background-home-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  width: 100vw;
}
/*header ==> for all pages*/
header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0 0 0;
  position: fixed;
}
header  .logo{
  font-weight: 700;
  color: var(--font);
  cursor: pointer;
  margin-left: 7rem;
}
header .logo a{
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo a img{
  width: 90%;
}

header  nav{
  background-color: hsla(0, 0%, 100%, .05);
  backdrop-filter: blur(1rem);
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all .3s ease;
}
header nav::before{
  content: '';
  height: 3px;
  width: 50%;
  background-color: hsla(0, 0%, 100%, .2);
  position: absolute;
  left: -27rem;
}
header  nav ul{
  display: flex;
  align-items: center;
  padding: 0 60px;
  transition: all 1s ease;
}
header  nav ul li{
  margin:0 35px;
  display: flex;
  position: relative;
}
header  nav ul li a{
  color: var(--font);
  font-size: 1.2rem;
  font-weight: 300;
  border-spacing: 1px solid red;
}
li::before  {
  position: absolute;
  top: 210%;
  content: '';
  height: 10%;
  background-color: var(--font);
  width: 100%;
  border-spacing: 20px;
  display: none;
}
li:hover::before{
  display: block;
}
li.active::before{
  display: block;
}
header  nav ul li a span{
  font-weight: 700;
  margin-right: 5px;
}
.hamburger{
  display: none;
  position: absolute;
  top: 4%;right: 12%;
  font-size: 3rem;
  color: var(--font);
  cursor: pointer;
}
header .bars{
  display: none;
  color: var(--font);
  font-size: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/*home section ==> first page*/
.home{
  position: absolute;
  top: 65%;right: 50%;
  transform: translate(50% , -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home .container{
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home .container .home__content{
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
.home .container .home__content span{
  font-size: 1.2rem;
  font-weight: 200;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.home .container .home__content h1{
  font-size: 10rem;
  font-weight: 300;
  color: var(--font);
  margin-bottom: 20px;
  width: 100%;
  text-transform: uppercase;
}
.home .container .home__content p{
  font-size: 1.1rem;
  font-weight: 100;
  color: var(--font-p);
  margin-bottom: 20px;
  letter-spacing: .8px;
  width: 100%;
}
.home .container .home__btn{
  width: 40%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.home .container .home__btn .btn{
  border: none;outline: none;
  width: 250px;
  height: 250px;
  padding: 15px 30px;
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
}
.home .container .home__btn a{
  text-transform: uppercase;
  color: #041669d0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 300;
}
.home .container .home__btn .btn:hover{
  box-shadow: var(--shadow);
}
/* end home first page */

/*start of destination ==> 2nd page*/
.destination-body{
  width: 100%;
  background-image: url('assets/destination/background-destination-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.destination{
  position: absolute;
  top: 63%;right: 50%;
  transform: translate(50% , -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.destination .container{
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  gap: 6rem;
}
.destination .container .img-content{
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.destination .container .img-content .img{
  width: 80%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.destination .container .img-content .img img{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.destination .container .img-content h1{
  font-size: 2rem;
  font-weight: 400;
  color: var(--font);
  margin-bottom: 30px;
  width: 100%;
  text-transform: uppercase;
  text-align: center;
}
.destination .container .content {
  width: 50%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1rem;
}
.destination .container .content .controls{
  width: 50%;
  display: flex;
  flex-direction: row;
}
.destination .container .content .controls button{
  border: none;outline: none;
  background-color: transparent;
  color: var(--font);
  font-size: 1.2rem;
  font-weight: 300;
  margin-right: 17px;padding: 15px 0;
  cursor: pointer;
  text-transform: uppercase;
}
.destination .container .content .controls button:hover,
.destination .container .content .controls button.active{
  border-bottom: 2px solid var(--font);
}
.destination .container .content .destination-about{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.destination .container .content .destination-about h2{
  font-size: 6rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
}
.destination .container .content .destination-about .p{
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font);
  letter-spacing: .5px;
  width: 110%;
  position: relative;
}
.destination .container .content .destination-about .p::before{
  content: '';
  height: 3px;
  width: 100%;
  background-color: var(--font);
  position: absolute;
  top: 120%;
}
.destination .container .content .destination-about .distance{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 110%;
  margin-top: 25px;
}

.destination .container .content .destination-about .distance .distance-content h3{
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--font);
  letter-spacing: .2px;
  width: 100%;
  text-transform: uppercase;
}
.destination .container .content .destination-about .distance .distance-content p{
  font-size: 2.3rem;
  font-weight: 400;
  color: var(--font);
  letter-spacing: .2px;
  width: 100%;
  text-transform: uppercase;
}
/* destination end for the 2nd page*/

/* crew start for the 3rd page*/
.crew-body{
  width: 100%;
  background-image: url('assets/crew/background-crew-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.crew,.tech{
  position: absolute;
  top: 60%;right: 50%;
  transform: translate(50% , -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.crew .container{
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
}
.crew .container .crew-img{
  width: 50%;
  display: flex;
  justify-content: flex-end;
}
.crew .container .crew-img img{
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.crew .container .crew-text{
  width: 50%;
  position: relative;
}
.crew .container .crew-text h1{
  font-size: 2rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  margin-bottom: 4rem;
}
.crew .container .crew-text .role{
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--font);
  letter-spacing: .5px;
  width: 100%;
  text-transform: uppercase;
}
.crew .container .crew-text .name2{
  font-size: 3rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  margin-top: 20px;
}
.crew .container .crew-text .bio{
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font);
  width: 100%;
  margin-top: 20px;
}
/*dots to move*/
.crew .container .crew-text .dots{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: absolute;
  top: 100%;right: 50%;
  transform: translate(50% , 50%);
}
.crew .container .crew-text .dots .dot{
  width: 25px;
  height: 25px;
  border: none;outline: none;
  margin-right: 1.5rem;
  border-radius: 50%;
  background-color: var(--font);
  cursor: pointer;
}
.crew .container .crew-text .dots .dot:hover,
.crew .container .crew-text .dots .dot.active2{
  background-color: var(--font-p);
}

/* crew end for the 3rd page*/

/* technology start for the 4th page*/
.tech-body{
  width: 100%;
  background-image: url('assets/technology/background-technology-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.tech .container{
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
  padding: 0 50px;
  gap: 4rem;
}
.tech .container .tech-content{
  width: 50%;
  display: flex; 
  gap: 2rem;
  position: relative;
}
.tech .container .tech-content .btns{
  width: 50%;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
}
.tech .container .tech-content .btns .btn{
  border: none;outline: none;
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  background-color: var(--font);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 300;
  color: #000;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s;
}
.tech .container .tech-content .btns .btn:hover{
  background-color: var(--font-p);
}
.tech .container .tech-content .btns .btn.active3{
  background-color: var(--font-p);
}



.tech .container .tech-content .content-container h1{
  font-size: 2rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  margin-bottom: 5rem;
}
.tech .container .tech-content .content-container h2{
  font-size: 3rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.tech .container .tech-content .content-container h3{
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.tech .container .tech-content .content-container p{
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--font);
  width: 95%;
  margin-bottom: 2rem;
}



.tech .container .tech-img{
  width: 40%;
  height: 60vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.tech .container .tech-img img{
  width: 90%;
  height: 100%;
}

/* technology end for the 4th page*/

/*media query*/

@media (max-width: 90em) {
  header nav::before{
    width: 30%;
    left: -14rem;
  }
  .home .container{
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    gap: 20rem;
  }
}
@media (max-width: 70em) {
  section{
    height: 88vh;
  }
  /* home start for the 1st page*/
  .body-home{
    background-image: url('assets/home/background-home-tablet.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
  }
  header{
    z-index: 1000;
  }
  header  .logo{
    margin: 0 60px;
  }
  nav { 
position: fixed;
inset: 0 0 0 100%;
justify-content: center;
align-items: center;
padding: min (30vh, 10rem) 2em;
z-index: 1000;
}
nav.active{
  inset: 0 0 0 30%;
}
nav ul {
  flex-direction: column;
  gap: 5em;
  display: flex;
  }
  nav ul li{
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
  }
  nav ul li a{
    display: inline-block;
    
  }
  .hamburger{
    display: block;
    right: 7%;top: 3%;
  }
  header .bars{
    display: flex;
    margin-right: 60px;
  }
  header nav::before{
    display: none;
  }
  
    .home{
      top: 56%;
    }
  .home .container{
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .home .container .home__content{
    text-align: center;
    width: 100%;
  }
  .home .container .home__content span{
    font-size: 1.5rem;
  }
  .home .container .home__content h1{
    font-size: 8rem;
    width: 100%;
  }
  .home .container .home__content p{
    font-size: 1.2rem;
  }
  .home .container .home__btn{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .home .container .home__btn .btn{
    width: 220px;
    height: 220px;
  }
  .home .container .home__btn a{
    font-size: 1rem;
  }
/* home end for the 1st page*/

/* destination start for the 2nd page*/
.destination-body{
  width: 100%;
  background-image: url('assets/destination/background-destination-tablet.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.destination{
  top: 56%;
}
.destination .container{
  flex-wrap: wrap;
  width: 90%;
  padding: 0 20px;
  gap:1rem;
}
.destination .container .img-content{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.destination .container .img-content .img{
  width: 50%;
  height: 50%;
}
.destination .container .img-content .img img{
  width: 100%;
  
}
.destination .container .img-content h1{
  font-size: 2rem;
  margin-bottom: 20px;
}
.destination .container .content {
  width: 100%;
  gap: .6rem;
}
.destination .container .content .controls button{
  font-size: 1.1rem;
  font-weight: 300;
  margin-right: 20px;

}
.destination .container .content .destination-about{
  gap: .9rem;
  width: 80%;
}
.destination .container .content .destination-about h2{
  font-size: 3rem;
}
.destination .container .content .destination-about .p{
  font-size: 1.2rem;
  width: 100%;
  display: flex;
  justify-content: center;
}
.destination .container .content .destination-about .distance{
  margin-top: 15px;
}

.destination .container .content .destination-about .distance .distance-content h3{
  font-size: 1rem;
  font-weight: 300;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
}
.destination .container .content .destination-about .distance .distance-content p{
  font-size: 2rem;
  letter-spacing: .1px;
}
/* destination end for the 2nd page*/

/* crew start for the 3rd page*/
.crew-body{
  width: 100%;
  background-image: url('assets/crew/background-crew-tablet.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  align-items: center;
}
.crew, .tech{
  top: 55%;
}
.crew .container{
  width: 90%;
  gap: 1rem;
  align-items: center;
}
.crew .container .crew-img{
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.crew .container .crew-img img{
  width: 50%;
  background-size: cover;
}
.crew .container .crew-text{
  width: 100%;
}
.crew .container .crew-text h1{
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.crew .container .crew-text .role{
  font-size: 1.4rem;
}
.crew .container .crew-text .name2{
  font-size: 2rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  
}
.crew .container .crew-text .bio{
  font-size: 1rem;
}
/*dots to move*/
.crew .container .crew-text .dots{
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: absolute;
  top: 100%;right: 50%;
  transform: translate(50% , 50%);
}
.crew .container .crew-text .dots .dot{
  width: 20px;
  height: 20px;
}
/* crew end for the 3rd page*/

/* technology start for the 4th page*/
.tech-body{
  width: 100%;
  background-image: url('assets/technology/background-technology-tablet.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.tech .container{
  width: 90%;
  justify-content: center;
  gap: 2.5rem;
}
.tech .container .tech-content{
  width: 100%; 
  gap: 1.9rem;
}
.tech .container .tech-content .btns .btn{
  width: 70%;
  height: 50px;
  font-size: 1.2rem;
}



.tech .container .tech-content .content-container h1{
  font-size: 1.8rem;
  width: 100%;
  margin-bottom: 2rem;
}
.tech .container .tech-content .content-container h2{
  font-size: 2.7rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.tech .container .tech-content .content-container h3{
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.tech .container .tech-content .content-container p{
  font-size: 1.1rem;
  width: 95%;
  margin-bottom: .6rem;
}



.tech .container .tech-img{
  width: 60%;
  height: 44vh;
  justify-content: flex-start;
}
.tech .container .tech-img img{
  width: 100%;
  
}
/* technology end for the 4th page*/
}
















@media (max-width: 35em) {
  section{
    height: 90vh;
  }
  /* home start for the 1st page*/
  .body-home{
    background-image: url('assets/home/background-home-mobile.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
  }
  
  header  .logo{
    margin: 0 40px;
    font-size: 3rem;
    font-weight: 700;
    color: var(--font);
    cursor: pointer;
  }
  nav { 
position: fixed;
inset: 0 0 0 100%;
padding: min (30vh, 10rem) 2em;
z-index: 1000;
}
nav.active{
  inset: 0 0 0 0;
}
nav ul {
  flex-direction: column;
  gap: 4em;
  }
  nav ul li{
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  nav ul li a{
    display: inline-block;
  }
  header  nav ul li  span{
    font-weight: 300;
  }
  .hamburger{
    display: block;
    right: 3.9%;
  }
  header .bars{
    display: flex;
    margin-right: 29px;
  }
  header nav::before{
    display: none;
  }
  section{
    top: 40%;
  }
  
  .home{
    top: 55%;
  }
  .home .container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home .container .home__content{
    text-align: center;
    width: 100%;
  }
  .home .container .home__content span{
    font-size: .7rem;
  }
  .home .container .home__content h1{
    font-size: 4rem;
    text-align: center;
    width: 100%;
  }
  .home .container .home__content p{
    font-size: 1rem;
    width: 100%;
  }
  .home .container .home__btn{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .home .container .home__btn .btn{
    width: 180px;
    height: 180px;
  }
  .home .container .home__btn a{
    font-size: 1rem;
  }
/* home end for the 1st page*/
/* destination start for the 2nd page*/
.destination-body{
  width: 100%;
  background-image: url('assets/destination/background-destination-mobile.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.destination{
  width: 100%;
  top: 55%;
}
.destination .container{
  flex-wrap: wrap;
  width: 100%;
  padding: 0 30px;
  gap: .2rem;
  
}
.destination .container .img-content{
  width: 100%;
}
.destination .container .img-content .img{
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: center;
}
.destination .container .img-content .img img{
  width: 80%;
  
}
.destination .container .img-content h1{
  font-size: .9rem;
  margin-bottom: 20px;
}
.destination .container .content {
  width: 100%;
  gap: 1rem;
}
.destination .container .content .controls button{
  font-size: 1rem;
  margin-right: 15px;
}
.destination .container .content .destination-about{
  gap: .6rem;
  width: 100%;
}
.destination .container .content .destination-about h2{
  font-size: 2.5rem;
}
.destination .container .content .destination-about .p{
  font-size: .9rem;
  letter-spacing: .2px;
  width: 100%;
}
.destination .container .content .destination-about .distance{
  margin-top: 25px;
  width: 100%;
}

.destination .container .content .destination-about .distance .distance-content h3{
  font-size: .8rem;
  width: 100%;
}
.destination .container .content .destination-about .distance .distance-content p{
  font-size: 1.5rem;
  letter-spacing: .05px;
}
/* destination end for the 2nd page*/
/* crew start for the 3rd page*/
.crew-body{
  width: 100%;
  background-image: url('assets/crew/background-crew-mobile.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.crew{
  top: 50%;
}
.crew .container{
  width: 90%;
  gap: 3rem;
  align-items: center;
}
.crew .container .crew-img{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.crew .container .crew-img img{
  width: 60%;
  background-size: cover;
}
.crew .container .crew-text{
  width: 100%;
  text-align: center;
}
.crew .container .crew-text h1{
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.crew .container .crew-text .role{
  font-size: 1.3rem;
}
.crew .container .crew-text .name2{
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--font);
  width: 100%;
  text-transform: uppercase;
  
}
.crew .container .crew-text .bio{
  font-size: 1rem;
}
/*dots to move*/
.crew .container .crew-text .dots{
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: absolute;
  top: 100%;right: 50%;
  transform: translate(50% , 50%);
}
.crew .container .crew-text .dots .dot{
  width: 20px;
  height: 20px;
}


/* crew end for the 3rd page*/
/* technology start for the 4th page*/
.tech-body{
  width: 100%;
  background-image: url('assets/technology/background-technology-mobile.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.tech{
  top: 55%;
}
.tech .container{
  width: 100%;
  justify-content: center;
  gap: 2.5rem;
}
.tech .container .tech-content{
  width: 100%; 
  gap: 1rem;
}
.tech .container .tech-content .btns .btn{
  width: 100%;
  height: 45px;
  font-size: 2rem;
}



.tech .container .tech-content .content-container h1{
  font-size: 1.1rem;
  width: 100%;
  margin-bottom: 2rem;
}
.tech .container .tech-content .content-container h2{
  font-size: 1.4rem;
  font-weight: 400;
  width: 100%;
  margin-bottom: .7rem;
}
.tech .container .tech-content .content-container h3{
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.tech .container .tech-content .content-container p{
  font-size: .8rem;
  width: 100%;
  
}

.tech .container .tech-img{
  width: 70%;
  height: 30vh;
  justify-content: flex-start;
}
.tech .container .tech-img img{
  width: 100%;
  
}
/* technology end for the 4th page*/
}