*{
  margin: 0;
  padding: 0;
  color: #000000;
  letter-spacing: 1px;
}

body{
  font-family: 'TheVoyageCultureSans',sans-serif;
  src: url("./fonts/The\ Voyage\ Culture\ Sans.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  background-color: rgba(245, 245, 220, 0.395);
  overflow-x: hidden;
}
nav{
  height: 5rem;
  width: 100vw;
  background-color: #ffffff;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  /* flex-direction: column; */
  position: fixed;
  z-index: 10;
}

/*Styling logo*/
.logo{
  display: flex;
  width: 100%;
  /* justify-content: center; */
  align-items: center;
  color: #e48604;
  font-weight: 700;
  font-size: 0.8em;
  padding:1vh 1vw;
  text-align: center;
}


.logo img {
  padding-right: 0.4em;
  height: 6rem;
  width: 10rem;
}

/*Styling Links*/
.nav-links{

  font-weight: 600;
  display: flex;
  list-style: none; 
  width: 68vw;
  padding: 0 0.7vw;
  justify-content: space-evenly;
  align-items: center;
  text-transform: uppercase;
}
.nav-links li a{
color: orangered;
  text-decoration: none;
  margin: 0 0.7vw;
}
.nav-links li a:hover {
  color: #000000;
}
.nav-links li {
  color: orangered;
  position: relative;
}



/*Styling Buttons*/
.login-button{
  background-color: transparent;
  border: 1.5px solid #000000;
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  margin-left: 2vw;
  font-size: 1rem;
  cursor: pointer;

}
.login-button:hover {
  color: #131418;
  background-color: #f2f5f7;
  border:1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}
.join-button{
  color: #131418;
  background-color: #61DAFB;
  border: 1.5px solid #61DAFB;
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
}
.join-button:hover {
  color: #f2f5f7;
  background-color: transparent;
  border:1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}

/*Styling Hamburger Icon*/
.hamburger div{
  width: 30px;
  height:3px;
  background: #000000;
  margin: 5px;
  transition: all 0.3s ease;
}
.hamburger{
  display: none;
}

@media (max-width:1024px){

.nav-links {
  width: 125%;
}
}
@media  (max-width: 769px){
.logo .addr {
  display: none;
}

nav {
  height: 5rem;
}
}



/*Stying for small screens*/
@media screen and (max-width: 800px) and (min-width:350px){
  nav{
      position: fixed;
      z-index: 3;
  }
  .logo{
      text-align: left;
      margin-left: -1em;
      font-size: 0.8em;
 
  }
  .logo img {
    padding-right: 0.4em;
    height: 4rem;
    width: 8rem;
  }
  .hamburger{
      display:block;
      position: absolute;
      cursor: pointer;
      right: 5%;
      top: 50%;
      transform: translate(-5%, -50%);
      z-index: 2;
      transition: all 0.7s ease;
  }
  .nav-links{
      position: fixed;
      top: 5em;
      background: #ffffff;
      height: 100vh;
      width: 100%;
      flex-direction: column;
      clip-path: circle(50px at 90% -20%);
      -webkit-clip-path: circle(50px at 90% -10%);
      transition: all 1s ease-out;
      pointer-events: none;
  }
  .nav-links.open{
    height: 47vh;
    width: 35%;
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;
  }
  .nav-links li{
      opacity: 0;
  }
  .nav-links li:nth-child(1){
      transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2){
      transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3){
      transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4){
      transition: all 0.5s ease 0.7s;
  }
  .nav-links li:nth-child(5){
      transition: all 0.5s ease 0.8s;
  }
  .nav-links li:nth-child(6){
      transition: all 0.5s ease 0.9s;
      margin: 0;
  }
  .nav-links li:nth-child(7){
      transition: all 0.5s ease 1s;
      margin: 0;
  }
  li.fade{
      opacity: 1;
  }
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
  transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
  transition: all 0.7s ease;
  width:0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
}



.img-slider{
  position: relative;
  width: 100%;
  height: 100vh;


}

.img-slider .slide{

margin: 4em 4em 4em 4em;
z-index: 1;
position: absolute;
width: 95%;
clip-path: circle(0% at 0 50%);
}

.img-slider .slide.active{
clip-path: circle(150% at 0 50%);
transition: 2s;
transition-property: clip-path;
}

.img-slider .slide img{

z-index: 1;
/* margin: 10em; */
width: 97%;
height: 80vh;
border-radius: 5px;
margin-top: 2.5em;

}

.img-slider .slide .info{
position: absolute;
top: 0;
padding: 15px 30px;
}

.img-slider .slide .info h2{
color: #575757c1;
font-size: 30px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 2px;
}

.img-slider .slide .info p{
color: #191919;
background: rgba(0, 0, 0, 0.1);
font-size: 16px;
width: 45%;
padding: 10px;
border-radius: 4px;
}

.img-slider .navigation{
z-index: 2;
position: absolute;
display: flex;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}

.img-slider .navigation .btn{
background: rgba(255, 255, 255, 0.5);
width: 12px;
height: 12px;
margin: 10px;
border-radius: 50%;
cursor: pointer;
}

.img-slider .navigation .btn.active{
background: #2696E9;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* slider */
@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
  }
  

  div#slider { overflow: hidden; }
  div#slider figure img { width: 20%; float: left; }
  div#slider figure { 
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 7s slidy infinite; 
  }
  
