/*
Theme Name: Maktab
Theme URI: https://ifelsetech.com/maktab
Author: ifelse
Author URI: https://ifelsetech.com
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: maktab.info
*/

/* Option 1: Import via CSS */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

#menu-item-149{
    background: #9dc325;
    color: #ffffff;
    padding: 10px;
    border-radius: 10px;
}
#menu-item-149 > a{
    color: #ffffff !important;
}
img.video-image {
    width: 100%;
}
.video-div{
    margin-bottom:50px;
}
body{
    background-color: #fff;
    font-family: 'Poppins', sans-serif !important;
    /* font-family: "Be Vietnam Pro", Sans-serif !important; */
}
a{
  text-decoration: none;  
   color: #9dc325;
}
html {
    margin: 0 !important;
}
/* menu */
.header-container {
    background: #fff;
    height: 70px;
    /* box-shadow: 0 0 20px rgb(46 59 125 / 23%); */
    border-bottom:1px solid #02010114 ;
    position: sticky !important;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    overflow:hidden;
}
#primary-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    height: 70px;
    margin-bottom: 0px;
    align-items: center;
}
header.mb-header {
    display: flex;
    align-items: center;
}
img.custom-logo {
    width: 180px;
    height: fit-content;
}
.text-column {
  position: relative;
  z-index: 2;
  width: 550px;
}
img.mobile-image {
    display: none;
}
.site-branding {
    width: 15%;
}
img.app-icons {
    width: 60px !important;
}
.hero-image{
 opacity: 0;
      transform: translateY(50px);
      /*animation: slideUp 1s ease-out forwards;*/
      animation:slideUp 2s cubic-bezier(0, 0, 0.2, 1) forwards;
    }

    @keyframes slideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
.language-list.d-flex.flex-wrap.gap-2{
flex-direction: column;
margin-left: 35px;
}

/* Small devices (576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Your styles for small devices */
}

/* Medium devices (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Your styles for medium devices */
}

/* Large devices (992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Your styles for large devices */
	
}
.btn-primary{
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #9dc325 !important;
    --bs-btn-border-color: #9dc325 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #9dc325 !important;
    --bs-btn-hover-border-color: #0a58ca !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca !important;
    --bs-btn-active-border-color: #0a53be !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #9dc325 !important;
    --bs-btn-disabled-border-color: #9dc325 !important;
}
@media screen and (min-width:0px) and (max-width:991px){
.bi.bi-list.toggle-navbar {
  font-size: 32px !important;
  display: block !important;
}
/*nav.main-navbar-mb {*/
/*        width: 100%;*/
/*}*/
header.mb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-navbar-mb {
    position: fixed;
    top: 0;
    left: 100%; /* Hidden off the screen initially */
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 0;
    padding-left: 24px;
    padding-top: 60px;
    transition: all 0.3s ease; /* Smooth sliding animation */
}
.main-navbar-mb.show {
    left: 0; /* Slides the menu into view */
    width:100%;
    padding: 0px;
}
	#tutorial {
  padding: 40px 0px;
}
#primary-menu {
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 15px;
    padding-left: 24px;
    padding-top: 60px;
    list-style: none;
    text-decoration: none;
    transition: all 0.3s ease;
    position: absolute;
    top: 0;
    width: 100%;
}
 nav .toggle-navbar {
    display: block;
    transition-delay: .3s;
    font-size: 30px;
    position: sticky;
    right: 0;
    margin-right: 0px !important;
  }
.col-md-0.col-lg-6.col-sm-0{
    display:none;
}
#menu-item-53 {
  padding: 0px !important;
  cursor: pointer;
}
#menu-item-53 .sub-menu {
  display: block !important;
  list-style: none;
  padding-left: 1rem;
  padding-top: 10px;
}
#menu-item-55 {
  padding-top: 5px;
}
#menu-item-53:hover .sub-menu {
 position: unset !important;
  background: #fff !important;
  list-style: none !important;
  margin: 10px 0px 0px 0px !important;
  padding: 0px 0px 0px 15px !important;
  width: 160px !important;
  border-radius: 0px !important;
  border: 0px !important;
  display: block !important;
}
}
 i.bi.bi-list.toggle-navbar {
    display: none;
} 
i.bi.bi-x.toggle-navbar {
    position: absolute;
    z-index: 100;
    font-size: 32px;
    right: 0;
    padding-top: 0px;
    margin-right: 20px;
}
nav.main-navbar-mb {
        width: 85%;
        display: flex;
        justify-content: flex-end;
}
.menu-main-menu-container {
    height: 70px;
  }
