/* ====================== common  start  ====================== */
    /* all container start */
    
    @media only screen and (max-width: 1440px) {
        .container,
        .container-lg,
        .container-md,
        .container-sm,
        .container-xl,
        .container-xxl {
            max-width: 1200px;
        }
    }
    
    @media only screen and (max-width: 1024px) {
        .container,
        .container-lg,
        .container-md,
        .container-sm {
            max-width: 960px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .container,
        .container-md,
        .container-sm {
            max-width: 720px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .container,
        .container-md,
        .container-sm {
            max-width: 380px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .container,
        .container-md,
        .container-sm {
            max-width: 330px;
        }
    }
    
    @media only screen and (max-width: 320px) {
        .container,
        .container-md,
        .container-sm {
            max-width: 300px;
        }
    }
    /* all container end  */
    /* icons start  */
    
    @media only screen and (max-width: 1024px) {
        .social-media-icons li a i {
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: var(--font-size20);
            color: var(--btn-color);
            border-radius: 50%;
            background-color: var(--white);
            box-shadow: 0 0 8px var(--light-gray);
            margin: 6px;
            transition: all linear .3s;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .social-media-icons li a i {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: var(--font-size20);
            color: var(--btn-color);
            border-radius: 50%;
            background-color: var(--white);
            box-shadow: 0 0 8px var(--light-gray);
            margin: 6px;
            transition: all linear .3s;
        }
        .social-icons li a i {
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: var(--font-size14);
            margin-bottom: 4px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .social-media-icons li a i {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: var(--font-size18);
            margin-bottom: 4px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .social-media-icons li a i {
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: var(--font-size14);
            margin-bottom: 4px;
        }
    }
    /* icons end  */
    /* common button start  */
    
    @media only screen and (max-width: 1024px) {
        .common-btn a {
            display: inline-block;
            background: var(--btn-color);
            font-family: var(--font-family-inter);
            font-size: var(--font-size14);
            font-weight: var(--font-semi-bold);
            color: var(--white);
            line-height: 30px;
            border-radius: 4px;
            padding: 2px 11px;
            text-align: center;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .common-btn a {
            font-size: var(--font-size10);
            padding: 0 6px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .common-btn a {
            font-size: var(--font-size10);
            padding: 0 9px;
        }
    }
    /* common button end  */
    /* header start  */
    
    @media only screen and (max-width: 1024px) {
        .heading,
        .heading-2 {
            margin: 40px 0;
        }
        .heading h2 {
            font-size: var(--font-size45);
        }
        .heading h2 span {
            font-size: var(--font-size45);
        }
        .heading-2 h2 {
            font-size: var(--font-size32);
        }
        .heading p,
        .heading-2 p {
            font-size: var(--font-size14);
        }
    }
    
    @media only screen and (max-width: 768px) {
        .heading,
        .heading-2 {
            margin: 30px 0;
        }
        .heading h2 {
            font-size: var(--font-size30);
        }
        .heading h2 span {
            font-size: var(--font-size30);
        }
        .heading p,
        .heading-2 p {
            font-size: var(--font-size12);
            line-height: 20px;
            margin-top: 0px;
        }
        .heading-2 h2 {
            font-size: var(--font-size26);
        }
    }
    
    @media only screen and (max-width: 425px) {
        .heading-2 {
            margin-bottom: 17px;
        }
        .heading h2 {
            font-size: var(--font-size24);
        }
        .heading h2 span {
            font-size: var(--font-size24);
        }
        .heading-2 h2 {
            font-size: var(--font-size14);
            line-height: 31px;
        }
        .heading-2 h2::before {
            bottom: 0px;
            height: 2px;
            width: 60px;
        }
        .heading p,
        .heading-2 p {
            font-size: var(--font-size10);
            line-height: 18px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .heading h2 {
            font-size: var(--font-size20);
        }
        .heading h2 span {
            font-size: var(--font-size20);
        }
        .heading,
        .heading-2 {
            margin: 30px 0;
        }
    }
    /* header end  */
    /* slide start  */
    
    @media only screen and (max-width: 1024px) {
        .slick-slide {
            margin: 6px;
        }
        .slick-next:before {
            width: 30px;
            height: 30px;
            padding: 6px 10px;
            right: -9px;
        }
        .slick-prev:before {
            width: 30px;
            height: 30px;
            left: -3px;
            padding: 6px 10px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .slick-next:before {
            width: 25px;
            height: 25px;
            padding: 4px 7px;
            right: 3px;
        }
        .slick-prev:before {
            width: 25px;
            height: 25px;
            left: 4px;
            padding: 3px 7px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .slick-slide {
            margin: 6px;
        }
        .slide-wrapper {
            padding: 0 17px;
        }
        .slick-next:before {
            width: 20px;
            height: 20px;
            padding: 0px 6px;
            right: 0px;
            bottom: 0;
        }
        .slick-prev:before {
            width: 20px;
            height: 20px;
            padding: 0px 6px;
            left: 6px;
            bottom: 0;
        }
    }
    /* slide  end  */
    /* ====================== common  end  ====================== */
    /* ====================== header start  ====================== */
    
    @media only screen and (max-width: 1024px) {}
    
    @media only screen and (max-width: 768px) {
        .header-area .navber ul {
            padding: 0;
        }
        .header-area .navber ul li a {
            font-size: var(--font-size10);
            margin-right: 15px;
        }
        .header-area .header-right .account a {
            font-size: var(--font-size10);
            margin-right: 12px;
        }
        .header-area .header-right a i {
            font-size: var(--font-size10);
            margin-left: 2px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .header-area {
            height: 55px;
        }
        .header-area .header-wrapper {
            line-height: 55px;
            /* align-items: center; */
        }
        .header-area .logo {
            width: 100px;
            /* background: red; */
            height: 30px;
            /* padding-bottom: 10px; */
        }
        .header-area .logo a img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding-right: 0;
        }
        /* side-menu start  */
        .header-area .navber {
            width: 100%;
            height: 100vh;
            display: none;
            background: var(--gray);
            text-align: center;
            position: absolute;
            left: 0;
            top: 50px;
        }
        .header-area .navber ul {
            display: block;
            padding-left: 30px;
        }
        header .navber ul li {
            line-height: 40px;
        }
        .header-area .navber ul li a {
            font-size: var(--font-size14);
            color: var(--white);
        }
        /* side-menu end  */
        /* checked start  */
        .header-area label {
            display: initial;
            margin-right: 0;
        }
        #menu-bar {
            display: none;
        }
        #menu-bar:checked~.navber {
            display: initial;
        }
        header .navber {
            width: 50%;
        }
        .header-area label {
            display: initial;
        }
        .header-area label i {
            font-size: var(--font-size20);
        }
        #menu-bar {
            display: none;
        }
        #menu-bar:checked~.navber {
            display: initial;
        }
        /* checked end  */
        .header-area .header-right .booking-btn a {
            font-size: var(--font-size8);
            padding: 0 6px;
            /* line-height: 25px; */
        }
        .header-area .header-right a i {
            margin-left: 0;
        }
    }
    
    @media only screen and (max-width: 320px) {}
    /* ====================== header end  ====================== */
    /* ==============about misson start ============= */
    
    @media only screen and (max-width: 1024px) {
        .paytolearn-mission-content p {
            font-size: var(--font-size18);
            line-height: 34px;
        }
        .paytolearn-mission-content ul li {
            font-size: var(--font-size14);
            line-height: 24px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .paytolearn-mission-content p {
            font-size: var(--font-size14);
            line-height: 28px;
        }
        .paytolearn-mission-content p {
            font-size: var(--font-size14);
            line-height: 28px;
        }
    }
    /* ==============about misson end ============= */
    /* ==============what you end ============= */
    
    @media only screen and (max-width: 1024px) {
        .what-you ul li i {
            font-size: 13px;
            line-height: 30px;
            width: 30px;
            height: 30px;
        }
        .what-you ul li {
            display: flex;
            padding: 0;
        }
        .what-you ul li p {
            font-size: var(--font-size18);
            line-height: 45px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .what-you ul li i {
            font-size: 9px;
            line-height: 20px;
            width: 20px;
            height: 20px;
        }
        .what-you ul li p {
            font-size: var(--font-size16);
            line-height: 41px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .what-you ul li p {
            font-size: var(--font-size10);
            line-height: 23px;
        }
        .what-you ul li p i {
            font-size: 8px;
            width: 20px;
            height: 20px;
            line-height: 20px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .course-details-area .what-you ul li p {
            font-size: var(--font-size10);
            line-height: 24px;
        }
    }
    /* ==============what you end ============= */
    /* ==============instuctor  start ============= */
    
    @media only screen and (max-width: 425px) {
        .instructor .instructor-details {
            padding: 35px 30px;
        }
        .instructor .instructor-img {
            width: 80px;
            height: 80px;
            margin-right: 0;
            margin: 16px;
        }
        .instructor .instructor-details a {
            font-size: var(--font-size20);
        }
        .instructor .instructor-details p {
            font-size: var(--font-size12);
            line-height: 23px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .instructor .instructor-details {
            padding: 27px 10px;
        }
        .instructor .instructor-details a {
            font-size: var(--font-size18);
        }
        .instructor .instructor-img {
            width: 60px;
            height: 60px;
            margin-right: 0;
            margin: 15px;
        }
        .instructor .instructor-details {
            padding: 20px 10px;
        }
        .instructor .instructor-details p {
            font-size: var(--font-size10);
            line-height: 23px;
        }
    }
    /* ==============instuctor  start ============= */
    /* ==============constructor start ============= */
    
    @media only screen and (max-width: 1440px) {
        .course-consectetur h5 {
            font-size: var(--font-size26);
            line-height: 45px;
        }
    }
    
    @media only screen and (max-width: 1024px) {
        .course-consectetur p {
            font-size: var(--font-size18);
            line-height: 27px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .course-consectetur h5 {
            font-size: var(--font-size24);
            line-height: 41px;
        }
        .course-consectetur p {
            font-size: var(--font-size14);
            line-height: 24px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .course-consectetur h5 {
            font-size: var(--font-size18);
            line-height: 38px;
        }
        .course-consectetur p {
            font-size: var(--font-size12);
            line-height: 19px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .course-consectetur h5 {
            font-size: var(--font-size18);
            line-height: 26px;
        }
    }
    /* ==============constructor end ============= */
    /* ========== pdf start ==========*/
    
    @media only screen and (max-width: 768px) {
        /* read a title start */
        .buy-now-cart2 {
            width: 85%;
        }
        .buy-now-cart2 .buy-icon2 i {
            font-size: 30px;
            width: 40px;
            height: 40px;
            line-height: 40px;
        }
        .buy-now-cart2 .buy-now-datails2 {
            padding: 33px;
        }
        /* read a title end */
    }
    
    @media only screen and (max-width: 425px) {
        /* read a title start */
        .buy-now-cart2 {
            width: 90%;
        }
        .buy-now-cart2 .buy-icon2 i {
            font-size: 20px;
            width: 28px;
            height: 28px;
            line-height: 28px;
        }
        .buy-now-cart2 .buy-now-datails2 {
            padding: 22px;
        }
        /* read a title end */
    }
    /* ==========pdf end ==========*/
    /* ======================== populer category start  ======================== */
    
    @media only screen and (max-width: 1024px) {
        .populer-categories-area .populer-categories-wrapper .populer-card {
            padding: 25px 52px;
            border-radius: 4px;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card .icon-img {
            width: 100px;
            height: 100px;
            line-height: 100px;
            margin: auto;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card .icon-img img {
            padding: 20px;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card .populer-content {
            margin: 30px 0;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card .populer-content p {
            font-size: var(--font-size18);
        }
    }
    
    @media only screen and (max-width: 768px) {
        .populer-categories-area {
            margin-top: 50px;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card {
            padding: 15px 20px;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card .icon-img {
            width: 80px;
            height: 80px;
            line-height: 80px;
            margin: auto;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card .populer-content {
            margin: 20px 0;
        }
        .populer-categories-area .populer-categories-wrapper .populer-card .populer-content p {
            font-size: var(--font-size14);
            line-height: 22px;
        }
    }
    /* ======================= populer category end  ======================= */
    /* ===================== most populer course start  ==================== */
    
    @media only screen and (max-width: 1024px) {
        .populer-course-card .populer-card-img {
            height: 150px;
        }
        .populer-course-card .populer-start .star ul li i {
            font-size: var(--font-size14);
            margin-right: 0px;
        }
        .populer-course-card .populer-start .count span {
            font-size: var(--font-size14);
        }
        .populer-course-card .populer-content p a {
            font-size: var(--font-size16);
            margin: 5px 0;
        }
        .populer-course-card .parsese .buy-btn a {
            font-size: var(--font-size14);
        }
        .populer-course-card .parsese .dolars {
            font-size: var(--font-size14);
            line-height: 36px;
        }
        .populer-course-card .populer-post-name {
            margin-top: 15px;
        }
        .populer-course-card .populer-post-name .img {
            width: 50px;
            height: 50px;
        }
        .populer-course-card .populer-post-name .populer-content h4 {
            font-size: var(--font-size16);
        }
        .populer-course-card .populer-post-name .populer-content p {
            font-size: var(--font-size16);
        }
    }
    
    @media only screen and (max-width: 768px) {
        .populer-course-area {
            margin-top: 50px;
        }
        .populer-course-card {
            padding: 10px;
        }
        .populer-course-card .populer-card-img {
            height: 150px;
        }
        .populer-course-card .populer-start {
            margin-top: 8px;
        }
        .populer-course-card .populer-start .star ul li i {
            font-size: var(--font-size12);
        }
        .populer-course-card .populer-start .count span {
            font-size: var(--font-size12);
        }
        .populer-course-card .populer-content p a {
            font-size: var(--font-size14);
        }
        .populer-course-card .parsese .dolars {
            font-size: var(--font-size12);
            line-height: 36px;
        }
        .populer-course-card .populer-post-name {
            margin-top: 5px;
        }
        .populer-course-card .populer-post-name .img {
            width: 40px;
            height: 40px;
        }
        .populer-course-card .populer-post-name .populer-content h4 {
            font-size: var(--font-size12);
        }
        .populer-course-card .populer-post-name .populer-content p {
            font-size: var(--font-size12);
            line-height: 15px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .populer-course-card .populer-card-img {
            height: 230px;
        }
        .populer-course-card {
            padding: 25px;
        }
        .populer-course-card .populer-post-name {
            margin-top: 11px;
        }
        .populer-course-card .populer-content p a {
            line-height: 27px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .populer-course-card {
            padding: 20px;
        }
        .populer-course-card .populer-card-img {
            height: 180px;
        }
        .populer-course-card .populer-content p a {
            font-size: var(--font-size12);
        }
    }
    /* ======================== most populer  end  ======================== */
    /* =================== best instructor start  ===================== */
    
    @media only screen and (max-width: 1024px) {
        .best-instuctor-area .best-instuctor-card .instuctor-img {
            height: 190px;
        }
        .best-instuctor-area .best-instuctor-card .instuctor-content span {
            font-family: var(--font-family-Montserrat);
            font-weight: var(--font-bold);
            font-size: var(--font-size20);
            line-height: 31px;
        }
        .best-instuctor-area .best-instuctor-card .instuctor-content p {
            font-family: var(--font-family-Montserrat);
            font-weight: var(--font-semi-bold);
            font-size: var(--font-size16);
            line-height: 27px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .best-instuctor-area {
            margin-top: 50px;
        }
        .best-instuctor-area .best-instuctor-card .instuctor-img {
            height: 180px;
        }
        .best-instuctor-area .best-instuctor-card {
            padding: 10px;
        }
        .best-instuctor-area .best-instuctor-card .instuctor-content {
            margin: 5px 0;
        }
        .best-instuctor-area .best-instuctor-card .instuctor-content span {
            font-size: var(--font-size16);
            line-height: 37px;
        }
        .best-instuctor-area .best-instuctor-card .instuctor-content p {
            font-size: var(--font-size12);
            line-height: 21px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .best-instuctor-area .best-instuctor-card .instuctor-img {
            height: 250px;
        }
        .best-instuctor-area .best-instuctor-card {
            padding: 30px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .best-instuctor-area .best-instuctor-card .instuctor-img {
            height: 204px;
        }
        .best-instuctor-area .best-instuctor-card {
            padding: 15px;
        }
    }
    /* =================== best instructor end  ===================== */
    /* =================== student feedback end  ===================== */
    
    @media only screen and (max-width: 1024px) {
        .student-feedback-area .student-feedback-card {
            padding: 20px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-card-wrapper .student-feedback-img {
            width: 50px;
            height: 50px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-card-wrapper .student-feedback-wrapper-content h4 {
            font-size: var(--font-size18);
            line-height: 30px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-card-wrapper .student-feedback-wrapper-content p {
            font-size: var(--font-size10);
            line-height: 15px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-content p {
            font-size: var(--font-size14);
            line-height: 28px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .student-feedback-area .student-feedback-card {
            padding: 23px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-card-wrapper .student-feedback-img {
            width: 40px;
            height: 40px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-card-wrapper .student-feedback-wrapper-content h4 {
            font-size: var(--font-size14);
            line-height: 25px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-card-wrapper .student-feedback-wrapper-content p {
            font-size: var(--font-size8);
            line-height: 12px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-content {
            margin-top: 15px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-content p {
            font-size: var(--font-size12);
            line-height: 25px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .student-feedback-area .student-feedback-card {
            padding: 70px 25px;
        }
        .student-feedback-area .student-feedback-card .student-feedback-content p {
            font-size: var(--font-size12);
            line-height: 23px;
        }
    }
    /* =================== student feedback end  ===================== */
    /* ======================= recent-news start  ========================= */
    
    @media only screen and (max-width: 1024px) {
        .recent-news-area {
            margin-top: 100px;
        }
        .recent-news-area .recent-news-card .instuctor-img {
            height: 150px;
        }
        .recent-news-area .recent-news-card {
            padding: 15px;
        }
        .recent-news-area .recent-news-card .instuctor-content span {
            font-size: var(--font-size20);
            line-height: 24px;
        }
        .recent-news-area .recent-news-card .instuctor-content p {
            font-size: var(--font-size14);
            line-height: 24px;
            margin: 10px 0;
        }
        .recent-news-area .recent-news-card .recent-news-btn {
            padding: 14px 24px;
            margin-top: 14px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .recent-news-area .recent-news-card .instuctor-img {
            height: 150px;
        }
        .recent-news-area .recent-news-card {
            padding: 10px;
        }
        .recent-news-area .recent-news-card .instuctor-content {
            text-align: start;
            margin-top: 5px;
        }
        .recent-news-area .recent-news-card .instuctor-content span {
            font-size: var(--font-size16);
            line-height: 14px;
        }
        .recent-news-area .recent-news-card .instuctor-content p {
            font-size: var(--font-size12);
            line-height: 24px;
            margin: 9px 0;
        }
        .recent-news-area .recent-news-card .recent-news-btn {
            padding: 6px 22px;
            margin-top: 5px;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .recent-news-area .recent-news-card .instuctor-img {
            height: 230px;
        }
        .recent-news-area .recent-news-card .instuctor-content {
            text-align: start;
            margin-top: 12px;
        }
        .recent-news-area .recent-news-card .recent-news-btn {
            padding: 20px 22px;
            margin-top: 17px;
        }
        .recent-news-area .recent-news-card {
            padding: 20px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .recent-news-area .recent-news-card {
            padding: 15px;
        }
        .recent-news-area .recent-news-card .instuctor-img {
            height: 200px;
        }
        .recent-news-area .recent-news-card .instuctor-content span {
            font-size: var(--font-size14);
        }
    }
    /* ======================= recent-news end  ========================= */
    /* ======================= join world start  ========================= */
    
    @media only screen and (max-width: 1024px) {
        .join-world-area .join-world .join-world-img {
            height: 450px;
        }
        .join-world-area .join-world-wrapper {
            padding: 0 20px;
        }
        .join-world-area .join-world-heading {
            margin: 24px 0;
        }
        .join-world-area .join-world-content span {
            font-size: var(--font-size20);
            line-height: 64px;
        }
        .join-world-area .join-world-content p {
            font-size: var(--font-size16);
            line-height: 22px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .join-world-area {
            margin-top: 50px;
        }
        .join-world-area .join-world .join-world-img {
            height: 320px;
        }
        .join-world-area .join-world-heading h2 {
            font-size: var(--font-size30);
            line-height: 40px;
        }
        .join-world-area .join-world-heading span {
            font-size: var(--font-size30);
        }
        .join-world-area .join-world-content span {
            font-size: var(--font-size18);
            line-height: 35px;
        }
        .join-world-area .join-world-content p {
            font-size: var(--font-size12);
            line-height: 17px;
        }
        .join-world-area .join-world-btn a {
            margin: 20px 0;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .blog-details-area {
            margin-top: 70px;
        }
        .blog-details-heading h2 {
            font-size: var(--font-size14);
            line-height: 24px;
        }
        .join-world-area .join-world-content span {
            font-size: var(--font-size12);
            line-height: 30px;
        }
        .join-world-area .join-world-blog .join-world-img {
            height: 250px;
            border-radius: 70px;
        }
        .join-world-area .join-world-content p {
            font-size: var(--font-size10);
            line-height: 17px;
        }
        .join-world-area .join-world-blog {
            padding: 0;
        }
        .join-world-area .join-world-blog .join-world-right {
            padding: 20px 10px;
        }
        .join-world-area .join-world-heading span {
            font-size: var(--font-size20);
        }
        .join-world-area .join-world-heading h2 {
            font-size: var(--font-size20);
            line-height: 31px;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .join-world-area .join-world-blog .join-world-img {
            height: 200px;
            border-radius: 70px;
        }
        .join-world-area .join-world-blog .join-world-heading p {
            font-size: var(--font-size12);
            margin-top: 10px;
        }
        .join-world-area .join-world-heading span {
            font-size: var(--font-size18);
        }
        .join-world-area .join-world-heading h2 {
            font-size: var(--font-size18);
            line-height: 31px;
        }
    }
    /* ======================= join world end  ========================= */
    /* ====================== footer section end  ====================== */
    
    @media only screen and (max-width: 1024px) {
        .footer-area .footer-counting .review-icon {
            width: 200px;
        }
        .footer-area .footer-counting {
            position: absolute;
            top: -71px;
            left: 44px;
        }
        .footer-area .footer-content .footer-widget .footer-app img {
            width: 90px;
            height: 30px;
            margin-right: 10px;
        }
        .footer-area .footer-content .footer-widget .footer-wedget-headling h3 {
            font-size: var(--font-size20);
            margin: 16px 0;
        }
        .footer-area .social-icons li a i {
            margin: 0px;
        }
        .footer-area .footer-content .footer-widget ul {
            padding: 0;
            margin: 10px 0;
        }
        .footer-area .footer-content .footer-widget ul li {
            margin-bottom: 7px;
        }
        .footer-area .footer-btn {
            margin-top: 15px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        .footer-area .footer-counting .review-icon {
            width: 158px;
        }
        .footer-area .footer-counting {
            position: absolute;
            top: -32px;
            left: 22px;
        }
        .footer-area .footer-content {
            padding-top: 5%;
        }
        .footer-area .footer-content .footer-widget .footer-wedget-headling h3 {
            font-size: var(--font-size16);
            margin: 15px 0;
        }
        .footer-area .footer-content .footer-widget .footer-app img {
            width: 65px;
            height: 24px;
            margin-right: 6px;
        }
        .footer-area .footer-content .footer-widget .footer-text p {
            font-size: var(--font-size10);
            line-height: 20px;
        }
        .footer-area .footer-content .footer-widget ul li {
            margin-bottom: 2px;
        }
        .footer-area .footer-content .footer-widget ul li a {
            font-size: var(--font-size10);
        }
        .footer-area .footer-content .footer-widget ul {
            padding: 0;
            margin: 5px 0;
        }
        .footer-area .subscribe input {
            height: 45px;
            padding: 0 5px;
        }
        .footer-area .subscribe input::placeholder {
            font-size: var(--font-size10);
        }
        .footer-area .footer-btn {
            margin-top: 10px;
        }
        .footer-area .footer-content {
            padding-top: 10%;
        }
    }
    
    @media only screen and (max-width: 425px) {
        .footer-area .footer-content {
            padding-top: 5%;
            text-align: center;
        }
        ul.footer-icons.social-icons.d-flex {
            justify-content: center;
        }
        .footer-area .footer-content .footer-widget .footer-app {
            justify-content: center;
        }
        .footer-area .footer-content .footer-widget .footer-text p {
            font-size: var(--font-size12);
            line-height: 25px;
        }
        .footer-area .subscribe input {
            padding: 0px 15px;
        }
        .footer-area .footer-content .footer-widget ul li {
            margin-bottom: 2px;
            display: inline-flex;
        }
        /* footer counting  */
        .footer-area .footer-counting {
            position: absolute;
            top: -23px;
            left: 22px;
        }
        .footer-area .footer-counting .review-icon {
            width: 83px;
            padding: 6px;
            margin-right: 8px;
            border-radius: 6px;
        }
        .footer-area .review-icon .icon i {
            color: var(--white);
            background-color: var(--btn-color);
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: var(--font-size8);
            margin: 0;
            margin-right: 5px;
        }
        .footer-area .review-count h2 {
            font-size: var(--font-size12);
            line-height: 8px;
        }
        .footer-area .review-count p {
            font-size: var(--font-size8);
        }
        .footer-area .review-count h2 {
            font-size: var(--font-size8);
        }
        .footer-area .review-count p {
            font-size: var(--font-size8);
            margin: 4px 0;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .footer-area .footer-counting .review-icon {
            width: 71px;
            padding: 6px;
            margin-right: 8px;
            border-radius: 6px;
        }
        .footer-area .review-icon .icon i {
            width: 15px;
            height: 15px;
            line-height: 15px;
            font-size: var(--font-size7);
            margin-right: 3px;
        }
        .footer-area .review-count h2 {
            font-size: var(--font-size7);
        }
        .footer-area .review-count p {
            font-size: var(--font-size7);
            margin: 2px 0;
        }
    }
    
    @media only screen and (max-width: 320px) {
        .footer-area .footer-counting .review-icon {
            width: 64px;
            padding: 6px;
            margin-right: 8px;
            border-radius: 6px;
        }
    }
    /* ====================== footer section end  ====================== */
    /* ====================== copyright section start  ====================== */
    
    @media only screen and (max-width: 768px) {
        .copyright-area .copyright-text p {
            font-size: var(--font-size12);
        }
    }
    /* ====================== copyright section end  ====================== */
    /* ====================== login pages section start  ====================== */
    /* ============ common form start ============ */
    
    @media only screen and (max-width: 1024px) {
        .create-account-area .create-account-content .watch-link ul li i {
            font-size: var(--font-size10);
            line-height: 20px;
            width: 20px;
            height: 20px;
        }
    }
    
    @media only screen and (max-width: 768px) {
        form .form-input label {
            font-size: var(--font-size18);
            line-height: 40px;
        }
        form .form-input input {
            font-size: var(--font-size14);
            padding: 14px 15px;
            margin-bottom: 14px;
        }
        form .form-input input::placeholder,
        form .form-input textarea::placeholder {
            font-size: var(--font-size14);
        }
        form .form-input .check i {
            width: 15px;
            height: 15px;
            line-height: 15px;
            font-size: var(--font-size8);
        }
        .submit-img {
            width: 100%;
            height: 500px;
        }
        .create-account-area {
            margin: 30px 0;
        }
        .create-account-area .create-account-content h3 {
            font-size: var( --font-size24);
            line-height: 35px;
        }
        .create-account-area .create-account-content .watch-link ul li {
            padding: 15px 10px;
        }
        .create-account-area .create-account-content .watch-link ul li i {
            font-size: var(--font-size8);
            line-height: 15px;
            width: 15px;
            height: 15px;
        }
        .create-account-area .create-account-content .watch-link ul li p {
            font-size: var(--font-size16);
        }
    }
    
    @media only screen and (max-width: 425px) {
        form .form-input label {
            font-size: var(--font-size14);
            line-height: 30px;
        }
        form .form-input input {
            font-size: var(--font-size12);
            padding: 10px 12px;
            margin-bottom: 10px;
        }
        form .form-input input::placeholder,
        form .form-input textarea::placeholder {
            font-size: var(--font-size12);
        }
        .submit-img {
            height: 350px;
        }
    }
    /* ============ common form end ============ */
    /* ====================== login pages section end  ====================== */