/* ================================= navbar media css ================================= */
@media only screen and (max-width: 30rem) {
    nav {
        width: 100%;

    }

    .navBar {
        width: 90%;
        min-height: 60px;
    }

    .logo {
        width: 45px;
    }

    .mobBW {
        background: linear-gradient(to bottom, #ffffff, transparent);
    }

    footer {
        text-align: center;
    }

    .footerLogo {
        width: 100px !important;
        margin: auto;
    }

    .footerP {
        text-align: center;
    }

    .mobBlock {
        display: block !important;
    }
    .imgWH img {
        width: 100%;
    }

    /* .navMenu {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #efefef;
        height: 100vh;
        width: 100%;
        top: 60px;
        right: -100%;
        transition: 0.5s;

    }

    .navMenu li {
        text-align: center;
        margin-bottom: 4rem;
    } */
    .navMenu li {
        margin: unset;
    }

    .dis-none {
        display: none;
    }

    .dis-none-inhr {
        display: inherit;
        border: 0.5px solid rgba(0, 0, 0, 0.56);
        border-radius: 20px;
        text-decoration: none;
    }

    .media-screen p {
        font-size: 14px;
        padding: 7px 80px;
        margin-top: 0px;
        color: #000;
    }

    .menu-search-btn {
        display: flex;
        align-items: center;
    }

    .menu-search-btn .search-btn {
        width: 20px;
        margin-right: 2rem;
    }

    .menu-search-btn .search-btn img {
        width: 100%;
        height: 100%;
    }

    #checkbtn img {
        width: 30px;
        height: 30px;
    }

    #check:checked~ul {
        right: 0px;
    }

    .active-navStyle::before {
        top: 2px;
    }

    #checkbtn {
        display: block;
    }
}

@media only screen and (max-width:50rem) and (min-width:30rem) {
    nav {
        width: 100%;

    }

    .navBar {
        width: 90%;
        min-height: 70px;
    }

    .logo {
        width: 60px;
    }

    .navMenu {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #efefef;
        height: 100vh;
        width: 100%;
        top: 70px;
        right: -100%;
        transition: 0.5s;

    }

    .navMenu li {
        text-align: center;
        margin-bottom: 4rem;
    }

    .dis-none {
        display: none;
    }

    .dis-none-inhr {
        display: inherit;
        border: 0.5px solid rgba(0, 0, 0, 0.56);
        border-radius: 20px;
        text-decoration: none;
    }

    .media-screen p {
        font-size: 16px;
        padding: 8px 100px;
        margin-top: 0px;
        color: #000;
    }

    .menu-search-btn {
        display: flex;
        align-items: center;
    }

    .menu-search-btn .search-btn {
        width: 25px;
        margin-right: 2rem;
    }

    .menu-search-btn .search-btn img {
        width: 100%;
        height: 100%;
    }

    #checkbtn img {
        width: 35px;
        height: 35px;
    }

    #check:checked~ul {
        right: 0px;
    }

    #checkbtn {
        display: block;
    }
}

@media only screen and (max-width:75rem) and (min-width:50rem) {
    nav {
        width: 100%;

    }

    .navBar {
        width: 90%;
        min-height: 70px;
    }

    .logo {
        width: 70px;
    }

    #checkbtn {
        display: block;
    }
}

/* ================================ navbar media css end ================================== */


/* ============================================ index media css starts here ============================= */

@media only screen and (max-width:30rem) {

    h2,
    p {
        margin-top: 5px
    }

    .news h1,
    .svideo h1,
    .ttrending h1 {
        color: var(--secondary-clr)
    }

    .banner {
        margin-top: 80px;
        width: 100%;
    }

    .banner .banner-img {
        width: 100%;
        height: 180px
    }

    .m-Block {
        display: block
    }

    .m-w90 {
        width: 90%
    }

    .m-mTop60 {
        margin-top: 60px
    }

    .video-box-grid {
        display: flex;
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        margin-top: 12px;
    }

    .video-box-grid::-webkit-scrollbar {
        display: none
    }

    .video-box-grid-2 {
        display: flex
    }

    .video-box-img {
        width: 250px;
        height: 160px
    }

    .video-box-para h3 {
        font-size: 14px
    }

    .video-box-para p {
        font-size: 12px
    }

    .video-box-para {
        position: absolute;
        width: 100%;
        padding: 1rem;
        color: #fff;
        /* background-image: linear-gradient(to left bottom, rgba(0, 0, 0, .724), rgba(0, 0, 0, .366)) */
    }

    .video-box-para span {
        font-size: 14px;
        opacity: .7;
        display: block
    }

    .news h1,
    .svideo h1,
    .ttrending h1,
    p {
        font-size: 16px
    }

    .container {
        width: 95%;
        margin: 2rem auto auto
    }

    .card1,
    .card2,
    .card3 {
        width: 18rem;
        height: 100%;
    }

    .card-2-img,
    .card-3-img,
    .card-img {
        width: 100%;
        height: 140px
    }

    .card-2-img img,
    .card-3-img img,
    .card-img img {
        width: 100%;
        height: 100%;
        border-radius: 3px
    }

    h2 {
        font-size: 18px
    }

    .date {
        font-size: 14px;
        margin-top: 10px
    }

    .slider-icon {
        display: none
    }

    .video-container {
        width: 90%;
        margin: auto
    }

    .bcolor {
        background: #51c2ff52;
        height: auto;
        margin-top: 3rem;
        border: .5px solid #51c2ff52;
        padding: 35px 0
    }

    ._Card {
        width: 100%;
        height: 100%;
        margin-bottom: 1rem;
    }

    .mobMT5Auto {
        margin: 5rem auto 0;
    }
}

@media only screen and (max-width:50rem) and (min-width:30rem) {

    .news h1,
    .svideo h1,
    .ttrending h1 {
        color: var(--secondary-clr);
        font-size: 18px
    }

    .news h1,
    .slider-icon i,
    h2 {
        font-size: 18px
    }

    .m-Block {
        display: block
    }

    .container,
    .m-w90 {
        width: 90%
    }

    .video,
    .w100 {
        width: 100%
    }

    .m-mTop70 {
        margin-top: 70px
    }

    .m-mBottom10 {
        margin-bottom: 10px
    }

    .video {
        height: 100%
    }

    .video-para {
        margin-left: 20px;
        margin-bottom: 60px
    }

    .card1,
    .card2,
    .card3 {
        width: 250px
    }

    .card-2-img,
    .card-3-img,
    .card-img {
        width: 100%;
        height: 200px
    }

    .card-2-img img,
    .card-3-img img,
    .card-img img {
        width: 100%;
        height: 100%;
        border-radius: 3px
    }

    p {
        font-size: 16px
    }

    .date {
        font-size: 14px
    }

    .slider-icon i {
        height: 40px;
        width: 40px;
        line-height: 40px;
        top: 35%
    }

    .scroll {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative
    }

    .slider-icon1 i {
        left: -10px
    }

    .slider-icon2 i {
        right: -10px
    }

    .video-container {
        width: 90%;
        margin: auto
    }

    .bcolor {
        margin-top: 5rem;
        padding: 50px 0
    }

}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    .m-Block {
        display: block
    }

    .m-w90 {
        width: 90%
    }

    .m-mTop70 {
        margin-top: 74px
    }

    .m-mBottom10 {
        margin-bottom: 10px
    }

    .video,
    .w100 {
        width: 100%
    }

    .container {
        width: 90%;
        margin-top: 3rem
    }

    .card1,
    .card2,
    .card3 {
        width: 250px
    }

    .card-2-img,
    .card-3-img,
    .card-img {
        width: 100%;
        height: 200px
    }

    .card-2-img img,
    .card-3-img img,
    .card-img img {
        width: 100%;
        height: 100%;
        border-radius: 3px
    }

    .video-para {
        margin-left: 20px;
        margin-bottom: 60px
    }

    .slider-icon i {
        height: 40px;
        width: 40px;
        line-height: 40px;
        font-size: 18px;
        top: 35%
    }

    .scroll {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative
    }

    .slider-icon1 i {
        left: -10px
    }

    .slider-icon2 i {
        right: -10px
    }

    .video-container {
        width: 90%;
        margin: auto
    }

    .bcolor {
        margin-top: 5rem;
        padding: 50px 0
    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    .m-w90 {
        width: 90%
    }

    .m-mTop70 {
        margin-top: 74px
    }

    .w100 {
        width: 100%
    }

    .video-box-para {
        bottom: 0;
        left: 0
    }

    .video-box-para h3 {
        font-size: 16px
    }

    .video-box-para p {
        font-size: 14px;
        margin-top: 3px
    }

    .container {
        width: 90%;
        margin-top: 3rem
    }

    .card1,
    .card2,
    .card3 {
        width: 250px
    }

    .card-2-img,
    .card-3-img,
    .card-img {
        width: 100%;
        height: 200px
    }

    .card-2-img img,
    .card-3-img img,
    .card-img img {
        width: 100%;
        height: 100%;
        border-radius: 3px
    }

    .video-para {
        margin-left: 20px;
        margin-bottom: 60px
    }

    .slider-icon i {
        height: 40px;
        width: 40px;
        line-height: 40px;
        font-size: 18px;
        top: 35%
    }

    .scroll {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative
    }

    .slider-icon1 i {
        left: -10px
    }

    .slider-icon2 i {
        right: -10px
    }

    .video-container {
        width: 90%;
        margin: auto
    }

    .bcolor {
        margin-top: 5rem;
        padding: 50px 0
    }
}

@media only screen and (max-width:1600px) and (min-width:1200px) {
    .video-box-para {
        bottom: 5px;
        left: 5px
    }

    .video-box-para h3 {
        font-size: 16px
    }

    .video-box-para p {
        font-size: 14px;
        margin-top: 3px
    }
}

/* ============================================ index media css end here ============================= */

/* ================================== blog media css starts here =========================== */

