/*
======================================================================
Swarnim Sahitya CMS
Frontend Responsive Stylesheet
File : assets/css/responsive.css
Part : 1
======================================================================
*/

/*=====================================================================
  Ultra Wide Desktop (1600px+)
=====================================================================*/

@media (min-width:1600px){

    .container{

        max-width:1500px;

    }

    section{

        padding:140px 0;

    }

    .hero-section{

        min-height:900px;

        display:flex;

        align-items:center;

    }

    .hero-content h1{

        font-size:5rem;

    }

    .hero-content p{

        max-width:700px;

        font-size:1.2rem;

    }

    .hero-image img{

        max-width:680px;

    }

    .section-title{

        margin-bottom:80px;

    }

    .section-title h2{

        font-size:4rem;

    }

    .books-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .plans-grid{

        grid-template-columns:repeat(4,1fr);

    }

}


/*=====================================================================
  Extra Large Desktop (1400px - 1599px)
=====================================================================*/

@media (min-width:1400px) and (max-width:1599.98px){

    .container{

        max-width:1320px;

    }

    .hero-section{

        min-height:820px;

        display:flex;

        align-items:center;

    }

    .hero-content h1{

        font-size:4.5rem;

    }

    .hero-image img{

        max-width:620px;

    }

    .section-title h2{

        font-size:3.4rem;

    }

    .books-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .plans-grid{

        grid-template-columns:repeat(3,1fr);

    }

}


/*=====================================================================
  Large Desktop Tweaks
=====================================================================*/

@media (min-width:1400px){

    .navbar{

        min-height:90px;

    }

    .navbar-brand img{

        max-height:68px;

    }

    .btn{

        padding:16px 26px;

    }

    .book-card:hover{

        transform:translateY(-15px);

    }

}


/*=====================================================================
  Continue...

  Part-2

  Desktop (1200px - 1399px)

=====================================================================*/
/*=====================================================================
  Desktop (1200px - 1399px)
=====================================================================*/

@media (min-width:1200px) and (max-width:1399.98px){

    .container{

        max-width:1140px;

    }

    section{

        padding:110px 0;

    }

    /* Header */

    .navbar{

        min-height:84px;

    }

    .navbar-brand img{

        max-height:60px;

    }

    .navbar-nav{

        gap:6px;

    }

    .navbar-nav .nav-link{

        padding:12px 14px;

        font-size:15px;

    }

    /* Hero */

    .hero-section{

        min-height:760px;

        display:flex;

        align-items:center;

    }

    .hero-content h1{

        font-size:4rem;

    }

    .hero-content p{

        max-width:560px;

    }

    .hero-image img{

        max-width:560px;

    }

    .hero-card{

        transform:scale(.92);

    }

    /* Section */

    .section-title{

        margin-bottom:65px;

    }

    .section-title h2{

        font-size:3rem;

    }

    /* About */

    .about-content{

        padding-left:25px;

    }

    .about-features{

        gap:18px;

    }

    /* Why */

    .why-grid{

        gap:24px;

    }

    .why-card{

        padding:35px 28px;

    }

    /* Books */

    .books-grid{

        grid-template-columns:repeat(3,1fr);

        gap:26px;

    }

    .book-content{

        padding:24px;

    }

    .book-title{

        font-size:1.2rem;

    }

    /* Plans */

    .plans-grid{

        grid-template-columns:repeat(3,1fr);

        gap:28px;

    }

    .plan-card{

        padding:38px 28px;

    }

    .plan-price h2{

        font-size:3rem;

    }

    /* CTA */

    .cta-box{

        padding:70px 55px;

    }

    .cta-box h2{

        font-size:3.2rem;

    }

    /* Footer */

    .footer-top{

        padding:80px 0 55px;

    }

}


/*=====================================================================
  Large Desktop Utilities
=====================================================================*/

@media (min-width:1200px){

    .mobile-quick-actions{

        display:none!important;

    }

    .offcanvas{

        display:none;

    }

}


/*=====================================================================
  Continue...

  Part-3

  Laptop (992px - 1199px)

=====================================================================*/
/*=====================================================================
  Laptop (992px - 1199px)
=====================================================================*/

