*{ margin: 0; padding: 0; box-sizing: border-box; } .header-section{ width: 100%; height: fit-content; } .header-section .header{ width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; background-color: transparent; } .header-section .header-logo{ width: 197px; height: 38px; } .header-section .header-logo a{ width: 100%; height: 100%; } .header-section .header-logo a img{ width: 100%; height: 100%; } .header-section .header-nav-bar ul{ display: flex; align-items: center; justify-content: center; column-gap: 58px; } .header-section .header-nav-bar ul li{ font-size: 18px; } .header-section .header .header-btn button{ display: inline-flex; padding: 14px 22px; justify-content: center; align-items: center; gap: 10px; background-color: #283684; color: #fcb040; border-radius: 8px; font-size: 16px; margin-right: 81px; } .header-section .header-section-bg-img .nav-mobile{ position: absolute; top: 63px; right: 0; width: 299px; height: fit-content; background-color: #283b84; font-size: 20px; color: #fff; } .header-section .header-section-bg-img .nav-mobile ul li{ padding: 16px; } .header-section .header-section-bg-img .nav-mobile ul li:hover{ text-decoration: underline; color: #fcb040; } .header-section .header-section-bg-img .nav-mobile .nav-mobile-btn{ font-size: 20px; padding: 12px; background-color: #fcb040; color: #2A2A2A; display: inline-block; border-radius: 8px; margin: 16px; } .hidden { display: none; } .visible { display: block; } @media only screen and (max-width:320px) { .header-section{ padding: 20px 12px; } .header-section .header-logo{ width: 147px; height: 32px; } .header-section .header-logo img{ width: 100%; height: 100%; } .header-section .header-section-bg-img{ padding: 0px; } } @media (min-width:321px) and (max-width:375px) { .header-section{ padding: 20px 12px; } .header-section .header-logo{ width: 147px; height: 32px; } .header-section .header-logo img{ width: 100%; height: 100%; } } @media (min-width:376px) and (max-width:425px) { .header-section{ padding: 20px 12px; } .header-section .header-logo{ width: 147px; height: 32px; } .header-section .header-logo img{ width: 100%; height: 100%; } } @media (min-width:426px) and (max-width:768px) { .header-section{ padding-left: 22px; padding-right: 22px; } } @media (min-width:769px) and (max-width:1024px) { .header-section .header-section-bg-img .nav-mobile{ margin-top: 32px; } } @media (min-width:1025px) and (max-width:1440px) { .header-section .header-section-bg-img .nav-mobile{ margin-top: 32px; } } /* Main Section Style */ .header-section .main-container .main-content{ padding-top: 86px; padding-left: 9px; background-image: url(../images/main-india.png); background-position: center center; background-size: contain; background-repeat: no-repeat; } .header-section .main-container .main-content .main-para p{ font-size: 30px; font-weight: 600; color: #283684; margin-bottom: 41px; } .header-section .main-container .main-content .main-h1 h1{ font-size: 48px; font-weight: 700; margin-bottom: 41px; color: #2A2A2A; } .header-section .main-container .main-content .main-blue{ color: #283684; } .header-section .main-container .main-content .main-yellow{ color: #fcb040; } .header-section .main-container .main-content .main-content-para p{ font-size: 22px; font-weight: 400; color: rgb(134, 130, 130); margin-bottom: 136px; } .header-section .main-container .main-content .main-btn{ margin-bottom: 137px; } .header-section .main-container .main-content .main-reg-btn{ display: inline-flex; padding: 14px 20px; justify-content: center; align-items: center; background-color: #283684; color: #fcb040; border-radius: 8px; font-size: 16px; margin-right: 26px; } .header-section .main-container .main-content .main-req-btn{ display: inline-flex; padding: 12px 20px; justify-content: center; align-items: center; background-color: #fff; border: 2px solid #283684; color: #283684; border-radius: 8px; font-size: 16px; font-weight: 600; } .header-section .main-container .main-image .main-img{ width: 543px; height: 567px; } .header-section .main-container .main-image{ background-color: transparent; padding-top: 51px; } .header-section .main-container .main-image .main-img img{ width: 100%; height: 100%; } .header-section .header-section-bg-img{ position: relative; z-index: 1; padding-top: 38px; } .header-section .header-section-bg-img .main-img-bg{ width: 493px; height: 787px; position: absolute; right: 0; top: 0; z-index: -1; } .header-section .header-section-bg-img .main-img-bg img{ width: 100%; height: 100%; } @media only screen and (max-width:320px) { .header-section .main-container .main-content{ padding: 20px 18px 0px 18px; } .header-section .main-container .main-image { padding-top: 40px; } .header-section .main-container .main-image .main-img{ width: 343px; height: 367px; } .header-section .main-container .main-image .main-img img{ width: 100%; height: 100%; } .header-section .main-container .main-content .main-para p{ font-size: 16px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-h1 h1{ font-size: 20px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-content-para p{ font-size: 16px; margin-bottom: 16px; text-align: justify; } .header-section .main-container .main-content .main-reg-btn{ width: 100%; padding: 14px 14px; justify-content: center; align-items: center; background-color: #283684; color: #fcb040; border-radius: 8px; font-size: 16px; margin-bottom: 18px; } .header-section .main-container .main-content .main-content-para p{ margin-bottom: 32px; } .header-section .main-container .main-content .main-btn{ margin-bottom: 22px; } .header-section .header-section-bg-img{ padding: 0px; } } @media (min-width:321px) and (max-width:375px) { .header-section .main-container .main-content{ padding: 20px 18px 0px 18px; } .header-section .main-container .main-image { padding-top: 40px; } .header-section .main-container .main-image .main-img{ width: 343px; height: 367px; } .header-section .main-container .main-image .main-img img{ width: 100%; height: 100%; } .header-section .main-container .main-content .main-para p{ font-size: 16px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-h1 h1{ font-size: 20px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-content-para p{ font-size: 16px; margin-bottom: 16px; text-align: justify; } .header-section .main-container .main-content .main-reg-btn{ width: 100%; padding: 14px 14px; justify-content: center; align-items: center; background-color: #283684; color: #fcb040; border-radius: 8px; font-size: 16px; margin-bottom: 18px; } .header-section .main-container .main-content .main-content-para p{ margin-bottom: 32px; } .header-section .main-container .main-content .main-btn{ margin-bottom: 22px; } .header-section .header-section-bg-img{ padding: 0px; } } @media (min-width:376px) and (max-width:425px) { .header-section .main-container .main-content{ padding: 20px 22px 0px 22px; } .header-section .main-container .main-image { padding-top: 40px; } .header-section .main-container .main-image .main-img{ width: 343px; height: 367px; } .header-section .main-container .main-image .main-img img{ width: 100%; height: 100%; } .header-section .main-container .main-content .main-para p{ font-size: 16px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-h1 h1{ font-size: 20px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-content-para p{ font-size: 16px; margin-bottom: 16px; text-align: justify; } .header-section .main-container .main-content .main-reg-btn{ width: 100%; padding: 14px 14px; justify-content: center; align-items: center; background-color: #283684; color: #fcb040; border-radius: 8px; font-size: 16px; margin-bottom: 18px; } .header-section .main-container .main-content .main-content-para p{ margin-bottom: 32px; } .header-section .main-container .main-content .main-btn{ margin-bottom: 22px; } .header-section .header-section-bg-img{ padding: 0px; } } @media (min-width:376px) and (max-width:425px) { .header-section .main-container .main-content{ padding: 20px 22px 0px 22px; } .header-section .main-container .main-image { padding-top: 40px; } .header-section .main-container .main-image .main-img{ width: 343px; height: 367px; } .header-section .main-container .main-image .main-img img{ width: 100%; height: 100%; } .header-section .main-container .main-content .main-para p{ font-size: 16px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-h1 h1{ font-size: 20px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-content-para p{ font-size: 16px; margin-bottom: 16px; text-align: justify; } .header-section .main-container .main-content .main-reg-btn a{ width: 100%; padding: 14px 14px; justify-content: center; align-items: center; background-color: #283684; color: #fcb040; border-radius: 8px; font-size: 16px; margin-bottom: 18px; text-decoration: none; } .header-section .main-container .main-content .main-content-para p{ margin-bottom: 32px; } .header-section .main-container .main-content .main-btn{ margin-bottom: 22px; } .header-section .header-section-bg-img{ padding: 0px; } } @media (min-width:426px) and (max-width:590px) { .header-section .main-container .main-content{ padding: 20px 22px 0px 22px; } .header-section .main-container .main-image { padding-top: 40px; } .header-section .main-container .main-image .main-img{ width: 343px; height: 367px; } .header-section .main-container .main-image .main-img img{ width: 100%; height: 100%; } .header-section .main-container .main-content .main-para p{ font-size: 16px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-h1 h1{ font-size: 20px; margin-bottom: 11px; text-align: center; } .header-section .main-container .main-content .main-content-para p{ font-size: 16px; margin-bottom: 16px; text-align: justify; } .header-section .main-container .main-content .main-reg-btn{ width: 100%; padding: 14px 14px; justify-content: center; align-items: center; background-color: #283684; color: #fcb040; border-radius: 8px; font-size: 16px; margin-bottom: 18px; } .header-section .main-container .main-content .main-content-para p{ margin-bottom: 32px; } .header-section .main-container .main-content .main-btn{ margin-bottom: 22px; } .header-section .header-section-bg-img{ padding: 0px; } } @media (min-width:769px) and (max-width:1024px) { .header-section .main-container{ padding: 0px 22px; } } /* Educational Fees Collection Style */ .educational{ width: 100%; height: fit-content; margin-top: 61px; } .educational .educational-content .educational-container .educational-align{ display: flex; } .educational .educational-content .educational-container .educational-align .educational-image{ width: 647px; height: 564px; } .educational .educational-content .educational-container .educational-align .educational-image img{ width: 100%; height: 100%; } .educational .educational-content .educational-content-detail{ margin-top: 42px; height: fit-content; } .educational .educational-content .educational-content-detail .educational-h1{ font-size: 36px; font-weight: 600; color: #283684; margin-bottom: 16px; } .educational .educational-content .educational-content-detail .educational-para{ font-size: 20px; font-weight: 400; line-height: 30px; color: #2A2A2A; margin-bottom: 56px; text-align: justify; } .educational .educational-content .educational-content-detail .educational-btn button{ padding: 16px 26px; display: inline-flex; justify-content: center; align-items: center; background-color: #283684; color: #fcb040; border-radius: 8px; border: none; outline: none; } @media only screen and (max-width:320px) { .educational { margin-top: 12px; } .educational .educational-content .educational-container{ padding: 0px 18px; } .educational .educational-content .educational-container .educational-align .educational-image{ width: 100%; height: 297px; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-content-detail{ margin-top: 32px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn{ display: flex; justify-content: center; align-items: center; } .educational .educational-content .educational-container .educational-content-detail .educational-h1{ font-size: 20px; padding: 0px 12px; } .educational .educational-content .educational-container .educational-content-detail .educational-para{ font-size: 16px; padding: 0px 12px; margin-bottom: 22px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn button{ padding: 10px 16px; } } @media (min-width:321px) and (max-width:375px) { .educational { margin-top: 12px; } .educational .educational-content .educational-container{ padding: 0px 18px; } .educational .educational-content .educational-container .educational-align .educational-image{ width: 100%; height: 297px; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-content-detail{ margin-top: 32px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn{ display: flex; justify-content: center; align-items: center; } .educational .educational-content .educational-container .educational-content-detail .educational-h1{ font-size: 20px; padding: 0px 12px; } .educational .educational-content .educational-container .educational-content-detail .educational-para{ font-size: 16px; padding: 0px 12px; margin-bottom: 22px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn button{ padding: 10px 16px; } } @media (min-width:376px) and (max-width:425px) { .educational { margin-top: 12px; } .educational .educational-content .educational-container{ padding: 0px 22px; } .educational .educational-content .educational-container .educational-align .educational-image{ width: 100%; height: 337px; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-content-detail{ margin-top: 32px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn{ display: flex; justify-content: center; align-items: center; } .educational .educational-content .educational-container .educational-content-detail .educational-h1{ font-size: 20px; padding: 0px 12px; } .educational .educational-content .educational-container .educational-content-detail .educational-para{ font-size: 16px; padding: 0px 12px; margin-bottom: 22px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn button{ padding: 10px 16px; } } @media (min-width:426px) and (max-width:590px) { .educational { margin-top: 12px; } .educational .educational-content .educational-container{ padding: 0px 22px; } .educational .educational-content .educational-container .educational-align .educational-image{ width: 100%; height: 337px; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-align .educational-image .educational-img img{ width: 100%; height: 100%; } .educational .educational-content .educational-container .educational-content-detail{ margin-top: 32px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn{ display: flex; justify-content: center; align-items: center; } .educational .educational-content .educational-container .educational-content-detail .educational-h1{ font-size: 20px; padding: 0px 12px; } .educational .educational-content .educational-container .educational-content-detail .educational-para{ font-size: 16px; padding: 0px 12px; margin-bottom: 22px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn button{ padding: 10px 16px; } } @media (min-width:591px) and (max-width:768px) { .educational .educational-content .educational-container .educational-content-detail .educational-para{ font-size: 22px; } .educational .educational-content .educational-container .educational-content-detail{ padding: 0px 22px; } .educational .educational-content .educational-container .educational-content-detail .educational-btn{ display: flex; justify-content: center; align-items: center; } .educational .educational-content .educational-container .educational-content-detail .educational-h1{ font-size: 32px; } .educational .educational-content .educational-container .educational-content-detail .educational-para{ margin-bottom: 22px; } } @media (min-width:769px) and (max-width:1024px) { .educational .educational-content .educational-container .educational-content-detail{ padding: 0px 22px; } .educational .educational-content .educational-container .educational-content-detail .educational-para{ margin-bottom: 22px; } } @media (min-width:1025px) and (max-width:1440px) { .educational .educational-content .educational-container .educational-content-detail{ padding: 0px 11px; } .educational .educational-content .educational-container .educational-content-detail .educational-para{ margin: 0; } .educational .educational-content .educational-container .educational-content-detail{ margin-top: 42px; } } .bill-collection{ width: 100%; height: fit-content; margin-top: 61px; } .bill-collection .bill-collection-container .bill-collection-heading{ font-size: 36px; font-weight: 600; color: #283684; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-collection-img{ width: 100%; display: flex; justify-content: center; align-items: center; } .bill-collection .bill-collection-container .bill-collection-threebox{ display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; row-gap: 52px; margin-top: 79px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing{ width: 386px; height: fit-content; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo{ width: 120px; height: 120px; margin-bottom: 21px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo img{ width: 100%; height: 100%; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-heading{ font-size: 26px; font-weight: 600; color: #2A2A2A; margin-bottom: 21px; text-align: center; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-collection-para{ text-align: center; font-size: 20px; font-weight: 400; line-height: 28px; color: #2A2A2A; padding: 0px 16px; } @media only screen and (max-width:320px) { .bill-collection{ margin-top: 42px; } .bill-collection .bill-collection-container{ padding: 0px 18px; } .bill-collection .bill-collection-container .bill-collection-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox{ margin-top: 32px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo{ width: 71px; height: 71px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo img{ width: 100%; height: 100%; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-collection-para{ font-size: 16px; padding: 0px; } } @media (min-width:321px) and (max-width:375px) { .bill-collection{ margin-top: 42px; } .bill-collection .bill-collection-container{ padding: 0px 18px; } .bill-collection .bill-collection-container .bill-collection-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox{ margin-top: 32px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo{ width: 71px; height: 71px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo img{ width: 100%; height: 100%; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-collection-para{ font-size: 16px; padding: 0px; } } @media (min-width:376px) and (max-width:425px) { .bill-collection{ margin-top: 42px; } .bill-collection .bill-collection-container{ padding: 0px 22px; } .bill-collection .bill-collection-container .bill-collection-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox{ margin-top: 32px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo{ width: 71px; height: 71px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo img{ width: 100%; height: 100%; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-collection-para{ font-size: 16px; padding: 0px; } } @media (min-width:376px) and (max-width:425px) { .bill-collection{ margin-top: 42px; } .bill-collection .bill-collection-container{ padding: 0px 18px; } .bill-collection .bill-collection-container .bill-collection-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox{ margin-top: 32px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo{ width: 71px; height: 71px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo img{ width: 100%; height: 100%; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-collection-para{ font-size: 16px; padding: 0px; } } @media (min-width:426px) and (max-width:590px) { .bill-collection{ margin-top: 42px; } .bill-collection .bill-collection-container{ padding: 0px 18px; } .bill-collection .bill-collection-container .bill-collection-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox{ margin-top: 32px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo{ width: 71px; height: 71px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-logo img{ width: 100%; height: 100%; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-content-heading{ font-size: 20px; } .bill-collection .bill-collection-container .bill-collection-threebox .bill-collection-pricing .bill-collection-para{ font-size: 16px; padding: 0px; } } /* HaodaPay BBPS Features Style */ .educational-institutions{ width: 100%; height: fit-content; margin-top: 61px; } .educational-institutions .educational-institutions-container{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; height: fit-content; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 36px; font-weight: 600; color: #283684; margin-bottom: 31px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading .educational-institutions-yellow{ font-size: 36px; font-weight: 600; color: #fcb040; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align{ display: flex; align-items: center; margin-bottom: 16px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-tick{ width: 21px; height: 21px; margin-right: 16px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-tick img{ width: 100%; height: 100%; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-title{ font-size: 30px; font-weight: 600; color: #283684; text-align: justify; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-para{ font-size: 20px; font-weight: 400; color: #838383; margin-bottom: 31px; } .educational-institutions .educational-institutions-container .educational-institutions-images{ display: flex; justify-content: end; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img{ width: 631px; height: 797px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img img{ width: 100%; height: 100%; } @media only screen and (max-width:320px) { .educational-institutions{ margin-top: 32px; padding: 0px 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 28px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading .educational-institutions-yellow{ font-size: 22px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-title{ font-size: 22px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-tick{ margin-right: 8px; width: 21px; height: 21px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-para{ font-size: 16px; margin-bottom: 8px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img{ width: 331px; height: 347px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img img{ width: 100%; height: 100%; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 22px; } } @media (min-width:321px) and (max-width:375px) { .educational-institutions{ margin-top: 32px; padding: 0px 18px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 20px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading .educational-institutions-yellow{ font-size: 20px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-title{ font-size: 18px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-tick{ margin-right: 8px; width: 16px; height: 16px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-para{ font-size: 16px; margin-bottom: 8px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img{ width: 331px; height: 347px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img img{ width: 100%; height: 100%; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 20px; } } @media (min-width:376px) and (max-width:425px) { .educational-institutions{ margin-top: 32px; padding: 0px 22px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 20px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading .educational-institutions-yellow{ font-size: 20px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-title{ font-size: 18px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-tick{ margin-right: 8px; width: 16px; height: 16px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-para{ font-size: 16px; margin-bottom: 8px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img{ width: 331px; height: 347px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img img{ width: 100%; height: 100%; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 20px; } } @media (min-width:426px) and (max-width:590px) { .educational-institutions{ margin-top: 32px; padding: 0px 22px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 20px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading .educational-institutions-yellow{ font-size: 20px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-title{ font-size: 18px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-tick{ margin-right: 8px; width: 16px; height: 16px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-para{ font-size: 16px; margin-bottom: 8px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img{ width: 331px; height: 347px; } .educational-institutions .educational-institutions-container .educational-institutions-images .educational-institutions-img img{ width: 100%; height: 100%; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 20px; } } @media (min-width:591px) and (max-width:768px) { .educational-institutions{ margin-top: 32px; padding: 0px 22px; } .educational-institutions .educational-institutions .educational-institutions .educational-institutions-heading{ font-size: 32px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading .haodapay-features-yellow{ font-size: 32px; margin-bottom: 12px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-title{ font-size: 32px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-details .educational-institutions-align .educational-institutions-tick{ margin-right: 8px; width: 21px; height: 21px; } .educational-institutions .educational-institutions .educational-institutions-content .educational-institutions-details .educational-institutions-para{ font-size: 22px; margin-bottom: 8px; } .educational-institutions .educational-institutions-container .educational-institutions-content .educational-institutions-heading{ font-size: 32px; } } /* Slider Style */ .slider{ width: 100%; height: fit-content; margin-top: 61px; } .slider .slider-condainer .slider-heading{ font-size: 36px; font-weight: 600; color: #283684; margin-bottom: 64px; } .slider .slider-condainer .slider-heading .slider-yellow{ color: #fcb040; } .slider .slider-condainer .slider-detail{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 51px; row-gap: 51px; } .slider .slider-condainer .slider-detail .slider-content{ width: 361px; height: 586px; padding: 41px 31px; background-color: #fcb040; } .slider .slider-condainer .slider-detail .slider-content .slider-para{ font-size: 20px; font-weight: 400; color: #2A2A2A; margin-bottom: 21px; height: 329px; } .slider .slider-condainer .slider-detail .slider-content .slider-star{ display: flex; justify-content: center; align-items: center; column-gap: 5px; margin-bottom: 24px; color: #283684; } .slider .slider-condainer .slider-detail .slider-content .slider-image .slider-img{ width: 100%; height: fit-content; margin-bottom: 6px; display: flex; justify-content: center; align-items: center; } .slider .slider-condainer .slider-detail .slider-content .slider-image .slider-img .slider-customer{ width: 51px; height: 51px; border-radius: 50%; } .slider .slider-condainer .slider-detail .slider-content .slider-image .slider-img .slider-customer img{ width: 100%; height: 100%; border-radius: 50%; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name { font-size: 16px; font-weight: 400; color: #2A2A2A; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name .name{ font-size: 20px; font-weight: 400; color: #2A2A2A; } @media only screen and (max-width:320px) { .slider{ margin-top: 32px; padding: 0px 18px; } .slider .slider-condainer .slider-heading{ font-size: 20px; margin-bottom: 32px; } .slider .slider-condainer .slider-detail .slider-content{ width: 360px; height: fit-content; padding: 22px 22px; background-color: #fcb040; } .slider .slider-condainer .slider-detail .slider-content .slider-para{ font-size: 16px; height: 209px; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name { font-size: 16px; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name .name{ font-size: 18px; } } @media (min-width:321px) and (max-width:375px) { .slider{ margin-top: 32px; padding: 0px 18px; } .slider .slider-condainer .slider-heading{ font-size: 20px; margin-bottom: 32px; } .slider .slider-condainer .slider-detail .slider-content{ width: 360px; height: fit-content; padding: 22px 22px; background-color: #fcb040; } .slider .slider-condainer .slider-detail .slider-content .slider-para{ font-size: 16px; height: 209px; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name { font-size: 16px; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name .name{ font-size: 18px; } } @media (min-width:376px) and (max-width:425px) { .slider{ margin-top: 32px; padding: 0px 22px; } .slider .slider-condainer .slider-heading{ font-size: 20px; margin-bottom: 32px; } .slider .slider-condainer .slider-detail .slider-content{ width: 360px; height: fit-content; padding: 22px 22px; background-color: #fcb040; } .slider .slider-condainer .slider-detail .slider-content .slider-para{ font-size: 16px; height: 209px; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name { font-size: 16px; } .slider .slider-condainer .slider-detail .slider-content .slider-customer-name .name{ font-size: 18px; } } /* FAQ style */ .taps{ width: 100%; height: fit-content; margin-top: 96px; } @media only screen and (max-width:320px) { .taps{ margin-top: 32px; } } @media (min-width:321px) and (max-width:375px) { .taps{ margin-top: 32px; } } @media (min-width:376px) and (max-width:425px) { .taps{ margin-top: 32px; } } /* Blogs */ .blogs{ width: 100%; height: fit-content; margin-top: 64px; } .blogs .blogs-container .blogs-heading{ text-align: center; font-size: 36px; font-weight: 600; color: #283684; margin-bottom: 64px; } .blogs .blogs-container .blogs-content{ width: 100%; display: flex; justify-content: center; align-items: center; column-gap: 51px; row-gap: 51px; flex-wrap: wrap; } .blogs .blogs-container .blogs-content .blogs-detail{ width: 361px; height: fit-content; padding: 20px 24px; border-radius: 11px; background-color: #283684; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image{ width: 299px; height: 151px; margin-bottom: 16px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image img{ width: 100%; height: 100%; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-title{ font-size: 20px; font-weight: 400; color: #fcb040; margin-bottom: 16px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-para{ font-size: 18px; font-weight: 400; color: #fff; margin-bottom: 16px; height: 249px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-btn{ font-size: 18px; font-weight: 400; color: #fcb040; border-bottom: 1px solid #fff; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-btn i{ margin-left: 12px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-btn button{ margin-bottom: 16px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-date{ font-size: 18px; font-weight: 400; color: #fff; margin-top: 16px; } @media only screen and (max-width:320px) { .blogs{ margin-top: 22px; } .blogs .blogs-container .blogs-heading{ margin-bottom: 22px; font-size: 20px } .blogs .blogs-container .blogs-content .blogs-detail{ width: 299px; padding: 12px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-title{ font-size: 18px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-para{ font-size: 16px; height: 219px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-btn{ font-size: 16px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image{ width: 276px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image .blogs-date{ font-size: 16px; } .blogs .blogs-container .blogs-content{ row-gap: 41px; } } @media (min-width:321px) and (max-width: 375px) { .blogs{ margin-top: 22px; } .blogs .blogs-container .blogs-heading{ margin-bottom: 22px; font-size: 20px } .blogs .blogs-container .blogs-content .blogs-detail{ width: 299px; padding: 12px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-title{ font-size: 18px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-para{ font-size: 16px; height: 219px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-btn{ font-size: 16px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image{ width: 276px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image .blogs-date{ font-size: 16px; } .blogs .blogs-container .blogs-content{ row-gap: 41px; } } @media (min-width:376px) and (max-width: 425px) { .blogs{ margin-top: 22px; } .blogs .blogs-container .blogs-heading{ margin-bottom: 22px; font-size: 20px } .blogs .blogs-container .blogs-content .blogs-detail{ width: 299px; padding: 12px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-title{ font-size: 18px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-para{ font-size: 16px; height: 219px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-btn{ font-size: 16px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image{ width: 276px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image .blogs-date{ font-size: 16px; } .blogs .blogs-container .blogs-content{ row-gap: 41px; } } @media (min-width:426px) and (max-width: 590px) { .blogs{ margin-top: 22px; } .blogs .blogs-container .blogs-heading{ margin-bottom: 22px; font-size: 20px } .blogs .blogs-container .blogs-content .blogs-detail{ width: 299px; padding: 12px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-title{ font-size: 18px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-para{ font-size: 16px; height: 219px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-btn{ font-size: 16px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image{ width: 276px; } .blogs .blogs-container .blogs-content .blogs-detail .blogs-image .blogs-date{ font-size: 16px; } .blogs .blogs-container .blogs-content{ row-gap: 41px; } } /* Connetion Style */ .connection{ width: 100%; height: fit-content; margin-top: 99px; } .connection .connection-container{ display: flex; justify-content: center; flex-wrap: wrap; background-color: #283684; padding: 71px 81px 36px 81px; height: fit-content; } .connection .connection-container .connection-content{ height: fit-content; } .connection .connection-container .connection-content .connection-para{ font-size: 32px; font-weight: 600; color: #fff; margin-bottom: 8px; } .connection .connection-container .connection-content .connection-title{ font-size: 48px; font-weight: 600; color: #fcb040; margin-bottom: 27px; } .connection .connection-container .connection-content .connection-mini-para{ font-size: 28px; font-weight: 500; color: #fff; margin-bottom: 44px; } .connection .connection-container .connection-content .connection-contact .connection-phone { display: flex; align-items: center; font-size: 28px; font-weight: 500; margin-bottom: 22px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image{ width: 56px; height: 56px; margin-right: 28px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image img{ width: 100%; height: 100%; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-content .num{ color: #fcb040; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-content p{ color: #fff; } .connection .connection-container .collection-image{ margin-top: 22px; } .connection .connection-container.collection-img{ width: 738px; height: 449px; } .connection .connection-container.collection-img img{ width: 100%; height: 100%; } @media only screen and (max-width:320px) { .connection{ margin-top: 32px; } .connection .connection-container{ padding: 12px; } .connection .connection-container .connection-content .connection-para{ font-size: 16px; } .connection .connection-container .connection-content .connection-title{ font-size: 20px; margin-bottom: 14px; } .connection .connection-container .connection-content .connection-mini-para{ font-size: 18px; margin-bottom: 22px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image{ width: 36px; height: 36px; margin-right: 28px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image img{ width: 100%; height: 100%; } .connection .connection-container .connection-content .connection-contact .connection-phone { font-size: 16px; } } @media (min-width:321px) and (max-width:375px) { .connection{ margin-top: 32px; } .connection .connection-container{ padding: 12px; } .connection .connection-container .connection-content .connection-para{ font-size: 16px; } .connection .connection-container .connection-content .connection-title{ font-size: 20px; margin-bottom: 14px; } .connection .connection-container .connection-content .connection-mini-para{ font-size: 18px; margin-bottom: 22px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image{ width: 36px; height: 36px; margin-right: 28px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image img{ width: 100%; height: 100%; } .connection .connection-container .connection-content .connection-contact .connection-phone { font-size: 16px; } } @media (min-width:376px) and (max-width:425px) { .connection{ margin-top: 32px; } .connection .connection-container{ padding: 12px; } .connection .connection-container .connection-content .connection-para{ font-size: 16px; } .connection .connection-container .connection-content .connection-title{ font-size: 20px; margin-bottom: 14px; } .connection .connection-container .connection-content .connection-mini-para{ font-size: 18px; margin-bottom: 22px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image{ width: 36px; height: 36px; margin-right: 28px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image img{ width: 100%; height: 100%; } .connection .connection-container .connection-content .connection-contact .connection-phone { font-size: 16px; } } @media (min-width:426px) and (max-width:590px) { .connection{ margin-top: 32px; } .connection .connection-container{ padding: 12px; } .connection .connection-container .connection-content .connection-para{ font-size: 16px; } .connection .connection-container .connection-content .connection-title{ font-size: 20px; margin-bottom: 14px; } .connection .connection-container .connection-content .connection-mini-para{ font-size: 18px; margin-bottom: 22px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image{ width: 36px; height: 36px; margin-right: 28px; } .connection .connection-container .connection-content .connection-contact .connection-phone .connection-phn-image img{ width: 100%; height: 100%; } .connection .connection-container .connection-content .connection-contact .connection-phone { font-size: 16px; } } /* Disclaimer */ .disclamier{ width: 100%; height: fit-content; margin-top: 41px; } @media only screen and (max-width:320px) { .disclamier{ margin-top: 22px; } } @media (min-width:321px) and (max-width:375px) { .disclamier{ margin-top: 22px; } } @media (min-width:376px) and (max-width:425px) { .disclamier{ margin-top: 22px; } } /* Footer Style */ .footer{ width: 100%; height: fit-content; margin-top: 61px; } .footer .footer-container{ display: flex; flex-wrap: wrap; justify-content: center; } .footer .footer-container .footer-content .footer-img{ width: 100%; display: flex; align-items: center; justify-content: center; } .footer .footer-container .footer-content .footer-image{ width: 197px; height: 38px; } .footer .footer-container .footer-content .footer-image img{ width: 100%; height: 100%; } .footer .footer-container .footer-content .footer-para{ font-size: 22px; font-weight: 400; line-height: 35px; color: #2A2A2A; margin-top: 12px; padding-right: 51px; text-align: center; } .footer .footer-container .footer-content .footer-social{ display: flex; justify-content: center; align-items: center; margin-top: 12px; column-gap: 24px; } .footer .footer-container .footer-content .footer-social .footer-insta{ font-size: 32px; } .footer .footer-container .footer-content .footer-social .footer-insta .fa-instagram{ color: rgb(218, 25, 89); } .footer .footer-container .footer-content .footer-social .footer-insta .fa-facebook,.fa-twitter{ color: #283684; } .footer .footer-container .footer-menu .footer-list ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 36px; font-size: 22px; font-weight: 400; } @media only screen and (max-width:320px) { .footer{ margin-top: 22px; padding: 18px; } .footer .footer-container .footer-content .footer-image{ width: 147px; height: 32px; } .footer .footer-container .footer-content .footer-image img{ width: 100%; height: 100%; } .footer .footer-container .footer-content .footer-para{ width: 100%; font-size: 16px; font-weight: 400; line-height: 35px; color: #2A2A2A; text-align: center; padding: 0px; } .footer .footer-container .footer-menu .footer-list ul{ margin-top: 22px; font-size: 18px; } .footer .footer-container .footer-content .footer-social{ justify-content: center; } } @media (min-width:321px) and (max-width:375px) { .footer{ margin-top: 22px; padding: 18px; } .footer .footer-container .footer-content .footer-image{ width: 147px; height: 32px; } .footer .footer-container .footer-content .footer-image img{ width: 100%; height: 100%; } .footer .footer-container .footer-content .footer-para{ width: 100%; font-size: 16px; font-weight: 400; line-height: 35px; color: #2A2A2A; text-align: center; padding: 0px; } .footer .footer-container .footer-menu .footer-list ul{ margin-top: 22px; font-size: 18px; } .footer .footer-container .footer-content .footer-social{ justify-content: center; } } @media (min-width:376px) and (max-width:425px) { .footer{ margin-top: 22px; padding: 18px; } .footer .footer-container .footer-content .footer-image{ width: 147px; height: 32px; } .footer .footer-container .footer-content .footer-image img{ width: 100%; height: 100%; } .footer .footer-container .footer-content .footer-para{ width: 100%; font-size: 16px; font-weight: 400; line-height: 35px; color: #2A2A2A; text-align: center; padding: 0px; } .footer .footer-container .footer-menu .footer-list ul{ margin-top: 22px; font-size: 18px; } .footer .footer-container .footer-content .footer-social{ justify-content: center; } } @media (min-width:426px) and (max-width:768px) { .footer{ margin-top: 22px; } .footer .footer-container{ padding: 22px; } } @media (min-width:769px) and (max-width:1024px) { .footer{ margin-top: 22px; } .footer .footer-container{ padding: 22px; } } .footer-last{ width: 100%; height: fit-content; margin-top: 22px; } .footer-last .footer-container{ height: 100%; padding: 12px; border-top: 2px solid rgb(233, 228, 228); display: flex; justify-content: center; align-items: center; } .footer-last .footer-container .footer-content{ width: 100%; height: 100%; color: #2A2A2A; font-size: 18px; row-gap: 22px; } .footer-last .footer-container .footer-content { text-align: center; } .footer-last .footer-container .footer-content .footer-list ul{ display: flex; column-gap: 22px; flex-wrap: wrap; justify-content: center; } .footer-last .footer-container .footer-content .footer-list ul li{ display: flex; justify-content: center; align-items: center; } @media only screen and (max-width:320px) { .footer-last .footer-container .footer-content{ font-size: 16px; } } @media (min-width:321px) and (max-width:375px) { .footer-last .footer-container .footer-content{ font-size: 16px; } } @media (min-width:376px) and (max-width:425px) { .footer-last .footer-container .footer-content{ font-size: 16px; } }