@media only screen and (max-width:30rem) {
    .snews {
        width: 90%;
        margin: 5rem auto auto
    }

    .blog-grid {
        display: block
    }

    .b-para1,
    .news h1 {
        font-size: 16px
    }

    .blog-card-img {
        height: 160px;
        width: 100%;
        margin-top: 10px
    }

    .blog-card-img img {
        width: 100%;
        height: 100%;
        border-radius: 4px
    }

    h2 {
        margin-top: 8px;
        font-size: 18px
    }

    .b-para2 {
        font-size: 14px
    }
}


@media only screen and (max-width:50rem) and (min-width:30rem) {

    .news h1,
    h2 {
        font-size: 16px
    }

    .snews {
        width: 90%;
        margin: 5rem auto auto
    }

    .blog-grid {
        display: block
    }

    .blog-card {
        margin-bottom: 1rem
    }

    .blog-card-img {
        height: 300px;
        width: 100%;
        margin-top: 10px
    }

    .blog-card-img img {
        width: 100%;
        height: 100%;
        border-radius: 4px
    }

    h2 {
        margin-top: 8px
    }

    .b-para1 {
        font-size: 14px;
        margin: 5px 0
    }

    .b-para2 {
        font-size: 12px
    }
}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    .snews {
        width: 90%;
        margin: 6rem auto auto
    }

    .blog-grid {
        display: grid;
        grid-template-columns: auto auto;
        margin: auto;
        gap: 1rem
    }

    h2 {
        margin-top: 7px;
        font-size: 20px
    }

    .blog-card-img {
        height: 250px;
        width: 100%;
        margin-top: 0
    }

    .linediv {
        background-color: var(--black);
        width: 100%;
        height: 1px;
        margin-top: 5px;
        margin-bottom: 10px;
        opacity: .2
    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    .snews {
        width: 90%;
        margin: 6rem auto auto
    }

    .blog-card-img {
        height: 170px;
        width: 100%;
        margin-top: 0
    }
}

/* ================================== blog media css end here =========================== */


/* ====================================== video media css starts here ==================================== */

@media only screen and (max-width:30rem) {
    .heading h1 {
        font-size: 16px;
        color: var(--secondary-clr);
        margin-bottom: 10px;
    }

    .video-card {
        margin-bottom: 1rem;
    }

    .video-container-grid {
        display: block;
        margin: 10px 0;
    }

    .video-card-info h4 {
        font-size: 18px;
        margin: 8px 0;
    }

    .video-card-info p {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .video-card-info .card-info-date {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .card-image {
        width: 100%;
        height: 200px;
    }

    .card-image img {
        border-radius: 3px;
    }

    .card-play-icon {
        width: 50px;
        height: 50px;
    }

    .card-play-icon img {
        width: 15px;
    }

    /*====== video details page media css here === */
    .video_detail {
        width: 90%;
        margin: 5rem auto auto auto;
        display: block;
    }

    .detail_grid_1 h3 {
        font-size: 16px;
        margin: .8rem 0;
    }

    .profile-img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: .4rem;
    }

    .like-comment-icon img {
        width: 25px;
        height: 25px;
        margin-right: .4rem;
    }

    .profile-icon .icon a img {
        width: 25px;
        height: 25px;
        margin-left: 10px;
    }

    .more_para {
        color: #000 !important;
        font-size: 16px !important;
    }

    .more_btn {
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
    }

    .Up_next_container {
        margin-top: 1rem;
    }

    .Up_next {
        display: flex;
        grid-template-columns: auto;
        align-items: center;
        gap: 1rem;
        overflow: hidden;
        overflow-x: scroll;
        height: auto;
    }

    .Up_next_container h6 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .up_next_card a {
        display: block;
        width: 220px;
    }

    .card_images .image {
        width: 100%;
        height: 12rem;
    }

    .card_images .play_icon {
        width: 50px;
        height: 50px;
    }

    .card_images .play_icon img {
        width: 15px;
    }

    .up-next-card-info h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .up-next-card-info p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .card-info-date {
        font-size: 12px !important;
    }

}

@media only screen and (max-width:50rem) and (min-width:30rem) {
    .video-container {
        width: 90%;
        margin: 5rem auto auto auto;
    }

    .heading h1 {
        font-size: 16px;
        color: var(--secondary-clr);
        margin-bottom: 10px;
    }

    .video-card {
        margin-bottom: 1rem;
    }

    .video-container-grid {
        display: block;
        margin: 10px 0;
    }

    .video-card-info h4 {
        font-size: 16px;
        margin: 8px 0;
    }

    .video-card-info p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .video-card-info .card-info-date {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .card-image {
        width: 100%;
        height: 300px;
    }

    .card-image img {
        border-radius: 3px;
    }

    .card-play-icon {
        width: 50px;
        height: 50px;
    }

    .card-play-icon img {
        width: 15px;
    }

    /*====== video details page media css here === */
    .video_detail {
        width: 90%;
        margin: 5rem auto auto auto;
        display: block;
    }

    .detail_grid_1 h3 {
        font-size: 16px;
        margin: .8rem 0;
    }

    .profile-img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: .4rem;
    }

    .like-comment-icon img {
        width: 25px;
        height: 25px;
        margin-right: .4rem;
    }

    .profile-icon .icon a img {
        width: 25px;
        height: 25px;
        margin-left: 10px;
    }

    .more_para {
        color: #000 !important;
        font-size: 16px !important;
    }

    .more_btn {
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
    }

    .Up_next_container {
        margin-top: 1rem;
    }

    .Up_next {
        display: flex;
        grid-template-columns: auto;
        align-items: center;
        gap: 1rem;
        overflow: hidden;
        overflow-x: scroll;
        height: auto;
    }

    .Up_next_container h6 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .up_next_card a {
        display: block;
        width: 220px;
    }

    .card_images .image {
        width: 100%;
        height: 12rem;
    }

    .card_images .play_icon {
        width: 50px;
        height: 50px;
    }

    .card_images .play_icon img {
        width: 15px;
    }

    .up-next-card-info h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .up-next-card-info p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .card-info-date {
        font-size: 12px !important;
    }

}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    .video-container {
        width: 90%;
        margin: 7rem auto auto auto;
    }

    .video-container-grid {
        display: grid;
        grid-template-columns: auto auto;
    }

    .video-card {
        margin-bottom: 1rem;
    }

    .card-image {
        width: 100%;
        height: 250px;
    }

    .video-card-info h4 {
        font-size: 18px;
        margin: 10px 0;
    }

    .video-card-info p {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .card-info-date {
        font-size: 14px !important;
    }

    /*====== video details page media css here === */
    .video_detail {
        width: 90%;
        margin: 7rem auto auto auto;
        display: block;
    }


    .detail_grid_1 h3 {
        font-size: 16px;
        margin: .8rem 0;
    }

    .profile-img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: .4rem;
    }

    .like-comment-icon img {
        width: 25px;
        height: 25px;
        margin-right: .4rem;
    }

    .profile-icon .icon a img {
        width: 25px;
        height: 25px;
        margin-left: 10px;
    }

    .more_para {
        color: #000 !important;
        font-size: 16px !important;
    }

    .more_btn {
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
    }

    .Up_next_container {
        margin-top: 1rem;
    }

    .Up_next {
        display: flex;
        grid-template-columns: auto;
        align-items: center;
        gap: 1rem;
        overflow: hidden;
        overflow-x: scroll;
        height: auto;
    }

    .Up_next_container h6 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .up_next_card a {
        display: block;
        width: 220px;
    }

    .card_images .image {
        width: 100%;
        height: 12rem;
    }

    .card_images .play_icon {
        width: 50px;
        height: 50px;
    }

    .card_images .play_icon img {
        width: 15px;
    }

    .up-next-card-info h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .up-next-card-info p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .card-info-date {
        font-size: 12px !important;
    }

}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    .video-container {
        width: 90%;
        margin: 7rem auto auto auto;
    }


    .card-image {
        width: 100%;
        height: 12rem;
    }

    .card-play-icon {
        width: 50px;
        height: 50px;
    }

    .card-play-icon img {
        width: 15px;
    }

    /*====== video details page media css here === */
    .video_detail {
        width: 90%;
        grid-template-columns: 1.3fr 1fr;
        gap: 2rem;
    }

    /* .Up_next {
        height: 55rem;
        overflow: hidden;
        overflow-y: scroll;
    } */

    .card_images .image {
        width: 100%;
        height: 12rem;
    }

    .card_images .play_icon {
        width: 50px;
        height: 50px;
    }

    .card_images .play_icon img {
        width: 13px;
    }



}

@media only screen and (max-width:95rem) and (min-width:75rem) {
    .video_detail {
        width: 80%;
        grid-template-columns: 1.3fr 1fr;
        gap: 2rem;
    }

    /* .Up_next {
        height: 55rem;
        overflow: hidden;
        overflow-y: scroll;
    } */

    .card_images .image {
        width: 100%;
        height: 12rem;
    }

    .card_images .play_icon {
        width: 50px;
        height: 50px;
    }

    .card_images .play_icon img {
        width: 13px;
    }
}

/* ====================================== video media css end here ==================================== */


