@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');



*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Copperplate, Papyrus, fantasy;
  background-color: #D7DBDD;
  /* background-image: url(/images/symbol-scatter-haikei.png); */
  background-repeat: no-repeat;
}

a {
  text-decoration: none;
}


.splash {
  font-size: 2rem;
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 7.5rem;
  background-image: url(/images/gallery-1.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.intro {
  padding-right: 15px;
}


.splash h1 {
  color: #ffffff;
  text-shadow: 2px 5px black;
}

.splash p {
  padding-top: 10px;
  color: #ffffff;
  text-shadow: 5px 2px blueviolet;
  font-weight: 600;
}


.wrapper {
  background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(251, 222, 238, 1) 15.6%, rgba(206, 201, 226, 1) 80.3%);
  /* width: 90%;
  max-width: 80rem; */
}
.wrapper1 h1 {
  /* color: #ffffff; */
  font-size: 2rem;
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 7.5rem;
  /* text-shadow: 5px 5px #000; */
}

.wrapper h1 {
  /* color: #ffffff; */
  font-size: 2rem;
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 7.5rem;
  /* text-shadow: 5px 5px #000; */
}

.wrapper h3{
  font-size: 1.5rem;
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .75rem;
}

.cols {
  background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(251, 222, 238, 1) 15.6%, rgba(206, 201, 226, 1) 80.3%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-around;
}

.col {
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;

}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  min-height: 280px;
  box-shadow: 0 0 10px solid blue;

  height: auto;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
}




.back {
  /*background: -webkit-linear-gradient(45deg, #cedce7 0%, #596a72 100%);
  background: -o-linear-gradient(45deg, #cedce7 0%, #596a72 100%); */
  /* background: linear-gradient(45deg, #cedce7 0%, #596a72 100%); */
  background: #222121;
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  opacity: .6;
  background-color: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container:hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container:hover .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.front .inner p {
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}


.flex-box {
  margin: 150px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  align-items: center;
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  animation: animate 20s linear infinite;
}

@keyframes animate {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }

  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.box span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i)* 45deg)) translateZ(300px);
  -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0004);
}

.box span img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

.about {
  display: flex;
  position: relative;
  height: fit-content;
  justify-content: space-evenly;
  flex-wrap: wrap;
}


.frame {
  /* max-width: 35rem; */
  flex: 50%;
  height: fit-content;
  max-width: fit-content;
  margin-top: 15px;
  border-top: 40px groove white;
  border-bottom: 40px groove white;
  border-right: 28px solid gray;
  border-left: 28px solid gray;
}


@media screen and (max-width: 768px) {
  iframe {
    max-width: 26rem;
  }
}
.split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 75px;
  margin: 10px;
  padding-bottom: 50px;
}


div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
.container p{
  font-weight: 900;
  font-size: 1.15rem;
}

.about .content {
  flex: 0 1 50%;
  display: inline-block;
  font-size: larger;
  position: relative;
  font-weight: 600;
}

.about h1 {
  text-align: center
}


.outerdiv {
  width: 100%;
  background: #EDF2F8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerdiv {
  transform: scale(0.9);
  margin: 1rem;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-rows: repeat(2, 22rem);
  grid-template-columns: repeat(4, 17rem);
}

.eachdiv {
  padding: 1rem 2rem;
  border-radius: 0.8rem;
  box-shadow: 5px 5px 20px #6d6b6b6b;
  color: white;
}

.div1 {
  background: #733FC8;
  grid-column: 1/3;
  grid-row: 1/2;
  background-image: url();
  background-repeat: no-repeat;
  background-position-x: 25rem;
}

.div2 {
  background: #49556B;
  grid-column: 3/4;
  grid-row: 1/2;
}

.div3 {
  background: white;
  grid-column: 4/5;
  grid-row: 1/3;
  color: black;
}

.div4 {
  background: white;
  grid-column: 1/2;
  grid-row: 2/3;
  color: black;
}

.div5 {
  background: #18202D;
  grid-column: 2/4;
  grid-row: 2/3;
}

.userdetails {
  display: flex;
}

.imgbox {
  margin-right: 1rem;
}

.imgbox img {
  border-radius: 50%;
  width: 2rem;
  border: 2px solid #cec5c5;
}

.detbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.detbox p {
  margin: 0;
}

.detbox .name {
  color: hsl(0, 0%, 81%);
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
  font-weight: 600;
}

.detbox .name.dark {
  color: #49505A;
}

.detbox .designation {
  color: hsl(0, 0%, 81%);
  opacity: 50%;
  font-size: 0.8rem;
}

.detbox .designation.dark {
  color: #49505A;
}

.review h4 {
  font-size: 1.4rem;
  color: #F3DEFF;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  margin-top: 0.2rem;
}

.review.dark h4 {
  color: #4B5258;
}

.review p {
  font-size: 0.95rem;
  color: #F3DEFF;
  font-weight: 500;
  opacity: 50%;
  line-height: 1.5;
}

.review.dark p {
  color: #0e0e0e;
}


@media (width <=53rem) {
  .footer-subscribe {
    max-width: 100%;
  }
}

@media only screen and (max-width: 1000px) {
  .innerdiv {
    transform: scale(0.7);
  }
}

@media only screen and (max-width: 800px) {
  .innerdiv {
    transform: scale(0.6);
  }
}

@media only screen and (max-width: 980px) {
  .div1 {
    background-position-x: 10rem;
  }

  .innerdiv {
    display: flex;
    flex-direction: column;
    transform: scale(1);
    margin: 2rem;
    margin-bottom: 5rem;
  }

  .attribution {
    position: relative;
  }
}


.img1 {
  margin-top: 50px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: space-around;
  gap: 40px;
  align-items: center;
}

@media screen and (min-width: 980px) {
  .img1 img {
    --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
    /* --m:
      left var(--_i, 0%) top var(--_g),
      bottom var(--_i, 0%) left var(--_g),
      top var(--_i, 0%) right var(--_g),
      right var(--_i, 0%) bottom var(--_g);
    -webkit-mask: var(--m); */
    mask: var(--m);
    /* filter: grayscale(); */
    /* transition: .3s linear; */
    /* cursor: pointer; */
  }

  img:hover {
    --_i: 10%;
    filter: grayscale(0);
  }

}



@media screen and (max-width: 1280px) {
  .img1 {
    grid-template-columns: auto auto;
    /* display: flex;
    flex-wrap: wrap;
    flex-basis: 200px; */

  }
}

@media screen and (max-width: 600px) {
  .img1 {
    grid-template-columns: auto;
  }
}


@media (max-width: 53rem) {
  .menu {
    display: none;
  }

  .menu-btn {
    display: block;
  }
}

@media only screen and (max-width: 64rem) {
  .col {
    width: calc(33.333333% - 2rem);
  }
}

@media only screen and (max-width: 48rem) {
  .col {
    width: calc(50% - 2rem);
  }
}

@media only screen and (max-width: 32rem) {
  .col {
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

@media (max-width: 300px) {

  .prev,
  .next,
  .text {
    font-size: 11px;
  }
}

@media only screen and (max-width:700px) {
  .splash {
    font-size: 1.25rem;
  }

  .splash p{
    color: black;
    text-shadow: 5px 2px wheat;
  }
}