/* Custom styles for dark theme and purple accent */
    body {
      background: #0a0a23!important;
      color: #eee!important;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      line-height: 1.6;
    }
    
    a,
    a:hover,
    a:focus {
      color: #9c5cff;
      text-decoration: none;
      outline: none;
    }

    .data {

  margin-top:50px;

  

  padding:4rem;

  font-size:1.4rem;

  min-height:62vh;
  color:#fff;

  

}
    /* Navbar */
    .navbar{
        margin-bottom:0 !important;
        padding: 1rem;
         
    }
    .navbar-inverse {
      background-color: #0a0a23!important;
      border-color: transparent;
      box-shadow: none;
    }
    .navbar-inverse .navbar-nav > li > a {
      color: #bbb;
      font-weight: 600;
    }
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
      color: #9c5cff;
      background: transparent;
    }
    .navbar-inverse .navbar-brand {
      color: #9c5cff;
      font-weight: 700;
      font-size: 1.4em;
    }
    .navbar-inverse .navbar-toggle {
      border-color: #333;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
      background-color: #9c5cff;
    }

    /* Hero Section */
    #hero {
      padding: 100px 15px 60px;
      background: linear-gradient(135deg, #0a0a23 0%, #1a1240 100%);
      position: relative;
      overflow: hidden;
    }
    #hero .tagline {
      display: inline-block;
      font-size: 14px;
      background: #251c50;
      color: #9c5cff;
      padding: 5px 12px;
      border-radius: 30px;
      margin-bottom: 15px;
    }
    #hero h1 {
      font-size: 48px;
      font-weight: 800;
      color:#fff;
      margin-bottom: 20px;
      max-width: 480px;
      line-height: 1.1;
    }
    #hero .subtitle {
      font-size: 18px;
      max-width: 420px;
      color: #bbb;
      margin-bottom: 35px;
    }
    /* Stats */
    #hero .stats {
      margin-bottom: 35px;
    }
    #hero .stats .stat {
      display: inline-block;
      margin-right: 25px;
      color: #bbb;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.03em;
    }
    #hero .stats .stat strong {
      display: block;
      font-size: 22px;
      color: #9c5cff;
      
    }
      #pricing {
            background: #19113e;
            padding: 70px 15px 80px;
            text-align: center;
        }
        #pricing h2 {
            font-size: 3.4rem;
            font-weight: 900;
            color: #d8d7ff;
            margin-bottom: 45px;
        }
        #pricing .pricing-cards {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 1140px;
            margin: 0 auto;
        }
        #pricing .pricing-card {
            background: #211c3d;
            border-radius: 14px;
            /* box-shadow: 0 0 40px rgba(88, 86, 154, 0.6); */
            margin: 15px 12px;
            padding: 30px 25px;
            flex: 0 0 450px;
            color: #cdcaff;
            user-select: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: box-shadow 0.3s ease;
        }
        #pricing .pricing-card.popular {
            background: #7159ff;
            color: white;
            /* box-shadow: 0 0 60px #8a7eff; */
            position: relative;
        }
        #pricing .pricing-card.popular::before {
            content: "Most Popular";
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: #453ecf;
            font-weight: 700;
            padding: 5px 18px;
            border-radius: 20px;
            font-size: 0.8em;
            box-shadow: 0 0 10px #453ecf;
        }
        #pricing .pricing-title {
            font-weight: 900;
            font-size: 4rem;
            margin-bottom: 20px;
        }
        #pricing .price {
            font-size: 2.8em;
            font-weight: 800;
            margin-bottom: 18px;
        }
        #pricing .price small {
            font-size: 0.8em;
            color: #c1bff2;
            font-weight: 600;
        }
        #pricing ul.features-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 20px;
            text-align: left;
            font-size: 1.05em;
            color: #c8c6e5;
        }
        #pricing ul.features-list li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(108, 104, 164, 0.3);
        }
        #pricing ul.features-list li:last-child {
            border-bottom: none;
        }
        #pricing .btn-pricing {
            margin-top: auto;
            background: #7f70ff;
            padding: 14px 38px;
            border-radius: 6px;
            color: white;
            font-weight: 700;
            font-size: 1.05em;
            border: none;
            cursor: pointer;
            box-shadow: 0 0 18px rgba(135, 120, 255, 0.8);
            transition: background-color 0.3s, box-shadow 0.3s;
            user-select: none;
        }
        #pricing .btn-pricing:hover {
            background: #9a8eff;
            box-shadow: 0 0 25px rgba(154, 142, 255, 1);
        }


    /* Hero Buttons */
    #hero .btn-primary,
    #hero .btn-default {
      padding: 15px 30px;
      font-weight: 700;
      border-radius: 30px;
      font-size: 14px;
      min-width: 130px;
    }
    #hero .btn-primary {
      background-color: #9c5cff;
      border-color: #9c5cff;
      color: white;
    }
    #hero .btn-primary:hover,
    #hero .btn-primary:focus {
      background-color: #7a3ed7;
      border-color: #7a3ed7;
      color: white;
    }
    #hero .btn-default {
      background-color: transparent;
      border: 2px solid #9c5cff;
      color: #9c5cff;
      margin-left: 15px;
    }
    #hero .btn-default:hover,
    #hero .btn-default:focus {
      background-color: #9c5cff;
      color: white;
      border-color: #9c5cff;
    }

    /* Hero right image container */
    #hero .hero-image {
      max-width: 480px;
      margin-top: 40px;
    }
    #hero .hero-image .window {
      background: #1f173d;
      border-radius: 14px;
      padding: 30px;
      position: relative;
      box-shadow: 0 0 15px rgba(156, 92, 255, 0.4);
      color: #ccc;
      font-family: 'Courier New', Courier, monospace;
      font-weight: 500;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }
    #hero .hero-image .window::before {
      content: "";
      position: absolute;
      top: 15px;
      left: 20px;
      height: 14px;
      width: 50px;
      background: #251c50;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 12px;
      box-sizing: border-box;
    }
    #hero .hero-image .window code {
      font-size: 14px;
      color: #9c5cff;
      user-select: none;
      opacity: 0.8;
      text-align: left;
      padding: 1rem;
    }
    #hero .hero-image .button-group {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #hero .hero-image .button-group .btn-shape {
      font-size: 11px;
      font-weight: 600;
      background-color: #9c5cff;
      border-radius: 14px;
      padding: 7px 12px;
      color: white;
      cursor: pointer;
      box-shadow: 0 0 10px #9c5cff66;
      border: none;
      transition: background-color 0.3s ease;
      white-space: nowrap;
    }
    #hero .hero-image .button-group .btn-shape:hover,
    #hero .hero-image .button-group .btn-shape:focus {
      background-color: #7a3ed7;
      outline: none;
    }

    /* Section Titles */
    .section-title {
      text-align: center;
      margin-bottom: 60px;
    }
    .section-title h2 {
      font-weight: 700;
      font-size: 36px;
      color: white;
      margin-bottom: 8px;
    }
    .section-title h2 span {
      color: #9c5cff;
    }
    .section-title p {
      color: #aaa;
      font-size: 16px;
    }

    /* How it works section */
    #how-it-works {
      padding: 80px 15px;
      max-width: 1140px;
      margin: 0 auto;
    }
    #how-it-works .row > div {
      margin-bottom: 30px;
    }
    #how-it-works .step {
      background: #1d1538;
      border-radius: 14px;
      padding: 30px;
      box-shadow: 0 0 30px #3e2f76;
      color: #bbb;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    #how-it-works .step h4 {
      color: #9c5cff;
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 20px;
    }
    #how-it-works .step p {
      flex-grow: 1;
      font-size: 14px;
      line-height: 1.4em;
    }

    /* Upload/Input and code previ
    ew containers */
    #upload-code, #ai-transform, #download-deploy {
      padding: 50px 15px;
      /* max-width: 960px;
      margin: 0 auto 60px; */
    }
    #upload-code .section-header,
    #ai-transform .section-header,
    #download-deploy .section-header {
      margin-bottom: 30px;
    }
    #upload-code .text-block,
    #ai-transform .text-block,
    #download-deploy .text-block {
      color: #bbb;
      font-size: 15px;
      margin-bottom: 20px;
    }
    #upload-code .upload-area,
    #ai-transform .code-area,
    #download-deploy .download-area {
      /* background: #1d1538; */
      /* border-radius: 12px;
      padding: 40px; */
      color: #555;
      text-align: center;
      font-size: 14px;
      font-style: italic;
      /* box-shadow: inset 0 0 30px #3e2f76; */
      min-height: 140px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Features section */
    #features {
      background: #120a35;
      padding: 60px 15px 80px;
      color: white;
      /* max-width: 1140px; */
      /* margin: 0 auto 80px; */
    }
    #features .feature-card {
      /* background: #1d1538; */
      border-radius: 14px;
      padding: 30px 20px 35px;
      /* box-shadow: 0 0 30px #3e2f76; */
      min-height: 250px;
      margin-bottom: 4rem;
      color: #bbb;
      transition: box-shadow 0.3s ease;
      text-align: center;
    }
    .feature-card i {
  font-size: 36px;
  color: #7A3ED7; /* Use your desired color */
  margin-bottom: 10px;
  display: block;
  padding: 1rem;
  text-align: center;
}

    #features .feature-card:hover {
      /* box-shadow: 0 0 40px #9c5cff; */
    }
    #features .feature-card h4 {
      font-weight: 700;
      color: #fff;
      margin-bottom: 15px;
      font-size: 20px;
    }
    #features .feature-card p {
      font-size: 14px;
      line-height: 1.5em;
    }

    /* Use Cases Section */
    #use-cases {
      padding: 60px 15px;
      max-width: 980px;
      margin: 0 auto 80px;
      color: #ccc;
    }
    #use-cases .usecase-card {
      background: #1d1538;
      border-radius: 14px;
      padding: 30px;
      box-shadow: 0 0 30px #3e2f76;
      margin-bottom: 30px;
      color: #bbb;
    }
    #use-cases .usecase-card h4 {
      font-weight: 700;
      color: #9c5cff;
      margin-bottom: 15px;
      font-size: 20px;
    }
    #use-cases .usecase-card p {
      font-size: 14px;
      margin-bottom: 20px;
      line-height: 1.4;
    }
    #use-cases .usecase-card .tags {
      font-size: 13px;
    }
    #use-cases .usecase-card .tags span {
      background: #9c5cff;
      color: #120a35;
      padding: 4px 10px;
      border-radius: 16px;
      margin-right: 8px;
      display: inline-block;
      font-weight: 600;
      box-shadow: 0 0 10px #9c5cff99;
    }
    #use-cases .btn-view-more {
      display: inline-block;
      margin-top: 20px;
      padding: 14px 35px;
      background-color: #9c5cff;
      color: white;
      border-radius: 30px;
      font-weight: 700;
      font-size: 14px;
      border: none;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border: 2px solid transparent;
    }
    #use-cases .btn-view-more:hover,
    #use-cases .btn-view-more:focus {
      background-color: #7a3ed7;
      outline: none;
    }
    .section-header{
      font-size: 4rem;
      font-weight: 800;
    }

    /* Platforms Section */
    #platforms {
      padding: 40px 15px 80px;
      max-width: 980px;
      margin: 0 auto;
      color: white;
    }
    #platforms .platform-card {
      background: #1d1538;
      border-radius: 14px;
      padding: 25px 20px;
      box-shadow: 0 0 20px #3e2f76;
      text-align: center;
      margin-bottom: 30px;
      transition: box-shadow 0.3s ease;
      cursor: default;
    }
    #platforms .platform-card:hover {
      box-shadow: 0 0 30px #9c5cff;
    }
    #platforms .platform-card h5 {
      margin-top: 15px;
      font-weight: 700;
      color: #9c5cff;
      font-size: 25px;
    }
    #platforms .platform-card small {
      color: #bbb;
      font-size: 13px;
    }
    #platforms .platform-icons {
      font-size: 35px;
      color: #9c5cff;
    }

    /* Testimonials Section */
    #testimonials {
      padding: 60px 15px 80px;
      max-width: 1140px;
      margin: 0 auto;
      color: white;
    }
    #testimonials .summary-stats {
      text-align: center;
      margin-bottom: 50px;
      font-weight: 600;
      color: #bbb;
    }
    #testimonials .summary-stats .stat {
      display: inline-block;
      margin: 0 25px;
    }
    #testimonials .summary-stats .stat strong {
      font-size: 26px;
      color: #9c5cff;
      display: block;
      margin-bottom: 4px;
    }
    #testimonials .testimonial-cards {
      margin-top: 30px;
    }
    #testimonials .testimonial-card {
      background: #1d1538;
      border-radius: 14px;
      padding: 30px;
      box-shadow: 0 0 30px #3e2f76;
      color: #bbb;
      margin-bottom: 30px;
      min-height: 230px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 14px;
    }
    #testimonials .testimonial-card .stars {
      color: #ffc55c;
      font-size: 16px;
      margin-bottom: 10px;
    }
    #testimonials .testimonial-card p {
      font-style: italic;
      line-height: 1.5;
      color: #ddd;
      margin-bottom: 25px;
      flex-grow: 1;
    }
    #testimonials .testimonial-card .author {
      font-weight: 700;
      color: #9c5cff;
      font-size: 16px;
    }
    #testimonials .testimonial-card .author-title {
      font-size: 13px;
      color: #bbb;
      margin-top: 3px;
    }
    /* signup page */