@media (max-width:1024px) and (min-width:450px){

  .gallery video{
    width: 100%;
  }
  .gallery #v2, .gallery #v3{
    display: none;

  }
.img-slider .slide{

  margin: 4em 4em 4em 4em;
  z-index: 1;
  position: absolute;
  width: 92%;
  clip-path: circle(0% at 0 50%);
}
}

@media (max-width: 820px){
.img-slider{
  width: 767px;
  height: 670px;
}

.img-slider .slide{

  margin: 3em 4em 4em 4em;
}

.img-slider .slide .info{
  padding: 10px 25px;
}

.img-slider .slide .info h2{
  font-size: 35px;
}

.img-slider .slide .info p{
  width: 70%;
  font-size: 15px;
}

.img-slider .navigation{
  bottom: 25px;
}

.img-slider .navigation .btn{
  width: 10px;
  height: 10px;
  margin: 8px;
}
}

@media (max-width: 620px){
.img-slider{
  width: 400px;
  height: 250px;
}

.img-slider .slide .info{
  padding: 10px 20px;
}

.img-slider .slide .info h2{
  font-size: 30px;
}

.img-slider .slide .info p{
  width: 80%;
  font-size: 13px;
}

.img-slider .navigation{
  bottom: 15px;
}

.img-slider .navigation .btn{
  width: 8px;
  height: 8px;
  margin: 6px;
}
}

@media (max-width: 450px){

.img-slider .slide .info{
  padding: 5px 10px;
}

.img-slider .slide .info h2{
  font-size: 25px;
}

.img-slider .slide .info p{
  width: 90%;
  font-size: 11px;
}

.img-slider .navigation{
  bottom: 10px;
}
}



  @media (max-width:450px) {

    .gallery video{
      width: 100%;
      height: 100%;
      padding-left: 0em;
    }
    .gallery #v3{
      display: none;
  
    }
    .img-slider {
      width: 425px;
      height: 365px;
    }
    .img-slider .slide img {
      z-index: 1;
      /* margin: 10em; */
      width: 100%;
      height: 34vh;
      border-radius: 5px;
  }

  .img-slider .slide .info {
    padding: 0px 10px;
}

.img-slider .slide .info h2 {
  margin-left: 1em;
  font-size: 13px;
}

.img-slider .slide .info {
  padding: 2px 6px;
}