/* =========================== photo media css starts here ========================== */
@media only screen and (max-width: 30rem) {
    .card-content h3 {
        color: var(--secondary-clr);
        font-size: 16px;
    }

    .linediv {
        margin-top: 8px;
    }

    .pagi-card .grid_cards {
        display: block;
        margin-top: 8px;
    }

    .grid_card {
        margin-bottom: 10px;
    }

    .grid_card_img {
        height: 200px;
        width: 100%;
    }

    .grid_card_img img {
        border-radius: 3px;
    }

    .grid_cards h4 {
        font-size: 18px;
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .grid_cards p {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .grid_cards span {
        font-size: 14px;
    }

    /* ======================================== modal css starts here ============================== */
    .modal-content {
        width: 90%;
        margin: auto;
    }

    .slider-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: unset;
        overflow-x: scroll;
        display: flex;
    }

    .slide {
        width: 100%;
        /* margin-right: 1rem; */
    }

    .modal {
        padding-top: 64px;
        padding-bottom: 1rem;
    }

    .slide-img {
        width: 100%;
        height: 250px !important;
    }

    .close {
        position: absolute;
        top: 1rem;
        right: 2rem;
        font-size: 24px;
    }

    .slide-img-para {
        margin-top: 1rem;
        padding: 1rem;
    }

    .slide h3 {
        font-size: 16px;
    }

    .slide h4 {
        font-size: 16px;
        margin: .6rem 0;
    }

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

    .slider-nav button {
        background: transparent;
        border: none;
        color: rgb(255, 255, 255);
        font-size: 25px;
        cursor: pointer;
        padding: 4px 10px;
        /* display: none; */
    }

    .slider-nav button:hover {
        background-color: unset;
    }

    .slide_left {
        position: absolute;
        left: 0%;
        top: 45%;
    }

    .slide_right {
        position: absolute;
        right: 0%;
        top: 45%;
    }

}


@media only screen and (max-width: 50rem) and (min-width:30rem) {
    .card-content {
        width: 90%;
        margin-top: 6rem;
    }

    .card-content h3 {
        color: var(--secondary-clr);
        font-size: 16px;
    }

    .linediv {
        margin-top: 8px;
    }

    .pagi-card .grid_cards {
        display: block;
        margin-top: 8px;
    }

    .grid_card {
        margin-bottom: 1rem;
    }

    .grid_card_img {
        height: 300px !important;
        width: 100%;
    }

    .grid_card_img img {
        border-radius: 3px;
    }

    .grid_cards h4 {
        font-size: 16px;
        margin-bottom: 6px;
        margin-top: 6px;
    }

    .grid_cards p {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .grid_cards span {
        font-size: 12px;
    }


    /* ======================================== modal css starts here ============================== */
    .modal-content {
        width: 90%;
        margin: auto;
    }

    .slider-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: unset;
        overflow-x: scroll;
        display: flex;
    }

    .slide {
        width: 100%;
        /* margin-right: 1rem; */
    }

    .modal {
        padding-top: 64px;
        padding-bottom: 1rem;
    }

    .slide-img {
        width: 100%;
        height: 400px;
    }

    .close {
        position: absolute;
        top: 1rem;
        right: 2rem;
        font-size: 24px;
    }

    .slide-img-para {
        margin-top: 1rem;
        padding: 1rem;
    }

    .slide h3 {
        font-size: 16px;
    }

    .slide h4 {
        font-size: 16px;
        margin: .6rem 0;
    }

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

    .slider-nav button {
        background: transparent;
        border: none;
        color: rgb(255, 255, 255);
        font-size: 25px;
        cursor: pointer;
        padding: 4px 10px;
        /* display: none; */
    }

    .slider-nav button:hover {
        background-color: unset;
    }

    .slide_left {
        position: absolute;
        left: 0%;
        top: 45%;
    }

    .slide_right {
        position: absolute;
        right: 0%;
        top: 45%;
    }
}

@media only screen and (max-width:63rem) {
    .card-content {
        width: 90%;
        margin-top: 6rem;
    }

    .grid_cards {
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .m-mTop3 {
        margin-top: 3rem;
    }


    /* ======================================== modal css starts here ============================== */
    .modal-content {
        width: 90%;
        margin: auto;
    }

    .slider-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: unset;
        overflow-x: scroll;
        display: flex;
    }

    .slide {
        width: 100%;
        /* margin-right: 1rem; */
    }

    .modal {
        padding-top: 64px;
        padding-bottom: 1rem;
    }

    .slide-img {
        width: 100%;
        height: 400px;
    }

    .close {
        position: absolute;
        top: 1rem;
        right: 2rem;
        font-size: 24px;
    }

    .slide-img-para {
        margin-top: 1rem;
        padding: 1rem;
    }

    .slide h3 {
        font-size: 16px;
    }

    .slide h4 {
        font-size: 16px;
        margin: .6rem 0;
    }

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

    .slider-nav button {
        background: transparent;
        border: none;
        color: rgb(255, 255, 255);
        font-size: 25px;
        cursor: pointer;
        padding: 4px 10px;
        /* display: none; */
    }

    .slider-nav button:hover {
        background-color: unset;
    }

    .slide_left {
        position: absolute;
        left: 0%;
        top: 45%;
    }

    .slide_right {
        position: absolute;
        right: 0%;
        top: 45%;
    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    .card-content {
        width: 90%;
        margin-top: 6rem;
    }

    .grid_card_img {
        height: 170px;
    }

    .modal {
        padding: 3rem 0;
    }

    .modal-content {
        width: 70%;
        margin: auto;
    }

    .slide-img {
        width: 100%;
        height: 500px;
    }

    .slide_left {
        position: fixed;
        left: 2rem;
        top: 50%;
    }

    .slide_right {
        position: fixed;
        right: 2rem;
        top: 50%;
    }
}

/* ============================ content media css end here ============================ */
/* =========================== photo media css end here ========================== */


/* ========================== business media css ============================== */
@media only screen and (max-width: 30rem) {
    #business-container {
        width: 90%;
        margin: 80px auto auto auto;
    }

    .heading h1 {
        font-size: 22px !important;
        color: var(--secondary-clr);
    }

    .business-div1 {
        display: block;
    }

    .business-card {
        margin-bottom: 1rem;
    }

    .div1-img-para {
        width: 100%;
    }

    .div-1-b-n-img {
        width: 100%;
        height: 200px;

    }

    .b-n-div1-img {
        border-radius: 2px;
    }

    .b-n-div1-play-icon {
        width: 50px;

    }

    .business-div1 h1 {
        font-size: 18px;
        margin-top: 5px;
    }

    .div1-para {
        font-size: 14px;

    }

    .div1-date {
        font-size: 12px;
    }

    /*business div2 */
    .business-div2 {
        display: block;
        margin-top: 0px;

    }

    .div2-img-para {
        margin-right: 20px;
        display: block;
        width: 100%;
    }

    .div-2-b-n-img {
        width: 100%;
        height: 200px;


    }

    .b-n-div2-img {
        border-radius: 2px;

    }

    .b-n-div2-play-icon {
        width: 50px;

    }

    .business-div2 h1 {
        font-size: 18px;
        margin-top: 5px;
    }

    .div2-para {
        font-size: 14px;

    }

    .div2-date {
        font-size: 12px;
    }


}

@media only screen and (max-width: 50rem) and (min-width:30rem) {
    #business-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .heading h1 {
        font-size: 18px;
        color: var(--secondary-clr);
    }

    .business-div1 {
        display: block;
    }

    .div1-img-para {
        width: 100%;
    }

    .div-1-b-n-img {
        width: 100%;
        height: 300px;

    }

    .b-n-div1-img {
        border-radius: 2px;

    }

    .b-n-div1-play-icon {
        width: 60px;

    }

    .div1-img-para h1 {
        font-size: 18px;
        margin-top: 10px;
    }

    .div1-para {
        font-size: 16px;

    }

    .div1-date {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /*business div2 */
    .business-div2 {
        display: block;
        margin-top: 0px;

    }

    .div2-img-para {
        margin-right: 20px;
        display: block;
        width: 100%;
    }

    .div-2-b-n-img {
        width: 100%;
        height: 300px;


    }

    .b-n-div2-img {
        border-radius: 2px;

    }

    .b-n-div2-play-icon {
        width: 60px;

    }

    .div2-img-para h1 {
        font-size: 18px;
    }

    .div2-para {
        font-size: 16px;

    }

    .div2-date {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .business-div1 h1 {
        font-size: 16px;
        margin-top: 10px;
    }


}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    #business-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .business-div1 {
        grid-template-columns: auto auto;
        grid-gap: 1.3rem;
    }

    .business-div2 {
        grid-template-columns: auto auto;
        grid-gap: 1.3rem;
    }

    .b-n-div1-play-icon {
        position: absolute;
        width: 60px;
    }

    .b-n-div2-play-icon {
        position: absolute;
        width: 60px;
    }
}

@media only screen and (max-width: 75rem) and (min-width:63rem) {
    #business-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .div-1-b-n-img {
        width: 100%;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .div-2-b-n-img {
        width: 100%;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .b-n-div1-play-icon {
        width: 50px;
    }

    .b-n-div2-play-icon {
        width: 50px;
    }

}

/* ===================================== business media css end ============================== */

/* ============================== entertainment media css========================  */
@media only screen and (max-width:30rem) {
    #entertainment-container {
        width: 90%;
        margin: 80px auto auto auto;

    }

    .entm-div1 {
        display: block;
    }

    .entmt-card {
        margin-bottom: 1rem;
    }

    .div1-img-para {
        width: 100%;
    }

    .entm-div1-img {
        width: 100%;
        height: 200px;

    }

    .entm-div1-images {
        border-radius: 2px;

    }

    .entm-div1-play-icon {
        width: 50px;

    }

    .entmt-card h1 {
        font-size: 18px;
        margin-top: 5px;
    }

    /*entm-div2 */
    .entm-div2 {
        display: block;
        margin-top: 0px;

    }

    .div2-img-para {
        margin-right: 20px;
        display: block;
        width: 100%;
    }

    .entm-div2-img {
        width: 100%;
        height: 220px;


    }

    .entm-div2-images {
        border-radius: 2px;

    }

    .entm-div2-play-icon {
        width: 50px;

    }

    .entm-div2 h1 {
        font-size: 16px;
        margin-top: 5px;
    }
}

@media only screen and (max-width: 50rem) and (min-width:30rem) {
    #entertainment-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .entm-div1 {
        display: block;
    }

    .div1-img-para {
        width: 100%;
    }

    .entm-div1-img {
        width: 100%;
        height: 300px;

    }

    .entm-div1-images {
        border-radius: 2px;


    }

    .entm-div1-play-icon {
        width: 60px;

    }

    .div1-img-para h1 {
        font-size: 18px;
        margin-top: 10px;
    }

    .div1-para {
        font-size: 16px;

    }

    .div1-date {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /*entertainment div2 */
    .entm-div2 {
        display: block;
        margin-top: 0px;

    }

    .div2-img-para {
        margin-right: 20px;
        display: block;
        width: 100%;
    }

    .entm-div2-img {
        width: 100%;
        height: 300px;


    }

    .entm-div2-images {
        border-radius: 2px;

    }

    .entm-div2-play-icon {
        width: 60px;

    }

    .div2-img-para h1 {
        font-size: 18px;
    }

    .div2-para {
        font-size: 16px;

    }

    .div2-date {
        font-size: 14px;
        margin-bottom: 10px;
    }

}