.signup-wrapper{

  padding: 4rem; 

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;



 }

 .signup-form{

      margin-top:60px;

  position: relative;

  width: 100%;

  max-width: 600px;

  padding: 60px 40px 40px;

    background: #0a0a23;
    border: 2px solid #9c5cff;


  border-radius: 10px;

  color: #fff;

  box-shadow: 0 15px 25px rgba(0,0,0,0.5);

 }



.signup-form h2 {

  text-align: center;

  letter-spacing: 4px;

  margin-bottom: 2rem;

  font-size: 2.4rem;

  color: #9c5cff;

}

.signup-form .input-group {

  position: relative;

  width:100%;

}

.signup-form .input-group input,textarea,select {

  width: 100%;

  padding: 10px 0;

  font-size: 1.6rem;

  color:#999;

  letter-spacing: 1px;

  margin-bottom: 30px;

  border: none;

  border-bottom: 1px solid #4a4a4a;

  outline: none;

  background-color: transparent;

  resize: none;

}

.signup-form .input-group label{

    color: #fff;

    font-size: 1.6rem;

}

.submit-btn {

   display: block;

   margin-left: auto;

   border: none;

   outline: none;

   background: #9c5cff;

   font-size: 1.4rem;

   text-transform: uppercase;

   letter-spacing: 1px;

   padding: 10px 20px;

   border-radius: 5px;

   color: #fff;

   cursor: pointer;

   margin-bottom: 1.2rem;

 }

  /* login-form */

