body {
      padding-top: 100px; /* Adjust this value based on your navbar height */
      font-family: 'Poppins';
    }


h1{
  font-weight: bolder ;
}
h2{
  font-weight: bolder ;
}
h3{
  font-weight: bolder ;
}
h4{
  font-weight: bolder ;
}
h5{
  font-weight: bolder ;
}
h6{
  font-weight: bolder ;
}


/* notice */
.cookie-notice {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    bottom: 0;
    width: 100%;
    background: #000;
    color: #F6F6F6;
    font-size: 16px;
    z-index: 999;
}

.cookie-notice a {
    color: #F6F6F6;
    text-decoration: none;
}

.cookie-notice a:visited {
    color: #F6F6F6;
}

.cookie-notice .cookie {
    font-size: 2.2rem;
    margin-right: .3rem;
    margin-left: 1rem;
}

.cookie-notice .accept-cookies {
    cursor: pointer;
    border: 3px solid #1ACD98;
    outline: none;
    background: transparent;
    color: #fff;
    font-weight: 700;
    padding: .5rem 1.5rem;
    margin-right: 1rem;
    margin-left: 3rem;
    transition: .35s ease;
}

.cookie-notice .accept-cookies:hover {
  background-color: #1ACD98;
    box-shadow: .01rem .01rem .1rem #DDDDDD;
}





#button {
  display: inline-block;
  background-color: #1ACD98;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;

  animation: bounce 2s infinite; /* Apply animation here */
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  text-decoration: none;
    box-shadow: 0 10px 30px rgba(26,205,152); /* Shadow effect using rgba with the button's color */

}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, -50%) scale(1); /* Default position */
  }
  40% {
    transform: translate(-50%, -50%) scale(1.2); /* Bounce effect */
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* Slightly scaled down */
  }
}

/* Customize the scrollbar track */


::-webkit-scrollbar {
  width: 12px; /* Set the width of the scrollbar */
}

/* Customize the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #F6F6F6 , #F6F6F6 ); /* Gradient color for the thumb */
  border-radius: 5px; /* Rounded corners for the thumb */
}

/* Customize the scrollbar track background */
::-webkit-scrollbar-track {
  background: #1ACD98; /* Background color for the scrollbar track */
}

/* Customize the scrollbar corner (optional) */
::-webkit-scrollbar-corner {
  background: #1ACD98; /* Background color for the scrollbar corner */
}


.review-section {
  padding: 20px;
  background-color: #f9f9f9;
}

.section-title {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
}

.reviews {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.review-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 15px;
  width: 300px;
  text-align: center;
}

.review-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.review-text {
  font-style: italic;
  color: #333;
  margin-bottom: 10px;
}

.review-name {
  font-weight: bold;
  color: #555;
}




.button-group {
  display: flex;
  justify-content: center; /* Center buttons horizontally */
  gap: 10px; /* Optional: Add some space between buttons */
}

.pricing-3 .popular-tag {
    position: absolute;
    top: 0;
    left: 40px;
    background-color: #3cd458;
    color: #fff;
    padding: 1px 0.75rem;
    padding-right: 1.5rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    font-weight: 400;
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
.modal-body { 
  h1 { 
    font-weight:900; 
    font-size:2.3em;
    text-transform:uppercase;
  }
  
  a.pre-order-btn { 
    color:#000;
    background-color:gold;
    border-radius:1em;
    padding:1em;
    display: block;
    margin: 2em auto;
    width:50%;
    font-size:1.25em;
    font-weight:6600;
    &:hover { 
    background-color:#000;
      text-decoration:none;
      color:gold;
    }
  }
  
  
}




.float-button {
        text-decoration: none;
        position: fixed;
        padding: 10px;
/*        padding-right: 15px;*/
        bottom: 30px;
        right: 30px;
        color: #fff;
        background-color:#25D366;
        border-radius: 100%;
        z-index: 100;
        font-family: Arial;
        font-size: 17px;
        animation: whatsapp-animation 0.5s ease-in-out;
        box-shadow: 1px 2px 5px 2px rgba(30,30,30,0.3);
        transition:all 0.3s ease-out;
    }

    .float-button:hover {
         background-color: #128C7E;
          color: #fff;
          text-decoration: none !important;
    }

    .fa-whatsapp {
        font-size: 50px !important;
        padding-right: 5px;
        padding-left: 5px;
    }

    @keyframes whatsapp-animation {
        from {
            opacity: 0%;
        }

        to {
            opacity: 100%
        }
    }

    @media screen and (max-width: 545px) {
        /*span {
            display: none;
        }*/

        

        .float-button {
            bottom: 15px;
            right: 15px;
            padding-right: 8px;
/*            width: 20px;*/
            border-radius: 20px 20px 5px 20px;
        }

        .fa-whatsapp {
            font-size: 22px !important;
            padding: 4px;
        }
    }

@media screen and (max-width:1024px){
     .animated-button{
/*          font-size: 8px !important;*/
          padding:5px 8px !important;
/*          max-width: 50% !important;*/
     }
/*     #main_background_img{
          display: none !important;
     }*/
}

.marquee {
  display: flex;
  block-size: var(--marquee-item-height);
  margin-block: var(--marquee-item-height);
  position: relative;
  overflow-x: hidden;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 50%,
    hsl(0 0% 0% / 1) 50%,
    hsl(0 0% 0% / 0)
  );
}




