@media screen and (max-width: 1200px) and (min-width: 240px){
    .page_width{width:100%; padding: 0px 30px;}
}
@media screen and (max-width: 1024px) and (min-width: 240px){
    .page_width{width:100%; padding: 0px 15px;}
    .gerenric-heading{ margin-bottom: 30px;}
    .gerenric-heading .heading-text{font-size: 35px;}
    .gerenric-heading .heading-subtext{font-size: 16px;}
    .gerenric-padding{padding: 40px 0px;}
    .gerenric-button{font-size: 16px; height: 45px;}
   
    .menu_icon {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-radius: 0%;cursor: pointer;display: flex !important; position: absolute; left: 0px; }
	.menu_icon:hover .Mbarline {width: 25px;}
	.menu_icon.closeMenu .Mbarline {width: 25px;}
	.menu_icon.closeMenu .Mbarline:first-child {-webkit-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg);}
	.menu_icon.closeMenu .Mbarline:nth-child(2) {-webkit-transform: scale(0);transform: scale(0);}
	.menu_icon.closeMenu .Mbarline:last-child {-webkit-transform: translateY(-7px) rotate(-45deg);transform: translateY(-7px) rotate(-45deg);}
	.Mbarline {width: 25px;height: 2px;background: #0F146B;-webkit-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
	.Mbarline:nth-child(2) {width: 25px;margin: 5px 0;}
	.Mbarline:last-child {width: 25px;}
    .header-empty{width: 100%; height: 70px;background: rgb(4,34,68);}
    #header-section{z-index: 999999; height: 70px;}
    #logo{width: 80px; left: 35px;}
    #header-section.headersticky #logo{width: 80px;}
    #header-section.headersticky{height: 70px;}
    #header-section .header-button{width: auto;}
    #header-section .header-button .gerenric-button{ font-size: 14px;  min-width: 90px; height: 42px;}
    #navigation-section{position: fixed; overflow-y: auto;  width: 100%; display: none; padding: 0px; left: 0px; top: 70px; height: 100vh; background: #fff;}
    #navigation-section ul{display: block; padding-top: 20px;padding-bottom: 80px;}
    #navigation-section ul li{margin-right: 0px; padding: 15px; text-align: left; font-size: 20px; border: 1px solid #eee;}
    #navigation-section.showMenu{ display: block; transition: all 0.3s;}
    #navigation-section ul li ul.submenu{ position: inherit;width: 100%; margin-bottom: 20px;}
    #navigation-section ul li ul.submenu li{font-size: 20px; border-top: none; border-left: none; border-right: none;}

    #banner-section{padding: 40px 0px 40px 0px;}
    #banner-section::after{width: 5px;}
    #banner-section .banner-inner::before{width:5px; }
    #banner-section .banner-inner::after{width: 5px; }
    #banner-section .banner-inner{ height: auto; padding: 0px;}
    #banner-section .banner-detail {padding-right: 35px;}
    #banner-section .banner-detail h1{font-size: 32px;}
    #banner-section .banner-detail p{font-size: 16px;}
    #banner-section .banner-detail .banner-button {margin-top: 25px;}
    #banner-section .banner-detail .banner-button .gerenric-button{min-width: 140px; font-size: 15px; height: 50px;}
    #banner-section .banner-image video{height: 230px;}

    .welcome-section .welcome-top{justify-content: center;}
    .welcome-section .welcome-top .welcome-top-inner{justify-content: center;}
    .welcome-section .welcome-top .welcome-box{width: calc(50% - 30px);padding: 45px 20px 20px 20px;}
    .welcome-section .welcome-detail{padding-top: 40px;}
    .welcome-section .welcome-detail p{font-size: 16px;}
    .welcome-section .empower-block .empower-box{width:calc(50% - 30px);height: 70px; font-size: 20px;}
    .our-approach-section .gerenric-product.full-column{margin-right: -15px;}
    .our-approach-section .gerenric-product .slick-list{ padding-right: 60px !important}
    .our-approach-section .removing-barriers{padding:30px 25px;}
    .our-approach-section .removing-barriers .removing-barriers-title{font-size: 22px;}
    .our-approach-section .removing-barriers p{font-size: 16px;}
    .our-target-section .gerenric-product.full-column{margin-right: -15px;}
    .our-target-section .gerenric-product .slick-list{ padding-right: 60px !important}
    .our-target-section .gerenric-product .product-card{padding: 10px;}
    .our-target-section .gerenric-product .product-card-inner{height: 380px;}
    .our-target-section .gerenric-product .product-image img{height: 380px;}
    .our-target-section .gerenric-product .product-title {width: calc(100% - 60px); height: 60px; font-size: 18px;}
    .our-model-section .skill-training{padding: 30px 25px;}
    .our-model-section .skill-training ul{flex-wrap: wrap; justify-content: center;}
    .our-model-section .skill-training ul li{font-size: 18px;padding: 10px 10px 10px 26px;}
    .our-model-section .skill-training ul li::after{ width: 18px;height: 18px; background-size: 18px;}
    .our-model-section .journey-child{padding: 40px 0px 70px 0px;}
    .our-model-section .journey-child .journey-child-inner{padding-top: 0px;}
    .our-model-section .journey-child .journey-block{background-color: transparent; border-radius: 0px; border: 0px;}
    .our-model-section .journey-child .journey-card{width: 100%; margin-top: 160px; background-color: #fff;border: 3px dashed #D9D9D9;border-radius: 25px;}
    .our-model-section .journey-child .journey-card:nth-child(1){margin-top: 60px;}
    .our-model-section .journey-child .journey-cricle .journey-cricle-inner::after{ width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #D9D9D9; content: ''; position: absolute; top: -14px; left: inherit;}
    .our-model-section .journey-child .journey-cricle .journey-cricle-inner::before{width: 2px; height: 65px; content: ''; position: absolute; top: -80px; border-left: 3px dashed #D9D9D9;}
    .our-model-section .journey-child .journey-card:nth-child(1) .journey-cricle .journey-cricle-inner::before{display: none;}
    .our-model-section .building-skills{height: auto; padding: 15px;}
    .our-model-section .building-skills .building-skills-image img{height: 300px;}
    .our-model-section .building-skills .building-skills-detail {width: 55%; padding: 15px;}
    .our-model-section .building-skills .building-skills-detail .building-skills-title{font-size: 25px; margin-bottom: 10px;}
    .our-model-section .building-skills .building-skills-detail p{font-size: 14px;}
    .project-section .project-col{width: 100%;}
    .project-section .project-col:nth-child(2){width: 100%;}
    .project-section .project-title {font-size: 20px;}
    .how-help-section .help-card{width: 50%;}
    .how-help-section .help-card:nth-child(1){padding-bottom: 90px;}
    .our-approach-section .gerenric-product .slick-list{ padding-right: 60px !important}
    .event-section .event-inner{margin: 0px -15px 0px -10px;}
    .event-section .slick-list{ padding-right: 60px !important}
    .event-section .event-col {padding: 10px 10px 23px 10px;}
    .event-section .event-card .event-detail{height: 35px;}
    .event-section .event-card .event-title{font-size: 18px; height: 42px;}
    .client-section .client-inner{margin: 0px -15px 0px -10px;}
    .client-section .client-box{padding: 10px;}
    .client-section .slick-list{ padding-right: 60px !important}
    .client-section .client-box .client-logo{box-shadow: 0px 0px 10px rgba(0,0,0,0.10);}

    .event_section .event_col{width: 50%;}
    .event_section .event_card .event_title{font-size: 20px;}
    
    #inner-pg-heading{min-height: 100px;}
    #inner-pg-heading .inner-heading-text{font-size: 35px;}
    .who-we-are-page .who-we-content-box p{font-size: 14px;}
    .who-we-are-page .who-we-row .who-we-col{width: calc(100% - 20px);}
    .project-page .project-content-box p{font-size: 14px;}
    .project-page .project-col {width: calc(100% - 20px);}
    .project-page .project-learning-centre{padding: 20px;}
    .project-page .project-learning-centre .learning-image{width: 100%; margin-bottom: 20px;}
    .project-page .project-learning-centre .learning-detail{width: 100%; padding-left: 0px;}
    .project-page .project-learning-centre p{font-size: 14px;}
    .project-page .learning-video{width: 50%;}
    .project-page .learning-video video{height: 254px;}
    .partnership-page p{font-size: 14px;}
    .give-zakat-page .zakat-block .zakat-card{width: calc(50% - 30px);}
    .contact-page h2{font-size: 22px; margin-bottom: 15px;}
    .contact-page .contact-left{width: 100%; margin-bottom: 30px; padding-right: 0px;}
    .contact-page .contact-right{width: 100%; }

    .press_coverage_page .pc_col{width: 50%; padding: 10px;}
    .media_coverage_page .pc_col{width: 50%; padding: 10px;}
    .impact-stories-page .impact-before-school .impact-detail{width: 100%; padding-right: 0px;}
    .impact-stories-page .impact-before-school .impact-image{width: 100%; padding-left: 0px;}
    
    .impact-stories-page .impact-stories-block .impact-stories-row .story-info {width: calc(100% - 0px);padding-right: 0px;}
    .impact-stories-page .impact-stories-block .impact-stories-row.impact-stories-row2{direction: ltr;}
    .impact-stories-page .impact-stories-block .impact-stories-row.impact-stories-row2 .story-info {padding-left: 0px;}
    .impact-stories-page .impact-before-school .impact-image{display: block;}   
    .impact-stories-page .impact-before-school .impact-image img{width: 80%; margin: auto; margin-bottom: 15px; display: block;}    
    .impact-stories-page .impact-before-school .impact-image img:nth-child(2) {position: relative;top: 0px;}
    .impact-stories-page .impact-beginning-school .impact-beginning-inner{display: block;}
    .impact-stories-page .impact-beginning-school .impact-beginning-inner img{width: 80%;display: block; margin: auto; margin-bottom: 15px;}
    .impact-stories-page .impact-stories-title{font-size: 20px;}

    .impact-stories-nw-page .stories-image-block{width: 100%; flex-wrap: wrap;}
    .impact-stories-nw-page .stories-image-block.single-stories{width: 100%;}
    .impact-stories-nw-page .stories-image-block .stories-col{width: 100%;}
    .impact-stories-nw-page .stories-row-1 .stories-row-image{width: 100%;}
    .impact-stories-nw-page .stories-row-1 .stories-row-detail{width: 100%; padding-left: 0px;}

    #footer-section .footer-about{width: 100%; padding-right: 0px; margin-bottom: 20px;}
    #footer-section .footer-contact{padding: 20px 25px;}
    #footer-section .footer-contact-info {width: 100%; border-left: 0px; border-top: 4px solid rgba(255, 255, 255, 0.2);padding-left: 0px; padding-top: 25px;}
    
}
@media screen and (max-width: 800px) and (min-width: 240px){}

@media screen and (max-width: 650px) and (min-width: 240px){
    .gerenric-heading .heading-text{font-size: 30px;}
    .gerenric-form ul li .form-left{width: 100%; padding-right: 0px; margin-bottom:15px;}
    .gerenric-form ul li .form-right{width: 100%;padding-left: 0px;}

    #banner-section .banner-detail {width: 100%; padding-right: 0px;}
    #banner-section .banner-image{width: 100%; margin-bottom: 25px;}
    #banner-section .banner-image video{height: auto;}

    .welcome-section .welcome-top{margin: 0px;}
    .welcome-section .welcome-top .welcome-box{width: 100%;}
    .welcome-section .empower-block .empower-box{width:calc(100% - 30px); font-size: 18px;}
    .welcome-section .mission-vision-block h2{font-size: 20px;}
    .welcome-section .mission-vision-block .mission-box {width: calc(100% - 0px);padding: 20px; margin-bottom: 20px;}
    .welcome-section .mission-vision-block .vision-box {width: calc(100% - 0px);padding: 20px;}
    .our-model-section .building-skills .building-skills-image{width: 100%;}
    .our-model-section .building-skills .building-skills-detail{width: 100%; padding: 15px 0px;}
    .project-section .project-card img{height: 370px;}
    .how-help-section .help-card{width: 100%; padding-bottom: 90px;}
    .how-help-section .help-card:last-child{padding-bottom: 0px;}

    .event_section .event_col{width: 100%;}
    .project_section .project_card img{height: 370px;}

    .event_detail_page .event_detail_lft{width: 100%;margin-bottom: 20px;}
    .event_detail_page .event_detail_image{width: 100%; height: auto; }
    .event_detail_page .event_detail_image img{width: 100%;height: auto; }
    .event_detail_page .event_detail_dt{width: calc(100% - 0%); padding-left: 0px;}
    .event_detail_page .event_detail_dt h3{font-size: 22px;}
    .event_detail_page .event_detail_dt h4{font-size: 22px;}
    .project-page .project-Empowering{margin-bottom: 30px;}
    .child-sponsorship-page .block .card{width: 100%; margin-bottom: 20px;}
    .bankdetail-block{width: 100%;}
    .bankdetail-block h2{font-size: 20px; margin-bottom: 10px;}
    .bankdetail-block ul li label{width:100%; text-align: left;}

    #inner-pg-heading{height: 90px;}
    #inner-pg-heading .inner-heading-text{font-size: 30px;}
    .who-we-are-page .who-we-row .who-we-image { margin: auto; margin-bottom: 20px; height: 320px;}
    .who-we-are-page .who-we-row .who-we-image img{height: 314px;}
    .who-we-are-page .who-we-row .who-we-detail {width: calc(100% - 0px); padding-left: 0px;}
    .who-we-are-page .who-we-row .who-we-detail h3{font-size: 22px;}
    .project-page .project-Empowering .project-image{height: 350px;}
    .project-page .project-Empowering .project-image img{height: 310px;}
    .project-page .project-Empowering .project-Empowering-col{width: 330px; margin: auto;}
    .project-page .project-Empowering .project-title{font-size: 16px;}
    .project-page .project-col{display: block;}
    .project-page .project-col img{width: 100%; margin-bottom: 20px;}
    .project-page .project-col .project-detail{width: 100%; padding-left: 0px;}
    .project-page .learning-video{width: 100%; margin-top: 20px; margin-bottom: 25px;}
    .project-page .learning-video video{height: auto;}
    .child-sponsorship-page .child-content-box p{font-size: 14px;}
    .give-zakat-page .zakat-block .zakat-card{width: calc(100% - 30px);}
    .give-zakat-page .zakat-uplift-block{width: 90%;}
    .give-zakat-page .zakat-contribution-block{width: 90%;}
    .contact-page .contact-detail ul li{width: 100%;}

    .press_coverage_page .pc_col{width: 100%; padding: 10px;}
    .media_coverage_page .pc_col{width: 100%; padding: 10px;}
    

    #footer-section .footer-bottom{display: block;}
    #footer-section .footer-bottom .social-media ul{justify-content: center; margin-bottom: 15px;}
    #footer-section .footer-copyright{text-align: center;}
}

@media screen and (max-width: 480px) and (min-width: 240px){}

@media screen and (max-width: 380px) and (min-width: 240px){}

@media screen and (max-width: 320px) and (min-width: 240px){}

@media screen and (max-width: 270px) and (min-width: 240px){}