.login-wrapper {

    padding:7rem ;

 

   display: flex;

   justify-content: center;

   align-items: center;

 }

 .form {
    background: #0a0a23;
    border: 2px solid #9c5cff;
  
     margin-top:40px;

   position: relative;

   width: 100%;

   max-width: 380px;

   padding: 80px 40px 40px;

   /* background: rgba(0,0,0,0.7); */


   border-radius: 10px;

   color: #fff;

   box-shadow: 0 15px 25px rgba(0,0,0,0.5);

 }

 

 

 .form h2 {

   text-align: center;

   letter-spacing: 4px;

   margin-bottom: 2rem;

   font-size: 2.4rem;

   color: #57a2b8;

 }

 .form .input-group {

   position: relative;

 }

 .form .input-group input {

   width: 100%;

   padding: 10px 0;

   font-size: 1.6rem;

   color:#999;

  letter-spacing: 1px;

  margin-bottom: 30px;

  border: none;

  border-bottom: 1px solid #4a4a4a;

   outline: none;

   background-color: transparent;

 }

 .form .input-group label{

     color: #fff;

     font-size: 1.6rem;

 }

  /* advertise page */

.content-top{

 margin-top:80px;



  text-align: center;

  list-style-type: none;

 

}

.content-top h2{

  color: #272F38;

  padding: 1rem;

  

  font-size: 2.1rem;

}