.navbar{
  padding: 0.5rem  0.5rem !important;
}

.navbar-light .navbar-nav .nav-link{
     color:#000 !important;
     font-weight: bolder;
}

 .dropdown-menu {
      background-color: #ffffff;
      border: 1px solid rgba(0,0,0,.1);
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
      transition: opacity 0.3s ease-in-out;
    }

    .dropdown-item {
      color: #333;
      padding: 0.75rem 1.5rem;
      font-size: 14px;
      transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    }

    .dropdown-item:hover, .dropdown-item:focus {
      background-color: #1ACD98;
      color: whitesmoke;
    }

    .dropdown-divider {
      margin: 0.5rem 0;
      border-color: rgba(0,0,0,.1);
    }

    .dropdown-menu-right {
      right: 0;
      left: auto;
    }



    /* Button CSS */
    .animated-button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      color: black;
      font-weight: bolder;
      border: none; 
      border:4px solid #1ACD98;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: color 0.3s, background-color 0.3s;
    }

    .animated-button:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background-color: rgba(255, 255, 255, 0.1);
      transition: width 0.3s ease-out, height 0.3s ease-out, background-color 0.3s;
      border-radius: 50%;
      z-index: 0;
      transform: translate(-50%, -50%);
    }

    .animated-button:hover:before {
      width: 0;
      height: 0;
      border-color: transparent;
      background-color: rgba(255, 255, 255, 0);
    }

    .animated-button span {
      position: relative;
      z-index: 1;
    }

    /* Keyframe Animation */