.img-slider .slide .info p {
  display: none;

}
.img-slider .slide {
  margin:3em 0em 0em 1.2em;
  z-index: 1;
  position: absolute;
  width: 90%;
  clip-path: circle(0% at 0 50%);
}



  }

@media (max-width:380px){
  .gallery video{
    width: 100%;
    height: 100%;
    padding-left: 0em;
  }

  .gallery v2{
    display: block;
  }


  .img-slider {
    width: 375px;
    height: 274px;
    }

    .img-slider .slide img {
      z-index: 1;
      /* margin: 10em; */
      width: 100%;
      height: 22vh;
      border-radius: 5px;
  }
  }


  
.aboutP{
background: linear-gradient(45deg,rgba(0, 8, 20, 0.53),rgb(23, 79, 79)),url(./img/VID6.gif);
background-size: cover;
/* overflow: hidden; */
background-attachment: fixed;
  /* font-family: "kalam"; */
  font-weight: 400;
  width: 95%;
  height: 70vh;
  display: flex;
  justify-content: center;
  padding-top: 4em;
  padding-left: 4em;
  padding-right: 0em;
}

.ab1 , .ab2{
  width: 50%;
  /* margin-left: 4em; */
  /* margin-right: 8em; */
  text-align: justify;
}

.ab1{
  margin-top: 0em;
}
.ab2{
  margin-left: 2em;
  margin-right: 2em;
  margin-top:3em;
}

.ab1 h5, .ab2 h5{
  color: white;
  font-weight: bold;
  line-height: 2em;
  font-size: 1.2em;
}

.ab1 p, .ab2 li{
  color: white;
  font-size: 1em;
  line-height: 1.7em;
}


@media (max-width:1025px){

  .aboutP {
    /* font-family: "kalam", cursive; */
    font-weight: 400;
    width: 93%;
    height:145vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0em;
    padding-top: 5em;
    margin-left: 0em;
    margin-right: 0em;
    padding-right: 0.5em;
    padding-bottom: 5.5em;
}

.ab1, .ab2 {
  font-size: 1.2em;
  width: 90%;
  /* margin-left: 4em; */
  /* margin-right: 8em; */
  text-align: justify;
}
.ab2{
  margin-top: 1em;
}

}

@media (max-width: 769px){
  .aboutP {
    padding-left: 0em;
    height: 121vh;
    width: 99%;
  }
  .ab1 p, .ab2 li {
    font-size: 0.9em;
    line-height: 1.7em;
}
}

@media (max-width:450px){
.ab1, .ab2 {
  font-size: 1em;
  width: 80%;
  /* margin-left: 4em; */
  /* margin-right: 8em; */
  text-align: justify;
}
.aboutP {
  /* font-family: "kalam", cursive; */
  font-weight: 400;
  width: 80%;
  height: 186vh;
  margin-top: 0em;
  margin-bottom: 0em;
}
.ab1 p, .ab2 li {
  font-size: 1em;
  line-height: 1.7em;
}
}

@media (max-width:380px){
  .aboutP {
    /* font-family: "kalam", cursive; */
    font-weight: 400;
    width: 80%;
    height: 190vh;
    margin-top: 0em;
    margin-bottom: 0em;
  }
}


@import url('https://fonts.googleapis.com/css?family=Roboto');
body{
    font-family: 'Roboto', sans-serif;
}