.content-top li{

  padding:.5rem;

  color: #384350;

  font-size: 1.4rem;

}

.content-top ul{

  list-style-type: none;

}
/*dashboard*/
.dash-container{
  position: relative;
  width:  100%;
  display:flex;
  margin: 0rem auto;
 min-height: 100vh;

  
  
}
.dash{
    padding:1rem;
}
.dash-nav{
  position: absolute;
  top: 0;
  width :280px;
  height: 100%;
  background:#090616;
  transition: 0.5s;
  overflow: hidden;
}
.dash-nav.active{
  width: 50px;

}

.dash-nav ul{
  position: absolute;
  top:0;
  left:0;
  width:100%
}
.dash-nav ul li{
  position: relative;
  width:100%;
  list-style: none;
  border-bottom: 1px solid rgb(56 55 55 / 32%);
}
.dash-nav ul li:hover{
  background:#010C21;;
  cursor:pointer;

}
/*.dash-nav ul li:nth-child(1){*/
/*  margin-bottom:20px ;*/
/*}*/

.dash-nav ul li:nth-child(1):hover{
  background: #010C21;
}
.dash-nav ul li a h2{
  font-size: 15px;
  
 
}
.dash-nav .link .dash-title h2{
    margin-top:0px;
    font-weight: 400;
    
 

}
.dash-nav .link .dash-title h2 i{
  padding-right: 1.2rem;
  font-size: 2rem;
}