@media only screen and (max-width: 63rem) and (min-width:50rem) {
    #entertainment-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .entm-div1 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .entm-div2 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .entm-div1-play-icon {
        position: absolute;
        width: 60px;
    }

    .entm-div2-play-icon {
        position: absolute;
        width: 60px;
    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    #entertainment-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .entm-div1-img {
        width: 100%;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .entm-div2-img {
        width: 100%;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .entm-div1-play-icon {
        position: absolute;
        width: 50px;
    }

    .entm-div2-play-icon {
        position: absolute;
        width: 50px;
    }
}

/*  ============================ entertainment media css end ============================ */

/*  ================================ life style media css ================================  */
@media only screen and (max-width:30rem) {
    #life-style-container {
        width: 90%;
        margin: 80px auto auto auto;

    }

    .life-style-div1 {
        display: block;
    }

    .life-style-card {
        margin-bottom: 1rem;
    }

    .l-s-div1-img {
        width: 100%;
        height: 200px;
    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .l-s-div1-images {
        border-radius: 2px;

    }

    .l-s-div1-play-icon {
        width: 50px;

    }

    .life-style-card h1 {
        font-size: 18px;
        margin-top: 10px;
    }

    /*life style div2 */
    .life-style-div2 {
        display: block;
        margin-top: 0px;
    }

    .l-s-div2-img {
        width: 100%;
        height: 200px;

    }

    .l-s-div2-images {
        border-radius: 2px;
    }

    .l-s-div2-play-icon {
        width: 50px;

    }

    .div-img-para h1 {
        font-size: 18px !important;
        margin-top: 10px;
    }

}

@media only screen and (max-width:50rem) and (min-width:30rem) {
    #life-style-container {
        width: 90%;
        margin: 90px auto auto auto;
    }

    .life-style-div1 {
        display: block;
    }

    .l-s-div1-img {
        width: 100%;
        height: 300px;
    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .l-s-div1-images {
        border-radius: 2px;

    }

    .life-style-card h1 {
        font-size: 16px;
        margin-top: 10px;
    }

    /*life style div2 */
    .life-style-div2 {
        display: block;
        margin-top: 0px;
    }

    .l-s-div2-img {
        width: 100%;
        height: 300px;
    }

    .l-s-div2-images {
        border-radius: 2px;
    }

    .l-s-div2-play-icon {
        width: 60px;
    }

    .div-img-para h1 {
        font-size: 16px;
        margin-top: 10px;
    }
}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    #life-style-container {
        width: 90%;
        margin-top: 90px;
    }

    .life-style-div1 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .life-style-div2 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .l-s-div1-play-icon {
        width: 60px;
    }

    .l-s-div2-play-icon {
        width: 60px;
    }

}

@media only screen and (max-width:75rem) {
    #life-style-container {
        width: 90%;
        margin-top: 90px;
    }

    .l-s-div1-img {
        height: 170px;
    }

    .l-s-div2-img {
        height: 170px;
    }

    .l-s-div1-play-icon {
        position: absolute;
        width: 50px;
    }

    .l-s-div2-play-icon {
        position: absolute;
        width: 50px;
    }
}

/* ============================= life style media css end ============================= */


/* ============================== politics media css ============================== */

@media only screen and (max-width:30rem) {
    #politics-container {
        width: 90%;
        margin: 80px auto auto auto;

    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .politics-div1 {
        display: block;
    }

    .politics-card {
        margin-bottom: 1rem;
    }

    .politics-card-img {
        height: 200px;
    }

    .div1-images {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    .div1-play-icon {
        width: 50px;

    }

    .politics-card h1 {
        font-size: 18px;
        margin-top: 5px;
    }

    .div1-para {
        font-size: 16px;
    }

    .div1-date {
        font-size: 14px;
    }

    /*politics div2 */
    .politics-div2 {
        display: block;
        margin-top: 0px;
    }

    .politics-card-2-img {
        height: 200px;
    }

    .div2-images {
        width: 100%;
        border-radius: 2px;
        height: 100%;
    }

    .div2-play-icon {
        width: 50px;

    }

    .politics-card-2 h1 {
        font-size: 16px;
        margin-top: 5px;
    }

    .div2-para {
        font-size: 16px;
        margin: 5px 0px 5px 0px;
    }

    .div2-date {
        font-size: 14px;
        opacity: 0.6;
    }
}

@media only screen and (max-width:50rem) and (min-width:30rem) {
    #politics-container {
        width: 90%;
        margin: 80px auto auto auto;
    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .politics-div1 {
        display: block;
    }

    .politics-card-img {
        height: 300px;
    }

    .div1-images {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    .div1-play-icon {
        width: 50px;

    }

    .politics-card h1 {
        font-size: 18px;
        margin-top: 10px;
    }

    .div1-para {
        font-size: 16px;
    }

    .div1-date {
        font-size: 14px;
    }

    /*politics div2 */
    .politics-div2 {
        display: block;
        margin-top: 0px;
    }

    .politics-card-2-img {
        height: 300px;
    }

    .div2-images {
        width: 100%;
        border-radius: 2px;
        height: 100%;
    }

    .div2-play-icon {
        width: 60px;

    }

    .politics-card-2 h1 {
        font-size: 18px;
    }

    .div2-para {
        font-size: 16px;
        margin: 10px 0px 10px 0px;
    }

    .div2-date {
        font-size: 14px;
        opacity: 0.6;
    }

}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    #politics-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .politics-div1 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .politics-div2 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .div2-play-icon {
        position: absolute;
        width: 60px;
    }

    .div1-play-icon {
        position: absolute;
        width: 60px;
    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    #politics-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .politics-card-img {
        height: 170px;
    }

    .politics-card-2-img {
        height: 170px;
    }

    .div1-play-icon {
        position: absolute;
        width: 50px;
    }

    .div2-play-icon {
        position: absolute;
        width: 50px;
    }
}


/* =============================== politics media css end =============================== */


/* ===================== technology media css ===================== */


@media only screen and (max-width:30rem) {
    #technology-container {
        width: 90%;
        margin: 80px auto auto auto;

    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .technology-div1 {
        display: block;
    }

    .div-img-para {
        margin-bottom: 1rem;
    }

    .tng-card {
        height: 200px;
    }

    .div1-images {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    .div1-play-icon {
        position: absolute;
        width: 50px;

    }

    .div1-img-para h1 {
        font-size: 16px;
        margin-top: 5px;
    }

    /*technology div2 */
    .technology-div2 {
        display: block;
        margin-top: 0px;
    }

    .tng-card-2 {
        height: 200px;

    }

    .div2-images {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    .div2-img-para h1 {
        font-size: 16px;
        margin-top: 5px;
    }
}

@media only screen and (max-width:50rem) and (min-width:30rem) {
    #technology-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .technology-div1 {
        display: block;
    }

    .tng-card {
        height: 300px;

    }

    .div1-images {
        width: 100%;
        height: 300px;
        border-radius: 2px;
    }

    .div1-play-icon {
        position: absolute;
        width: 60px;

    }

    /*technology div2 */
    .technology-div2 {
        display: block;
        margin-top: 0px;
    }

    .tng-card-2 {
        height: 300px;

    }

    .div2-images {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    #technology-container {
        width: 90%;
        margin: 90px auto auto auto;
    }


    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .technology-div1 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }


    /*technology div2 */
    .technology-div2 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    #technology-container {
        width: 90%;
        margin: 90px auto auto auto;
    }

    .tng-card {
        height: 170px;
    }

    .tng-card-2 {
        height: 170px;
    }
}

/* ======================== technology media css end ======================== */



/* ========================== world media css ========================== */

@media only screen and (max-width:30rem) {
    #world-container {
        width: 90%;
        margin: 80px auto auto auto;

    }

    .heading-hr {
        margin: 5px 0px 10px 0px;
    }

    .world-div1 {
        display: block;
    }

    .div-card {
        margin-bottom: 1rem;
    }

    .card {
        height: 200px;
    }

    .card-img {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }


    .div-card h1 {
        font-size: 18px;
        margin-top: 5px;
    }

    .div1-para {
        font-size: 16px;
        margin: 5px 0px 5px 0px;
    }

    .div1-date {
        font-size: 14px;
    }

    /*world div2 */
    .world-div2 {
        display: block;
        margin-top: 0px;
    }

    .card-2 {
        height: 200px;
    }



    .card-2-play-icon {
        width: 50px;

    }

    .div-card h1 {
        font-size: 18px;
        margin-top: 5px;
    }

    .div-para {
        font-size: 14px;
        margin: 5px 0px 5px 0px;
    }

    .div2-date {
        font-size: 14px;
    }
}


@media only screen and (max-width:50rem) and (min-width:30rem) {
    #world-container {
        width: 90%;
        margin: 90px auto auto auto;

    }


    .world-div1 {
        display: block;
    }

    .card {
        height: 300px;
    }

    .card-img {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    .card-play-icon {
        width: 60px;

    }

    .div1-date {
        font-size: 14px;
    }

    /*world div2 */
    .world-div2 {
        display: block;
        margin-top: 0px;
    }

    .card-2 {
        height: 300px;
    }

    .card-2-img {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    .card-2-play-icon {
        width: 60px;

    }

    .div2-card h1 {
        font-size: 18px;
        margin-top: 10px;
    }

    .div2-para {
        font-size: 14px;
    }

    .div2-date {
        font-size: 16px;
    }

    .div-card h1 {
        font-size: 16px;
        margin-top: 10px;
    }
}

@media only screen and (max-width:63rem) and (min-width:50rem) {
    #world-container {
        width: 90%;
        margin: 90px auto auto auto;

    }

    .world-div1 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .card-play-icon {
        width: 60px;

    }

    /*world div2 */
    .world-div2 {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.3rem;
    }

    .card-2-play-icon {
        width: 60px;

    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    #world-container {
        width: 90%;
        margin-top: 90px;
    }

    .card {
        height: 170px;
    }

    .card-2-play-icon {
        width: 50px;

    }

    .card-2 {
        height: 170px;
    }
}



