*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
        
body{
  font-family: "Open Sans", sans-serif;
  font-family: 'Ubuntu', sans-serif;
}


/* Gradient Logo Text */


.logo h2{
  font-size: 1.8rem;
  font-weight: bold;
  color: black;
}

.text {
  background: linear-gradient(45deg, #2f80ed, #6a11cb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #4834d4;
}


.background{
  background: linear-gradient(45deg, #2f80ed, #6a11cb);
  color: white;
}



/*Navbar styling start from here*/



nav {
  background: white;
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}


/* Shadow on Scroll */

nav.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-links{
    display: flex;
    gap: 25px;
}

.nav-links a {
  text-decoration: none;
  color: black;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #2f80ed;
}

.nav-actions {
  display: flex;
  gap: 15px;
}

.nav-actions a {
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 5px;
  transition: background 0.3s ease, color 0.3s ease;
}

.signin {
  color: black;
}

.signup {
  background: #6945e0;
  color: white;
}

.signup:hover {
  background: #8c5cf4;
  color: white;
  border: 1px solid lightgray;
}


/* Hamburger Menu */


.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: 1100;
}

.menu-toggle span {
  height: 3px;
  width: 25px;
  background: #333;
  border-radius: 5px;
  transition: 0.3s;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


    /* Mobile Dropdown */

.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  position: fixed;
  top: 70px;
  right: 0;
  width: 100%;
  padding: 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  z-index: 10000;
}

.mobile-menu.show {
  display: flex;
  max-height: 500px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.mobile-menu a {
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
  margin: 10px 0;
  transition: color 0.3s ease;
}

.mobile-menu a:hover {
  color: #2f80ed;
}

@media (max-width: 768px) {
    .nav-links, .nav-actions {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}



/*hero section styling start from here*/



.hero_text{
  border: 1px solid white;
  height: 100vh;
  text-align: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'80\' height=\'80\'><path d=\'M80 0 L0 0 0 80\' fill=\'none\' stroke=\'%23E5E7EB\' stroke-width=\'1\'/></svg>');
  background-repeat: repeat;
  padding: 20px;
  position: relative;
}

.hero_text .w_icon{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 25%;
  right: 15%;
}

.hero_text .e_icon{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 70%;
  left: 10%;
}


.inner_hero_text{
      width: 85%;
      margin: auto;
    }



.hero_text h1{
  margin-top: 18%;
}


/*hero section glow button styling*/

.hero_text .glow-button {
  font-size: 18px;
  color: white;
  background: #6945e0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.email_bg{
  background: #f39c12;
}

.whatsapp_bg{
  background: #1b3301;
  color: white;
}

.seedemo{
  background: white;  
  color: #1b3301; 
  margin-left: 30px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1), -2px -2px 2px 2px rgba(0, 0, 0, 0.1);
}

/*overflow*/

.work_flow{
  width: 100%;
  margin-top: 80px;
  background: #6945e0;
  padding: 25px;
}
.work_flow h2{
  font-weight: bold;
}
.ad_tag{
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.ad_tag div{
  font-weight: bold;
}
.ad_card{
  width: 100%;
  padding: 20px;
  margin-top: 40px;
  background: white;
  border-radius: 8px;
}
.ad_card h5{
  font-weight: bold;
  margin-left: 20px;
  margin-top: 20px;
}
.ad_card p{
  margin-left: 20px;
}
.ad_card_img{
  width: 85%;
  height: 250px;
  border-radius: 10px;
  margin: auto;
  background: #ecf0f1;
}


/*build what matters*/

.matters{
  background: #4834d4;
  border-radius: 8px;
  margin-top: 50px;
}

.matters h2{
  font-weight: bold;
  color: white;
}

.matters p{
  color: white;
}

.matters img{
  width: 300px;
  height: 250px;
  margin-left: -12px;
  border-radius: 8px 0 0 8px;
}

.m_text{
  padding: 20px;
}

.m_text button{
  background: white;
}


/*product styling*/

.product{
  margin-top: 90px;
}

.product h2{
  font-weight: bold;
}

.product .card{
  width: 350px;
  margin: auto;
  margin-top: 50px;
  padding: 15px;
  border-radius: 10px;
}

.product .card h5{
  font-weight: bold;
}

.product .card span{
  font-weight: bold;
  color: black;
}

.product_icon{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid;
  margin-bottom: 100px;
  background: black;
  line-height: 60px;
  text-align: center;
}

.product_icon img{
  width: 45px;
  height: 45px;
}


/*how it work section styling start from here*/

.how_work{
  width: 100%;
  height: 250px;
  padding: 25px;
  margin-top: 100px;
  background: #6945e0;
}
.how_work h2{
  font-weight: bold;
}

.how_card{
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
  background: white;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1),-2px -2px 2px 2px rgba(0, 0, 0, 0.1);
}

.how_card h5{
  margin-left: 20px;
  margin-top: 20px;
  font-weight: bold;
}

.how_card p{
  margin-left: 20px;
}

.track_card{
  width: 100%;
  height: 350px;
  border-radius: 8px;
  margin-top: 30px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1),-2px -2px 2px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.track_card .ad_card_img{
  width: 350px;
  height: 250px;
  border-radius: 10px;
  margin: auto;
  background: #ecf0f1;
}

.track_text{
  width: 350px;
  height: 250px;
}

.how_card h5{
  font-weight: bold;
}

.track_text h5{
  font-weight: bold;
}


/*features style*/


.features{
  margin-top: 900px;
}
.features h2{
  font-weight: bold;
}

.border_bottom{
  width: 100%;
  border-bottom: 1px solid lightgray;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.f_text{
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #4834d4;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  display: flex;
}

.f_text img{
  width: 20px;
  height: 20px;
  display: block;
}

.f_text_e{
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
}

.f_text_r{
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
}

.f_text_a{
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
}

.f_text h6{
  line-height: 40px;
}

.f_text_e h6{
  line-height: 40px;
}

.f_text_r h6{
  line-height: 40px;
}

.f_text_a h6{
  line-height: 40px;
}

.f_whatsapp{
  width: 90%;
  padding: 20px;
  margin: auto;
}

.f_email{
  width: 90%;
  padding: 20px;
  margin: auto;
  display: none;
}

.f_realtime{
  width: 90%;
  padding: 20px;
  margin: auto;
  display: none;
}

.f_advance{
  width: 90%;
  padding: 20px;
  margin: auto;
  display: none;
}

.f_box{
  width: 300px;
  height: 300px;
  background: #ecf0f1;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.f_box h5{
  font-weight: bold;
  margin-top: 50px;
}

.f_whatsapp h6{
  font-weight: bold;
}

.f_email h6{
  font-weight: bold;
}

.f_realtime h6{
  font-weight: bold;
}

.f_advance h6{
  font-weight: bold;
}

.f_box button{
  background: #4834d4;
  color: white;
}

.m_shadow{
  border: none;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1),-2px -2px 2px 2px rgba(0, 0, 0, 0.1);
}
.f_whatsapp h6{
  color: #5143e4;
}
.f_email h6{
  color: #5143e4;
}
.f_realtime h6{
  color: #5143e4;
}
.f_advance h6{
  color: #5143e4;
}

/*    why us styling*/

.whyus{
  margin-top: 100px;
  padding: 20px;
  border-radius: 15px;
}

.whyus h2{
  font-weight: bold;
}

.whyus h6{
  font-weight: bold;
}

.why_icon{
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background: rgba(81, 67, 228, 0.3);
  text-align: center;
  line-height: 50px;
}
.why_icon i{
  color: #5143e4;
  font-size: 20px;
}

.w_card{
  margin: auto;
  width: 90%;
}

.w_card_customize{
  padding: 20px;
  color: white;
  background: #5143e4;
  border-radius: 8px;
}

.w_card_customize .why_icon{
  background: white;
}

/*pricing */

.pricing{
  margin-top: 100px;
}
.pricing h2{
  font-weight: bold;
}

.plan {
        background: #fff;
        padding: 30px;
        border-radius: 10px;
        flex: 1;
        min-width: 280px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: relative;
        margin-top: 50px;
    }
    .plan span.tag {
        position: absolute;
        top: 20px;
        right: 20px;
        background: #e0e7ff;
        color: #1d4ed8;
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 12px;
    }
    .plan h3 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 24px;
    }
    .plan p {
        font-size: 14px;
        color: #555;
        margin-bottom: 20px;
    }
    .plan .price {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .plan ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
    }
    .plan ul li {
        margin-bottom: 10px;
        position: relative;
        padding-left: 20px;
    }
    .plan ul li::before {
        content: '✔';
        position: absolute;
        left: 0;
        color: #007bff;
    }
    .plan button {
        background: #5143e4;
        color: #fff;
        border: none;
        padding: 12px 20px;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
        font-size: 16px;
    }