.dash-nav ul li .link{
   
   padding:.5rem;
  position: relative;
  display: block;
  width: 100%;
  margin-left: 2rem;
  /*display: flex;*/
  text-decoration: none;
  color:#fff;
  font-size: 16px;
  border-bottom:1px solid rgba(0,0,0,0.2);
  

}
.dash-nav ul li a{
    color:#fff;
    text-decoration:none;
    text-align:left;
    font-size:1.6rem;
}
/*.dash-nav ul li a .icon{*/
/*  position: relative;*/
/*  display: block;*/
/*  min-width: 60px;*/
/*  height: 60px;*/
/*  line-height: 60px;*/
/*  text-align: center;*/

/*}*/
.dash-nav ul li a .icon .fab{
  color: #fff;
  font-size: 15px;
}
.dash-nav ul li  .dash-title{
  position: relative;
 
  display: block;
  padding: 1rem;
  /*height: 60px;*/
  line-height: 25px;
  white-space: nowrap;
}
.dash-nav ul li a .brand{
  text-transform: uppercase;
  font-size: 15px;
}
.main-container{
  position: relative;
  width: calc(100% - 280px);
 
  left:280px;
  /* min-height: 100vh; */
  /*background: #f5f5f5;*/
  transition: 0.5s;
}
.main-container.active{
  width: calc(100% - 50px);
  left:50px;
}


.main-container .topbar{
  width: 100%;
  background: rgb(0 0 0 / 35%);
  height: 60px;
  padding-left: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toggle h4{
  position: absolute;
    top: 18px;
    left: 49px;
    font-size: 2rem;
    color:#fff;
    margin:0;
}
table{
  color: #999;
 
}

.toggle{
  position: relative;
  width: 60px;
  height: 60px;
  
  cursor: pointer;
}
.toggle::before{
  content: '\f007';
  font-family: "Font Awesome 5 Free";
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 60px;
  font-size: 24px;
  text-align: center;
  color: #fff;
}


.cardBox{
  position: relative;
  width: 100%;
 
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap:20px;
  margin-top: 4rem;

}
.cardBox .dash-card{
  position: relative;
 background: rgb(0 0 0 / 35%);
  height: 160px;
  padding: 20px;
  /* display: flex;
  justify-content: space-between; */
  cursor: pointer;
  
}
.cardBox .dash-card h3{
  color: #fff;
  line-height: 1.4;
}
.cardBox .dash-card .top-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .5rem;
}
.cardBox .dash-card .top-card .numbers{

  position: relative;
  font-size:1.4rem;
  font-weight: 500;
  padding: 0 1rem;
}
.cardBox .dash-card .top-card .numbers h3{
  color:#fff;
  /* line-height: 0.8; */
  font-size: 4rem;
}
.cardBox .dash-card .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  line-height: 1.4;
}
.cardBox .dash-card .numbers span{
  /* font-size: 1rem; */
  color:#777;
}
.cardBox .dash-card .cardName{
  color:#fff;


}
.cardBox .dash-card  .iconBox{
  width: 10rem;
}
.cardBox .dash-card  .iconBox img{
  width: 100%;
}
.details{
  position: relative;
  width: 100%;
  padding: 20px;
  padding-top: 0;
      
  display: grid;
  grid-gap: 20px;
  
  grid-template-columns: repeat(2,1fr);
}
.card-image{
  position: relative;
  width: 100%;
  padding: 20px;
  padding-top: 0;
  
  display: grid;
  grid-gap: 20px;
  
  grid-template-columns: repeat(1fr);
}

