@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Clash Display', sans-serif;
}
:root{
     --primary: #f7931a;
     --secondary: #010801;
     --white: #fbfbfb;
}
body{
     background-color: var(--secondary);
     width: 100vw;
     overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p{
     color: var(--white);
}
a{
     color: var(--white)!important;
     text-decoration: none;
}
nav{
     .navbar-brand{
          width: 70px;
          height: 70px;
     }
     .nav-link{
          text-transform: capitalize;
     }
     .btn, .btn:hover{
          padding: 0.5rem 1rem;
          -webkit-backdrop-filter: blur(5px);
          background-color: #fbfbfb09;
          backdrop-filter: blur(5px);
          letter-spacing: 1px;
     }
     .btn1, .btn1:hover{
          background-color: var(--primary);
          a{
               font-weight: 500;
               color: var(--secondary)!important;
          }
     }  
}
.container-fluid{
     padding: 2vw 5vw;
}
section{
     min-height: 100vh;
     width: 100%;
     background-color: transparent;
}
.header{
      text-align: center;
      margin: 0 auto;
      width: 40vw;
      h2{
           font-size: 2.5rem;
           line-height: 1;
           font-weight: 700;
           color: var(--white);
           margin-bottom: 1rem;
           span{
                color: var(--primary);
           }
      }
      p{
           font-size: 1rem;
           color: #fbfbfbaa;
      }
 }
#getstart{
     padding: 0 50px;
     padding-top: 10%;
     display: flex;
     color: #ECF1F0;
     justify-content: space-between;
     height: 100vh;
}
.one button{
     background-color: var(--primary);
     padding: 10px;
     border: none;
     color: #ECF1F0;
     margin-top: 20px;
     font-size: 15px;
     font-weight: 500;
     border-radius: 5px;
}
.two{
     display: flex;
     flex-direction: column;
     gap: 20px;
}
.two .create{
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     width: 80%;
     gap: 20px;
     background: #f7941a0e;
     border-radius: 10px;
     padding: 1rem;
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
     border: 1px solid var(--primary);
}
.two .icon{
     background-color: #ecf1f01f;
     padding: 10px;
     border-radius: 100%;
     font-size: 20px;
}
.text h1{
     font-size: 20px;
     font-weight: 600;
     text-transform: capitalize;
}
.text h4{
     font-size: 15px;
     font-weight: 200;
}
#advert{
     height: 20vh;
     margin: 10% 120px;
     padding: 10px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #ECF1F0;
     background-color: #ecf1f01f;
     border-radius: 10px;
     padding: 1rem;
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
     border: 1px solid var(--primary);
}
.ini button{
     background-color: var(--primary);
     padding: 10px;
     border: none;
     color: #ECF1F0;
     margin-top: 20px;
     font-size: 15px;
     width: 100%x;
     font-weight: 300;
     border-radius: 10px;
}
#home{
     width: 100%;
     overflow-x: hidden;
     overflow-y: hidden;
     /* border: 1px solid wheat; */
     img{
          width: 100%;
          height: 100%;
          object-fit: contain;
     }
     .cardss{
          overflow-y: hidden;
          width: 80%;
          height: 90vh;
          display: flex;
          justify-content: center;
          flex-direction: column;
          gap: 10px;
          .card-title{
               font-size: 3rem;
               line-height: 1;
               font-weight: 700;
               color: var(--white);
               span{
                    color: var(--primary);
               }
          }
          .card-text{
               font-size: 1rem;
               /* width: 0%; */
               color: #fbfbfbaa;
          }
          .btn{
               padding: 1rem 1.5rem;
               -webkit-backdrop-filter: blur(5px);
               background-color: #fbfbfb09;
               backdrop-filter: blur(5px);
               letter-spacing: 1px;
          }
          .btn1{
               background-color: var(--primary);
               a{
                    font-weight: 500;
                    color: var(--secondary)!important;
               }
          }  
     }
     .navbar-toggler{
          border: none;
          color: var(--white)!important;
     }
     .box{
          background-color: #fbfbfb09;
          border-radius: 100px;
          z-index: -3;
          -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
          width: 60vw;
          height: 60vw;
          transform: rotate(20deg);
     }
     .box1{
          top: -70%;
          left: -20%;
     }
     .box2{
          right: 0;
          width: 60vw;
          transform: rotate(-17deg);
          height: 60vw;
          top: 0%;
          right: -10%;
     }
     .icons{
          width: 50px;
          height: 50px;
          opacity: 0.6;
          z-index: -2;
          img{
               width: 50px;
               height: 50px;    
          }
     }
     .icon1{
          top: 20%;
          transform: rotate(320deg);
          left: 40%;
     }
     .icon2{
          top: 60%;
          transform: rotate(20deg);
          left: 90%;
     }
     .icon3{
          top: 70%;
          transform: rotate(150deg);
          left: 20%;
     }
}
#abou{
     img{
          width: 100%;
          height: 100%;
          object-fit: contain;
     } 
     h2{
          font-size: 3rem;
          line-height: 1;
          font-weight: 700;
          color: var(--white);
          margin-bottom: 1rem;
          span{
               color: var(--primary);
          }
     }
     p{
          font-size: 1rem;
          color: #fbfbfbaa;
     }
     .btn{
          margin-top: 1.5rem;
          width: max-content;
          padding: 0.5rem 1rem;
          -webkit-backdrop-filter: blur(5px);
          background-color: #fbfbfb09;
          backdrop-filter: blur(5px);
          letter-spacing: 1px;
          font-weight: 500;
          background-color: var(--primary);
          a{
               font-weight: 500;
               color: var(--secondary)!important;
          }
     } 
     .box{
          background-color: #fbfbfb09;
          border-radius: 10px;
          z-index: 4;
          -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
          width: 15vw;
          height: 7vw;
          .span1{
               color: var(--primary);
               font-size: 1.5rem;
               font-weight: 600;
          }
          .span2{
               font-size: 1.2rem;
               color: var(--white);
          }
     }
     .box1{
          top: 10%;
     }
     .box2{
          right: 0%;
          bottom: 0%;
          .span1{
               font-size: 2rem;
          }
     }
}
#services{
     .d-gridd{
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
          margin-top: 2rem;
          .card{
               background: #cbcbcb08;
               border-radius: 10px;
               padding: 1rem;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
               .icoma{
                    width: 70px;
                    height: 70px;
                    -webkit-backdrop-filter: blur(5px);
                    backdrop-filter: blur(5px);
                    background-color: #fbfbfb09;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i{
                         font-size: 2rem;
                         color: var(--primary);
                    }
               }
              h4{
                    font-size: 1.5rem;
                    line-height: 1;
                    font-weight: 700;
                    color: var(--white);
                    margin-bottom: 1rem;
               }
               p{
                    font-size: 1rem;
                    color: #fbfbfbaa;
               }
          }
          .card:hover{
               border: 1px solid var(--primary);
               box-shadow: 5px 5px 5px #f7931a57;
          }
     }
}
#social {
     padding: 10vw 5vw;
     display: flex;
     justify-content: center;
     align-items: center;
     .contain {
          border-radius: 25px;
          padding: 4rem;
          background: linear-gradient(145deg,#f7933817, #f792163d, #f7941a15, #f7931e74);
          border: 5px solid #f7931a;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: var(--secondary);
          text-align: center;
     }
     .subscribe-forms{
          h2{
               width: 70%;
               text-align: center;
               color: var(--white);
               margin-bottom: 5rem;
          }
          .subscribe-form {
               width: 100%;
               display: flex;
               flex-direction: column;
               justify-content: center;
               gap: 20px;
               height: 35px;
               .subscribe-input {
                    width: 100%;
                    height: 100%;
                    padding: 5px 5px;
                    border-right: 0;
                    font-size: 15px;
                    border-top: 0;
                    border-left: 0;
                    font-weight: 500;
                    color: var(--secondary);
                    background: transparent;
               }        
               .subscribe-btn {
                    width: max-content;
                    margin: 0 auto;
                    height: max-content;
                    background-color: var(--primary);
                    font-size: 1rem;
                    border: none;
                    padding: 7px 40px;
                    border-radius: 10px;
                    font-weight: 500;
                    color: var(--secondary-color);
                    cursor: pointer;
               }
               .subscribe-input:focus {
                    outline: none;
               }
          }
     }
     .contact-info {
          font-size: 1rem;
          line-height: 1.5;
     }
     .contact-info p {
          margin: 0.5rem 0;
     }
     .contact-info i {
          margin-right: 0.5rem;
     }
}
#social .iconas{
     z-index: -2;
     right: 20%;
     transform: rotate(20deg);
}
#how{
     .coms{
          z-index: -2;
          opacity: 0.4;
     }
     .box{
          border: 1px solid #fbfbfb09;
          border-radius: 100px;
          z-index: -3;
          width: 60vw;
          height: 60vw;
          transform: rotate(20deg);
          top: -60%;
          left: -5%;
          .bos{
               border-radius: 100px;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
               background-color: #fbfbfb09;
               width: 59vw;
               height: 59vw;
          }
     }
     .roadmap-header {
     text-align: center;
     margin-bottom: 40px;
     } 
     .roadmap-content {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
     }
     .left-column, .right-column {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 100px;
     }
     .left-column{
          padding-top: 7rem;
     }
     .separator {
          width: 4px;
          background-color: var(--primary);
          margin: 0 20px;
     }
     .roadmap-item {
          background-color: #f7931a2c;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          transition: transform 0.3s ease;
     }
      
      .roadmap-item:hover {
          transform: translateY(-10px);
      }
      
      .roadmap-item h2 {
          font-size: 1.5em;
          margin-bottom: 10px;
          color: var(--white);
          display: flex;
          justify-content: space-between;
      }
      
     .step-number {
          color: var(--primary);
          font-weight: bold;
     }
      .roadmap-item p {
          font-size: 0.9em;
          line-height: 1.6;
          color: #fbfbfbaa;
      }
      
      /* Specific background colors for each roadmap item */
      #p1, #p2, #p3, #p4, #p5, #p6 {
          background-color: #f7931a17;
      }
}
footer{
     padding: 5vw 0;
     padding-bottom: 0;
     background-color: #f7931a17;
     a{
          color: #fbfbfbaa;
     }
     #footer{
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 50px;
          padding-bottom: 5vw;
          .one{
               .navbar-brand{
                    font-size: 1.5rem;
               }
               .story{
                    font-size: 1rem;
                    color: #fbfbfbaa;
               }
          }
          .two, .three{
               display: flex;
               gap: 20px;
               flex-direction: column;
               .head{
                    color: #666;
                    font-weight: 500;
               }
               .links{
                    a{
                         color: #fbfbfbaa;
                         font-size: 1rem;
                         word-spacing: -1px;
                         margin-bottom: 5px;
                         display: flex;
                         align-items: center;
                         gap: 10px;
                    }
               }
          }
     }
     .middles{
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
     .last{
          margin-top: 20px;
          padding: 20px 5vw;
          border-top: 1px solid #f7931a;
          font-size: 0.7rem;
          text-align: center;
     }
     .linkkks{
          color: #fbfbfbaa;
     }
     .box{
          border: 1px solid #fbfbfb09;
          border-radius: 100px;
          z-index: -3;
          width: 30vw;
          height: 30vw;
          transform: rotate(20deg);
          top: -30%;
          left: -5%;
          .bos{
               border-radius: 100px;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
               background-color: #fbfbfb09;
               width: 29vw;
               height: 29vw;
          }
     }
} 
#faqs{
     .box{
          border: 1px solid #fbfbfb09;
          border-radius: 100px;
          z-index: -3;
          width: 30vw;
          height: 30vw;
          transform: rotate(20deg);
          bottom: -30%;
          right: -5%;
          .bos{
               border-radius: 100px;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
               background-color: #fbfbfb09;
               width: 29vw;
               height: 29vw;
          }
     } 
     .icons{
          width: 50px;
          height: 50px;
          opacity: 0.6;
          z-index: -2;
          img{
               width: 50px;
               height: 50px;    
          }
     }
     .icon1{
          top: 10%;
          transform: rotate(320deg);
          left: 40%;
     }
     .icon2{
          top: 60%;
          transform: rotate(20deg);
          left: 90%;
     }
     .icon3{
          top: 50%;
          transform: rotate(150deg);
          left: 10%;
     }
}
#team{
     .d-gridd{
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
          margin-top: 2rem;
          .card{
               background: #cbcbcb08;
               border-radius: 10px;
               padding: 1rem;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
               height: 400px;
               overflow: hidden;
              img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
              }
              .boxx{
                    bottom: 0;
                    width: 100%;
                    left: 0;
                    -webkit-backdrop-filter: blur(5px);
                    background-color: #f7931a74;
                    backdrop-filter: blur(5px);
                    letter-spacing: 1px;
              }
              h4{
                    font-size: 1.5rem;
                    line-height: 1;
                    font-weight: 700;
                    color: var(--white);
                    margin-bottom: 1rem;
               }
               p{
                    font-size: 1rem;
                    color: #fbfbfbaa;
               }
          }
          .card:hover{
               border: 1px solid var(--primary);
               box-shadow: 5px 5px 5px #f7931a57;
          }
     }
}
 .faq-header {
     text-align: center;
     margin-bottom: 40px;
 }
 
 .faq-header h2 {
     font-size: 2.5em;
     color: var(--white);
 }
 
 .faq-header .highlight {
     color: var(--primary);
 }
 
 .faq-header p {
     font-size: 1em;
     color: #fbfbfbaa;
 }
 
 .faq-content {
     max-width: 800px;
     margin: 0 auto;
 }
 
 .faq-item {
     margin-bottom: 20px;
 }
 
 .faq-item input[type="checkbox"] {
     display: none;
 }
 
 .faq-item label {
     display: block;
     padding: 15px 20px;
     background-color: #f7931a57;
     color: var(--white);
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
 .faq-item label:hover {
     background-color: #f7931a2c;
 }
 
 .faq-answer {
     max-height: 0;
     overflow: hidden;
     background-color: #f7931a2c;
     border-radius: 8px;
     margin-top: 5px;
     padding: 0 20px;
     transition: max-height 0.3s ease;
 }
 
 .faq-item input[type="checkbox"]:checked ~ .faq-answer {
     max-height: 200px;
     padding: 15px 20px;
 }
 
 .faq-answer p {
     color: #fbfbfbc9;
     line-height: 1.6;
 }
#reviews{
     padding: 2vw 0;
     .heading{
          h1{
               color: #ffffffd3;
               font-size: 3rem;
               span{
                    color: var(--primary);
               }
          }
          h6{
               color: #fbfbfbaa;
               font-size: 1.5rem;
          }
     }
     .createOrde{
          overflow-x: scroll;
     }
     .cards{
          display: flex;
          width: max-content;
          gap: 30px;
          .card{
               width: 50vw;
               max-height: 50vh;
               border-radius: 25px;
               display: grid;
               grid-template-rows: 1fr 0.3fr;
               background: #f7931a93;
               border-radius: 10px;
               color: var(--white);
               padding: 1rem;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
          }
          .img{
               width: 70px;
               height: 70px;
               border-radius: 50%;
               overflow: hidden;
               img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
               }
          }
          .card-footer{
               border-top: 1px solid #fbfbfb;
          }
          .card-body{
               font-size: 1.2rem;
          }
          .post{
               color: #fbfbfbaa;   
          }
          .icon{
               i{
                    font-size: 4rem;
                    color: #fbfbfbaa;
               }
          }
     }
     ::-webkit-scrollbar {
          height: 8px;
          background-color: var(--secondary); /* Background of the scrollbar track */
      }
      
      ::-webkit-scrollbar-thumb {
          background-color: var(--primary); /* Color of the draggable part of the scrollbar */
          border-radius: 10px;
          border: 2px solid var(--secondary); /* Optional: To add some padding between the thumb and the track */
      }
      
      ::-webkit-scrollbar-thumb:hover {
          background-color: var(--white); /* Color when hovering over the scrollbar thumb */
      }
}
#about{
     padding: 7vw 5vw;
     .comm{
          z-index: -2;
          opacity: 0.1;
          width: 70vw;
          top: -10%;
     }
     .box{
          border: 1px solid #fbfbfb09;
          border-radius: 100px;
          z-index: -3;
          width: 30vw;
          height: 30vw;
          transform: rotate(20deg);
          bottom: -30%;
          right: -5%;
          .bos{
               border-radius: 100px;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
               background-color: #fbfbfb09;
               width: 29vw;
               height: 29vw;
          }
     } 
      .about-header {
          text-align: center;
          margin-bottom: 40px;
      }
      
      .about-header h2 {
          font-size: 2.5em;
          color: #ffffff;
      }
      
      .about-header .highlight {
          color: var(--primary);
      }
      
      .about-header p {
          font-size: 1.2em;
          color: #a5a5a5;
          line-height: 1.6;
      }
      
      .about-content {
          display: flex;
          flex-direction: column;
          gap: 30px;
      }
      
      .about-item {
          padding: 20px;
          background-color: #f7931a2c;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }
      
      .about-item h2 {
          font-size: 2em;
          color: #ffffff;
          margin-bottom: 15px;
      }
      
      .about-item .highlight {
          color: var(--primary);
      }
      
      .about-item p {
          color: #d1d1d1;
          font-size: 1.1em;
          line-height: 1.7;
      }
}
@media (min-width: 300px) and (max-width: 850px) {
     .heroImg{
          display: none;
     }
     section{
          min-height: max-content;
          max-height: max-content;
          height: max-content;
          overflow-x: hidden;
          
          .col-12{
               margin: 2rem 0;
          }
     }
     .header{
          width: 80vw;
     }
     #home{
          .navbar-collapse{
               position: absolute;
               top: 10vh;
               background-color: #20202006;
               z-index: 4;
               -webkit-backdrop-filter: blur(5px);
               backdrop-filter: blur(5px);
               width: 90vw;
               padding: 10px 30px;
          }
          .box{
               border-radius: 50px;
          }
          .box1{
               left: -5%;
               top: 50%;
          }
          .icon3{
               top: 80%;
          }
          .icon2{
               left: 85%;
          }
          .icon1{
               left: 40%;
          }
          .cardss{
               width: 100%;
               height: 70vh;
               z-index: 2;
               .btn{
                    backdrop-filter: none;
               }
          }
     }
     #getstart{
          padding: 10px;
          flex-direction: column;
          gap: 50px;
          align-items: center;
          height: max-content;
     }
     .two{
     flex-direction: column;
          align-items: center;
}
#advert{
     height: 20vh;
     margin: 20vh 10px;
     padding: 10px;
}
#advert .header
      h2{
           font-size: 1.5rem;
           line-height: 1;
           font-weight: 700;
           color: var(--white);
           margin-bottom: 1rem;
           span{
                color: var(--primary);
           }
      }
 #advert .header     p{
          display: none;
      }
      footer {
          .container{
               overflow: visible!important;
          }
         #footer {
             grid-template-columns: 1fr!important;
             .one {
                 .navbar-brand {
                     font-size: 1.5rem;
                     img {
                         width: 40px;
                         height: 40px;
                     }
                 }
                 .story {
                     font-size: 1rem;
                 }
             }
             .two {
                 display: flex;
                 justify-content: center;
                 gap: 20px;
                 font-size: 1rem;
                 width: 50%;
             }
             .three {
               width: 50%;
                 h1 {
                     font-size: 1rem;
                 }
                 .links {
                     a {
                         font-size: 1rem;
                     }
                 }
             }
             .middles{
               display: flex;
               justify-content: center;
             }
         }
         .subscribe-forms {
             h1 {
                 font-size: 1rem;
             }
         }
         .last {
             margin-top: 50px;
             font-size: 0.5rem;
             width: 100vw;
             grid-template-columns: repeat(4, 1fr);
         }
     }
     .subscribe-form {
          height: max-content!important;
     }
     #social {
         width: 100vw;
         .subscribe-forms {
          h2 {
           font-size: 1.2rem;
           width: 100%;
          }
      }
     }
    
     .container-fluid{
          padding: 7vw 5vw;
          padding-bottom: 0;
     }
     #faqs {
          .box {
               bottom: 5%;
          }
     }
     #abou{
          .box{
               width: max-content;
               height: max-content;
          }
     }
     #how{
          .coms{
               top: 20%;
          }
     }
     #about{
          .box{
               top: 60%;
          }
          .comm{
               top: 20%;
          }
     }
     .d-gridd{
          grid-template-columns: 1fr!important;
     }
     #reviews {
          padding: 1rem;
          .heading{
               h1{
                    font-size: 2.5rem!important;
               }
               h6{
                    font-size: 1.5rem;
               }
          }
          .cards {
               .card {
                    width: 80vw!important;
                    .card-body {
                         font-size: 0.9rem;
                    }
                    .img{
                         width: 50px;
                         height: 50px;
                    }
                    .icon{
                         i{
                              font-size: 2rem;
                         }
                    }
               }
          }
     }
     #services {
          & .d-gridd {
               .card{
                    backdrop-filter: none;
               }
          }
     }
     #about {
          .about-header {
               p{
                    text-align: center;
               }
          }
          .about-item {
               h2{
                    font-size: 1.5rem;
                    text-align: center;
               }
               p{
                    text-align: center;
               }
          }
     }
     #abou {
          padding-top: 0;
          .col-12:first-child{
               margin-top: 0;
          }
     }
}