/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


.courses-grid{
    height: auto !important;
    min-height: auto !important;
}

.courses-section{
    height: auto !important;
    min-height: auto !important;
}

.course-page{
    height: auto !important;
    min-height: auto !important;
}


.site-content,
.ast-container,
.content-area,
.site-main{
    height: auto !important;
    min-height: auto !important;
}

.courses-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
    align-items:start;
}

.course-card{
    display:flex !important;
    flex-direction:column;
    height:auto !important;
}

.course-card[style*="display: none"]{
    display:none !important;
}


/*  */

.quran-text h2 {
    font-family: 'AlMajeedQuranicFont', serif !important;
    font-size: 32px !important;
    direction: rtl !important;
}

.course-content h3 {
    margin-top: 10px;
    font-size: 25px;
}

.courses-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:40px;
}

.course-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
    display:flex;
    flex-direction:column;
    border: 1px solid #e8e5e0;
}


.course-image img{
    width:100%;
    object-fit:cover;
    display:block;
}

.course-content{
    padding:25px;


}
.course-footer span {
    font-size: 13px;
}
.course-content p{
    font-size: 15px;
}
.course-content h3{
    font-size:18px!important;
    margin:15px 0;
}

.course-content p {
    color: #666;
    line-height: 1.7;
    margin: 0;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    text-overflow: ellipsis;
	  line-height: 27px;
    max-height: 54px; /* 27 × 2 */
    overflow: hidden;

    /* Important */
    max-height: calc(1.7em * 2);
}

.course-content h3 {
    margin-bottom: 10px;
}

.badge{
    display:inline-block;
    background:#e8f7ee;
    color:#1b7f4b;
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.course-footer{
    padding:25px;
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #eee;
}

.enroll-btn {
    font-size: 15px;
    background: #fff;
    color: #d59b00 !important;
    border: 1px solid #d59b00;
    padding: 5px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
    font-family: georgia;
}

.course-content h3 {
    margin-top: 10px!important;
}


.enroll-btn:hover{
    background:#d59b00;
    color:#fff !important;
}
.course-footer{
    padding:20px 25px;
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #eee;
}
@media(max-width:991px){
.courses-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:767px){
.courses-grid{
grid-template-columns:1fr;
}
}





.single-card{
    display:flex;
    justify-content:center;
    margin:60px auto;
}

.course-right{
    width:560px;
    border:2px solid #D4AF37;
    border-radius:12px;
    padding:40px;
    background:#fff;
}

.course-right h3{
    font-size:38px;
    margin-bottom:30px;
}

.course-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px 40px;
}

.info-item span{
    display:block;
    font-size:12px;
    text-transform:uppercase;
    color:#666;
    letter-spacing:1px;
    margin-bottom:8px;
}

.info-item strong{
    display:block;
    font-size:24px;
    font-weight:700;
    color:#082b2b;
}



.whatsapp-btn{
    background:#0F5B49;
    color:#fff;

}
	
	.course-banner{
    height:420px;
    background-size:cover;
    background-position:center;
    position:relative;
}

.course-banner-overlay{
    height:100%;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
}

.course-banner .container{
    width:1200px;
    max-width:90%;
    margin:auto;
    color:#fff;
}

.course-banner h1{
    color:#fff;
    font-size:55px;
    margin:15px 0;
}

.course-banner p{
    max-width:650px;
    line-height:1.8;
}

.breadcrumbs{
    margin-bottom:15px;
}

.breadcrumbs a{
    color:#D4AF37;
    text-decoration:none;
}

.breadcrumbs span{
    color:#fff;

}	
	.course-top{
    display:flex;
    gap:40px;
    margin:60px 0;
    align-items:flex-start;
}

.course-image{
    flex:2;
}

.course-image img{
    width:100%;
    border-radius:15px;
    display:block;
}

.course-form{
    flex:1;
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    position:sticky;
    top:100px;
}

.course-form table{
    width:100%;
    border-collapse:collapse;
    margin:20px 0;
}

.course-form table td{
    padding:12px 0;
    border-bottom:1px solid #eee;
}


.course-content h2,
.course-content h3{
    margin-top:35px;
}

.course-content img{
    max-width:100%;
    height:auto;
}

@media(max-width:991px){

.course-top{
    flex-direction:column;
}

.course-image,
.course-form{
    width:100%;
}

.course-form{
    position:relative;
    top:auto;
}

}

#a1
.elementor-counter-title {
    text-align: center;
}



@media (max-width: 768px) {

    .course-filter-container{
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        gap: 10px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .course-filter-container::-webkit-scrollbar{
        display: none;
    }

    .course-filter-container .custom-filter-btn{
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

}








/* =======================================
   COURSE SWIPER SLIDER - THEME ALIGNED
======================================= */

/* Main Slider Container Alignment */
.courseSwiper {
    /* 40px left/right padding di hai taaki arrows ke liye jagah bane aur images dab na jayein */
    padding: 20px 40px 50px 40px !important; 
    position: relative;
    
    /* Yeh aapki website ke main container width se match karega. 
       Agar aapka Elementor/Theme container 1140px hai toh ise 1140px kar dein */
    max-width: 1200px; 
    margin: 0 auto !important; /* Yeh slider ko page ke bilkul center mein align karega */
    width: 100%;
    box-sizing: border-box;
}

/* Slide Card Styling */
.courseSwiper .swiper-slide {
    text-align: center;
    transition: transform 0.3s ease;
}


.courseSwiper img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    /* Website ke clean look ke liye halka sa shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 
    display: block;
}

/* Course Title Styling (Aligned with theme colors) */
.courseSwiper h3 {
    margin-top: 15px;
    font-size: 16px !important;
    line-height: 1.4;
    padding: 0 10px;
}

.courseSwiper h3 a {
    text-decoration: none;
    color: #114c36 !important; /* Aapki website ka Dark Green color */
    font-weight: 600;
    transition: color 0.3s ease;
}

.courseSwiper h3 a:hover {
    color: #d69f28; /* Hover par website ka Golden/Yellow button color */
}

/* Navigation Arrows (Dark Green & Perfectly Centered) */
.courseSwiper .swiper-button-next,
.courseSwiper .swiper-button-prev {
    color: #114c36 !important; /* Dark Green */
    transform: scale(0.65); /* Size thoda chhota kiya hai taaki neat lage */
    margin-top: -20px; /* Vertical alignment fix */
}

/* Position arrows at the exact edge of the container */
.courseSwiper .swiper-button-prev {
    left: 0px;
}

.courseSwiper .swiper-button-next {
    right: 0px;
}

/* Pagination Dots (Aligned to bottom) */
.courseSwiper .swiper-pagination {
    bottom: 5px !important; 
}

.courseSwiper .swiper-pagination-bullet {
    background: #cccccc;
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 0 5px !important;
    transition: all 0.3s ease;
}

/* Active Dot - Dark Green */
.courseSwiper .swiper-pagination-bullet-active {
    background: #114c36 !important;
    transform: scale(1.2); /* Active dot thoda bada dikhega */
}

/* Mobile Responsiveness & Alignment */
@media (max-width: 768px) {
    .courseSwiper {
        /* Mobile par side space kam kar diya taaki images badi dikhein */
        padding: 10px 15px 40px 15px !important;
    }
    
    .courseSwiper .swiper-button-next,
    .courseSwiper .swiper-button-prev {
        display: none; /* Mobile par clean look ke liye arrows hide kiye hain (swipe kaam karega) */
    }
}