.card-image .cardHeader{
  position: relative;
  display: grid;
  min-height: 150px;
  background:  rgb(16 12 33);
  padding: 20px;

}
.card-image .cardHeader img{
  width: 100%;
}
.details .recent-details{
  position: relative;
  display: grid;
  min-height: 150px;
  background:  rgb(0 0 0 / 35%);
  padding: 20px;
}
.cardHeader .top-card{
  display: flex;
  align-items: center;
  padding-bottom: 2rem;
}
.cardHeader .top-card .iconBox{
  width:6rem;
}
.cardHeader .top-card .iconBox img{
  width: 100%;
}
.cardHeader .top-card .numbers{
  padding: 0 1rem;
  font-size: 2rem;
}
.cardHeader .top-card .numbers h3{
  color: #fff;
  /* line-height: 0.8; */
  margin:0;
}
.cardHeader .top-card .numbers span{
  color:#999;
  /* font-size: 1rem; */
}
.cardHeader h3{
  color: #fff;
  /* font-size: 1.6rem; */
  line-height: 1.4;
  margin:0;

}
.cardHeader .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  line-height: 2;
  font-size:1.4rem;
}
.dash-btn{
  
  position: relative;
  padding: 5px 10px;
  background: #03a9f4;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
}
.details .right-nav{
  position: relative;
  display: grid;
  height: 100%;
  background: #fff;
  padding: 20px;
}
.details .right-nav ul{
  padding: 10px;
  list-style: none;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.details .right-nav li{
  padding-bottom: 8px;
}
.details .right-nav  a{
  text-decoration: none;

  color:#03a9f4

}



       /* Footer */
        footer {
            background: #040414!important;
            padding: 30px 15px;
            /* text-align: center; */
            color: #4e4a84;
            margin-top:2rem;
            font-size: 0.9em;
            user-select: none; 
        }
        .copyright{
            background: #030312;
        }


    /* Community CTA */
    #community {
      text-align: center;
      padding: 60px 15px 80px;
      background: #02021c;;
    }
    #community h3 {
      color: white;
      font-weight: 700;
      font-size: 35px;
      margin-bottom: 20px;
    }
   .btn-community {
      background-color: #9c5cff;
      border-color: #9c5cff;
      color: white;
      padding: 14px 40px;
      margin: auto;
      font-weight: 700;
      font-size: 14px;
      border-radius: 30px;
      border: 2px solid transparent;
      transition: background-color 0.3s ease;
      cursor: pointer;
    }
    #community .btn-community:hover,
    #community .btn-community:focus {
      background-color: #7a3ed7;
      outline: none;
    }

    /* Responsive Overrides */
    @media (max-width: 991px) {
      #hero h1 {
        font-size: 38px;
      }
      #hero .hero-image {
        max-width: 100%;
        margin-top: 40px;
      }
    }
    @media (max-width: 767px) {
      #hero {
        padding: 60px 15px 40px;
      }
      #hero h1 {
        font-size: 30px;
        max-width: 100%;
      }
      #hero .stats {
        font-size: 12px;
      }
      #how-it-works .step {
        min-height: auto;
      }
      #features .feature-card {
        min-height: auto;
      }
      #testimonials .testimonial-card {
        min-height: auto;
      }
    }
    @media (max-width: 1200px) {
  .header .contact-info {
    padding: 2rem 5%;
  }
  .header .main-navbar {
    padding: 2rem 5%;
  }
  section {
    padding: 3rem 5%;
  }
}

@media (max-width: 991px) {
  html {
    font-size: 55%;
  }
  .header .contact-info {
    padding: 2rem;
  }
  .header .main-navbar {
    padding: 2rem;
  }
  section {
    padding: 3rem 2rem;
  }
  .dash-nav{
    left:-300px;
}
.dash-nav.active{
    left:0;
}


.main-container{
    width:100%;
    left:0px;   

    
}
.cardBox{
  grid-template-columns: repeat(1,1fr);
}
}

@media (max-width: 768px) {
  .header .contact-info {
    display: none;
  }
  .header #menu-btn {
    display: inline-block;
  }
  .header #menu-btn.fa-times {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .header .main-navbar .links {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    background: #100c21;
    border-top: 0.2rem solid #334;
    border-bottom: 0.2rem solid #334;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  .header .main-navbar .links.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .header .main-navbar .links a {
    display: block;
    margin: 2.5rem 2rem;
    font-size: 2.5rem;
  }
  .home{
    /* flex-direction: column; */
    margin-top: 0;
  }
  .home .content{
    flex:1;
    text-align: center;
  }
  .home .image{
    margin-top:0;
  }
  .about{
    flex-direction: column;
    
  }
 

  .signup-wrapper, .login-wrapper{
    padding: 2rem;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }

}