#menu-item-40 a {
  border: 1px solid #9dc325;
  padding: 8px 10px;
  border-radius: 10px;
  width: 85px;
  width:auto;
    text-align: center;
        display: block;
}
#menu-item-80 a {
    background: #9dc325;
    padding: 8px 10px;
    border-radius: 10px;
    text-align: center;
    display: block;
    color: #fff !important;
    width: 140px !important;
  }
 
  #primary-menu li a {
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    display: block;
  }
  #primary-menu li a:hover {
    color:#9dc325;
  }
  
  
/*@media (max-width: 992px){*/
/*    .bi.bi-list.toggle-navbar {*/
/*  display:none !important;*/
/*}*/
/*}*/



/*@media screen and (max-width: 768px) {*/
/*  nav .toggle-navbar {*/
/*    display: block;*/
/*    transition-delay: .3s;*/
/*    font-size: 30px;*/
/*    position: sticky;*/
/*    right: 0;*/
/*    margin-right: 0px !important;*/
/*    cursor: pointer;*/
/*  }*/
/*}*/

/*@media screen and (max-width: 768px) {*/
/*  nav .nav-menu {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 100%;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: #fff;*/
/*    z-index: 100;*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*    grid-gap: 0;*/
/*    padding-left: 24px;*/
/*    padding-top: 60px;*/
/*    transition: all .3s ease;*/
/*  }*/
/*}*/


  /* Hero */
  .hero-section{
    background-color: transparent;
  /*background-image: linear-gradient(180deg, #FFFFFF 0%, #1840012E 100%);*/
  background:#E8FCF2;
  /*height: 100vh !important;*/
  height: fit-content;
    padding-bottom: 70px;
  }