@media (min-width:992px) and (max-width:1199.98px){

    .container{

        max-width:960px;

    }

    section{

        padding:90px 0;

    }

    /* Header */

    .top-bar{

        font-size:13px;

    }

    .navbar{

        min-height:78px;

        padding:12px 0;

    }

    .navbar-brand img{

        max-height:56px;

    }

    .navbar-nav{

        gap:2px;

    }

    .navbar-nav .nav-link{

        padding:10px 11px;

        font-size:14px;

    }

    .navbar-actions{

        gap:8px;

    }

    .navbar-actions .btn{

        padding:12px 20px;

        font-size:14px;

    }

    /* Hero */

    .hero-section{

        padding:90px 0;

    }

    .hero-content h1{

        font-size:3.2rem;

    }

    .hero-content p{

        max-width:100%;

        font-size:1rem;

    }

    .hero-buttons{

        gap:14px;

    }

    .hero-image img{

        max-width:480px;

    }

    .hero-card{

        transform:scale(.82);

    }

    /* About */

    .about-content{

        padding-left:15px;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .about-experience{

        left:-15px;

        bottom:20px;

        transform:scale(.90);

    }

    /* Why */

    .why-grid{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

    /* Books */

    .books-grid{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

    /* Plans */

    .plans-grid{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

    .plan-card.featured{

        transform:none;

    }

    .plan-card.featured:hover{

        transform:translateY(-10px);

    }

    /* CTA */

    .cta-box{

        padding:60px 45px;

    }

    .cta-buttons{

        gap:16px;

    }

    /* Footer */

    .footer-top{

        padding:70px 0 50px;

    }

    .footer-title{

        font-size:1.2rem;

    }

}


/*=====================================================================
  Continue...

  Part-4

  Tablet (768px - 991px)

=====================================================================*/
/*=====================================================================
  Tablet (768px - 991px)
=====================================================================*/

@media (min-width:768px) and (max-width:991.98px){

    .container{

        max-width:720px;

    }

    section{

        padding:80px 0;

    }

    /* Top Bar */

    .top-bar{

        display:none;

    }

    /* Header */

    .navbar{

        min-height:74px;

        padding:10px 0;

    }

    .navbar-brand img{

        max-height:52px;

    }

    .navbar-collapse{

        display:none!important;

    }

    .navbar-toggler{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    /* Hero */

    .hero-section{

        text-align:center;

        padding:90px 0 70px;

    }

    .hero-content{

        margin-bottom:50px;

    }

    .hero-content h1{

        font-size:2.9rem;

    }

    .hero-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-image{

        margin-top:30px;

    }

    .hero-image img{

        max-width:500px;

    }

    .hero-card{

        display:none;

    }

    /* About */

    .about-content{

        padding-left:0;

        margin-top:50px;

        text-align:center;

    }

    .about-image{

        margin-bottom:30px;

    }

    .about-experience{

        left:50%;

        bottom:20px;

        transform:translateX(-50%);

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .about-counter{

        justify-content:center;

    }

    /* Why */

    .why-grid{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }

    .why-card{

        padding:30px 24px;

    }

    /* Featured Books */

    .books-grid{

        grid-template-columns:repeat(2,1fr);

        gap:22px;

    }

    /* Plans */

    .plans-grid{

        grid-template-columns:1fr;

    }

    .plan-card{

        max-width:520px;

        margin:auto;

    }

    /* CTA */

    .cta-box{

        padding:55px 35px;

    }

    .cta-box h2{

        font-size:2.5rem;

    }

    .cta-buttons{

        justify-content:center;

    }

    .cta-stats{

        gap:30px;

    }

    /* Footer */

    .footer-top{

        text-align:center;

    }

    .footer-contact li{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

        margin-top:15px;

    }

}


/*=====================================================================
  Continue...

  Part-5

  Mobile Large (576px - 767px)

=====================================================================*/
/*=====================================================================
  Mobile Large (576px - 767px)
=====================================================================*/

@media (min-width:576px) and (max-width:767.98px){

    .container{

        max-width:540px;

    }

    section{

        padding:70px 0;

    }

    /* Top Bar */

    .top-bar{

        display:none;

    }

    /* Header */

    .navbar{

        min-height:70px;

        padding:10px 0;

    }

    .navbar-brand img{

        max-height:48px;

    }

    .navbar-toggler{

        width:44px;

        height:44px;

    }

    .mobile-quick-actions{

        display:block;

    }

    /* Hero */

    .hero-section{

        text-align:center;

        padding:80px 0 60px;

    }

    .hero-content h1{

        font-size:2.4rem;

        line-height:1.25;

    }

    .hero-content p{

        font-size:1rem;

        margin:0 auto 30px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:14px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:320px;

    }

    .hero-stats{

        justify-content:center;

        gap:25px;

    }

    .hero-image{

        margin-top:40px;

    }

    .hero-image img{

        max-width:420px;

    }

    .hero-card{

        display:none;

    }

    /* Section */

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:2.2rem;

    }

    /* About */

    .about-content{

        padding-left:0;

        text-align:center;

        margin-top:40px;

    }

    .about-features{

        grid-template-columns:1fr;

        gap:18px;

    }

    .about-counter{

        flex-direction:column;

    }

    .about-experience{

        display:none;

    }

    /* Why */

    .why-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    /* Books */

    .books-grid{

        grid-template-columns:1fr;

    }

    .book-card{

        max-width:420px;

        margin:auto;

    }

    /* Plans */

    .plans-grid{

        grid-template-columns:1fr;

    }

    .plan-card{

        max-width:420px;

        margin:auto;

    }

    /* CTA */

    .cta-box{

        padding:45px 28px;

        border-radius:24px;

    }

    .cta-box h2{

        font-size:2rem;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

    .cta-stats{

        flex-direction:column;

        gap:20px;

    }

    /* Footer */

    .footer-top{

        text-align:center;

        padding:60px 0 40px;

    }

    .footer-title::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-contact li{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

        flex-wrap:wrap;

        gap:10px;

        margin-top:15px;

    }

}


/*=====================================================================
  Continue...

  Part-6

  Mobile (480px - 575px)

=====================================================================*/
/*=====================================================================
  Mobile (480px - 575px)
=====================================================================*/

@media (min-width:480px) and (max-width:575.98px){

    .container{

        max-width:100%;

        padding-left:20px;

        padding-right:20px;

    }

    section{

        padding:65px 0;

    }

    /* Header */

    .top-bar{

        display:none;

    }

    .navbar{

        min-height:68px;

        padding:8px 0;

    }

    .navbar-brand img{

        max-height:45px;

    }

    .navbar-toggler{

        width:42px;

        height:42px;

    }

    /* Hero */

    .hero-section{

        padding:70px 0 50px;

        text-align:center;

    }

    .hero-content h1{

        font-size:2.1rem;

        line-height:1.3;

    }

    .hero-content p{

        font-size:.96rem;

        margin-bottom:28px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:12px;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stats{

        flex-direction:column;

        gap:18px;

    }

    .hero-image{

        margin-top:35px;

    }

    .hero-image img{

        max-width:100%;

    }

    .hero-card{

        display:none;

    }

    /* Section */

    .section-title{

        margin-bottom:40px;

    }

    .section-title h2{

        font-size:1.9rem;

    }

    .section-title p{

        font-size:.95rem;

    }

    /* About */

    .about-content{

        margin-top:35px;

        padding-left:0;

        text-align:center;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .about-counter{

        flex-direction:column;

    }

    .counter-box{

        min-width:100%;

    }

    .about-experience{

        display:none;

    }

    /* Why */

    .why-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .why-card{

        padding:28px 22px;

    }

    /* Books */

    .books-grid{

        grid-template-columns:1fr;

    }

    .book-content{

        padding:20px;

    }

    .book-footer{

        flex-direction:column;

    }

    .book-footer .btn{

        width:100%;

    }

    /* Plans */

    .plans-grid{

        grid-template-columns:1fr;

    }

    .plan-card{

        padding:32px 24px;

    }

    /* CTA */

    .cta-box{

        padding:40px 24px;

        border-radius:22px;

    }

    .cta-box h2{

        font-size:1.8rem;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

    .cta-stats{

        flex-direction:column;

        gap:18px;

    }

    /* Footer */

    .footer-top{

        padding:55px 0 35px;

        text-align:center;

    }

    .footer-contact li{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom-links{

        justify-content:center;

        flex-wrap:wrap;

        gap:8px;

    }

}


/*=====================================================================
  Continue...

  Part-7

  Small Mobile (360px - 479px)

=====================================================================*/
/*=====================================================================
  Small Mobile (360px - 479px)
=====================================================================*/

@media (min-width:360px) and (max-width:479.98px){

    .container{

        width:100%;

        padding-left:16px;

        padding-right:16px;

    }

    section{

        padding:60px 0;

    }

    /* Header */

    .top-bar{

        display:none;

    }

    .navbar{

        min-height:64px;

        padding:8px 0;

    }

    .navbar-brand img{

        max-height:42px;

    }

    .navbar-toggler{

        width:40px;

        height:40px;

        padding:0;

    }

    .offcanvas{

        width:280px;

    }

    /* Hero */

    .hero-section{

        padding:60px 0 45px;

        text-align:center;

    }

    .hero-content h1{

        font-size:1.85rem;

        line-height:1.35;

    }

    .hero-content p{

        font-size:.92rem;

        line-height:1.8;

        margin-bottom:25px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:12px;

    }

    .hero-buttons .btn{

        width:100%;

        font-size:14px;

        padding:14px 20px;

    }

    .hero-stats{

        flex-direction:column;

        gap:16px;

        margin-top:25px;

    }

    .hero-image{

        margin-top:30px;

    }

    .hero-image img{

        max-width:100%;

    }

    .hero-card{

        display:none;

    }

    /* Titles */

    .section-title{

        margin-bottom:35px;

    }

    .section-title h2{

        font-size:1.7rem;

        line-height:1.35;

    }

    .section-title p{

        font-size:.9rem;

    }

    /* About */

    .about-content{

        padding-left:0;

        text-align:center;

        margin-top:30px;

    }

    .about-features{

        grid-template-columns:1fr;

        gap:16px;

    }

    .about-feature{

        flex-direction:column;

        text-align:center;

    }

    .about-feature-icon{

        margin:auto;

    }

    .about-counter{

        flex-direction:column;

        gap:15px;

    }

    .about-experience{

        display:none;

    }

    /* Why Choose */

    .why-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .why-card{

        padding:24px 20px;

    }

    /* Books */

    .books-grid{

        grid-template-columns:1fr;

    }

    .book-content{

        padding:18px;

    }

    .book-title{

        font-size:1.15rem;

    }

    .book-price{

        flex-wrap:wrap;

    }

    .book-footer{

        flex-direction:column;

    }

    .book-footer .btn{

        width:100%;

    }

    /* Plans */

    .plans-grid{

        grid-template-columns:1fr;

    }

    .plan-card{

        padding:28px 20px;

        border-radius:22px;

    }

    .plan-price h2{

        font-size:2.5rem;

    }

    /* CTA */

    .cta-box{

        padding:35px 20px;

        border-radius:20px;

    }

    .cta-box h2{

        font-size:1.6rem;

    }

    .cta-box p{

        font-size:.9rem;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

    .cta-stats{

        flex-direction:column;

        gap:15px;

    }

    /* Footer */

    .footer-top{

        padding:50px 0 30px;

        text-align:center;

    }

    .footer-title{

        font-size:1.15rem;

    }

    .footer-title::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-contact li{

        justify-content:center;

        flex-direction:column;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

        flex-wrap:wrap;

    }

    .footer-newsletter .btn{

        width:100%;

        margin-top:12px;

    }

    .footer-bottom{

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

        flex-wrap:wrap;

        gap:8px;

        margin-top:12px;

    }

}


/*=====================================================================
  Continue...

  Part-8

  Landscape & Utility Responsive

=====================================================================*/
/*=====================================================================
  Landscape & Utility Responsive
=====================================================================*/

/* Mobile Landscape */

@media (max-height:500px) and (orientation:landscape){

    .hero-section{

        min-height:auto;

        padding:70px 0;

    }

    .hero-card{

        display:none;

    }

    .offcanvas{

        overflow-y:auto;

    }

}


/* Tablet Landscape */

@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){

    .hero-content h1{

        font-size:3rem;

    }

    .hero-image img{

        max-width:430px;

    }

}


/* Utility */

@media (max-width:991.98px){

    .desktop-only{

        display:none!important;

    }

}

@media (min-width:992px){

    .mobile-only{

        display:none!important;

    }

}


/* Images */

@media (max-width:767.98px){

    img{

        max-width:100%;

        height:auto;

    }

}


/* Tables */

@media (max-width:767.98px){

    table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

}


/* Form */

@media (max-width:575.98px){

    .input-group{

        flex-direction:column;

    }

    .input-group .form-control{

        border-radius:14px;

        margin-bottom:10px;

    }

    .input-group .btn{

        width:100%;

        border-radius:14px;

    }

}


/* Buttons */

@media (max-width:575.98px){

    .btn-lg{

        width:100%;

    }

}


/* Footer */

@media (max-width:767.98px){

    .footer-newsletter .input-group{

        display:block;

    }

    .footer-newsletter .btn{

        width:100%;

        margin-top:12px;

    }

}


/* Print */

@media print{

    .navbar,

    .top-bar,

    .mobile-quick-actions,

    .footer-section,

    #backToTop,

    #preloader,

    .btn{

        display:none!important;

    }

    body{

        background:#fff;

        color:#000;

    }

}


/*=====================================================================
  Continue...

  Part-9

  End Of File

=====================================================================*/
/*=====================================================================
  Accessibility
=====================================================================*/

/* Reduce Motion */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}


/* Dark Mode Ready */

@media (prefers-color-scheme: dark){

    body.auto-dark{

        background:#111827;

        color:#f3f4f6;

    }

}


/* High Resolution Displays */

@media (-webkit-min-device-pixel-ratio:2),
       (min-resolution:192dpi){

    .navbar-brand img,

    .hero-image img,

    .book-image img,

    .footer-logo img{

        image-rendering:auto;

    }

}


/*=====================================================================
  Responsive Helper Classes
=====================================================================*/

.hide-desktop{

    display:none!important;

}

@media (max-width:991.98px){

    .hide-desktop{

        display:block!important;

    }

    .hide-mobile{

        display:none!important;

    }

}

.show-mobile{

    display:none!important;

}

@media (max-width:991.98px){

    .show-mobile{

        display:block!important;

    }

}

.show-flex-mobile{

    display:none!important;

}

@media (max-width:991.98px){

    .show-flex-mobile{

        display:flex!important;

    }

}


/*=====================================================================
  Overflow Protection
=====================================================================*/

html,

body{

    max-width:100%;

    overflow-x:hidden;

}

img,

svg,

video,

iframe{

    max-width:100%;

    height:auto;

}


/*=====================================================================*/
/*=====================================================================*/
/*=======================Slider Slider==============================================*/
/*=====================================================================*/
/*=====================================================================*/


/*=====================================================================
  Swarnim Sahitya Hero Slider
  Responsive CSS
  File : assets/css/responsive.css
=====================================================================*/


/*=========================================================
  Large Desktop (1200px - 1399px)
=========================================================*/

@media (min-width:1200px) and (max-width:1399.98px){

    .ss-hero-slide{

        min-height:92vh;

    }

    .ss-hero-title{

        font-size:54px;

    }

    .ss-hero-subtitle{

        font-size:19px;

    }

    .ss-hero-image img{

        max-width:480px;

    }

}


/*=========================================================
  Laptop (992px - 1199px)
=========================================================*/

@media (min-width:992px) and (max-width:1199.98px){

    .ss-hero-slide{

        min-height:90vh;

        padding:100px 0 70px;

    }

    .ss-hero-title{

        font-size:46px;

    }

    .ss-hero-subtitle{

        font-size:17px;

    }

    .ss-hero-buttons{

        gap:15px;

    }

    .ss-hero-image img{

        max-width:430px;

    }

}


/*=========================================================
  Tablet (768px - 991px)
=========================================================*/

@media (min-width:768px) and (max-width:991.98px){

    .ss-hero-slide{

        min-height:auto;

        padding:120px 0 80px;

        text-align:center;

    }

    .ss-hero-content{

        max-width:100%;

        margin:auto;

    }

    .ss-hero-title{

        font-size:40px;

    }

    .ss-hero-subtitle{

        font-size:17px;

        margin-left:auto;

        margin-right:auto;

    }

    .ss-hero-buttons{

        justify-content:center;

    }

    .ss-hero-image{

        margin-top:45px;

    }

    .ss-hero-image img{

        max-width:420px;

    }

    .ss-hero-prev,
    .ss-hero-next{

        width:55px;

    }

}


/*=========================================================
  Mobile Large (576px - 767px)
=========================================================*/

@media (min-width:576px) and (max-width:767.98px){

    .ss-hero-slide{

        min-height:auto;

        padding:110px 0 70px;

        text-align:center;

    }

    .ss-hero-content{

        max-width:100%;

    }

    .ss-hero-badge{

        font-size:13px;

    }

    .ss-hero-title{

        font-size:34px;

        line-height:1.30;

    }

    .ss-hero-subtitle{

        font-size:16px;

        margin-bottom:30px;

    }

    .ss-hero-buttons{

        justify-content:center;

        flex-direction:column;

        align-items:center;

    }

    .ss-btn-primary,
    .ss-btn-outline{

        width:280px;

    }

    .ss-hero-image{

        margin-top:40px;

    }

    .ss-hero-image img{

        max-width:340px;

    }

    .ss-hero-prev,
    .ss-hero-next{

        display:none;

    }

}


/*=========================================================
  Mobile (480px - 575px)
=========================================================*/

@media (min-width:480px) and (max-width:575.98px){

    .ss-hero-slide{

        min-height:auto;

        padding:100px 0 60px;

        text-align:center;

    }

    .ss-hero-title{

        font-size:30px;

    }

    .ss-hero-subtitle{

        font-size:15px;

    }

    .ss-hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .ss-btn-primary,
    .ss-btn-outline{

        width:100%;

        max-width:280px;

    }

    .ss-hero-image{

        margin-top:35px;

    }

    .ss-hero-image img{

        max-width:300px;

    }

    .ss-hero-indicators{

        bottom:15px;

    }

}


/*=========================================================
  Small Mobile (Below 480px)
=========================================================*/

@media (max-width:479.98px){

    .ss-hero-slide{

        min-height:auto;

        padding:95px 0 55px;

        text-align:center;

    }

    .ss-hero-content{

        max-width:100%;

    }

    .ss-hero-badge{

        font-size:12px;

        padding:6px 15px;

    }

    .ss-hero-title{

        font-size:26px;

        line-height:1.35;

    }

    .ss-hero-subtitle{

        font-size:14px;

        margin-bottom:28px;

    }

    .ss-hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:12px;

    }

    .ss-btn-primary,
    .ss-btn-outline{

        width:100%;

    }

    .ss-hero-image{

        margin-top:30px;

    }

    .ss-hero-image img{

        max-width:260px;

        border-radius:14px;

    }

    .ss-hero-prev,
    .ss-hero-next{

        display:none;

    }

    .ss-hero-indicators{

        bottom:12px;

    }

    .ss-hero-indicators button{

        width:10px;

        height:10px;

    }

    .ss-hero-indicators .active{

        width:28px;

    }

}


/*=========================================================
  Landscape Mobile
=========================================================*/

@media (max-height:550px) and (orientation:landscape){

    .ss-hero-slide{

        min-height:auto;

        padding:80px 0;

    }

    .ss-hero-title{

        font-size:30px;

    }

    .ss-hero-image{

        margin-top:0;

    }

    .ss-hero-image img{

        max-width:240px;

    }

}

/*=====================================================================*/
/*=====================================================================*/
/*=======================End Slider Slider==============================================*/
/*=====================================================================*/
/*=====================================================================*/







/*=====================================================================
  End Of File

  File :
  assets/css/responsive.css

  Swarnim Sahitya CMS

  Modules Included

  ✔ Ultra Wide Desktop
  ✔ Extra Large Desktop
  ✔ Desktop
  ✔ Laptop
  ✔ Tablet
  ✔ Large Mobile
  ✔ Mobile
  ✔ Small Mobile
  ✔ Landscape Support
  ✔ Utility Classes
  ✔ Print Support
  ✔ Accessibility
  ✔ Retina Display Support
  ✔ Responsive Helpers
  ✔ Overflow Protection

  Fully Responsive
  Bootstrap 5 Compatible
  Mobile First
  Production Ready

=====================================================================*/