.wrapper{
  margin: 3em 0em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.card{
   width: 400px;
    min-height: 150px;
    background:  #0495a260;
    padding: 30px;
     border-radius: 3px;
    box-sizing: border-box;
    color: #000000;
    margin:20px;
     box-shadow: rgb(50 50 93 / 25%) 0px 30px 60px -12px, rgb(0 0 0 / 30%) 0px 18px 36px -18px;
}

.card:nth-child(2){
   background:  #0495a249;
}
.card:last-child{
   background: #0495a260;
}
.card-title{
  color: rgb(206, 118, 4);
  display: flex;
  justify-content: center;
    margin-top: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 1.2px;
}
.card-content{
  font-family: 'Times New Roman', Times, serif;
  display: flex;
  justify-content: center;
  color: rgb(0, 0, 0);
  margin-top: 1.2em;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.5;
}


.page {
background: linear-gradient(45deg,rgba(233, 226, 226, 0.447),rgba(216, 212, 212, 0.49)),url(./img/bg2.avif);
background-attachment: fixed;
background-size: cover;
margin-left: 3em;
padding: 1em 2em;
border-radius: 2em;
 width: 90%;
}
.page h1{
display: flex;
justify-content: center;
margin: 2em 0em;
}
.mac-wrapper {
border-top: 1px solid black;
 position: relative;
 width: 100%;		/* desired width */
}

.mac-wrapper:before {
 content: "";
 display: block;
 padding-top:20.2%; 	/* initial ratio of 1:1*/
}

.mac {
 width: 100%;
 height: 100%;
 text-align: center;
 position:  absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 overflow-y: scroll;
}

.mac .ab1{
margin: 2em 0em ;
width: 90%;
/* margin-left: 4em; */
/* margin-right: 8em; */
text-align: justify;
}



.mac .ab1 h5{
  color: blueviolet;
font-weight: bold;
line-height: 3em;
font-size: 1.2em;
}

.mac .ab1 p{
font-size: 1em;
line-height: 1.7em;
}

@media(max-width:1025px){

.page{
  margin-left: 1em;
}
}

@media  (max-width: 769px){
  .gallery video{
    width: 100%;
    padding-left:0em;
  }

  .gallery #v1
  {
    display: none;
  }
.aboutP{
  margin-left: 0em;
  padding-bottom: 6em;
}
.page{
  margin-left: 0.5em;
}
.mac {
  width: 100%;
  height: 192%;
}
.mac .ab1 h5 {
  font-weight: bold;
  line-height: 2em;
  font-size: 1em;
}

.mac .ab1 p {
  font-size: 0.85em;
}
.page .btnn {
  margin-top: 9em;
}
}

@media screen and (max-width: 1440px){
  .gallery video{
    width: 100%;
  }
}


@media screen and (max-width: 450px){
.page {
  margin-left: 1em;
  padding: 0.5em;
}

.mac {
  width: 100%;
  height: 292%;
}

.mac .ab1 h5 {
font-weight: bold;
line-height: 2em;
font-size: 0.9em;
}
}

/* Gallery */

.Gbdy{
background: linear-gradient(45deg,rgba(100, 101, 100, 0.645),rgba(81, 85, 83, 0.722)),url(./img/glimg\ \(1\).jpg);
background-size: cover;
/* overflow: hidden; */
background-attachment: fixed;
/* font-family: "kalam", cursive; */
font-weight: 400;
margin: 0em 0em 0em 0em;
padding-top: 6em;
}

.GbdyH{

margin: 0em 0em 0em 0em;
}

.heading {
margin-top: 0em;
/* font-family: "kalam", cursive; */
}

.heading h1{
  color: white; 
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
margin: 0em 0em 2em 0em;
/* background: #121FCF; */
/* background: linear-gradient(to right, #0e85e0 0%, #26ff1a 100%); */
/* -webkit-text-fill-color: transparent; */
}

.heading1 h1{ 
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
margin: 2em 0em 1.2em 0em;
/* background: #121FCF; */
/* background: linear-gradient(to right, #0e85e0 0%, #26ff1a 100%); */
/* -webkit-text-fill-color: transparent; */
}
/* Styling gallery section where all images are */
.gallery {
width: 95%;
margin:6em auto 0em auto;
padding-bottom: 2em;
display:grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
justify-content:center;
align-items: center; 
}

/* Styling Particular Image */
.gallery-img {
width: 200px;
height: 200px;
cursor: pointer;
transition: transform 0.2s;
}
/* onHover image will expand little bit */
.gallery-img:hover {
transform: scale(1.1);
cursor: zoom-in;
}
/* This section will be seen when we click on image */
.image-popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 4em 0em;
background-color: rgba(0, 0, 0, 0.8);
}

