*,
*::before,
*::after{
    box-sizing: border-box;
    margin:0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
}
@media only screen and (max-width: 700px ){
    *{
      font-size: 0.98rem;
    }
}


h3{
  font-weight: bold;
}

.header{
    position:relative;
    width: 100%;
    height:100vh;
    /* overflow: hidden; */
    background-image:linear-gradient(-45deg, rgba(241, 0, 0, 0.785) 5%, rgba(207, 0, 248, 0.764)) ;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;

}

/* @media only screen and (max-width:756px){
  .header{
    background-image:none;
    background-color: blueviolet;
  }
} */


/* NAVBAR CSS */



.topnav {
    overflow: hidden;
    background-color: rgb(54, 54, 92);
    z-index: 10000;
    font-size: 3rem;
    font-weight: bolder;
    position: fixed;
    width: 100%;
  }
  
  .topnav a {
    z-index: 1000;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    font-size: 20px;
    margin-right: 1vw;
  }
  
  .logo{
    width: 70px;
    height: auto;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: transparent;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav a:hover{
      color:yellow;
      background-color: inherit;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: fixed; width:100%; z-index:10000;}
    .topnav.responsive .icon {
      position: fixed;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }



/* NAVBAR CSS OVER */

/* .sec_one{
    position:absolute;
    border-width: 20vh 0 0 100vw;
    border-color: transparent transparent transparent white;
    border-style: solid;
    bottom: 0%;
    left: 0%;
} */

.sec2,.sec3{
    height: 70vh;
    width:100%;
    position:relative;
}

.sec2{
  background-color: rgb(250, 251, 252);
  padding:7%;
  padding-right: 50vw;
}

.sec3{
    background-color: rgb(54, 54, 92);
    background-image:url('./assets/background_images/jagmandir.png');
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.sec4{
  background-color: rgb(54, 54, 92);
  color:white;
  padding: 7%;
  display: flex;
  align-items: center;
  
}


.contact{
  display: block;
  text-align: justify;
  padding-left: 10%;
}
.logo2{
  padding: 5%;
  width: 35vw;
  height: auto;
  float: left;
}

.sec_three{
    position: relative;
    border-width: 0 0 100px 99vw ;
    border-color:transparent transparent transparent rgb(250, 251, 252);
    top: 0%;
    left: 0%;
    border-style: solid;
}
.sec_four{
  text-align: center;
}

.services{
  padding:auto
}

/* .h1{
  color:white;
  font-size:3rem;
  margin-right: 10vw;
  margin-top: 250px;
  margin-left: 60%;
  position: absolute;
}

@media only screen and (max-width: 756px ){
  .h1{
    font-size: 2.5rem;
    margin-left: 20vw;
    margin-right: 20vw;
  }
}

.head{
  position: absolute;
  margin-left: 10%;
  margin-top: max(20vh,40px);
  max-width: 50%;
  height:auto;
}

@media only screen and (max-width:756px){
  .head{
  display: block;
  max-width:60%;
  margin-left: auto;
  margin-right: auto;
  }
} */

.heading{
  position: relative;
  border-radius: 2%;
  padding: 7%;
  padding-top: 10%;
  max-width: 60vw;
  /* float: left; */
}

.h1{
  color: #ffffff;
  font-size: 4rem;
  margin-top: 9vh;
  font-weight: bold;
  position: relative;
}

.head{
  max-width: 60%;
  margin-left: 5%;
  margin-top: 25vh;
  margin-bottom: 2vh;

}

.album{
  position: absolute;
  max-width: 30vw;
  height:auto;
  /* margin: 45vh 10% 0 0; */
  z-index: 100;
  margin-left: 65vw;
  margin-top: -37vh;
}


.svg2{
  max-width: 25vw;
  position:absolute;
  margin-left: 55vw;
  margin-top: -35vh;
}

.container {
  position: relative;
  overflow: hidden;
  margin-bottom: 0%;
  width: 100%;
  height: 70vh;
  padding-top: 2%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height:60vh;
}


@media only screen and (max-width: 1138px){
  .h1{
    /* margin-top: 15vh; */
    font-size: 3rem;
    font-weight: 900;
    /* margin-left: 15vw;
    margin-right: 15vw; */
  }
  .head{
    margin-top: 5vh;
    max-width: 90%;
    margin-left: 5vw;
    margin-right: 5vw;
  }
  
  /* .album{
    position:absolute;
    margin: 0;
    padding-right: 10%;
    max-width: 50vw;
    height: auto;
    float: right;
  } */

  .header{
    height: 80vh;
  }

  .svg2{
    max-width: 35vw;
    margin-top: -400px;
  }

  .logo2{
    width: 800px;
  }
}

@media only screen and (max-width:500px){

  .h1{
    font-size: 2rem;
    font-weight: 800;
  }

  .header{
    height: 100vh;
  }
  
  .album{
    min-width: 100%;
    height: auto;
    padding:10%;
    padding-top: 3%;
    margin:auto;
    float: none;
  }

  .heading{
    max-width: 100%;
  }

  .sec2{
    padding-right: 7%;
    height: 90vh;
  }

  .svg2{
    position: relative;
    max-width: 70%;
    padding:5%;
    margin-left: 10%;
    margin-top: 0%;
  }

  .sec4{
    flex-direction: column;
  }

  .logo2{
    width:100%;
    padding:5%;
    padding-bottom: 5vh;
  }

  .services{
    padding-top: 10vh;
  }
}