@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@1,600&family=Roboto+Slab:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

:root {
  --dark-background: #f0faff;

  --prime: #ed2226;
  --sec: #f7bd01;



  --cursive: 'Roboto Slab', serif;
  --para: 'Lato', sans-serif;

  --text-head: #393939;
  --text-para: #515151;

  --image-shadow: rgba(64, 64, 64, 0.353);
  --tran-1 : 0.3s;
  --tran-2 : 0.4s;
}

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

html {
  font-family: var(--para);
  color: var(--text-para);
}

body {
  padding: 0;
  margin: 0;
  z-index: 1;
  background: var(--dark-background);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--cursive);
  font-weight: 700;
  letter-spacing: 0.0625rem;
  color: var(--text-head);
}

a {
  text-decoration: none;
}

p {
  letter-spacing: 0.0625rem;
  color: var(--text-para);
}

table.noborder td,table.noborder th {
  border: none;
}

table tr,
table th, table td {
    overflow:hidden;
}

table tr,
table th {
  color: var(--text-para);
}

section {
  margin: clamp(4rem,4vh,6rem) 0;
}

.btn-prime {
  font-family: var(--para);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  color: var(--dark-background);
  background-color: var(--prime);
  padding: clamp(1rem,1vh,3rem) clamp(2rem,2vw,4rem);
  border: 2px solid var(--prime);
  transition: all 500ms ease-in-out;
  border-radius: 0;
}

.btn-prime:hover {
  background-color: transparent;
  border: 2px solid var(--prime);
  color: var(--text-para);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input.form-control,
textarea.form-control {
  border-radius: 0px;
  box-shadow: none;
}

.form-control,
.form-control:focus {
  background: transparent;
  border: none;
  color: var(--text-head);
  box-shadow: none;
  border: 1px solid hsla(359, 85%, 53%, 0.529);
  backdrop-filter: blur(3px);
}

strong {
  color: var(--prime);
  font-family: var(--cursive);
  font-weight:500;
}

/* navb */
.navbar {
  background: var(--dark-background);
  filter: drop-shadow(0px 1px 0.1rem rgba(44, 44, 44, 0.249));
  transition: all 1s ease;
  z-index: 99999999;
}

.logo {
  overflow: hidden;
  padding: 0;
  margin-inline:0;
  background: red;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem,3vh,2rem);
  letter-spacing: 1px;
  background: linear-gradient(to bottom right, rgba(255, 33, 37, 0.849),rgb(255, 141, 47), rgba(251, 0, 255, 0.438));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.nav-item .nav-link{
  color: var(--text-para);
  font-family: var(--cursive);
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 1rem;
  transition: all 0.4s ease-in-out;
  border-radius: 0.3rem;
  padding-inline: 1rem;
}

.nav-item .nav-link.active {
  background: var(--prime);
  color: var(--dark-background);
}

.margin-inline {
  margin-inline-start: 1rem;
}

/* banner section */
section#banner, section#contact{
  margin: 0;
}



#banner h1 {
  font-family: var(--cursive);
  font-weight: 700;
  font-size: clamp(1.5em,5vw,4em);
  color: var(--prime);
  text-transform: capitalize;
}

#banner h2 {
  font-family: var(--cursive);
  font-weight: 600;
  font-size: clamp(1em,3vw,2em);
  text-transform: capitalize;
}

#banner p {
  font-size: clamp(0.5em,3vw,1.2rem);
  color: var(--text-banner);
  word-wrap: break-word;
}

#banner .rows {
  display: grid;
  gap: 1.5rem;
  grid-template-areas: 
  "image image"
  "text text"
  "img img";
  align-items: center;
  isolation: isolate;
}

#banner .rows > div {
  grid-column: 1 /-1;
  grid-area: text;
}

#banner .rotating-image {
  grid-column: 1 /-1;
  grid-row: image /  img;
  animation-name: rotating;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: -1;
  opacity: 0.1;

}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* about section */


.about-text {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 min(4rem, 5vw);
  backdrop-filter: blur(1px);
  box-shadow: 0 4px 5px rgba(41, 41, 41, 0.1);
  border-radius: 2.375em;
}

#about img {
  border-radius: 20px;
  filter: drop-shadow(0px 0px 5px rgba(41, 41, 41, 0.4));
}

/* Services section */


#services div[class*="col-"]:last-child {
  padding:  clamp(2rem, 3vh, 4rem) 0;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to top left, rgba(255, 33, 37, 0.849),rgb(255, 141, 47), rgba(255, 213, 0, 0.438));
}

#dots {

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem 0px;
}

#services .owl-dot {
  transition: all var(--tran-2) ease-in-out;
  color: var(--text-para);
  -webkit-box-shadow: 1px 0px 0px 0px rgba(32, 32, 32, 0.226);
  -moz-box-shadow: 1px 0px 0px 0px rgba(32, 32, 32, 0.226);
  box-shadow: 1px 0px 0px 0px rgba(32, 32, 32, 0.226);
  padding-inline: 0.5rem;
  /* box-shadow: 0  2px 4px var(--image-shadow);
  padding: 1.4rem; */
  
}