/* close button when we want to close the bigger image */
.close-button {
position: absolute;
top: 20px;
right: 50px;
font-size:60px;
color: #fff;
cursor: pointer;
}
.close-button:hover{
color: red;
}

/* when we click on the image it will expand in bigger size and will displayed 
at middle of screen */
#popupImage {
display: block;
max-width: 80%;
max-height: 80%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.button {
border: none;
outline: none;
font-size: 16px;
background-color: #320268;
color: white;
margin: 14px;
padding: 8px 16px;
border-radius: 6px;
font-weight: 400;
cursor: pointer;
transition: all ease 0.3s;
}
.button a{
text-decoration: none;
color: white;
}
.button:hover {
background-color: #0b5002;
}
.btnn{
margin-top: 1em;
display: flex;
justify-content: center;
}

@media (max-width:1025px){
.gallery {
  width: 95%;
}
}

@media screen and (max-width: 769px){
.gallery {
  width: 85%;
  margin: 2em auto 3em auto;
}
}

/* Making images more responsive for smaller size device */
@media (max-width:670px) {
.gallery{
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 10px;
}
.gallery-img{
  width:150px;
  height: 150px;
}

.heading{
  font-size: 20px;
}
}

@media (max-width:450px) {
.Gbdy {
  margin: 0em 0em;
}
.GbdyH{

margin: 0em 0em 0em 0em;
}

.heading1{

margin-top: 2em;
}

.heading h1 {
font-weight: 600;
font-size: 1.8em;
margin: 0em 0em 0.5em 0em;
}

.heading1 h1{ 
display: flex;
justify-content: center;
align-items: center;
/* font-family: "kalam", cursive; */
font-weight: 600;
font-size: 1.8em;
margin: 0em 0em 0.5em 0em;
}

.gallery {
  width: 95%;
  margin: 0em 0em 0em 0.8em;
  display: grid;
  overflow-x: hidden;
  grid-gap: 20px;
  /* justify-content: center;
  align-items: center; */
}

.gallery-img {
width: 185px;
height: 175px;
}
}

@media (max-width: 380px){
.gallery-img {
  width: 160px;
  height: 160px;
}
}




/* Footer */

.footer {
background:linear-gradient(106deg, rgba(190, 163, 73, 0.816), rgba(229, 177, 222, 0.782));
background-size: cover;
background-attachment: fixed;
width: 100%;
text-align: left;
font-weight: bold;
font-size: 16px;
padding: 50px;
margin-top: 0px;
}

.footer .footer-left,
.footer .footer-center,
.footer .footer-right {
display: inline-block;
vertical-align: top;
}


/* footer left*/

.footer .footer-left {
width: 33%;
padding-right: 15px;
}

.footer .about {
line-height: 20px;
color: #000000;
font-size: 16px;
line-height: 1.5em;
text-align: justify;
font-weight: normal;
margin: 0;
}