/* ============================ world media css end ============================ */




/* ========================== contact media css ========================== */

@media only screen and (max-width:30rem) {
    #contact-container {
        display: block;
        width: 90%;
        margin: 80px auto auto auto;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }

    .ul-div {
        width: 100%;
        padding: 0px;
        background-color: unset;
        border-radius: 0px;
        position: inherit;

    }

    .section-1 ul {
        display: grid;
        grid-template-columns: repeat(4, 200px);
        overflow: scroll;
        overflow-y: hidden;
    }

    .section-1 ul::-webkit-scrollbar {
        display: none;
    }

    .section-1 ul li {
        margin-bottom: 0px;
        margin-right: 10px;
        border-bottom: unset;
        padding-bottom: unset;
        border: 1px solid #000;
        border-radius: 4px;
    }

    .section-1 ul li a {
        font-size: 16px;
        text-decoration: none;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        padding: 10px 10px;
        border-radius: 4px;
    }



    .active-advertise {
        font-weight: bold;
        border: 1px solid #625CE1 !important;
        border-radius: 4px;
        color: #625CE1;
    }

    .section-1 ul hr {
        margin-bottom: 10px;
        display: none;

    }

    .scroll_section {
        min-height: 100%;
        max-height: unset;
        overflow-x: unset;
        overflow-y: unset;
        padding-right: 0;
    }

    .scroll_section::-webkit-scrollbar {
        display: none;
    }

    .media-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto auto 20px auto;
        width: 95%;
    }

    .h1-contact {
        font-size: 16px;
        color: var(--secondary-clr);
        margin-bottom: 0px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .medialine-1 {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 100%;
    }

    .medialine-2 {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 100%;
    }

    .first-para {
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
    }

    .h1-you-can-mail {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .mumbai-h1 h1 {
        font-size: 16px;
        margin-left: 10px;
    }

    .mumbai-para p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .mumbai-para {
        margin-left: 10px;
    }

    .mumbai-office {
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .mumbai-h1 {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .odisha-h1 h1 {
        font-size: 16px;
        margin-left: 10px;
    }

    .odisha-para p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .odisha-para {
        margin-left: 10px;
    }

    .odisha-office {
        border: 1px solid #ccc;
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .odisha-h1 {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
        border: 1px solid var(--secondary-clr);
        font-weight: 600;
    }


}

@media only screen and (max-width:880px) and (min-width:30rem) {

    #contact-container {
        display: block;
        width: 90%;
        margin: 90px auto auto auto;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }

    .ul-div {
        width: 100%;
        padding: 0px;
        background-color: transparent;
        border-radius: 0px;
        position: inherit;

    }

    .section-1 ul {
        display: grid;
        grid-template-columns: repeat(4, 200px);
        overflow: scroll;
        overflow-y: hidden;
    }

    .section-1 ul::-webkit-scrollbar {
        display: none;
    }

    .section-1 ul li {
        margin-bottom: 0px;
        margin-right: 10px;
        border-bottom: unset;
        padding-bottom: unset;
        border: 1px solid #000;
        border-radius: 4px;
    }

    .section-1 ul li a {
        font-size: 16px;
        text-decoration: none;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        padding: 7px 10px;
        background-color: #ffffff;
    }



    .active-advertise {
        font-weight: bold;
        border: 1px solid #625CE1 !important;
        border-radius: 4px;
        color: #625CE1;
    }

    .section-1 ul hr {
        display: none;

    }

    .scroll_section {
        min-height: 100%;
        max-height: unset;
        overflow-x: unset;
        overflow-y: unset;
        padding-right: 0;
    }

    .scroll_section::-webkit-scrollbar {
        display: none;
    }

    .media-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto auto 20px auto;
        width: 100%;
    }

    .h1-contact {
        font-size: 18px;
        color: var(--secondary-clr);
        margin-bottom: 0px;
        margin-left: 50px;
        margin-right: 50px;
    }

    .medialine-1 {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 100%;
    }

    .medialine-2 {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 100%;
    }

    .first-para {
        margin-bottom: 10px;
        font-size: 16px;
        text-align: center;
    }

    .h1-you-can-mail {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .mumbai-h1 h1 {
        font-size: 18px;
        margin-left: 10px;
    }

    .mumbai-para p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .mumbai-para {
        margin-left: 10px;
    }

    .mumbai-office {
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .mumbai-h1 {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .odisha-h1 h1 {
        font-size: 18px;
        margin-left: 10px;
    }

    .odisha-para p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .odisha-para {
        margin-left: 10px;
    }

    .odisha-office {
        border: 1px solid #ccc;
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .odisha-h1 {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    #email {
        font-size: 16px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    #form button {
        font-size: 16px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    #form button img {
        width: 15px;
        margin-right: 4px;
    }


}


@media only screen and (max-width:63rem) and (min-width:880px) {
    #contact-container {
        display: block;
        width: 90%;
        margin: 90px auto auto auto;
    }

    .section-1 {
        width: 100%;
        margin: auto auto 40px auto;

    }

    .ul-div {
        width: 100%;
        padding: 0px;
        background-color: transparent;
        border-radius: 0px;
        position: inherit;
    }

    .section-1 ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .section-1 ul li {
        margin-bottom: 0px;
        border-bottom: unset;
        padding-bottom: unset;
        border: 1px solid #000;
        border-radius: 4px;
    }

    .section-1 ul li a {
        font-size: 16px;
        text-decoration: none;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        padding: 10px 15px;
        background-color: #ffffff;
    }

    .active-advertise {
        font-weight: bold;
        border: 1px solid #625CE1 !important;
        border-radius: 4px;
        color: #625CE1;
    }

    .section-1 ul hr {
        display: none;

    }


    .scroll_section {
        min-height: 100%;
        max-height: unset;
        overflow-x: unset;
        overflow-y: unset;
        padding-right: 0;
    }

    .scroll_section::-webkit-scrollbar {
        display: none;
    }

    .media-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto auto 20px auto;
        width: 95%;
    }

    .h1-contact {
        font-size: 18px;
        color: var(--secondary-clr);
        margin-bottom: 0px;
        margin-left: 40px;
        margin-right: 40px;
    }

    .medialine-1 {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 100%;
    }

    .medialine-2 {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 100%;
    }

    .first-para {
        margin-bottom: 10px;
        font-size: 16px;
        text-align: center;
    }

    .h1-you-can-mail {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .mumbai-h1 h1 {
        font-size: 18px;
        margin-left: 10px;
    }

    .mumbai-para p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .mumbai-para {
        margin-left: 10px;
    }

    .mumbai-office {
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .mumbai-h1 {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .odisha-h1 h1 {
        font-size: 18px;
        margin-left: 10px;
    }

    .odisha-para p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .odisha-para {
        margin-left: 10px;
    }

    .odisha-office {
        border: 1px solid #ccc;
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .odisha-h1 {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    #email {
        font-size: 16px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    #form button {
        font-size: 16px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    #form button img {
        width: 15px;
        margin-right: 4px;
    }
}


@media only screen and (max-width:75rem) and (min-width:63rem) {
    #contact-container {
        grid-template-columns: 1fr 1.5fr;
        gap: 3rem;
        width: 90%;
    }


}

/* ============================== contact media css end =========================== */

/* ========================== privacy policy media css ========================== */

@media only screen and (max-width: 30rem) {
    #privacy-policy-container {
        width: 90%;
        margin: 80px auto auto auto;
        display: block;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }

    .privacy-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;
    }

    .privacy-policy-h1 {
        font-size: 14px;
        color: var(--secondary-clr);
        margin-bottom: 0px;
    }

    .p-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 27%;
    }

    .pravacy-para {
        font-size: 14px;
        text-align: center;
    }

    .h1-i {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .h1-i-para {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .h1-ii {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .h1-ii-para {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .h1-iii {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-iii-para {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .h1-iv {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-iv-para {
        margin-bottom: 10px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 880px) and (min-width:30rem) {
    #privacy-policy-container {
        width: 90%;
        margin: 90px auto auto auto;
        display: block;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }


    .privacy-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;
    }

    .privacy-policy-h1 {
        font-size: 18px;
        color: var(--secondary-clr);
        margin-bottom: 0px;
    }

    .p-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 35%;
    }

    .pravacy-para {
        font-size: 16px;
        text-align: center;
    }

    .h1-i {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .h1-i-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-ii {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .h1-ii-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-iii {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .h1-iii-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-iv {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .h1-iv-para {
        margin-bottom: 10px;
        font-size: 16px;
    }
}


@media only screen and (max-width:63rem) and (min-width:880px) {
    #privacy-policy-container {
        width: 90%;
        margin: 90px auto auto auto;
        display: block;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }

    .privacy-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;
    }

    .privacy-policy-h1 {
        font-size: 18px;
        margin-bottom: 0px;
    }

    .p-medialine {
        height: 0.5px;
        width: 35%;
    }

    .pravacy-para {
        font-size: 16px;
        text-align: center;
    }

    .h1-i {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .h1-i-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-ii {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .h1-ii-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-iii {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .h1-iii-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .h1-iv {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .h1-iv-para {
        margin-bottom: 10px;
        font-size: 16px;
    }
}


@media only screen and (max-width: 75rem) and (min-width:63rem) {
    #privacy-policy-container {
        grid-template-columns: 1fr 1.5fr;
        gap: 3rem;
        width: 90%;
    }
}

/* ========================== privacy policy media css end ========================== */

/* ========================== advertise with us media css ========================== */

@media only screen and (max-width:30rem) {
    #advertise-container {

        display: block;
        width: 90%;
        margin: 80px auto auto auto;
        /* border: 2px solid red; */
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }

    .adver-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;

    }

    .adver-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 22%;

    }

    .advertise-h1 {
        font-size: 16px;
        margin-bottom: 0px;

    }

    .adver-para {
        font-size: 14px;
        text-align: center;
    }

    .box p {
        font-size: 16px;
    }

    .advertise-para {
        padding: 20px;
    }


}

@media only screen and (max-width:880px) and (min-width:30rem) {
    #advertise-container {
        display: block;
        width: 90%;
        margin: 90px auto auto auto;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }


    .adver-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;

    }

    .adver-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 32%;

    }

    .advertise-h1 {
        font-size: 18px;
        margin-bottom: 0px;

    }

    .adver-para {
        font-size: 16px;
        text-align: center;
    }

    .box p {
        font-size: 16px;
    }

    .advertise-para {
        padding: 25px;
    }


}


@media only screen and (max-width:63rem) and (min-width:880px) {
    #advertise-container {
        display: block;
        width: 90%;
        margin: 90px auto auto auto;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }

    /* section-2 */
    .advertise-section-2 {
        width: 100%;
        margin-left: 0px;
        max-height: unset;
    }

    .adver-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;

    }

    .adver-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 32%;

    }

    .advertise-h1 {
        font-size: 18px;
        margin-bottom: 0px;

    }

    .adver-para {
        font-size: 16px;
        text-align: center;
    }

    .box p {
        font-size: 16px;
    }

    .advertise-para {
        padding: 25px;
    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    #advertise-container {
        grid-template-columns: 1fr 1.5fr;
        gap: 3rem;
        width: 90%;
    }
}


/* ============================= advertise with us media css end ============================= */



/* ============================= trems and conditions media css ============================= */

@media only screen and (max-width: 30rem) {
    #trems-container {
        display: block;
        width: 90%;
        margin: 80px auto auto auto;
    }

    .section-1 {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 30px;

    }

    /* section-2 */
    .trems-section-2 {
        width: 100%;
        margin-left: 0px;
        max-height: unset;
    }

    .trems-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;

    }

    .trems-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 22%;

    }

    .terms-and-conditions-h1 {
        font-size: 16px;
        margin-bottom: 0px;

    }

    .trems-para {
        font-size: 14px;
        text-align: center;

    }

    .eligiblity-h1 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .eligiblity-para {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .procedure-h1 {
        font-size: 16px;
        margin-bottom: 10px;

    }

    .procedure-para {
        margin-bottom: 10px;
        font-size: 14px;

    }

    .details-h1 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .details-para {
        margin-bottom: 10px;
        font-size: 14px;
    }

}

@media only screen and (max-width: 880px) and (min-width:30rem) {
    #trems-container {
        display: block;
        width: 90%;
        margin: 90px auto auto auto;
        /* border: 2px solid red; */
    }

    /* section-2 */
    .trems-section-2 {
        width: 100%;
        margin-left: 0px;
        max-height: unset;
    }

    .trems-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;

    }

    .trems-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 30%;

    }

    .terms-and-conditions-h1 {
        font-size: 18px;
        margin-bottom: 0px;

    }

    .trems-para {
        font-size: 16px;
        text-align: center;

    }

    .eligiblity-h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .eligiblity-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .procedure-h1 {
        font-size: 18px;
        margin-bottom: 10px;

    }

    .procedure-para {
        margin-bottom: 10px;
        font-size: 16px;

    }

    .details-h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .details-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

}

