@media (min-width: 1200px) {
    .comm-blogs-sec .comm-blogs-wrapper .blog-content-wrapper .blog-post .comm-blog-box {
       height: calc(100% - 15px);
    }
}
@media (min-width: 320px) and (max-width: 767.98px) {
    /* Hero section responsive start */
    .comm-hero-sec{
        padding: 67px 0 50px 0;
    }
    .comm-hero-sec .comm-hero-wrapper{
        gap: 30px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .title-upper-wrapper .border-wrapper h4{
        padding: 10px 20px;
        font-size: 11px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .title-upper-wrapper h1{
        font-size: 28px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .title-upper-wrapper p{
        font-size: 16px;
        line-height: 26px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .hero-btn-wrapper{
        flex-direction: column;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .hero-btn-wrapper a{
        font-size: 17px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-slider-wrapper img{
        height: 230px !important;
        border-radius: 10px !important;
    }
    .comm-event-sec{
        padding: 25px 0;
    }
    .comm-event-sec .comm-event-sec-heading{
        text-align: unset;
    }
    .comm-event-sec .comm-event-sec-heading h2{
        font-size: 36px;
        line-height: 43px;
        padding: 0px 0;
    }
    .comm-event-sec .comm-event-sec-heading p{
        font-size: 16px;
        line-height: 26px;
        font-weight: 400;
    }
    .comm-event-sec .comm-upcoming-events-btns-wrapper .df-event-sync-button-wrapper {
        position: absolute;
        left: 0px;
        bottom: -69px;
    }
    .comm-event-sec .comm-upcoming-events-btns-wrapper .df-event-sync-button-wrapper a.btn-theme-primary{
        line-height: 18px;
        font-size: 13px;
        padding: 12px 12px;
    }
    .comm-event-sec .comm-event-tabs .comm-event-pills{
        position: absolute;
        bottom: -20px;
    }
    .comm-event-sec .comm-upcoming-events-btns-wrapper .view-all-event {
        position: absolute;
        right: 0px;
        top: 30px;
    }
    .comm-event-sec .comm-upcoming-events-btns-wrapper .view-all-event a.btn-theme-secondary{
        line-height: 18px;
        font-size: 13px;
        padding: 12px 12px;
    }
    .comm-event-sec #pills-events-list-content{
        padding-top: 70px;
    }
    .comm-events-list-wrapper .event-box{
        width: 100%;
        height: auto;
    }
    .comm-events-list-wrapper .event-box .img-box img{
        width: 100%;
        object-fit: cover;
    }
    .comm-event-sec .comm-events-list-wrapper .event-box .img-box .image-icon{
        width: 70px;
        height: 80px;
    }
    .comm-events-list-wrapper .event-box .thumbnail-text{
        font-size: 20px;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4.event-short-title{
        display: none;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4{
        font-size: 17px;
        line-height: 24px;
    }
    .comm-events-list-wrapper .event-box .event-content-box .event-content-box-meta span{
        font-size: 13px;
    }
    .comm-events-list-wrapper .event-box .past-event-date-box{
        right: 10px;
    }
    .comm-events-list-wrapper .event-box .event-date-box{
        right: 10px;
    }
    .comm-event-sec .comm-event-sec-heading a {
        color: #1E1E1E;
    }
    .event-cards-pagination .events-arrows-wrapper a {
        width: 35px;
        height: 35px;
    }
    .comm-event-sec .df-content-wrapper-box .calendar-event-arrows-wrapper{
        position: unset;
        transform: unset;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 35px;
        font-size: 13px;
        color: #111111;
    }
    .df-content-wrapper-box .select2-container {
        width: unset;
        margin-right: unset;
        margin-top: 32px;
    }
    .comm-upcoming-events-btns-wrapper:has(#pills-view-calender-events-tab.active) .df-event-sync-button-wrapper {
        right: 0px !important;
        display: block;
        top: 38px !important;
        text-align: center;
    }
    .comm-event-sec .df-content-wrapper-box h4{
        font-size: 18px;
        margin-right: 30px;
        margin-left: 30px;
    }
    /* Notification section responsive start */
    .comm-notification-sec{
        padding: 30px 0;
    }
    .comm-notification-sec .notification-sec-title h2 {
        font-size: 21px;
        font-weight: 600;
        line-height: 36px;
    }
    .comm-notification-sec .comm-notification-wrapper {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .comm-notification-sec .notification-box{
        max-width: unset;
    }
    .comm-notification-sec .notification-box{
        margin-bottom: 20px;
    }

    /* Blog section responsive start */
    .comm-blog-section {
        padding: 50px 0;
    }
    .comm-blog-section .comm-blog-title a{
        color: #9050E9;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .img-box span {
        top: 20px;
        font-size: 26px;
        line-height: 30px;
    }
    .comm-blog-section .comm-blog-title h1{
        font-size: 24px;
        line-height: 26px;
        text-align: center;
    }
    .comm-blog-section .comm-blog-title p{
        font-size: 16px;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta h5, .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta a {
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
    }
    .comm-blog-section .comm-blog-tabs ul{
        display: flex;
        justify-content: center;
    }
    /* Circle section responsive start */
    .comm-circle-section {
        padding: 64px 20px;
    }
    .comm-circle-section .comm-circle-imgs .circle-top-img{
        max-height: 285px;
        width: 100%;
        border-radius: 2px;
    }
    .comm-circle-section .comm-circle-imgs .circle-2nd-img{
        left: -29px;
        object-fit: contain;
        border-radius: unset;
        max-width: 93px;
        max-height: 89px;
    }
    .comm-circle-section .comm-circle-imgs .circle-3rd-img{
        max-width: 93px;
        border-radius: unset;
        max-width: 89px;
        right: -27px;
        object-fit: contain;
    }
    .comm-circle-section .comm-circle-content-box{
        margin-top: 20px;
    }
    .comm-circle-section .comm-circle-content-box h2 {
        font-size: 25px;
        line-height: 26px;
    }
    /* Hackathon section responsive start */
    .comm-hackathon-sec {
        padding: 64px 20px;
    }
    .comm-hackathon-sec .comm-hackathon-content{
        margin-bottom: 20px;
    }
    .comm-hackathon-sec .comm-hackathon-content{
        gap: 20px;
    }
    .comm-hackathon-sec p.hackathon-title-line{
        margin-left: 0;
    }
    .comm-hackathon-sec .hackathon-event-box{
        margin-left: 0;
    }
    .comm-hackathon-sec .hackathon-img-box img{
        width: 100%;
        height: auto;
    }
    /* Open Roles section responsive start */
    .comm-open-roles{
        padding: 64px 20px;
    }
    .comm-open-roles .open-roles-nav-tab li button{
        background-color: unset !important;
        color: #000 !important;
    }
    .comm-open-roles .open-roles-nav-tab li button.active{
        color: #9050E9 !important;
    }
    .comm-open-roles .open-roles-title h2 {
        font-size: 35px;
        line-height: 36px;
    }
    .comm-open-roles .open-role-wrapper .open-role {
        height: 150px;
        width: auto;
    }
    .comm-open-roles .open-role .job-title-wrapper .job-title h5{
        font-size: 17px;
        line-height: 28px;
    }
    .comm-open-roles .open-role .role-desc p{
        font-size: 15px;
    }
    /* FeedBack section responsive start */
    .comm-join-sec {
        padding: 64px 20px;
    }
    .comm-join-sec .joining-content-box{
        margin-top: 20px;
    }
    .comm-join-sec .joining-content-box .footer-btn-wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .comm-join-sec .joining-content-box .footer-btn-wrapper a.btn-theme-primary{
        margin-bottom: 20px;
        text-align: center;
        margin-right: unset;
    }
    .comm-join-sec .joining-content-box .footer-btn-wrapper a.btn-theme-secondary{
        padding: 12px 8px;
    }
    /* Footer section responsive start */
    .comm-footer {
        padding: 48px 20px;
    }
    .comm-footer .comm-left-content .content-box .comm-email-box {
        display: grid;
    }
    .comm-footer .comm-left-content .content-box .comm-email-box input[type="email"]{
        width: 100%;
    }
    .comm-footer .comm-left-content{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .comm-footer .comm-right-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .comm-copyright-container .copy-right-wrapper {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .comm-copyright-container .copy-right-text{
        margin-top: 35px;
        text-align: center;
    }
    .comm-footer .comm-right-content .useful-links-box{
        width: unset;
    }
    .comm-copyright-container .copy-right-wrapper .footer-page-links ol{
        display: flex;
        gap: 20px;
    }
    /* Authentication-page responsive css */
    .auth-title {
        font-size: 40px;
    }
   
}
@media (min-width: 768px) and (max-width: 991.98px) { 

    /* Hero section responsive start */
    .comm-hero-sec {
        padding: 50px 0px;
        height: auto;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .title-upper-wrapper h1{
        font-size: 40px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .title-upper-wrapper p{
        font-size: 18px;
        line-height: 30px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-slider-wrapper img{
        height: 385px !important;
    }

    /* Event section responsive start */
    .comm-event-sec {
        padding: 50px 0;
    }
    .comm-events-list-wrapper .event-box{
        width: 320px;
        height: calc(100% - 20px);
    }
    .comm-event-sec .comm-events-list-wrapper .event-box .img-box .image-icon{
        width: 80px;
        height: 86px;
    }
    .comm-events-list-wrapper .event-box .thumbnail-text{
        font-size: 23px;
    }
    .comm-events-list-wrapper .event-box .event-date-box {
        width: 70px;
        height: 67px;
        top: 8px;
    }
    .comm-events-list-wrapper .event-box .past-event-date-box {
        width: 70px;
        height: 67px;
        top: 8px;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4.event-short-title{
        display: block;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4.event-title{
        display: none;
    }
    .comm-events-list-wrapper .event-box .img-box img{
        height: auto;
    }
    .comm-events-list-wrapper .event-box .event-date-box p {
        line-height: 12px;
        font-size: 11px;
    }
    .comm-events-list-wrapper .event-box .past-event-date-box p {
        line-height: 12px;
        font-size: 11px;
    }
        /* Blog section responsive start */
    .comm-blog-section {
        padding: 50px 0;
    }
    .comm-blog-section .comm-blog-title h1 {
        font-size: 45px;
        line-height: 50px;
        margin: 0;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .blog-content-box{
        padding: 15px;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta h5, .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta a{
        font-size: 17px;
        line-height: 20px;
    }
    .comm-blog-section .comm-blog-wrapper .view-all-blog{
        padding-top: 10px;
    }
    /* Circle section responsive start */
    .comm-circle-section {
        padding: 50px 0;
    }
    .comm-circle-section .comm-circle-imgs .circle-top-img{
        height: auto;
        width: 100%;
    }
    .comm-circle-section .comm-circle-imgs .circle-2nd-img{
        width: 110px;
        height: 110px;
    }
    .comm-circle-section .comm-circle-imgs .circle-2nd-img{
        left: -38px;
    }
    .comm-circle-section .comm-circle-imgs .circle-3rd-img{
        max-width: 110px;
        max-height: 110px;
        bottom: 18px;
        right: -38px;
    }
    .comm-circle-section .comm-circle-content-box{
        margin-left: 30px;
    }
    .comm-circle-section .comm-circle-content-box h2{
        font-size: 31px;
        line-height: 30px;
    }
    /* Hackathon section responsive start */
    .comm-hackathon-sec {
        padding: 64px 20px;
    }
    .comm-hackathon-sec p.hackathon-title-line{
        margin-left: 0;
    }
    .comm-hackathon-sec .hackathon-event-box {
        margin-left: 0;
    }
    .comm-hackathon-sec .comm-hackathon-content{
        margin-bottom: 20px;
    }
    /* Open Roles section responsive start */
    .comm-open-roles{
        padding: 64px 20px;
    }
    
    .comm-open-roles .open-role-wrapper .open-role {
        max-width: 100%;
    }
    /* Footer section responsive start */
    .comm-footer{
        padding: 48px 20px;
    }
    .comm-footer .comm-left-content {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
     .comm-footer .comm-left-content .content-box{
        ustify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
     }
    .comm-footer .comm-left-content .content-box .comm-email-box{
        display: grid;
    }
    .comm-footer .comm-left-content .content-box .comm-email-box input[type="email"]{
        width: 100%;
    }
    .comm-footer .comm-right-content {
        display: flex;
    }
    .comm-copyright-container .copy-right-wrapper{
        display: grid;
    }
    .comm-copyright-container .copy-right-wrapper .footer-page-links ol{
        display: flex;
        left: 25px;
        right:unset;
    }
    .comm-copyright-container .copy-right-wrapper .copy-right-text{
        margin-top: 20px;
    }
  /* INDEX Page CSS */
    .comm-blogs-sec .comm-blogs-wrapper .blog-content-wrapper .blog-post .comm-blog-box {
        height: 415px;
    }
    .comm-blogs-sec .comm-blogs-wrapper .comm-blog-box .blog-more-read {
        position: absolute;
        bottom: 0;
    }

}
@media (min-width: 992px) and (max-width: 1199.98px) {
/* Hero section responsive start */
    .comm-hero-sec {
        padding: 67px 0 80px 0;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-title-wrapper .title-upper-wrapper h1{
       font-size: 55px;
    }
    .comm-hero-sec .comm-hero-wrapper .hero-slider-wrapper img{
        height: 500px !important;
    }
    /* Event section responsive start */
    .comm-event-sec {
        padding: 60px 0px;
    }
    .comm-events-list-wrapper .event-box{
        width: auto;
        height: calc(100% - 0px);
    }
    .comm-events-list-wrapper .event-box .thumbnail-text{
        font-size: 20px;
    }
    .comm-event-sec .comm-events-list-wrapper .event-box .img-box .image-icon{
        width: 70px;
        height: 87px;
    }
    .comm-events-list-wrapper .event-box .img-box img {
        height: auto;
    }
    .comm-events-list-wrapper .event-box .past-event-date-box{
        width: 70px;
        height: 50px;
        top: 9px;
        right: 10px;
    }
    .comm-events-list-wrapper .event-box .past-event-date-box p{
        font-size: 11px;
        line-height: 0px;
    }
    .comm-events-list-wrapper .event-box .past-event-date-box p.date{
     font-size: 30px;
    }
    .comm-events-list-wrapper .event-box .event-date-box {
        width: 70px;
        height: 50px;
        top: 9px;
        right: 10px;
    }
    .comm-events-list-wrapper .event-box .event-date-box p{
        font-size: 11px;
        line-height: 0px;
    }
    .comm-events-list-wrapper .event-box .event-date-box p.date{
     font-size: 30px;
    }
    .comm-events-list-wrapper .event-box .event-content-box{
        padding: 15px;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4.event-short-title{
        display: block;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4.event-title{
        display: none;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4{
        font-size: 20px;
        line-height: 25px;
    }
    /* Blog section responsive start */
    .comm-blog-section {
        padding: 50px 0;
    }
    .comm-blog-section .comm-blog-title{
        margin-bottom: 20px;
    }
    .comm-blog-section .comm-blog-title h1{
        margin: 10px 0;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .blog-content-box{
        padding: 10px;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta{
        padding: 0 10px;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta h5, .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta a{
        font-size: 18px;
        line-height: 26px;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta p{
        margin-bottom: 10px;
    }
    /* Circle section responsive start */
    .comm-circle-section{
        padding: 50px 0;
    }
    .comm-circle-section .comm-circle-imgs .circle-2nd-img{
        max-width: 125px;
        max-height: 125px;
        bottom: 18px;
        right: -45px;
        left: -29px;
    }
    .comm-circle-section .comm-circle-imgs .circle-3rd-img{
        max-width: 125px;
        max-height: 125px;
        bottom: 18px;
        right: -33px;
    }
     /* Community open section responsive start */
    .comm-open-roles .open-role .role-desc p{
        font-size: 14px;
        line-height: 128%;
    }
    /* Community join section responsive start */
    .comm-join-sec {
        padding: 64px 20px;
    }
/* Footer section responsive start */
    .comm-footer {
        padding: 48px 20px;
    }
    .comm-footer .comm-left-content {
        width: 100%;
    }
    .comm-footer .comm-right-content .useful-links-box {
        width: 135px;
    }
    /* INDEX Page CSS */
      .comm-blogs-sec .comm-blogs-wrapper .blog-content-wrapper .blog-post .comm-blog-box {
        height: 415px;
    }
    .comm-blogs-sec .comm-blogs-wrapper .comm-blog-box .blog-more-read {
        position: absolute;
        bottom: 0;
    }

}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/* Hero section responsive start */
    .comm-event-sec {
        padding: 112px 50px;
    }
    .comm-events-list-wrapper .event-box {
        width: 355px;
    }
    .comm-events-list-wrapper .event-box .event-content-box h4.event-short-title{
        display: none;
    }
    /* Circle section responsive start */
    .comm-circle-section .comm-circle-imgs .circle-2nd-img{
        max-width: 140px;
        max-height: 140px;
        left: -55px;
    }
    .comm-circle-section .comm-circle-imgs .circle-3rd-img{
        max-width: 140px;
        max-height: 140px;
        bottom: 14px;
        right: -20px;
    }
    /* Blog section responsive start */
    .comm-blog-section{
        padding: 64px 30px;
    }
    .comm-blog-section .comm-blog-title{
        margin-bottom: 30px;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .blog-content-box{
        padding: 15px;
    }
    .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta h5, .comm-blog-section .comm-blog-wrapper .comm-blog-box .content-box-meta a{
        font-size: 18px;
        line-height: 26px;
    }
    /* Footer section responsive start */
    .comm-footer {
        padding: 48px 20px;
    }
    .comm-footer .comm-left-content{
        width: 100%;
    }
    .comm-footer .comm-right-content .useful-links-box{
        width: 160px;
    }
    .comm-copyright-container .copy-right-wrapper .copy-right-text{
        margin: 0 auto;
        margin-top: 20px;
    }
}
    
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .comm-header .sb-menu .df-list {
        margin-left: 150px;
    }
}
@media (min-width: 320px) and (max-width: 767.98px) {
    .comm-header.sb-header .logo {
        text-align: unset;
    }
}
@media (min-width: 1399.98px) { 
    .comm-past-event-content-wrapper .past-event-videos .past-videos-meta .single-video-box iframe{
        width: 624px;
        height: 382px;
    }
}
/* Remaining pages mobile responsive css start */
@media (min-width: 320px) and (max-width: 767.98px) {
    /* ELSE MESSAGE FOR EACH SECTION responsive css start */
    .sec-else-message p{
        font-size: 14px;
    }
    /* Pages CSS Starts */
    .comm-page-inner-content{
        padding: 50px 0;
    }
    .comm-page-inner-content .inner-content-wrapper ul{
        padding-left: 25px;
    }
    .comm-page-inner-content .inner-content-wrapper table th{
        padding: 7px;
        font-size: 12px;
    }
    .comm-page-inner-content .inner-content-wrapper table td{
        font-size: 12px;
        line-height: 28px;
        padding: 7px;
    }
/* upcoming Hackathon detail page mobile responsive css start */
    .comm-event-detail-sec{
        padding: 80px 0 64px 0;
        max-height: unset;
    }
    .comm-event-detail-sec .event-detail-wrapper .event-left-box .event-breadcrumb {
        gap: 10px;
        flex-wrap: wrap;
    }
    .comm-event-detail-sec .event-detail-wrapper{
        display: grid;
        gap: 30px;
        height: unset;
    }
    .comm-event-detail-sec .event-detail-wrapper .event-left-box {
        max-width: 100%;
    }
    .comm-event-detail-sec .event-detail-wrapper .event-left-box .event-meta-box .comm-event-title-wrapper h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .event-left-box .event-meta-box .hackathon-prize-box{
        width: 100%;
    }
    .comm-event-detail-sec .event-detail-wrapper .event-right-box img {
        max-width: 100%;
    }
    .past-event-sec{
        padding: 0 0 64px 0;
    }
    .comm-past-event-content-wrapper{
        max-width: 100%;
        gap: 15px;
    }
    .comm-past-event-content-wrapper .hackathon-summary-details{
        padding: 10px 10px;
    }
    .comm-past-event-content-wrapper .hackathon-summary-details h3{
        font-size: 25px;
    }
    .comm-past-event-content-wrapper .hackathon-resources{
        padding: 10px 10px;
        flex-wrap: wrap;
    }
    .comm-past-event-content-wrapper .hackathon-resources h3{
        font-size: 29px;
    }
    .comm-past-event-content-wrapper .hackathon-resources .past-event-summary-meta .item{
        flex-wrap: wrap;
    }
    .comm-past-event-content-wrapper .hackathon-resources .hackathon-rules-content ol, .comm-past-event-content-wrapper .hackathon-resources .hackathon-rules-content ul{
        padding-left: 1rem;
    }
    .hackathon-participation-content strong{
        font-size: 20px;
    }
    .comm-past-event-content-wrapper .hackathon-resources .hackathon-questions-content a{
        width: calc(100% - 166px);
    }
    .jury-items{
        grid-template-columns: unset;
    }
    .comm-hackathon-faq-section{
        min-height: unset;
    }
    /* past Event Remaining CSS */
    .event-left-box .event-meta-box .event-countdown-box{
        width: auto;
        padding:10px 17px;
        justify-content: space-evenly;
    }
    .comm-past-event-content-wrapper .past-event-videos .past-videos-meta .single-video-box iframe{
        height: 250px;
        width:auto;
    }
     /* upcoming Event Remaining CSS */
     .event-left-box .event-meta-box .event-countdown-box .event-time-unit{
        width: auto;
     }
    .event-left-box .event-meta-box .event-countdown-box .event-time-unit .time-meta {
        width: auto;
    }
    .upcoming-event-slot-sec{
        padding:0;
        width: auto;
    }
    .event-left-box .past-event-btn-wrapper {
        display: grid;
    }
    /* All Circles Page  */
    .comm-all-circle-sec{
        padding: 45px 0px 50px 0px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circle-top-wrapper .top-heading h1{
        font-size: 28px;
        line-height: 35px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circle-top-wrapper .top-heading p{
        font-size: 16px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper{
        padding: 50px 0 0 0;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .circles-list-heading{
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 25px;
        align-items: flex-start;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .circles-list-heading .circles-btn-group .comm-all-circles-tab{
        gap: 10px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .circles-list-heading .circles-btn-group .comm-all-circles-tab li button{
        padding: 7px 20px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .circles-list-heading .circles-search-box{
        width: 100%;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .comm-circles-list{
        margin: 18px 0 10px 0;
        padding: 14px 6px 10px 6px;
    }
    .circle-info-wrapper{
        display: none;
    }
    .circle-info-mobile{
        display: block !important;
        position: relative;
        margin: 15px 0;
    }
    .circle-info-mobile:last-of-type{
        margin-bottom: 0;
    }
    .circle-info-mobile .circle-inner-info{
        display: flex;
        justify-content: space-between;
        padding: 32px 5px 15px 0px;
        position: relative;
    }
    .circle-info-mobile::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 98%;
        border-bottom: 1px solid #CECECE;
    }
    .circle-info-mobile:last-child::after {
        content: none;
        border: none;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner{
        display: flex;
        align-items: flex-start;
        gap: 9px;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner .circle-img{
        min-width: 45px;
        min-height: 45px;
        background-color: #F7F9FA;
        border-radius: 100px;
        align-items: center;
        display: flex;
        justify-content: center;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner .circle-img.workgroup-bg{
        background: linear-gradient(180deg,rgba(144, 80, 233, 1) 0%, rgba(225, 8, 254, 1) 100%) !important;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner .circle-img.workgroup-bg h3.wg-heading{
        font-size: 15px;
        font-weight: 600;
        color: #FFF;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner .circle-img img{
        width: 34px;
        height: 34px;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner .single-circle-detail{
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-width: 314px;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner .single-circle-detail h2{
        font-size: 15px;
        color: #1E1E1E;
        font-weight: 700;
    }
    .circle-info-mobile .circle-inner-info .circle-meta-inner .single-circle-detail p{
        margin-bottom: 14px;
        font-size: 14px;
        color: #8C8C8C;
    }
    .circle-info-mobile span{
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 12px;
        color: #03B000;
        font-weight: 600;
    }
    .circle-info-wrapper .circle-info-inner-wrapper{
        grid-template-columns: auto;
        padding: 0px 0px 30px 0px;
    }
    .circle-info-inner-wrapper::before,.circle-info-inner-wrapper::after{
        content: none;
    }
    .circle-info-wrapper:hover .circle-info-inner-wrapper {
        padding-bottom:30px;
        margin-bottom: unset;
        min-height: unset;
        background-color: unset;
        padding-right: unset;
        transform: unset;
        border-radius: unset;
    }
    .circle-info-wrapper .single-circle-wrapper{
        justify-content: unset;
        flex-direction: column;
        padding: 10px;
        gap: 11px;
    }
    .circle-info-wrapper .single-circle-wrapper .circle-img{
        width: 70px;
        height: 70px;
    }
    .circle-info-wrapper .single-circle-wrapper .circle-img img{
        width: 52px;
        height: 52px;
    }
    .circle-info-wrapper:hover .single-circle-wrapper .circle-img img{
        transform: unset;
    }
    .circle-info-wrapper .single-circle-wrapper .single-circle-detail{
        margin-top: 0;
    }
    .circle-info-wrapper:hover .single-circle-wrapper .single-circle-detail{
        transform: unset;
    }
    .circle-info-wrapper .single-circle-wrapper .single-circle-detail h2{
        font-size: 15px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper{
        padding: 0 5px 0 5px;
        margin-top: 15px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper > *{
        margin-right: 10px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper span.hiring-title{
        font-size: 13px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper .view-circle-btn{
        padding: 2px 17px;
    }
    .circle-info-wrapper:hover .view-circle-btn{
        border: 1px solid #9050E9;
        background-color: transparent;
        color: #9050E9;
        transform: unset;
    }
    .circle-info-wrapper:hover .comm-view-circle-wrapper .view-icon{
        transform: unset;
    }
    .comm-all-circles-view .comm-circles-list::-webkit-scrollbar-track {
        background: transparent;
        margin-top: 20px;   /* Push scrollbar down */
        margin-bottom: 20px; /* Optional: keep bottom rounded too */
    }
    .not-found-sec{
        padding: 0 0px 50px 0px;
    }
    .not-found-wrapper{
        padding: 30px 20px 35px 20px;
    }
    .not-found-wrapper .not-found-main{
        gap: 20px;
    }
    .not-found-wrapper .not-found-main .not-found-title{
        gap: 15px;
    }
    .not-found-wrapper .not-found-main .not-found-title h1{
        font-size: 18px;
    }
    .not-found-wrapper .not-found-main .not-found-title p{
        font-size: 14px;
    }
    .not-found-wrapper .not-found-main .general-applic{
        font-size: 13px;
        padding: 10px 24px;
    }


    /* Circle Detail page */
    .comm-circle-detail-sec{
        padding: 45px 0 50px 0;
        overflow: unset;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content{
        gap: 10px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-content.workgroup-content{
        gap: 10px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content{
        gap: 0;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content img{
        max-width: 200px;
        height: 200px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content h2{
        font-size: 28px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-content{
        gap: 20px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-content p{
        font-size: 16px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content .workgroup-img-wrapper{
        width: 100px;
        height: 100px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content .workgroup-img-wrapper h3{
        font-size: 30px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-content.workgroup-content .key-responsibilities h5{
        font-size: 17px;
    }
    .circle-team-members-sec{
        padding: 50px 0 30px 0;
    }
    .circle-team-members-sec .circle-members-content-box{
        gap: 20px;
    }
    .circle-team-members-sec .circle-members-content-box .circle-members-head h2{
        font-size: 24px;
    }
    .circle-team-members-sec .circle-members-content-box .circle-members-head p{
        font-size: 16px;
    }
    .circle-team-members-sec .circle-members-content-box .circle-members-wrapper .circle-member-box img.member-profile-img{
        width: 90px;
        height: 90px;
    }
    .circle-members-content-box .circle-members-wrapper .circle-member-box .circle-member-detail .member-name-inner h6{
        font-size: 12px;
    }
    .circle-members-content-box .circle-members-wrapper .circle-member-box .circle-member-detail p{
        font-size: 14px;
        margin-bottom: 0;
    }
    .circle-members-wrapper .circle-member-box .circle-member-detail a.add_circle_blogs:hover{
        background-color: transparent;
        color: #9050E9;
    }
    .circle-open-roles-sec{
        padding: 50px 0 50px 0;
    }
    .circle-open-roles-sec .circle-open-roles-wrapper{
        gap: 30px;
    }
    .circle-open-roles-sec .circle-open-roles-wrapper .open-roles-heading h2 {
        font-size: 24px;
    }
    .circle-open-roles-sec .circle-open-roles-wrapper .open-roles-heading p {
        font-size: 16px;
    }
    .circle-open-roles-sec .all-roles-content-box{
        gap: 15px;
    }
    .open-role-main{
        padding: 23px 13px 13px 17px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper{
        gap:7px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title{
        align-items: flex-start;
        gap: 34px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title span{
        font-size: 11px;
        text-wrap: nowrap;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .open-role-detail-wrapper a.apply-btn{
        line-height: 12px;
        padding: 12px 15px;
    }
    .open-role-main .open-role-detail-wrapper span{
        display: none;
    }
    .open-role-main .open-role-detail-wrapper img.view-role-mobile{
        display: block !important;
        width: 10px;
        height: 16px;
    }
    .open-role-main .job-details-wrapper{
        gap: 10px !important;
        flex-wrap: wrap;
    }
    .open-role-main .job-details-wrapper .job-detail-meta span{
        font-size: 16px;
        line-height: 21px;
    }
    .comm-blog-section .comm-blog-title{
        margin-bottom: 30px;
        gap: 5px;
    }
    .comm-blog-section .comm-blog-wrapper .view-all-blog{
        padding-top: 10px;
    }
    .comm-useful-links-sec{
        padding: 60px 0px;
    }
    .comm-useful-links-sec .useful-links-wrapper{
        gap: 15px;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-heading{
        gap: 5px;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-heading h3{
        font-size: 24px;
        text-align: center;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-heading p{
        text-align: center;
        font-size: 16px;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper{
        padding: 20px 10px 20px 20px;
        gap: 15px;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper:hover {
        box-shadow: none; 
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper:hover > img {
        scale: unset; 
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper.workgroup-link-meta:hover {
        box-shadow: none; 
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper.workgroup-link-meta:hover > img {
        scale: unset; 
    }
    /* All Hackathons page css */
    .comm-hacakathon-sec{
        padding: 50px 0;
    }
    .comm-hacakathon-sec .hackathon-page-heading{
        max-width: 100%;
        margin-bottom: 10px;
    }
    .comm-hacakathon-sec .hackathon-category-section{
        gap: 30px;
        margin-top: 15px;
    }
    .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index{
        margin-bottom: 35px;
    }
    .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index .comm-hackathon-heading-wrapper h1{
        font-size: 26px;
        line-height: 30px;
    }
    .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index .comm-hackathon-heading-wrapper p{
        font-size: 14px;
        line-height: 27px;
    }
    .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index .explore-heading{
        font-size: 30px;
        line-height: 32px;
    }
    .comm-hacakathon-sec .hackathon-page-heading .comm-page-heading-wrapper h1 {
        font-size: 25px;
        line-height: 31px;
    }
    .comm-hacakathon-sec .all-hackathons-tabs{
        flex-direction: column;
        border-bottom: none;
        width: 100%;
    }
    .hackathon-event-box .hackathon-event-date-box{
        width: 80px;
        height: 60px;
        padding: 8px 3px;
    }
    .hackathon-event-box .thumbnail-text{
        font-size: 20px;
    }
    .comm-all-events .hackathon-event-box .img-box .image-icon{
        width: 70px;
        height: 80px;
    }
    .hackathon-event-box .hackathon-event-date-box p{
        font-size: 11px;
        line-height: 20px;
    }
    .hackathon-event-box .hackathon-event-date-box p.date{
        font-size: 17px;
        line-height: 14px;
    }
    .hackathon-event-box .event-date-box{
        width: 84px;
        height: 67px;
    }
    .hackathon-event-box .past-event-date-box{
        width: 84px;
        height: 67px;
    }
    .hackathon-event-box .past-event-date-box p{
        font-size: 14px;
        line-height: 11px;
    }
    .hackathon-event-box .event-date-box p{
        font-size: 14px;
        line-height: 11px;
    }
    .hackathon-event-box .event-content-box {
        padding:15px;
    }
    .hackathon-event-box .event-content-box h4 {
        font-size: 19px;
        line-height: 26px;
    }
    .hackathon-organizers-sec{
        padding: 50px 0;
    }
    .hackathon-organizers-sec .hackathon-organizer-content-box h2{
        font-size: 25px;
        line-height: 26px;
    }
    .hackathon-organizers-sec .hackathon-organizer-content-box .organizer-member-wrapper .organizer-member-box img{
        width: 150px;
        height: 150px;
    }
    .hackathon-organizers-sec .hackathon-organizer-content-box .hackathon-contact-btn{
        width: unset;
    }
    /* BLOG Page CSS */
    .comm-blogs-sec{
        padding: 50px 0;
    }
    .comm-blogs-sec .blog-page-heading {
        margin-bottom: 20px;
    }
    .comm-blogs-sec .blog-page-heading h1 {
        font-size: 24px;
        line-height: 26px;
    }
    .comm-blogs-sec .blog-page-heading p {
        font-size: 14px;
        line-height: 24px;
    }
    .comm-blogs-sec .comm-blogs-wrapper .accordion-button{
        padding: 15px;
    }
    .comm-blogs-sec  .category-list-wrapper{
        margin-bottom: 15px;
    }
    .comm-blogs-sec .comm-blogs-wrapper .comm-blog-box .blog-meta-wrapper .content-box-meta a{
        font-size: 20px;
        line-height: 26px;
    }
    /* Blog Detail page Css */
    .comm-blog-detail-sec{
        padding: 30px 0;
    }
    .comm-blog-detail-sec .blog-detail-title h2{
        font-size: 20px;
        line-height: 32px;
    }
    .comm-blog-detail-sec .blog-img-box img{
        max-width: 100%;
    }
    .comm-blog-detail-sec .blog-desc-wrapper{
        max-width: 100%;
        padding:15px;
    }
    .comm-blog-detail-sec .blog-author-detail{
        padding-top: 20px;
    }
    /* ALL OPEN ROLES Page CSS */
    .comm-blogs-sec .open-roles-main a.btn-theme-primary{
        padding: 5px 9px;
    }
    .comm-all-roles-sec{
        padding: 55px 0px 76px 0px;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper{
        gap: 20px;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper .all-roles-title .all-roles-title-meta h1{
        font-size: 28px;
        line-height: 33px;
        word-spacing: 0;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper .all-roles-title .all-roles-title-meta p{
        font-size: 18px;
        line-height: 27px;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper img{
        height: 255px;
    }
    .all-roles-cards{
        margin: 40px 0 40px 0;
    }
    .all-roles-cards .all-roles-cards-inner{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .all-roles-card-wrapper h1{
        font-size: 28px;
        line-height: 33px;
    }
    .all-roles-card-wrapper p{
        font-size: 14px;
        line-height: 21px;
    }
    .comm-all-roles-sec .all-roles-inner p.all-role-desc{
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }
    .comm-core-value{
        margin-top: 40px;
    }
    .comm-core-value h1{
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 30px;
    }
    .comm-core-value .core-values-inner{
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }
    .core-values-wrapper{
        padding: 51px 42px;
    }
    .core-values-wrapper p{
        font-size: 16px;
        line-height: 25px;
    }
    .core-values-wrapper .core-values-inner{
        top: 11px;
        left: 11px;
    }
    .all-roles-team-sec{
        padding: 84px 20px 100px 20px;
    }
    .all-roles-team-sec .all-roles-team-wrapper{
        gap: 34px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-title p{
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    .available-role-sec{
        padding: 60px 0px 44px 0;
    }
    .available-role-sec .container{
        max-width: 100% !important;
    }
    .available-role-sec .col-12{
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .available-role-sec .available-role-head{
        gap: 5px;
    }
    .available-role-sec .available-role-head h1{
        font-size: 20px;
        line-height: 30px;
    }
    .available-role-sec .available-role-head p{
        font-size: 16px;
        text-align: center;
    }
    .available-role-sec .all-available-task-wrapper{
        margin-top: 36px;
    }
    .available-role-sec .all-available-task-wrapper .roles-btn-group{
        padding: 0 0px 0 17px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner{
        padding: 0px 17px 78px 17px;
        margin-top: 23px;
        border-radius: 0;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner .circle-task-wrapper{
        gap: 10px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner .circle-task-wrapper h1{
        margin-top: 20px;
        font-size: 20px;
        line-height: 30px;
    }
    /* Open Roles Detail page responsive start */
    .comm-open-role-detail{
        padding: 70px 0;
    }
    .comm-open-role-detail .open-role-detail-wrapper h1{
        font-size: 33px;
        line-height: 35px;
    }
    .comm-open-role-detail .open-role-description-wrapper{
        padding-top: 50px;
    }
    .comm-open-role-detail .open-role-description-wrapper .open-role-detail-meta{
        gap: 25px;
        margin-bottom: 25px;
    }
    .comm-open-role-detail .open-role-description-wrapper .open-role-detail-meta .open-role-meta-wrapper{
        gap: 5px;
    }
    .comm-open-role-detail .open-roles-description{
        margin-left: 10px;
        max-width: 100%;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper{
        margin-bottom: 30px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper h2{
        font-size: 30px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper p{
        font-size: 17px;
        line-height: 30px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper .description-meta p{
        line-height: 23px;
    }
    .comm-open-role-detail .open-roles-description .why-join-df-comm-sec{
        margin-bottom: 30px;
    }
    .comm-open-role-detail .open-roles-description .why-join-df-comm-sec h2{
        font-size: 30px;
    }
    .comm-open-role-detail .open-roles-description .comm-impact-sec{
        gap: 10px;
    }
    .comm-open-role-detail .open-roles-description .comm-impact-sec h1{
        font-size: 30px;
    }
    /* ALL Events page CSs */
    .comm-all-events .all-events-wrapper a.df_connect_google_btn{
        top: -9px;
        bottom: unset;
        padding:7px 7px;
    }
    .comm-hacakathon-sec .hackathon-page-heading .comm-page-heading-wrapper p{
        font-size: 15px;
    }
    .comm-all-events .event-category-section{
        gap: 30px;
    }
    .comm-all-events .all-events-tabs{
        width: 100%;
        border-bottom:unset;
        gap:12px;
    }
    .comm-all-events .event-category-section .load-btn-wrapper{
        margin-top: 20px;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* All CIrcle page Css */
    .comm-all-circle-sec{
        padding: 67px 20px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circle-top-wrapper .top-heading h1{
        font-size: 35px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circle-top-wrapper .top-heading p{
        margin: 0;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper{
        padding: 50px 0 0 0;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .circles-list-heading .circles-btn-group .comm-all-circles-tab{
        gap: 10px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .circles-list-heading .circles-search-box{
        width: 285px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .comm-circles-list{
        margin: 22px 0 10px 0;
        padding: 10px 23px 0 15px;
    }
    .circle-info-inner-wrapper::before, .circle-info-inner-wrapper::after{
        content: none;
    }
    .circle-info-wrapper{
        min-height: 135px;
    }
    .circle-info-wrapper .circle-info-inner-wrapper{
        padding: 10px 0 0 0;
    }
    .circle-info-wrapper .circle-info-inner-wrapper{
        min-height:unset;
    }
    .circle-info-wrapper .single-circle-wrapper{
        gap: 10px;
    }
    .circle-info-wrapper .single-circle-wrapper .circle-img{
        width: 65px;
        height: 65px;
    }
    .circle-info-wrapper .single-circle-wrapper .circle-img img{
        width: 50px;
        height: 50px;
    }
    .circle-info-wrapper:hover .single-circle-wrapper .circle-img img{
        transform:unset;
    }
    .circle-info-wrapper:hover .circle-info-inner-wrapper {
        padding-bottom: unset;
        margin-bottom: unset;
        min-height: unset;
        background-color: unset;
        padding-right: unset;
        transform: unset;
        border-radius: unset;
    }
    .circle-info-wrapper .single-circle-wrapper .single-circle-detail p{
        max-width: 325px;
        font-size: 12px;
    }
    .circle-info-wrapper:hover .single-circle-wrapper .single-circle-detail{
        transform: unset;
    }
    .circle-info-wrapper .comm-view-circle-wrapper{
        padding-right: 10px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper > *{
        margin-right: 9px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper span.hiring-title{
        font-size: 11px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper .view-circle-btn{
        padding: 2px 17px;
    }
    .circle-info-wrapper:hover .view-circle-btn{
        border: 1px solid #9050E9;
        background-color: transparent;
        color: #9050E9;
        transform: unset;
    }
    .comm-all-circles-view .comm-circles-list::-webkit-scrollbar-track {
        background: transparent;
        margin-top: 20px;   /* Push scrollbar down */
        margin-bottom: 20px; /* Optional: keep bottom rounded too */
    }
    .not-found-sec{
        padding: 0 20px 50px 20px;
    }
    .not-found-wrapper{
        width: 100%;
    }
    .comm-event-detail-sec {
        padding: 50px 0 50px 0px;
        max-height: unset;
    }
    .comm-event-detail-sec .event-detail-wrapper{
        flex-direction: column;
        height: unset;
        align-items: center;
    }
    .comm-event-detail-sec .event-detail-wrapper .event-right-box img {
        max-width: 100%;
    }
    .comm-past-event-content-wrapper .past-event-videos .past-videos-meta .single-video-box iframe{
        width: 624px;
        height: 382px;
    }
    
    /* Circle Detail page Css */
    .comm-circle-detail-sec{
        padding: 50px 0;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content{
        gap: 15px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content .workgroup-img-wrapper{
        width: 150px;
        height: 150px;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-content.workgroup-content{
        gap: 35px;
    }
    .circle-team-members-sec{
        padding: 50px 0;
    }
    .circle-team-members-sec .circle-members-content-box{
        gap: 30px;
    }
    .circle-team-members-sec .circle-members-content-box .circle-members-wrapper .circle-member-box{
        gap:15px;
        margin-bottom: 15px;
    }
    .circle-members-wrapper .circle-member-box .circle-member-detail a.add_circle_blogs:hover{
        background-color: transparent;
        color: #9050E9;
    }
    .circle-open-roles-sec{
        padding: 50px 0;
    }
    .circle-open-roles-sec .circle-open-roles-wrapper{
        gap: 30px;
    }
    .circle-open-roles-sec .all-roles-content-box{
        gap: 20px;
    }
    .all-roles-content-box .open-role-main{
        width: 100%;
        padding:25px;
    }
    .comm-useful-links-sec{
        padding: 50px 0px 80px 0;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper{
        padding: 20px 10px 20px 20px;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper .link-title h4{
        font-size: 16px;
    }
     .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper:hover {
        box-shadow: none; 
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper:hover > img {
        scale: unset; 
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper.workgroup-link-meta:hover {
        box-shadow: none;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper.workgroup-link-meta:hover > img {
        scale: unset;
    }

     /* All Hackathons page css */
     .comm-hacakathon-sec{
        padding: 50px 0;
     }
     .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index{
        margin-bottom: 30px;
     }
     .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index .comm-hackathon-heading-wrapper h1{
        font-size: 40px;
        line-height: 35px;
     }
     .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index .explore-heading{
        font-size: 40px;
        line-height: 35px;
     }
    .comm-hacakathon-sec .hackathon-category-section{
        gap: 30px;
        margin-top: 15px;
    }
    .hackathon-event-box .thumbnail-text {
        font-size: 25px;
    }
    .comm-all-events .hackathon-event-box .img-box .image-icon {
        position: absolute;
        width: 80px;
        height: 90px;
    }
    .hackathon-event-box .event-content-box h4 {
        font-size: 18px;
        line-height: 22px;
    }
    .hackathon-event-box .hackathon-event-date-box{
        width: 80px;
        height: 70px;
        padding: 8px 4px;
    }
    .hackathon-event-box .hackathon-event-date-box p{
        font-size: 11px;
        line-height: 27px;
        margin-bottom: 3px;
    }
    .hackathon-event-box .hackathon-event-date-box p.date{
        font-size: 18px;
        line-height: 20px;
    }
    .hackathon-event-box .past-event-date-box{
        right: 10px;
        width: 70px;
        height: 60px;
    }
    .hackathon-event-box .past-event-date-box p{
        font-size: 12px;
        line-height: 2px;
    }
    .hackathon-event-box .event-date-box{
        right: 10px;
        width: 70px;
        height: 60px;
    }
    .hackathon-event-box .event-date-box p{
        font-size: 12px;
        line-height: 2px;
    }
    .hackathon-organizers-sec{
        padding: 50px 0;
    }
    .hackathon-organizers-sec .hackathon-organizer-content-box .hackathon-contact-btn{
        width: unset;
    }
     /* upcoming Hackathons page css */
     .comm-past-event-content-wrapper .hackathon-resources .hackathon-questions-content a{
        width: calc(100% - 446px);
     }
     
     /* BLOG Page CSS */
    .comm-blogs-sec .comm-blogs-wrapper .comm-blog-box .content-box-meta a {
        font-size: 17px;
        font-weight: 700;
        line-height: 26px;
    }
    .comm-blogs-sec  .category-list-wrapper{
        margin-bottom: 15px;
    }
    .comm-blogs-sec .comm-blogs-wrapper .comm-blog-box .content-box-meta p {
        margin-bottom: 10px;
    }
     /* Blog Detail page Css */
     .comm-blog-detail-sec{
        padding: 30px 0;
    }
    .comm-blog-detail-sec .blog-detail-title h2{
        font-size: 30px;
        line-height: 40px;
    }
    .comm-blog-detail-sec .blog-img-box img{
        max-width: 100%;
    }
    /* ALL OPEN ROLES Page CSS */
    .comm-all-roles-sec{
        padding: 60px 0 80px 0;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper{
        gap: 30px;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper .all-roles-title .all-roles-title-meta h1{
        font-size: 35px;
        line-height: 40px;
        word-spacing: 0;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper .all-roles-title .all-roles-title-meta p{
        font-size: 20px;
        line-height: 30px;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper img{
        height: 300px;
    }
    .all-roles-cards{
        margin: 50px 0 60px 0;
    }
    .all-roles-card-wrapper{
        width: 215px;
    }
    .comm-all-roles-sec .all-roles-inner p.all-role-desc{
        font-size: 25px;
        line-height: 38px;
        font-weight: 700;
    }
    .comm-core-value{
        margin-top: 50px;
    }
    .comm-core-value h1{
        font-size: 25px;
        line-height: 33px;
    }
    .comm-core-value .core-values-inner{
        gap: 30px;
        flex-direction: column;
        align-items: center;
    }
    .core-values-wrapper{
       max-width: 400px;
        padding: 65px 42px;
    }
    .core-values-wrapper p{
        font-size: 18px;
        line-height: 25px;
    }
    .core-values-wrapper .core-values-inner{
        top: 11px;
        left: 11px;
        width: 20px;
        height: 20px;
    }
    .all-roles-team-sec{
        padding: 65px 60px 107px 60px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-title h1{
        font-size: 25px;
        line-height: 30px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper{
        width: 130px;
        height: 130px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper img{
        width: 130px;
        height: 130px;
    }
    .available-role-sec{
        padding: 65px 20px 50px 20px;
    }
    .available-role-sec .available-role-head{
        gap: 0;
    }
    .available-role-sec .available-role-head h1{
        font-size: 25px;
        line-height: 33px;
    }
    .available-role-sec .all-available-task-wrapper{
        margin-top: 40px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner{
        padding: 10px 30px 65px 30px;
        margin-top: 30px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner .circle-task-wrapper{
        gap: 10px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner .circle-task-wrapper h1{
        font-size: 25px;
        line-height: 35px;
        margin-top: 25px;
    }
    .open-role-main{
        padding: 29px 35px 32px 35px;
    }
    .open-role-main .job-details-wrapper{
        gap: 10px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title{
        gap: 15px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title h5{
        font-size: 18px;
        line-height: 30px;
    }
    .comm-blogs-sec .blog-page-heading h1 {
        font-size: 30px;
        line-height: 26px;
    }
    .comm-blogs-sec.all-open-roles-page .blog-page-heading{
        margin-bottom: 20px;
    }
    /* Open Role Detail page CSs */
    .comm-open-role-detail{
        padding: 70px 0;
    }
    .comm-open-role-detail .open-role-detail-wrapper h1{
        font-size: 40px;
    }
    .comm-open-role-detail .open-role-description-wrapper{
        padding-top: 60px;
    }
    .comm-open-role-detail .open-role-description-wrapper .open-role-detail-meta .open-role-meta-wrapper{
        gap: 7px;
    }
    .comm-open-role-detail .open-role-description-wrapper .open-role-detail-meta{
        top: 85px;
        gap: 20px;
    }
    .comm-open-role-detail .open-roles-description{
        margin-left: 20px;
        max-width: 100%;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper{
        margin-bottom: 35px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper h2{
        font-size: 35px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper p{
        line-height: 30px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper .description-meta p{
        line-height: 30px;
    }
    .comm-open-role-detail .open-roles-description .why-join-df-comm-sec{
        margin-bottom: 40px;
    }
    
    .comm-open-role-detail .open-roles-description .why-join-df-comm-sec h2{
        font-size: 35px;
    }
    .comm-open-role-detail .open-roles-description .comm-impact-sec{
        gap: 15px;
    }
    .comm-open-role-detail .open-roles-description .comm-impact-sec h1{
        font-size: 29px;
    }
    

    /* ALL Events page CSs */
    .comm-all-events{
        padding: 50px 0;
    }
    .comm-all-events .all-events-wrapper a.df_connect_google_btn{
        top: -14px;
        bottom: unset;
    }
    .comm-hacakathon-sec .hackathon-page-heading{
        max-width: 100%;
        margin-bottom: 30px;
        gap:10px;
    }
    .comm-hacakathon-sec .hackathon-page-heading .comm-page-heading-wrapper h1{
        font-size: 40px;
        line-height: 30px;
    }
    .comm-all-events .event-category-section{
        gap: 30px;
    }
    .comm-all-events .event-category-section .load-btn-wrapper{
        margin-top: 30px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) { 
      /* All CIrcle page Css */
      .comm-all-circle-sec{
        padding: 50px 50px 65px 50px;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper{
        padding: 60px 0 0 0;
    }
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper .comm-circles-list{
        margin: 22px 0 0px 0;
        padding: 15px 15px 0 15px;
    }
    .circle-info-wrapper .single-circle-wrapper{
        gap: 12px;
    }
    .circle-info-wrapper .circle-info-inner-wrapper{
        padding: 14px 0px 25px 10px;
    }
    .circle-info-wrapper .single-circle-wrapper .single-circle-detail p{
        max-width: 440px;
        line-height: 22px;
    }
    .circle-info-wrapper .comm-view-circle-wrapper > *{
        margin-right: 15px;
    }
    .not-found-sec{
        padding: 0 50px 80px 50px;
    }
    .comm-event-detail-sec{
        padding: 50px 30px 64px 30px;
        height:unset;
    }
    .comm-event-detail-sec .event-detail-wrapper{
        height: unset;
    }
    .comm-event-detail-sec .event-detail-wrapper .event-right-box img {
        max-width: 350px;
        height: 450px;
        object-fit: cover;
    }
    .comm-past-event-content-wrapper .past-event-videos .past-videos-meta .single-video-box iframe{
        width: 624px;
        height: 382px;
    }
    /* Circle detail page Css */
    .comm-circle-detail-sec{
        padding: 50px 0;
    }
    .comm-circle-detail-sec .circle-detail-wrapper .circle-detail-content .circle-image-content .workgroup-img-wrapper{
        width: 200px;
        height: 200px;
    }
    .circle-team-members-sec{
        padding: 50px 0;
    }
    .circle-team-members-sec .circle-members-content-box{
        gap: 40px;
    }
    .circle-members-content-box .circle-members-wrapper .circle-member-box .circle-member-detail  p{
        font-size: 14px;
    }
    .circle-open-roles-sec{
        padding: 50px 0;
    }
    .circle-open-roles-sec .circle-open-roles-wrapper{
        gap: 40px;
    }
    .all-roles-content-box .open-role-main{
        width: 100%;
        padding:25px;
    }
    .comm-useful-links-sec{
        padding: 67px 0 100px 0;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper{
        padding: 25px 10px 20px 20px;
    }
    .comm-useful-links-sec .useful-links-wrapper .links-meta-wrapper .link-title h4{
        font-size: 16px;
    }
    /* All Hackathons page css */
    .comm-hacakathon-sec{
        padding: 80px 0;
    }
    .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index .comm-hackathon-heading-wrapper h1{
        font-size: 40px;
        line-height: 45px;
    }
    .comm-hacakathon-sec .hackathon-page-heading.all-hackathons-index .explore-heading{
        font-size: 40px;
        line-height: 45px;
    }
    .comm-hacakathon-sec .hackathon-category-section{
        gap: 25px;
    }
    .comm-all-events .hackathon-event-box .img-box .image-icon{
        width: 84px;
        height: 87px;
    }
    .hackathon-event-box .thumbnail-text {
        font-size: 25px;
    }
    .hackathon-event-box .event-content-box h4 {
        font-size: 20px;
        line-height: 26px;
    }
    .hackathon-event-box .hackathon-event-date-box{
        width: 80px;
        height: 70px;
        padding: 8px 4px;
    }
    .hackathon-event-box .hackathon-event-date-box p{
        font-size: 11px;
        line-height: 21px;
        margin-bottom: 3px;
    }
    .hackathon-event-box .hackathon-event-date-box p.date{
        font-size: 20px;
        line-height: 27px;
    }
    .hackathon-event-box .past-event-date-box{
        width: 70px;
        height: 60px;
        right: 10px;
    }
    .hackathon-event-box .past-event-date-box p{
        font-size: 14px;
        line-height: 6px;
    }
    .hackathon-event-box .event-date-box{
        width: 70px;
        height: 60px;
        right: 10px;
    }
    .hackathon-event-box .event-date-box p{
        font-size: 14px;
        line-height: 6px;
    }
    .hackathon-organizers-sec{
        padding: 80px 50px;
    }
    .hackathon-organizers-sec .hackathon-organizer-content-box .hackathon-contact-btn{
        width: calc(100% - 600px);
    }
    .comm-blogs-sec  .category-list-wrapper{
        margin-bottom: 15px;
    }
    /* Blog Detail page Css */
    .comm-blog-detail-sec .blog-detail-title h2{
        font-size: 30px;
        line-height: 40px;
    }
    .comm-blog-detail-sec .blog-img-box img{
        max-width:100%;
    }
    /* All Open Roles Page Css */
    .comm-all-roles-sec{
        padding: 65px 0 80px 0;
    }
    .comm-all-roles-sec .all-roles-hero-wrapper img{
        height: 400px;
    }
    .all-roles-cards{
        margin: 55px 0 70px 0;
    }
    .all-roles-card-wrapper{
        width: 290px;
    }
    .comm-all-roles-sec .all-roles-inner p.all-role-desc{
        font-size: 25px;
        line-height: 40px;
    }
    .comm-core-value{
        margin-top: 64px;
    }
    .comm-core-value h1{
        margin-bottom: 25px;
    }
    .comm-core-value .core-values-inner{
        gap: 20px;
    }
    .core-values-wrapper{
        padding: 50px 30px;
    }
    .core-values-wrapper p{
        font-size: 17px;
        line-height: 25px;
    }
    .all-roles-team-sec{
        padding: 65px 80px 107px 80px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper{
        width: 150px;
        height: 150px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper img{
        width: 150px;
        height: 150px;
    }
    .available-role-sec{
        padding: 60px 35px 50px 30px;
    }
    .available-role-sec .available-role-head{
        gap:0;
    }
    .available-role-sec .all-available-task-wrapper{
        margin-top: 45px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner{
        padding: 20px 54px 60px 54px;
        margin-top: 30px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner .circle-task-wrapper{
        gap: 13px;
    }
    .available-role-sec .all-available-task-wrapper .all-available-role-inner .circle-task-wrapper h1{
        margin-top: 30px;
    }
    .open-role-main{
        padding: 30px 45px 32px 45px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title{
        gap: 17px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title h5{
        font-size: 18px;
        line-height: 25px;
    }
    .open-role-main .job-details-wrapper{
        gap: 18px;
    }
    /*Open Roles Detail Page Css */
    .comm-open-role-detail{
        padding: 70px 20px;
    }
    .comm-open-role-detail .open-role-detail-wrapper h1{
        font-size: 45px;
    }
    .comm-open-role-detail .open-role-description-wrapper{
        padding-top: 70px;
    }
    .comm-open-role-detail .open-role-description-wrapper .open-role-detail-meta{
        top: 85px;
        gap: 25px;
    }
    .comm-open-role-detail .open-roles-description{
        margin-left: 35px;
        max-width: 100%;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper{
        margin-bottom: 35px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper h2{
        font-size: 43px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper p{
        line-height: 30px;
    }
    .comm-open-role-detail .open-roles-description .open-role-description-meta-wrapper .description-meta p{
        line-height: 30px;
    }
    .comm-open-role-detail .open-roles-description .comm-impact-sec h1{
        font-size: 45px;
    }
}
@media (min-width: 1200px) and (max-width: 1229.98px) { 
    .comm-open-role-detail .open-role-description-wrapper .open-role-detail-meta{
        top: 85px;
        gap: 25px;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { 
    .comm-event-detail-sec{
        padding: 50px 30px 64px 30px;
        height:unset;
    }
    .comm-event-detail-sec .event-detail-wrapper{
        height: unset;
    }
    .comm-event-detail-sec .event-detail-wrapper .event-right-box img {
        max-width: 450px;
    }
    .comm-past-event-content-wrapper .past-event-videos .past-videos-meta .single-video-box iframe{
        width: 624px;
        height: 382px;
    }
    /* Blog Detail page Css */
    .comm-blog-detail-sec{
        padding: 30px 20px 60px 20px;
    }
    .comm-blog-detail-sec .blog-detail-title h2{
        font-size: 40px;
        line-height: 48px;
    }
    .comm-blog-detail-sec .blog-img-box img{
        max-width:100%;
    }
    /*All Circles Page CSS Start */
    .comm-all-circle-sec .all-circle-wrapper .all-circles-list-wrapper{
        padding: 50px 0 0 0;
    }
    .circle-info-wrapper .single-circle-wrapper .single-circle-detail p{
        max-width: 475px;
    }
    /*All Events Page CSS Start */
    .hackathon-event-box .thumbnail-text{
        font-size: 30px;
    }
    /* All Hackathons page css */
    .hackathon-event-box .hackathon-event-date-box{
        width: 93px;
        height: 80px;
        padding: 8px 4px;
    }
    .hackathon-event-box .hackathon-event-date-box p{
        font-size: 13px;
        line-height: 17px;
        margin-bottom: 4px;
    }
    .hackathon-event-box .hackathon-event-date-box p.date{
        font-size: 25px;
        line-height: 26px;
    }
    .hackathon-organizers-sec .hackathon-organizer-content-box .hackathon-contact-btn{
        width: calc(100% - 800px);
    }
}

/* ADDITIONAL MEDIA QUERIES Css */
@media (min-width: 320px) and (max-width: 399.98px) { 
     .all-roles-team-sec .all-roles-team-wrapper .team-title h1{
        font-size: 14px;
        line-height: 20px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper{
        width: 80px;
        gap: 14px;
        height: 80px;
    }
    .available-role-sec .all-available-task-wrapper .comm-all-roles-tab button{
        padding: 5px 20px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper img{
        width: 80px;
        height: 80px;
    }
    .open-role-main .open-role-detail-wrapper{
        top: 40px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title h5 {
        font-size: 16px;
        line-height: 22px;
        max-width: 188px;
    }
}
@media (min-width: 400px) and (max-width: 767.98px) { 
    .all-roles-team-sec .all-roles-team-wrapper .team-title h1{
        font-size: 20px;
        text-align:center;
        line-height: 24px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper{
        width: 105px;
        gap: 12px;
        height: 105px;
    }
    .all-roles-team-sec .all-roles-team-wrapper .team-members-wrapper .member-inner-wrapper img{
        width: 105px;
        height: 105px;
    }
    .open-role-main .open-role-detail-wrapper{
        top: 30px;
    }
    .open-role-main .open-role-content-box .job-title-wrapper .job-title h5 {
        font-size: 16px;
        line-height: 25px;
        /* max-width: 188px; */
    }
}
/* LOGIN SIGN UP pages Responsive css */
@media (min-width: 320px) and (max-width: 575.98px) { 
  .df-signup-section .df-register-form .input-field > div > i {
    bottom: 81px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) { 
.df-signup-section .df-register-form .input-field > div > i{
        bottom: 60px;
    }
}
@media (min-width: 320px) and (max-width: 767.98px) { 
      #df-login-form #gisLogin iframe  {
        width: 100% !important;
        margin: 0 !important;
    }
    .login-form-cols-wrapper {
    padding-top: 0;
    }
    .valid-mail-section .top-navbar{
      padding: 10px 15px !important;
    }
    .valid-mail-section .top-navbar .logo-box{
        width: 120px;
    }
    .valid-mail-section .top-navbar .get-started-box p{
        font-size: 14px;
    }
     .valid-mail-section .top-navbar .get-started-box p span{
        display: none;
     }
    .sign-up-wrapper{
        display: grid;
        margin-top: 30px;
    }
    .comm-site-wrapper img{
        height: 27px;
        width: 80px;
        object-fit: contain;
    }
    .comm-sign-up-content-box{
        gap: 30px;
        max-width: 100%;
        padding-top: 0;
    }
    .comm-sign-up-content-box .signup-content-box-meta{
       text-align: center;
    }
      .comm-sign-up-content-box .signup-content-box-meta h1.main-heading{
        font-size: 51px;
        line-height: 64px;
    }
    .comm-signup-sites ul li{
        max-width: 100%;
        text-align: center;
    }

    .comm-site-wrapper {
        justify-content: center;
    }
    .comm-site-wrapper a {
        font-size: 14px;
        line-height: 26px;
        margin-left: 24px;
    }
    .valid-mail-section .df-mail-validation, .valid-mail-section .df-reset-password, .valid-mail-section .df-reset-password-link-sent{
        width: calc(100% - 30px);
    }
}
@media (min-width: 768px) and (max-width: 991.98px) { 
    .sign-up-wrapper{
        display: grid;
        text-align: center;
        justify-content: center;
        margin-top: 50px;
    }
    .valid-mail-section .df-mail-validation, .valid-mail-section .df-reset-password, .valid-mail-section .df-reset-password-link-sent{
        width: calc(100% - 50px);
    }
    .df-signup-section .df-register-form .input-field > div > i{
        bottom: 60px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .sign-up-wrapper{
        margin-top: 50px;
    }
    .comm-sign-up-content-box{
        gap: 30px;
    }
    .comm-sign-up-content-box .signup-content-box-meta p{
        font-size: 15px;
        line-height: 26px;
    }
    .comm-sign-up-content-box{
        max-width: 365px;
    }
    .comm-signup-sites ul li{
        max-width: 365px;
    }
    .comm-site-wrapper a{
        font-size: 16px;
        line-height: 26px;
        margin-left: 18px;
    }
    .comm-site-wrapper a::before {
        left: -20px;
    }
    .comm-signup-sites ul p{
        font-size: 12px;
        line-height: 26px;
    }
    .df-signup-section .df-register-form .input-field > div > i{
       bottom: 81px;
    }

}
@media (min-width: 1200px) and (max-width: 1399.98px) { 
    .comm-sign-up-content-box{
        max-width: 450px;
    }
    .comm-signup-sites ul li{
         max-width: 450px;
    }
}
@media (min-width: 1230px) {
    .modal.df-notification-modal {
        margin-top: 85px;
    }
}







/* NEW HOME PAGE RESPONSIVE CSS START  */
@media (min-width: 320px) and (max-width: 767.98px) { 
    .comm-ai-hero-sec .ai-hero-wrapper{
        padding-top: 82px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper{
        flex-wrap: wrap;
		gap:15px;
    }
	
	.comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper a.btn-theme-primary{
		width: 180px;
		font-size:18px;
	}
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper h3{
        font-size: 28px;
        line-height: 35px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper p{
        margin: 0;
		font-size:16px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-responsive-btns{
        flex-direction: column;
        gap:15px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-responsive-btns a.btn-theme-primary{
        width: 100%;
        padding: 12px 49px;
        font-family: "Inter", sans-serif;
        font-size: 16px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-responsive-btns a.btn-theme-secondary{
        font-family: "Inter", sans-serif;
        color:#FFFFFF;
        font-size: 16px;
        font-weight: 800;
        border: 1px solid #E6D6FC;
        border-radius: 10px;
        background:transparent;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-responsive-btns a img{
        margin-left: 12px;
        position: absolute;
        top: 20px;
    }
    .comm-ai-hero-sec .ai-hero-sub-sec{
        gap: 20px;
    }
    .comm-ai-hero-sec .ai-hero-sub-sec .ai-hero-sub-wrapper .sub-sec-img{
        width: 58px;
        height: 58px;
        padding: 9px 11px;
    }
    .comm-ai-hero-sec .ai-hero-sub-sec .ai-hero-sub-wrapper .sub-sec-img img{
        width: 20px;
        height: 20px;
    }
	.comm-ai-hero-sec .ai-hero-sub-sec .ai-hero-sub-wrapper h4{
		font-size:16px;
	}
    .comm-ai-hero-sec .ai-hero-sub-sec .ai-hero-sub-wrapper p{
        margin: 0;
		font-size:14px;
    }
    .ai-hero-bar .ai-hero-bar-wrapper{
        padding: 0 10px;
    }
    .ai-hero-bar .ai-hero-bar-wrapper .bar-meta-wrapper a.btn-theme-primary{
        font-size: 14px;
        padding: 14px 13px;
        line-height: 20px;
    }
    #joinModal {
        margin-top: 55px !important;
    }
    .mauticform_wrapper.join_movement_form{
        padding: 20px 15px !important;
    }
    .mauticform_wrapper.join_movement_form .mauticform-label{
        font-size: 15px !important;
    }
    .mauticform-button-wrapper .mauticform-button.btn-ghost{
        padding: 12px 70px !important;
    }


    .about-df-sec{
        padding: 50px 0;
    }
    .about-df-sec .about-df-wrapper .about-df-meta h3{
        font-size: 22px;
    }
    .about-df-sec .about-df-wrapper{
        gap: 56px;
    }
    .about-df-sec .about-df-wrapper .about-df-meta p{
        text-align: center;
        font-size: 16px;
        line-height: 25px;
    }
    
    .about-df-sec .about-df-wrapper .about-df-video-wrapper{
        width: 100%;
        height: 400px;
    }
 

    .comm-possible-df{
        padding: 50px 12px 50px 12px;
    }
    .comm-possible-df .comm-possible-wrapper .comm-possibility-meta h3{
        font-size: 22px;
        text-align: center;
        line-height: 35px;
    }
    .comm-possible-df .comm-possibility-card-wrapper{
        padding: 0 0 56px 0;
    }
    .comm-possible-df a.imagine-idea-btn{
        padding: 12px 10px;
    }
    .comm-possible-df img.imagine-arrow {
        margin-left: 5px;
    }
    .possibility-card{
        padding: 22px 0 24px 28px;
        margin-bottom: 20px;
    }
    .possibility-card .card-header{
        padding: 0 21px 0 0;
    }
    .possibility-card .card-header img{
        width: 100px;
        height: 100px;
    }
    .possibility-card .card-footer-wrapper{
       padding: 0 7px 0 0;
       flex-wrap: wrap;
        gap: 20px;
    }
    .comm-possible-df a.imagine-idea-btn{
        max-width: 315px;
        font-size: 16px;
    }



    .comm-df-funding-sec{
        padding: 100px 0;
    }
    .comm-df-funding-sec .df-funding-head-wrapper .funding-icon-wrapper{
        width: 247px;
    }
    .comm-df-funding-sec .df-funding-head-wrapper .funding-icon-wrapper span{
        font-size: 12px;
    }
    .comm-df-funding-sec .df-funding-head-wrapper .funding-head-content-wrapper h3{
        font-size: 22px;
        line-height: 32px;
    }
    .comm-df-funding-sec .df-funding-head-wrapper .funding-head-content-wrapper p{
        max-width: 356px;
    }
    .funding-content-wrapper .funding-card-wrapper .funding-card-content-box{
        bottom: 27px;
    }
    .funding-card-wrapper .funding-card-content-box .funding-currency-wrapper{
        padding-right: 25px;
        flex-wrap: wrap;
        gap: 20px;
    }
    .funding-content-wrapper .funding-card-wrapper a.funding-project-status{
        width: 94px;
        top: 25px;
        right: 15px;
    }
    .comm-df-funding-sec .explore-challenge-wrapper{
        margin-top: 74px;
    }
    .comm-df-funding-sec .explore-challenge-wrapper .explore-challenge-content-box{
        max-width: 100%;
    }
    .comm-df-funding-sec .explore-challenge-wrapper .explore-challenge-content-box h3{
        font-size: 22px;
        text-align: center;
        line-height: 36px;
    }
    .comm-df-funding-sec .explore-challenge-wrapper .explore-challenge-content-box p{
        max-width: 316px;
    }


    .comm-join-global{
        padding: 80px 0;
    }
    .comm-join-global .join-global-wrapper .global-meta-wrapper .global-icon-wrapper{
        width: calc(100% - 129px);
    }
    .comm-join-global .join-global-wrapper{
        margin-bottom: 20px;
    }
    .comm-join-global .join-global-wrapper .global-meta-wrapper h3{
        font-size: 22px;
    }
    .comm-join-global .join-global-wrapper p{
        max-width: 343px;
    }
    .comm-join-global .global-content-wrapper .global-content-card-wrapper{
        padding: 52px 40px 51px 40px;
        margin-bottom: 30px;
    }
    .global-content-wrapper .global-content-card-wrapper .global-card-content-box .card-content-meta-wrapper h4{
        font-size: 22px;
    }
    .global-content-wrapper .global-content-card-wrapper .global-card-content-box .card-img-wrapper{
        padding: 23px 22px;
    }
    .global-content-wrapper .global-content-card-wrapper a.global-status{
       padding: 4px 20px;
        top: 26px;
        right: 15px;
    }
    .global-content-wrapper .global-content-card-wrapper .global-card-content-box a.btn-theme-secondary{
        padding: 12px 32px;
    }


    .comm-register-sec{
        padding: 80px 0 50px 0;
    }
    .comm-register-sec .comm-register-heading{
        padding-bottom: 43px;
    }
    .comm-register-sec .comm-register-heading h3{
        font-size: 22px;
    }
    .comm-register-sec .comm-register-heading p{
        line-height: 29px;
        font-size: 16px;
        text-align: center;
        max-width: 316px;
    }
    .comm-register-sec .comm-register-form-wrapper{
        margin-bottom: 54px;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-title-wrapper{
        padding: 60px 0;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-title-wrapper h3{
        font-size: 18px;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-title-wrapper p{
        font-size: 14px;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-wrapper .field-box input::placeholder{
        font-size:12px;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-wrapper input[type="submit"]{
        margin-bottom: 81px;
    }
    .comm-register-sec .comm-register-content-wrapper .register-meta-wrapper{
        margin-bottom: 30px;
    }
    .comm-register-sec .comm-register-content-wrapper .register-meta-wrapper .register-meta-title h3{
        font-size: 18px;
    }
    .comm-register-sec .comm-register-content-wrapper .register-meta-wrapper .register-meta-title p{
        font-size: 14px;
        line-height: 25px;
    }
    .comm-register-sec .comm-register-form-wrapper .quick-register-form .form-wrapper{
        padding: 0 15px;
    }

    .join-ai-comm{
        padding: 80px 0;
    }
    .join-ai-comm .join-comm-container{
        height: 820px;
        padding: 0 26px;
    }
    .join-ai-comm .join-comm-container .join-ai-content-wrapper .join-content-meta h3{
        font-size: 20px;
		text-align: center;
    }
    .join-ai-comm .join-comm-container .join-ai-content-wrapper .join-content-meta p{
        max-width: 100%;
        text-align: center;
        font-size: 16px;
        line-height: 25px;
    }
    .join-ai-comm .join-comm-container .join-ai-content-wrapper .join-ai-btn-wrapper{
        flex-wrap: wrap;
        margin-bottom: 40px;
		justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { 
    .comm-ai-hero-sec .ai-hero-wrapper{
        padding-top: 116px;
    }
    .comm-ai-hero-sec .ai-hero-main{
        gap: 50px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper h3{
        font-size: 42px;
        line-height: 60px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper a.btn-theme-primary{
        width: calc(100% - 486px);
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper a img{
        right: 25px;
        position: absolute;
        top: 28px;
    }
    .comm-ai-hero-sec .ai-hero-sub-sec .ai-hero-sub-wrapper .sub-sec-img{
        width: calc(100% - 158px);
    }


    .mauticform_wrapper.join_movement_form{
        padding: 25px !important;
    }


    .about-df-sec .about-df-wrapper .about-df-video-wrapper{
        width: 100%;
        height: 500px;
    }
    .comm-join-global .global-content-wrapper .global-content-card-wrapper{
        padding: 31px 40px;
    }
    .global-content-wrapper .global-content-card-wrapper .global-card-content-box .card-img-wrapper{
        padding: 38px 22px;
    }
    .global-content-wrapper .global-content-card-wrapper a.global-status{
        padding: 3px 20px;
        top: 20px;
        right: 15px;
    }

    .comm-possible-df .comm-possibility-card-wrapper{
        padding: 0 0 40px 0;
    }
    .comm-possible-df .comm-possible-wrapper .comm-possibility-meta h3{
        font-size: 30px;
    }
    .possibility-card{
        padding: 42px 0 42px 25px;
        margin-bottom: 20px;
    }
    .possibility-card .card-header{
        padding: 0 20px 0 0;
    }
    .possibility-card .card-footer-wrapper{
        padding: 0 20px 0 0;
        flex-direction: column;
        gap: 10px;
        align-items: unset;
    }
    .comm-possible-df a.imagine-idea-btn{
        max-width: calc(100% - 232px);
    }

    .comm-df-funding-sec .df-funding-head-wrapper .funding-icon-wrapper{
        width: calc(100% - 386px);
    }
    .comm-df-funding-sec .df-funding-head-wrapper .funding-head-content-wrapper h3{
        font-size: 35px;
    }
    .funding-content-wrapper .funding-card-wrapper .funding-card-content-box{
        padding: 0 0 0 20px;
    }
    .funding-content-wrapper .funding-card-wrapper a.funding-project-status{
        width: calc(100% - 261px);
        top: 27px;
        right: 20px;
    }
    .funding-card-wrapper .funding-card-content-box .funding-currency-wrapper{
        padding-right: 15px;
    }

    .comm-register-sec{
        padding: 100px 0;
    }
    .comm-register-sec .comm-register-heading h3{
        font-size: 30px;
    }
    .comm-register-sec .comm-register-heading p{
        text-align: center;
        font-size: 18px;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-title-wrapper{
        padding: 79px 0 40px 0;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-title-wrapper h3{
        font-size: 22px;
    }
    .comm-register-sec .comm-register-form-wrapper form .form-title-wrapper p{
        font-size: 17px;
        line-height: 28px;
    }
    .comm-register-sec .comm-register-content-wrapper .register-meta-wrapper .register-meta-title h3{
        font-size: 21px;
    }
    .comm-register-sec .comm-register-content-wrapper .register-meta-wrapper .register-meta-title p{
        font-size: 13px;
    }


    .join-ai-comm .join-comm-container{
        padding: 0 20px;
        height: 421px;
    }
    .join-ai-comm .join-comm-container .join-ai-content-wrapper .join-content-meta h3{
        font-size: 18px;
    }
    .join-ai-comm .join-comm-container .join-ai-content-wrapper .join-content-meta p{
        font-size: 14px;
        line-height: 26px;
    }
    .join-ai-comm .join-comm-container .join-ai-content-wrapper .join-ai-btn-wrapper{
        flex-direction: column;
    }
}





@media (min-width: 992px) and (max-width: 1199.98px) {
    .comm-ai-hero-sec .ai-hero-wrapper{
        padding-top: 116px;
    }
    .comm-ai-hero-sec .ai-hero-wrapper .ai-hero-content-wrapper a img{
        right: 39px;
    }
    .about-df-sec .about-df-wrapper .about-df-video-wrapper{
        width: 100%;
    }
    .comm-possible-df .comm-possible-wrapper .comm-possibility-meta h3{
        font-size: 30px;
    }
    .possibility-card{
        padding: 42px 0 42px 20px;
    }
    .possibility-card .card-header{
        padding: 0 15px 0 0;
    }
    .possibility-card .card-header img{
        width: 100px;
        height: 100px;
    }
    .possibility-card .card-footer-wrapper{
        padding: 0 15px 0 0;
        flex-direction: column;
        gap: 10px;
        align-items: unset;
    }
    .possibility-card .card-footer-wrapper a.btn-theme-primary{
        padding: 8px 11px;
    }
    .comm-possible-df a.imagine-idea-btn{
        max-width: calc(100% - 460px);
    }
    .funding-content-wrapper .funding-card-wrapper .funding-card-content-box{
        padding: 0 0 0 15px;
    }
    .funding-card-wrapper .funding-card-content-box .funding-currency-wrapper{
        padding-right: 10px;
    }

    .join-ai-comm .join-comm-container{
        padding: 0 20px;
    }
}