* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  width: 100%;
  height: 100%;
}
.main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.navbar {
  width: 100%;
  height: 10%;
  background-color: rgb(13, 27, 42);
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.logo {
  padding-left: 24px;
}
.icons div a {
  text-decoration: none;
  color: rgb(224, 225, 221);
  font-family: Roboto;
}
.icons div a:hover {
  color: rgb(119, 141, 169);
  cursor: pointer;
}
.logo a {
  text-decoration: none;
  color: rgb(224, 225, 221);
  font-family: Roboto;
  font-size: 1.7rem;
}
.m {
  color: rgb(119, 141, 169);
}
.contact {
  padding-right: 24px;
}
.fakenavbar {
  width: 100%;
  height: 10%;
  background-color: rgb(13, 27, 42);
}
.gallery {
  height: 90%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2px;
  padding: 0px;
  background-color: rgb(13, 27, 42);
}
.img {
  flex: 1;
  background-size: cover;
  background-position: center;
}
.one {
  background-image: url(https://i.pinimg.com/736x/4d/76/50/4d76509c2a95964bcae34dab8bc29f9f.jpg);
}
.two {
  background-image: url(https://i.pinimg.com/736x/ef/1b/60/ef1b60198bd89de807d4d961095a1193.jpg);
}
.three {
  background-image: url(https://i.pinimg.com/736x/cb/78/2c/cb782cd504acebd5b1bfa19d765d5162.jpg);
}
.text {
  width: 100%;
  height: 40%;
  background-color: rgb(13, 27, 42);
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 80%;
  height: 100%;
  background-color: rgba(27, 38, 59, 0.5);
  color: white;
  transform: translate(0, -50px);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 4px 4px 5px rgba(224, 225, 221, 0.3);
}
.heading {
  font-size: 1.5rem;
  text-align: center;
  font-family: Roboto;
}
.n {
  font-size: 0.8rem;
  font-family: Roboto;
  text-align: center;
  padding-bottom: 3px;
  color: rgb(119, 141, 169);
}
.subheading {
  color: rgb(224, 225, 221);
  font-size: 2.5rem;
  text-align: center;
  font-family: Roboto;
}
.content {
  display: flex;
  flex-wrap: wrap;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: rgb(224, 225, 221);
  text-align: justify;
  padding: 3px 20px 20px;
  line-height: 1.3rem;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn button {
  padding: 10px 20px;
  border-radius: 15px;
  border-style: none;
  background-color: rgb(65, 90, 119);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.btn button:hover {
  transform: scale(1.05);
}
.btn button a {
  text-decoration: none;
  color: rgb(224, 225, 221);
  font-family: Roboto;
}
.btn:hover {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in;
}
.abt {
  width: 100%;
  height: 12%;
  background-color: rgba(141, 153, 174, 0.5);
}
.abt {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.abt_us {
  color: rgb(13, 27, 42);
  font-family: Roboto;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: bold;
  text-decoration: overline;
}
.abt_text {
  color: rgb(27, 38, 59);
  text-align: center;
  font-family: Roboto;
  padding-bottom: 10px;
}
.spc {
  width: 100%;
  height: 15%;
  background-color: rgb(13, 27, 42);
}
.cnt {
  width: 100%;
  height: auto;
}
.cnt div {
  width: 100%;
}
#foot {
  width: 100%;
  background-color: rgba(141, 153, 174, 0.5);
  text-align: center;
  font-family: Roboto;
  padding-top: 5px;
  padding-bottom: 5px;
}
.foot_icn a {
  font-size: 20px;
  color: rgb(13, 27, 42);
}
.cpy {
  color: rgb(27, 38, 59);
  padding-bottom: 5px;
}
.foot_icn {
  padding: 1px 0 10px;
}
@media (max-width: 650px) {
  .content {
    font-size: 12px;
    padding-bottom: 5px;
  }
  .spc {
    height: 12%;
  }
}
@media (max-width: 490px) {
  .content {
    font-size: 12px;
  }
  .heading {
    font-size: 16px;
  }
  .logo {
    padding-left: 12px;
  }
  .logo a {
    font-size: 24px;
  }
  .icons {
    gap: 20px;
  }
  .icons div a {
    font-size: 12px;
  }
  .n {
    font-size: 10px;
  }
  .subheading {
    font-size: 28px;
  }
  .three {
    width: 100%;
  }
  .one,
  .two {
    display: none;
  }
  .abt_text,
  .cpy {
    font-size: 14px;
  }
  .contact {
    padding-right: 12px;
  }
}
@media (max-width: 350px) {
  .subheading {
    font-size: 20px;
  }
  .content {
    font-size: 10px;
  }
}
@media (max-width: 280px) {
  .subheading {
    font-size: 15px;
  }
  .content {
    font-size: 8px;
    padding: 0px 10px 0px;
  }
  .heading{
    font-size: 12px;
  }
}