@media only screen and (max-width:63rem) and (min-width:880px) {
    #trems-container {
        display: block;
        width: 90%;
        margin: 90px auto auto auto;
        /* border: 2px solid red; */
    }

    /* section-2 */
    .trems-section-2 {
        width: 100%;
        margin-left: 0px;
        max-height: unset;
    }

    .trems-media-box {
        display: flex;
        width: 95%;
        margin: auto auto 20px auto;
        align-items: center;
        justify-content: space-between;

    }

    .trems-medialine {
        background-color: var(--secondary-clr);
        height: 0.5px;
        width: 30%;

    }

    .terms-and-conditions-h1 {
        font-size: 18px;
        margin-bottom: 0px;

    }

    .trems-para {
        font-size: 16px;
        text-align: center;

    }

    .eligiblity-h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .eligiblity-para {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .procedure-h1 {
        font-size: 18px;
        margin-bottom: 10px;

    }

    .procedure-para {
        margin-bottom: 10px;
        font-size: 16px;

    }

    .details-h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .details-para {
        margin-bottom: 10px;
        font-size: 16px;
    }
}

@media only screen and (max-width: 75rem) and (min-width:63rem) {
    #trems-container {
        grid-template-columns: 1fr 1.5fr;
        gap: 3rem;
        width: 90%;
    }
}

/* ================================ trems and conditions media css end ====================== */


/* =========================== search media css starts here ============================ */
@media only screen and (max-width:30rem) {
    .search-trending {
        display: none;
    }

    .m-mTop1 {
        margin-top: 1rem;
    }

    .m-w90 {
        width: 90%;
    }

    .m-w100 {
        width: 100%;
    }

    .mobMT2 {
        margin-top: 2rem;
    }

    .mobMT5 {
        margin-top: 5rem;
    }

    .mobPLR1 {
        padding: 0 1rem;
    }

    .m-None {
        display: none;
    }

    .m-block {
        display: block;
    }

    .search-box {
        border-radius: 3px;
    }

    .row {
        padding: 0px 12px;
    }

    .row .clear-btn img {
        width: 10px;
    }

    .fa-solid {
        font-size: 15px;
    }

    .color::placeholder {
        font-size: 14px;
    }

    input {
        font-size: 14px;
    }

    .results-span {
        font-size: 14px;
    }

    .we-found {
        font-size: 14px;
    }

    .search-card-img {
        width: 300px;
        height: 150px;
        margin-right: 10px;
        margin-bottom: 8px;
    }

    .search-card-img img {
        border-radius: 3px;
    }

    .search-card a h4 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .search-card a p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .search-card a span {
        font-size: 12px;
    }
}


@media only screen and (max-width:50rem) {
    .search-trending {
        display: none;
    }

    .m-mTop1 {
        margin-top: 1rem;
    }

    .m-w90 {
        width: 90%;
    }

    .m-w100 {
        width: 100%;
    }

    .m-None {
        display: none;
    }

    .m-block {
        display: block;
    }

    .search-box {
        border-radius: 3px;
    }

    .row {
        padding: 0px 12px;
    }

    .row .clear-btn img {
        width: 10px;
    }

    .fa-solid {
        font-size: 15px;
    }

    .color::placeholder {
        font-size: 14px;
    }

    input {
        font-size: 14px;
    }

    .results-span {
        font-size: 14px;
    }

    .we-found {
        font-size: 14px;
    }

    .search-card-img {
        width: 300px;
        height: 150px;
        margin-right: 10px;
        margin-bottom: 8px;
    }

    .search-card-img img {
        border-radius: 3px;
    }

    .search-card a h4 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .search-card a p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .search-card a span {
        font-size: 12px;
    }
}

@media only screen and (max-width:75rem) {


    .m-w90 {
        width: 90%;
    }

    .mTop8 {
        margin-top: 1rem;
    }

    .m-w100 {
        width: 100%;
    }

    .m-None {
        display: none;
    }

    .search-box {
        border-radius: 3px;
    }

    .row {
        padding: 0px 12px;
    }

    .row .clear-btn img {
        width: 10px;
    }

    .fa-solid {
        font-size: 15px;
    }

    .color::placeholder {
        font-size: 14px;
    }

    input {
        font-size: 14px;
    }

    .results-span {
        font-size: 14px;
    }

    .we-found {
        font-size: 14px;
    }

    .search-card-img {
        width: 300px;
        height: 150px;
        margin-right: 10px;
        margin-bottom: 8px;
    }

    .search-card-img img {
        border-radius: 3px;
    }

    .search-card a h4 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .search-card a p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .search-card a span {
        font-size: 12px;
    }

}


