@import url("https://fonts.googleapis.com/css2?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");

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 2rem;
}

* {
  box-sizing: border-box;
  
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  margin: 0;
  padding: 0;
}

/*---------Hero and navbar----------*/
/* .hero{
     /* width:100vw; /
} */
.hero {
  min-height: 464px;
  height: 85vh;
  /* min-height: ; */
  background-image: url("assets/pexels-pixabay-256262.jpg");
  background-repeat: no-repeat, repeat;
  /* background-color: green; */
  background-attachment: fixed;
  background-position:center;

  background-size: cover;
}

@media (max-width: 1000px) {
  .hero{
    background-image: url(assets/mobile_background.jpg);
  }
}


/* 
  #17223D
  #65CCDB

  */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.brand-title {
  margin: 1rem 7rem;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  font-size: 1.15rem;
  list-style: none;
  border-radius: 1rem;
  margin-right: 0.5rem;
  text-transform: uppercase;
}

.navbar-links li a {
  text-decoration: none;
  color: white;
  padding: 1rem;
  display: block;
}

.navbar-links li:hover {
  background-color: #65cbdb56;
}

.toggle-button {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.current {
  text-decoration: underline;
  text-underline-offset: 8px;
  color: white;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}
#hero-heading{
  color:white;
  font-size: 5rem; 
  margin-left: 20rem;
  margin-top: 6rem;
}
@media (max-width: 1000px) {
  .brand-title{
    margin:2rem 5rem;
  }
  .toggle-button {
    display: flex;
    margin:2rem;
  }

  .navbar-links {
    display: none;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul {
    width: 100vw;
    flex-direction: column;
  }

  .navbar-links li {
    text-align: center;
    /* background-color: red; */
  }

  .navbar-links li a {
    padding: 0.5rem 1rem;
  }

  .active {
    display: block;
  }
}

/*-----------Content----------*/

.text{
  font-size: 1.5rem; 
  line-height: 3rem;
}

.textContainer {
  width: 75vw;
  margin: auto;
}

.headings {
  /* background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
     */
  background: rgb(17, 0, 36);
  background: linear-gradient(
    90deg,
    rgba(17, 0, 36, 1) 0%,
    rgba(9, 38, 121, 1) 26%,
    rgba(0, 255, 171, 1) 100%
  );
  align-self: center;
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  text-align: center;

  font-size: 5rem;
}

.heightGiver {
  height: 3rem;
}

.innerHeading {
  font-weight: bold;
}

form {
  display: flex;
  flex-direction: column;

  align-items: center;
}

label {
  width: 30vw;
}

input {
  width: 30vw;
  height: 2.3rem;
  margin-bottom: 0.8rem;
  border: 0px;
  border-bottom: 1px solid #ccc;
}

textarea {
  width: 30vw;
  margin-bottom: 0.8rem;
  border: 0px;
  border-bottom: 1px solid #ccc;
}

button {
  width: 10vw;
}

.btn-grad {
  background-image: linear-gradient(
    to right,
    #314755 0%,
    #26a0da 51%,
    #314755 100%
  );
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

@media (max-width: 700px) {
  .btn-grad{
    width:50vw;
  }
  label {
    width: 70vw;
  }

  input {
    width: 70vw;
    height: 4vh;
    margin-bottom: 0.8rem;
  }

  textarea {
    width: 70vw;
    margin-bottom: 0.8rem;
  }

  button {
    width: 25vw;
  }
}
/* gallary */
#gal {
  width: 70vw;
  margin: auto;
}

#uul {
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}
.ullli {
  width: 50%;
  list-style: none;
  margin: auto;
}

.ullli img {
  width: 100%;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 5px;
  border-radius: 30px;
  margin: auto;
}

.ullli p {
  text-align: center;
  padding-top: 10px;
  font-weight: bold;
  font-size: 1.6rem;
  background-color: rgb(184, 250, 158);
  margin-bottom: 0px;
}
.imheadg {
  width: 50%;
  margin: auto;
}
.imheadgpara {
  border-radius: 10px;
}
@media (max-width: 820px) {
  .ullli p {
    font-size: 1.2rem;
  }
  .ullli {
    width: 100%;
  }
  .changedulli{
    width:100%;
  }
  .imheadg {
    width: 80%;
    margin: auto;
    padding-top: 10px;
  }
}




/* --------Footer------- */
#botsvg {
  margin-bottom: 0px;
  /* translate: */
}

.footer {
  transform: translateY(-1rem);
  display: flex;
  margin-top: 0px;
  justify-content: space-evenly;

  /* background-color: green; */
  /* background: rgb(23,34,61);
background: linear-gradient(180deg, rgba(23,34,61,1) 9%, rgba(24,138,185,1) 57%, rgba(255,255,255,1) 100%); */
  /* background: rgb(23,34,61);
background: linear-gradient(180deg, rgba(23,34,61,1) 5%, rgba(24,138,185,1) 57%, rgba(255,255,255,1) 100%);  */

  background: rgb(23, 34, 61);
  background: linear-gradient(
    180deg,
    rgba(23, 34, 61, 1) 15%,
    rgba(24, 138, 185, 1) 63%,
    rgba(255, 255, 255, 1) 100%
  );
}

.map {
  padding: 3rem;
  /* background-color: red; */
}

iframe {
  border-radius: 2rem;
  width: 500px;
  height: 350px;
  max-width: 500px;
  max-height: 350px;
}

.address {
  padding: 4rem;
  color: white;
}

@media (max-width: 1099px) {
  .footer {
    flex-direction: column;
    align-items: center;
  }

  .map {
    padding: 2rem;
  }

  .address {
    padding: 0rem;
    margin-bottom: 3rem;
    width: 60vw;
    color: black;
  }
  iframe{
    width: 80vw;
    height: 80vw;
  }
}