/*    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }*/

    .animated-button:hover {
     background-color: #1ACD98;
     border-color: transparent;
      animation: pulse 1s ease-in-out infinite;
    }


 .gradient-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    outline: none !important;
    text-align: center;
    background-color: transparent; /* Fallback color */
    transition: all 0.3s ease;
    border: 3px solid #1ACD98;
  }
  
  .gradient-button:hover {
    outline: none !important;
    border-color: transparent;
    background-color: #1ACD98; /* Transparent background on hover */
    color: white; /* Text color change on hover */
  }



  .ad_revenue{
     font-family: 'Poppins';
     font-weight: bolder;
     line-height: 50px;
     font-size: 50px;
  }
    
 .my-btn{
            display: inline-block;
            padding: 10px 20px;
            
            color: #301D91;
            text-decoration: none;
            font-weight: bolder;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.2s;
        }

        .my-btn:hover {
            text-decoration: none;
            cursor: pointer;
            color: #5A3995;
            transform: scale(1.1); /* Slightly scale up the button on hover */
        }

        .my-btn:active {
            transform: scale(0.9); /* Scale down briefly when the button is clicked */
        }



 {

 }       



 .get_free_btn{
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    outline: none !important;
    text-align: center;
    background-color: #4CAF50; /* Fallback color */
    background-image: linear-gradient(to right, #1ACD98, #88F8EB); /* Gradient background */
     /* Transparent border initially */
    border-image: linear-gradient(to right, #88F8EB, #1ACD98); /* Gradient border */

    transition: all 0.3s ease;
  }
  
 .get_free_btn:hover {
    outline: none !important;
    animation: change_Gradient 2s infinite alternate;
    background-color: transparent; /* Transparent background on hover */
    color: white; /* Text color change on hover */
  }

  @keyframes change_Gradient {
    0% {
      background-image: linear-gradient(to right, whitesmoke, #2196F3);
      border-image: linear-gradient(to right, #4CAF50, whitesmoke);
    }
    100% {
      background-image: linear-gradient(to right, #2196F3, #1ACD98);
      border-image: linear-gradient(to right, #1ACD98, #4CAF50);
    }
  }


.particles-container {
    position: relative;
    overflow: hidden;
    padding: 60px;
  }

  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /* Basic CSS for styling */
  


/*footer css*/

#footer{
     
    padding: 3rem;
     /* padding-top: 5rem; */
     padding-top: 7rem;
    padding-bottom: 80px;
    background-color: #FFF;
    border-top:5px solid #1ACD98;

}

#footer2{
     background: #f7f7f7;
     background: rgba(247, 247, 247, 0.3);
    padding: 3rem;
    margin-top: 0px;
     /* padding-top: 5rem; */
     padding-top: 7rem;
    padding-bottom: 80px;
     background-image: url(../images/cards/v748-toon-111.png);
}
.logo-footer{
     /* max-width: 300px; */
}
.social-links{
     /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */

}
.social-links h2{
     padding-bottom: 15px;
     font-size: 20px;
    font-weight: 600;
}
.social-links img{
     padding-bottom: 25px;
}
.social-icons{
     /* display: flex;
    gap: 3rem; */
     display: flex;
    flex-direction: column;
    gap: 1rem;
     color: #777777;
}
.social-icons a{
     /* font-size: 18px; */
    /* background: #ffffff; */
    /* box-shadow: rgb(0 0 0 / 8%) 0px 4px 12px;
    padding: 0.4rem 1rem 0.4rem 1rem;
    border-radius: 3px;
     color: #5B3A96; */
     /* margin-right: 18px; */
     color: #777777;
     text-decoration: none;
}
.social-icons a:hover{
     color: #000;
}
.social-icons a i{
/*     box-shadow: rgb(0 0 0 / 8%) 0px 4px 12px;*/
    padding: 0.4rem 1rem 0.4rem 1rem;
    border-radius: 3px;
    color: #1ACD98;
     font-size: 16px;
     margin-right: 12px;
     text-decoration: none;

}
li{
     list-style: none;
}
.useful-link h2{
     padding-bottom: 15px;
     font-size: 20px;
    font-weight: 600;
}
.useful-link img{
     padding-bottom: 15px;
}
.use-links{
     line-height: 32px;
}
.use-links li i{
     font-size: 14px;
    padding-right: 8px;
    color: #898989;
}
.use-links li a{
     color: #303030;
    font-size: 15px;
    font-weight: 500;
     color: #777777;
     text-decoration: none;

}
.use-links li a:hover{
     color: #000;
}
.address h2{
     padding-bottom: 15px;
     font-size: 20px;
    font-weight: 600;
}
.address img{
     padding-bottom: 15px;
}
.address-links li a{
     color: #5B3A96;
    font-size: 15px;
    font-weight: 500;
     color: #777777;
     text-decoration: none;


}
.address-links li i{
     font-size: 16px;
    padding-right: 8px;
     color: #1ACD98;

}
.address-links li i:nth-child(1){
     padding-top: 9px;
}
.address-links .address1{
     font-weight: 500;
    font-size: 15px;
     display: flex;
}
.address-links{
         line-height: 32px;
          color: #777777;
}
.copy-right-sec{
     padding: 1.8rem;
    background-color: #88F8EB;
    color: black;
    text-align: center;
}
.copy-right-sec a{
     color: #301D91;
    font-weight: bolder;
}
a{
  text-decoration:none;
}

/* footer section end */
/*footer css end here */


.wrapper {
  position: fixed;
  bottom: 50px;
  right: -505px;
  max-width: 480px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper.show {
  right: 20px;
}
.wrapper header {
  display: flex;
  align-items: center;
  column-gap: 15px;
}
.my_header i {
  color: #4070f4;
  font-size: 32px;
}
.my_header h2 {
  color: #4070f4;
  font-weight: 500;
}
.wrapper .data {
  margin-top: 16px;
}
.wrapper .data p {
  color: #333;
  font-size: 16px;
}
.data p a {
  color: #4070f4;
  text-decoration: none;
}
.data p a:hover {
  text-decoration: underline;
}
.wrapper .buttons {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buttons .button {
  border: none;
  color: black;
  padding: 8px 0;
  border-radius: 4px;
  background: #88F8EB;
   outline-style: solid white;
  cursor: pointer;
  width: calc(100% / 2 - 10px);
  transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
  background-color: #5B2F91;
  outline: none;
  color: white;
}
#declineBtn {
  border: 2px solid grey;
  background-color: white;
  color: black;
}
#declineBtn:hover {
    background-color: #5B2F91;
  outline: none;
  color: white;
}

/**BLOG PAGE CSS START HERE**/
.blog-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.blog {
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex: 1 0 calc(33.33% - 20px);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px !important;
}

.blog-image {
    position: relative;
}

.blog-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s;
}

.blog-image img:hover {
    filter: grayscale(100%);
}

.blog-image .date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
}

.blog-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-content h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #19CC98;
}

.blog-content p {
    flex-grow: 1;
    color: #000;
    margin-bottom: 20px;
}

.blog-content a {
    align-self: flex-start;
    
    color: #000;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.blog-content a:hover {
    background-color: #1ACD98;
    color: white;
}

/**BLOG PAGE CSS END HERE***/

.testimonial-container{
  background-color: white;
  color: black;
  border-radius: 5px;
  margin: 20px auto;
  padding: 50px 80px;
  max-width: 768px;
  position:relative;
}

.fa-quote{
  color:#85F3E6;
  font-size: 28px;
  position: absolute;
  top: 70px;
}

.fa-quote-right{
  left: 40px;
}

.fa-quote-left{
  right: 40px;
}

.testimonial{
  line-height: 1.7;
  text-align: justify;
  margin-bottom: 30px;
}

.user{
  display:flex;
  align-items:center;
  justify-content: center;
}

.user .user-image{
  border-radius: 50%;
  border: 3px solid #FFD369;
  height: 75px;
  width: 75px;
  object-fit: cover;
}

.user .user-details{
  margin-left: 10px;
}

.user .username{
  margin: 0;
}

.user .role{
  font-weight: normal;
  margin: 10px 0;
}

.progress-bar{
  background-color: #85F3E6;
  height: 4px;
  width: 100%;
  margin-bottom: 40px;
  animation: grow 10s linear infinite;
  transform-origin: left;
}

@keyframes grow{
  0%{
    transform: scaleX(0);
  }
}




@media(max-width: 768px){
  .testimonial-container{
    padding: 20px 30px;
  }
  
  .fa-quote{
    display: none;
  }

  #main_background_img{
     display:none !important ;
  }

  #m_lrn_more{
     margin-bottom: 30px;
  }

  #free_revenue{
      margin-top: 20px;
  }

  #demand_img{
     float: left !important;
     width: 100% !important;
  }
  #personal_ad_ops{
     margin-top: 25px;
  }

  #acls_img{
        margin-left: 27%;
        margin-top: 15px;
        margin-bottom: 15px;        

  }
    #acls_img_one{
        margin-left: 30%;

  }
  #awardsfive{
     width: 100% !important;
  }
    #awardsfiveone{
     width: 100% !important;
  }

  #free_revenue_AD{
     margin-top: 40px;
  }


  #GT_FREE_BTN_M{
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
     }

     #easy{
          margin-bottom: 20px;
     }

     #MEDI_LEARN_MORE{
          margin-bottom: 20px;
     }

     #whn_moble{
        padding-top: 20px ;
        padding-bottom: 20px ;

     }


}


 .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px; /* Adjust gap as needed */
        }
        .image-container img {
            max-width: 100%;
            height: auto;
        }
        @media (max-width: 576px) {
            .image-container img {
                width: 100px; /* Adjust width for small screens */
            }
        }
        @media (min-width: 576px) {
            .image-container img {
                width: 150px; /* Adjust width for medium screens */
            }
        }
        @media (min-width: 768px) {
            .image-container img {
                width: 200px; /* Adjust width for large screens */
            }
        }