@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        user-select: none;
      }
      body {
        font-family: "Poppins", sans-serif;
        margin: 0;
        background:white;
        color: #222;
        overflow-x: hidden;
      }
h1{ font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
}
h2{ font-family: "Bebas Neue", sans-serif;
    letter-spacing: 2px;
}
h3{ font-family: "Bebas Neue", sans-serif;
    letter-spacing: 1px;
}
h4{ font-family: "Bebas Neue", sans-serif;
    letter-spacing: 1px;
}
h5{ font-family: "Bebas Neue", sans-serif;
}
a{
 font-family: "Bebas Neue", sans-serif;
     letter-spacing: 1px;
}
button{ font-family: "Bebas Neue", sans-serif;
  cursor: pointer;
}
p{
  font-family: "Montserrat", sans-serif;
}
span{
 font-family: "Montserrat", sans-serif;
}
li{
    font-family: "Montserrat", sans-serif;
}
button:active{
transform: scale(0.9);
}

      html {
        scroll-behavior: smooth;
        max-width: 2300px;
        margin: 0px auto;
      }
      header {
         padding: 0px 10px;
        width: 100%;
    background: linear-gradient(to right, #191919, #000000);
        display: flex;
        justify-content: space-between;
        color: white;
        align-items: center;
        z-index: 100;
      }

      header .logo {
        flex: 1;
        padding: 10px;
      }
      header .logo small {
        font-size: 0.6rem;
      }
      header nav {
        flex: 2;
        display: flex;
        justify-content: end;
      }
      header .tool-icons {
    
        display: flex;
        justify-content: space-evenly;
      }
      header nav a {
        text-decoration: none;
        padding: 10px;
        color: white;
        margin: 0px 20px;
        font-size: 20px;
      }
      header .tool-icons a {
        border-left: 2px solid #1d1d1d1f;
        text-decoration: none;
        padding: 10px 0px;
        color: white;
        text-align: center;
        width: 100%;
        height: 100%;
      }
      header nav a:hover {
        color: #ff4f3c;
      }

      .Homepage {
        position: relative;
        overflow: hidden;
      }

      .track {
        display: flex;
        gap: 0px;
        transition: transform 0.5s ease;
      }

      .slide {
        flex: 0 0 100%;
           background-image: url('image/home-bg.webp');
        background-size: cover;
        background-position: center;
        max-height: 750px;
        position: relative;
        overflow: hidden;
        width: 100vw;
      }

      .text-container {
        width: 85%;
        position: absolute;
       bottom: 0%;
        left: 50%;
        transform: translate(-100%, -50%);
        color: white;
        z-index: 2;
        animation: textcontainer 1s ease forwards;
        text-align: center;
    
      }
      @keyframes textcontainer {
        from {
             transform: translate(-50%, 100%);
        }
        to {
             transform: translate(-50%, -16%);
        }
      }
      .text-container h1 {
        text-shadow: 1px 1px 1px black;
        font-size: 5vw;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        transform: translate(-100%, 0%);
        animation: textcontainerh1 1s ease forwards;
      }
      @keyframes textcontainerh1 {
        from {
          transform: translate(0%, 100%);
        }
        to {
          transform: translate(0%, 0%);
        }
      }
      .text-container h2 {
        font-size: 13vw;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        transform: translate(-100%, 0%);
        animation: textcontainerh2 1s ease forwards;
      }
      @keyframes textcontainerh2 {
        from {
          transform: translate(-100%, 0%);
        }
        to {
          transform: translate(30%, 0%);
        }
      }
      .text-container p {
        font-size: 1vw;
       
        margin: 10px 0px;
      }

      .text-container button {
        padding: 15px 25px;
        min-width: 150px;
        border-radius: 30px;
        border: none;
        cursor: pointer;
        background-color: #b4ff00;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.214);
      }
      .text-container button:active {
        transform: scale(0.9);
      }
      .main-images-div {
        position: relative;
       aspect-ratio: 16/6;
 
      }
      .main-images-div img {
        width: 120px;
      }
      #Homemainbackimage {
        /* -webkit-box-reflect:  below -6px; */
        -webkit-box-reflect: below
          0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(50%, transparent),
            to(rgba(250, 250, 250, 0.413))
          );
        width: 45vw;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: float 2s ease forwards;
        z-index: 1;
      }
      .main-images-div #Homemainimage {
        -webkit-box-reflect: below
          0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(50%, transparent),
            to(rgba(250, 250, 250, 0.413))
          );
        z-index: 3;
        width: 45vw;
        position: absolute;

        bottom: 0%;
        left: 20%;
        transform: translate(-50%, -50%);
        animation: float 2s ease forwards;
      }

      @keyframes float {
        from {
          bottom: -100%;
        }
        to {
          bottom: -45%;
        }
      }

      .main-images-div #Homeimage1 {
        width: 300px;
        position: absolute;
        top: 70%;
        left: -20%;
        transform: rotate(60deg);
        animation: Homeimage1 1.5s ease forwards;
      }
      @keyframes Homeimage1 {
        from {
          left: -20%;
        }
        to {
          left: -5%;
        }
      }
      .main-images-div #Homeimage2 {
        opacity: 0.3;
        width: 300px;
        position: absolute;
        top: 96%;
        right: -20%;
        transform: translate(50%, -50%);
        animation: Homeimage2 1.5s ease forwards;
      }
      @keyframes Homeimage2 {
        from {
          right: -20%;
        }
        to {
          right: 5%;
        }
      }

      .main-images-div #Homeimage3 {
        z-index: 5;
        width: 25vw;
        position: absolute;
        top: 75%;
        left: 0%;
        transform: translate(-50%, -50%);
        animation: Homeimage3 1.5s ease forwards;
      }
      @keyframes Homeimage3 {
        from {
          left: 0%;
        }
        to {
          left: 35%;
        }
      }
      .main-images-div #Homeimage4 {
        z-index: 5;
        width: 25vw;
        position: absolute;
        top: 60%;
        right: 0%;
        transform: translate(-50%, -50%);
        animation: Homeimage4 1.5s ease forwards;
      }
      @keyframes Homeimage4 {
        from {
          right: 0%;
        }
        to {
          right: 10vw;
        }
      }
      .controls {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
      }

      .controls button {
        font-size: 1rem;
        background: #00000039;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        margin: 0 10px;
        cursor: pointer;
        border-radius: 8px;
      }
      .aboutus {
        text-align: center;
        padding: 7%;
        background-image: url("");
      }

      .aboutus h2 {
        font-size: 3rem;
        color: #000000ac;
        margin: 10px auto;
      }
      .aboutus p {
        font-size: 1.2rem;
        color: #000000ac;
        width: 100%;
        max-width: 800px;
        margin: 10px auto;
      }

      .categories-section {
        text-align: center;
        padding: 40px 10px;
        background: #f9f9f9;
        position: relative;
      }

      .subtitle {
        color: #6cb63e;
        font-size: 18px;
        margin-bottom: 10px;
      }

      .title {
        font-size: 32px;
        font-weight: 700;
        color: #222;
        margin-bottom: 60px;
      }

      .categories {
        display: flex;
        width: 95%;
        margin: 0px auto;
        align-items: center;
        transition: all 0.5 ease;
        scroll-behavior: smooth;
        position: relative;
        scroll-snap-type: x mandatory;
        overflow-x: auto;
      }
      .categories::-webkit-scrollbar {
        display: none;
      }
      .category-card::before {
        content: attr(data-label);
        position: absolute;
        top: 0px;
        left: 0%;

        background-color: rgb(255, 85, 85);
        color: white;
        padding: 10px 15px;
        z-index: 200;
        border-radius: 0px 0px 10px 0px;
        box-shadow: 1px 1px 10px #00000030;
      }
      .category-card {
        position: relative;
        overflow: hidden;
        scroll-snap-align: center;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 30px 20px;
        min-width: 300px;
        width: 100%;
        margin: 5px 10px;
        position: relative;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s;
        clip-path: path(
          "M 10,20 L 60,20 A 10,10 0,0,0 70,10 L 70,10 A 10,10 0,0,1 80,0 L 140,0 A 10,10 0,0,1 300,10 L 300,190 A 10,10 0,0,1 140,500 L 10,500 A 10,10 0,0,1 0,190 L 0,30 A 10,10 0,0,1 10,20 Z"
        );
      }

      .category-card:hover {
        transform: translateY(-8px);
      }

      .category-card img {
        width: 150px;
        filter: drop-shadow(1px 1px 10px #00000047);
        object-fit: contain;
        margin-bottom: 20px;
      }

      .category-card h3 {
        font-weight: 700;
        margin-bottom: 10px;
        z-index: 2;
        position: relative;
      }

      .category-card p {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
      }
      .nav-btn {
        aspect-ratio: 3/3;
        background: #6cb63e;
        border: none;
        color: #fff;
        font-size: 22px;
        padding: 10px 14px;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
        z-index: 10;
      }

      .nav-btn:hover {
        background: #599d32;
      }
      .view-all {
        background: #273272;
        color: #fff;
        border: none;
        padding: 12px 25px;
        font-size: 1rem;
        border-radius: 25px;

        cursor: pointer;
        transition: background 0.3s;
      }

      .view-all:hover {
        background: #273272;
      }

      .instagram-section {
        background-color: #faeade;
        padding: 150px 50px;
      }
      .instagram-section .instagram-card {
        position: sticky;
        top: 70px;

        border: 4px solid #ffffff;
        box-shadow: 1px 1px 10px #00000067;
        width: 270px;
        height: 470px;
        border-radius: 20px;
        aspect-ratio: 9/9;
        overflow: hidden;
      }
      .instagram-section .instagram-card:first-child {
        margin-left: 0px;
      }
      .instagram-section .instagram-card iframe {
        width: 100%;
        height: 100%;
      }
      .instagram-section .instagram-card blockquote {
        width: 100%;
        height: 100%;
      }

      .autoShow {
        animation: text-appear both;
        animation-timeline: view();
        animation-range: entry 20% cover 100vh;
      }

      @keyframes text-appear {
        from {
          opacity: 0;
          transform: translateY(100px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .we-serve_div {
        padding: 2%;
        background-image: url('image/contact-bg-red.webp');
        background-repeat: no-repeat;
        background-size: cover;
      }
      .we-serve_div section {
        display: flex;
      flex-wrap: wrap;
      justify-content: center;
        align-items: center;
     
      }
      .we-serve_div section div {
max-width: 31%;
width: 100%;
        font-size: 0.9rem;
        aspect-ratio: 3/2;
        background-size: cover;
        background-repeat: no-repeat;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.315);
overflow: hidden;
        min-height: 150px;
        border-radius: 5px;
        margin: 10px;
        display: grid;
         border: 1px solid white;

      }

      .we-serve_div section div img {
        margin: 0% auto;
        width: 100%;

       
  
      }
       .we-serve_div section .transparent-span{
 background-color: rgba(0, 0, 0, 0.485);
 display: flex;
 align-items: center;
 padding: 20px;

      }
      .h3-heading-div {
        margin-top: 10px;
        text-align: center;
        padding: 1% 0%;
      }
      .h3-heading-div h3,h1 {
        font-size: 1.7rem;
        color: white;
      }
      .h3-heading-div p {
        color: red;
        font-size: 1.5rem;
        transform: translateY(-50%);
        font-weight: bold;
      }
      .h3-heading-div h3,h1 span {
        color: red;
      }

      footer {
        background-image: url(../assets/images/footerbg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background: black;
        padding: 1%;
      }
      footer #FooterMiddleDiv {
        display: grid;
        grid-template-columns: 40% 30% 30%;
        justify-items: center;
        width: 100%;
        margin: 0% auto;
        color: white;
        font-family: var(--fontfamily-a);
      }
      footer #FooterMiddleDiv p {
        font-family: var(--font-family-P);
        font-size: 0.9rem;
      }
      footer #FooterMiddleDiv h5 {
        font-family: var(--font-family-h5);
        font-size: 1rem;
      }
      footer #FooterMiddleDiv h2 {
        font-family: var(--font-family-h2);
        font-size: 1.6rem;
      }
      footer #FooterMiddleDiv h4 {
        font-family: var(--font-family-h2);
        font-size: 1.3rem;
        margin: 3% 0%;
      }
      footer #FooterMiddleDiv span {
        margin: 3% 0%;
      }
      footer .FooterMiddlespan1 .link {
        text-decoration: none;
        color: white;
        display: block;
      }
      .FooterMiddlespan1 div a {
        display: flex;

        align-items: center;
      }
      footer .FooterMiddlespan1 a i {
        font-size: 1.5rem;
        color: white;
        border: 1px solid white;
        background-color: #f3cf580b;
        padding: 10px;
        aspect-ratio: 3 / 3;
        border-radius: 5px;
        margin: 0px 5px;
      }
      footer .FooterMiddlespan1 a img {
        color: white;
        border: 1px solid white;
        background-color: #f3cf580b;
        padding: 12px;
        aspect-ratio: 3 / 3;
        border-radius: 5px;
        margin: 0px 5px;
      }

      footer .footerlinkes div a {
        display: block;
        text-decoration: none;
        color: white;
        font-family: var(--font-family-a);
        margin: 15px 0%;
        font-size: 0.9rem;
      }
      footer .FooterMiddlespan3 {
        width: 100%;
        background-color: white;
        padding: 10px 20px;
        border-radius: 10px;
      }

      footer .FooterMiddlespan3 input[type="submit"] {
        cursor: pointer;
        color: rgb(0, 0, 0);
        font-weight: 700;
        letter-spacing: 0.5px;
        color: white;
        width: 100%;
        padding: 15px;
        border-radius: 5px;
        border: none;
        background-color: #273272;
      }
      #FooterDownDiv {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
 
      }
      #FooterDown_termsDiv {
        text-align: end;
      }
      #FooterDownDiv div a {
 
        color: white;
        text-decoration: none;
        font-family: var(--font-family-a);
        font-size: 0.7rem;
        margin: 1% 0%;
      }

      @media (max-width: 600px) {
              .we-serve_div section div {
        min-height: 50px;

max-width: 43%;
      }
  
        footer #FooterMiddleDiv {
          display: grid;
          grid-template-columns: 100%;
          justify-items: left;
          width: 94%;
          margin: 0% auto;

          font-family: var(--main-heading-family);
        }
        footer .footerlinkes {
          width: 100%;

          justify-items: left;
        }
        footer #FooterDownDiv {
          display: grid;

          grid-template-columns: 100%;
          justify-items: center;
          padding: 20px 5px;
        }
        footer #FooterDownDiv div {
          text-align: center;
        }
      }

      .contact-div{
     background-image: url("image/contact-bg-red.webp");
        background-repeat: no-repeat;
        background-size: cover;
      }
      .contact-container {
   
        display: grid;

        grid-template-columns: 50% 50%;
        padding: 7%;

   
      }

      .contact-form input[type="submit"] {
        padding: 15px;
        width: 100%;
        border: none;
        background-color: #ad0000;
        color: white;
        font-weight: bold;
        font-size: 1rem;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 10px;
      }
      .info-box {
        display: grid;
        grid-template-columns: 65px 1fr 60px;
        align-items: center;
        padding: 10px;
color: white;
        margin: 10px 0px;
        width: 90%;
        background:rgb(0, 0, 0);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
      }
      .info-box button {
        aspect-ratio: 3/3;
        padding: 10px;
        border-radius: 100%;
        border: none;
        width: 50px;
        height: 50px;
        background-color: #ad0000;
        color: white;
      }
      .contact-form {
        background: #010101;
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 30px;
      }
      .info-box .icon {
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        border: 2px solid #ad0000;
        height: 50px;
        color: #ad0000;
      }

      @media (max-width: 768px) {
        .contact-container {
          grid-template-columns: 100%;
          padding: 10px;
        }
        .contact-container .info-box {
          width: 100%;
        }
      }
      @media (max-width: 600px) {
        #Homemainbackimage {
          width: 750px;
          z-index: 1;
        }
        .main-images-div #Homemainimage {
          width: 750px;
          z-index: 1;
        }
        .text-container {
          text-align: center;
        }
        .text-container h1 {
          font-size: 5vw;
        }
        .text-container p {
          font-size: 10px;
          width: 100%;
        }
        .text-container button {
          position: relative;
          z-index: 10;
        }
        .main-images-div {
          max-height: 1000px;
          aspect-ratio: 16/11;
        }
        .slide {
          max-height: 1000px;
        }
        header nav {
         height: 0px;
        }
        .main-images-div #Homeimage1 {
          animation: none;
          top: 80%;
        }
      }

      .formlabeldiv {
        width: 100%;
        position: relative;
      }
      .formlabeldiv label {
        position: absolute;
        top: 16px;
        left: 5px;
      background-color: black;
        color: white;
        padding: 2px 10px;
        font-size: 0.9rem;
        transition: 0.3s ease;
        border-radius: 10px;
        user-select: none;
        z-index: 1;
      }

      .formlabeldiv input:focus ~ label,
      .formlabeldiv input:user-valid ~ label,
      .formlabeldiv input:user-invalid ~ label {
        top: -3px;
        left: 5px;
        z-index: 3;
      }

      .formlabeldiv select ~ label,
      .formlabeldiv select:user-valid ~ label,
      .formlabeldiv select:user-invalid ~ label {
        top: -3px;
        left: 5px;
        z-index: 3;
      }
      .formlabeldiv input[type="date"] ~ label,
      .formlabeldiv input[type="date"]:user-valid ~ label,
      .formlabeldiv input[type="date"]:user-invalid ~ label {
        top: -3px;
        left: 5px;
        z-index: 3;
      }
      .formlabeldiv input[type="month"] ~ label,
      .formlabeldiv input[type="month"]:user-valid ~ label,
      .formlabeldiv input[type="month"]:user-invalid ~ label {
        top: -3px;
        left: 5px;
        z-index: 3;
      }
           .formlabeldiv textarea:focus ~ label,
      .formlabeldiv textarea:user-valid ~ label,
      .formlabeldiv textarea:user-invalid ~ label {
        top: -3px;
        left: 5px;
        z-index: 3;
      }
      .formlabeldiv input:user-invalid ~ label {
        color: red;
      }

      .formlabeldiv input,
      select, textarea{
        width: 100%;
        padding: 12px;
        margin: 8px 0;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        background: none;
        position: relative;
        z-index: 2;
        color: white;
      }
      .input-group {
        display: flex;
        gap: 10px;
      }
 

      header .opennavbtn{
  display: none;
  cursor: pointer;
}
@media(max-width:760px){
  header .opennavbtn{
  display: grid;
}
header nav{

 position: absolute;
 flex-direction: column;
 top: 70px;
 left: 0px;
 background-color: #000000e2;
 width: 100%;
overflow: hidden;
height: 0px;
z-index: 10000;
}
header nav a{
 padding: 15px 20px;

}
header .openNav{
height:max-content;
padding: 20px 0px;
text-align: center;
}
}

.follow-button{
  letter-spacing: 1px;
background-color: rgb(2, 143, 208);
border: none;
padding:10px 0px;
border-radius: 5px;
display: flex;
 justify-content: space-evenly;
 width: 240px;
 font-size: 20px;
 color: white;
 align-items: center;
 margin: 20px auto;
}