#services .owl-dot:last-child {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* #services .owl-dot.active{
  background: var(--prime);
} */

#services .owl-dot button {
  width: 100%;
  text-align: start;
  font-size: 1.1rem;
  font-weight: 400;
  background: transparent;
  font-family: var(--para);
  color: var(--text-para);
  border: 0;
  outline: 0;
}

#services .owl-dot.active button {
  color: var(--prime);
  
  transition: color;
}



#services .item {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0 clamp(1.5rem, 2vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.245rem;
}

#services .item img{
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 9px solid var(--dark-background);
}


/* gallery section */

#gallery {
  background: transparent;
}

#gallery .owl-carousel .owl-stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

#gallery .owl-carousel .item {
  will-change: transform;
  box-sizing: border-box;
  padding: clamp(1rem, 1vh, 2rem) 0.5rem;
  border-radius: 10px;
  transition: opacity 0.5s ease;
  filter: brightness(0.6);
}

#gallery .item img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: var(--image-shadow) 0px 4px 10px, var(--image-shadow) 0px -4px 16px;
}


/* Video Gallery styles */ 

#vg .container-fluid {
  padding-top: clamp(2rem, 3vh, 4rem);
  padding-bottom: clamp(2rem, 3vh, 4rem);
  background-image: linear-gradient(to top left, rgba(255, 33, 37, 0.849),rgb(255, 141, 47), rgba(255, 213, 0, 0.438));
}

#vg .row div[class="col-"]:first-child {
  padding:  clamp(2rem, 3vh, 4rem) clamp(3rem, 4vw, 5rem);
}

#vg iframe {
  width: 100%;
  aspect-ratio: 16/9;
}


/* Payment options styles */

#pay .row div[class*="col-"] {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: clamp(2rem, 3vh, 4rem) clamp(2rem, 3vw, 4rem);
  border-radius: 1rem;
  box-shadow:-1px -1px 4px rgba(64, 64, 64, 0.353);
  outline: var(--prime) solid 1px;
}
#pay .row div[class*="col-"] img {
  width: 60%;
  margin: min(1.2rem, 2vh) 0;
}


#pay .row div[class="upi-apps"]{
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0 1rem;
  padding: 0 clamp(2rem, 3vw,4rem);
}

#pay .row .upi-apps img {
  height: max(2rem,2.5vh) !important;
  width: auto !important;
}

/* Contact US styles */
#contact {
  background: url(https://cdn.wallpapersafari.com/0/51/pY57qk.jpg) no-repeat bottom fixed;
}

#contact .container {
  display: grid;
  grid-template-areas: 
  "text";
  justify-content: center;
  text-align: center;
  padding: min(3rem, 3vh) 0;
  transition: all 500ms ease;
}

#contact .form-box {
  grid-area: text;
  margin: 1rem;
  background: var(--dark-background);
  backdrop-filter: blur(1px);
  padding: min(3rem, 3vh) min(3rem, 4vw);
}

#contact .form-box form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* footer styles */
footer {
  background: var(--dark-background);
}

footer .container {
  display: flex;
  gap: 2rem;
}

footer .container > * {
  flex: 1;
}

footer .iconbox ul {
  flex-direction: row;
  align-items: center;
}

footer .iconbox li {
  width: 1.5rem;
}

footer .iconbox li a img {
  width: 100%;
}

footer .iconbox li a:hover img {
  animation: spin 0.4s linear forwards;
}

footer .form-check {
  overflow: hidden;
  border-radius: 0;
}

footer .tabs {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

footer .tabs strong {
  text-transform: capitalize;
  margin-right: .75rem;
}

footer .tabs > span {
  display: grid;
  grid-template-columns: 90px 1fr;
}

.info {
  border-top: 1px solid hsla(359, 85%, 53%, 0.529);
}

@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(-360deg);
  }
}

/* whatsapp */
.whatsapp {
  position: fixed;
  right: 2%;
  bottom: 10%;
  width: 60px;
  z-index: 999999999999999999999999999999999999999999999999999999999999999;
}

/* password show hidden */
#eye{
  position: absolute;
  top: 50%;
  right:1rem ;
  transform: translateY(-50%);
  color: var(--text-head);
  cursor: pointer;
}

#expand{
  padding-block: 30vh;

}
#expand h1{
  letter-spacing: 2px;
}

#insert {
  position: fixed;
  bottom: 1.5em;
  left: 1.5em;
  width: 3rem;
  font-size: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--prime);
  background: transparent;
  text-align: center;
  display: flex;
  align-items: center;
  color: var(--text-head);
  justify-content: center;
  transition: transform 0.3s ease;
}

#insert:hover {
  transform: scale(1.2);
}

#login .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#login .container p { padding-block:0.2rem; margin:0;}
#login .container a{ padding:0;}

#login .container form {
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
  align-self: center;
  padding:clamp(2rem,5vh,5rem) clamp(2rem,5vw,5rem);
}

#login .container form label {
  font-family: var(--cursive);
}

.grid-form {
  display:grid;
  gap:1.4rem;
}

label {
  font-family: var(--cursive);
  font-weight:500;
  font-size: 1.2rem;
}