@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
   margin: 0;
   padding: 0;
}


button {
   position: absolute;
   bottom: 5%;
   left: 50%;
   transform: translateX(-50%);
   border: 1px solid white;
   border-radius: 5px;
   font-size: 0.9rem;
   padding: 0.5rem 0.9em;
   background: #000000;
   color: white;
   -webkit-font-smoothing: antialiased;
   font-weight: bold;
   cursor: pointer;
   transition: all .3s;
}




#HomePhase {
   position: absolute;
   z-index: 10;
   top: 0;
}

.video-background {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
   transition: opacity 0.5s ease-in-out;
   opacity: 1;
}

.video-background.loading {
   opacity: 0;
}

#container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   z-index: 2;
   width: -webkit-fill-available;
   gap: 20px;
   position: absolute;
   top: 23%;
}

* {
   box-sizing: border-box;
}

body {
   width: 100vw;

}

@keyframes moveUp {
   0% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-10px);
   }

   100% {
      transform: translateY(0);
   }
}

:root {
   --card-height: 422px;
   --card-width: calc(var(--card-height) / 1.5);
}

.label {
   position: absolute;
   bottom: 31px;
   left: 50%;
   transform: translateX(-50%);
   font-family: 'Poppins', sans-serif;
   font-size: 33px;
   font-weight: 600;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: transparent;
   background-image: linear-gradient(#ffffff, #94705c);
   background-clip: text;
   flex-direction: column;
}

.label> :nth-child(1) {

   font-size: 45px;
}

.label> :nth-child(2) {
   background-image: linear-gradient(#1bdff8, #295fa5);
   color: #0000002b;
   background-clip: text;
   font-size: 32px;
}

/* span 1 start animation here*/
h2 {
   position: relative;
   font-size: 5vw;
   color: #252839;
   -webkit-text-stroke: 0.3vw #383d52;
   text-transform: uppercase;
}

h2::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: #ada9ca;
   -webkit-text-stroke: 0vw #383d52;
   border-right: 2px solid #f5f5f5;
   overflow: hidden;
   animation: animate 6s linear infinite;

}

@keyframes animate {

   0%,
   10%,
   100% {
      width: 0;
   }

   70%,
   90% {
      width: 100%;
   }
}

/* span 1 start animation here*/


.card {
   width: var(--card-width);
   height: var(--card-height);
   position: relative;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   padding: 0 36px;
   perspective: 2500px;
   margin: 0 0px;
   animation: moveUp 1s ease-in-out infinite;
   transition: transform 0.3s ease;
}

.card:hover {
   transform: scale(1.05);
}

.card:nth-child(2) {
   animation-delay: 0.2s;
}

.card:nth-child(3) {
   animation-delay: 0.4s;
}

.card:nth-child(4) {
   animation-delay: 0.6s;
}

.cover-image {
   width: 100%;
   height: 430px;
   background: linear-gradient(0deg, rgb(8 20 37) 0%, rgb(0 34 135 / 74%) 100%);
   object-fit: cover;
}

.cover-image>img {
   width: 100%;
   height: 81%;
   object-fit: cover;
}

.wrapper {
   transition: all 0.5s;
   position: absolute;
   width: 100%;
   z-index: -1;
}

.card:hover .wrapper {
   transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
   box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
   -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.logobox {
   position: absolute;
   z-index: 10;
   margin-right: 23%;
   top: 0;

}

.wrapper::before,
.wrapper::after {
   content: "";
   opacity: 0;
   width: 100%;
   height: 80px;
   transition: all 0.5s;
   position: absolute;
   left: 0;
}

.wrapper::before {
   top: 0;
   height: 100%;
   background-image: linear-gradient(to top,
         transparent 46%,
         rgba(12, 13, 19, 0.5) 68%,
         rgba(12, 13, 19) 97%);
}





@media (min-width: 1185px) {
   .mainHeading {

      text-align:right !important;
      margin-right:36px !important;

   }
}


.wrapper::after {
   bottom: 0;
   opacity: 1;
   background-image: linear-gradient(to bottom,
         transparent 46%,
         rgba(12, 13, 19, 0.5) 68%,
         rgba(12, 13, 19) 97%);
}

.card:hover .wrapper::before,
.wrapper::after {
   opacity: 1;
}

.card:hover .wrapper::after {
   height: 120px;
}

.title {
   /* width: 227px; */
   margin-left: 0px;
   transition: transform 0.5s;
   margin-bottom: 22px;
   text-decoration: none;
   text-align: center;
   /* text-decoration: none; */
   /* color: white;*/
}

.title>span {
   font-family: "Archivo Black", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 30px;
   text-align: center;
   color: #fff;
 
}

.card:hover .title {
   transform: translate3d(0%, -50px, 100px);
}

.character {
   max-width: 262px;
   opacity: 0;
   transition: all 0.5s;
   position: absolute;
   bottom: 30px;
   z-index: -1;
   left: 44px;
}

.card:hover .character {
   opacity: 1;
   transform: translate3d(0%, -30%, 100px);
}

.social-container {
   display: flex;
   flex-wrap: wrap;
   position: absolute;
   top: 223px;
   transform: translateX(-50%);
   z-index: 11;
   flex-direction: column;
   right: 31px;

}

.social-container a {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 60px;
   height: 50px;
   text-decoration: none;
   color: white;
   border-radius: 50%;
   transition: transform 0.3s ease, background-color 0.3s;
}

.social-container a i {
   font-size: 23px;
}


/* Responsive design */
@media (max-width: 800px) {
   #container {

      gap: 68px;

   }
}

@media (max-width: 600px) {
   .social-container a {
      width: 50px;
      height: 50px;
   }

   .social-container a i {
      font-size: 20px;
   }

}

@media (max-width: 400px) {
   .character {
      max-width: 286px;
      opacity: 0;
      transition: all 0.5s;
      position: absolute;
      bottom: -63px;
      z-index: -1;
      left: 31px;
   }

   .social-container {

      right: -11px;
   }
}

.fa-facebook-f:hover {
   color: #3B5998;
}

.fa-twitter:hover {
   color: #1c9cea;
}

.fa-instagram:hover {
   background: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: transparent;
}

.fa-linkedin-in:hover {
   color: #0a66c2;
}

.fa-youtube:hover {
   color: #f70000;
}

.fa-telegram-plane:hover {
   color: #27a4e3;
}


.logo {
   position: absolute;
   top: 40px;
        left: 106px;
    width: 114px;
   height: auto;
   z-index: 2;
}
/* For tablets (768px and smaller) to mobile devices (up to 480px) */
@media (max-width: 768px) {
    .logobox {
       position: absolute;
    z-index: 10;
    margin-right: 23%;
    top: -15px;
    }

    .mainHeading {
        text-align: center;
    margin-top: 72px !important;
    }
}




/* WhatsApp Button Styles */
/* .whatsapp-button {
   display: flex;
   align-items: center;
   padding: 9px 12px;
   background-color: #25D366;
   color: white;
   border: none;
   border-radius: 30px;
   cursor: pointer;
   position: fixed;
   bottom: 57px;
   right: 50px;
   z-index: 1000;
   text-decoration: none;
   font-size: 18px;
   gap: 10px;
   transition: transform 0.3s ease-in-out;
}

.whatsapp-button i {
   font-size: 24px;
} */

/* Hover effect */
/* .whatsapp-button:hover {
   transform: scale(1.1);
} */

/* .wrapper>img {
   width: 326px;
} */