.h1-title{
    font-weight: 800;
    font-size: 2.4rem;
}
.highlight{
    color: #9dc325;
}
.images-div {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.member-div {
    width: 310px;
    background-color: #FFFFFF;
    padding: 6px;
    border-style: solid;
    border-width: 1px;
    border-color: #18171714;
    border-radius: 60px;
    margin: auto;
    margin-bottom: 30px;
}
.users {
    font-size: 0.9rem;
    margin-bottom: 0px;
    font-weight: 800;
}
img.person {
    width: 6rem;
    height: 100%;
}
p.para {
    padding: 0px 80px;
    color: #636161;
    margin-top: 10px;
    margin-bottom: 30px;
}
.hero-description{
    color: #212529;
    margin-top: 10px;
    margin-bottom: 10px;  
}
.trust-badge {
    background: #ffffff;
    padding: 10px;
    border-radius: 50px;
    width: fit-content;
    font-size: 12px;
}
.btn-primary {
    background-color: #9dc325;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    padding: 10px;
    border:1px solid #9dc325;
     transition: transform 0.3s ease, background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: #000;
     transform: scale(1.05);
}
.btn-tour{
    border:1px solid #9dc325;
    border-radius: 10px;
    text-decoration: none;
    padding: 10px;
    background:#fff;
    width:200px;
     transition: transform 0.3s ease, background-color 0.3s ease;
}
.btn-tour:hover{
    border:1px solid #9dc325;
    background:#fff;
     transform: scale(1.05);
}
.hero-btn {
    background-color: #9dc325;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    padding: 10px;
    border:1px solid #9dc325;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.btn-demo{
     width:200px;
}
.section-padding {
    padding: 20px 0px;
}
.image-column::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
img.right-icon {
    width: 20px;
}
.image-column {
  position: relative;
}
img.support-icons {
    width: 80px;
    border: 1px solid #9dc325;
    padding: 15px;
    background: #fff;
    border-radius: 50%;
}
.language-support {
    border: 1px solid #9dc325;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
}
.support-card {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.image-column {
    background-image: url(https://ilmify.app/wp-content/uploads/2025/07/ilmify-banner-image-scaled.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 600px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    color: #fff;
}

.im
/* Underline hover animation */
.underline-animate {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.underline-animate::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #28a745; /* Green */
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.underline-animate:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

span.popular {
    font-size: 14px;
    background: #9dc325;
    padding: 5px 10px;
    border-radius: 50px;
    color: #fff;
}
.pricing-section {
      text-align: center;
      max-width: 1100px;
      margin: auto;
    }

    .pricing-section h2 {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .pricing-section h2 span {
      color: #9dc325;
    }

    .pricing-section p {
      color: #666;
      margin-bottom: 40px;
    }

    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }

    .pricing-card {
      border: 2px solid #ddd;
      border-radius: 16px;
      padding: 30px 20px;
      background: #fff;
      box-shadow: 0 10px 20px rgba(0,0,0,0.03);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
.pricing-card img {
    max-width: 100%;
    height: fit-content;
    width: 100px;
}
img.right-icon {
    width: 20px;
}
.plan-list{
    display: flex;
    align-items: center;
        gap: 2px;
}
    .pricing-title {
      font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:10px;
    }

    .pricing-price {
      font-size: 28px;
      color: #9dc325;
      margin: 15px 0;
    }
    .pricing-card.border-color {
    border:2px solid #9dc325;
}

span.plan-per-month {
    font-size: 14px;
    color: #8c8c8c;
}

.pricing-head {
   text-align: left;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}
  .pricing-card a {
    margin-top: 20px !important;
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid #9dc325;
}

    .pricing-card a:hover {
      background: #000;
      color:#fff;
    }

    @media (max-width: 768px) {
      .pricing-card {
        padding: 25px 15px;
      }

      .pricing-section h2 {
        font-size: 26px;
      }
    }
    
    
      /*img*/
    
    
        .marquee-wrapper {
            display: flex;
            flex-direction: column;
            gap: 40px;
            overflow: hidden;
        }
    
        .marquee {
            width: 100%;
            overflow: hidden;
            background-color: #fff;
            padding: 30px 0;
            border-radius: 20px;
            position: relative;
        }
    
    @media (max-width: 600px) {
      .marquee {
        width: 95%;
      }
      #primary-menu{
          left:30px;
      }
      .panel-0017{
          width:100%;
      }
    }
    
        .marquee-content {
            display: flex;
            width: max-content;
            animation-duration: 40s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
    
        .marquee-left .marquee-content {
            animation-name: scroll-left;
        }
    
        .marquee-right .marquee-content {
            animation-name: scroll-right;
        }
    
        @keyframes scroll-left {
            0% {
                transform: translateX(0%);
            }
    
            100% {
                transform: translateX(-50%);
            }
        }
    
        @keyframes scroll-right {
            0% {
                transform: translateX(-50%);
            }
    
            100% {
                transform: translateX(0%);
            }
        }
    
        .marquee-content img {
            height: 200px;
            object-fit: cover;
            margin: 0 30px;
            border-radius: 12px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }
    
        section#solution {
            background: #fff;
            padding-bottom: 240px;
        }
    
      .left-content {
      width: 60%; 
    }

    .right-content {
      width: 35%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      gap: 20px;
    }

    .video-title {
      margin-bottom: 20px;
    }

    .video-link {
      display: flex;
      gap: 50px;
      margin-bottom: 20px;
    }
    
     #shared-video-container {
      margin-top: 20px;
      text-align: center;
    }

   .laptop-frame > iframe {
      width: 100%;
      height: 60vh;
      border-radius: 8px;
    }
    
.promo-video-inline021.active {
    padding: 0px 20px;
    background: #a0ca00;
    border-radius: 50px;
    color: white;
}
      /* Laptop-style frame */
  .laptop-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  }
  
      /* Default for smallest screens */
.laptop-frame {
  padding: 20px !important;
}

.laptop-frame > iframe {
  width: 100% !important;
  height: 250px !important; /* Adjusted default */
  border-radius: 8px !important;
}
@media (max-width: 480px) {
    .head1{
        margin-top:30px;
    }
  .promo-video-inline021 {
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
  }
 .laptop-frame {
    padding: 24px !important;
  }

  .laptop-frame > iframe {
    height: 200px !important;
  }
}

/* ≥ 768px */
@media (min-width: 768px) {
  .laptop-frame {
    padding: 32px !important;
  }

  .laptop-frame > iframe {
    height: 400px !important;
  }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
  .laptop-frame {
    padding: 36px !important;
  }

  .laptop-frame > iframe {
    height: 60vh !important;
  }
}

/* ≥ 1280px */
@media (min-width: 1280px) {
  .laptop-frame {
    padding: 40px !important;
  }

  .laptop-frame > iframe {
    height: 60vh !important;
  }
}


@media (min-width: 0px) and (max-width: 575.98px) {  
  .hero-section-container {
    width: 90%;
    text-align: center;
    margin: auto;
    margin-top: 70px;
}
 .hero-section{
     padding-top:50px;
 }
.h1-title {
    font-weight: 800;
    font-size: 2rem;
}
.highlight{
    color: #9dc325;
}
p.para{
    padding: 0px;
}
.users {
    font-size: 0.8rem;
    margin-bottom: 0px;
    font-weight: 800;
}
img.person {
    width: 4rem;
    height: 100%;
}
.member-div {
    width: 250px;
}
img.mobile-image {
    display: block;
    width:100%;
}
.hero-btn {
    background-color: #9dc325;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    border-radius: 40px 40px 40px 40px;
    text-decoration: none;
    padding: 10px 15px 10px 15px;
}
.hero-image {
    margin: auto !important;
    width: 100%;
    display: block !important;
    margin-top: 45px !important;
}
.section-padding {
    padding: 30px 0px;
}
.float {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 15px;
    left: 20px;
    background-color: #00a822;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}
.my-float{
  margin-top:16px;
}
.whatsapp-img{
    width:50px;
}
.btn-demo{
     width:fit-content;
}
.btn-tour{
    width:fit-content;
}
.row-reverse-mobile {
    flex-direction: column-reverse;
}
.video-link{
    margin-top: 50px;
}
.text-column{
    width:370px;
}
.image-column {
    background-image: unset !important;
    min-height: unset !important;
}

}
@media (min-width: 576px){
    .float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:20px;
  left:25px;
  background-color:#00a822;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.whatsapp-img{
    width:60px;
}
.my-float{
  margin-top:16px;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {  
  .hero-section-container {
    width: 90%;
    text-align: center;
    margin: auto;
    margin-top: 70px;
}
 .hero-section{
     padding-top:70px;
 }
.h1-title {
    font-weight: 800;
    font-size: 2rem;
}
.highlight{
    color: #9dc325;
}
p.para{
    padding: 0px 30px;
}
.hero-image {
    margin: auto !important;
    width: 90%;
    display: block !important;
    margin-top: 45px !important;
}
.section-padding {
    padding: 30px 0px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {      
  .hero-section-container {
    width: 90%;
    text-align: center;
    margin: auto;
    margin-top: 80px;
}
.tab-padding{
    padding:80px 0px !important;
}
p.para{
    padding: 0px 40px;
}
.hero-image {
    margin: auto !important;
    width: 90%;
    display: block !important;
    margin-top: 45px !important;
}
    .hero-section {
        padding-top: 70px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
      
  .hero-section-container {
    width: 70%;
    text-align: center;
    margin: auto;
    margin-top: 100px;
}
.hero-image {
    margin: auto !important;
    width: 75%;
    display: block !important;
    margin-top: 45px !important;
}
    .hero-section {
        padding-top: 70px;
    }
}
  @media (min-width: 1200px) {
      
  .hero-section-container {
    width: 60%;
    text-align: center;
    margin: auto;
    margin-top: 100px;
}
.hero-image {
    margin: auto !important;
    width: 75%;
    display: block !important;
    margin-top: 45px !important;
}
}


/* feature */
.card.features {
    padding: 30px !important;
    border-radius: 25px;
    border: 1px solid #ddd;
}
h3.fs-2.text-body-emphasis {
    font-size: 1.4rem !important;
}
a.icon-link {
    font-size: 16px;
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    color: #9dc325;
    align-items: center;
    font-weight: 600;
}
i.bi.bi-arrow-up-right {
    font-size: 10px;
    color: #ffffff;
    border-radius: 50px;
    background-color: #9dc325;
    line-height: 0;
    padding: 8px;
}
.feature.col-md-12.section-title {
    display: block;
    margin: auto;
}
/* solution */
.solutin-highlight {
    color: #9dc325;
  }
  .footer-banner-section{
  width: 85%;
  background: #9dc325;
    background-image: none;
  margin: auto;
    margin-top: auto;
    padding: 0px 30px;
  border-radius: 30px;
  margin-top: -150px;
  background-image: linear-gradient(180deg, #e5e5e5 0%, #1840012E 100%);
  background-image: linear-gradient(180deg, #9dc325 0%, #eaeaea2e 100%);
  display: flex;
  position: relative;
}
  /* footer */
  
  section.footer-top {
    background-image: linear-gradient(180deg, #FFFFFF 0%, #1840012E 100%) !important;
}
h3.fw-semibold {
    font-weight: 600 !important;
    font-size: 1.2rem !important;
}

  .footer-padding {
    padding: 80px 0px 0px 0px;
  }
  img.social-icons {
    width: 24px;
}
.footer-section{
    padding-bottom: 30px;
}
.footer-c4 {
    padding-bottom: 30px;
}
.contact-icons-mb {
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}
.banner-images {
    height: fit-content;
    position: absolute;
    bottom: 0;
    right:0;
    padding-bottom: 0px;
    margin: 0px;
    vertical-align: unset !important;
}
.seciton-padding{
    padding:40px 0px 40px 0px;
}
h4.footer-banner-title {
    color: #ffffff;
    font-size: 1.6rem;
}
p.footer-banner-para {
    color: #006451;
}
.ptx-lan-footer-copyright {
  padding: 20px 0px;
  border-top: 1px solid #9dc325;
}
@media (min-width: 0px) and (max-width: 991.98px) {  
.copyright-text2 {
  text-align: center;
  padding-top: 0px;
}
.copyright-social {
  display: flex;
  justify-content: center;
}  
 .copyright-text {
    text-align: center;
}
.ptx-lan-footer-copyright {
    padding: 20px 0px;
    border-top: 1px solid #9dc325;
    gap: 10px;
}
.footer-banner-section {
    width: 90%;
}
.seciton-padding {
  padding: 0px;
}
.contact-tabs{
    margin-top:30px;
    margin-bottom:30px;
}
}
.artby{
    color: #9dc325;
    text-decoration: none;
}
@media (min-width: 992px) {  
.copyright-text2.col-lg-4.col-sm-12 {
    text-align: right;
}
.copyright-social {
    display: flex;
    justify-content: space-evenly;
}
}
.addpadding{
    height:200px;
}

/*about us*/
.single-blog-title-margin {
  margin-bottom: 3.6rem;
}
h1.vd-post-title {
    font-size: 2rem;
    text-align: center;
}
#single-blog-title {
  height: 30px;
  padding: 60px;
  color: #9dc325;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #1840012E 100%) !important;
}

/*contact us*/
img.info-icon-list {
    width: 80px;
    padding: 15px;
    background: #006451;
    border-radius: 20px;
    height: 80px;
    margin-bottom: 25px;
}

#menu-item-53 .sub-menu {
  display: none;
}
#menu-item-53:hover .sub-menu {
  display: block;
  position: absolute;
  background: #fff;
  list-style: none;
  margin: 23px 0px;
    margin-left: 0px;
  padding: 15px;
  width: 160px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-left: -40px;
}
#menu-item-53 {
  padding: 23px 0px;
  cursor: pointer;
}
#menu-item-54 {
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.text_success {
  color: #000;
  font-size: 12px;
  margin: 0px;
}
b.star {
    color: red;
}
.form-group {
    margin-bottom: 20px;
}
input#contactusMessage1 {
    height: 100px;
}
.form-control {
    padding: 0.75rem .75rem;
        line-height: 2;
}
#contactus-submit {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: 0 0 0 #b8b9be, 0 0 0 #fff;
    border: 1px solid #00645E !important;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(180deg, #006451 0%, #009075 100%);
}
/* Add your CSS styles here */
    .loader-icon {
        display: none; /* Hide the loader icon by default */
    }
    .loading-text {
        display: none; /* Hide the loading text by default */
    }
    .loading {
        position: relative;
    }
    .loading .loader-icon,
    .loading .loading-text {
        display: inline-block;
        vertical-align: middle;
        display:none;
    }
    .success-body{
        display:none;
    }
    .contact-tabs {
    display: block;
    height: 100%;
    min-height: 400px;
    position: relative;
    width: 100%;
    z-index: 1;
    padding: 15px;
    background: #ffffff;
    box-shadow: 0 5px 30px 0 rgba(214, 215, 216, 0.57);
}
iframe {
  width: 100%;
  height: 100%;
}

/*screenshot*/

img.screenshot-image {
    width: fit-content;
    height: 233px;
    margin: auto;
}
/*.card{*/
/*   border:0px;*/
/*}*/
/*.screenshot-name{*/
/*    font-size:1.2rem;*/
/*    margin:auto;*/
/*    margin-top:20px;*/
/*}*/



/* Ensure equal card heights */
.row.g-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	align-items: center !important;
	overflow:hidden !important;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    height: 100%; /* Ensure consistent height */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card img {
    width: 100%;
    max-height: 230px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgb(221, 221, 221) !important;
}

.card:hover img {
    transform: scale(1.1);
}

.screenshot-name {
    margin: 15px 0 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}

/* Fullscreen image styles */
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.fullscreen img {
    max-width: 90%;
    max-height: 90%;
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);*/
    border-radius: 10px;
}

.hidden {
    display: none;
}

.fullscreen {
    cursor: pointer;
}


/*app screenshot*/
 .app-slider img {
      width: 100%;
      height: auto;
      border-radius: 10px;
    }
    
    
.slick-prev, .slick-next {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: white;
  border-radius: 50%;         /* Circular buttons */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

.slick-dots {
  bottom: 10px;
}

.slick-dots li button:before {
  color: white;              /* Customize dot color */
}

.slick-slide {
  margin: 0 10px; /* Add gap between slides */
}

.slick-list {
  margin: 0 -10px; /* Adjust container margins to account for the gap */
}


/* Large devices (992px to 1199.98px) */
@media (min-width: 992px) {
    /* Your styles for large devices */
	#tutorial {
  padding: 100px 0px;
}
	.ayg-player-container {
  padding: 40px;
  background: #202020;
  border-radius: 30px;
  backdrop-filter: blur(10px);
}
.desktop-padding{
    padding:120px 0px !important;
}
}
/*features*/


.madrasa-section {
  padding: 60px 20px;
  background: #F7F5F2;
  text-align: center;
}
.madrasa-section h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.madrasa-section .highlight {
  color: #94c11f;
}
.madrasa-section .subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.feature-card {
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 25px 20px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.feature-card img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 15px;
}
.feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.feature-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
@media (min-width: 550px) and (max-width: 767px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-card img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 15px;
  border: 1px solid #a3c434;
  padding: 10px;
  background: #fbfff1;
  border-radius: 50px;
  transition: all 0.3s ease; /* Smooth transition */
}

.feature-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

/* Hover styling on the parent .feature-box */
.feature-box:hover .feature-icon {
  border: 1px solid #a3c434;
  padding: 10px;
  background: #fbfff1;
  border-radius: 50px;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(163, 196, 52, 0.3);
}

#popupOverlay {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.popupContent {
  background: #fff;
  padding: 30px 20px;
  border-radius: 10px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.closeBtn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.fieldlabels {
  display: block;
  margin-top: 15px;
  font-weight: 600;
}

.input-wrapper {
  margin-bottom: 10px;
}

.form-title {
  margin-bottom: 15px;
  text-align: center;
}

@media (max-width: 480px) {
  .popupContent {
    padding: 20px 15px;
  }
}
button.slick-next.slick-arrow {
    display: none !important;
}
button.slick-prev.slick-arrow {
    display: none !important;
}
    .testimonials-section {
            padding: 80px 0;
            background: #fff;
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .section-subtitle {
            color: #6c757d;
            font-size: 1.1rem;
        }
        
        .testimonials-container {
            position: relative;
            padding: 20px 0;
        }
        
        .testimonial-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            /*box-shadow: 0 10px 30px rgba(0,0,0,0.1);*/
            border: 1px solid #e9ecef;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            margin: 0 15px;
            height: auto;
        }
        
        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        
        .stars {
            margin-bottom: 1.5rem;
        }
        .slick-list.draggable {
    padding: 50px 30px !important;
}
        .star {
            color: #ffc107;
            font-size: 1.2rem;
            margin-right: 2px;
        }
        
        .testimonial-text {
            font-size: 1rem;
            line-height: 1.6;
            color: #495057;
            margin-bottom: 2rem;
            font-style: italic;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e9ecef;
        }
        
        .author-info h5 {
            margin: 0;
            color: #2c3e50;
            font-weight: 600;
            font-size: 1rem;
        }
        
        .author-info p {
            margin: 0;
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .student-count {
            position: absolute;
            top: 20px;
            right: 20px;
            background:linear-gradient(135deg, #9dc325, #76980d);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        /* Custom Slick Slider Styles */
        .slick-slider {
            position: relative;
            display: block;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -ms-touch-action: pan-y;
            touch-action: pan-y;
            -webkit-tap-highlight-color: transparent;
        }
        
        .slick-list {
            position: relative;
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        
        .slick-track {
            position: relative;
            top: 0;
            left: 0;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .slick-slide {
            display: none;
            float: left;
            height: 100%;
            min-height: 1px;
        }
        
        .slick-slide.slick-loading img {
            display: none;
        }
        
        .slick-initialized .slick-slide {
            display: block;
        }
        
        /* Custom Arrow Styles */
        /*.slick-prev,*/
        /*.slick-next {*/
        /*    position: absolute;*/
        /*    top: 50%;*/
        /*    transform: translateY(-50%);*/
        /*    z-index: 2;*/
        /*    background: #9dc325 !important;*/
        /*    color: white !important;*/
        /*    border: none !important;*/
        /*    border-radius: 50% !important;*/
        /*    width: 50px !important;*/
        /*    height: 50px !important;*/
        /*    cursor: pointer;*/
        /*    transition: all 0.3s ease;*/
        /*    display: flex !important;*/
        /*    align-items: center;*/
        /*    justify-content: center;*/
        /*    font-size: 16px !important;*/
        /*    display:none  !important;*/
        /*}*/
        
        /*.slick-prev:hover,*/
        /*.slick-next:hover {*/
        /*    background: #9dc325 !important;*/
        /*    transform: translateY(-50%) scale(1.1);*/
        /*}*/
        
        /*.slick-prev {*/
        /*    left: -75px;*/
        /*    display:none;*/
        /*}*/
        
        /*.slick-next {*/
        /*    right: -75px;*/
        /*    display:none;*/
        /*}*/
        
        /*.slick-prev:before,*/
        /*.slick-next:before {*/
        /*    content: '';*/
        /*    display: none;*/
        /*}*/
        
        /*.slick-prev i,*/
        /*.slick-next i {*/
        /*    color: white;*/
        /*}*/
        
        /* Hide default dots */
        .slick-dots {
            display: block !important;
        }
        
        /* Custom controls */
        .slider-controls {
            text-align: center;
            margin-top: 2rem;
            display: none; /* Hide since we're using slick arrows */
        }
        
        .auto-scroll-indicator {
            text-align: center;
            margin-top: 1rem;
            color: #9dc325;
            font-size: 0.9rem;
        }
        
        /* Responsive adjustments */
        @media (max-width: 1200px) {
/*            .slick-prev {*/
/*                left: -60px;*/
/*                display:none;*/
/*            }*/
            
/*            .slick-next {*/
/*                right: -60px;*/
/*                display:none;*/
/*            }*/
/*            .slick-list.draggable {*/
/*    padding: 50px 30px !important;*/
/*}*/
        }
        
        @media (max-width: 992px) {
/*            .slick-prev {*/
/*                left: -45px;*/
/*                display:none;*/
/*            }*/
            
/*            .slick-next {*/
/*                right: -45px;*/
/*                display:none;*/
/*            }*/
            
/*            .slick-prev,*/
/*            .slick-next {*/
/*                width: 40px !important;*/
/*                height: 40px !important;*/
/*                font-size: 14px !important;*/
/*            }*/
/*            .slick-list.draggable {*/
/*    padding: 50px 30px !important;*/
/*}*/
        }
        
        @media (max-width: 768px) {
            .section-title {
                font-size: 2rem;
            }
            
            .testimonial-text {
                font-size: 0.95rem;
            }
            
            .testimonial-card {
                padding: 1.5rem;
                margin: 0 10px;
            }
            
            /*.slick-prev {*/
            /*    left: -35px;*/
            /*    display:none;*/
            /*}*/
            
            /*.slick-next {*/
            /*    right: -35px;*/
            /*    display:none;*/
            /*}*/
            
            /*.slick-prev,*/
            /*.slick-next {*/
            /*    width: 35px !important;*/
            /*    height: 35px !important;*/
            /*    font-size: 12px !important;*/
            /*}*/
        }
        
        @media (max-width: 576px) {
            /*.slick-prev {*/
            /*    left: -25px;*/
            /*    display:none;*/
            /*}*/
            
            /*.slick-next {*/
            /*    right: -25px;*/
            /*     display:none;*/
            /*}*/
            
            /*.slick-prev,*/
            /*.slick-next {*/
            /*    width: 30px !important;*/
            /*    height: 30px !important;*/
            /*    font-size: 10px !important;*/
            /*}*/
        }