.footer .about span {
display: block;
color: #000000;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}

.footer .icons {
margin-top: 25px;
}

.footer .icons a {
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #ffffff;
border-radius: 8px;
font-size: 20px;
color: #ff0000;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}


/* footer center*/

.footer .footer-center {
width: 30%;
}

.footer .footer-center i {
/* background-color: #33383b; */
color: #000000;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;

}

.footer .footer-center i.fa-envelope {
font-size: 20px;
line-height: 38px;
}

.footer .footer-center p {
display: inline-block;
color: #000000;
vertical-align: middle;
margin: 0;
}

.footer .footer-center p span {
display: block;
font-weight: normal;
font-size: 14px;
line-height: 2;
}

.footer .footer-center p a {
color: #000000;
text-decoration: none;
}


/* footer right*/

.footer .footer-right {
width: 35%;
}
.footer-right h2 {
width: 100%;
display: flex;
align-items: center;
}

.footer h2 {
color: #000000;
font-size: 21px;
font-weight: normal;
margin: 0;
}

.footer h2 span {
color: #0099ff;
}

.footer .menu {
  width: 100%;
  color: #000000;
  margin: 0px 202px 0px;
  padding: 0;
}

.footer .menu a {
display: inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}

.footer .menu a:hover {
color: #0099ff;
}

.footer .name {
color: #0099ff;
font-size: 14px;
font-weight: normal;
margin: 0;
}

.name{
  text-align: center;
  font-size: 0.7em;
  display: flex;
  justify-content: center;
  margin: 1em 0em;
}
@media (max-width: 1204px){
.footer {
  display: flex;
  flex-direction: column-reverse;
  width: 96%;
  padding: 20px;
}
.footer .footer-left {
  width: 100%;
  padding-right: 15px;
}

.footer .footer-center {
display: flex;
justify-content: center;
width: 100%;
margin: 3em 0em;
line-height: 1.5em;
padding-right: 15px;
}

.footer .footer-right {
display: flex;
width: 100%;
line-height: 1.5em;
}
.footer .about {
text-align: justify;
line-height: 1.5em;
font-size: 12px;

}
.footer .icons {
display: flex;
margin-top: 25px;
justify-content: center;
}

.footer .icons a{
width: 5%;
margin-right: 2em;
}
}
@media (max-width: 768px) {
.footer {
  font-size: 14px;
    width: 95%;
}
.footer .footer-left,
.footer .footer-center,
.footer .footer-right {
  display: block;
  width: 100%;
  text-align: center;
}

.footer-right h2 {
  width: 100%;
  display: flex;
  align-items: center;
}

.footer .footer-center i {
  margin-left: 0;
}

.footer .footer-center {
  display: flex;
  justify-content: center;
  width: 100%;
 margin: 3em 0em;
 line-height: 1.5em;
  padding-right: 15px;
}
.footer .footer-right {
  display: flex;
  flex-direction: column;
    width: 45%;
   line-height: 1.5em;
  }
}

@media (max-width: 767px){

.footer {
  width: 95%;
  font-size: 14px;
}
.footer .footer-left,
.footer .footer-center,
.footer .footer-right {
  display: block;
  width: 100%;
  text-align: center;
}

.footer-right h2 {
  width: 65%;
  display: flex;
  align-items: center;
}
}

@media (max-width: 450px){
.footer {
  width: 90%;
}

.footer-right h2 {
  width: 100%;
  font-size: 30px;
}

.footer .footer-center {
  margin: 1em 0em;
}

.footer .icons a {
width: 10%;
margin-right: 1em;
}

.footer .about {
text-align: justify;
line-height: 1.7em;
font-size: 14px;
}
}

@media (max-width: 450px){
.footer-right h2 {
  width: 100%;
  font-size: 18px;
}
.footer .menu {
  width: 91%;
  color: rgb(0, 0, 0);
  margin: 0px 40px;
  padding: 0px;
}
}

/* About Page */

.abtPage{
/* font-family: "kalam", cursive; */
font-weight: 400;
background-image:linear-gradient(145deg,rgba(180, 249, 255, 0.09),rgba(247, 216, 76, 0.31)); 
background-size: cover;
background-attachment: fixed;
width: 100vw;
margin-bottom: 0em;
}

.secAb1{

padding-top: 4em;
padding-bottom: 2em;
height: 5rem;
display: flex;
color: #000000;
justify-content: center;
align-items: center;  

}
.secAb1 h1{
color: rgb(0, 0, 0);
font-size: 2.2em;
}
.secAb2{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 0em;
margin-left: 8rem;
margin-right: 8rem;

}

.secAb2 h2{
font-weight: 600;
font-size: 1.5em;
margin-bottom: 1em;
color: rgb(0, 0, 0);
}


.abtPage h1{
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 2em;
line-height: 1em;
}

.abtPage p{
color: rgb(0, 0, 0);
text-align: justify;
font-size: 1.2em;
line-height: 2em;

}

@media (max-width:1025px){
.secAb2 {
  margin-left: 2rem;
  margin-right: 2rem;
}

}
@media (max-width:450px) {

.secAb2{
margin-top: 0em;
margin-left: 1rem;
margin-right: 1rem;
}

.secAb1 h1{
  color: rgb(0, 0, 0);
  font-size: 1.5em;
  }

.secAb2 h2{
font-size: 1.3em;
}

.secAb2 p{
font-size: 0.9em;
}

.gallery #v1{
  display: none;
}

.sub1, .sub2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0.3em;
}
.subjP h1{
font-size: 1.3em;
}

.ab1 h5{
font-weight: bold;
font-size: 1em;
}
.ab2 h5{
font-weight: bold;
font-size: 1.3em;
margin-top: 0.2em;
}
.aboutP{
width: 95%;
display: flex;
flex-direction: column;
padding: 5em 0em 5em 1em;
margin-left: 0em;
margin-right: 0em;
}

.ab1, .ab2 {
width: 98%;
/* margin-left: 4em; */
/* margin-right: 8em; */
text-align: justify;
}
.ab2{
margin-top: 1em;
}
.image {
margin-bottom: 16em;
height: 31vh;
width: 100vw;
}

.nav > .nav-links > a {
padding: 0em 1em
}

.subjP .imageS{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.sub1 img{
width: 85%;
}

.sub2 img{
width: 82%;
}

}

@media (max-width: 380px){
.secAb2 h2 {
  font-size: 1.1em;
}

.secAb1 h1{
  color: rgb(0, 0, 0);
  font-size: 1.2em;
  }
}


/* Contact Us Page */

/* Contact US PAge */


input:focus, textarea:focus, keygen:focus, select:focus {
outline: none;
}
::-moz-placeholder {
color: #666;
font-weight: 300;
opacity: 1;
}

::-webkit-input-placeholder {
color: #666;
font-weight: 300;
}


/* Contact Form Styling */
.container {
padding: 0 50px 0px;
}
.textcenter {
text-align: center;
}
.section1 {
text-align: center;
display: table;
width: 100%;
}
.section1 .shtext {
display: block;
margin-top: 20px;
}
.section1 .seperator {
border-bottom:1px solid #a2a2a2;
width: 35px;
display: inline-block;
margin: 20px;
}

.section1 h1 {
font-size: 40px;
color:orangered;
font-weight: 900;
}

.section2 {
  width: 1200px;
  margin: 25px auto;
}
.section2 .col2 {
width: 48.71%;
}
.section2 .col2.first {
float: left;
}
.section2 .col2.last {
float: right;
}
.section2 .col2.column2 {
padding: 0 30px;
}
.section2 span.collig {
color: #a2a2a2;
margin-right: 10px;
display: inline-block;
}
.section2 .sec2addr {
display: block;
line-height: 26px;
}
.section2 .sec2addr p:first-child {
margin-bottom: 10px;
}
.section2 .sec2contactform input[type="text"], 
.section2 .sec2contactform input[type="email"],
.section2 .sec2contactform textarea {
  padding: 18px;
  border: 0;
  background: #EDEDED;
  margin: 7px 0;
}
.section2 .sec2contactform textarea {
width: 100%;
display: block;
color: #666;
resize:none;
}
.section2 .sec2contactform input[type="submit"] {
padding: 15px 40px;
  color: #fff;
  border: 0;
  border-radius: 2em;
  background: #0070c5;
  font-size: 16px;
  text-transform: uppercase;
  margin: 7px 0;
  cursor: pointer;
}
.section2 .sec2contactform h3 {
font-weight: normal;
  margin: 20px 0;
  margin-top: 30px;
  border-bottom: 1px solid #ffffff;
  padding-bottom: 19px;
  color: #8f5a00;
}

.section2 .sec2addr p{
color: rgb(0, 0, 0);
}

/* @media querries */

@media only screen and (max-width: 1266px) {
iframe{
  width: 30em;
  height: 34em;
}
.section2 {
  width: 100%;
}
}
@media only screen and (max-width: 960px) {
.container {
  padding: 0 30px 70px;
}
.section2 .col2 {
  width: 100%;
  display: block;
}
.section2 .col2.first {
  margin-bottom: 10px;
}
.section2 .col2.column2 {
  padding: 0;
}
body .sec2map {
  height: 250px !important;
}
}
@media only screen and (max-width: 768px) {

iframe{
  width: 45em;
  height: 25em;
}
.section2 .sec2addr {
  font-size: 14px;
}
.section2 .sec2contactform h3 {
  font-size: 16px;
}
.section2 .sec2contactform input[type="text"], .section2 .sec2contactform input[type="email"], .section2 .sec2contactform textarea {
  padding: 10px;
  margin:3px 0;
}
.section2 .sec2contactform input[type="submit"] {
  padding: 10px 30px;
  font-size: 14px;
}
}
@media only screen and (max-width: 450px) {

iframe{
  width: 22.5em;
  height: 25em;
}
.section1 h1 {
  font-size: 28px;
}	
}

@media (max-width: 380px) {

iframe{
  width: 20em;
  height: 20em;
}
.section1 h1 {
  font-size: 28px;
}	
}


.cont{
background-color: #00467fdc;
border-radius:2em 0em 0em 2em;
color: white;
padding:1em 2em;
position: fixed;
top: 30em;
right: 0em;
z-index: 100;
}

@media (max-width:450px)and (min-width:376px){
  .logo {
    text-align: left;
    margin-left: 0em;
    font-size: 0.7em;
}
.cont{
  padding:1em 0.8em;
  width: 10em;
  font-size: 0.9em;
  
          }
}



/*HEADING*/
.custom-text--heading {
  color: #000000;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 18px;
}

/*BODY TEXT*/
.custom-text--copy {
  text-align: justify;
  color: #2d2e31;
  font-size: 18px;
  line-height: 33px;
  margin-bottom: 30px;
}

/*LINK OR BUTTON*/
.custom-text--button {
  background: #252528;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  width: fit-content;
  cursor: pointer;
  text-decoration: none;
  text-transform: UPPERCASE;
}

/*HOVER AND KEYBOARD FOCUS EFFECT*/
.custom-text--button:hover, .custom-text--button:active, .custom-text--button:focus {
  background: #32343a;
  outline: 2px solid #425ccd;
}

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

/*PICTURE OR IMAGE*/
.custom-media--image {
  padding-top: 1em;
  width: 100%;
  box-sizing: border-box;
}


/*==============================================
GENERAL LAYOUT

To make changes from this point on, 
we recommend having a basic understanding of CSS
===============================================*/

.custom-container {
  BACKGROUND: linear-gradient(135deg, rgba(214, 214, 214, 0.912),rgba(206, 206, 206, 0.868)),url(./img/img4.png);
  background-attachment: fixed;
  background-size: cover;
  margin: auto;
  max-width: 1140px;
}

.custom-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 60px 24px;
}

.custom-text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.custom-media {
display: flex;
justify-content: center;
}

@media only screen and (max-width: 950px) {
.custom-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
  padding: 0px;
}
.custom-text {
  padding: 37px;
  margin: auto;
  width: 90%;
  text-align: center;
  grid-row: 2;
}
.custom-text--heading {
  text-align: center;
}
.custom-text--button {
  display: flex;
  margin: auto;
}
}

@media screen and (max-width: 568px) {
.custom-text {
  padding: 0px 0px;
}
.custom-text--heading {
  font-size: 25px;
}
.custom-text--copy,
.custom-text--button {
  font-size: 16px;
  margin-bottom: 0px;
}
}