/* ------------------------ responsive media query start for Slider  ---------------------- */

/* for Tablet Devices */

@media only screen and (min-width:768px) and (max-width:1024px) {





    /* ------------------------------ Hearder Styling Start------------------------------ */
    .upper-menu {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .menu-fist ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .mobile-menu-icon {
        display: block;
    }

    .button {
        display: none;
    }

    .button-milled-menu {
        display: block;
    }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        display: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .menu.active {
        display: block;
    }

    .menu nav>ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 15px;
    }

    .menu nav ul li,
    .dropdown {
        width: 100%;
    }

    .menu nav ul li a,
    .dropdown-toggle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        padding-left: 15px;
        display: none;
        box-shadow: none;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }



    /* ------------------------------ Enquire Form Button ------------------------------ */

    .equiri-button01 {
        position: fixed;
        top: 300px;
        right: -35px;
        padding: 7px 15px;
        font-size: var(--font-size-s);


    }



    /* ------------------------------ Slider Styling Start------------------------------ */


    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .slide-content .text h2 {
        font-size: var(--font-size-xl);
        margin-bottom: 50px;
    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .slide-content .text p {
        font-size: var(--font-size-s);
        margin-bottom: 30px;
        line-height: 25px;
    }


    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton a {
        padding: 5px 10px;
        margin-right: 10px;
        align-items: center;

    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton a .btn-01 p {
        padding-right: 10px;
        padding-top: 2px;
        font-size: var(--font-size-s);

    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton a .btn-02 i {

        padding: 5px 15px 5px 4px;
        font-size: var(--font-size-sl);

    }


    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton .hbtn-02 {

        padding: 5px 10px;



    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton .hbtn-02 .btn-03 p {
        padding-right: 10px;
        padding-top: 2px;
        font-size: var(--font-size-s);

    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton .hbtn-02 .btn-04 i {
        padding: 5px 15px 5px 4px;
        font-size: var(--font-size-sl);
    }


    /* ---------------------------------------- sixth Comparison Section Styling  ----------------------------------------*/

    .comparison .comparison-part {

        gap: 30px;
    }

    .comparison .comparison-part .camp-inner-01 {
        gap: 10px;
    }



    .comparison .comparison-part .camp-inner-01 .camp-details-01 .capm-box .fa-solid {
        font-size: var(--font-size-xl);
    }

    .comparison .comparison-part .camp-inner-01 .camp-details-01 .capm-box .box-camp-details h3 {
        font-size: var(--font-size-m);
        padding-bottom: 10px;

    }

    .comparison .comparison-part .camp-inner-01 .camp-details-01 .capm-box .box-camp-details p {
        font-size: var(--font-size-s);

    }


    .comparison .comparison-part .camp-inner-01 .camp-details-02 .capm-box .fa-solid {
        font-size: var(--font-size-xl);

    }

    .comparison .comparison-part .camp-inner-01 .camp-details-02 .capm-box .box-camp-details h3 {
        font-size: var(--font-size-m);
        padding-bottom: 10px;

    }


    .comparison .comparison-part .camp-inner-01 .camp-details-02 .capm-box .box-camp-details p {
        font-size: var(--font-size-s);
        color: var(--text-color);

    }

    .comparison .comparison-part .camp-inner-01 .camp-details-02 img {
        border-radius: var(--border-radius-s);

    }




    .comparison .comparison-part .camp-inner-02 .camp-inner-02-text h2 {
        font-size: var(--font-size-l);
        margin-bottom: 10px;
    }

    .comparison .comparison-part .camp-inner-02 .camp-inner-02-text p {
        font-size: var(--font-size-s);
        line-height: 25px;
    }


    .comparison .comparison-part .camp-inner-02 .text-box-detaisl {
        gap: 15px;

    }

    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-01 .box-camp-details-text h3 {
        font-size: var(--font-size-m);
    }

    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-01 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 25px;

    }

    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-02 .box-camp-details-text h3 {
        font-size: var(--font-size-m);
    }


    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-02 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 25px;
    }



    .comparison .comparison-part .camp-inner-02 .camp-button .comp-btn .fa-regular {

        font-size: var(--font-size-n);
        margin-right: 10px;

    }

    .comparison .comparison-part .camp-inner-02 .camp-button .comp-btn .camp-text-btn {
        font-size: var(--font-size-n);
    }


    /* inner 3 */


    .comparison .comparison-part-about .camp-inner-03 .camp-inner-02-text h2 {
        font-size: var(--font-size-l);
        margin-bottom: 10px;
    }

    .comparison .comparison-part-about .camp-inner-03 .camp-inner-02-text p {
        font-size: var(--font-size-s);
        line-height: 25px;
    }


    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl {
        gap: 15px;

    }

    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-01 .box-camp-details-text h3 {
        font-size: var(--font-size-m);
    }

    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-01 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 25px;

    }

    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-02 .box-camp-details-text h3 {
        font-size: var(--font-size-m);
    }


    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-02 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 25px;
    }



    .comparison .comparison-part-about .camp-inner-03 .camp-button .comp-btn .fa-regular {

        font-size: var(--font-size-n);
        margin-right: 10px;

    }

    .comparison .comparison-part-about .camp-inner-03 .camp-button .comp-btn .camp-text-btn {
        font-size: var(--font-size-n);
    }





    /* ---------------------------------------- Fourth Tools Section Styling  ----------------------------------------*/



    .tools .tools-text h4 {
        font-size: var(--font-size-n);
    }


    .tools .tools-text h3 {
        font-size: var(--font-size-l);

    }


    .tools .tools-boxs {
        grid-template-columns: repeat(3, 1fr);

    }



    .tools .tools-boxs .boxs .box-icon {
        font-size: var(--font-size-n);
    }



    .tools .tools-boxs .boxs .box-text h3 {
        font-size: var(--font-size-n);

    }

    .tools .tools-boxs .boxs .box-text h4 {
        font-size: var(--font-size-s);
    }





    /* ------------------------------ Images Gallery  ------------------------------ */

    .gallery-photo-grid {
        columns: 5 auto;
    }




    /* ------------------------------ Show Case Styling  ------------------------------ */


    .work-showcase-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .work-showcase-card {
        height: 300px;
    }

    .work-showcase-heading-wrap .work-showcase-title {
        font-size: var(--font-size-xl);

    }

    .work-showcase-filter-list {
        gap: 10px;
        margin-bottom: 20px;
    }

    .work-showcase-filter-btn {
        font-size: var(--font-size-m);
        padding: 8px 18px;
        border-radius: var(--border-radius-m);
    }





    /* ------------------------------ Campany Summery  ------------------------------ */

    .company-summery-container {
        padding: 50px;
        grid-template-columns: repeat(4, 1fr);
    }

    .company-summery-icon {
        font-size: var(--font-size-xl);

    }

    .company-summery-number {
        font-size: var(--font-size-xl);

    }

    .company-summery-text {
        font-size: var(--font-size-n);
        color: var(--text-color);
    }









    /* ----------------------- blog home page section styling -----------------------*/


    .blog-section-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .blog-section-home-title {

        font-size: var(--font-size-xl);

    }

    .blog-section-home-subtitle {
        font-size: var(--font-size-n);

    }

    .blog-section-home-card-title {
        font-size: var(--font-size-m);

    }

    .blog-section-home-text {
        font-size: var(--font-size-n);
    }

    .blog-section-home-link {

        font-size: var(--font-size-n);
    }




    /*---------------- Blogs Page ---------------*/



    .blog-section-title {
        font-size: var(--font-size-xl);
    }





    /*---------------- Blogs Details ---------------*/
    .blog-section-detail-container {
        grid-template-columns: 1fr;
    }

    .blog-section-sidebar {
        position: static;
    }

    .blog-section-detail-title {
        font-size: 34px;
    }












    /* ---------------------------------------- Seventh Testimonial Section Styling  ----------------------------------------*/



    .testimonial .testimonial-innner .testimonials-section .section-header h3 {
        font-size: var(--font-size-n);
    }


    .testimonial .testimonial-innner .testimonials-section .section-header h2 {
        font-size: var(--font-size-l);
    }


    .test-card-body .quote i {
        font-size: var(--font-size-l);
    }

    .test-card-body .quote h2 {
        font-size: var(--font-size-m);
    }

    .test-card-body p {
        font-size: var(--font-size-s);
        line-height: 20px;
    }


    .test-card-body .ratings i {
        font-size: var(--font-size-n);
    }


    .profile-desc span:nth-child(1) {
        font-size: var(--font-size-n);
    }

    .profile-desc span:nth-child(2) {
        font-size: var(--font-size-s);
    }


    .owl-nav .owl-prev i,
    .owl-nav .owl-next i {
        padding: 10px 22px 10px 10px !important;
        font-size: 14px !important;

    }









    /* ------------------------------ crosul images slider ------------------------------ */

    .client-logo-carousel-item {
        flex: 0 0 calc((100vw - 80px) / 3);
    }






















































    /* ---------------------------------------- All University Pages Styling  ----------------------------------------*/

    .layout,
    .hero-card,
    .certificate-box {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }


    .btn-primary {
        font-size: var(--font-size-n);
    }



    .hero-card {
        padding: 10px;
        grid-template-columns: 1.3fr 0.7fr;
    }

    .hero-card h5 {
        font-size: var(--font-size-n);
    }

    .hero-title {
        font-size: var(--font-size-xl);
    }


    .meta-pill {
        font-size: var(--font-size-n);
        font-weight: 500;

    }


    .hero-side h3 {
        font-size: var(--font-size-ln);
    }


    .section-nav-wrap {
        padding: 20px 50px;
    }

    .tab-link {
        font-size: var(--font-size-n);
    }


    .layout {
        padding: 50px;
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 20px;
    }

    .card h2 {
        font-size: var(--font-size-lm);
    }

    .card .subtext {
        font-size: var(--font-size-m);
    }

    .card p {
        font-size: var(--font-size-n);

    }

    .placement-stat strong {

        font-size: var(--font-size-l);
    }

    .logo-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 16px;
    }


    .logo-box img {
        width: 100%;
        height: 70px;
    }

    .certificate-preview img {
        width: 100%;
        height: 300px;
    }


    .faq-question {
        font-size: var(--font-size-m);
    }


    .sidebar {
        position: sticky;
        top: 140px;
        display: grid;
        gap: 18px;
    }



    /* ------------------------------ CATEGORY SECTION ------------------------------ */


    .exam-hero h2 {
        font-size: var(--font-size-xl);
    }

    .exam-hero {
        padding: 46px 24px 32px;
        border-radius: 24px;
    }


    .exam-hero h3 {
        font-size: var(--font-size-lm);
    }


    .exam-hero h3 {
        font-size: var(--font-size-ns);
    }

    .exam-btn-primary,
    .exam-btn-outline {

        min-height: auto;
        padding: 8px 22px;

        font-size: var(--font-size-ns);

    }


    .exam-section-header h3,
    .promo h4 {
        font-size: var(--font-size-l);
        font-weight: 600;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* grid-template-columns: 1fr; */
    }







    /* ------------------------------ Social Media Page Styling Start------------------------------ */

    .stories-hero h2 {
        font-size: var(--font-size-xl);

    }

    .stories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .story-card {
        min-height: 430px;
    }

    .story-title {
        font-size: 20px;
    }



    .stories-page {
        padding-top: 24px;
    }



    .story-content {
        padding: 16px;
    }

    .hero-text {
        font-size: 15px;
    }






    /* ---------------------------------------- Online Meeting page Styling  ----------------------------------------*/

    .meet-online-copy h2 {
        font-size: var(--font-size-xl);


    }


    .hash-meet-online {

        font-size: var(--font-size-n);
    }

    .meet-online-copy p {
        font-size: var(--font-size-ns);

    }

    .stat-meet-online strong {

        font-size: var(--font-size-m);
    }

    .stat-meet-online span {
        font-size: var(--font-size-s);
    }

    .slider-head-meet-online h2,
    .section-meet-online-title {
        font-size: var(--font-size-l);
        line-height: 24px;

    }

    .slider-meet-online-copy h3 {
        font-size: var(--font-size-ln);
        line-height: 24px;

    }



    .cta-band h3 {
        font-size: var(--font-size-l);
        font-weight: 600;
        line-height: 27px;
    }

    .cta-band p {
        font-size: var(--font-size-n);
    }


    .slider-meet-online-copy p {
        font-size: var(--font-size-n);
    }

    .meet-online-grid,
    .about-wrap-meet-online,
    .cta-band,
    .slider-meet-online {

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

    .meet-online-visual {
        min-height: 470px;
    }

    .cta-band .btn-meet-online-secondary {
        justify-self: start;
    }

    .brand-meet-online-strip {
        grid-template-columns: repeat(6, minmax(0, 1fr));

    }

    .info-grid-meet-online {

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




    /* ---------------------------------------- Contact Us page Styling  ----------------------------------------*/



    .contact-us-main-title {
        font-size: var(--font-size-xl);

    }


    .contact-us-support-card {
        display: inline-block;

    }

    contact-us-support-icon {
        min-width: 40px;
        width: 40px;
        height: 40px;
        padding: 10px;
        font-size: var(--font-size-m);


    }

    .contact-us-support-content {
        margin-top: 10px;
    }

    .contact-us-card-title {
        font-size: var(--font-size-lm);

    }

    .contact-us-card-text {
        font-size: var(--font-size-s);
        line-height: 20px;
    }


    .contact-info-map {

        width: 300px;
        height: 150px;

    }







    /* ------------------------------ Course Styling Start------------------------------ */

    .courses-page-four-grid,
    .courses-page-college-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .courses-page-content-layout {
        display: flex;
        flex-wrap: wrap;
    }



    .courses-page-about-grid,
    .courses-page-hero {
        grid-template-columns: 1fr;
    }

    .courses-page-sidebar {
        position: static;
        top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .courses-page-about-section-layout {

        display: flex;
        flex-wrap: wrap;

    }

    .courses-page-section-head {
        max-width: 100%;
        margin-bottom: 50px;

    }



    /* ------------------------------ Tools Styling Start------------------------------ */


    .tools-page-hero {
        min-height: 380px;
        padding: 40px 25px;
    }

    .tools-page-hero-title {
        font-size: 32px;
    }

    .tools-page-elements-grid,
    .tools-page-formula-grid {
        grid-template-columns: 1fr;
    }




    /*---------------- About Us Page Section ----------------*/

    .about-us-page-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-us-page-image-box img {
        height: auto;
        max-height: 430px;
    }







    /*---------------- Gallery Page  ----------------*/

    .my-page-gallery-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .my-page-gallery-photo-heading h2 {
        font-size: 30px;
    }




    /*---------------- Services Pages  ----------------*/

    .clients-services-pages-text h2 {
        font-size: var(--font-size-l);
    }



    /* Other Pages  */

    .clients-services-pages-text-other h2 {
        font-size: var(--font-size-l);

    }

    .clients-services-pages-images-others {
        grid-template-columns: repeat(3, 1fr);
    }


    .clients-services-pages-images-others img {
        width: 250px;
        height: 200px;
        margin: 10px;
    }


















    /* ------------------------------ Footer Styling Start------------------------------ */



    .footer-section-01 {
        padding: 50px;
    }


    .footer-section-01 .footer-colum {
        margin-right: 20px;
    }


    .footer-section-01 .footer-colum img {
        width: 150px;
        height: auto;
    }


    .footer-section-01 .footer-colum p {
        font-size: var(--font-size-s);
        line-height: 20px;
    }

    .footer-section-01 .footer-colum h3 {
        font-size: var(--font-size-m);
    }



    .footer-section-01 .footer-colum h4 {
        font-size: var(--font-size-n);
        padding-top: 20px;
    }


    .footer-section-01 .footer-colum .fa-brands {
        font-size: var(--font-size-m);
    }




    .footer-section-02-footer .footer-colum h3 {
        font-size: var(--font-size-n);

    }


    .footer-section-02-footer .footer-colum a .guide .guide01 i {
        font-size: var(--font-size-l);
        padding-right: 40px;
    }


    .footer-section-02-footer .footer-colum a .guide .guide02 p {
        font-size: var(--font-size-n);

    }




    .footer-section-02-footer .footer-colum a .guide1 .guide01 i {
        font-size: var(--font-size-l);
        padding-right: 40px;
    }



    .footer-section-02-footer .footer-colum a .guide1 .guide02 p {
        font-size: var(--font-size-n);

    }



    .footer-section-02 .footer-colum2-qr {
        width: 20%;
        height: auto;
        padding-right: 40px;

    }



    .footer-section-02 .footer-colum2-qr a img {
        width: 120px;
        height: auto;
    }



    .footer-section-02 .footer-colum2-text {
        width: 50%;
        height: auto;
        padding-right: 40px;

    }


    .footer-section-02 .footer-colum2-text p {
        font-size: var(--font-size-sl);
    }



    .footer-section-02 .footer-colum2-contact {
        padding-left: 20px;
        width: 30%;
        height: auto;

    }

    .footer-section-02 .footer-colum2-contact h3 {
        font-size: var(--font-size-m);
    }

    .footer-section-02 .footer-colum2-contact .fa-solid {
        font-size: var(--font-size-m);
        margin-right: 5px;

    }

    .footer-section-02 .footer-colum2-contact span {
        font-size: var(--font-size-s);
    }


    .footer-section-02 .footer-colum2-contact .footer-button {
        padding: 20px;
        border-radius: var(--border-radius-s);
    }

    .footer-section-02 .footer-colum2-contact .footer-button .f-align {
        margin-top: -25px;
    }



    .footer-section-02 .footer-colum2-contact .footer-button a {
        font-size: var(--font-size-s);
    }


    .footer-section-03 ul a {
        padding-right: 10px;
    }


}




























































/* for Mobile Devices */

@media only screen and (min-width:200px) and (max-width:767px) {


    /* ------------------------------ Hearder Styling Start------------------------------ */
    .upper-menu {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .menu-fist ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .mobile-menu-icon {
        display: block;
    }

    .button {
        display: none;
    }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        display: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .menu.active {
        display: block;
    }

    .menu nav>ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 15px;
    }

    .menu nav ul li,
    .dropdown {
        width: 100%;
    }

    .menu nav ul li a,
    .dropdown-toggle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        padding-left: 15px;
        display: none;
        box-shadow: none;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }



    .upper-menu {
        display: none;
    }

    .logo img {
        max-width: 140px;
    }

    .buttom-header {
        padding: 12px 20px;
    }


    .button-milled-menu {
        display: block;
    }



    /* ------------------------------ Enquire Form Button ------------------------------ */

    .open-btn {

        font-size: var(--font-size-n);
        padding: 7px 15px;
        right: -35px;


    }

    .modal-box {
        padding: 26px 18px 18px;
        border-radius: 16px;
        width: 90%;

    }

    .popup-title {
        font-size: var(--font-size-m);
        padding-right: 25px;
    }

    .popup-subtitle {
        font-size: var(--font-size-n);
    }

    .input,
    .select,
    .country-code,
    .submit-btn {
        height: 40px;
        font-size: 13px;
    }

    .phone-wrap {
        gap: 8px;
    }

    .country-code {
        width: 82px;
    }

    .close-btn {
        font-size: 30px;
    }

    .secure-box {
        margin-top: 15px;
        font-size: 12px;

    }











    /* ------------------------------ Slider Styling Start------------------------------ */
    .hero-section {
        width: 100%;
        height: 600px;
    }

    .swiper .swiper-wrapper .swiper-slide {
        display: block;
        height: 600px;
        padding: 50px 20px;

    }


    .swiper .swiper-wrapper .swiper-slide .slide-colum01 {
        width: 100%;

    }


    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .slide-content .text h2 {
        font-size: var(--font-size-xxl);
        margin-bottom: 20px;
    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .slide-content .text p {
        font-size: var(--font-size-n);
        line-height: 20px;

    }


    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton a {

        border-radius: var(--border-radius-m);
        margin-right: 10px;
    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton a .btn-01 p {
        padding-right: 10px;
        font-size: var(--font-size-s);

    }






    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton .hbtn-02 {

        border-radius: var(--border-radius-m);

    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum01 .botton .hbtn-02 .btn-03 p {
        padding-right: 10px;
        font-size: var(--font-size-s);
    }



    .swiper .swiper-wrapper .swiper-slide .slide-colum02 {
        width: 100%;

    }

    .swiper .swiper-wrapper .swiper-slide .slide-colum02 img {
        width: auto;
        height: 300px;
        position: absolute;
        bottom: 0;
        left: 80px;


    }

    .swiper {
        width: 100%;
        height: 600px;
    }





    /* ---------------------------------------- Comparison Section Styling  ----------------------------------------*/



    .comparison .comparison-part {
        display: block;
        padding: 80px 20px 50px 20px;

    }

    .comparison .comparison-part .camp-inner-01 {
        gap: 10px;
        margin-bottom: 50px;
    }


    .comparison .comparison-part .camp-inner-01 .camp-details-01 .capm-box {
        padding: 10px;
    }



    .comparison .comparison-part .camp-inner-01 .camp-details-01 .capm-box .fa-solid {
        font-size: var(--font-size-l);
        margin-right: 15px;
    }


    .comparison .comparison-part .camp-inner-01 .camp-details-01 .capm-box .box-camp-details h3 {
        font-size: var(--font-size-m);
        padding-bottom: 10px;
    }

    .comparison .comparison-part .camp-inner-01 .camp-details-01 .capm-box .box-camp-details p {
        font-size: var(--font-size-s);
    }


    .comparison .comparison-part .camp-inner-01 .camp-details-01 img {
        border-radius: var(--border-radius-s);

    }





    .comparison .comparison-part .camp-inner-01 .camp-details-02 .capm-box {
        padding: 10px;
    }



    .comparison .comparison-part .camp-inner-01 .camp-details-02 .capm-box .fa-solid {
        font-size: var(--font-size-l);
        margin-right: 15px;
    }

    .comparison .comparison-part .camp-inner-01 .camp-details-02 .capm-box .box-camp-details h3 {
        font-size: var(--font-size-m);
        padding-bottom: 10px;

    }

    .comparison .comparison-part .camp-inner-01 .camp-details-02 .capm-box .box-camp-details p {
        font-size: var(--font-size-s);
    }



    .comparison .comparison-part .camp-inner-01 .camp-details-02 img {
        border-radius: var(--border-radius-s);

    }




    .comparison .comparison-part .camp-inner-02 .camp-inner-02-text h3 {
        font-size: var(--font-size-s);

    }

    .comparison .comparison-part .camp-inner-02 .camp-inner-02-text h2 {
        font-size: var(--font-size-m);
        margin-bottom: 15px;

    }

    .comparison .comparison-part .camp-inner-02 .camp-inner-02-text p {
        font-size: var(--font-size-s);
        line-height: 25px;
    }



    .comparison .comparison-part .camp-inner-02 .text-box-detaisl {
        gap: 10px;
    }



    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-01 {
        border-left: 3px solid var(--primary-color);
    }


    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-01 .camp-icon-text .fa-solid {
        font-size: var(--font-size-l);
        margin-bottom: 10px;
    }


    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-01 .box-camp-details-text h3 {
        font-size: var(--font-size-n);
        margin-bottom: 10px;
    }


    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-01 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 20px;

    }



    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-02 {
        padding: 10px;
        border-left: 3px solid var(--secondary-color);
    }


    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-02 .camp-icon-text .fa-solid {
        font-size: var(--font-size-l);
        margin-bottom: 10px;
    }

    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-02 .box-camp-details-text h3 {
        font-size: var(--font-size-n);
        margin-bottom: 10px;

    }


    .comparison .comparison-part .camp-inner-02 .text-box-detaisl .capm-box-text-02 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 20px;

    }




    .comparison .comparison-part .camp-inner-02 .camp-button .comp-btn {
        align-items: center;

    }

    .comparison .comparison-part .camp-inner-02 .camp-button .comp-btn .fa-regular {
        font-size: var(--font-size-n);
        margin-right: 10px;

    }

    .comparison .comparison-part .camp-inner-02 .camp-button .comp-btn .camp-text-btn {
        font-size: var(--font-size-s);
    }




    /* inner 3 */


    .comparison .comparison-part-about {
        padding: 50px 20px;

    }

    .comparison .comparison-part-about .camp-inner-03 {
        display: block;
    }

    .comparison .comparison-part-about .camp-inner-03 .camp-inner-02-text {
        width: 100%;
    }

    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl {
        width: 100%;
    }

    .comparison .comparison-part-about .camp-inner-03 .camp-inner-02-text h3 {
        font-size: var(--font-size-s);

    }

    .comparison .comparison-part-about .camp-inner-03 .camp-inner-02-text h2 {
        font-size: var(--font-size-m);
        margin-bottom: 15px;

    }

    .comparison .comparison-part-about .camp-inner-03 .camp-inner-02-text p {
        font-size: var(--font-size-s);
        line-height: 25px;
    }



    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl {
        gap: 10px;
    }



    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-01 {
        border-left: 3px solid var(--primary-color);
    }


    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-01 .camp-icon-text .fa-solid {
        font-size: var(--font-size-l);
        margin-bottom: 10px;
    }


    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-01 .box-camp-details-text h3 {
        font-size: var(--font-size-n);
        margin-bottom: 10px;
    }


    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-01 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 20px;

    }



    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-02 {
        padding: 10px;
        border-left: 3px solid var(--secondary-color);
    }


    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-02 .camp-icon-text .fa-solid {
        font-size: var(--font-size-l);
        margin-bottom: 10px;
    }

    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-02 .box-camp-details-text h3 {
        font-size: var(--font-size-n);
        margin-bottom: 10px;

    }


    .comparison .comparison-part-about .camp-inner-03 .text-box-detaisl .capm-box-text-02 .box-camp-details-text p {
        font-size: var(--font-size-s);
        line-height: 20px;

    }




    .comparison .comparison-part-about .camp-inner-03 .camp-button .comp-btn {
        align-items: center;

    }

    .comparison .comparison-part-about .camp-inner-03 .camp-button .comp-btn .fa-regular {
        font-size: var(--font-size-n);
        margin-right: 10px;

    }

    .comparison .comparison-part-about .camp-inner-03 .camp-button .comp-btn .camp-text-btn {
        font-size: var(--font-size-s);
    }







    /* ---------------------------------------- Tools Section Styling  ----------------------------------------*/



    .tools {
        padding: 20px 20px 50px 20px;
    }

    .tools .tools-text h4 {
        font-size: var(--font-size-s);
        font-weight: 400;
    }


    .tools .tools-text h3 {
        font-size: var(--font-size-m);

    }


    .tools .tools-boxs {
        grid-template-columns: repeat(2, 1fr);

    }



    .tools .tools-boxs .boxs .box-icon {
        font-size: var(--font-size-n);
    }



    .tools .tools-boxs .boxs .box-text h3 {
        font-size: var(--font-size-n);

    }

    .tools .tools-boxs .boxs .box-text h4 {
        font-size: var(--font-size-s);
    }





    /* ------------------------------ Images Gallery  ------------------------------ */
    .gallery-photo-container {
        padding: 50px 20px;
    }

    .gallery-photo-grid {
        columns: 3 auto;
    }

    .gallery-photo-section .gallery-photo-container h4 {

        font-size: var(--font-size-n);

    }

    .gallery-photo-section .gallery-photo-container h3 {
        margin-top: 10px;
        font-size: var(--font-size-l);
        margin-bottom: 30px;
    }




    /* ------------------------------ Showcase Styling  ------------------------------ */

    .work-showcase-container {
        padding: 50px 20px;
    }

    .work-showcase-heading-wrap .work-showcase-title {
        font-size: var(--font-size-l);

    }

    .work-showcase-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .work-showcase-filter-list {
        gap: 10px;
        margin-bottom: 20px;
    }

    .work-showcase-filter-btn {
        font-size: var(--font-size-n);
        padding: 8px 18px;
        border-radius: var(--border-radius-m);
    }


    .work-showcase-overlay {
        opacity: 0;
    }



    .work-showcase-overlay span {
        font-size: var(--font-size-s);
        margin-bottom: 5px;
    }

    .work-showcase-overlay h3 {
        font-size: var(--font-size-ln);

    }



    /* ------------------------------ Campany Summery  ------------------------------ */



    .company-summery-icon {
        font-size: var(--font-size-xl);

    }

    .company-summery-number {
        font-size: var(--font-size-xl);

    }


    .company-summery-container {
        padding: 20px;
        grid-template-columns: repeat(2, 1fr);

    }

    .company-summery-text {
        font-size: var(--font-size-n);
        color: var(--text-color);
    }









    /* ---------------------------------------- Testimonial Section Styling  ----------------------------------------*/



    .testimonial .testimonial-innner {
        padding: 50px 20px;
    }

    .testimonial .testimonial-innner .testimonials-section .section-header h3 {
        font-size: var(--font-size-s);
    }


    .testimonial .testimonial-innner .testimonials-section .section-header h2 {
        font-size: var(--font-size-m);
    }


    .test-card-body .quote i {
        font-size: var(--font-size-l);
    }

    .test-card-body .quote h2 {
        font-size: var(--font-size-n);
    }

    .test-card-body p {
        font-size: var(--font-size-s);
        line-height: 20px;
    }


    .test-card-body .ratings i {
        font-size: var(--font-size-s);
    }


    .profile-desc span:nth-child(1) {
        font-size: var(--font-size-n);
    }

    .profile-desc span:nth-child(2) {
        font-size: var(--font-size-s);
    }


    .owl-nav .owl-prev i,
    .owl-nav .owl-next i {
        padding: 10px 22px 10px 10px !important;
        font-size: 14px !important;

    }



    /* ----------------------- blog home page section styling -----------------------*/


    .blog-section-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .blog-section-home-title {

        font-size: var(--font-size-xl);

    }

    .blog-section-home-subtitle {
        font-size: var(--font-size-n);

    }

    .blog-section-home-card-title {
        font-size: var(--font-size-m);

    }

    .blog-section-home-text {
        font-size: var(--font-size-n);
    }

    .blog-section-home-link {

        font-size: var(--font-size-n);
    }






















    /* ------------------------------  crosul images slider ------------------------------ */


    .client-logo-carousel-container {

        padding: 30px 20px;

    }


    .client-logo-carousel {
        padding: 40px 0;
    }

    .client-logo-carousel-item {
        flex: 0 0 calc((100vw - 30px) / 3);
        height: 80px;
        /* padding: 18px; */
    }

    .client-logo-carousel-container::before,
    .client-logo-carousel-container::after {
        width: 60px;
    }












    /* ---------------------------------------- All University Pages Styling  ----------------------------------------*/


    .layout,
    .hero-card,
    .certificate-box {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }



    .btn-primary {
        font-size: var(--font-size-n);
    }

    .hero {
        padding: 0px 20px;
    }

    .hero-card {
        padding: 10px;
    }

    .hero-card h5 {
        font-size: var(--font-size-s);
    }

    .hero-title {
        font-size: var(--font-size-l);
    }


    .meta-pill {
        font-size: var(--font-size-s);
        font-weight: 500;

    }


    .hero-side h3 {
        font-size: var(--font-size-m);
    }

    .section-nav {
        width: 100%;
        position: sticky;
        top: 0px;
        z-index: 990;
        margin-bottom: 28px;
    }


    .section-nav-wrap {
        padding: 20px;
    }

    .tab-link {
        font-size: var(--font-size-n);
    }


    .layout {
        padding: 50px 20px;
        gap: 20px;
    }

    .card h2 {
        font-size: var(--font-size-lm);
    }

    .card .subtext {
        font-size: var(--font-size-m);
    }

    .card p {
        font-size: var(--font-size-n);

    }

    .placement-stat {

        font-size: var(--font-size-s);
    }

    .placement-stat strong {

        font-size: var(--font-size-lm);
    }



    .logo-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 16px;
    }


    .logo-box img {
        width: 100%;
        height: 50px;
    }

    .certificate-preview img {
        width: 100%;
        height: 300px;
    }


    .faq-question {
        font-size: var(--font-size-m);
    }


    .sidebar {
        position: sticky;
        top: 140px;
        display: grid;
        gap: 18px;
    }









    /* ------------------------------ Page Examanation ------------------------------ */




    .exam-page {

        padding: 20px;
    }

    .exam-hero-wrap {
        padding-top: 14px;
    }

    .exam-hero {
        padding: 34px 16px 24px;
        border-radius: 22px;
    }

    .eyebrow {
        font-size: var(--font-size-ns);
        padding: 7px 12px;
    }

    .exam-hero h2 {
        font-size: var(--font-size-l);
    }

    .exam-hero h3 {
        font-size: var(--font-size-m);
        margin-bottom: 14px;
    }

    .exam-hero p {
        font-size: var(--font-size-s);
    }

    .exam-hero-actions {
        gap: 10px;
    }

    .exam-btn-primary,
    .exam-btn-outline {

        min-height: auto;
        padding: 8px 22px;
        font-size: var(--font-size-ns);
        width: 100%;

    }


    .exam-section {
        margin-top: 50px;
        padding-top: 12px;
    }

    .exam-section-header {
        margin-bottom: 18px;
    }

    .exam-section-header h3,
    .promo h4 {
        font-size: var(--font-size-ln);
        font-weight: 600;
    }

    .exam-section-header p {
        font-size: var(--font-size-s);
        font-weight: 400;
    }


    .category-card {
        border-radius: 22px;
        padding: 18px 16px 16px;
    }

    .card-top {
        gap: 12px;
        margin-bottom: 16px;
    }

    .icon-box {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 20px;
    }

    .card-title {
        font-size: var(m);
    }

    .card-subtitle {
        font-size: 12px;
    }

    .exam-tags {
        gap: 8px;
    }

    .exam-tag {
        min-height: 38px;
        padding: 8px 12px;
        font-size: var(--font-size-s);
    }

    .card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .promo {
        border-radius: 24px;
        padding: 32px 16px;
    }



    .promo p {
        font-size: 14px;
    }

    .category-grid {
        /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
        grid-template-columns: 1fr;
    }

    .toggle-exam-btn {
        font-family: var(--font-size-s);
        font-weight: 600;

    }









    /* ------------------------------ Social Media Page Styling Start------------------------------ */



    .stories-page {
        padding: 20px;
    }

    .stories-hero h2 {
        font-size: var(--font-size-l);
    }


    .stories-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .story-card {
        min-height: 420px;
    }

    .story-title {
        font-size: 20px;
    }

    .view-more-btn {
        width: 100%;
    }





    /* ---------------------------------------- Online Meeting page Styling  ----------------------------------------*/




    .online-meeting-video {
        padding: 20px;

    }

    .meet-online-copy h2 {
        font-size: var(--font-size-l);


    }


    .hash-meet-online {

        font-size: var(--font-size-n);
    }

    .meet-online-copy p {
        font-size: var(--font-size-ns);

    }

    .stat-meet-online strong {

        font-size: var(--font-size-m);
    }

    .stat-meet-online span {
        font-size: var(--font-size-s);
    }

    .slider-head-meet-online h2,
    .section-meet-online-title {
        font-size: var(--font-size-ln);
        line-height: 24px;

    }



    .slider-meet-online-copy h3 {
        font-size: var(--font-size-ln);
        line-height: 24px;

    }



    .cta-band h3 {
        font-size: var(--font-size-ln);
        font-weight: 600;
        line-height: 30px;
    }

    .cta-band p {
        font-size: var(--font-size-n);
    }


    .slider-meet-online-copy p {
        font-size: var(--font-size-n);
    }

    .meet-online-grid,
    .about-wrap-meet-online,
    .cta-band,
    .slider-meet-online {

        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .meet-online-visual {
        min-height: 470px;
    }

    .cta-band .btn-meet-online-secondary {
        justify-self: start;
    }

    .brand-meet-online-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

    .info-grid-meet-online {

        grid-template-columns: repeat(1, minmax(0, 1fr));
    }







    /* ---------------------------------------- Contact Us page Styling  ----------------------------------------*/


    .contact-us-section,
    .contact-us-student-section,
    .contact-us-office-section {
        padding: 50px 20px;
    }

    .contact-us-main-title {
        font-size: var(--font-size-xl);

    }

    .contact-us-top-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: stretch;
    }


    .contact-us-hero {
        margin-bottom: 32px;
    }

    .contact-us-form-grid {
        grid-template-columns: 1fr;
        /* grid-template-columns: repeat(1, 1fr); */

    }

    .contact-info-map {
        margin-top: 12px;
        width: 300px;
        height: 100px;
        overflow: hidden;
        background: #c8e8f0;

    }







    /* ------------------------------ Course Page Styling Start------------------------------ */

    .courses-page-hero {
        margin: 0;
        flex-wrap: wrap;

    }

    .courses-page-about-section-layout {
        margin: 20px;
        display: flex;
        flex-wrap: wrap;
        margin: auto;


    }

    .courses-page-section-head {
        max-width: 100%;
        padding-right: 0;
    }

    .courses-page-toc-section {
        margin: 20px;
        /* overflow: hidden; */
    }




    .courses-page-sidebar {
        display: none;
        /* position: static;
        display: flex;
        justify-content: center;
        align-items: center;        */

    }


    .courses-page-content-layout {
        padding: 20px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        /* flex-direction: column-reverse; */

        /* overflow: hidden; */
    }

    .courses-page-section p,
    .courses-page-about-text p,
    .courses-page-faq-answer p,
    .courses-page-sidebar-card p {
        font-size: var(--font-size-s);

    }

    .courses-page-section h2,
    .courses-page-about-section h2,
    .courses-page-toc-section h2 {

        font-size: var(--font-size-m);


    }


    .courses-page-info-card h3,
    .courses-page-document-card h3,
    .courses-page-college-card h3,
    .courses-page-syllabus-card h3,
    .courses-page-sidebar-card h3,
    .courses-page-process-card h3 {
        margin-top: 0;
        margin-bottom: 12px;
        font-size: var(--font-size-n);
        color: var(--tertiary-color);
    }




    .courses-page-section,
    .courses-page-about-section,
    .courses-page-toc-section {
        padding: 22px;
        border-radius: 18px;
    }

    .courses-page-toc-grid,
    .courses-page-form-grid,
    .courses-page-process-grid,
    .courses-page-four-grid,
    .courses-page-two-grid,
    .courses-page-syllabus-grid,
    .courses-page-college-grid,
    .courses-page-summary-grid {
        grid-template-columns: 1fr;
    }

    .courses-page-title {
        font-size: 36px;
    }

    .courses-page-subtitle,
    .courses-page-faq-question {
        font-size: var(--font-size-m);
    }

    .courses-page-hero-actions {
        flex-direction: column;
    }

    .courses-page-btn {
        width: 100%;
    }




    /* ------------------------------ Tools Styling Start------------------------------ */
    .tools-page-container {
        padding: 0 12px 40px;
    }

    .tools-page-hero {
        min-height: 320px;
        padding: 35px 20px;
        border-radius: 0 0 20px 20px;
    }

    .tools-page-hero-title {
        font-size: 28px;
    }

    .tools-page-hero-subtitle {
        font-size: var(--font-size-m);
    }

    .tools-page-calculator-box,
    .tools-page-content-card,
    .tools-page-element-card,
    .tools-page-formula-card {
        padding: 20px;
    }

    .tools-page-tabs {
        flex-direction: column;
    }

    .tools-page-tab-btn,
    .tools-page-convert-btn {
        width: 100%;
    }

    .tools-page-section-title {
        font-size: 26px;
    }








    /* ----------------------- blog home page section styling -----------------------*/


    .blog-section-home-grid {
        grid-template-columns: 1fr;
    }

    .blog-section-home-title {

        font-size: var(--font-size-l);

    }

    .blog-section-home-subtitle {
        font-size: var(--font-size-n);

    }

    .blog-section-home-card-title {
        font-size: var(--font-size-m);

    }

    .blog-section-home-text {
        font-size: var(--font-size-n);
    }

    .blog-section-home-link {

        font-size: var(--font-size-n);
    }









    /*---------------- Blogs Page ---------------*/

    .blog-section-grid {
        grid-template-columns: 1fr;
    }

    .blog-section-title {
        font-size: var(--font-size-l);
    }

    .blog-section-search-input,
    .blog-section-category-select {
        width: 100%;
    }


    .blog-section-card-title {
        font-size: var(--font-size-ln);

    }

    .blog-section-card-text {
        font-size: var(--font-size-n);

    }

    .blog-section-read-more {
        font-size: var(--font-size-n);

    }











    /*---------------- Blogs Details ---------------*/
    .blog-section-detail-wrapper {
        width: 100%;

    }

    .blog-section-detail-container {
        grid-template-columns: 1fr;
        padding: 50px 20px;
    }

    .blog-section-sidebar {
        position: static;
    }

    .blog-section-detail-table {
        min-width: auto;
    }

    .blog-section-detail-main {
        width: auto;
        padding: 15px;
    }

    .blog-section-detail-feature-image {
        min-width: 200px;
        max-width: auto;
        height: 260px;
    }

    .blog-section-detail-title {
        font-size: var(--font-size-l);

    }


    .blog-section-detail-block-heading {

        font-size: var(--font-size-m);
        margin: 35px 0 15px;

    }

    .blog-section-detail-block-heading {
        font-size: 24px;
    }

    .blog-section-sidebar-search-form {
        flex-direction: column;
    }




    /*---------------- About Us Page Section ----------------*/

    .about-us-page-container {

        padding: 20px;
    }

    .about-us-page-container {
        grid-template-columns: 1fr;
    }

    .about-us-page-image-box img {
        height: auto;
        max-height: 300px;
    }


    .about-us-page-description {
        font-size: var(--font-size-s);
        margin-bottom: 0px;
    }

    .client-testimonial-page-container {
        padding: 60px 20px;
    }

    .client-testimonial-page-title {
        font-size: var(--font-size-l);
    }

    .client-testimonial-page-grid {
        grid-template-columns: 1fr;
    }

    .client-testimonial-page-card {
        padding: 32px 22px;
    }

    .client-testimonial-page-stats {
        grid-template-columns: 1fr;
    }

    .client-testimonial-page-bottom-title {
        font-size: var(--font-size-l);
    }

    .client-testimonial-page-description,
    .client-testimonial-page-review,
    .client-testimonial-page-bottom-text {
        font-size: var(--font-size-n);
    }


    .client-testimonial-page-user-img {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-m);
    }





    /*---------------- Gallery Page  ----------------*/


    .my-page-gallery-photo-section {
        padding: 60px 20px;
    }

    .my-page-gallery-photo-grid {
        grid-template-columns: 1fr;
    }

    .my-page-gallery-photo-card {
        height: 240px;
    }

    .my-page-gallery-photo-heading h2 {
        font-size: var(--font-size-l);
    }

    .my-page-gallery-photo-heading p {
        font-size: var(--font-size-n);
    }

    .my-page-gallery-photo-filter-btn {
        padding: 10px 18px;
        font-size: 12px;
    }

    .my-page-gallery-photo-lightbox img {
        max-width: 95%;
    }

    .my-page-gallery-photo-prev {
        left: 15px;
    }

    .my-page-gallery-photo-next {
        right: 15px;
    }



    /* ------------------------------ Service Client Pages------------------------------ */

    .clients-services-pages-container {
        padding: 50px 20px;
    }

    .clients-services-pages-hero-content h1 {
        font-size: var(--font-size-xl);
    }

    .clients-services-pages-images {
        grid-template-columns: 1fr;
    }

    .clients-services-pages-hero .clients-services-pages-container {
        display: block;

    }

    .clients-services-pages-hero-content h2 {
        font-size: var(--font-size-xl);
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .clients-services-pages-hero-content p {
        margin-bottom: 20px;
    }

    .clients-services-pages-hero-image img {
        max-width: 500px;
        height: auto;
    }

    /* GRID */
    .clients-services-pages-grid {
        display: block;
    }

    .clients-services-pages-text {
        width: 100%;
        margin-bottom: 50px;
    }

    .clients-services-pages-text h2 {
        font-size: var(--font-size-l);

    }

    /* IMAGES GRID */
    .clients-services-pages-images {
        width: 100%;

    }


    .clients-services-pages-images img {
        border-radius: var(--border-radius-m);
        box-shadow: var(--shadow);
        object-fit: cover;
        overflow: hidden;
        width: 95%;
        height: 200px;
        margin: 10px;

    }

    /* TEXT */



    .clients-services-pages-block h3 {
        font-size: var(--font-size-lm);
        color: var(--tertiary-color);
    }

    .clients-services-pages-block p {
        font-size: var(--font-size-n);
        color: var(--text-color);
        line-height: 24px;
    }



    /* Other Pages  */

    .clients-services-pages-text-other h2 {
        font-size: var(--font-size-l);

    }

    .clients-services-pages-images-others {
        grid-template-columns: repeat(2, 1fr);
    }


    .clients-services-pages-images-others img {
        width: 250px;
        height: 200px;
        margin: 10px;
    }
























    /* ------------------------------ Footer Styling Start------------------------------ */



    .footer-section-01 {

        padding: 80px 20px 10px 20px;
        display: block;
    }


    .footer-section-01 .footer-colum {
        margin-bottom: 20px;

    }

    .footer-section-01 .footer-colum-sapcing {
        padding-left: 0px;
    }



    .footer-section-02-footer {

        padding: 0px 20px;
        display: block;


    }


    .footer-section-02-footer .footer-colum {
        padding-bottom: 20px;

    }



    .footer-section-02 {
        display: block;
        padding: 0px 20px;
        margin: auto;

    }




    .footer-section-02 .footer-colum2-qr {
        width: 100%;
        margin-bottom: 20px;
    }



    .footer-section-02 .footer-colum2-qr a img {
        width: 150px;
        height: auto;
    }



    .footer-section-02 .footer-colum2-text {
        width: 100%;
        height: auto;
        padding-right: 0px;
        margin-bottom: 20px;

    }

    .footer-section-02 .footer-colum2-contact {
        width: 100%;
        margin-bottom: 20px;
        padding: 0;

    }






    .footer-section-03 .inner-03 {
        padding: 10px 20px;
    }

    .footer-section-03 .inner-03 .inner-footer-03 {
        display: block;
        align-items: center;
        justify-content: space-between;

    }


    .footer-section-03 .inner-03 .inner-footer-03 .menu {
        width: 100%;
        padding-bottom: 5px;
        margin-bottom: 7px;
        border-bottom: 1px solid var(--primary-color);

    }


    .footer-section-03 ul {
        display: flex;
    }

    .footer-section-03 ul a {
        font-size: var(--font-size-s);
        color: var(--tertiary-color);
        padding-right: 25px;
    }


    .footer-section-03 .copyright {
        font-size: var(--font-size-s);
        color: var(--tertiary-color);

    }



}


@media (max-width: 480px) {
    .home-course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}