/*    w_templates*/

.w_templates{
  margin-top: 100px;
}

.w_templates h2{
  font-weight: bold;
}

.w_temp_card{
  min-height: 300px;
  width: 100%;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1),-2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 50px;
  padding: 20px;
}

.w_temp_card h6{
  font-weight: bold;
}

.w_temp_card img{
  display: block;
  margin: auto;
}

.w_temp_card2{
  width: 100%;
  border: 1px solid lightgray;
  border-radius: 8px;
  margin-top: 50px;
  padding: 20px;
}


.w_templates .ex_btn{
  width: 120px;
  color: white;
  margin-top: 40px;
}


/*partner section styling*/

.partner{
  width: 100%;
  padding: 25px;
  border: 1px solid lightgray;
  border-radius: 10px;
  margin-top: 100px;
}
.partner h2{
  font-weight: bold;
}
.textsi{
  font-size: 36px;
  font-weight: bold;
}

/*contact section styling*/

.contactus{
  margin-top: 100px;
}

.contactus h2{
  font-weight: bold;
}

.contact_form{
  width: 100%;
  padding: 20px;
  border: 1px solid lightgray;
  border-radius: 10px;
}

.contact_form button{
  width: 100%;
  color: white;
}

.form_msg h6{
  font-weight: bold;
}


/*footer section styling start from here*/



.footer{
  width: 100%;
  background: white;
  margin-top: 50px;
}

.footer_first{
  margin-top: 60px;
}

.footer_second{
  margin-top: 60px;
}

.footer_second a{
  display: block;
  margin-top: 15px;
  text-decoration: none;
  color: gray;
}

.footer_second a:hover{
  color: blue;
}

.newsletter{
  width: 400px;
  height: 53px;
  border: 1px solid lightgray;
  padding: 5px;
}

.newsletter input{
  width: 100%;
  height: 40px;
  border: none;
}

.newsletter button{
  width: 120px;
  height: 40px;
  background: #fbc531;
  border: none;
  color: black;
}

.footer_icon i{
  padding-left: 20px;
}

.footer_icon i:hover{
  color: blue;
}


.error {
      border-color: red !important;
    }