/* ======================================= About media css starts here ============================== */
@media only screen and (max-width:30rem) {
    .about {
        width: 90%;
        margin-top: 5rem;
    }

    .about h1 {
        font-size: 1.8rem;
    }

    .about h2 {
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    .about-first-para {
        font-size: 16px;
        margin: .7rem 0;
    }

    .about h3 {
        font-size: 18px;
    }

    .visitor_para {
        font-size: .7rem;
        margin: 10px 0;
        text-align: center;
    }

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

    .about-flex {
        display: block;
        width: 100%;
        margin-top: 2rem;
    }

    .behind-box {
        display: block;
    }

    .behiend-para {
        width: 100%;
    }

    .behiend-img {
        width: 100%;
        height: 320px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .behiend-para h4 {
        font-size: 18px;
    }

    .behiend-para h5 {
        font-size: 14px;
        margin: .6rem 0;
    }

    .behiend-para p {
        margin-bottom: 1.2rem;
    }

    .about button {
        padding: 1rem 1.8rem;
        font-size: 14px;
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width:50rem) and (min-width:30rem) {
    .about {
        width: 90%;
        margin-top: 6rem;
    }

    .about h1 {
        font-size: 1.8rem;
    }

    .about h2 {
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    .about-first-para {
        font-size: 16px;
        margin: .7rem 0;
    }

    .about h3 {
        font-size: 18px;
    }

    .visitor_para {
        font-size: 14px;
        margin: 10px 0;
        text-align: center;
    }

    .demo-img {
        width: 100%;
        height: 420px;
    }

    .about-flex {
        display: block;
        width: 100%;
        margin-top: 2rem;
    }

    .behind-box {
        flex-direction: column;
        align-items: center;
    }

    .behiend-para {
        width: 300px;
    }

    .behiend-img {
        width: 300px;
        height: 320px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .behiend-para h4 {
        font-size: 18px;
    }

    .behiend-para h5 {
        font-size: 14px;
        margin: .6rem 0;
    }

    .behiend-para p {
        margin-bottom: 1.2rem;
    }

    .about button {
        padding: 1rem 1.8rem;
        font-size: 14px;
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width:63rem) and (min-width:30rem) {
    .about {
        width: 90%;
        margin-top: 6rem;
    }

    .about h1 {
        font-size: 1.8rem;
    }

    .about h2 {
        font-size: 1.5rem;
        margin-top: 1rem;
    }

    .about-first-para {
        font-size: 16px;
        margin: .7rem 0;
    }

    .about h3 {
        font-size: 18px;
    }

    .visitor_para {
        font-size: 18px;
        margin: 10px 0;
        text-align: center;
    }

    .demo-img {
        width: 100%;
        height: 630px;
    }

    .about-flex {
        display: block;
        width: 100%;
        margin-top: 2rem;
    }

    .behind-box {
        flex-direction: column;
        align-items: center;
    }

    .behiend-para {
        width: 300px;
    }

    .behiend-img {
        width: 300px;
        height: 320px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .behiend-para h4 {
        font-size: 18px;
    }

    .behiend-para h5 {
        font-size: 14px;
        margin: .6rem 0;
    }

    .behiend-para p {
        margin-bottom: 1.2rem;
    }

    .about button {
        padding: 1rem 1.8rem;
        font-size: 14px;
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width:75rem) and (min-width:63rem) {
    .about {
        width: 90%;
    }
}

@media only screen and (max-width:1400px) and (min-width:75rem) {
    .about {
        width: 80%;
    }
}

/* ======================================= About media css end here ============================== */

/* =============================== details page media css starts here ========================== */

@media only screen and (max-width:30rem) {

    .first-div,
    .first-heading-div,
    .heading,
    .related-news,
    nav {
        width: 100%
    }

    .navBar {
        width: 90%;
        min-height: 60px
    }

    .logo {
        width: 45px
    }

    /* .navMenu {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #efefef;
        height: 100vh;
        width: 100%;
        top: 60px;
        right: -100%;
        transition: .5s
    }

    .navMenu li {
        text-align: center;
        margin-bottom: 4rem
    } */

    .dis-none,
    .second-div {
        display: none
    }

    .dis-none-inhr {
        display: inherit;
        border: .5px solid rgba(0, 0, 0, .56);
        border-radius: 20px;
        text-decoration: none
    }

    .media-screen p {
        font-size: 14px;
        padding: 7px 80px;
        margin-top: 0;
        color: #000
    }

    .menu-search-btn {
        display: flex;
        align-items: center
    }

    .menu-search-btn .search-btn {
        width: 20px;
        margin-right: 2rem
    }

    .menu-search-btn .search-btn img,
    .second-img img,
    .trending-img img {
        width: 100%;
        height: 100%
    }

    #checkbtn img,
    .icon-img,
    .like-comment {
        width: 30px;
        height: 30px;
    }

    #check:checked~ul {
        right: 0
    }

    .maindiv,
    .profile-icon,
    .second-img {
        margin-top: 10px
    }

    #container {
        width: 90%;
        margin: auto;
        padding: 5rem 0 2rem;
    }

    .first-heading-div h1 {
        font-size: 16px;
        margin-bottom: 10px
    }

    .written-by {
        font-size: 14px;
        opacity: .5;
        margin-right: 5px
    }

    .wri-name {
        font-size: 18px;
        margin-bottom: 5px
    }

    .heading {
        margin-bottom: 15px
    }

    .heading h1 {
        font-size: 16px
    }

    .date,
    .heading p,
    .related-news-p-2 {
        font-size: 16px;
    }

    .heading-hr {
        background-color: #ccc;
        width: 100%;
        height: .5px;
        margin-bottom: 20px;
        opacity: .5
    }

    .profile-img {
        width: 50px;
        height: 50px;
        margin-right: 10px
    }

    .icon a {
        margin-left: 5px
    }

    .date {
        opacity: .5;
        margin-bottom: 0
    }

    .like-comment {
        margin-right: 5px
    }

    .first-img,
    .second-img {
        /* height: 350px; */
        margin-bottom: 10px;
        width: 100%
    }

    .maindiv {
        display: block
    }

    .first-img-paras p,
    .second-img-paras p {
        margin-bottom: 10px;
        font-size: 16px;
    }

    #related-trending {
        display: block;
        width: 90%;
        margin: 50px auto auto
    }

    .related-news-img-para {
        display: block;
        align-items: center;
        margin: 0 0 20px
    }

    .related-news-img {
        width: 100%;
        height: 220px;
        margin-bottom: 10px
    }

    .related-news-img img {
        width: 100%;
        height: 100%;
        border-radius: 2px
    }

    .related-news-heading,
    .trending-heading {
        color: var(--secondary-clr);
        font-size: 16px
    }

    .related-news-hr,
    .trending-hr {
        margin: 5px 0 10px
    }

    .related-news-heading-para h1 {
        margin: 0;
        font-size: 16px
    }

    .related-news-heading-para p {
        margin: 0 0 5px
    }

    .related-news-p-1 {
        padding-top: 5px;
        font-size: 12px
    }

    .trending {
        width: 100%;
        margin: 0
    }

    .trending-img-hr {
        margin: 10px 0
    }

    .trending-img {
        width: 100%;
        height: 220px;
        margin-bottom: 5px
    }

    .trending-img-para {
        display: block;
        align-items: center
    }

    .trending-p-1 {
        margin: 0;
        font-size: 14px
    }

    .trending-p-2 {
        margin: 5px 0 0;
        font-size: 12px
    }
}

@media only screen and (max-width:50rem) and (min-width:31rem) {
    nav {
        width: 100%
    }

    .navBar {
        width: 90%;
        min-height: 70px
    }

    .logo {
        width: 60px
    }

    /* .navMenu {
        position: fixed;
        display: block;
        background-color: #efefef;
        height: 100vh;
        width: 100%;
        top: 70px;
        right: -100%;
        transition: .5s
    }

    .navMenu li {
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 4rem
    } */

    .dis-none {
        display: none
    }

    .dis-none-inhr {
        display: inherit;
        border: .5px solid rgba(0, 0, 0, .56);
        border-radius: 20px;
        text-decoration: none
    }

    .media-screen p {
        font-size: 16px;
        padding: 8px 100px;
        margin-top: 0;
        color: #000
    }

    .menu-search-btn {
        display: flex;
        align-items: center
    }

    .menu-search-btn .search-btn {
        width: 25px;
        margin-right: 2rem
    }

    .menu-search-btn .search-btn img {
        width: 100%;
        height: 100%
    }

    #checkbtn img {
        width: 35px;
        height: 35px
    }

    #check:checked~ul {
        right: 0
    }
}

@media only screen and (max-width:75rem) and (min-width:50rem) {
    nav {
        width: 100%
    }

    .navBar {
        width: 90%;
        min-height: 70px
    }

    .logo {
        width: 70px
    }
}

@media only screen and (max-width:50rem) and (min-width:31rem) {

    .first-div,
    .first-heading-div,
    .heading,
    .related-news {
        width: 100%
    }

    .maindiv,
    .second-img {
        margin-top: 10px
    }

    #container {
        width: 90%;
        margin: 90px auto 50px
    }

    .second-div {
        display: none
    }

    .first-heading-div h1 {
        font-size: 18px;
        margin-bottom: 10px
    }

    .heading h1,
    .heading p,
    .related-news-p-2,
    .wri-name,
    .written-by {
        font-size: 16px
    }

    .written-by {
        opacity: .5;
        margin-right: 5px
    }

    .wri-name {
        margin-bottom: 5px
    }

    .heading {
        margin-bottom: 15px
    }

    .heading-hr {
        background-color: #ccc;
        width: 100%;
        height: .5px;
        margin-bottom: 20px;
        opacity: .5
    }

    .profile-img {
        width: 50px;
        height: 50px;
        margin-right: 10px
    }

    .icon-img,
    .like-comment {
        width: 35px;
        height: 35px
    }

    .icon a {
        margin-left: 8px
    }

    .date {
        font-size: 14px;
        opacity: .5;
        margin-bottom: 0
    }

    .like-comment {
        margin-right: 8px
    }

    .first-img,
    .second-img {
        height: 400px;
        margin-bottom: 10px;
        width: 100%
    }

    .maindiv {
        display: block
    }

    .first-img-paras p {
        margin-bottom: 10px;
        font-size: 16px
    }

    .second-img img,
    .trending-img img {
        width: 100%;
        height: 100%
    }

    .second-img-paras p {
        margin-bottom: 10px;
        font-size: 18px
    }

    #related-trending {
        display: block;
        width: 90%;
        margin: 150px auto auto
    }

    .related-news-img-para {
        display: block;
        align-items: center;
        margin: 0 0 20px
    }

    .related-news-img,
    .trending-img {
        width: 100%;
        height: 300px;
        margin-bottom: 10px
    }

    .related-news-img img {
        width: 100%;
        height: 100%;
        border-radius: 2px
    }

    .related-news-heading,
    .trending-heading {
        color: var(--secondary-clr);
        font-size: 18px
    }

    .related-news-hr,
    .trending-hr {
        margin: 5px 0 20px
    }

    .related-news-heading-para h1 {
        margin: 0;
        font-size: 18px
    }

    .related-news-heading-para p {
        margin: 0 0 10px
    }

    .related-news-p-1 {
        padding-top: 10px;
        font-size: 14px
    }

    .trending {
        width: 100%;
        margin: 0
    }

    .trending-img-hr {
        margin: 10px 0
    }

    .trending-img-para {
        display: block;
        align-items: center
    }

    .trending-p-1 {
        margin: 0;
        font-size: 16px
    }

    .trending-p-2 {
        margin: 10px 0 0;
        font-size: 14px
    }
}

@media only screen and (max-width:75rem) and (min-width:51rem) {

    .first-div,
    .first-heading-div,
    .heading,
    .related-news {
        width: 100%
    }

    .maindiv,
    .second-img {
        margin-top: 10px
    }

    #container {
        width: 90%;
        margin: 110px auto 50px
    }

    .second-div {
        display: none
    }

    .first-heading-div h1 {
        font-size: 18px;
        margin-bottom: 10px
    }

    .heading h1,
    .heading p,
    .related-news-p-2,
    .wri-name,
    .written-by {
        font-size: 16px
    }

    .written-by {
        opacity: .5;
        margin-right: 5px
    }

    .wri-name {
        margin-bottom: 5px
    }

    .heading {
        margin-bottom: 15px
    }

    .heading-hr {
        background-color: #ccc;
        width: 100%;
        height: .5px;
        margin-bottom: 20px;
        opacity: .5
    }

    .profile-img {
        width: 50px;
        height: 50px;
        margin-right: 10px
    }

    .icon-img,
    .like-comment {
        width: 35px;
        height: 35px
    }

    .icon a {
        margin-left: 8px
    }

    .date {
        font-size: 14px;
        opacity: .5;
        margin-bottom: 0
    }

    .like-comment {
        margin-right: 8px
    }

    .first-img,
    .second-img {
        height: 450px;
        margin-bottom: 10px;
        width: 100%
    }

    .maindiv {
        display: block
    }

    .first-img-paras p {
        margin-bottom: 10px;
        font-size: 16px
    }

    .second-img img,
    .trending-img img {
        width: 100%;
        height: 100%
    }

    .second-img-paras p {
        margin-bottom: 10px;
        font-size: 18px
    }

    #related-trending {
        display: block;
        width: 90%;
        margin: 150px auto auto
    }

    .related-news-img-para {
        display: block;
        align-items: center;
        margin: 0 0 20px
    }

    .related-news-img,
    .trending-img {
        width: 100%;
        height: 400px;
        margin-bottom: 10px
    }

    .related-news-img img {
        width: 100%;
        height: 100%;
        border-radius: 2px
    }

    .related-news-heading,
    .trending-heading {
        color: var(--secondary-clr);
        font-size: 18px
    }

    .related-news-hr,
    .trending-hr {
        margin: 5px 0 20px
    }

    .related-news-heading-para h1 {
        margin: 0;
        font-size: 18px
    }

    .related-news-heading-para p {
        margin: 0 0 10px
    }

    .related-news-p-1 {
        padding-top: 10px;
        font-size: 14px
    }

    .trending {
        width: 100%;
        margin: 0
    }

    .trending-img-hr {
        margin: 10px 0
    }

    .trending-img-para {
        display: block;
        align-items: center
    }

    .trending-p-1 {
        margin: 0;
        font-size: 16px
    }

    .trending-p-2 {
        margin: 10px 0 0;
        font-size: 14px
    }
}

/* =============================== details page media css end here ========================== */


/* ==================================== pagination media css starts here =========================== */
@media only screen and (max-width: 30rem) {
    .card-content {
        width: 90%;
        margin-top: 5rem;
    }

    .related-trending {
        display: block;
    }

    .related-trending a {
        display: block;
    }

    .pagi-card .rl-td-heading {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .related-card-info h3 {
        font-size: 18px;
    }

    .related-card-img {
        width: 100%;
        height: 160px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .related-card-img img {
        border-radius: 3px;
    }

    .related-card-info {
        width: 100%;
    }

    .related-card-info p {
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .related-card-info span {
        font-size: 14px;
    }

    .trending-card-img {
        width: 100%;
        height: 160px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .trending-card-img img {
        border-radius: 3px;
    }

    .trending-card-info {
        width: 100%;
    }

    .trending-card-info h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .trending-card-info span {
        font-size: 14px;
    }



    /* ============================ pagination media css strat here ================== */

    .pagination {
        margin: auto;
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .current-page,
    .dots {
        background: #ccc;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
    }

    .pagination li a {
        font-size: 14px;
        line-height: 30px;
    }

    .previous-page,
    .next-page {
        width: 60px;
    }

    .active {
        background: var(--secondary-clr);
    }

    .pagination li:hover {
        background: #ccc;
    }
}





@media only screen and (max-width:50rem) and (min-width: 30rem) {
    .card-content {
        width: 90%;
        margin-top: 5rem;
    }

    .related-trending {
        display: block;
    }

    .related-trending a {
        display: block;
    }

    .pagi-card .rl-td-heading {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .related-card-info h3 {
        font-size: 16px;
    }

    .related-card-img {
        width: 100%;
        height: 300px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .related-card-img img {
        border-radius: 3px;
    }

    .related-card-info {
        width: 100%;
    }

    .related-card-info p {
        font-size: 14px;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .related-card-info span {
        font-size: 12px;
    }

    .trending-card-img {
        width: 100%;
        height: 300px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .trending-card-img img {
        border-radius: 3px;
    }

    .trending-card-info {
        width: 100%;
    }

    .trending-card-info h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .trending-card-info span {
        font-size: 12px;
    }



    /* ============================ pagination media css strat here ================== */

    .pagination {
        margin: auto;
        display: flex;
        align-items: center;
        width: 90%;
        margin-top: 1rem;
        margin-bottom: 2rem;
        justify-content: center;
    }

    .current-page,
    .dots {
        background: #ccc;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
    }

    .pagination li a {
        font-size: 14px;
        line-height: 30px;
    }

    .previous-page,
    .next-page {
        width: 60px;
    }

    .active {
        background: var(--secondary-clr);
    }

    .pagination li:hover {
        background: #ccc;
    }
}



@media only screen and (max-width:69rem) and (min-width:50rem) {
    .m-mTop1 {
        margin-top: 1rem;
    }

    .card-content {
        width: 90%;
        margin-top: 4rem;
    }

    .related-trending {
        width: 100%;
        display: block;
    }

    .related {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1rem;
    }

    .related-card {
        margin-bottom: 0;
    }

    .related-card a {
        display: block;
        width: 100%;
    }

    .related-card-info {
        width: 100%;
    }

    .related-card-img {
        width: 100%;
        height: 14rem;
        margin-right: 0px;
        margin-bottom: 7px;
    }

    .related-card-info p {
        margin-top: 7px;
        margin-bottom: 7px;
    }

    .trending {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 1rem;
    }

    .trending-card {
        margin-bottom: 0;
    }

    .trending-card a {
        display: block;
        width: 100%;
    }

    .trending-card-img {
        width: 100%;
        height: 14rem;
        margin-right: 0px;
        margin-bottom: 7px;
    }

    .trending-card-info {
        width: 100%;
    }

    .trending-card-info h3 {
        margin-bottom: 7px;
    }
}

@media only screen and (max-width:75rem) and (min-width:69rem) {
    .card-content {
        width: 90%;
        margin-top: 4rem;
    }

    .related-trending {
        width: 100%;
        gap: 1rem;
    }

    .related-card-img {
        width: 24rem;
        height: 12rem;
        margin-right: 10px;
    }
}

@media only screen and (max-width:1600px) and (min-width:1200px) {
    .related-trending {
        gap: 1.5rem;
    }
}

/* ==================================== pagination media css end here =========================== */

/* ============================= footer media css starts here ================================== */

@media only screen and (max-width:30rem) {
    .form-div {
        width: 90%;
        display: block;
        margin: auto
    }

    .form-div h3 {
        font-size: 1.4rem;
        margin-bottom: .5rem
    }

    .footer-grid ul li a,
    .form-div p,
    .grid-1 p {
        font-size: 14px
    }

    .form-div form {
        margin-top: 10px
    }

    .form-div form input {
        height: 36px;
        width: 100%
    }

    .form-div form input::placeholder {
        font-size: 14px
    }

    .form-div form button {
        padding: 10px 20px;
        font-size: 14px
    }

    .footer_logo {
        width: 46px
    }

    .copyright,
    .footer-grid {
        display: block;
        width: 90%
    }

    .footer-grid {
        margin: 10px auto auto
    }

    .footer-grid2 {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .grid-1 p {
        margin-bottom: 10px
    }

    .footer-icon {
        margin-bottom: 2rem;
        justify-content: center;
    }

    .footer-icon img {
        width: 25px
    }

    .footer-line {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem
    }

    .relative span {
        font-size: 1.3rem;
    }

    .relative li a {
        font-size: 1rem !important;
    }

    .m-mTop4rem {
        margin-top: 4rem
    }

    .m-mTop8rem {
        margin-top: 8rem
    }

    .footer-line-2 {
        width: 100%;
        margin-top: 1.5rem;
        margin-bottom: 1rem
    }
}

@media only screen and (max-width:50rem) and (min-width:30rem) {
    .form-div {
        width: 90%;
        display: block;
        margin: auto
    }

    .form-div h3 {
        font-size: 1.4rem;
        margin-bottom: .5rem
    }

    .footer-grid ul li a,
    .form-div p,
    .grid-1 p {
        font-size: 14px
    }

    .form-div form {
        margin-top: 10px
    }

    .form-div form input {
        height: 36px;
        width: 100%
    }

    .form-div form input::placeholder {
        font-size: 14px
    }

    .form-div form button {
        padding: 10px 20px;
        font-size: 14px
    }

    .footer_logo {
        width: 46px
    }

    .copyright,
    .footer-grid {
        display: block;
        width: 90%
    }

    .footer-grid {
        margin: 10px auto auto
    }

    .footer-grid2 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem
    }

    .grid-1 p {
        margin-bottom: 10px
    }

    .footer-icon {
        margin-bottom: 3rem
    }

    .footer-icon img {
        width: 25px
    }

    .footer-line {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem
    }

    .m-mTop4rem {
        margin-top: 4rem
    }

    .m-mTop8rem {
        margin-top: 8rem
    }

    .footer-line-2 {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem
    }
}

@media only screen and (max-width:1350px) and (min-width:50rem) {

    .copyright,
    .form-div {
        width: 90%
    }

    .form-div {
        margin: auto
    }

    .footer-grid {
        width: 90%;
        margin-top: 10px;
        gap: 30px
    }

    .footer-grid2 {
        gap: 30px
    }
}

/* ============================= footer media css end here ================================== */