:root { --color-whiteSmoke: #F2F2F2; --color-yellow: #FFE300; --color-golden-yellow: #FFDF02; --dark: #1B1B1B; --black: #000000; --black-russian: #000D26; --color-white: #FFFFFF; --color-muted: #5B5A5A; --color-white-50: #E5E5E5; --color-navbar-text: #5B5A5A; --color-grey: #F3F3F3; --color-bunker : #22282F; --color-lemon-chiffon: #FEFBCB; --color-seashell: #FDF5F1; --color-alice-blue: #EDF6FF; --color-chablis: #FCEBE3; --color-solitude: #EFF1F3; --color-black-pearl: #111417; --color-rock-blue: #22282F; --color-link-water: #CFD5DB; --color-red: #FF0000; --color-nero: #1A1A1A; --color-lemon-chiffon-2: #FFF9C9; --color-seashell-2: #FFF7F4; --color-white-lilac: #FCF5FD; --color-honey-dew: #F5FFF6; --color-chilean-heath: #FFFCE2; --color-alice-blue-2: #F4F9FF; --color-pippin: #FFE1D3; --color-lavender-blue: #D3D3FF; --color-cosmic-latte: #D1FFE2; --color-cyprus: #0D4A43; --color-alice-blue-3: #EDF7FF; --color-alice-blue-4: #F8FAFB; --fs-10: 0.625rem; --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-22: 1.2rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-26: 1.625rem; --fs-32: 2rem; --fs-34: 2.125rem; --fs-38: 2.375rem; --fs-40: 2.5rem; --fs-55: 3.4375rem; } /*===================== Font-family =================== */ @font-face { font-family: Montserrat-Bold; src: url('../font/Montserrat-Bold.ttf'); } @font-face { font-family: Montserrat-ExtraBold; src: url('../font/Montserrat-ExtraBold.ttf'); } @font-face { font-family: Montserrat-Medium; src: url('../font/Montserrat-Medium.ttf'); } @font-face { font-family: Montserrat-Regular; src: url('../font/Montserrat-Regular.ttf'); } @font-face { font-family: Montserrat-SemiBold; src: url('../font/Montserrat-SemiBold.ttf'); } @font-face { font-family: Montserrat-Light; src: url('../font/Montserrat-Light.ttf'); } @font-face { font-family: Montserrat-Black; src: url('../font/Montserrat-Black.ttf'); } @font-face { font-family: Lexend-Bold; src: url('../font/lexend/Lexend-Bold.ttf'); } @font-face { font-family: Lexend-ExtraBold; src: url('../font/lexend/Lexend-ExtraBold.ttf'); } @font-face { font-family: Lexend-Medium; src: url('../font/lexend/Lexend-Medium.ttf'); } @font-face { font-family: Lexend-Regular; src: url('../font/lexend/Lexend-Regular.ttf'); } @font-face { font-family: Lexend-SemiBold; src: url('../font/lexend/Lexend-SemiBold.ttf'); } @font-face { font-family: Lexend-Light; src: url('../font/lexend/Lexend-Light.ttf'); } @font-face { font-family: Lexend-Black; src: url('../font/lexend/Lexend-Black.ttf'); } .khand-light { font-family: "Khand", sans-serif !important; font-weight: 300 !important; font-style: normal !important; } .khand-regular { font-family: "Khand", sans-serif !important; font-weight: 400 !important; font-style: normal !important; } .khand-medium { font-family: "Khand", sans-serif !important; font-weight: 500 !important; font-style: normal !important; } .khand-semibold { font-family: "Khand", sans-serif !important; font-weight: 600 !important; font-style: normal !important; } .khand-bold { font-family: "Khand", sans-serif !important; font-weight: 700 !important; font-style: normal !important; } .line-height-n {line-height: normal !important;} /*===================== Color Background =================== */ .danger-color {color: var(--color-red) !important;} .sin-color {color: var(--my-sin) !important;} .yellow-color {color: var(--color-yellow);} .dark-color {color: var(--dark) !important;} .whiteSmoke-color {color: var(--color-whiteSmoke);} .lemon-chiffon-2 {color: var(--color-lemon-chiffon-2);} .color-cyprus {color: var(--color-cyprus);} .color-golden-yellow{color: var(--color-golden-yellow) !important;} .bg-golden-yellow{background-color: var(--color-golden-yellow) !important;} .bg-lemon{background-color: var(--color-lemon-chiffon) !important;} .bg-seashell{background-color: var(--color-seashell) !important;} .bg-alice-blue{background-color: var(--color-alice-blue) !important;} .bg-chablis{background-color: var(--color-chablis) !important;} .bg-solitude{background-color: var(--color-solitude) !important;} .bg-black-pearl{background-color: var(--color-black-pearl) !important;} .bg-rock-blue{background-color: var(--color-rock-blue) !important;} .light-gray-bg {background: #0f0f0f14 !important;} .whiteSmoke-bg {background-color: var(--color-whiteSmoke);} .dark-bg {background-color: var(--dark) ;} .yellow-bg {background-color: var(--color-yellow) !important;} .danger-bg {background-color: var(--color-red-bg);} .white-bg {background-color: var(--color-white) !important;} .warning-bg {background-color: var(--color-warning);} .bg-black{background: var(--black) !important;} .bg-gray{background-color: var(--color-grey) !important;} .bg-nero{background-color: var(--color-bunker) !important;} .bg-nero2{background-color: var(--color-nero) !important;} .bg-lemon-chiffon-2 {background-color: var(--color-lemon-chiffon-2) !important;} .bg-seashell-2{background-color: var(--color-seashell-2);} .bg-white-lilac{background-color: var(--color-white-lilac);} .bg-honey-dew{background-color: var(--color-honey-dew);} .bg-chilean-heath{background-color: var(--color-chilean-heath);} .bg-alice-blue-2{background-color: var(--color-alice-blue-2) !important;} .bg-alice-blue-3{background-color: #F6F8F9 !important;} .bg-alice-blue-4{background-color: var(--color-alice-blue-4) !important;} .bg-cosmic-latte{background-color: var(--color-cosmic-latte) !important;} .bg-lavender-blue{background-color: var(--color-lavender-blue) !important;} .bg-color-pippin{background-color: var(--color-pippin) !important;} .bg-cyprus {background-color: var(--color-cyprus) !important;} /*===================== Font Size =================== */ .fs-10 {font-size: var(--fs-10);} .fs-14 {font-size: var(--fs-14);} .fs-11 {font-size: var(--fs-11);} .fs-16 {font-size: var(--fs-16) !important;} .fs-18 {font-size: var(--fs-18);} .fs-20 {font-size: var(--fs-20);} .fs-24 {font-size: var(--fs-24);} .fs-26 {font-size: var(--fs-26);} .fs-40 {font-size: var(--fs-40) !important;} /* ================== Font Family =================== */ .ff_mon_bold{font-family: 'Montserrat-Bold';} .extra-bold-montserrat{font-family: 'Montserrat-ExtraBold';} .medium-montserrat{font-family: 'Montserrat-Medium';} .regular-montserrat{font-family: 'Montserrat-Regular' !important;} .semi-bold-montserrat{font-family: 'Montserrat-SemiBold' !important;} .light-bold-montserrat{font-family: 'Montserrat-Light';} /* extra */ .actives a{ background: #ffeb3b96 !important; border-radius: 18px; border: 2px solid; border-color: var(--color-yellow); font-family: 'Montserrat-Regular' !important; } .toast-container{z-index: 99;} .width{width: 100%;} .border-left_gray{border-left: 2px solid #ffffffbb !important;} .border-radius-10{border-radius: 10px;} .gap-12{gap: 12px;} .header-bottom-shadow{box-shadow: 0px 4px 4px 0px #00000040 !important; z-index: 9; position: relative;} .register-now{width: 400px; height: 64px;border-radius: 12px;background: linear-gradient(82deg, #FFC117 0%, #FFE300 58.74%); font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 700; line-height: normal; } .df-jcc-alc{display: flex; align-items: center; justify-content: start;} .cursor-pointer {cursor: pointer;} body {scroll-behavior: smooth;scroll-padding-top: 2rem !important;font-family: 'Montserrat-Medium';} /* ------------------------End-------------------------------------------------- */ /*================================================================= Home section ========================================================== */ header .navbar .navbar-collapse ul li a {font-family: 'Montserrat-Medium'; font-weight: 500;font-size: 20px !important;line-height: var(--fs-24) ;color: var(--dark) !important;} header .navbar-light .navbar-nav .nav-link.active {font-weight: 700;font-family: 'Montserrat-Bold';} header .navbar .navbar-collapse ul li .small-btn {margin: -0.3rem 0 0 -0.5rem;} header .navbar .navbar-collapse ul li .small-btn span {font-family: 'Montserrat-Bold'; height: 23px;background: #BDFF9E;border: 1px solid #2F591A;border-radius: 11.5px;color: #2F591A;font-weight: 600;font-size: 14px;line-height: 17px;padding-top: 0.15rem;padding-bottom: 0.15rem;} header .navbar a button {font-family: 'Montserrat-Bold'; font-weight: 500;font-size: 20px !important;line-height: var(--fs-24) ;background: #000000;border-radius: 6px;} header .navbar-light .navbar-toggler-icon {background-image: url('../img/menu.png') !important;} .navbar-toggler:focus {box-shadow: 0 0 0 0 !important;} .navbar-light .navbar-toggler{color: transparent !important;} /* ======================New ========================== */ header .navbar .navbar-collapse .navbar-nav #menu-item-62 .small-btn {font-family: 'Montserrat-Bold'; margin: -0.3rem 0 0 -0.5rem;} header .navbar .navbar-collapse .navbar-nav #menu-item-62 .small-btn span {height: 23px;background: #BDFF9E;border: 1px solid #2F591A;border-radius: 11.5px;color: #2F591A;font-weight: 600; font-family: 'Montserrat-SemiBold'; font-size: 14px;line-height: 17px;padding-top: 0.15rem;padding-bottom: 0.15rem;} #menu-item-62{position: relative;} header .navbar .navbar-collapse .navbar-nav li a.active{ font-weight: 800;font-family: 'Montserrat-ExtraBold';} header .navbar .navbar-collapse .navbar-nav li a { text-decoration: none; font-weight: 500;font-size: 15px !important;line-height: var(--fs-24) ;color: var(--dark) !important;} header .navbar .navbar-collapse .navbar-nav li{padding: 0 1rem;} header .navbar-collapse button{ color:#fff !important; } /* ======================New ========================== */ /* <<-------- Banner ---------->> */ .banner{background: var(--color-yellow);} .banner .text-heading h2, .banner .text-heading h1{font-size: var(--fs-55); line-height: 67px; color: var(--dark);} .banner .text-heading h2{font-weight: 500;} .banner .text-heading h1{font-weight: 700;font-family: 'Montserrat-Bold';} .banner .text-heading p {font-family: 'Montserrat-Regular'; font-weight: 400; font-size: 36px; line-height: 44px; color: var(--dark);} .banner .text-heading .price span{font-family: 'Montserrat-Bold' !important;} .banner .text-heading img{width: 246.05px; height: 72.9px;} /* <<--------- Find Us --------->> */ .find-us .text-heading h2{font-family: 'Montserrat-SemiBold'; font-weight: 600;font-size: 32px;line-height: 39px;color: #4E4D4D;} .find-us .text-heading marquee p{font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 36px; line-height: 44px;margin: 0 2rem;color: #9C9A9A; height: 65px;} .find-us .text-heading marquee p small{left: 26%; right: 50%; bottom: 0rem; z-index: 999999; font-weight: 500; font-size: 20px; line-height: var(--fs-24) ;} .find-us .text-heading p{font-family: 'Montserrat-SemiBold'; font-weight: 600;font-size: 20px;line-height: var(--fs-24) ;} .find-us .text-heading p a:hover{font-weight: 800; font-family: 'Montserrat-ExtraBold';} /* <<---------- car__washing_Features -------->> */ .car__washing_Features .text-heading h2{font-family: 'Montserrat-SemiBold'; font-weight: 600; font-size: 42px; line-height: 50px; color: #FFFFFF;} .car__washing_Features .text-heading li{font-family: 'Montserrat-SemiBold'; font-weight: 600; font-size: 32px; line-height: 50px; color: var(--color-yellow);} .car__washing_Features .car__Features_Img img{width: 100%;} .how_it_works .steps-circles .text-heading h2{font-family: 'Montserrat-Bold'; font-weight: 700;font-size: var(--fs-55);line-height: 67px;} .how_it_works .steps-circles .steps {width: 14rem;height: 14rem;background-color: var(--black);border-radius: 50%;display: flex;justify-content: center;align-items: center;} .how_it_works .steps-circles .service_img img{width: 4.9375rem; } .how_it_works .steps-circles .bookslot_img img{width: 7.5rem;} .how_it_works .steps-circles .doorstepcare_img img{width: 8.3125rem; } .how_it_works .steps-circles .text-heading h6 {font-family: 'Montserrat-Bold'; font-weight: 700; font-size: var(--fs-40); line-height: 49px;} .how_it_works .steps-circles .text-heading p {font-weight: 500; font-size: var(--fs-24) ; line-height: 29px; color: #3C3C3C;} .how_it_works .steps-circles .text-heading{height: 25vh; padding-top: 1.5rem;} /* <<--------- Text Heading --------->> */ .people_saying .text-heading h2{font-family: 'Montserrat-Bold'; font-weight: 700;font-size: 55px;line-height: 67px;color: var(--black);} .people_saying .card {box-shadow: 0px 4px 4px 0px #00000040; border: 0; border-radius: 26px; width: 533px; } .people_saying .card .card-body p{font-family: 'Montserrat-Regular'; font-weight: 400; font-size: 24px; line-height: 32px;} .people_saying .card h5{font-family: 'Montserrat-Regular'; font-weight: 400; font-size: 24px; line-height: 32px; color: var(--black);} /* <<--------- Download App --------->> */ .download_app .text-heading h2{font-family: 'Montserrat-SemiBold'; font-weight: 600; font-size: 55px; line-height: 67px;color: #FFFFFF;} /* <<--------- Our Services -------->> */ .our_services {background-image: url('../img/slider-bg-img.png') !important;background-repeat: no-repeat !important;} .our_services .text-heading h2{font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 55px; line-height: 67px; color: var(--color-white);} /* ================================== SERVICES ===================================== */ /* <<<------OUR SERVICES ------->> */ .our_services .side-line {position: absolute;left: 0;z-index: 9;height: 100%;width: 20%;background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.79) 67.71%, rgba(0, 0, 0, 0) 100%);} .our_services .side-line2 {position: absolute;right: 0;z-index: 9;height: 100%;width: 20%;background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0.79) 67.71%, rgba(0, 0, 0, 0) 100%);} .our_services .responsive .card{background-color: var(--black);color: var(--color-white);background: linear-gradient(#000, #000) padding-box, linear-gradient(41deg, #B9B9B9 6%, #121212 51%, #B9B9B9 99%) border-box;border: 2.5px solid transparent;border-radius: 15px; } .our_services .responsive .card .card-body p {font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 32px; line-height: 39px; text-align: center;} .our_services .responsive .slick-dots{bottom: -80px;} .our_services .responsive .slick-dots li button::before{width: 14px;height: 14px;background: #D9D9D9;border-radius: 50%;color: white !important;content: ' ';opacity: 1;} .our_services .responsive .slick-dots li.slick-active button:before{background-color: var(--color-yellow) !important;color: var(--color-yellow) !important;opacity: 1;} @media (min-width: 1300px) { .our_services .responsive .card{width: 370px !important;height: 351.62px;} } .wpcf7 .form-control::placeholder {font-size: 20px; line-height: 24px; letter-spacing: 0.05em; } .wpcf7 .form-control{padding: 0.8rem ;} .wpcf7 .wpcf7-submit {width: 400px; height: 64px;border-radius: 12px;background: linear-gradient(82deg, #FFC117 0%, #FFE300 58.74%); font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 700; line-height: normal; border: 0 !important } /* <<---- Slick ---->> */ .slick-next {right: 110px;z-index: 9;top: 40%;} .slick-prev{left: 95px;z-index: 9;top: 40%;} .slick-prev::before {content: url('../img/left-side.png');opacity: 1;} .slick-next::before {content: url('../img/right-side.png');opacity: 1;} .slick-track{width: 410470px !important;} .app_features .app_img img{width: 100%;} .app_features .text-heading h1{font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 55px; line-height: 67px; color: #FFFFFF;} .app_features .text-heading p{font-weight: 500; font-size: 32px; line-height: 39px;color: #7E7E7E !important;} /* Free Features */ .free_features {background-image: url('../img/happy-boy.png');background-repeat: no-repeat;} .free_features .text-heading h2{font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 55px; line-height: 67px; color: var(--black);} .free_features .text-heading .card{ height: 147px; box-shadow: 0px 4px 4px 0px #00000040; background: #FFFFFF; border-radius: 20px; overflow: hidden; margin: 2.38rem 0rem; } .free_features .text-heading .card p{font-weight: 500; font-size: 32px; line-height: 39px; color: var(--black);} .app_features .app_img .img-div::before{content: '-'; background: linear-gradient(45deg, #FFE300, transparent); position: absolute; bottom: 0; z-index: 99; height: 40vh;} /* =============================== FRANCHISE ====================================== */ .banner .text-heading .btn .img-icon img{width: 100% !important;height: 88% !important;} .banner .text-heading .btn .img-icon-2 img{width: 100% !important;height: 88% !important;} .banner .text-heading .btn .img-icon-3 img{width: 100% !important;height: 88% !important;} .banner .text-heading .icon-btn {background: #FFFFFF; border: 2px solid #292929; box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.3); border-radius: 51px; font-family: 'Montserrat-SemiBold'; font-weight: 600; font-size: 24px; line-height: 29px; height: 57px;display: flex; justify-content: space-evenly; align-items: center;} .banner .text-heading .btn-franchise{width: 461px; height: 57px; border-radius: 6px !important; font-size: 20px; line-height: 24px; font-family: 'Montserrat-Bold'; font-weight: 700;} /* .franchise_banner {background-image: url('../img/franchise-banner.png');background-repeat: no-repeat;background-position: left;background-size: 40%;} */ /* Exclusive Webinar Cards */ .exclusive_webinar_cards .text-center h5 {font-weight: 700; font-size: 36px; line-height: normal; text-align: center; color: #111417; font-family: 'Montserrat-Bold'} .exclusive_webinar_cards .text-center h6 {font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 28px; text-align: center; color: var(--black);} .exclusive_webinar_cards .cards {width: 220.844px; height: 236px; background: #FFF; box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.11); gap: 12px; padding: 15px;} .exclusive_webinar_cards .cards h6{font-weight: 700; font-size: 24px; color: #22282F;} .exclusive_webinar_cards .register-now-btn button{width: 400px; height: 64px;border-radius: 12px;background: linear-gradient(82deg, #FFC117 0%, #FFE300 58.74%); font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 700; line-height: normal; } /* Who This Webinar Will Help The Best */ .short_points_webinar .text-heading h2{color: #FFF; font-family: 'Montserrat-Bold';font-size: 36px;font-style: normal;font-weight: 700;line-height: normal;} .short_points_webinar .text-mini-heading p{color: #FFF; font-family: 'Montserrat-Light';font-size: 24px;font-style: normal;font-weight: 500;line-height: normal;} .short_points_webinar .text-mini-heading .small-card{border-radius: 16px; background: rgba(255, 255, 255, 0.16);display: inline-flex;padding: 24px;align-items: center; gap: 12px;} .short_points_webinar .text-mini-heading .small-card h6{color: #FAFAFB; font-family: 'Montserrat-Bold'; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; margin: 0 !important;} /* See our what our happy Entrepreneurs have to say! */ .happy_entrepreneurs_cards .text-heading h2{color: #000; text-align: center; font-family: 'Montserrat-Bold'; font-size: 36px; font-style: normal; font-weight: 700; line-height: normal;} .happy_entrepreneurs_cards .review-card{width: 533px; height: 330px; flex-shrink: 0; border-radius: 26px;background: #FFF;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 50px 45px; } .happy_entrepreneurs_cards .review-card p{color: #000;font-family: 'Montserrat-Light';font-size: 24px;font-style: normal;font-weight: 400;line-height: 32px; } .happy_entrepreneurs_cards .review-card .customer-name h6{font-family: 'Montserrat-Bold';font-style: normal;font-weight: 400; font-size: 24px; line-height: 32px;} .happy_entrepreneurs_cards .review-card .customer-name p{font-family: 'Montserrat-SemiBold';font-style: normal;font-weight: 500;font-size: 20px;} /* FAQs? */ .frequntly-questions .text-heading h2{font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 55px; line-height: 67px;} .frequntly-questions .accordion .accordion-item h2 button {font-weight: 500; font-size: 32px; line-height: 39px;} .frequntly-questions .accordion .accordion-item .accordion-collapse {font-weight: 500; font-size: 20px; line-height: 24px; color: #5C5959;} .frequntly-questions .offerings_points{display: flex;justify-content: center;align-items: center;} .frequntly-questions .offerings_points::after{content: '';box-shadow: 3.7rem 0rem 0rem 3rem var(--black);height: 100%;} .frequntly-questions .offerings_points h2{font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 55px; line-height: 67px;color: var(--black);} .frequntly-questions .offerings_points ul li {font-family: 'Montserrat-SemiBold'; font-weight: 600; font-size: 24px; line-height: 29px; color: var(--black); margin: 1.5rem 0;} /* Contact Form */ .contact-form .heading-form h2 {font-family: 'Montserrat-SemiBold'; font-weight: 600;font-size: 36px;line-height: 45px;color: #FFFFFF;} .contact-form .heading-form p {font-family: 'Montserrat-Light'; font-weight: 300;font-size: 20px;line-height: 28px;letter-spacing: 0.2px;color: rgba(255, 255, 255, 0.8);} .contact-form .heading-form strong {font-weight: 500;font-size: 20px;line-height: 30px;letter-spacing: 0.2px;color: rgba(255, 255, 255, 0.8);} .contact-form .heading-form span {font-family: 'Montserrat-Regular'; font-weight: 400;font-size: 20px;line-height: 24px;letter-spacing: 0.03em;color: #FFFFFF;} .contact-form .main-form h2 {font-family: 'Montserrat-SemiBold'; font-weight: 600;font-size: 42px;line-height: 48px;color: #111827;} .contact-form .main-form .sub-heading{font-family: 'Montserrat-Regular'; font-weight: 400;font-size: 18px;line-height: 22px;color: #94A1B0;} .contact-form .main-form .lable-heading{font-family: 'Montserrat-Bold'} .contact-form .main-form .form-control {font-family: 'Montserrat-Regular'; font-weight: 400;font-size: 18px;line-height: 22px;color: #111827; border-radius: 8px; border: 1px solid #CFD5DB;} .contact-form .main-form .form-control::placeholder{color: #94A1B0; font-family: 'Montserrat-SemiBold'; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px;} .pm-contact-form .contact-form .wpcf7 .form-select {font-family: 'Montserrat-SemiBold'; font-size: 14px; line-height: 22px; border-radius: 8px; border: 1px solid #CFD5DB; padding: 12.8px; text-transform: capitalize; color: #94A1B0;} .pm-contact-form .main-form .contact-form .refundable-text {min-height: 36px;background: linear-gradient(0deg, #16AA51, #16AA51), #16aa51;display: flex;align-items: center;color: var(--color-white);padding: 7px 15px;font-family: 'Montserrat-Medium';gap: 7px;border-radius: 6px;font-size: 14px;line-height: 20px;} .pm-contact-form .contact-form .wpcf7 .radio-ans label {display: flex; align-items: center; font-family: "Montserrat-SemiBold";} .pm-contact-form .contact-form .wpcf7 .radio-ans input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 17.5px; height: 17px; border: 1px solid #94A1B0; border-radius: 50%; outline: none; margin-right: 10px; position: relative; cursor: pointer;} .pm-contact-form .contact-form .wpcf7 .radio-ans input[type="radio"]:checked {box-shadow: 0 0 0 2px #333;} .pm-contact-form .contact-form .wpcf7 .radio-ans input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 100%; background-color: #120a0a; box-shadow: 0 0 0px 1px #fff;} /* ================================== ABOUT US ====================================*/ .about_us .text-heading h1, .about_us .text-heading h2{font-family: 'Montserrat-Bold'; font-weight: 700; font-size: 55px; line-height: 67px; color: var(--black);} .about_us .text-heading p{font-weight: 500; font-size: 20px; line-height: 32px;color: #303030;} article {height: 28vw;} article .about_img img{width: 100%;height: auto;} /* <<-------- Footer -------->> */ footer .text-top-heading a {font-family: 'Montserrat-Regular'; font-weight: 400;font-size: 14px;line-height: var(--fs-24) ;letter-spacing: 0.03em;color: #FFFFFF;} footer .nav-bar .nav li a {font-weight: 500;font-size: 16px;line-height: 130%;display: flex;align-items: center;color: #000;} footer .nav-bar .nav li a.active {font-family: 'Montserrat-SemiBold'; font-weight: 600;font-size: 18px;line-height: 130%;color: #E4E4E4;} footer hr {background-color: #ababab;border: 1px solid #ababab;margin-right: 15px;} footer .socials-icon div{width: 48px;height: 48px;background-color: var(--color-yellow) !important; display: flex; align-items: center; justify-content: center; border-radius: 50%;} footer .socials-icon div svg{color: var(--black);} footer#social{ background-color: #eeeeee !important; } footer p, p.text-white.mb-2.ff_mon_bold{ color:#000 !important; } /* Accordion */ .accordion-button:not(.collapsed) {color: var(--black) !important;background-color: transparent !important;box-shadow: 0 0 0 0 !important;} .accordion-button:focus {z-index: 3;border-color: transparent !important;outline: 0;box-shadow: 0 0 0 0 !important;} /* Accordion End */ /* ------------------ Grid New --------------------- */ .containers img {max-width: 100%;display: block;} .card {margin: 0;display: grid;grid-template-rows: 1fr auto;margin-bottom: 30px;break-inside: avoid;} .card img {grid-row: 1 / -1;grid-column: 1;} .containers {column-count: 4;column-gap: 30px;} /* ------------------ Grid New End --------------------- */ /* ************************** */ /* Dashboard Style */ /* ************************** */ .darkbg {background-color: #082032;} .orangebg {background-color: #f0a500;} .button { font-family: inherit; background: var(--color-yellow); color: var(--black); padding: 0.35em 0; font-size: 17px; border: none; border-radius: 0.7em; position: relative;align-content: center; align-items: center; overflow: hidden; height: auto; padding-left: 2.8em; padding-right: 3.5em;} .button .icon { background: #fff; height: 1.5em; width: 1.5em; border-radius: 2em; position: absolute; display: flex; align-items: center; justify-content: center; left: 0.4em; transition: all 0.5s;} .icon svg { margin-left: 0em; transition: all 0.5s; color: var(--black); width: 0.8rem; height: 0.8rem;} .button:hover .icon svg { transform: rotate(360deg);} .button:hover .icon { width: calc(100% - 0.85rem); border-radius: 0.5em;} /* ************************** */ /* Dashboard End */ /* ************************** */ /* ================ Channel Partner ===============*/ .channel-hero-banner{background-repeat: no-repeat; background-size: cover; background-position: center; aspect-ratio: 4/2;} .channel-hero-banner .text-heading h1{font-family: 'Montserrat-Regular';font-size: 66px;font-weight: 800;line-height: 80px;letter-spacing: 0em;color: #FAFAFB;} .channel-hero-banner .text-heading p{font-family: 'Montserrat-Regular';font-size: 30px;font-weight: 600;line-height: 46px;letter-spacing: 0em;color: var(--color-link-water);} .channel-hero-banner .text-heading button{ font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 700; line-height: 29px; letter-spacing: 0em; background: linear-gradient(82.31deg, #FFC117 0%, #FFE300 58.74%);} .channel-hero-banner .text-heading h1 .line-in-text::after{ content: ''; position: absolute; top: 17px !important; left: 0; width: 100%; background-image: url(../img/vector-line.png); background-repeat: no-repeat; height: 100%; background-position: bottom;} .video-section{ background-color: rgba(255, 255, 255, 1); box-shadow: 0px 0px 14px 7px #00000024; z-index: 1; position: relative;} .video-section .text-heading{ color: #67788C !important; font-family: 'Montserrat-Regular'; font-size: 28px; font-weight: 700; line-height: 34px; letter-spacing: 0em; text-align: center;} .video-section .btn{ background: linear-gradient(82.31deg, #FFC117 0%, #FFE300 58.74%); border-radius: 7px; font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 700; line-height: 29px; letter-spacing: 0em; text-align: center;} .benefits-cards{background-color: #EFF1F3 ;} .benefits-cards .main-section h5{ font-family: 'Montserrat-Bold'; font-size: 36px; font-weight: 700; line-height: 43.88px; letter-spacing: 0em; color: #22282F;} .benefits-cards .card{ border: 2px solid #DFE3E7; background: #FAFAFB; box-shadow: 0px 4px 8px 0px #00000014; border-radius: 18px !important;} .benefits-cards .card .card-body .card-img{ background-color: #EDFDE4; width: 93px; height: 93px; top: 29px; left: 29px; border-radius: 12px; display: flex; align-items: center; justify-content: center;} .benefits-cards .card .card-body .card-title{ color: #111417; font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; text-align: left;} .benefits-cards .card .card-body .card-text{ color: #94A1B0; font-family: 'Montserrat-Regular'; font-size: 16px; font-weight: 400; line-height: 19px; letter-spacing: 0em; text-align: left;} .questions-section .main-section h5{ font-family: 'Montserrat-Bold'; font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: 0em; text-align: center;} .questions-section .ques-ans-text h5{ font-family: 'Montserrat-Bold'; font-size: 28px; font-weight: 600; line-height: 34px; letter-spacing: 0em; text-align: left;} .questions-section .ques-ans-text p{ font-family: 'Montserrat-Regular'; font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: 0em; text-align: left; color: #94A1B0;} .partner-success-stories .main-section h6{ font-family: 'Montserrat-Regular'; font-size: 36px; font-style: italic; font-weight: 500; line-height: 44px; letter-spacing: 0em;} .partner-success-stories .main-section h6 strong{ font-family: 'Montserrat-Bold'; font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: 0em; font-style: normal;} .partner-success-stories .card{ width: 533px; height: 406px; border-radius: 26px; border: 1px; background-color: #94A1B0;} .partner-success-stories .card .card-body{ display: flex; flex-direction: column; justify-content: space-between;} .partner-success-stories .card .card-body .card-text{ font-family: 'Montserrat-Regular'; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: 0em; color: #DFE3E7; margin: 0;} .partner-success-stories .card .card-body hr{background-color: #94A1B0; border: 1px solid #94A1B0;} .partner-success-stories .card .card-body .partner-name h5{ color: #DFE3E7; font-family: 'Montserrat-Bold'; font-size: 28px; font-weight: 700; line-height: 32px; letter-spacing: 0em; margin: 0;} .partner-success-stories .card .card-body .partner-name p{ font-family: 'Montserrat-Regular'; font-size: 20px; font-weight: 500; line-height: 32px; letter-spacing: 0em; text-align: left; color: #94A1B0 !important;} .channel-partner-form .text-heading h6{ font-family: 'Montserrat-Bold'; font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: 0em;} .channel-partner-form .text-heading p{ font-family: 'Montserrat-Regular'; font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.02em; color: #94A1B0;} .text-line-bottom{ width: fit-content;} .text-line-bottom span::after{ content: ''; background: linear-gradient(82.31deg, #FFC117 0%, #FFE300 58.74%); width: 100%; height: 8px; display: block;} /* ================ Channel Partner END ===============*/ /* ================ PM with us New ===============*/ .line-text-bottom{border-bottom: 2px solid #FFE300; padding-bottom: 3px;} .pm-with-us-banner, .pm-with-us-banner-offer, .b2c-banner{display: flex; align-items: center; justify-content: center;} .pm-with-us-banner .container{ padding: 100px 0; display: grid; grid-template-columns: 1.8fr 0.5fr 2.5fr 0.2fr; grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". . ."; position: relative;} .pm-with-us-banner .container::before{ width: 468px; background-color: #FFE300; content: "-"; right: 0px; top: 0; position: absolute; color: #FFE300; height: 520px; z-index: 1; border-bottom-left-radius: 30px;} .pm-with-us-banner .banner-heading h1, .pm-with-us-banner-offer .banner-heading h1{font-size: 36px; line-height: 43.88px; font-weight: 700; font-family: 'Montserrat-Bold' } .pm-with-us-banner .banner-heading h5, .pm-with-us-banner-offer .banner-heading h5, .b2c-banner .banner-heading h5 {font-size: 24px; line-height: 29.26px; font-family: 'Montserrat-Medium'; color: #585858; } .pm-with-us-banner .banner-heading .live-container, .pm-with-us-banner-offer .banner-heading .live-container{background: #000000; border-radius: 12px; padding: 19px; text-align: center;} .pm-with-us-banner .banner-heading .live-container p, .pm-with-us-banner-offer .banner-heading .live-container p, .b2c-banner .banner-heading .download-btn p{ font-family: 'Montserrat-SemiBold'; font-size: 28px; font-weight: 600; margin: 0;} .pm-with-us-banner iframe, .pm-with-us-banner-offer iframe{border-radius: 24px; position: relative; z-index: 8;} .pm-with-us-banner-sm .banner-heading{margin: 0px 26%;} .pm-with-us-banner-sm .banner-heading .live-container{background: #000000; border-radius: 12px; width: 100%; padding: 37.3px 64px;} .pm-with-us-banner-sm .banner-heading .live-container p{ font-family: 'Montserrat-SemiBold'; font-size: 26px; font-weight: 600; line-height: 24.38px; text-align: center; display: flex;} .pm-with-us-banner-sm .banner-heading p {font-family: 'Montserrat-SemiBold'; font-size: 17px; font-weight: 600; line-height: 20.72px;} .pm-with-us-banner-sm .banner-heading p span{ font-family: 'Montserrat-Bold'; font-size: 17px; font-weight: 700; line-height: 20.72px; text-align: center;} .pm-partner-success-stories{background: #F7F5F6; padding: 36px 0px;} .pm-partner-success-stories .heading-text h2, .pm-nationwide-impact .heading-text h6{ font-family: 'Montserrat-SemiBold'; font-size: 36px; font-weight: 600; line-height: 31.69px; } .pm-partner-success-stories .heading-text p, .pm-nationwide-impact .heading-text p{ font-family: 'Montserrat-Medium'; font-size: 22px; font-weight: 500; line-height: 26.82px; } .pm-partner-success-stories .video-body .video-card { width: 427px; border-radius: 10px; box-shadow: 0px 4px 35px 0px #0000001A; background: #FAFAFB; padding: 12px 11.56px;} .pm-partner-success-stories .video-body .video { width: 100%; height: 211px; border-radius: 12px; background-color: #000; overflow: hidden; box-shadow: 0px 4px 4px 0px #00000040;} .pm-partner-success-stories .video-body .video-card p{ font-family: 'Montserrat-Regular'; font-size: 16px; font-weight: 400; line-height: 19.5px; margin: 0px 27px 0px 0px;} .pm-nationwide-impact{padding: 36px 0px 0px 0px;} .pm-nationwide-impact .container { padding: 40px 0; display: grid; grid-template-columns: 0.8fr 3fr 1fr 2.5fr; grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". . ."; position: relative;} .pm-nationwide-impact .container .card-body-main { display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr; grid-template-rows: 0fr 0fr 0fr; gap: 40px 0px; grid-template-areas: "."".""."; } .pm-nationwide-impact .container .card-body-main .card-body{ display: grid; grid-auto-flow: row dense; grid-template-columns: 0.5fr 2fr; grid-template-rows: 0.5fr; gap: 0px 25px; grid-template-areas: ". ."; } .pm-nationwide-impact .container .card-body-main .card-body .small-card { width: 90px; height: 90px; border-radius: 12px; opacity: 0px; background: #FFE300; display: flex; justify-content: center; align-items: center; } .pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line::after{ content: "-"; background-color: #FFE300; border-radius: 50%; width: 27px; height: 27px; color: #FFE300; position: absolute; right: -24px; border: 5px solid #FAFAFB; bottom: -24px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .second-line::after{ content: "-"; background-color: #FFE300; border-radius: 50%; width: 27px; height: 27px; color: #FFE300; position: absolute; right: -26px; border: 5px solid #FAFAFB; bottom: -2px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line img{transform: rotate(180deg); transform: rotate3d(1, 0, 0, 180deg); bottom: 0;;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after{ content: "-"; background-color: #FFE300; border-radius: 50%; width: 27px; height: 27px; color: #FFE300; position: absolute; right: -26px; border: 5px solid #FAFAFB; top: 40%;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line, .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line{padding: 5px 0 0 0;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .line img{width: 100%;} .pm-nationwide-impact .container .card-body-main .card-body .card-text h2{ font-family: 'Montserrat-Bold'; font-size: 30px; font-weight: 600; line-height: 36.57px; text-align: left;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p { font-family: 'Montserrat-Medium'; font-size: 17px; font-weight: 500; line-height: 20.72px; text-align: left; margin: 0;} .pm-contact-form .main-form{padding: 0 18px 18px 18px;} .pm-contact-form .main-form h4{ font-family: 'Montserrat-Bold'; font-size: 39px; font-weight: 600; line-height: 47.54px; text-align: center; padding: 36px 0;} .pm-contact-form .main-form .contact-form{ border-radius: 26px; padding: 39px 16px;} .pm-contact-form .main-form .contact-form h2{ font-family: 'Montserrat-Bold'; font-size: 30px; font-weight: 600; line-height: 39.01px; text-align: center;} .pm-contact-form .main-form .contact-form .sub-heading{ font-family: 'Montserrat-Regular'; font-size: 22px; font-weight: 500; line-height: 26.82px;} .pm-contact-form .live-container {background: transparent !important;} .pm-contact-form .center-img{display: flex; align-items: center; justify-content: center;} .pm-contact-form .live-container p{margin: 0;} .pm-contact-form #submitBtnPartnerWithUs, #submit-partner-manager-sv { background: #FFE300 !important ; color: black !important; font-size: 32px; font-weight: 600; line-height: 31.69px; text-align: center; font-family: 'Montserrat-Regular'; height: auto; padding: 19px 128px; border-radius: 12px; width: fit-content; border-color:#FFE300 !important ; } .pm-contact-form .wpcf7-spinner{ margin: 0;} .pm-contact-form .wpcf7-form > p {text-align: center;} .pm-frequently-questions {padding: 64px 0px;} .pm-frequently-questions .end-faq {display: flex; align-items: end; justify-content: start;} .pm-frequently-questions .heading-text h4{ font-family: 'Montserrat-Bold'; font-size: 50px; font-weight: 700; line-height: 60.95px; text-align: left;} .pm-frequently-questions .heading-text p{ font-family: 'Montserrat-Regular'; font-size: 22px; font-weight: 500; line-height: 26.82px; text-align: left; color: #7B7B7B;} .pm-frequently-questions .accordion-button::after { background-image: url("data:image/svg+xml,") !important ;} .pm-frequently-questions .accordion-button:not(.collapsed)::after{transform: none !important} .pm-frequently-questions .accordion .accordion-item .accordion-header .accordion-button{ font-family: 'Montserrat-Bold'; font-size: 18px; font-weight: 600; line-height: 21.94px; text-align: left;} .pm-frequently-questions .accordion .accordion-item {margin-bottom: 25px;} .pm-frequently-questions .accordion .accordion-item .accordion-body {padding: 0 49px 0 22px;} /* ================ PM with us END ===============*/ /* ==================== OFFERS PAGE ================= */ .main-offer-heading { position: relative;} .main-offer-heading .text-heading{height: 130px; display: flex; align-items: center; justify-content: center;} .main-offer-heading::before{ content: '.'; background-color: currentColor; width: 105%; position: absolute; top: 0; left: -10px; z-index: 99; height: 100%; transform: rotate(358deg); } .main-offer-heading::after{ content: '.'; background: linear-gradient(#FFC117 0%, #FFE300 100%); width: 110%; color: #FFC117; position: absolute; top: 0; height: 100%; z-index: 999; transform: rotate(1deg); left: -10px; } .main-offer-heading .text-heading h5{ right: 0; left: 0; position: absolute; z-index: 9999; font-size: 32px; font-family: 'Montserrat-SemiBold'; text-shadow: 0px 2px 3px #00000040;} .pm-with-us-banner-offer .container { padding: 100px 0; display: grid; grid-template-columns: 2.3fr 0.4fr 2.5fr; grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". . ."; position: relative;} .pm-offer-info{ background: linear-gradient(#FFC117 0%, #FFE300 100%);} .pm-offer-info .small-box-body {background-color: var(--black); border-radius: 12px; padding: 26px 20px 19px 20px; width: 270px;} .pm-offer-info .small-box-body .small-card-text {text-wrap: balance;} .pm-offer-info .small-box-body .small-card-text span{font-size: 16px; color: var(--color-white); font-family: 'Montserrat-Bold'; line-height: 20px;} .pm-offer-info .small-box-body .small-card-text .big-text{font-size: 42px; color: var(--color-white); font-family: 'Montserrat-Bold';} .pm-offer-info .small-box-body .small-card-icon{background-color: var(--color-white); border-radius: 12px; padding: 10px; width: 70px; height: 70px;} .offer-pm-contact {margin-top: 10rem !important;} .offer-pm-contact .main-body{background: var(--black)} .offer-pm-contact .main-body .heading-text{position: relative;} .offer-pm-contact .main-body .heading-text .text-content{position: absolute; z-index: 999; top: -68px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 20px;} .offer-pm-contact .main-body .heading-text .text-content p{font-size: 32px; font-family: 'Montserrat-SemiBold';} .offer-pm-contact .main-body .heading-text > img{position: absolute; z-index: 9; top: -90px; height: initial; } .offer-pm-contact .main-body .form-main {padding-top: 150px; padding-bottom: 50px;} .offer-pm-contact .main-body .form-main .form-body {background: white; border-radius: 26px;} .offer-pm-contact #submitBtnPartnerWithUs, #submit-partner-manager-sv { width: fit-content; } .offer-pm-contact .contact-form .wpcf7 .wpcf7-list-item-label { color: #94a1b0; font-family: 'Montserrat-Bold';} /* ==================== OFFERS PAGE END ================= */ /* ============ Thank You Page ============ */ .main-done-page{ height: 85vh; display: flex; justify-content: center; align-items: center; flex-direction: column;} .main-done-page .main-box{ padding: 10px; background: linear-gradient(82.31deg, #FFC117 0%, #FFE300 58.74%); /* box-shadow: 0px 3px 30px 3px #d4d3d3; */ width: 70%; height: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 10px;} .main-done-page .main-box .text-thank-you button{font-size: 36px;font-weight: 600; font-family: 'Montserrat-SemiBold'; border-radius: 16px; margin: 10px 0; cursor: none; } .main-done-page .main-box .text-thank-you a{font-size: 36px;font-weight: 600; font-family: 'Montserrat-SemiBold'; border-radius: 16px; margin: 10px 0; } .main-done-page .main-box .text-thank-you h2{font-size: 36px;font-weight: 600;} .main-done-page .main-box .text-thank-you p{ font-size: 20px; font-weight: 600; font-family: 'Montserrat-Regular';} .main-done-page .main-box .text-thank-you h5{ font-size: 24px; font-style: normal; font-weight: 600; line-height: 28px; font-family: 'Montserrat-Bold';} .main-done-page .small-card p{ font-size: 24px; font-weight: 600; font-family: 'Montserrat-Bold';} /* ============ Thank You Page End ============ */ /* ====== Iframe styling ========= */ .video-container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ background-size: cover !important; border-radius: 12px ; background-repeat: no-repeat; background-position: center; height: 100%;} .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;} .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;} .play-button img { width: 50px; height: 50px; } /* ====== Iframe styling END ===== */ .single-post-blog .post-thumbnail img {width: 100%; border-radius: 12px; height: auto} .single-post-blog h1, .single-post-blog h2, .single-post-blog h3 {font-family: 'Montserrat-Bold';} .file-upload p .file-label br{display: none;} .file-upload p .file-label { display: flex; align-items: center; justify-content: space-between; border: 1px solid #dcdcdc; border-radius: 8px; padding: 0 0 0 13px; width: 100%; max-width: 400px;} .file-label { display: flex; align-items: center; justify-content: space-between; width: 100%;} .upload-text { font-size: 16px; color: #6c757d; margin-right: 20px; width: 60%; overflow: hidden; color: #94A1B0; font-family: 'Montserrat-SemiBold'; font-size: 14px; font-weight: 400;} .file-input {display: none;} .upload-button { background-color: #333; color: #fff; border: none; padding: 15px 25px; border-radius: 8px; cursor: pointer;} .upload-button:hover { background-color: #555; } /* ================ Life time Opportunity ============ */ .lto-text-line {box-shadow: 0px 1.5px 0px 0px #FFE300;} /* .lto-btn { } */ /* Shine animation for button */ @keyframes shine { 0% { background-position: -200%; } 100% { background-position: 200%; } } @keyframes shineOverlay { 0% { left: -150%; } 100% { left: 150%; } } .discount-card { position: relative; display: inline-block; overflow: hidden; } .lto-btn { position: relative; background: linear-gradient(-99deg, #FFC117 14%, #FFE300 48%, #FFC117 90%); border: none; cursor: pointer; background-size: 200%; /* animation: shine 2s infinite linear; */ overflow: hidden; border-radius: 12px; padding: 34px 50px; font-size: 24px; font-family: 'Montserrat-Bold'; margin-top: 40px; width: auto } /* Shine effect overlay */ .lto-btn::before { content: ''; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; background: rgba(255, 255, 255, 0.3); transform: skewX(-30deg); animation: shineOverlay 1.5s infinite ease-in-out; } .shadow-lto {box-shadow: 0 4px 4px 0 rgb(0 0 0 / 25%)} .lto-form-shadow{ box-shadow: 0px 16px 16px 0px rgb(0 0 0 / 16%); } /* Banner section */ .lto-banner {padding: 50px 0px 35px 0px;} .lto-banner h1{ font-size: 38px; color: var(--color-white); font-family: 'Montserrat-Bold'; text-align: center;} .lto-banner h1 span { background: linear-gradient(82deg, #FFC117 0%, #FFE300 58.74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .lto-banner p { font-size: 32px; font-family: 'Montserrat-Medium'; color: #C2C2C2; text-align: center;} .lto-banner p span { box-shadow: 0px 1.5px 0px 0px #FFE300; } .lto-banner .video-main-body {padding: 2% 11%; text-align: center;} .lto-banner .video-main-body .video-container {border-radius: 24px;} /* Choose as Investment */ .choose-investment .main-body .text-heading h3 { font-size: 24px; background-color: var(--color-lemon-chiffon-2); width: fit-content; padding: 21px 25px; border-radius: 8px; margin: 0 auto; font-family: 'Montserrat-Bold'; text-align: center;} .choose-investment .main-body .investment-cards{ display: flex; justify-content: center; align-items: center; gap: 32px;} .choose-investment .main-body .investment-cards .boxs{background-color: var(--black);padding: 20px;border-radius: 8px;box-shadow: 0px 0px 0px 2px var(--color-yellow);text-align: center;} .choose-investment .main-body .investment-cards .boxs p{margin: 0;color: var(--color-white);font-size: 24px;font-family: 'Montserrat-SemiBold';} .choose-investment .main-body .investment-cards .boxs h5{color: var(--color-yellow);font-size: 30px;font-family: 'Montserrat-ExtraBold';} .choose-investment .main-body .investment-cards .boxs button{background: linear-gradient(95deg, #FCE33D 0%, #FFC600 100%); display: flex; align-items: center; gap: 15px; margin: 0 auto;} .choose-investment .main-body .investment-cards .boxs button u{ text-decoration-thickness: from-font;} /* Workshop section */ .workshop-points .box-body {border-radius: 36px; border: 2px solid #FFC117; margin: 40px; padding: 3% 14%; } .workshop-points h2 {text-align: center; font-size: 36px; font-family: 'Montserrat-Bold'; margin-bottom: 40px;} .workshop-points h2 span {box-shadow: 0px 2px 0px 0px #FFE300;} .workshop-points .custom-bullets { list-style: none; padding: 0; } .workshop-points .custom-bullets li { position: relative; padding-left: 50px; margin-bottom: 20px ; font-size: 24px; font-family: 'Montserrat-Medium'; } .workshop-points .custom-bullets li::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 0; width: 32px; height: 32px; background-image: url('../img/step-by-step.webp'); background-size: cover;} /* Webinar for section */ .webinar-for-boxs {margin: 30px;} .webinar-for-boxs h2{text-align: center; font-size: 36px; font-family: 'Montserrat-Bold'; } .webinar-for-boxs .cards-body { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 40px 0 10px 0px; } .webinar-for-boxs .cards-body .cards { display: flex; align-items: center; justify-content: center; gap: 20px; background-color: #1D1D1D; border-radius: 16px; width: 45.9%; height: 172px; padding: 20px 28px; } .webinar-for-boxs .cards-body .cards p {font-size: 24px; font-family: 'Montserrat-Medium'; color: var(--color-white); line-height: 30px; margin: 0; } .webinar-for-boxs .cards-body .cards p span {font-family: 'Montserrat-Bold';} .webinar-for-boxs .milestones-card { text-align: center; border-radius: 36px; border: 2px solid #FFC117; padding: 2%; width: 32%;} .webinar-for-boxs .milestones-card h3 { font-size: 52px; font-family: 'Montserrat-Bold';} .webinar-for-boxs .milestones-card p{ font-family: 'Montserrat-Medium'; font-size: 32px;} .webinar-for-boxs .media-coverage-main .media-coverage-card {width: 48%;} .webinar-for-boxs .media-coverage-main {border-radius: 12px;} .lto-hoora-cities .main-body .jumbotron {background-image: url("../img/city-banner.webp");background-size: cover;background-position: center;padding: 150px 100px 25px 100px;text-align: center;color: var(--color-white);} .lto-hoora-cities .main-body .jumbotron h1 {margin: 0; font-size: 32px; font-family: 'Montserrat-Bold'; display: flex; align-items: center; justify-content: center; } .lto-hoora-cities .main-body .jumbotron p{margin: 0; font-size: 16px; font-family: 'Montserrat-Medium'; } /* Form Page */ .pm-contact-form .main-form .contact-form .workshop-points .custom-bullets li::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 0; width: 24px; height: 24px; background-image: url('../img/right-green.png') !important; background-size: cover;} .pm-contact-form .main-form .offering-card .workshop-points ul li {font-size: 24px !important; font-family: 'Montserrat-Medium'; padding-left: 38px;} .pm-contact-form .main-form .offering-card .workshop-points ul li span {font-family: 'Montserrat-Bold'; } .pm-contact-form .main-form .offering-card .card-amount {border: 1px solid;border-radius: 12px;padding: 20px;} .pm-contact-form .main-form .offering-card .card-amount h3, .pm-contact-form .main-form .offering-card .card-amount h2 {font-size: 32px;} .pm-contact-form .main-form .offering-card .card-amount h3{font-family: 'Montserrat-Bold'; color: #FF0000; font-size: 32px;} .pm-contact-form .main-form .offering-card .card-amount h2:first-child{font-family: 'Montserrat-Bold'; } .pm-contact-form .main-form .offering-card .card-amount h2:last-child{font-family: 'Montserrat-Bold'; color: #4CAF50;} .pm-contact-form .main-form .offering-card .card-amount .strikethrough::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background-color: red; transform: translateY(-50%);} .pm-contact-form .main-form .offering-card .countdown { display: flex; background-color: var(--color-nero); padding: 30px 20px; border-radius: 12.87px; color: white; font-size: 24px; font-weight: bold; width: 85%; margin: 30px auto; justify-content: center; box-shadow: 6px 6px 25px 0px rgb(0 0 0 / 16%); } .pm-contact-form .main-form .offering-card .countdown div { margin: 0 5px; text-align: center; font-size: 51px; font-family: 'Montserrat-Regular';} .pm-contact-form .main-form .offering-card .countdown div span { display: block; font-size: 19px; margin-top: 5px; color: var(--color-white); font-family: 'Montserrat-Regular';} .pm-contact-form .main-form .offering-card h2 {font-size: 36px;} .pm-contact-form .main-form .offering-card { padding: 40px 50px;} /* ================ Life time Opportunity End ============ */ /* ================ HTML Form ================ */ #registrationForm .radio-offer .discount-radio{position: relative;} #registrationForm .radio-offer .discount-radio img{ position: absolute; top: -18px; left: 0;} #registrationForm .radio-offer input[type="radio"] {height: 100%;width: 20%;} #registrationForm .radio-offer label{border: 1px solid #cfd5db !important;border-radius: 8px !important;padding: 10px 6px !important;width: 31% !important;display: flex;align-items: center;gap: 3px;font-size:14px;} #registrationForm .radio-offer .discount-radio .discount-card {border-radius: 4px;background: linear-gradient(9deg, #115329 0%, #4caf50 100%);color: white;padding: 6px 6px;width: 97%;font-size: 11px;position: absolute;top: -50%;left: 0;margin: 2.5px -0.5px;overflow: hidden;background-size: 200%;font-family: "Montserrat-Bold";} #registrationForm .radio-offer .discount-radio .discount-card::before {content: "";position: absolute;top: 0;left: -150%;width: 150%;height: 100%;background: rgba(255, 255, 255, 0.4);transform: skewX(-30deg);animation: shineOverlay 1.5s infinite ease-in-out;} #registrationForm .radio-offer .discount-radio label {border: 1px solid #cfd5db !important;border-radius: 8px !important;padding: 0px 2px !important;width: 38% !important;margin: 0;} /* ================ HTML Form END ================ */ /* ========== Modal Franchise Cost ========= */ .franchise-cost {background: hsl(0deg 0% 0% / 60%);} .franchise-cost .modal-header{padding: 1rem 1rem 0 1rem;} .franchise-cost .modal-content { border: 0px; background-color: #D9D9D9; border-radius: 16px;} .franchise-cost .modal-content .modal-body h5{ display: block; position: relative; max-width: 800px; width: fit-content; margin: 0 auto; font-family: "Montserrat-Medium"; font-size: 20px; padding: 12px;} .franchise-cost .modal-content .modal-body h5::before { content: ""; position: absolute; inset: 0; border-radius: 8px; border: 2px solid transparent; background: linear-gradient(93deg, #FCE33D, #FCE33D, #FFC600) border-box;-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);-webkit-mask-composite: destination-out;mask-composite: exclude;} .franchise-table {max-width: 1000px;margin: 0 auto;padding: 20px;border-radius: 10px;} .franchise-table table {width: 100%;border-collapse: collapse;margin-top: 20px;} .franchise-table th, .franchise-table td {padding: 5px 15px;} .franchise-table th {font-family: "Montserrat-Regular";font-size: 14px !important;color: hsl(0deg 0% 0% / 60%);} .franchise-table .highlight {color: #2E7D32;font-family: "Montserrat-SemiBold";font-size: 20px;} .franchise-table .highlight-expense {font-weight: bold;color: #FF5722;} /* Vertical Divider */ .franchise-table td + td:nth-child(3), .franchise-table th:nth-child(3) {border-left: 1px solid #FFE300;border-right: 1px solid #FFE300;} .franchise-table td:nth-child(2), .franchise-table td:nth-child(3), .franchise-table td:nth-child(4){text-align: center;} .franchise-table .tier-heading {font-weight: bold;text-align: center;} .franchise-table .highlight-expense-total {font-weight: bold;color: #000; font-family: "Montserrat-Bold";} .franchise-table table tr td strong {font-family: "Montserrat-Bold";} .franchise-table .small-btn{background-color: #4CAF50; color: var(--color-white); border-radius: 2px; padding: 2px 7px; display: flex; justify-content: center; align-items: center; width: fit-content; font-size: 12px; } .franchise-table .text-green td{color: #2E7D32; font-family: "Montserrat-Bold"; font-size: 20px; } .franchise-table tr td {font-family: "Montserrat-Medium";} .franchise-table .text-green .small-button-gradient {background: linear-gradient(90deg, #FFC117 17%, #FFE300 46%, #FFC117 95%); padding: 4px 12px; color: #115329; border-radius: 4px; width: fit-content;} /* ============ benefits-of-car-care =========== */ .benefits-of-car-care{ position: relative; background: #FAFAFB} .benefits-of-car-care h1 { width: fit-content; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; padding: 20px 0px; position: relative;} .benefits-of-car-care .line-bottom::before{ content: ''; border-bottom: 1.7px solid #8C8C8C; width: 70%; position: absolute; height: 1.5px; bottom: 0; left: 0; margin: 0 auto; right: 0; border: 1px solid #8C8C8C; background: #8C8C8C;} .benefits-of-car-care .body-content img { width: 100%; margin: 40px 0;} .benefits-of-car-care .body-content{position: relative} .benefits-of-car-care .body-content::after{ content: ''; border-bottom: 1.7px solid #8C8C8C; width: 70%; position: absolute; height: 1.5px; left: 0; margin: 0 auto; right: 0; border: 1px solid #8C8C8C; background: #8C8C8C; bottom: 0; } .benefits-of-car-care .body-content .main-content p { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 400; font-size: 100%;} .benefits-of-car-care .body-content .main-content p strong{font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 120%;} .benefits-of-car-care .body-content .main-content ol{padding-left: 22px} .benefits-of-car-care .body-content .main-content ol li{margin-bottom: 12px} .benefits-of-car-care .body-content .main-content ol li::marker{font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600;} .benefits-of-car-care .more-benefits{overflow: scroll;} .benefits-of-car-care .more-benefits::-webkit-scrollbar{width: 10px;} .benefits-of-car-care .more-benefits .main-body{width: fit-content} .benefits-of-car-care .more-benefits .main-body .main-body-card a{width: auto; height: 52px; font-size: 12px; text-decoration: none; border-radius: 7px; color: var(--black); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; padding: 10px 12px;} .customer-review-page { padding: 20px; font-family: Arial, sans-serif;} .customer-review-page h5 {margin-bottom: 20px;} .customer-review-page #recent-reviews .review-item { border: 0.7px solid #ccc; padding: 15px; display: flex; flex-direction: column; background: white; margin-bottom: 15px; border-radius: 10px;} .customer-review-page .review-header {margin-bottom: 10px;} .customer-review-page .review-avatar { background-color: #007bff; color: white; font-size: 16px; /* font-weight: bold; */ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 10px;} .customer-review-page .review-name { font-weight: bold; font-size: 16px;} .customer-review-page .review-rating {color: gold;} .customer-review-page .review-date { font-size: 14px; color: gray;} .customer-review-page .pagination { display: flex; justify-content: center; margin-top: 20px;} .customer-review-page .pagination button { margin: 0 5px; padding: 5px 10px; border: none; background-color: #007bff; color: white; cursor: pointer;} .customer-review-page .pagination button.active { background-color: #0056b3; font-weight: bold;} .customer-review-page .testimonial-videos iframe { margin-bottom: 15px; border-radius: 15px;} .customer-review-page button{ border-radius: 50%; width: 35px; height: 35px;} .customer-review-page button:hover svg { transform: scale(1.2); transition: transform 0.2s ease;} .customer-review-page .read-more-btn {font-size: 12px;} /* ======== B2C =============== */ .b2c-banner .banner-heading h1 {font-size: 48px; line-height: 64px; font-family: 'Montserrat-Bold' } .b2c-banner .container { padding: 100px 12px; display: grid; grid-template-columns: 3.8fr 0fr 2.5fr; grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". . ."; position: relative;} .b2c-banner .banner-heading h1 span {font-family: 'Montserrat-Black'; position: relative; } .b2c-banner .banner-heading h1 span::after{background-image: url("../img/vector-line-2.png"); content: "."; position: absolute; color: transparent; width: 100%; left: 0; background-position: bottom; background-repeat: no-repeat; bottom: -13px; } .b2c-banner .banner-heading h5{margin: 30px 0px 36px 0px;} .b2c-banner .banner-heading .download-btn{background: #000000; border-radius: 12px; padding: 27px 91px; text-align: center; width: fit-content; box-shadow: 0px 4px 4px 0px #00000040; } .b2c-banner .banner-heading a{width: fit-content;} .b2c-banner .banner-img{position: absolute;right: -45px;top: -40px;} .b2c-count-overall .small-box-body {border-radius: 16px; padding: 22px 25px 18px 25px; width: 270px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0px 4px 4px 0px #0000001a; border: 1px solid #0000001a; } .b2c-count-overall .small-box-body .small-card-text {line-height: 24px;} .b2c-count-overall .small-box-body .small-card-text .big-text{font-size: 36px; font-family: 'Montserrat-Bold';} .b2c-count-overall .small-box-body .small-card-text .small-text {font-size: 20px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-text .small-text-2 {font-size: 18px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-text .extra-small-text {font-size: 13px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-icon{border-radius: 12px; padding: 10px; width: 70px; height: 70px;} .our-services-2 { background-image: url(../img/our-services-2.png) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important;} .our-services-2 .text-heading h2 {font-size: 36px; font-family: 'Montserrat-SemiBold'; color: var(--color-white); } .our-services-2 .b2c-responsive .card{background-color: transparent; border: 0px;} .our-services-2 .b2c-responsive .card .card-body {padding: 0; text-align: center;} .our-services-2 .b2c-responsive .card .card-body .card-text{padding: 15px 0; color: var(--color-white); font-family: 'Montserrat-Bold'; font-size: 20px; } .pm-partner-success-stories-2{background-color: #DFE3E7 !important;} .pm-partner-success-stories-2 .video-body .video-card { box-shadow: 0px 42.44px 61px 0px #00000014; border-radius: 8px; padding: 25px 45px 50px 45px; width: 100%;} .pm-partner-success-stories-2 .video-body .video-card p{margin: 0px;} .pm-partner-success-stories-2 .video-body .video-card .sub-text{font-family: 'Montserrat-Bold';} .b2c-why-choose-us .heading-text .text-center {font-size: 36px; font-family: 'Montserrat-SemiBold';} .b2c-why-choose-us .wcu-body {display: flex; justify-content: space-between; gap: 20px; } .b2c-why-choose-us .wcu-body .box-1{text-align: center; padding: 0px 30px;} .b2c-why-choose-us .wcu-body .box-1 .img-bg{height: 43%;} .b2c-why-choose-us .wcu-body .box-1 .img-bg img{width: 100%;} .b2c-why-choose-us .wcu-body .box-1 h3{font-size: 24px; font-family: 'Montserrat-SemiBold'; color: #0069E1; margin: 25px 0px 12px 0px;} .b2c-why-choose-us .wcu-body .box-1 p{font-size: 16px; font-family: 'Montserrat-Medium'; line-height: 20px; padding: 0px 15px;} .solution-info {background-color: var(--color-black-pearl); padding: 60px 0px;} .solution-info .body-info{color: var(--color-white);} .solution-info .body-info h2{font-size: 24px; font-family: 'Montserrat-SemiBold'; margin-bottom: 25px;} .solution-info .body-info p, .solution-info .body-info ul li , .solution-info .body-info ol li, .solution-info .body-info p a{font-family: 'Montserrat-Medium'; font-size: 16px; margin: 0;} .solution-info .body-info p strong, .solution-info .body-info ul li strong, .solution-info .body-info ol li strong {font-family: 'Montserrat-Bold'; } .solution-info .body-info ul{margin: 0px;} .service-book {background-color: #FFE300; padding: 20px 0px;} .service-book .text-heading {font-size: 36px; font-family: "Montserrat-SemiBold"; text-align: center; padding: 20px 0px; } .service-book .card {background-color: #FFF49D; border-radius: 17px; border: 0px; text-align: center; height: 112px; } .service-book .card .card-body{padding-left: 8px; padding-right: 8px;} .service-book .card .card-body .card-title { font-size: 22px; font-family: "Montserrat-SemiBold"; } .service-book .card .card-body .card-text { font-size: 14px; line-height: 17px; font-family: "Montserrat-Medium"; } .service-book .img-box img{width: 100%;} .service-book .img-box{text-align: center;} .pm-frequently-questions-b2c{padding: 30px 0px 40px 0px;} .pm-frequently-questions-b2c .text-heading{font-size: 36px; font-family: "Montserrat-SemiBold";} .pm-frequently-questions-b2c .accordion .accordion-item .accordion-header .accordion-button{padding: 0.3rem 1.25rem; font-family: "Montserrat-SemiBold"; } .pm-frequently-questions-b2c .accordion .accordion-item {margin-bottom: 26px !important;} .pm-frequently-questions .accordion .accordion-item .accordion-header .accordion-button{font-size: 24px; line-height: 30px;} .pm-frequently-questions .accordion .accordion-item .accordion-body{font-size: 16px; font-family: "Montserrat-Regular"; } .hoora-city-availability .text-heading{font-size: 36px; font-family: "Montserrat-SemiBold"; text-align: center; } .hoora-city-availability .city-box{ box-shadow: 0px 4px 16px 0px #0000001a; border-radius: 8px; padding: 10px 20px 30px 20px; text-align: center; border: 1px solid #0000001a; width: 210px; height: 256px; display: flex; justify-content: end; align-items: center; gap: 10px; flex-direction: column;} .hoora-city-availability .city-body { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 30px 0px;} .hoora-city-availability .city-box p{font-size: 24px; font-family: "Montserrat-SemiBold"; color: #45505D; } .hoora-city-availability .find-us .text-heading marquee p, .find-us .scroll-container .city-group p{height: 30px; line-height: 30px; font-size: 24px; font-family: "Montserrat-Bold"; background: var(--black); color: var(--color-white) !important; height: fit-content !important; padding: 6px 15px; border-radius: 4px; } .find-us .scroll-container { display: flex; width: fit-content; animation: scroll 25s linear infinite;} @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .find-us .city-group { display: flex; gap: 40px; padding: 0 20px;} .find-us .city { white-space: nowrap; position: relative; margin: 0 15px;} .find-us .city:last-child:after {content: none;} /* ======== B2C END =============== */ /* TODO: 🔥 Partner With Us New Design */ /* ======== # 1 Indias Autocare App =============== */ .button-gradient { background: linear-gradient(90deg, #FFC117 17%, #FFE300 46%, #FFC117 95%); border: none; padding: 17.2px 84.5px; color: var(--black); font-size: 24px; border-radius: 7px; cursor: pointer; font-family: "Montserrat-Bold";} .button-gradient:hover {background: var(--black); color: var(--color-white);} .first-autocare-app-banner {background-color: var(--color-yellow) !important; flex-direction: column; padding: 40px 0px;} .first-autocare-app-banner .main-heading {font-size: 48px; font-family: 'Montserrat-Bold'; color: var(--color-black); text-align: center; margin-bottom: 20px; text-shadow: 2px 1px var(--color-white)} .first-autocare-app-banner .container {padding: 1rem .75rem; grid-template-columns: 2.4fr 0.4fr 2.7fr; } .first-autocare-app-banner .banner-heading h2{font-family: "Montserrat-SemiBold"; font-size: 52px; letter-spacing: 1px; line-height: 58px; } .first-autocare-app-banner .banner-heading span{font-family: "Montserrat-ExtraBold"; color: var(--color-red); } .first-autocare-app-banner .banner-heading a{width: fit-content; background-color: var(--black); border-radius: 8px; padding: 17px 96px; font-size: 20px; font-family: "Montserrat-Bold"; color: var(--color-white); margin-top: 20px; display: inline-block; box-shadow: 0px 4px 4px 0px #00000040; } .first-autocare-app-banner .banner-heading a:hover{background: var(--color-white); color: var(--black);} .first-autocare-app-banner .iframe-container .video-container {border: 6px solid var(--color-white); border-radius: 18px;} .first-autocare-app-banner .iframe-container .video-container {padding-bottom: unset !important; height: 96% !important; } .investment-overview .main-card-body {display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 32px 0px;} .investment-overview .main-card-body .card {margin: 0px; background: transparent; color: var(--color-white);} .investment-overview .main-card-body .card .card-body {display: flex; gap: 15px; align-items: center; padding: 0; } .investment-overview .main-card-body .card .card-body .card-title {font-size: 24px; font-family: 'Montserrat-Medium'; margin: 0; line-height: 35px; letter-spacing: -1px; } .investment-overview .main-card-body .card .card-body .card-text {font-size: 32px; font-family: 'Montserrat-SemiBold'; margin: 0; line-height: 35px; letter-spacing: -1px; } .choose-investment-2 {padding: 40px 0px !important; background-color: var(--color-lemon-chiffon-2); } .choose-investment-2 .main-body .investment-cards {justify-content: space-between; align-items: center;} .choose-investment-2 .main-body .investment-cards p {font-size: 32px; font-family: 'Montserrat-SemiBold'; margin: 0px; } .choose-investment-2 .main-body .investment-cards p span {font-family: "Montserrat-ExtraBold";} .benefits-cards-2{background-color: var(--color-white);} .benefits-cards-2 .main-section h2{font-size: 32px; font-family: 'Montserrat-Bold'; text-align: center;} .benefits-cards-2 .main-body{display: flex; justify-content: space-between; } .benefits-cards-2 .main-body .card{background-color: transparent; text-align: center; box-shadow: 0px 0px; border: 0px; width: 50%; } .benefits-cards-2 .main-body .card .card-body{text-align: center; display: flex; align-items: center; justify-content: start; flex-direction: column; } .benefits-cards-2 .card .card-body .card-text {font-size: 24px;font-family: 'Montserrat-SemiBold'; text-transform: none; color: var(--black); text-align: center; line-height: 28px; } .benefits-cards-2 .card .card-body .card-img {margin-bottom: 15px;} .available-cities { display: flex; flex-direction: row; align-items: start; justify-content: center; padding: 83px; background-color: var(--color-cyprus); color: white; border-radius: 32px; } .available-cities .map { flex: 1; display: flex; justify-content: center; align-items: center;} .available-cities .map img { max-width: 70%; height: auto; border-radius: 8px;} .available-cities .city-info { flex: 1; padding: 20px; text-align: center;} .available-cities .city-info h2 {margin-bottom: 70px;font-size: 32px; font-family: 'Montserrat-SemiBold';} .available-cities .city-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;} .available-cities .city { display: flex; flex-direction: column; align-items: center; color: #CCCCCC;} .available-cities .city img { height: 66px; margin-bottom: 10px; width: auto;} .available-cities .city span {font-size: 16px; font-family: "Montserrat-Medium"; margin-bottom: 25px; } .investment-overview-2 .main-card-body .card {background-color: var(--black); border-radius: 14px; padding: 47px 49px;} .investment-overview-2 .main-card-body .card .card-body {gap: 30px;} .investment-overview-2 .main-card-body .card .card-body .card-title {font-size: 34px; font-family: 'Montserrat-Bold'; margin: 0; line-height: 30px; color: var(--color-white); } .investment-overview-2 .main-card-body .card .card-body .card-text, .investment-overview-2 .main-card-body .card .card-body .card-title span {font-size: 20px; font-family: 'Montserrat-Medium'; margin: 0; line-height: 30px; color: var(--color-white); } .pm-partner-success-stories-3 .heading-text .text-center{font-size: 36px; font-family: "Montserrat-Medium";} .faq-show-ans h2 { font-size: 32px; text-align: center; margin-bottom: 40px; font-family: 'Montserrat-Bold'; } .faq-show-ans .faq-container { padding: 46px 46px 25px 46px; background-color: var(--color-lemon-chiffon-2); border: 1px solid var(--color-yellow); border-radius: 16px;} .faq-show-ans .faq-container .faq-item {margin-bottom: 20px;} .faq-show-ans .faq-item h3 { font-size: 24px; font-family: 'Montserrat-Bold'; color: var(--black); margin-bottom: 13px;} .faq-show-ans .faq-item p { font-size: 16px; font-family: 'Montserrat-Regular'; color: var(--black); margin-left: 45px; width: 70%; } /* ======== # 1 Indias Autocare App END =============== */ .blog-content .card .pm-offer-info:hover {background: var(--black) !important; color: var(--color-yellow); } .animated-shine { position: relative; font-size: 24px; font-weight: bold; color: transparent; background-image: linear-gradient(90deg, #716d65, #002fff, #ff2f00, #ffaa00, #716d65); background-size: 200%; background-clip: text; text-fill-color: transparent; animation: shineText 7s linear infinite; } @keyframes shineText { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* PM Onboarding FORM */ .pm-onboarding-form .contact-form .wpcf7 .form-control {padding: 1.02rem;} .pm-onboarding-form .contact-form form input::placeholder {font-size: 16px !important; font-family: "Montserrat-Bold" !important;} .pm-onboarding-form .contact-form form .label-sub-heading {font-size: 16px; font-family: "Montserrat-Medium";} .pm-onboarding-form .contact-form form {padding: 0 20px;} .pm-contact-form .select2-container .select2-selection--single {height: 50px;} .pm-onboarding-form .investment-container {max-width: 486px;} .pm-onboarding-form {background: linear-gradient(65deg, #FFC117 0%, #FFE300 100%);} .pm-onboarding-form .plan-grid { display: grid; grid-template-columns: 1fr; gap: 0px;} .pm-onboarding-form .plan-option { display: flex; align-items: center; padding: 19px 20px; border: 1px solid #DFE3E7; border-radius: 8px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s ease; position: relative;} .pm-onboarding-form .plan-option input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 24px; height: 24px; border: 3px solid #333; border-radius: 50%; outline: none; margin-right: 10px; position: relative; cursor: pointer;} .pm-onboarding-form .plan-option input[type="radio"]:checked {box-shadow: 0 0 0 1px #333;} .pm-onboarding-form .plan-option input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: 100%; background-color: #120a0a; box-shadow: 0 0 0px 4px #fff;} .pm-onboarding-form .plan-details {flex: 1;} .pm-onboarding-form .kit-info {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px; text-align: center;} .pm-onboarding-form .label { font-size: 12px; color: #67788C; padding-bottom: 3px; font-family: "Montserrat-Medium"; } .pm-onboarding-form .value {font-weight: bold;font-size: 16px;color: #000; font-family: "Montserrat-Bold"; } .pm-onboarding-form .earning-badge.active-badge {background: url(../img/gold-earning-badge.svg) !important; background-repeat: no-repeat !important;} .pm-onboarding-form .earning-badge.active-badge .value , .earning-badge.active-badge .sub-value{color: var(--color-black-pearl) !important;} .pm-onboarding-form .earning-badge.active-badge .label {color: #45505D;} .pm-onboarding-form .earning-badge .value, .earning-badge .sub-value {color: white; font-family: "Montserrat-Bold";} .pm-onboarding-form .earning-badge .label {color: #AAAAAA; margin-bottom: 4px;} .pm-onboarding-form .earning-badge { background: url(../img/black-earning-badge.svg); background-repeat: no-repeat !important; color: white; padding: 12px 0 0 0 ; text-align: center; position: absolute; right: 0; top: 0; width: 160px; height: 83px;} .pm-onboarding-form .earning-badge .sub-value {font-size: 12px; font-family: "Montserrat-Medium"; } .pm-onboarding-form .earning-badge .value {font-size: 16px; font-family: "Montserrat-Medium"; line-height: 15px;} .pm-onboarding-form .investment-details { padding: 0px; border-radius: 8px; display: none; border: 1px solid #00000033; } .pm-onboarding-form .investment-details h3 {background: #FFF073; font-size: 16px; font-family: "Montserrat-Bold"; padding: 15px 25px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .pm-onboarding-form .investment-details .main-body {padding: 0px 25px 10px 25px} .pm-onboarding-form .investment-details.active {display: block;} .pm-onboarding-form .detail-row {display: flex;justify-content: space-between;border-bottom: 1px solid rgba(0,0,0,0.1);} .pm-onboarding-form .detail-row p {margin: 0px; font-family: "Montserrat-Medium"; line-height: 28px; } .pm-onboarding-form .detail-row:last-child {border-bottom: none;} .pm-onboarding-form .special-offer {color: #2196f3; font-family: "Montserrat-Medium";} .pm-onboarding-form .paid-limit {color: #67788C; font-family: "Montserrat-Medium";} .pm-onboarding-form .total-row {font-family: "Montserrat-Medium"; font-size: 16px;background-color: rgba(0,0,0,0.05);padding: 12px;border-radius: 6px;margin: 10px 0;} .pm-onboarding-form .token-amount {color: #4caf50; font-family: "Montserrat-Medium";} .pm-onboarding-form .monthly-earning {background-color: #4caf50;color: white; padding: 4px 18px;} .pm-onboarding-form .monthly-earning .amount {font-size: 16px;font-family: "Montserrat-Bold"; } .pm-onboarding-form .note p {font-size: 12px;opacity: 0.8; font-family: "Montserrat-Regular"; padding: 8px 20px; margin: 0px; } /* ========= Single BLOG Page ========= */ .rounded-16{border-radius: 16px;} .cta-shadow {box-shadow: 0 4px 4px 0px #00000032;} .blog-content .choose-investment-2 {padding: 20px 0px !important;} .blog-content .choose-investment-2 .main-body .investment-cards p {font-size: 16px;} .blog-content .choose-investment-2 .investment-cards {justify-content: center !important; } .blog-content .choose-investment-2 .investment-cards img {width: 50%;} /* ========= Single BLOG Page END ========= */ /* ================ City Select Dropdown ========== */ .custom-select-container {position: relative;width: 250px; font-family: "Montserrat-Regular";} .select-box {cursor: pointer;display: flex;justify-content: space-between;align-items: center;} .select-box .selected-text {font-size: 16px;color: #94a1b0;font-family: "Montserrat-Bold";} .select-box:hover {border-color: #888;} .dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border-top: none; border-radius: 0 0 4px 4px; display: none; z-index: 1000;} .search-box {width: calc(100% - 20px);padding: 8px;margin: 10px;border: 1px solid #ccc;border-radius: 4px;} .options-list { max-height: 200px; overflow-y: auto; margin: 0; padding: 0; list-style: none;} .option-item {padding: 8px 15px;cursor: pointer;} .option-item:hover {background-color: #f0f0f0;} .arrow { border: 2px solid #94a1b0; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg); transition: transform 0.2s;} .arrow.up {transform: rotate(-135deg);} .no-results {padding: 10px;text-align: center;color: #666;} /* ================ City Select Dropdown END ========== */ /*============ Book With WhatsApp =============== */ .book-with-whats-app .container{ padding: 30px 10px;display: grid;grid-template-columns: 2.8fr 0fr;grid-template-rows: 1fr;gap: 0px 0px;grid-auto-flow: column;grid-template-areas: "..";} .book-with-whats-app .container .banner-heading {display: flex;flex-direction: column;justify-content: center;align-items: start; } .book-with-whats-app .container .banner-heading h1{font-size: 42px;font-family: "Montserrat-Bold";color: #000000;} .book-with-whats-app .container .banner-heading p{font-size: 26px;font-family: "Montserrat-Medium";color: #585858;line-height: 32px;} .book-with-whats-app .container .banner-heading .live-container{background: #2AB540; border-radius: 12px; height: 96px; width: 439px; display: flex; align-items: center; justify-content: center; gap: 20px; box-shadow: 0px 4px 4px 0px #0000003d; } .book-with-whats-app .container .banner-heading a span {font-size: 16px; font-family: "Montserrat-Medium"; color: #000000;} .book-with-whats-app .container .banner-heading .live-container span {font-size: 32px;font-family: "Montserrat-SemiBold";line-height: 32px;} /*============ Book With WhatsApp END =============== */ /*============== Promotion Program =================*/ .promotion-program-banner {background: var(--black);} .promotion-program-banner h1{color: var(--color-white); font-size: 50px; font-family: "Montserrat-ExtraBold"; line-height: 64px; letter-spacing: -0.25px;} .promotion-program-banner .container{padding-top: 40px;} .promotion-program-banner .banner-heading h2 {font-size: 44px; font-family: "Montserrat-Regular"; color: var(--color-white); line-height: 62px; } .promotion-program-banner .banner-heading h2 span {color: #FFC117; font-family: "Montserrat-ExtraBold";} .promotion-program-banner .banner-heading a{background: linear-gradient(180deg,#FFDD05 0%,#FFC117 100%); border-radius: 10px; color: var(--black); font-family: "Montserrat-Bold"; height: 60px; width: 261px; padding: 5px 20px 8px 20px ; font-size: 34px; } .promotion-program-banner .iframe-container {border-radius: 18px; position: relative; z-index: 1; } .promotion-program-banner .iframe-container::after { content: ""; position: absolute; top: 0; left: 15px; right: 15px; bottom: -18px; background: #ffc11753; border-radius: 18px; z-index: 999;} .promotion-program-banner .iframe-container::before { content: ""; position: absolute; top: 0; left: 35px; right: 35px; bottom: -32px; background: #ffc11753; border-radius: 18px; z-index: 999;} .promotion-program-banner .iframe-container .video-container {border-radius: 18px; z-index: 9999; border: 2px solid white;} .promotion-program-banner .features { display: flex; justify-content: space-between; background-color: #FFDD05; padding: 20px; margin-top: 20px; flex-wrap: wrap; gap: 15px; border-style: solid; border-color: white; border-width: 7px 7px 0; border-radius: 15px 15px 0 0;} .promotion-program-banner .feature-item {flex: 1;min-width: 150px;display: flex;flex-direction: column;align-items: center;color: black;padding: 10px;transition: transform 0.2s; gap: 14px;} .promotion-program-banner .feature-item:hover {transform: translateY(-5px);} .promotion-program-banner .feature-icon {margin-bottom: 10px; width: 50px; height: 50px;} .promotion-program-banner .feature-text {font-size: clamp(0.8rem, 1.5vw, 0.9rem);text-align: center;line-height: 1.4; font-family: "Montserrat-Bold"; font-size: 18px; } .what-you-do-hoora-promoter{padding: 55px 0px 40px 0px;} .what-you-do-hoora-promoter h2, .who-can-apply h2, .why-join-hoora-promoter .heading-text h2{margin-bottom: 55px; font-size: 50px; font-family: "Montserrat-ExtraBold"; text-align: center;} .what-you-do-hoora-promoter .main-body .para-heading {font-size: 24px; font-family: "Montserrat-ExtraBold"; margin: 0px; letter-spacing: -0.25px; line-height: 33px;} .what-you-do-hoora-promoter .main-body .para-sub-heading {font-size: 24px; font-family: "Montserrat-Regular"; margin: 0px; letter-spacing: -0.25px; line-height: 33px;} .what-you-do-hoora-promoter .main-body .content-box {display: flex; gap: 20px; margin-bottom: 40px; } .who-can-apply { background-image: url("../img/who-can-apply.png"); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 55px 0px;} .who-can-apply .content-body p {background-color: var(--black); font-size: 24px; font-family: "Montserrat-Regular"; color: white; padding: 20px; border-radius: 10px; margin: 25px 0;} .who-can-apply .content-body p span {color: var(--color-yellow); font-family: "Montserrat-Bold";} .why-join-hoora-promoter {background: var(--color-white); padding: 55px 0px;} .why-join-hoora-promoter .scroll-video {margin-top: 65px; overflow: overlay !important;} .why-join-hoora-promoter .video-body .video-card {background: linear-gradient(117deg,#FFC117 0%,#FFE300 100%);border-radius: 32px !important;} .why-join-hoora-promoter .video-body .video-card .video{gap: 20px} .why-join-hoora-promoter .video-body .video-card img {width: 100%;} .why-join-hoora-promoter .video-body .video-card p {font-size: 15px; font-family: "Montserrat-Regular"; margin: 0px; line-height: 23px;} .why-join-hoora-promoter .video-body .video-card p span {font-family: "Montserrat-ExtraBold";} .promotion-city .available-cities {background: transparent;} .promotion-city .available-cities .city-info .city-grid span {color: var(--color-white) !important;} .promotion-city .investment-overview-2 .main-card-body {padding: 0px;} .promotion-city .investment-overview-2 .main-card-body .card{padding: 8px 18px; background: linear-gradient(104deg,#FFC117 0%,#FFE300 100%); border-radius: 25px;} .promotion-city .investment-overview-2 .main-card-body .card .card-body .count-text {background-color: var(--black); color: white; border-radius: 25px; padding: 20px 50px;} .promotion-city .investment-overview-2 .main-card-body .card .card-body .count-text p {font-size: 28px; font-family: "Montserrat-Medium"; margin: 0; line-height: 32px; } .promotion-city .investment-overview-2 .main-card-body .card .card-body .count-text p span {font-family: "Montserrat-Bold"; } .promotion-page-form .main-form .contact-form form h6 { font-size: 42px; font-family: "Montserrat-ExtraBold"; line-height: 54px; margin-bottom: 20px; margin-top: 55px; } .promotion-page-form .main-form .contact-form form #submit-partner-manager-sv-2 { border-radius: 12px; box-shadow: 0px 4px 4px 0px #00000045; padding: 8px 56px; font-size: 24px; font-family: "Montserrat-SemiBold"; } .promotion-page-form .main-form .contact-form form .hoora-promoter-form-img { background-image: url('../img/hoora-promoter-form.png'); background-size: contain; background-position: right; background-repeat: no-repeat; height: 100%; } /*============ Promotion Program END ===============*/ /*============== Promotion Program 2 =================*/ .promotion-program-banner-2 {background: var(--black-russian);} .promotion-program-banner-2 h1{color: var(--color-golden-yellow); font-size: 50px; font-family: "Montserrat-ExtraBold"; line-height: 64px; letter-spacing: -0.25px;} .promotion-program-banner-2 .container{padding-top: 40px;} .promotion-program-banner-2 .banner-heading h2 {font-size: 45px; font-family: "Montserrat-Medium"; color: var(--color-white); line-height: 110%; margin: 35px 0px 70px 0px; } .promotion-program-banner-2 .banner-heading h2 span {color: var(--color-golden-yellow); font-family: "Montserrat-Bold";} .promotion-program-banner-2 .banner-heading a{background: linear-gradient(89deg,#FFC42C 0%, var(--color-golden-yellow) 100%); border-radius: 10px; color: var(--black); font-family: "Montserrat-SemiBold"; padding: 20px 77px; font-size: 34px; } .promotion-program-banner-2 .iframe-container {border-radius: 20px; position: relative; z-index: 1; } .promotion-program-banner-2 .iframe-container::after { content: ""; position: absolute; top: 0; left: 28px; right: 27px; bottom: -11px; background: #f9f9f933; border-radius: 10px; z-index: 99;} .promotion-program-banner-2 .iframe-container::before { content: ""; position: absolute; top: 0; left: 47px; right: 47px; bottom: -21px; background: #f9f9f933; border-radius: 11px; z-index: 999;} .promotion-program-banner-2 .iframe-container .video-container {border-radius: 18px; z-index: 999; border: 5px solid white; background-color: var(--black-russian);} .promotion-program-banner-2 .feature-icon {margin-bottom: 10px;} .promotion-program-banner-2 .info-banner .stat-item {display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 10px; } .promotion-program-banner-2 .info-banner .stat-item .highlight{color: var(--color-golden-yellow); font-size: 48px; font-family: "Montserrat-Bold"; margin: 0px; line-height: 100%;} .promotion-program-banner-2 .info-banner .stat-item p {font-size: 25px; font-family: "Montserrat-SemiBold";} .hoora-vs-other .heading h2, .promotion-city-2 .city-info h2, .promotion-city-2 .available-cities .city-info h2{font-size: 44px; font-family: "Montserrat-ExtraBold"; } .hoora-vs-other .main-comparison-body .nav-tabs {border-bottom: none;} .hoora-vs-other .main-comparison-body .nav-tabs .nav-link {font-family: "Montserrat-Bold"; color: black;background-color: #FFF9C9;border: none;font-weight: bold; border-top-left-radius: 7px; border-top-right-radius: 7px; padding: 14px 40px;} .hoora-vs-other .main-comparison-body .nav-tabs .nav-link.active { background-color: black; color: rgb(255, 255, 255); border: none; padding: 17px; } .hoora-vs-other .main-comparison-body .comparison-card {border-radius: 22px; background-color: white; padding: 32px 0px 28px 0px;} .hoora-vs-other .main-comparison-body .feature-column { background-color: #001f3f; color: white; border-top-left-radius: 15px; border-bottom-left-radius: 15px;} .hoora-vs-other .main-comparison-body .feature-list {list-style-type: none;padding: 15px;margin: 0; border: 1px solid #EDEDED; border-radius: 20px;} .hoora-vs-other .main-comparison-body .feature-list li {padding: 10px 15px;border-bottom: 1px solid rgba(255,255,255,0.1);display: flex;align-items: center; font-family: "Montserrat-Regular"; font-size: 18px;} .hoora-vs-other .main-comparison-body .feature-list li img {width: 20px; height: 20px; margin-right: 10px;} .hoora-vs-other .main-comparison-body .brand-column h3{font-family: "Montserrat-Bold"; font-size: 35px;} .hoora-vs-other .main-comparison-body .brand-column {text-align: center;padding: 15px;} .hoora-vs-other .main-comparison-body .brand-column .first-feature {background-color: var(--black-russian); color: white; border-radius: 16px;} .hoora-vs-other .main-comparison-body .tab-content {border: none;} .support-from-hoora .feature-card {width: 264px; height: 264px; border-radius: 20px; padding: 20px; background-color: var(--color-white); color: black; display: flex; flex-direction: column; align-items: center; justify-content: end; text-align: center; gap: 40px;} .support-from-hoora .feature-card h5{font-family: "Montserrat-Bold"; font-size: 18px;} .support-from-hoora a {border-radius: 7px; padding: 15px 55px; font-family: "Montserrat-Medium"; font-size: 35px; background: var(--black); color: var(--color-white); } .support-from-hoora a:hover{background: var(--color-white); color: var(--black);} .promotion-city-2 {background: var(--black-russian);} .promotion-city-2 .city-info h2{font-family: "Montserrat-ExtraBold"; } .promotion-city-2 .available-cities .city-info h2 {margin-bottom: 10px} .promotion-city-2 .available-cities {padding: 0px; overflow-x: scroll;} .promotion-city-2 .available-cities::-webkit-scrollbar { width: 0px; height: 0px; background: transparent; } .promotion-city-2 .city-info .main-cities {display: flex; gap: 20px; width: fit-content; justify-content: center; padding: 0px 0px 0px 45px;} .promotion-city-2 .city-info .main-cities .city{background-color: white; color: #000; border-radius: 20px; padding: 12px; width: 200px; border: 0.4px solid var(--black) } .promotion-city-2 .city-info .main-cities .city img{background: var(--black-russian); padding: 40px 20px; border-radius: 20px; width: 174px; height: 174px; } .promotion-city-2 .available-cities .city span {margin-bottom: 0px; font-family: "Montserrat-ExtraBold"; color: #656565; font-size: 18px; padding: 5px 0px;} .promotion-city-2 .investment-overview-2 .main-card-body .card .card-body .count-text {background: var(--black-russian);} .promotion-city-2 .available-cities {justify-content: start} .p-success-stories h2 {font-size: 44px; font-family: "Montserrat-ExtraBold"; color: var(--color-black-pearl); margin-bottom: 55px; text-align: center;} .p-success-stories .grid-container{ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(9, auto); gap: 18px;} .p-success-stories .grid-container .grid-item {background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;border-radius: 8px;} .p-success-stories .grid-container .card {background-color: white;border-radius: 18px;overflow: hidden; margin-bottom: 0px; border: 2px solid var(--black-russian); padding: 14px;} .p-success-stories .grid-container .card-image {width: 100%;height: 250px;object-fit: cover;} .p-success-stories .grid-container .card-content {padding: 15px 0px;} .p-success-stories .grid-container .card-name {font-family: "Montserrat-Medium"; margin-bottom: -6px;font-size: 20px; } .p-success-stories .grid-container .card-rating {color: #ffc107; margin-bottom: -2px;} .p-success-stories .grid-container .card-date {color: var(--black); font-size: 12px;text-align: right;margin-top: 3px; font-family: "Montserrat-Medium";} .p-success-stories .grid-container .card-text {color: var(--black);font-size: 14px;line-height: 1.4; font-family: "Montserrat-Medium"; margin-top: 20px;} .p-success-stories .grid-container .item-1 {grid-row: span 4;} .p-success-stories .grid-container .item-2 {grid-row: span 5;} .p-success-stories .grid-container .item-5 { grid-column: 2; grid-row: 6 / span 4;} .p-success-stories .grid-container .item-8 {grid-column: 1;grid-row: 5 / span 5;} .p-success-stories .grid-container .item-9 { grid-column: 3; grid-row: span 4;} .p-success-stories .grid-container .item-10 { grid-column: 3; grid-row: 5 / span 5;} .p-success-stories .grid-container .item-11 { grid-column: 4; grid-row: span 5;} .p-success-stories .grid-container .item-12 { grid-column: 4; grid-row: 6 / span 4;} .media-coverage-container h2 {font-size: 44px; } .media-coverage-container .media-coverage-card-body {border-radius: 18px !important;} .media-coverage-container a {background: linear-gradient(89deg,#FFC42C 0%, var(--color-golden-yellow) 100%); border-radius: 10px; color: var(--black); font-family: "Montserrat-SemiBold"; padding: 20px 77px; font-size: 34px; } .media-coverage-container a:hover{background: white; color: var(--black-russian);} .step-form-2 .form-container {box-shadow: 0px 55px 55px 0px #e0e0e017 !important; border-radius: 34px !important;} .step-form .heading-p {font-size: 24px; font-family: "Montserrat-Bold";} .step-form {background: var(--color-golden-yellow); padding: 40px 0px;} .step-form .discount-with-date {font-size: 48px; font-family: "Montserrat-Bold"; margin-bottom: 55px; } .step-form .form-container {background-color: white;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);padding: 50px 110px; } .step-form .progress {height: 4px;margin-bottom: 30px;background-color: #E0E0E0; } .step-form .progress-bar {background-color: var(--color-golden-yellow);} .step-form .step .form-label, .step-form h4 {font-family: "Montserrat-Bold"; font-size: 16px;} .step-form .step .form-control {border: 2px solid #EDEDED !important; border-radius: 5px !important; padding: 10px 15px; font-family: "Montserrat-Regular" !important; color: var(--black);} .step-form .step .form-control::placeholder{font-family: "Montserrat-Regular" !important; color: var(--black);} .step-form .step .checkbox-text {font-size: 12px; font-family: "Montserrat-Regular";} .step-form .step .next-step, .step-form .step .prev-step {width: 28%; font-family: "Montserrat-SemiBold"; display: flex; justify-content: space-between; padding: 14px; align-items: center; border-radius: 5px; } .step-form .step .next-step:hover, .step-form .step .prev-step:hover{color: white;} .step-form .step {display: none;} .step-form .step.active {display: block;} .step-form .btn-form-option {background-color: white;border: 2px solid #E6E6E6;color: #979090;width: 100%;text-align: center;padding: 12px 14px;margin-bottom: 10px;transition: all 0.3s ease; font-family: "Montserrat-Medium"; font-size: 14px;} .step-form .btn-form-option:hover {background-color: #F0F0F0;} .step-form .btn-form-option.selected {background-color: #000B1D;color: white;} .step-form .btn-navigation {background-color: #000B1D;color: white;width: 100%;padding: 12px;border: none;} .step-form .btn-back {background-color: #000B1D;color: white;border: none;} .step-form h3 {color: var(--black-russian);font-size: 42px;margin-bottom: 15px;font-family: "Montserrat-SemiBold"; line-height: 52px;} .step-form .form-control {border-color: #000B1D;} .step-form .error-message {color: red;font-size: 0.85rem;margin-top: 5px;display: none;} .step-form .invalid-input {border-color: red;} /*============== Promotion Program 2 END =================*/ /*============== Join as Car Wash Partner ================ */ .bg-green-apple {background: rgba(99, 195, 55, 0.17) !important; border: 2px solid #63C337 !important;} .bg-amour {background: #F6EAEC !important; border: 2px solid #FBA4B0 !important;} .bg-cornflower-blue{background: rgba(116, 140, 255, 0.17) !important; border: 2px solid #3B4FB3 !important;} .bg-dark-green {background: #BADACD !important; border: 2px solid #2D7C09 !important;} .bg-lavender-blue {background: #CDCDEF !important; border: 2px solid #8D3BB3 !important;} .join-car-wash-partner {background-color: #FEFFEF; } .join-car-wash-partner .text-heading-1 {font-size: 34px; font-weight: 400; font-family: "Montserrat-Medium"; line-height: 100%;} .join-car-wash-partner .text-heading-2 {font-size: 38px; font-weight: 400; line-height: 42px; font-family: "Montserrat-Medium";} .join-car-wash-partner .text-heading-2 strong {font-weight: 700; font-family: "Montserrat-Bold";} .join-car-wash-partner .banner-heading h2 { margin: 18px 0px ; font-size: 70px; font-family: "Montserrat-Bold"; text-transform: uppercase; background: linear-gradient(90deg, #FF3300 2%, #FFDF02 50%); background-size: 200% auto; background-position: left center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease;} .join-car-wash-partner .reverse-row-1 {padding: 78px 0px !important;} .why-do-partner h2 {font-family: "Montserrat-Bold" !important; font-size: 44px;} .why-do-partner .main-body .content-box {background: #F9F9F9; border-radius: 25px; padding: 23px; align-items: center;} .why-do-partner .main-body .content-box .box-icon { width: 112px; height: fit-content; color: #5B86E5; border-radius: 25px; border: 2px solid #5B86E5; background: #F5F4FA; padding: 29px; display: flex; align-items: center; justify-content: center; } .why-do-partner .main-body .content-box .box-icon img{width: 51px; height: 51px;} .why-do-partner .main-body .content-box .para-sub-heading {font-size: 18px; line-height: 25px;} .why-do-partner .main-body .content-box .para-heading{margin-bottom: 10px; font-family: "Montserrat-Bold";} .steps-started-journey {margin-top: 12rem;} .steps-started-journey .grid-box{ background: #EDF7FF; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; border-radius: 44px; padding: 0px 43px 0px 43px;} .steps-started-journey .grid-box .img-box img { width: 84%; margin-top: -200px;} .steps-started-journey .grid-box .steps-body h2{font-size: 52px;font-family: "Montserrat-Bold";margin-left: -65px; margin-bottom: 40px; margin-top: 45px;} .steps-started-journey .grid-box .steps-body .steps-container {border-left: 1px solid #000;padding: 0px 22px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box {display: flex; gap: 20px; margin-bottom: 40px; align-items: center;} .steps-started-journey .grid-box .steps-body .steps-container .step-box .step-number {margin-left: -45px;background: white;border-radius: 50%;width: 46px;margin-bottom: 0;height: 43px;display: flex;align-items: center;justify-content: center; border: 0.3px solid; font-size: 18px; font-family: "Montserrat-Medium"; } .steps-started-journey .grid-box .steps-body .steps-container .step-box p { font-size: 24px; font-family: "Montserrat-Medium"; line-height: 24px; margin: 0px; width: fit-content;} .steps-started-journey .grid-box .steps-body button{border-radius: 12px;background: var(--black);color: var(--color-white);font-family: "Montserrat-Medium";padding: 10px 28px;margin-left: 45px;} .join-partner-media-coverage .media-coverage-main .cards-body img{height: 80%;} .join-partner-media-coverage .media-coverage-main .cards-body .small-card { background: #EDF7FF; padding: 23px 62px 14px 52px; width: 80%; border-top-right-radius: 30px; border-top-left-radius: 30px; margin: 0px auto; font-size: 22px; font-family: "Montserrat-Bold"; text-align: center;} .join-partner-media-coverage .card {border: 1px solid var(--black) !important;} .join-job-comparison {margin: 90px 70px;} .join-job-comparison h2{font-family: "Montserrat-Bold" !important; } .join-job-comparison .main-comparison-body {margin-top: 48px;} .join-job-comparison .main-comparison-body .comparison-table {display: flex;width: 100%;border-spacing: 3px;border-collapse: separate; gap: 20px;} .join-job-comparison .main-comparison-body .column__spacing {padding: 0px 28px} .join-job-comparison .main-comparison-body .column {flex: 1;display: flex;flex-direction: column; background-color: #F9F9F9; border-top-right-radius: 32px; border-top-left-radius: 32px;} .join-job-comparison .main-comparison-body .column-first {flex: 0.8;} .join-job-comparison .main-comparison-body .cell { padding: 16px 0px; height: 58px; display: flex; flex-direction: column; justify-content: center; font-size: 16px; line-height: 1.1; font-family: "Montserrat-Regular";} .join-job-comparison .main-comparison-body .cell .check-icon-container {display: flex; } .join-job-comparison .main-comparison-body .cell .check-icon-container .icon-check {margin-right: 12px;} .join-job-comparison .main-comparison-body .header-cell { height: 100px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 1px solid; font-size: 24px; line-height: 26px; padding: 42px 0; font-family: "Montserrat-SemiBold"; margin-bottom: 18px; } .join-job-comparison .main-comparison-body .category-cell {font-weight: 600; font-family: "Montserrat-Bold";} .join-job-comparison .main-comparison-body .hoora-header {background-color: #326BE9;color: white;font-size: 18px;font-weight: 700; border-top-right-radius: 32px; border-top-left-radius: 32px; font-size: 32px; line-height: 32px; font-family: "Montserrat-ExtraBold";} .join-job-comparison .main-comparison-body .hoora-cell {background-color: #EFF6FE;position: relative;padding-left: 28px; padding-right: 28px; font-family: "Montserrat-Medium";} .join-job-comparison .main-comparison-body .hoora-cell .note {font-family: "Montserrat-Medium";} .join-job-comparison .main-comparison-body .highlight {font-weight: 600;} .join-job-comparison .main-comparison-body .note {font-size: 16px; line-height: 1.1; font-family: "Montserrat-Regular";} .join-job-comparison .main-comparison-body .alice-blue {background-color: var(--color-alice-blue-3) !important;} .join-job-comparison .main-comparison-body .flex--07{flex: 0.7 !important;} .join-job-comparison .main-comparison-body .flex--1{flex: 1.1 !important;} .faq-join-partner {background-color: #F8FAFB; padding: 40px 0px } .faq-join-partner h2 { font-size: 28px; font-weight: 700; margin: 30px 0; color: #000; font-family: "Montserrat-Bold"; } .faq-join-partner .faq-container { overflow: hidden;} .faq-join-partner .faq-item { overflow: hidden; margin-bottom: 15px; background-color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); padding: 10px; border-radius: 12px; } .faq-join-partner .faq-item:last-child {border-bottom: none;} .faq-join-partner .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px; cursor: pointer; font-weight: 500; color: #333; position: relative; font-family: "Montserrat-SemiBold"; } .faq-join-partner .faq-answer { padding: 0 20px 20px 20px; color: #666; line-height: 1.6; display: none; font-family: "Montserrat-Regular";} .faq-join-partner .faq-answer.active {display: block;} .faq-join-partner .icon { height: 24px; width: 24px; position: relative;} .faq-join-partner .minus-icon {color: #0092FF;} .faq-join-partner .minus-icon::before {content: "";position: absolute;top: 50%;left: 0;width: 24px;height: 1px;background-color: currentColor;transform: translateY(-50%); border-radius: 20px;} .faq-join-partner .plus-icon {color: #0092FF;} .faq-join-partner .plus-icon::before, .faq-join-partner .plus-icon::after { content: ""; position: absolute; background-color: currentColor;} .faq-join-partner .plus-icon::before { top: 50%; left: 0; width: 24px; height: 1px; transform: translateY(-50%); border-radius: 20px;} .faq-join-partner .plus-icon::after { top: 0; left: 50%; width: 1px; height: 24px; transform: translateX(-50%); border-radius: 20px;} .join-partner-stories .scroll-video {overflow-x: scroll;} .join-partner-stories .scroll-video .video-body {width: 200% !important;} .join-partner-stories .scroll-video .video-body .video-card {height: 735px; padding: 0px; background-color: transparent;} .join-partner-stories .heading-text h2{font-size: 44px !important; font-family: "Montserrat-Bold" !important; margin: 40px 0px 55px 0px;} /*============== Join as Car Wash Partner END ================ */ /*==================== Join Hoora Promoter ================= */ .join-hoora-promoter .reverse-row-1 {padding: 30px 0px !important;} .join-hoora-promoter .banner-heading h2 {margin: 0px; font-size: 64px; background: linear-gradient(90deg, #FF9F00 0%, #B05B00 100%); background-size: 200% auto; background-position: left center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 14px;} .join-hoora-promoter .banner-heading .text-heading-1 {font-size: 30px; font-family: "Montserrat-Regular";} .join-hoora-promoter .banner-heading .text-heading-2 {font-size: 32px; font-family: "Montserrat-Regular"; margin-top: 45px; } .join-hoora-promoter .offset-xl-1 {margin: auto 0 auto auto;} .join-hoora-promoter .features {display: flex; gap: 20px; align-items: center; margin-top: 20px;} .join-hoora-promoter .features .small-card {background-color: #F9F9F9 !important; border: 0.5px solid #B66000 !important; width: 400px; font-family: "Montserrat-Bold"; font-weight: 22px; font-size: 14px; line-height: 16px; text-align: center; height: 65px; display: flex; justify-content: center; align-items: center; padding: 0 18px; border-radius: 10px;} .join-hoora-promoter .cta {text-align: center; margin: 25px 0px 60px 0px;} .join-hoora-promoter .cta p {font-family: "Montserrat-Bold"; font-size: 34px;} .join-hoora-promoter .cta .btn {background: #000000; color: white; border-radius: 14px; padding: 12px 50px; font-family: "Montserrat-Medium"; font-size: 24px; } .benefits-join-hoora-promoter .section-header {text-align: center;margin-bottom: 40px;} .benefits-join-hoora-promoter .section-header h2 {font-family: "Montserrat-Bold" !important; font-size: 44px;} .benefits-join-hoora-promoter .section-title { font-size: 32px; font-weight: 700; color: #333;} .benefits-join-hoora-promoter .benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;} .benefits-join-hoora-promoter .benefit-card { display: flex; gap: 16px; background: #F9F9F9; border-radius: 25px; padding: 23px; align-items: center;} .benefits-join-hoora-promoter .icon-container { width: 112px; height: fit-content; color: #5B86E5; border-radius: 25px; border: 2px solid #5B86E5; background: #F5F4FA; padding: 29px; display: flex; align-items: center; justify-content: center;} .benefits-join-hoora-promoter .icon-container img { width: 51px; height: 51px;} .benefits-join-hoora-promoter .benefit-title { font-size: 24px; line-height: 25px; font-family: "Montserrat-Medium" !important;} .benefits-join-hoora-promoter .cta{margin: 55px 0px;} .benefits-join-hoora-promoter .cta .btn {background: #000000; color: white; border-radius: 14px; padding: 12px 50px; font-family: "Montserrat-Medium"; font-size: 24px; } .join-hoora-promoter-city .available-cities .city-info h3 {font-family: "Montserrat-Medium"; font-size: 34px;} .join-hoora-promoter-city .available-cities .city span {color: #000D26; font-family: "Montserrat-Medium";} .who-can-apply-2 {padding: 18px 0px 75px 0px;} .who-can-apply-2 h2{font-family: Montserrat-Bold !important; font-size: 44px; text-align: center; margin-bottom: 42px; } .who-can-apply-2 ul li{font-family: "Montserrat-Medium"; font-size: 24px; margin-bottom: 14px; } .steps-started-journey-2 .grid-box .steps-body h2 {margin-left: 0px;} .steps-started-journey-2 .grid-box .steps-body .steps-container {margin-left: 25px;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box p{line-height: 34px; font-size: 21px; } .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box ul li {font-family: "Montserrat-Regular"; font-size: 15px;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box ul {margin: 10px 0px 0px 0px;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box {align-items: start !important;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box {margin-bottom: 24px;} .steps-started-journey-2 .grid-box .img-box img {margin-top: -124px;} .jph-media h2 {margin: 70px 0px 30px 0px !important;} .jph-media p {font-size: 24px; font-family: "Montserrat-Regular"; text-align: center; width: 75%; margin: 0 auto;} .jph-step-form h2 {font-family: "Montserrat-Bold"; text-align: center; font-size: 44px; margin-bottom: 40px;} .jph-step-form h3{font-size: 28px; margin-bottom: 34px; font-family: "Montserrat-SemiBold"; line-height: 34px; text-align: center;} .jph-stories .scroll-video .video-body{width: fit-content !important;} .jph-stories .video-body .video-card {width: 400px; } .jph-stories .scroll-video {overflow: auto;} /*==================== Join Hoora Promoter ================= */ /* ===================== ROI 8Months ======================== */ .roi-banner-8months {background: var(--color-white);} .roi-banner-8months .banner-heading {padding: 0px 30px 0px 0px;} .roi-banner-8months .banner-heading h2{color: var(--black); font-family: "Montserrat-Bold"; margin: 0px; font-size: 42px; } .roi-banner-8months .banner-heading h5 {margin: 20px 0px 45px 0px; font-size: 30px; font-family: "Montserrat-Regular";} .roi-banner-8months .banner-heading a {background: var(--black); color: var(--color-white);} .roi-banner-8months .iframe-container .video-container {border: 0px;} .roi-banner-8months .iframe-container::before {background: #00000029;} .roi-banner-8months .iframe-container::after {background: #00000029} .roi-8months-carousel-container { width: 100%; background: linear-gradient(0deg, #FFB702 0%, #FFDF02 100%); padding: 40px 0; overflow: hidden; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.1); border-radius: 10px;} .roi-8months-carousel-container::before {left: 0;background: linear-gradient(to right, rgba(255, 215, 0, 1), rgba(255, 215, 0, 0));} .roi-8months-carousel-track { display: flex; align-items: center; width: fit-content; will-change: transform;} .roi-8months-logo-item { flex-shrink: 0; padding: 0 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; will-change: transform;} .roi-8months-logo-item:hover {transform: scale(1.1);} .roi-8months-logo-item img {object-fit: contain;} .roi-benefits-cards .main-body .card .card-body { background: #F5F5F5; border-radius: 16.55px; padding: 35px;} .roi-benefits-cards .card .card-body .card-text {font-size: 22px; font-family: "Montserrat-Bold";} .roi-8months-choose-investment .main-body .investment-cards .investment-plan-btn{background: #000; color: var(--color-yellow); border-radius: 25px; padding: 31px 80px; font-size: 40px; font-family: "Montserrat-Bold";width: 100%;} .roi-pm-nationwide-impact {padding: 100px 0px; position: relative;} .roi-pm-nationwide-impact .heading-text h6 {font-family: 'Montserrat-Bold'; font-size: 52px; margin-bottom: 32px; } .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line img {position: absolute; bottom: -14px; left: 0px;} /* .roi-pm-nationwide-impact .container .card-body-main .first-card-move { position: relative; left: 28%;} .roi-pm-nationwide-impact .container .card-body-main .last-card-move { position: relative; left: 25%;} */ .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text h2 {font-family: "Montserrat-SemiBold" !important; } .roi-pm-nationwide-impact .roi-pm-nationwide-happy-man{ position: absolute; right: 0; bottom: 0; display: flex; align-items: end; width: 60%;} .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .second-line::after, .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line::after, .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after {border: 5px solid #131315 !important;} .roi-pm-nationwide-impact .container .card-body-main {gap: 75px 0px;} .roi-pm-nationwide-impact .card-text:last-child {margin: 0px;} /* .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text p {font-size: 14px;} .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text h2{font-size: 28px;} */ .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after {right: -20px; top: 58px} .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .second-line::after {bottom: -4px; } .faq-roi-8months{background: #FFF9C9; padding: 80px 0px;} .faq-roi-8months h1 { text-align: center; color: #1a1a1a; margin-bottom: 60px; font-size: 43px; font-weight: 600; font-family: "Montserrat-Bold"; } .faq-roi-8months .faq-item { background: #ffffff; border-radius: 28px; margin-bottom: 16px; overflow: hidden; transition: all 0.3s ease;} .faq-roi-8months .faq-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);} .faq-roi-8months .faq-question { padding: 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; user-select: none; transition: background-color 0.3s ease;} /* .faq-roi-8months .faq-question:hover { background-color: #f8f9fa;} */ .faq-roi-8months .faq-question h3 { font-size: 18px; font-weight: 500; color: #1a1a1a; flex: 1; font-family: "Montserrat-SemiBold";} .faq-roi-8months .faq-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s ease;} .faq-roi-8months .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background-color: #1a1a1a; transition: transform 0.3s ease;} .faq-roi-8months .faq-icon::before { width: 16px; height: 2px;} .faq-roi-8months .faq-icon::after { width: 2px; height: 16px;} .faq-roi-8months .faq-item.active .faq-icon::after { transform: rotate(90deg);} .faq-roi-8months .faq-item.active .faq-icon::before { transform: rotate(180deg);} .faq-roi-8months .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease;} .faq-roi-8months .faq-answer-content { padding: 0 24px 24px 24px; color: #4a5568; font-size: 14px; line-height: 1.6; font-family: "Montserrat-Regular";} .faq-roi-8months .faq-item.active .faq-answer { max-height: 500px;} .faq-roi-8months .faq-list {padding: 0 80px;} .roi-8months-contact-form .step { display: none; } .roi-8months-contact-form .step.active { display: block; } .roi-8months-contact-form .step-indicator { display: flex; justify-content: center; margin-bottom: 30px; } .roi-8months-contact-form .step-dot { width: 40px; height: 40px; border-radius: 50%; background: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px; font-weight: bold; font-family: "Montserrat-Bold"; } .roi-8months-contact-form .step-dot.active { background: #FFD700; color: #000; } .roi-8months-contact-form .step-dot.completed { background: #28a745; color: #fff; } .roi-8months-contact-form .step-line { width: 80px; height: 2px; background: #ddd; margin-top: 20px; } .roi-8months-contact-form .step-line.completed { background: #28a745; } .roi-8months-contact-form .btn-next, .roi-8months-contact-form .btn-prev { background: var(--black); font-family: "Montserrat-Bold"; border: 0px; padding: 8px 20px;} .roi-8months-contact-form #submit-partner-manager-sv, .roi-8months-contact-form .btn-next, .roi-8months-contact-form .btn-prev { font-size: 24px; line-height: 4.69px; padding: 25px 40px; border-radius: 12px;} .roi-8months-contact-form .btn-next:hover, .roi-8months-contact-form .btn-prev:hover {box-shadow: 0px 0px 0px 0px !important; background: var(--black); color: var(--color-white);} /* ===================== ROI 8Months END ======================== */ .fw-800{font-weight: 800;} /* =================>>> Responsive <<<================= */ /* Responsive Breakpoints */ @media (max-width: 968px) { .promotion-program-banner .features { gap: 20px; } .promotion-program-banner .feature-item { flex: 1 1 calc(33.333% - 20px); min-width: 120px; } .navbar-nav{ display:block !important; } } @media (max-width: 360px) { .promotion-program-banner .feature-item { flex: 1 1 100%; } } /* Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .promotion-program-banner .feature > * { animation: fadeIn 0.6s ease-out forwards; } .promotion-program-banner .feature-item { animation: fadeIn 0.6s ease-out forwards; animation-delay: calc(var(--item-index) * 0.1s); } @media (max-width: 1400px) { .banner .text-heading h2{font-size: 44px; line-height: 110%;} .banner .text-heading .frame .center .carousel .change_outer .change_inner .element{font-size: 44px;} .franchise_banner .text-heading h1{font-size: 44px; line-height: 110%;} .franchise_banner .text-heading .icon-btn{font-size: 20px;} .history-table .table_history::-webkit-scrollbar{width: 100%; height: 10px; border-radius: 10px;background-color: #f0a40063;} .history-table .table_history::-webkit-scrollbar-thumb{width: 10%; height: 10px; border-radius: 10px;background-color: #f0a400;} .partner-success-stories .card{ width: 100% !important; height: 100% !important;} .pm-with-us-banner .banner-heading .live-container p, .pm-with-us-banner-sm .banner-heading .live-container p{font-size: 24px;} .pm-partner-success-stories .video-body .video-card { width: 350px; border-radius: 10px;} .pm-partner-success-stories p{ font-family: 'Montserrat-Regular'; font-size: 16px; font-weight: 400; line-height: 19.5px; text-align: left;} .pm-nationwide-impact .container .card-body-main .card-body .card-text h2{ font-family: 'Montserrat-Bold'; font-size: 25px; font-weight: 600; line-height: 30.57px; text-align: left;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p { font-family: 'Montserrat-Medium'; font-size: 14px; font-weight: 500; line-height: 18.72px; text-align: left; margin: 0;} .pm-frequently-questions .heading-text p br{display: none;} .lto-banner h1{ font-size: 230%;} .lto-banner h1 br{display: none;} .workshop-points .box-body {margin: 40px 0;padding: 3% 8%;} .webinar-for-boxs .cards-body .cards { width: 49%; height: auto;} .pm-contact-form .main-form .contact-form h2 {padding: 0 !important;} .pm-contact-form .main-form .offering-card{padding: 40px 35px;} .b2c-banner .banner-img{ position: absolute; right: 0px; top: -55px;} .b2c-banner .banner-heading h1 {font-size: 38px; line-height: 46px; font-family: 'Montserrat-Bold' } .first-autocare-app-banner .banner-heading h2{font-size: 48px; } .available-cities .city-info h2 {margin-bottom: 70px; font-size: 28px;} .book-with-whats-app .container .banner-heading h1{font-size: 38px;} .book-with-whats-app .container .banner-heading p{font-size: 20px; line-height: 28px;} .book-with-whats-app .container {padding: 45px 10px;} .promotion-program-banner h1 {font-size: 44px;} .promotion-program-banner .feature-text{font-size: 16px;} .promotion-program-banner .banner-heading h2 {font-size: 38px;} .promotion-city .investment-overview-2 .main-card-body .card .card-body .count-text p {font-size: 18px; line-height: 24px; } .promotion-page-form .main-form .contact-form form h6 { font-size: 35px; font-family: "Montserrat-ExtraBold"; line-height: 38px; margin-bottom: 20px; margin-top: 55px;} .promotion-program-banner-2 h1{font-size: 40px;} .promotion-program-banner-2 .banner-heading h2 {font-size: 35px;} .promotion-program-banner-2 .banner-heading a {font-size: 18px;} .promotion-program-banner-2 .feature-icon {width: 80px;} .hoora-vs-other .main-comparison-body .feature-list li {font-size: 16px;} .join-car-wash-partner .banner-heading h2 {font-size: 42px;} .join-car-wash-partner .text-heading-2 {font-size: 32px;} .media-coverage-container .media-coverage-card-body img {width: 100%;} .step-form .form-container {padding: 50px 55px} .join-car-wash-partner .reverse-row-1{padding: 54px 0px !important;} .steps-started-journey .grid-box .steps-body .steps-container .step-box{margin-bottom: 27px;} .steps-started-journey .grid-box .steps-body h2 {margin-bottom: 28px; margin-top: 38px; font-size: 38px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box p {font-size: 20px;} .join-partner-media-coverage .media-coverage-main .cards-body .small-card{font-size: 18px;} .join-job-comparison .main-comparison-body .header-cell {font-size: 20px; line-height: 24px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box p {font-size: 18px; line-height: 24px;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box ul li {font-size: 12px;} .roi-banner-8months .banner-heading h5{font-size: 26px;} } @media (max-width: 1200px) { header .navbar .navbar-collapse .box-nav-ss {height: 77vh;} header .navbar .navbar-collapse .navbar-nav { display: flex; flex-direction: column; justify-content: center; align-items: start;} header .navbar .navbar-collapse .navbar-nav li a { font-weight: 700 !important; font-size: 18px !important; line-height: 50px; color: #000 !important;} header .navbar .navbar-collapse { position: fixed; width: 100%; height: 100vh; top: 0; background: #f6f6f6; left: 0; z-index: 99;} header .navbar .navbar-collapse .navbar-nav #menu-item-62 .small-btn {margin: -1rem 0 0 1.3rem} header .navbar-light .navbar-nav .nav-link.active {color: var(--color-yellow) !important;} header .navbar .navbar-collapse .navbar-nav li a.active{ color: var(--color-yellow) !important;} .how_it_works .steps-circles .text-heading h6 {font-size: 240%; line-height: 49px;} .how_it_works .steps-circles .text-heading p { font-size: 138% ; line-height: 29px; color: #3C3C3C;} .banner .banner-img img{width: 100%;} .banner .text-heading h2{font-size: 38px; line-height: 80%;} .banner .text-heading .frame .center .carousel .change_outer .change_inner .element{font-size: 38px;} .banner .text-heading p {font-size: 26px;} .banner .text-heading img{width: 206.05px; height: 72.9px;} .app_features .app_img img{width: 80%;} .app_features .text-heading h1{font-size: 45px;} .app_features .text-heading p{font-size: 25px;} .app_features .text-heading .app_store img{width: 40%; height: auto;height: 53.79px;} .free_features {background-size: 77%;background-position: 0%;} .exclusive_webinar_cards .text-center br{display: none;} .containers {column-count: 3;column-gap: 30px;} .cards-row{display: flex !important; flex-wrap: wrap; gap: 18px;} .history-table .table_history table{width: 87rem !important;} .dashboard-header .navbar .navbar-brand img{width: 70%;} .exclusive_webinar_cards .main-cards {flex-wrap: wrap; justify-content: center;} .exclusive_webinar_cards .cards {width: 220.844px; height: 236px; background: #FFF; box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.11); gap: 12px; padding: 10px;} .exclusive_webinar_cards .cards h6{font-weight: 700; font-size: 24px; color: #22282F;} .exclusive_webinar_cards .register-now-btn button{width: 220px; height: 56px;border-radius: 12px;background: linear-gradient(82deg, #FFC117 0%, #FFE300 58.74%); font-family: 'Montserrat-Bold'; font-size: 16px; font-weight: 700; line-height: normal; padding: 0 10px;} .channel-hero-banner{background-repeat: no-repeat; background-size: cover; background-position: right;} .channel-hero-banner .text-heading p{font-size: 23px;} .channel-hero-banner .text-heading h1{font-size: 51px; line-height: 56px;} .channel-hero-banner .text-heading button{font-size: 16px;} .pm-with-us-banner .container { padding: 100px 0; display: grid; grid-template-columns: 1.6fr 0.1fr 1.7fr 0.2fr; grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". . ."; position: relative;} .pm-with-us-banner .container::before{ width: 35%; background-color: #FFE300; content: "-"; right: 0px; top: 0; position: absolute; color: #FFE300; height: 520px; z-index: 1; border-bottom-left-radius: 30px;} .pm-with-us-banner .banner-heading p{font-family: 'Montserrat-Regular'; font-size: 17px; font-weight: 600; line-height: 20.72px; width: fit-content; margin: 0 0 0 0px;} .pm-with-us-banner-sm .banner-heading {margin: 0px 23%;} .pm-partner-success-stories .video-body .video-card { width: 340px; } .pm-nationwide-impact .container .card-body-main .card-body .card-text h2{ font-family: 'Montserrat-Bold'; font-size: 18px; font-weight: 600; line-height: 20.57px; text-align: left;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p { font-family: 'Montserrat-Medium'; font-size: 12px; font-weight: 500; line-height: 17.72px; text-align: left; margin: 0;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p br{display: none;} .pm-nationwide-impact .container .card-body-main .card-body .small-card { width: 70px; height: 70px; border-radius: 12px; opacity: 0px; background: #FFE300; display: flex; justify-content: center; align-items: center; } .pm-nationwide-impact .container .card-body-main .card-body .small-card img{ width: 40px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .second-line img{height: 1.5px !important;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after{ content: "-"; background-color: #FFE300; border-radius: 50%; width: 27px; height: 27px; color: #FFE300; position: absolute; right: -26px; border: 5px solid #FAFAFB; top: 36%;} .pm-with-us-banner .banner-heading .live-container {font-size: 24px; padding: 34px;} .pm-with-us-banner-offer .banner-heading .live-container p {font-size: 20px;} .offer-pm-contact .main-body .heading-text .text-content p {font-size: 24px;} .offer-pm-contact .main-body .heading-text .text-content img {width: 60%;} .offer-pm-contact .main-body .form-main {padding-top: 60px;} .lto-banner p br{ display: none; font-size: 28px;} .webinar-for-boxs .cards-body .cards {width: 48%;} .webinar-for-boxs .milestones-card {width: 31%;} .webinar-for-boxs .milestones-card h3 {font-size: 32px;} .webinar-for-boxs .milestones-card p {font-size: 22px;} .pm-contact-form .main-form .contact-form h2{font-size: 28px;} .pm-contact-form .main-form .offering-card .countdown div {font-size: 28px;} .choose-investment .main-body .investment-cards .boxs p{font-size: 20px;} .choose-investment .main-body .investment-cards .boxs h5{font-size: 30px;} .b2c-banner .banner-img{top: 0;} .b2c-banner .banner-img {display: flex; align-items: center; justify-content: end;} .b2c-banner .banner-img img{width: 80%;} .b2c-banner .banner-heading h5 { font-size: 22px; line-height: 26.26px;} .b2c-banner .banner-heading .download-btn{padding: 22px 44px;} .b2c-count-overall .small-box-body .small-card-text {line-height: 22px;} .b2c-count-overall .small-box-body .small-card-text .big-text{font-size: 25px; font-family: 'Montserrat-Bold';} .b2c-count-overall .small-box-body .small-card-text .small-text {font-size: 18px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-text .small-text-2 {font-size: 18px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-text .extra-small-text {font-size: 12px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .our-services-2 .b2c-responsive .card .card-body .card-text{padding: 15px 0; font-size: 14px; } .b2c-why-choose-us .wcu-body {display: flex; justify-content: space-between; gap: 10px; } .b2c-why-choose-us .wcu-body .box-1{text-align: center; padding: 0px 30px;} .b2c-why-choose-us .wcu-body .box-1 .img-bg{height: 35%;} .b2c-why-choose-us .wcu-body .box-1 h3{font-size: 16px; margin: 25px 0px 12px 0px;} .b2c-why-choose-us .wcu-body .box-1 p{font-size: 12px; line-height: 20px; padding: 0px 0px;} .pm-partner-success-stories-2 .video-body .video-card{padding: 25px 20px 50px 20px;} .pm-partner-success-stories-2 .video-body .video-card p{margin: 15px 0px;} .service-book .card .card-body .card-title { font-size: 18px; font-family: "Montserrat-SemiBold"; } .service-book .card .card-body .card-text {font-size: 12px; list-style: 14px;} .hoora-city-availability .city-box{ width: 210px; height: 200px;} .hoora-city-availability .city-box p{font-size: 14px; font-family: "Montserrat-SemiBold"; color: #45505D; } .hoora-city-availability .city-box img {width: 70%;} .first-autocare-app-banner .banner-heading h2{font-size: 40px; line-height: 45px;} .choose-investment-2 .main-body .investment-cards p{font-size: 26px;} .available-cities .city-info h2 {margin-bottom: 40px; font-size: 24px;} .available-cities .city span {font-size: 12px;} .available-cities{padding: 40px;} .investment-overview-2 .main-card-body .card{padding: 35px 40px;} .investment-overview-2 .main-card-body .card .card-body .card-title{font-size: 28px;} .investment-overview-2 .main-card-body .card .card-body .card-text, .investment-overview-2 .main-card-body .card .card-body .card-title span {font-size: 18px;} .faq-show-ans .faq-item p { width: fit-content; } .pm-onboarding-form .main-form .lable-heading {font-size: 20px;} .pm-onboarding-form .kit-info {grid-template-columns: repeat(4, 1fr); gap: 0px;} .book-with-whats-app .container .banner-img {display: flex; align-items: center; justify-content: end;} .book-with-whats-app .container .banner-img img{width: 95%;} .book-with-whats-app .container .banner-heading h1 {font-size: 28px;} .book-with-whats-app .container .banner-heading p {font-size: 18px; line-height: 25px;} .book-with-whats-app .container .banner-heading .live-container span {font-size: 28px;} .promotion-program-banner h1 {font-size: 34px;} .promotion-program-banner .feature-text{font-size: 13px;} .promotion-program-banner .banner-heading h2 {font-size: 32px; line-height: 45px;} .what-you-do-hoora-promoter h2, .who-can-apply h2, .why-join-hoora-promoter .heading-text h2{font-size: 38px;} .what-you-do-hoora-promoter .main-body .para-heading, .what-you-do-hoora-promoter .main-body .para-sub-heading {font-size: 22px;} .promotion-city .investment-overview-2 .main-card-body .card .card-body .count-img img { width: 40px; height: 40px;} .promotion-city .investment-overview-2 .main-card-body .card .card-body .count-text {padding: 20px 30px;} .promotion-city .investment-overview-2 .main-card-body .card .card-body {gap: 15px} .promotion-page-form .main-form .contact-form form h6 { font-size: 35px; font-family: "Montserrat-ExtraBold"; line-height: 38px; margin-bottom: 20px; margin-top: 55px;} .promotion-page-form .main-form .contact-form form .wpcf7-form {padding: 0px 40px !important;} .promotion-program-banner-2 h1 {font-size: 32px;} .promotion-program-banner-2 .banner-heading h2 {font-size: 30px; margin: 0px 0px 60px 0px} .promotion-program-banner-2 .feature-icon{width: 70px;} .promotion-program-banner-2 .info-banner .stat-item .highlight{font-size: 34px;} .promotion-program-banner-2 .info-banner .stat-item p {font-size: 18px;} .step-form .form-container {padding: 50px 30px;} .step-form .discount-with-date {font-size: 36px;} .step-form h3 {font-size: 38px; line-height: 42px;} .join-car-wash-partner .banner-heading h2{margin: 18px 0px !important;} .join-car-wash-partner .text-heading-2 {font-size: 28px;} .why-do-partner .main-body .content-box .box-icon { width: 90px; height: 90px; } .why-do-partner .main-body .content-box .box-icon img {width: 38px; height: 38px;} .what-you-do-hoora-promoter .main-body .para-heading {font-size: 18px; margin-bottom: 5px !important; } .why-do-partner .main-body .content-box .para-sub-heading {font-size: 14px; line-height: 19px;} .steps-started-journey .grid-box .steps-body h2 { margin-bottom: 25px; margin-top: 35px; font-size: 28px;} .steps-started-journey .grid-box {padding: 0px 10px 0px 10px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box {margin-bottom: 16px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box p {font-size: 16px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box .step-number { margin-left: -40px; width: 34px; height: 33px;} .join-partner-media-coverage .media-coverage-main .cards-body .small-card {padding: 18px 28px 14px 28px;} .join-job-comparison .main-comparison-body {overflow: scroll;} .join-job-comparison .main-comparison-body .comparison-table {width: 150%;} .join-hoora-promoter .banner-heading h2 {margin: 0px 0px 12px 0px !important;} .join-hoora-promoter .banner-heading .text-heading-1 {font-size: 20px;} .join-hoora-promoter .banner-heading .text-heading-2 {font-size: 24px; margin-top: 24px; line-height: 32px;} .steps-started-journey-2 .grid-box {padding: 0px 30px; align-items: center;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box .step-number {padding: 12px;} .roi-8months-logo-item img { max-width: 170px;} .roi-pm-nationwide-impact .heading-text h6 {font-size: 40px; margin-bottom: 24px; } .roi-pm-nationwide-impact{ padding: 80px 0px;} .roi-pm-nationwide-impact .container .card-body-main { gap: 24px;} .roi-banner-8months .banner-heading h2 {margin: 0px 0px 40px 0px;} .roi-banner-8months .banner-heading h5{font-size: 22px;} .roi-8months-choose-investment .main-body .investment-cards .investment-plan-btn {font-size: 28px; padding: 34px 80px; border-radius:25px;} #registrationForm .radio-offer label { width: 46% !important; margin: 2px !important; font-size: 14px; gap: 5px; padding: 8px 11px !important;} } @media (max-width: 992px) { .how_it_works .steps-circles .text-heading{height: auto !important;} .people_saying .card {width: 100%;} .free_features {background-image: none;} .free_features .text-heading .card img{ width: 112.36px; height: 106.13px; } .slick-next, .slick-prev {display: none !important;} .franchise_banner {background-image: none !important;} .frequntly-questions .offerings_points::after{content: '';box-shadow: 0rem 0rem 0rem 0rem var(--color-yellow) !important;height: 100%;} .new-cards-ui .new-cards-row .new-cards-body, .new-cards-ui .new-cards-row .new-cards-Collection {height: auto; border-bottom: 0;} .mt-5-rem { margin-top: 4.5rem !important;} .main-dashboard .filter_history input, .main-dashboard .filter_history select {width: 100% !important;} .socials-icon{justify-content: center !important;align-items: center !important;margin: 1rem 0 3rem 0;} .main-done-page .main-box{width: 80%;height: 80%;} .main-done-page .main-box .text-thank-you{font-size: 10px;text-align: center;} .pm-with-us-banner .container { padding: 60px 0; display: grid; grid-template-columns: 1.4fr 0.1fr 1.7fr 0.2fr; grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". . ."; position: relative;} .pm-with-us-banner .container::before{ width: 35%; background-color: #FFE300; content: "-"; right: 0px; top: 0; position: absolute; color: #FFE300; height: 96%; z-index: 1; border-bottom-left-radius: 30px;} .pm-with-us-banner .banner-heading h1{font-size: 28px; line-height: 33px; font-weight: 700; font-family: 'Montserrat-Bold' } .pm-with-us-banner .banner-heading h1 br{display: none;} .pm-with-us-banner .banner-heading h5{font-size: 14px; line-height: 19px; font-weight: 600; font-family: 'Montserrat-Regular'; color: #585858; } .pm-with-us-banner .banner-heading .live-container{padding: 20px;} .pm-with-us-banner .banner-heading .live-container p{ font-family: 'Montserrat-Regular'; font-size: 18px; font-weight: 600; line-height: 15px; text-align: center;} .pm-with-us-banner .banner-heading p{font-family: 'Montserrat-Regular'; font-size: 12px; font-weight: 600; line-height: 20.72px;} .pm-with-us-banner .banner-heading p span{ font-family: 'Montserrat-Bold'; font-size: 12px; font-weight: 700; line-height: 20.72px; text-align: center;} .pm-with-us-banner iframe{height: 245px !important;} .pm-partner-success-stories .scroll-video::-webkit-progress-bar{ background-color: transparent; border-radius: 20px; margin: 0 20px; display: none;} .pm-partner-success-stories .scroll-video{overflow: scroll;} .pm-partner-success-stories .scroll-video .video-body{width: 1059px;} .pm-nationwide-impact .container{ grid-template-columns: 0fr 2.9fr 0fr 2.5fr} .pm-nationwide-impact .heading-text {padding: 0 20px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text h2{ font-family: 'Montserrat-Bold'; font-size: 18px; font-weight: 600; line-height: 20.57px; text-align: left;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p { font-family: 'Montserrat-Medium'; font-size: 12px; font-weight: 500; line-height: 17.72px; text-align: left; margin: 0;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .second-line img{height: 1.5px !important;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after{ content: "-"; background-color: #FFE300; border-radius: 50%; width: 27px; height: 27px; color: #FFE300; position: absolute; right: -26px; border: 5px solid #FAFAFB; top: 32%;} .pm-frequently-questions {padding: 45px 0;} .pm-with-us-banner-sm .banner-heading{margin: 0px 13%;} .pm-with-us-banner-offer .container { grid-template-columns: 3.3fr 0.1fr 2.5fr;} .pm-with-us-banner-offer .banner-heading h1 { font-size: 34px; line-height: 39.88px; font-weight: 700; font-family: 'Montserrat-Bold';} .pm-with-us-banner-offer .banner-heading .live-container {padding: 15px;} .main-offer-heading .text-heading h5 {font-size: 25px;} .offer-pm-contact .main-body .heading-text .text-content img {width: 45%;} .offer-pm-contact .main-body .heading-text .text-content p {font-size: 19px;} .offer-pm-contact .main-body .heading-text {top: 40px;} .offer-pm-contact {margin-top: 6rem !important;} .pm-offer-info .small-box-body .small-card-text .big-text {font-size: 32px;} .pm-offer-info .small-box-body {padding: 21px 16px 19px 16px; width: 208px;} .lto-banner h1 {font-size: 212%;} .lto-banner p {font-size: 21px; margin-top: 25px;} .lto-banner .video-main-body {padding: 2% 2.5%;} .webinar-for-boxs .media-coverage-main img, .webinar-for-boxs .cards-body .cards {width: 100%;} .webinar-for-boxs .milestones-card {border-radius: 9.55%;} .webinar-for-boxs .milestones-card h3 {font-size: 28px;} .webinar-for-boxs .milestones-card p {font-size: 17px;} .lto-hoora-cities .main-body .jumbotron {padding: 27px 30px 25px 30px;} .lto-hoora-cities .main-body .jumbotron h1 {font-size: 22px;} .lto-hoora-cities .main-body .jumbotron h1 img {width: 24px;} .lto-hoora-cities .main-body .jumbotron p {font-size: 12px;} .webinar-for-boxs {margin: 30px 0px;} .choose-investment .main-body .investment-cards{ flex-wrap: wrap; gap: 32px;} .franchise-table {max-width: 100%; padding: 0px;} .franchise-table table, .franchise-table .highlight {font-size: 12px;} .franchise-table th, .franchise-table td {padding: 5px 10px;} .franchise-table .text-green td{ font-size: 12px; } .franchise-table .small-btn{margin: 4px 0;} .b2c-banner .banner-heading h1 { font-size: 28px; line-height: 32.26px;} .b2c-banner .banner-heading h5 { font-size: 18px; line-height: 20.26px;} .b2c-banner .banner-heading .download-btn{padding: 22px 30px;} .b2c-banner .container{padding: 50px 12px;display: grid;grid-template-columns: 2.8fr 0.4fr 2.5fr;grid-template-rows: 1fr;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: ". . .";position: relative;} .b2c-banner .banner-img{position: unset;} .b2c-banner .banner-img img{width: 100%;} .b2c-count-overall .small-box-body {border-radius: 16px; padding: 22px 25px 18px 25px; width: 167px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0px 4px 4px 0px #0000001a; border: 1px solid #0000001a; } .b2c-count-overall .small-box-body .small-card-text {line-height: 17px;} .b2c-count-overall .small-box-body .small-card-text .big-text{font-size: 17px; font-family: 'Montserrat-Bold';} .b2c-count-overall .small-box-body .small-card-text .small-text {font-size: 12px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-text .small-text-2 {font-size: 13px; font-family: 'Montserrat-SemiBold'; line-height: 17px;} .b2c-count-overall .small-box-body .small-card-text .extra-small-text {font-size: 7px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-icon{width: 50px; height: 50px;} .b2c-count-overall .small-box-body .small-card-icon img{width: -webkit-fill-available;} .b2c-why-choose-us .wcu-body .box-1{text-align: center; padding: 0px 10px;} .b2c-why-choose-us .wcu-body .box-1 .img-bg{height: 35%;} .b2c-why-choose-us .wcu-body .box-1 .img-bg img{width: 100%;} .b2c-why-choose-us .wcu-body .box-1 h3{font-size: 14px; margin: 25px 0px 12px 0px;} .b2c-why-choose-us .wcu-body .box-1 p{font-size: 12px; line-height: 18px; padding: 0px;} .hoora-city-availability .city-box{ width: 210px; height: 160px; padding: 10px 20px 12px 20px;} .hoora-city-availability .city-box p{font-size: 14px; font-family: "Montserrat-SemiBold"; color: #45505D; } .hoora-city-availability .city-box img {width: 70%;} .first-autocare-app-banner .main-heading {font-size: 38px;} .first-autocare-app-banner .banner-heading h2{font-size: 32px; line-height: 39px;} .first-autocare-app-banner .container {padding: 0rem .75rem;} .investment-overview .main-card-body .card .card-body img{width: 100%;} .investment-overview .main-card-body .card .card-body .card-title {font-size: 18px; font-family: 'Montserrat-Medium'; margin: 0; line-height: 35px; letter-spacing: -1px; } .investment-overview .main-card-body .card .card-body .card-text {font-size: 24px; font-family: 'Montserrat-SemiBold'; margin: 0; line-height: 35px; letter-spacing: -1px; } .choose-investment-2 .main-body .investment-cards{flex-wrap: nowrap;} .choose-investment-2 .main-body .investment-cards p{font-size: 18px;} .benefits-cards .card .card-body .card-text br{display: none;} .available-cities .city-info h2 {font-size: 18px; margin-bottom: 40px;} .available-cities .city span{margin-bottom: 0px;} .available-cities .city img {height: 40px;} .available-cities .map img {max-width: 75%;} .investment-overview-2 .main-card-body {padding: 0px 0px 40px 0px;} .investment-overview-2 .main-card-body .card{padding: 30px 24px;} .investment-overview-2 .main-card-body .card .card-body{gap: 15px;} .investment-overview-2 .main-card-body .card .card-body .card-title{font-size: 18px; line-height: 20px;} .investment-overview-2 .main-card-body .card .card-body .card-text, .investment-overview-2 .main-card-body .card .card-body .card-title span {font-size: 14px; line-height: 20px; } .pm-onboarding-form .investment-container{max-width: 100%;} .book-with-whats-app .container .banner-heading h1{font-size: 23px;} .book-with-whats-app .container .banner-heading p {font-size: 14px; line-height: 20px;} .book-with-whats-app .container .banner-heading .live-container {width: 290px; height: 69px;} .book-with-whats-app .container .banner-heading a span {font-size: 14px; font-family: 'Montserrat-SemiBold'; } .book-with-whats-app .container .banner-heading .live-container img{width: 10%;} .book-with-whats-app .container .banner-heading .live-container span {font-size: 18px;} .promotion-program-banner h1 {font-size: 28px;} .what-you-do-hoora-promoter h2, .who-can-apply h2, .why-join-hoora-promoter .heading-text h2{font-size: 32px;} .what-you-do-hoora-promoter .main-body .para-heading, .what-you-do-hoora-promoter .main-body .para-sub-heading, .who-can-apply .content-body p {font-size: 17px; line-height: 23px;} .what-you-do-hoora-promoter .main-body .content-box img {width: 100%;} .who-can-apply h2{margin-bottom: 20px;} .hide-investment-overview {display: none;} .promotion-program-banner-2 h1 {font-size: 26px;} .promotion-program-banner-2 .banner-heading h2 {font-size: 22px; margin: 0px 0px 50px 0px; line-height: 121%;} .promotion-program-banner-2 .banner-heading a { padding: 14px 31px;} .promotion-program-banner-2 .feature-icon {width: 60px;} .promotion-program-banner-2 .info-banner .stat-item .highlight{font-size: 28px;} .promotion-program-banner-2 .info-banner .stat-item p{font-size: 14px;} .hoora-vs-other .main-comparison-body .nav-tabs .nav-link {padding: 14px 10px;} .hoora-vs-other .main-comparison-body .feature-list li {font-size: 10px; padding: 7px 15px} .hoora-vs-other .main-comparison-body .brand-column h3 {font-size: 22px;} .hoora-vs-other .main-comparison-body .comparison-card {padding: 16px 0px 8px 0px;} .hoora-vs-other .main-comparison-body .feature-list li img {width: 14px; height: 14px;} .support-from-hoora .main-body {overflow-x: scroll; margin-bottom: 30px;} .support-from-hoora .feature-card-body {flex-direction: row !important; flex-wrap: unset !important; width: 355%; padding: 5px 0px 20px 30px; justify-content: start !important;} .p-success-stories .main-body{overflow-x: scroll;} .p-success-stories .grid-container {width: 440%;} .p-success-stories .grid-container .item-1 {grid-row: span 2 / span 2;} .p-success-stories .grid-container .item-2 {grid-row: span 2 / span 2;} .p-success-stories .grid-container .item-5 {grid-row: span 2 / span 2; grid-column: auto;} .p-success-stories .grid-container .item-8 {grid-row: span 2 / span 2; grid-column: auto;} .p-success-stories .grid-container .item-9 {grid-row: span 2 / span 2; grid-column: auto;} .p-success-stories .grid-container .item-10 {grid-row: span 2 / span 2; grid-column: auto;} .p-success-stories .grid-container .item-11, .p-success-stories .grid-container .item-12 {grid-column: auto;grid-row: span 2 / span 2;} .p-success-stories .grid-container {grid-template-columns: repeat(8, 1fr) !important;grid-template-rows: repeat(1, 1fr) !important;} .p-success-stories .grid-container .card-date, .p-success-stories .grid-container .card-text {font-family: "Montserrat-SemiBold";} .p-success-stories .grid-container .card-rating {font-size: 12px; } .join-car-wash-partner .text-heading-2, .join-car-wash-partner .text-heading-1 {font-size: 22px; line-height: 24px;} .join-car-wash-partner .reverse-row-1 {padding: 38px 0px !important;} .join-car-wash-partner .banner-heading h2 {margin: 10px 0px !important;} .steps-started-journey .grid-box .img-box img {width: 100%;margin-top: -130px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box p {font-size: 12px;margin-bottom: 2px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box .step-number { margin-left: -36px; width: 26px; height: 25px; font-size: 12px;} .steps-started-journey .grid-box .steps-body h2 {margin-bottom: 20px;margin-top: 25px;font-size: 23px;} .steps-started-journey .grid-box .steps-body button { border-radius: 12px; background: var(--black); color: var(--color-white); font-family: "Montserrat-Medium"; padding: 7px 20px; margin-left: 34px;} .join-partner-media-coverage .media-coverage-main .cards-body .small-card { padding: 10px 15px 6px 15px; font-size: 14px; width: 87%; border-radius: 10px;} .join-job-comparison .main-comparison-body .comparison-table {width: 168%;} .join-job-comparison{margin: 60px 0px;} .join-job-comparison h2{text-align: start;} .join-partner-stories .heading-text h2 {font-size: 32px !important; margin: 10px 0px 28px 0px !important;} .join-partner-stories .scroll-video .video-body {width: 285% !important;} .join-hoora-promoter .banner-heading h2{margin: 0px 0px 8px 0px !important;} .join-hoora-promoter .banner-heading .text-heading-2{ font-size: 16px; margin-top: 17px; line-height: 22px;} .join-hoora-promoter .banner-heading .text-heading-1{ font-size: 14px;} .join-hoora-promoter .features-container {overflow: scroll;} .join-hoora-promoter .features-container::-webkit-scrollbar{width: 0px; background: transparent;} .join-hoora-promoter .features-container .features {width: fit-content; margin: 0px;} .join-hoora-promoter .features .small-card { width: 280px; font-size: 12px; line-height: 12px; text-align: center; height: 49px; border: 0.5px solid var(--black) !important;} .join-hoora-promoter .cta {margin: 12px 0px 40px 0px; } .join-hoora-promoter .cta p {font-size: 24px;} .join-hoora-promoter .cta .btn { font-size: 16px; border-radius: 7px; padding: 9px 42px;} .join-hoora-promoter .reverse-row-1 {padding: 24px 0px !important;} .steps-started-journey-2 {margin-top: 5rem;} .steps-started-journey .grid-box .img-box img {margin-top: -20px;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box {margin-bottom: 8px;} .jph-media {background-color: #F8FAFB !important;} .jph-media h2 {padding: 0px 0px 0px 0px !important;} .jph-media p {font-size: 18px; width: fit-content;} .jph-stories .scroll-video .video-body{width: fit-content !important;} .roi-8months-logo-item img { max-width: 120px;} .roi-pm-nationwide-impact .container .card-body-main .first-card-move {left: 10%;} .roi-pm-nationwide-impact .container .card-body-main .last-card-move {left: 8%;} .roi-banner-8months .banner-heading h5 {font-size: 16px;} .roi-banner-8months .banner-heading h2 {margin: 0px;} .roi-8months-choose-investment .main-body .investment-cards .investment-plan-btn {font-size: 24px; padding: 34px 70px;} .faq-roi-8months .faq-list {padding: 0 40px;} .faq-roi-8months h1{font-size: 32px;} #registrationForm .radio-offer label { width: 30% !important; margin: 2px !important; font-size: 14px; gap: 5px; padding: 8px 11px !important;} } @media (max-width: 768px) { .banner .text-heading .btn-franchise{width: 100% !important; font-size: 16px;} .card {margin: 0;display: grid;grid-template-rows: 1fr auto;margin-bottom: 10px;break-inside: avoid;} .containers {column-count: 2;column-gap: 10px;} .exclusive_webinar_cards .text-center h5 {font-size: 20px; line-height: 24px;} .exclusive_webinar_cards .text-center h6 {font-size: 20px; line-height: 24px; color: var(--black);} .our_services .responsive .card .card-body p{font-size: 20px; line-height: 24px;} footer .car-image img {width: 60%;} #navbarTogglerDemo03{ position: fixed; top: 0; left: 0; width: 70%; height: 100vh; background-color: #f0a400;} .dashboard-header .navbar .collapse .navbar-nav li{margin: 0 0 0.8rem 0rem;} .franchise_banner .text-heading h1{ text-align: center; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 1.3rem;} .banner .text-heading .btn .img-icon img{width: 60% !important;} .banner .text-heading .btn .img-icon-2 img{width: 60% !important;} .banner .text-heading .btn .img-icon-3 img{width: 60% !important;} .short_points_webinar .text-heading h2{color: #FFF; font-family: 'Montserrat-Bold';font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;} .short_points_webinar .text-mini-heading p{color: #FFF; font-family: 'Montserrat-Light';font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;} .short_points_webinar .text-mini-heading .small-card{border-radius: 16px; background: rgba(255, 255, 255, 0.16);display: inline-flex;padding: 16px;align-items: center; gap: 12px;} .short_points_webinar .text-mini-heading .small-card h6{color: #FAFAFB; font-family: 'Montserrat-Bold'; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; margin: 0 !important;} .main-done-page .main-box{ padding: 10px; background: linear-gradient(82.31deg, #FFC117 0%, #FFE300 58.74%); /* box-shadow: 0px 3px 30px 3px #d4d3d3; */ width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 10px;} .main-done-page .main-box .text-thank-you h2{ font-size: 24px; font-weight: 600;} .main-done-page .main-box .text-thank-you button, .main-done-page .main-box .text-thank-you a {font-size: 18px; } .main-done-page .main-box .text-thank-you p{ font-size: 14px; font-weight: 600; font-family: 'Montserrat-Regular';} .main-done-page .main-box .text-thank-you h5{ font-size: 16px; font-style: normal; font-weight: 600; line-height: 28px; font-family: 'Montserrat-Bold';} .main-done-page .small-card p{ font-size: 16px; font-weight: 600; font-family: 'Montserrat-Bold';} .channel-hero-banner{ background-position: top; background-image: url("../images/cp-mobile.png") !important; aspect-ratio: 4/6 !important; } .channel-hero-banner .text-heading{text-align: center; position: absolute; padding: 0 20px; left: 0; right: 0;} .channel-hero-banner .text-heading h1{font-size: 3.5rem;line-height: normal; color: black !important;} .channel-hero-banner .text-heading p{font-size: 24px;color:#67788C;} .channel-hero-banner .text-heading button{font-size: 12px; padding-top: 5px !important ; padding-bottom: 5px !important;margin-top: 29px !important;} .channel-hero-banner .text-heading h1 .line-in-text::after{bottom: -11px;} .video-section{ background-color: rgba(255, 255, 255, 1); box-shadow: 0px 0px 14px 7px #00000024; z-index: 1; position: relative;} .video-section .text-heading{ font-size: 14px; font-weight: 700; line-height: 21px; letter-spacing: 0em; text-align: center;} .video-section .btn{border-radius: 7px; font-family: 'Montserrat-Bold'; font-size: 12px; font-weight: 700; line-height: 29px; letter-spacing: 0em; text-align: center;} .benefits-cards .card-body .card-img{width: 45px !important; height: 45px !important;} .benefits-cards .card-body .card-img img{width: 18px} .benefits-cards .card .card-body .card-title{font-size: 14px; line-height: 18px;} .benefits-cards .card .card-body .card-text{font-size: 12px; line-height: 14px;} .benefits-cards .card {height: 100%;} .benefits-cards .card .card-body{padding: 0px !important;} .benefits-cards .main-section h5, .questions-section .main-section h5, .partner-success-stories .main-section h6, .channel-partner-form .text-heading h6{ font-size: 24px; line-height: 29px;} .questions-section .ques-ans-text h5{ font-size: 22px; line-height: 29px; font-family: "Montserrat-Light";} .questions-section .ques-ans-text p, .channel-partner-form .text-heading p{ font-size: 12px; line-height: 14px; font-family: "Montserrat-Regular";} .questions-section .main-section h5 span{display: none;} .questions-section .main-section h5{text-align: start !important;} .partner-success-stories .card .card-body .card-text{ font-size: 8px; line-height: 13px;} .partner-success-stories .card .card-body .partner-name h5, .partner-success-stories .card .card-body .partner-name p{ font-size: 10px; line-height: 14px;} .partner-success-stories .card .card-body img{ width: 55px;height: 55px;} .pm-with-us-banner .container { padding: 30px 0; display: flex; flex-direction: column; grid-template-columns: 1.4fr 0.1fr 1.7fr 0.2fr; grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: ". . ."; position: relative;} .pm-with-us-banner .container::before{ display: none;} .pm-with-us-banner .banner-heading{padding: 0 20px;} .pm-with-us-banner .banner-heading h1{text-align: center; font-size: 24px; line-height: 28px; font-weight: 800; font-family: 'Montserrat-ExtraBold' } .pm-with-us-banner .banner-heading h5{ text-align: center; font-size: 17px; line-height: 19px; font-weight: 500; font-family: 'Montserrat-Medium'; color: #585858; padding: 0 30px; } .pm-with-us-banner .iframe{ position: relative; padding: 36px 20px; margin-top: 20px;} .pm-with-us-banner .iframe::before{ width: 65%; background-color: #FFE300; content: "-"; right: 0px; top: 0; position: absolute; color: #FFE300; height: 96%; z-index: 1; border-radius: 10px 0 0 10px;} .pm-with-us-banner-sm .banner-heading {margin: 0px 6%;} .pm-with-us-banner-sm .banner-heading .live-container{background: #000000; border-radius: 7px; width: 100%; padding: 18.3px 25px;} .pm-with-us-banner-sm .banner-heading .live-container p{font-size: 17px;} .pm-with-us-banner .banner-heading .live-container{background: #000000; border-radius: 16px; width: 86%; display: none !important;} .pm-with-us-banner .banner-heading .live-container p{ font-family: 'Montserrat-Regular'; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center;} .pm-with-us-banner .banner-heading .live-container img{ width: 60px;} .pm-with-us-banner .banner-heading p{display: none !important; font-family: 'Montserrat-Regular'; font-size: 12px; font-weight: 600; line-height: 20.72px;} .pm-with-us-banner .banner-heading p span{ font-family: 'Montserrat-Bold'; font-size: 12px; font-weight: 700; line-height: 20.72px; text-align: center;} .pm-with-us-banner iframe{height: 245px !important; border-radius: 10px; width: 90%;} .pm-partner-success-stories .heading-text h2{font-size: 24px; line-height: 38px; font-weight: 600;} .pm-partner-success-stories .heading-text p{font-size: 14px; line-height: 15px;} .pm-partner-success-stories .video-body .video-card{width: 330px;} .pm-partner-success-stories .video-body{padding: 0 0 0 20px;} .pm-partner-success-stories .video-body .video-card p{ font-family: 'Montserrat-Regular'; font-size: 7px; font-weight: 400; line-height: 8.5px; text-align: left;} .pm-partner-success-stories{background: #F7F5F6; padding: 25px 0 40px 0;} .pm-nationwide-impact .container{ grid-template-columns: 0fr 2.9fr 0fr 2.5fr} .pm-nationwide-impact .heading-text {padding: 0 20px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text h2{ font-family: 'Montserrat-Bold'; font-size: 14px; font-weight: 600; line-height: 18.57px; text-align: left;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p { font-family: 'Montserrat-Medium'; font-size: 10px; font-weight: 500; line-height: 14.72px; text-align: left; margin: 0;} .pm-nationwide-impact .container .card-body-main .card-body .small-card { width: 50px; height: 50px; border-radius: 12px; opacity: 0px; background: #FFE300; display: flex; justify-content: center; align-items: center; } .pm-nationwide-impact .container .card-body-main .card-body .small-card img{ width: 25px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .second-line img{height: 1.5px !important;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after{ display: flex; align-items: center; justify-content: center; content: "-"; background-color: #FFE300; border-radius: 50%; width: 12px; height: 12px; color: #FFE300; position: absolute; right: -17px; border: 0px solid #FAFAFB; top: 48%;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .line img {height: auto !important;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line::after{ display: flex; align-items: center; justify-content: center; content: "-"; background-color: #FFE300; border-radius: 50%; width: 12px; height: 12px; color: #FFE300; position: absolute; right: -17px; border: 0px solid #FAFAFB; bottom: -16px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .second-line::after{ display: flex; align-items: center; justify-content: center; content: "-"; background-color: #FFE300; border-radius: 50%; width: 12px; height: 12px; color: #FFE300; position: absolute; right: -17px; border: 0px solid #FAFAFB; bottom: 5px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line img{ position-try-options: flip-inline; transform: rotate3d(1, 0, 0, 180deg); position: absolute; bottom: 0;;} .pm-nationwide-impact .container .card-body-main{gap: 10px 0px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line, .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line{padding: 10px 0 0 0;} .pm-contact-form .main-form{padding: 0 20px 64px 20px;} .pm-contact-form .main-form h4{ font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 600; line-height: 34.54px; text-align: center; padding: 20px 0;} .pm-contact-form .main-form .contact-form{ border-radius: 10px; padding: 18px 16px 1px 16px;} .pm-contact-form .main-form .contact-form h2{ font-family: 'Montserrat-Bold'; font-size: 17px; font-weight: 600; line-height: 18.01px; text-align: center;} .pm-contact-form .main-form .contact-form .sub-heading{ font-family: 'Montserrat-Medium'; font-size: 14px; font-weight: 500; line-height: 15.82px; margin-bottom: 20px;} .pm-contact-form .contact-form .wpcf7 .lable-heading {font-size: 14px !important; margin-bottom: 5px; line-height: 18px;} .pm-contact-form .contact-form .wpcf7 .form-control {padding: 0.8rem; font-size: 14px;} .pm-contact-form .contact-form .wpcf7 .form-control::placeholder{ font-family: 'Montserrat-Bold'; font-size: 14px; font-weight: 700; line-height: 9.75px; text-align: left;} .pm-contact-form .contact-form .wpcf7 .lable-heading br{display: none;} .pm-contact-form .select2-container .select2-selection--single , .pm-contact-form .select2-container--default .select2-selection--single .select2-selection__arrow{height: 49px;} .pm-contact-form .select2-container .select2-selection--single .select2-selection__rendered { font-family: 'Montserrat-Bold'; font-size: 14px; font-weight: 700; padding-top: 10px; color: #94a1b0 !important;} .pm-contact-form .live-container {background: transparent !important;} .pm-contact-form .center-img p {margin: 0; text-align: center;} .pm-contact-form .center-img p img {width: 60%;} .pm-contact-form .center-img{display: flex; align-items: center; justify-content: center;} .pm-contact-form .live-container p{margin: 0; display: flex;} .pm-contact-form .wpcf7-spinner{ margin: 0;} .pm-frequently-questions .heading-text h4 br, .pm-frequently-questions .heading-text p br{display: none;} .pm-frequently-questions .heading-text h4{ font-family: 'Montserrat-Bold'; font-size: 24px; font-weight: 600; line-height: 25.95px; text-align: center;} .pm-frequently-questions .heading-text p{ font-family: 'Montserrat-Regular'; font-size: 14px; font-weight: 600; line-height: 16.82px; text-align: center; color: #7B7B7B;} .pm-frequently-questions .heading-text .heading {padding: 0 24px;} .pm-frequently-questions .accordion-button::after { background-image: url("data:image/svg+xml,") !important ;} .pm-frequently-questions .accordion-button:not(.collapsed)::after{transform: none !important} .pm-frequently-questions .accordion .accordion-item .accordion-header .accordion-button{ font-family: 'Montserrat-Bold'; font-size: 16px; font-weight: 600; line-height: 22.94px; text-align: left;} .pm-frequently-questions .accordion .accordion-item {margin-bottom: 0px;} .pm-frequently-questions .accordion .accordion-item .accordion-body {font-size: 14px; padding: 0 49px 0 22px;} .pm-contact-form #submitBtnPartnerWithUs, #submit-partner-manager-sv{padding: 15px; font-size: 24px;} .pm-nationwide-impact .heading-text h6{font-size: 24px; line-height: 19px;} .pm-nationwide-impact .heading-text p{font-size: 16px; line-height: 20.5px;} .blogs-post .card-title a{font-size: 16px; line-height: 20.5px;} .single-post-blog h1{font-size: 23px !important;} .pm-with-us-banner-offer .container {display: flex; flex-direction: column; padding: 45px 20px;} .main-offer-heading .text-heading h5 {font-size: 19px;} .main-offer-heading::after{transform: rotate(3deg) !important;} .pm-with-us-banner-offer .banner-heading h1 { font-size: 20px; font-family: 'Montserrat-ExtraBold'; line-height: 24px; } .pm-with-us-banner-offer .banner-heading h1 br {display: none !important; } .pm-with-us-banner .banner-heading h5, .pm-with-us-banner-offer .banner-heading h5 { font-size: 16px; line-height: 24.26px; font-family: 'Montserrat-Medium';} .pm-with-us-banner-offer .iframe {padding: 15px;} .pm-with-us-banner-offer .iframe iframe {border-radius: 12px;} .pm-with-us-banner-offer .iframe .live-container{background: #000000; border-radius: 8px; padding: 23px; text-align: center; margin-top: 18px;} .pm-with-us-banner-offer .iframe .live-container p{ font-family: 'Montserrat-SemiBold'; font-size: 16px; font-weight: 600; margin: 0;} .pm-offer-info .small-box-body {width: 160px;} .pm-offer-info .small-box-body .small-card-text .big-text {font-size: 30px;} .pm-offer-info .small-box-body .small-card-text span {font-size: 12px; line-height: 0.5 !important; } .pm-offer-info .small-box-body .small-card-icon {width: 55px; height: 50px;} .pm-offer-info .small-box-body .small-card-icon img {width: 100%;} .offer-pm-contact .main-body .heading-text .text-content {flex-direction: column;} .offer-pm-contact .main-body .heading-text > img { height: 100px; } .offer-pm-contact .main-body .heading-text .text-content img {width: 50%;} .offer-pm-contact .main-body .heading-text .text-content {top: -142px; gap: 0} .offer-pm-contact .main-body .heading-text .text-content p {font-size: 14px; padding: 0 24px;} .offer-pm-contact .main-body .heading-text .text-content p br {display: none;} .offer-pm-contact .main-body .form-main {padding-top: 10px; padding-left: 40px; padding-right: 40px;} .offer-pm-contact #submitBtnPartnerWithUs, #submit-partner-manager-sv { font-size: 14.4px !important; width: 100%; text-wrap: balance; font-family: 'Montserrat-Bold';} .offer-pm-contact .main-body .form-main .form-body { padding: 40px 0px 0px 0px; } .offer-pm-contact .contact-form .wpcf7 .lable-heading {font-family: 'Montserrat-Bold';} .offer-pm-contact .main-form p {line-height: 20px;} .offer-pm-contact .wpcf7-list-item {margin: 10px 0 0 1em} .lto-banner {padding: 22px 0px 35px 0px;} .lto-banner h1 {font-size: 100%; font-family: 'Montserrat-ExtraBold'} .lto-banner p {font-size: 18px; margin: 25px; color: #e7e7e7 !important; } .lto-banner .play-button img {width: 32px; height: 32px;} .lto-banner .video-main-body {margin: 0px 17px;} .lto-banner .video-main-body .video-container {border-radius: 5px;} .lto-btn {padding: 17px 11px; font-size: 15px; width: fit-content; border-radius: 7px; box-shadow: 0px 1px 28px 5px #ffe35280} .workshop-points .box-body { margin: 40px 0px 0px 0px; padding: 7% 5%; border-radius: 12px;} .workshop-points h2, .webinar-for-boxs h2 {font-size: 24px; margin-bottom: 24px; line-height: 38px;} .workshop-points .custom-bullets li {font-size: 14px; padding-left: 28px; margin-bottom: 8px;} .workshop-points .custom-bullets li::before {width: 20px;height: 20px;} .webinar-for-boxs .cards-body .cards {padding: 20px 14px;} .webinar-for-boxs .cards-body .cards img {width: 48px;} .webinar-for-boxs .cards-body .cards p {font-size: 14px; line-height: 18px;} .lto-btn {margin-top: 20px;} .webinar-for-boxs .milestones-card {width: 30%; border-radius: 9px;} .webinar-for-boxs .milestones-card img {width: 24px; height: 24px;} .webinar-for-boxs .milestones-card h3 {font-size: 18px; margin: 12px 0 0 0 !important;} .webinar-for-boxs .milestones-card p {font-size: 10px;} .webinar-for-boxs .cards-body {gap: 8px; margin: 26px 0 10px 0px;} .webinar-for-boxs .media-coverage-main {padding: 1px 11px 18px 11px !important; border-radius: 22px; } .webinar-for-boxs .media-coverage-main img:last-child {border-radius: 8px;} .lto-hoora-cities .main-body .jumbotron h1 {font-size: 17px;} .lto-hoora-cities .main-body .jumbotron p {font-size: 8px; margin: 13px 0 0 0; } .lto-hoora-cities .container .col-12 {padding: 0px;} .lto-hoora-cities button {width: fit-content;} .pm-contact-form .main-form .offering-card{box-shadow: none !important; padding: 0 !important;} .pm-contact-form .main-form .offering-card .workshop-points ul li {font-size: 12px !important; padding-left: 25px !important;} .pm-contact-form .main-form .contact-form .workshop-points .custom-bullets li::before{width: 15px; height: 15px;} .pm-contact-form .main-form .offering-card .card-amount h3 {font-size: 24px;} .pm-contact-form .main-form .offering-card .card-amount h2{font-size: 22px !important; line-height: 20px; } .pm-contact-form .main-form .offering-card .card-amount h2:last-child{font-size: 22px !important; line-height: 20px;} .pm-contact-form .main-form .offering-card .offer-heading { font-size: 28px; line-height: 30.01px;} .lto-form .wpcf7-form > p {display: flex; flex-direction: column-reverse;} .lto-form .wpcf7-list-item label {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; margin-top: 10px; } .lto-form .wpcf7-list-item label input{width: 20px; height: 20px;} .lto-form .wpcf7-list-item label span{font-family: 'Montserrat-SemiBold'; font-size: 16px;} #registrationForm .radio-offer .discount-radio .discount-card {font-size: 8px;} #registrationForm .radio-offer {gap: 0px !important;} #registrationForm .radio-offer label { width: 39% !important; margin: 2px !important; font-size: 10px; gap: 5px; padding: 13px 3px !important;} #registrationForm .radio-offer label input[type="radio"] {font-size: 80%;} .benefits-of-car-care h1 {width: fit-content;padding: 20px 0px;margin: 0 10px;position: relative;font-size: 120%;text-align: center;line-height: 28px;} .benefits-of-car-care .body-content img { width: 100%; margin: 30px 0px 20px 0px;} .benefits-of-car-care .more-benefits .main-body .main-body-card a {width: 205px;} .customer-review-page {padding: 20px 10px;} .customer-review-page h5 {font-size: 18px;} .customer-review-page .review-item .review-header .review-comment{font-size: 14px; } .customer-review-page .review-item .review-header .review-date{ color: #999; font-size: 12px; } .b2c-banner .banner-heading h1 { font-size: 155%; line-height: 31.26px;} .b2c-banner .banner-heading h5 { font-size: 18px; line-height: 20.26px; margin: 19px 0px 20px 0px;} .b2c-banner .banner-heading .download-btn{padding: 22px 30px; width: 100%;} .b2c-banner .container{padding: 0px 12px; display: flex; flex-direction: column-reverse;} .b2c-banner .banner-img{position: unset;} .b2c-banner .banner-img img{width: 90%;} .b2c-banner .banner-heading .download-btn p{font-size: 18px;} .b2c-count-overall {margin: 40px 0;} .b2c-count-overall .small-box-body {border-radius: 16px; padding: 22px 25px 18px 25px; width: 48%; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0px 4px 4px 0px #0000001a; border: 1px solid #0000001a; } .b2c-count-overall .small-box-body .small-card-text {line-height: 17px;} .b2c-count-overall .small-box-body .small-card-text .big-text{font-size: 18px; font-family: 'Montserrat-Bold';} .b2c-count-overall .small-box-body .small-card-text .small-text {font-size: 14px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-text .small-text-2 {font-size: 14px; font-family: 'Montserrat-SemiBold'; line-height: 17px;} .b2c-count-overall .small-box-body .small-card-text .extra-small-text {font-size: 10px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-icon{width: 50px; height: 50px;} .our-services-2 .text-heading h2 {font-size: 22px; font-family: 'Montserrat-SemiBold'; color: var(--color-white); } .pm-partner-success-stories-2 .video-body .video-card p{font-size: 14px; line-height: 20.5px;} .b2c-why-choose-us .heading-text{padding: 20px 0 0 0;} .b2c-why-choose-us .heading-text .text-center {font-size: 24px; font-family: 'Montserrat-SemiBold'; } .b2c-why-choose-us .wcu-body {display: flex; justify-content: center; gap: 0px; flex-wrap: wrap; } .b2c-why-choose-us .wcu-body .box-1{text-align: center; padding: 0px 10px; width: 47%;} .b2c-why-choose-us .wcu-body .box-1 .img-bg{height: 56%;} .b2c-why-choose-us .wcu-body .box-1 .img-bg img{width: 100%;} .b2c-why-choose-us .wcu-body .box-1 h3{font-size: 16px; margin: 0px 0px 12px 0px;} .b2c-why-choose-us .wcu-body .box-1 p{font-size: 12px; line-height: 16px; padding: 0px; margin: 0px;} .pm-partner-success-stories-2 .scroll-video::-webkit-scrollbar {width: 10px;background-color: #DFE3E7;border-radius: 50px;height: 7px;} .pm-partner-success-stories-2 .scroll-video::-webkit-scrollbar-thumb {background-color: #a39393;border-radius: 50px;} .pm-partner-success-stories-2 .scroll-video{overflow: overlay; padding: 5px 0px;} .pm-partner-success-stories-2 .video-body .video-card{padding: 25px 20px 25px 20px; box-shadow: 0px 0px;} .pm-partner-success-stories-2 .video-body .video-card p {font-size: 12px; line-height: 18.5px; } .pm-partner-success-stories-2 .video-body .video{height: fit-content;} .solution-info {background-color: var(--color-black-pearl); padding: 60px 0px;} .solution-info .body-info{color: var(--color-white);} .solution-info .body-info h2{font-size: 18px; font-family: 'Montserrat-SemiBold'; margin-bottom: 25px;} .solution-info .body-info p, .solution-info .body-info ul li {font-family: 'Montserrat-Medium'; font-size: 14px; margin: 0;} .solution-info .body-info p strong, .solution-info .body-info ul li strong {font-family: 'Montserrat-Bold'; } .service-book .text-heading {font-size: 28px; font-family: "Montserrat-SemiBold"; text-align: center; padding: 20px 0px; } .service-book .card {background-color: #FFF49D; border-radius: 17px; border: 0px; text-align: center; height: fit-content } .service-book .card .card-body .card-title { font-size: 18px; font-family: "Montserrat-SemiBold"; } .service-book .card .card-body .card-text { font-size: 12px; line-height: 17px; font-family: "Montserrat-Medium"; } .pm-frequently-questions-b2c .text-heading{font-size: 24px;} .hoora-city-availability .text-heading {font-size: 24px;} .hoora-city-availability .city-body {flex-wrap: wrap; } .hoora-city-availability .city-box{width: 140px; height: 140px; } .hoora-city-availability .city-box p{margin: 0px;} .button-gradient{font-size: 16px; background: var(--black) !important; color: var(--color-white); padding: 18.4px 95.5px; width: 100%; } .first-autocare-app-banner {padding: 15px 0px;} .first-autocare-app-banner .main-heading {font-size: 150%;} .first-autocare-app-banner .iframe-container .video-container {padding-bottom: 56% !important;} .first-autocare-app-banner .banner-heading h2 {margin-top: 1rem; font-size: 30px; line-height: normal; letter-spacing: -1px; text-align: center } .first-autocare-app-banner .banner-heading a{width: 100%; text-align: center; font-size: 16px; margin: 15px 0px 20px 0px } .investment-overview .main-card-body .card .card-body {gap: 5px;} .investment-overview .main-card-body .card .card-body img{width: 70%;} .investment-overview .main-card-body .card .card-body .card-title {font-size: 14px; font-family: 'Montserrat-Medium'; margin: 0; line-height: 22px; letter-spacing: -1px; } .investment-overview .main-card-body .card .card-body .card-text {font-size: 18px; font-family: 'Montserrat-SemiBold'; margin: 0; line-height: 22px; letter-spacing: -1px; } .choose-investment-2 {padding: 20px 0px !important;} .choose-investment-2 .main-body .investment-cards{flex-wrap: nowrap !important;} .choose-investment-2 .main-body .investment-cards img{width: 100%;} .benefits-cards-2 .main-section h2 {font-size: 125%;} .available-cities{padding: 20px; border-radius: 8px; } .available-cities .city-info h2 {font-size: 12px; margin-bottom: 18px; } .available-cities .city img {height: 48px; margin-bottom: 5px;} .available-cities .map img{width: 100%; max-width: 100%;} .available-cities .city span{font-size: 6px;} .investment-overview-2 .main-card-body .card {padding: 22px 18px;} .investment-overview-2 .main-card-body .card .card-body {gap: 0px;} .investment-overview-2 .main-card-body .card .card-body img{width: 70%;} .investment-overview-2 .main-card-body .card .card-body .card-text {line-height: 12px; font-size: 12px;} .investment-overview-2 .main-card-body .card .card-body .card-text, .investment-overview-2 .main-card-body .card .card-body .card-title span {font-size: 10px; line-height: 12px; } .pm-partner-success-stories-3 .heading-text .text-center{font-size: 24px; font-family: "Montserrat-Bold";} .faq-show-ans h2 {font-size: 24px; margin-bottom: 20px; } .faq-show-ans .faq-item h3 {font-size: 18px;} .faq-show-ans .faq-container {padding: 35px 35px 25px 35px;} .webinar-for-boxs-2 .cards-body{flex-direction: column;} .webinar-for-boxs-2 .media-coverage-main .media-coverage-card{width: 100% !important;} .pm-contact-form .main-form .contact-form #submit-partner-manager-sv {line-height: 22px;} .pm-contact-form .main-form .contact-form .refundable-text {margin: 0px 0px 15px 0px; text-align: center; font-size: 12px;} .pm-onboarding-form .main-form{padding: 0 0px 64px 0px;} .pm-onboarding-form .main-form .contact-form {border-radius: 16px;} .pm-onboarding-form .contact-form .wpcf7 .lable-heading {font-size: 16px !important; font-family: "Montserrat-SemiBold";} .pm-onboarding-form .contact-form form {padding: 0 0px;} .pm-onboarding-form .contact-form .wpcf7 .form-control::placeholder {font-size: 12px !important;} .pm-onboarding-form .contact-form form .label-sub-heading {font-size: 12px;} .pm-onboarding-form .plan-option input[type="radio"]{width: 14px; height: 14px;} .pm-onboarding-form .label, .pm-onboarding-form .earning-badge .sub-value{font-size: 12px;} .pm-onboarding-form .value, .pm-onboarding-form .earning-badge .value{font-size: 14px;} .pm-onboarding-form .earning-badge .label {margin-bottom: 1px;} .book-with-whats-app .container {padding: 28px 20px ;} .book-with-whats-app .container .banner-img {display: none;} .book-with-whats-app .container .banner-heading h1 {font-family: "Montserrat-ExtraBold"; } .book-with-whats-app .container .banner-heading .banner-img {align-items: center; justify-content: center; display: flex !important;} .book-with-whats-app .container .banner-heading a {display: flex;justify-content: center;flex-direction: column;align-items: center;width: 100%;} .book-with-whats-app .container .banner-heading p {margin: 12px 0px 15px 0px;} .book-with-whats-app .container .banner-heading .live-container {border-radius: 7px; height: 46px; box-shadow: none; } .book-with-whats-app .container .banner-heading .live-container span {font-size: 16px; } .promotion-program-banner h1{font-size: 22px; line-height: 28px; padding: 0px 0px 30px 0px; } .promotion-program-banner .banner-heading {margin: 60px 0px 0px 0px;} .promotion-program-banner .banner-heading h2 {font-size: 24px; line-height: 37px; margin-bottom: 20px; } .promotion-program-banner .reverse-row-1 > div {justify-content: center; text-align: center; gap: 20px;} .promotion-program-banner .iframe-container::before{bottom: -27px;} .promotion-program-banner .iframe-container::after{bottom: -14px;} .promotion-program-banner .features{border-radius: 0px; border-width: 3px 3px 0;} .promotion-program-banner .features-container {padding: 0px;} .promotion-program-banner .feature-item {min-width: 60px; gap: 3px} .promotion-program-banner .feature-icon {width: 40px; height: 40px; } .promotion-program-banner .feature-text {font-size: 12px;} .what-you-do-hoora-promoter h2, .who-can-apply h2 {font-size: 24px;} .who-can-apply .content-body { overflow: overlay; margin: 0 0px 0px 37px !important;} .who-can-apply .content-body .scroll-video {width: 1059px;display: flex;} .who-can-apply .content-body p{width: 550px; margin-right: 15px; font-size: 14px; line-height: 20px;} .why-join-hoora-promoter .video-body {margin: 20px 0;} .why-join-hoora-promoter .video-body .video {height: 140px;} .why-join-hoora-promoter .video-body .video-card p{font-size: 14px;line-height: 15.5px;} .why-join-hoora-promoter .video-body .video-card {border-radius: 8px !important; box-shadow: none;} .why-join-hoora-promoter .scroll-video{margin-top: 15px;} .why-join-hoora-promoter {padding: 20px 0px; background: transparent;} .why-join-hoora-promoter .heading-text h2 {line-height: 28px; font-size: 24px;} .promotion-program-banner .reverse-row-1 {flex-direction: column-reverse !important; padding: 0px 20px;} .promotion-program-banner .reverse-row-1 .col-md-6 {width: 100%;} .investment-overview-mobile-view {overflow: overlay; padding-bottom: 20px;} .investment-overview-mobile-view .investment-overview-2 .main-card-body {width: fit-content;} .investment-overview-mobile-view .investment-overview .main-card-body {justify-content: center; padding: 0 35px} .investment-overview-mobile-view .investment-overview-2 .main-card-body .card, .investment-overview-mobile-view .investment-overview-2 .main-card-body .card .card-body .count-text {border-radius: 12px;} .investment-overview-mobile-view .investment-overview-2 .main-card-body .card {width: 225px;} .investment-overview-mobile-view .investment-overview-2 .main-card-body .card .card-body {gap: 10px} .investment-overview-mobile-view .investment-overview-2 .main-card-body .card .card-body .count-text{ padding: 8px 23px; width: 100%;} .investment-overview-mobile-view .investment-overview-2 .main-card-body .card .card-body .count-text p{font-size: 12px; line-height: 18px;} .promotion-page-form .main-form .contact-form form .wpcf7-form {padding: 0px 12px !important;} .promotion-page-form .main-form .contact-form {margin: 0 12px;} .promotion-page-form .main-form .contact-form form h6{margin-top: 20px; text-align: center; font-family: "Montserrat-ExtraBold" !important;} .promotion-page-form .main-form .contact-form form #submit-partner-manager-sv-2 {border-radius: 4px; font-size: 14px; font-family: "Montserrat-SemiBold";} .promotion-page-form .main-form .contact-form form .hoora-promoter-form-img { background-image: url("../img/hoora-promoter-form-small.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 149px;} .promotion-page-form .main-form {padding: 0px 0px 0px 0px;} .promotion-city .investment-overview-2 .main-card-body .card {padding: 8px 8px 8px 14px} .promotion-program-banner-2 .container {padding-top: 20px;} .promotion-program-banner-2 h1, .hoora-vs-other .heading h2, .promotion-city-2 .available-cities .city-info h2, .p-success-stories h2 {font-size: 28px; margin: 0px;} .promotion-program-banner-2 .banner-heading h2{margin: 0px 0px 30px 0px; } .promotion-program-banner-2 .feature-icon {width: 40px;} .promotion-program-banner-2 .info-banner .stat-item .highlight{font-size: 14px;} .promotion-program-banner-2 .info-banner .stat-item p{font-size: 12px;} .promotion-program-banner-2 .info-banner .stat-item .image-container {height: 70px;} .promotion-program-banner-2 .info-banner .stat-item {justify-content: start;} .promotion-program-banner-2 .banner-heading {text-align: center; margin-bottom: 35px;} .promotion-program-banner-2 .banner-heading a {padding: 12px 53px; border-radius: 7px; font-family: "Montserrat-SemiBold"; font-size: 18px;} .hoora-vs-other .main-comparison-body .brand-column h3 {font-size: 14px;} .hoora-vs-other .main-comparison-body .comparison-card {padding: 20px;} .hoora-vs-other .main-comparison-body .nav-tabs .nav-link {font-size: 10px;} .hoora-vs-other .main-comparison-body .brand-column {padding: 5px} .hoora-vs-other .main-comparison-body .feature-list li {padding: 7px ; border-bottom: 0px; text-align: left; font-size: 12px;} .hoora-vs-other .main-comparison-body .brand-column .first-feature li {padding: 9px;} .hoora-vs-other .main-comparison-body .feature-list {padding: 12px 7px;} .hoora-vs-other .main-comparison-body .feature-list li img {width: 10px; height: 10px;} .support-from-hoora a, .media-coverage-container a {font-size: 22px; margin-top: 20px; padding: 9px 37px; } .p-success-stories .main-body{margin: 28px 0px; padding: 20px 10px;} .p-success-stories .grid-container .card-name {font-size: 16px;} .p-success-stories .grid-container .card-text {font-size: 12px; margin: 0px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 4.5em; line-height: 1.5em;} .media-coverage-container .media-coverage-main {overflow-x: scroll;} .media-coverage-container .media-coverage-main .cards-body {display: flex; flex-direction: row; width: 170%; flex-wrap: nowrap;} .media-coverage-container .media-coverage-card-body {padding: 20px !important; border-radius: 8px !important;} .step-form h3 {font-size: 22px; line-height: 30px;} .step-form .discount-with-date {font-size: 28px;} .join-car-wash-partner .banner-heading h2 {font-size: 33px; line-height: 38px;} .why-do-partner .main-body .content-box {padding: 9px;} .steps-started-journey {margin-top: 5rem;} .steps-started-journey .grid-box{overflow-x: clip; border-radius: 0px;} .steps-started-journey .grid-box .img-box img { width: 100%; margin-top: -46px; margin-left: -29px;} .steps-started-journey .grid-box .steps-body {margin-left: -28px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box {margin-bottom: 6px; gap: 10px; align-items: start;} .steps-started-journey .grid-box .steps-body .steps-container .step-box p {font-size: 14px;margin-bottom: 2px;line-height: 17px;} .steps-started-journey .grid-box .steps-body button {border-radius: 10px;padding: 5px 11px;margin-left: 24px;} .steps-started-journey .grid-box .steps-body h2 { margin-bottom: 14px; margin-top: 20px; font-size: 22px;} .join-partner-media-coverage .media-coverage-main .cards-body {width: 160%;} .join-partner-media-coverage .media-coverage-main .cards-body .small-card {padding: 10px 10px 6px 10px;font-size: 10px;width: 93%;border-top-right-radius: 10px;border-top-left-radius: 10px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;} .join-job-comparison .main-comparison-body .comparison-table {width: 190%;} .join-partner-stories .heading-text h2{font-size: 24px !important; text-align: start !important; padding: 0 12px; line-height: 28px;} .join-partner-stories .scroll-video .video-body {width: 403% !important; padding: 0px;} .join-partner-stories .scroll-video .video-body .video-card {height: 582px;} .join-partner-stories .scroll-video .video-body .video-card .video-container {border-radius: 24px;} .join-hoora-promoter .banner-heading .text-heading-2 { font-size: 18px; margin-top: 24px; line-height: normal;} .join-hoora-promoter .cta p {font-size: 14px;} .join-car-wash-partner .banner-heading h2 {font-size: 29px !important; line-height: 30px !important;} .join-hoora-promoter .reverse-row-1 {padding: 10px 0px 12px 0px !important;} .join-hoora-promoter .features .small-card { font-size: 14px; line-height: 14px; text-align: start; height: 56px;} .benefits-join-hoora-promoter .scroll-container {overflow: scroll;} .benefits-join-hoora-promoter .scroll-container .main-body {width: fit-content;} .benefits-join-hoora-promoter .scroll-container { overflow-x: auto; padding-bottom: 16px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; } .benefits-join-hoora-promoter .benefits-grid { display: flex; grid-template-columns: none; gap: 16px; padding: 4px; min-width: max-content;} .benefits-join-hoora-promoter .benefit-card { width: fit-content; flex-shrink: 0; border-radius: 10px; padding: 18px; } .benefits-join-hoora-promoter .section-header h2 {font-size: 24px;} .benefits-join-hoora-promoter .icon-container {width: 60px; border-radius: 5px; height: 60px; } .benefits-join-hoora-promoter .icon-container img{width: 22px; height: 22px;} .benefits-join-hoora-promoter .benefit-title {font-family: "Montserrat-Bold" !important; font-size: 18px;} .who-can-apply-2 {background-color: #FFF9EF; padding: 52px 0px;} .who-can-apply-2 h2 {text-align: start; font-size: 24px; margin-bottom: 18px;} .who-can-apply-2 ul li, .who-can-apply-2 p {font-size: 18px; margin-bottom: 8px; font-family: "Montserrat-Medium";} .who-can-apply-2 p {margin-left: 1rem;} .steps-started-journey-2 .grid-box{background-color: #F9E7CA; border-radius: 8px; padding: 10px 0px 0px 18px;} .steps-started-journey-2 .grid-box .steps-body {margin-left: 0px; width: 130%;} .steps-started-journey-2 .grid-box .steps-body .steps-container {width: 155% ; margin-left: 12px;} /* .steps-started-journey-2 .grid-box .img-box img {margin-left: 65px !important; width: 130% !important;} */ .jph-media p {text-align: start; padding-left: 1rem;} .steps-started-journey-2 .grid-box .img-box img { margin-left: 73px !important; width: 94% !important; margin-top: 12px !important;} .steps-started-journey-2 {margin-top: 0rem;} .steps-started-journey-2 .grid-box .steps-body h2 {margin-top: 0px !important;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box ul li {font-size: 10px; } .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box ul {padding: 0px; margin: 10px 0px 0px 12px; width: 54%; } .jph-step-form h2 {font-size: 24px; text-align: start;} .jph-stories .scroll-video .video-body{width: fit-content !important;} .roi-benefits-cards {padding: 30px 0px;} .roi-benefits-cards .main-body .card {width: 100%;} .roi-benefits-cards .roi-scroll-container .scroll-cards .main-body {flex-direction: column;} .roi-benefits-cards .main-body .card .card-body {padding: 38px 28px !important;} .roi-benefits-cards .card-body .card-img img {width: 55px;} .roi-benefits-cards .main-body {padding: 0px;} .roi-pm-nationwide-impact .container .card-body-main .card-body {gap: 0px 14px;} .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text {margin-top: 5px;} .roi-pm-nationwide-happy-man {justify-content: center; display: flex; align-items: center;} .roi-pm-nationwide-impact {padding: 50px 0px;} .roi-pm-nationwide-impact .heading-text h6{margin-bottom: 14px;} .roi-8months-choose-investment .main-body .investment-cards .investment-plan-btn {font-size: 18px; padding: 24px 50px;border-radius:8px;} .roi-banner-8months .banner-heading {padding: 0px;} .roi-8months-apply-now .banner-heading a {margin-top: 45px;} .roi-pm-nationwide-impact .roi-pm-nationwide-happy-man {position: unset;} .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line, .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text .line {display: none;} .roi-pm-nationwide-impact .container .card-body-main .card-body .small-card {width: 60px; height: 60px;} .roi-pm-nationwide-impact .container .card-body-main .card-body {grid-template-columns: 0.5fr 2.8fr;} .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text h2 {font-size: 18px;} .roi-pm-nationwide-impact .container .card-body-main .card-body .card-text p {font-size: 14px; line-height: 20.72px;} .faq-roi-8months {padding: 58px 0px;} .faq-roi-8months .faq-list {padding: 0px;} .faq-roi-8months h1{font-size: 24px; margin-bottom: 34px;} .faq-roi-8months{padding: 45px 0px;} .faq-roi-8months .faq-question h3 {font-size: 14px;} .roi-pm-nationwide-impact {padding: 50px 0px 0px 0px;} } .steps-started-journey br{display:none;} @media (max-width: 576px) { header .navbar .logo {width: 40%; margin: 0;} header .navbar .logo img {width: 70%;} header .navbar a button { font-weight: 500; font-size: 12px !important; background: #000000; border-radius: 0.375rem; padding: 0.3rem 0.7rem !important;} .banner .text-heading h2{font-size: 1.8rem; line-height: 1.4rem;} .banner .text-heading .frame .center .carousel .change_outer .change_inner .element{font-size: 1.8rem; line-height: 2.75rem; color: var(--dark);} .banner .text-heading p{font-size: 1.2rem; line-height: 1.5rem;margin-top: 1rem;} .banner .text-heading img{width: 158.94px; height: 50.05px;} .find-us .text-heading h2{font-family: 'Montserrat-SemiBold'; font-weight: 600; font-size: 14px; line-height: 17px; margin-bottom: 1rem;} .find-us .text-heading marquee p{font-size: 20px; line-height: var(--fs-24) ;} .find-us .text-heading marquee p small{font-size: 14px; line-height: 17px; bottom: 1.5rem;} .find-us .text-heading p{font-size: 12px; line-height: 15px;} .car__washing_Features .text-heading h2{font-size: 29px; line-height: 35px; text-align: center;} .car__washing_Features .text-heading ul{display: flex;flex-direction: column;justify-content: center;align-items: center;} .car__washing_Features .text-heading li{font-size: 20px; line-height: var(--fs-24) ;} .how_it_works .steps-circles .steps {width: 8.4rem;height: 8.4rem;} .how_it_works .steps-circles .service_img img{width: 25%; } .how_it_works .steps-circles .bookslot_img img{width: 50%;} .how_it_works .steps-circles .doorstepcare_img img{width: 50%; } .how_it_works .steps-circles .text-heading h2{font-size: 32px;line-height: 39px;} .how_it_works .steps-circles .text-heading h6 {font-size: 24px; line-height: 29px;} .how_it_works .steps-circles .text-heading p { font-size: 14px; line-height: 17px; color: #3C3C3C;} .how_it_works .steps-circles .text-heading{padding-top: 0rem;} .people_saying .text-heading h2{font-size: 32px; line-height: 39px;} .people_saying .card .card-body p{font-size: 18px; line-height: 22px;} .people_saying .card h5{font-size: 20px; line-height: 32px;} .people_saying .card {width: 100%;} .download_app .text-heading h2{font-size: 32px; line-height: 39px;} .download_app .text-heading .download_img img{width: auto; height: 53.79px;} /* ================================== SERVICES ===================================== */ .app_features .app_img {display: flex;justify-content: center;align-items: center;} .app_features .j-c-c, .app_features .text-heading {justify-content: center !important; text-align: center;} .app_features .text-heading h1{font-size: 36px; line-height: 44px;} .app_features .text-heading p{font-size: 20px; line-height: 24px; } .app_features .text-heading p br{display: none !important;} .free_features .text-heading h2{font-size: 36px; line-height: 44px; color: var(--black);} .free_features .text-heading .card p{font-size: 20px; line-height: 24px; text-align: center;} .frequntly-questions .text-heading h2{font-size: 36px; line-height: 44px;} .frequntly-questions .accordion .accordion-item h2 button {font-size: 20px; line-height: 24px;} .frequntly-questions .accordion .accordion-item .accordion-collapse {font-size: 18px; line-height: 22px;} .frequntly-questions .offerings_points h2{font-family: 'Montserrat-Bold'; font-weight: 700;font-size: 36px;line-height: 44px;} .frequntly-questions .offerings_points ul li {font-family: 'Montserrat-SemiBold'; font-weight: 600;font-size: 20px;line-height: 24px;} /* ================================== FRANCHISE ===================================== */ .banner .text-heading .icon-btn {font-size: 18px; line-height: 22px; height: 37px;} /* .banner .text-heading .btn-franchise{width: 60%;} */ .contact-form .heading-form h2 {font-size: 24px;line-height: 32px;} .contact-form .heading-form p, .contact-form .heading-form strong {font-size: 14px;line-height: 18px;} .contact-form .heading-form span {font-size: 14px;line-height: 18px;letter-spacing: 0.03em;} .contact-form .main-form h2 {font-size: 24px;line-height: 28px;} .contact-form .main-form p {font-size: 13px; line-height: 14px;} .our_services .responsive .card{margin: 0 1.5rem !important;} .our_services .side-line, .our_services .side-line2 {display: none !important;} .our_services .text-heading h2{font-size: 36px;line-height: 44px;} .free_features .text-heading .card{ height: auto;} .wpcf7 .form-control{padding: 0.9rem 0.8rem ;} .wpcf7 .form-control::placeholder {font-size: 12px;line-height: 16px;letter-spacing: 0.03em;} .wpcf7 .wpcf7-submit {width: 100%; height: 56px;border-radius: 12px;background: linear-gradient(82deg, #FFC117 0%, #FFE300 58.74%); font-family: 'Montserrat-Bold'; font-size: 16px; font-weight: 700; line-height: normal; color: #111417 !important; text-wrap: balance; } /* ========================== ABOUT US ================================ */ .about_us .text-heading h1, .about_us .text-heading h2{font-size: 36px; line-height: 44px;} .about_us .text-heading p{font-size: 14px; line-height: 22px;} footer .text-top-heading .small-block {display: flex !important;flex-direction: column !important;gap: 1.25rem;} .changing_keywords{height: 50px !important;position:relative;display: inline-block;width: 100%;} .cards-row .card, .cards-row .icons-assign{width: 100%;} .history-table .table_history table thead tr th , .history-table .table_history table tbody tr td, .history-table .table_history table tbody tr td button {font-size: 12px;} .main-dashboard .nav-pills .nav-link{font-size: 12px;} .new-cards-ui .new-cards-row .new-cards-body{color: white !important; padding: 15px 10px;width: 100%;} .new-cards-ui .new-cards-row .new-cards-Collection{padding: 15px 10px;} .new-cards-ui .new-cards-row .new-cards-body p, .new-cards-ui .new-cards-row .new-cards-Collection p{font-size: 12px; margin: 0;font-weight: bold;} .new-cards-ui .new-cards-row .new-cards-body h6, .new-cards-ui .new-cards-row .new-cards-Collection h6{font-size: 14px;font-weight: bold;} .new-cards-ui .new-cards-row .new-cards-body button, .new-cards-ui .new-cards-row .new-cards-Collection button{font-size: 10px !important;} .dashboard-header .navbar > .container-fluid{padding: 0 !important;} .dashboard-header .navbar .navbar-brand{text-align: right;} .exclusive_webinar_cards .main-cards {flex-wrap: wrap; justify-content: center; gap: 10px !important;} .exclusive_webinar_cards .cards {width: 120.844px; height: 120px; background: #FFF; box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.11); gap: 3px; padding: 10px;} .exclusive_webinar_cards .cards h6{font-weight: 700; font-size: 12px; color: #22282F;line-height: normal;} .exclusive_webinar_cards .cards img{width: 24px !important;} .exclusive_webinar_cards .register-now-btn button{width: 220px; height: 56px;border-radius: 12px;background: linear-gradient(82deg, #FFC117 0%, #FFE300 58.74%); font-family: 'Montserrat-Bold'; font-size: 16px; font-weight: 700; line-height: normal; padding: 0 10px;} .happy_entrepreneurs_cards .text-heading h2{color: #000; text-align: center; font-family: 'Montserrat-Bold'; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal;} .happy_entrepreneurs_cards .review-card{width: 100%; height: 318px; flex-shrink: 0; border-radius: 26px;background: #FFF;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 50px 45px; justify-content: space-between !important;} .happy_entrepreneurs_cards .review-card p{color: #000;font-family: 'Montserrat-Light';font-size: 12px;font-style: normal;font-weight: 400;line-height: normal; } .happy_entrepreneurs_cards .review-card .customer-name h6{font-family: 'Montserrat-Bold';font-style: normal;font-weight: 700; font-size: 16px; line-height: normal;} .happy_entrepreneurs_cards .review-card .customer-name p{font-family: 'Montserrat-SemiBold';font-style: normal;font-weight: 500;font-size: 12px;} .channel-hero-banner .text-heading{text-align: center; position: absolute; bottom: 75px; padding: 0 20px; left: 0; right: 0; } .channel-hero-banner .text-heading h1{font-size: 2.5rem;} .channel-hero-banner .text-heading p{font-size: 12px;line-height: 18px;margin: 5px;color: #67788C;} /* New PM with us */ .pm-nationwide-impact .container .card-body-main {gap: 1px 0} /* .pm-nationwide-impact .heading-text h6{font-size: 16px; line-height: 19px;} .pm-nationwide-impact .heading-text p{font-size: 10px; line-height: 12.5px;} */ .pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line, .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line{padding: 10px 0 0 0 ;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after{ display: flex; align-items: center; justify-content: center; content: "-"; background-color: #FFE300; border-radius: 50%; width: 12px; height: 12px; color: #FFE300; position: absolute; right: -17px; border: 0px solid #FAFAFB; top: 40%;} .pm-nationwide-impact .container {padding: 20px 0;} .pm-nationwide-impact .container .card-body-main .card-body {gap: 0px 5px} .pm-nationwide-impact .container .card-body-main .card-body .small-card{width: 35px; height: 35px;} .pm-nationwide-impact .container .card-body-main .card-body .small-card img{width: 20px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text h2{font-family: 'Montserrat-Bold';font-size: 14px;font-weight: 600;line-height: 16.57px;margin: 0;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p { font-size: 11px;font-weight: 500;line-height: 11.72px;} .pm-nationwide-impact .container{grid-template-columns: 0fr 3.9fr 0fr 2.5fr;} .pm-frequently-questions{padding: 30px 0;} .pm-frequently-questions .heading-text .heading{padding: 0px 8px;} .pm-contact-form #submitBtnPartnerWithUs{font-size: 16px; line-height: 22px; width: 100% !important; text-wrap: balance;} .pm-contact-form .main-form .discount-with-date {font-size: 16px; font-weight: 600; line-height: 24.54px;} .choose-investment .main-body .text-heading h3 { font-size: 14px;} .choose-investment .main-body .investment-cards{ flex-wrap: wrap; gap: 12px; justify-content: space-between;} .choose-investment .main-body .investment-cards .boxs {width: 48%;} .choose-investment .main-body .investment-cards .boxs p{font-size: 16px;margin: 0 0 3px 0 ;} .choose-investment .main-body .investment-cards .boxs h5{font-size: 25px; margin: 0 0 13px 0;} .choose-investment .main-body .investment-cards .boxs button{display: flex; align-items: center; gap: 8px; margin: 0 auto; font-size: 12px;} .choose-investment .main-body .investment-cards .boxs button svg{ width: 15px !important; height: 15px !important;} /* ======== B2C =============== */ .b2c-why-choose-us .wcu-body .box-1 .img-bg{height: 46%;} .service-book .text-heading {font-size: 24px; font-family: "Montserrat-SemiBold"; text-align: center; padding: 20px 0px; } .service-book .card {background-color: #FFF49D; border-radius: 17px; border: 0px; text-align: center; height: fit-content } .service-book .card .card-body .card-title { font-size: 13px; font-family: "Montserrat-SemiBold"; } .service-book .card .card-body .card-text { font-size: 10px; line-height: 13px; font-family: "Montserrat-Medium"; } /* ======== B2C END =============== */ /* ======== # 1 Indias Autocare App =============== */ .investment-overview .main-card-body{padding: 20px 8px; align-items: end;} .investment-overview .main-card-body .card .card-body {gap: 5px; flex-direction: column; text-align: center;} .investment-overview .main-card-body .card .card-body img{width: 50%;} .investment-overview .main-card-body .card .card-body .card-title {font-size: 13px; font-family: 'Montserrat-Medium'; margin: 0; line-height: 22px; letter-spacing: -1px; } .investment-overview .main-card-body .card .card-body .card-text {font-size: 16px; font-family: 'Montserrat-SemiBold'; margin: 0; line-height: 15px; letter-spacing: -1px; } .benefits-cards-2 .main-body .card {padding: 0px !important;} .benefits-cards-2 .main-body{margin: 10px 0px;} .benefits-cards-2 .main-section h2 {margin-bottom: 24px;} .investment-overview-2 .main-card-body {gap: 10px;} .investment-overview-2 .main-card-body .card {border-radius: 5px; padding: 14px 10px;} .investment-overview-2 .main-card-body .card .card-body img{width: 70%;} .investment-overview-2 .main-card-body .card .card-body div:first-child {width: 30%;} .investment-overview-2 .main-card-body .card .card-body {flex-direction: row; gap: 0px; text-align: start;} .investment-overview-2 .main-card-body .card .card-body .card-title {font-size: 14px; letter-spacing: normal; line-height: 20px; } .investment-overview-2 .main-card-body .card .card-body .card-text, .investment-overview-2 .main-card-body .card .card-body .card-title span {font-size: 8px; line-height: 8px; letter-spacing: normal; } .faq-show-ans .faq-item h3 {font-size: 16px;} .faq-show-ans .faq-item p {font-size: 14px; margin-left: 15px; } .faq-show-ans .faq-container {padding: 20px 20px 25px 20px;} .pm-partner-success-stories-3 .video-body {padding: 0px; gap: 8px !important} .pm-partner-success-stories-3 .scroll-video .video-body {width: 860px;} .benefits-cards-2 {padding: 36px 0px 0px 0px !important;} .pm-onboarding-form .main-form p{line-height: 22px;} .pm-onboarding-form .plan-option input[type="radio"]:checked::after{width: 8px; height: 8px; box-shadow: 0 0 0px 2px #fff; } /* ======== # 1 Indias Autocare App END =============== */ .blog-content .choose-investment-2 .main-body .investment-cards p {font-size: 14px;} .cta-container p {font-size: 16px} .cta-container ul {padding-left: 20px} .cta-container ul li {font-size: 12px} .cta-container button {padding: 5px 19px !important; font-size: 14px; width: fit-content; border-radius: 8px;} .cta-container .cta-button {width: 100%; text-align: center} .find-us .scroll-container .city-group p{font-size: 12px; padding: 0px 12px; margin: 0px;} .find-us .city-group{gap: 30px;} .pm-contact-form .contact-form .wpcf7 .radio-ans input[type="radio"] { width: 12.5px; height: 12px; border-radius: 50px;} .pm-contact-form .contact-form .wpcf7 .radio-ans input[type="radio"]:checked {box-shadow: 0 0 0 1.5px #333;} .pm-contact-form .contact-form .wpcf7 .radio-ans input[type="radio"]:checked::after { width: 4px; height: 4px; border-radius: 100%; box-shadow: 0 0 0px 1px #fff;} .select-box .selected-text {font-size: 12px;color: #94a1b0;font-family: "Montserrat-Bold";} .who-can-apply {padding: 20px 0px;} .who-can-apply h2 {margin-bottom: 0px;} .what-you-do-hoora-promoter h2, .who-can-apply h2, .why-join-hoora-promoter .heading-text h2 {font-size: 22px;} .why-join-hoora-promoter .scroll-video {margin: 0px;} .why-join-hoora-promoter {padding: 28px 0px;} .why-join-hoora-promoter .video-body{margin: 0px 0px 20px 0px;} .promotion-city .available-cities .city-info h2 {font-size: 22px; margin-bottom: 30px;} .what-you-do-hoora-promoter h2 {margin-bottom: 20px;} .what-you-do-hoora-promoter {padding: 30px 0px 10px 0px;} .why-join-hoora-promoter .heading-text h2 {padding: 0 15px;} .promotion-city .available-cities .city img {width: 100% !important;} .promotion-city .available-cities .city span {font-size: 12px;} .main-done-page{height: 50vh} .promotion-program-banner-2 h1, .hoora-vs-other .heading h2, .p-success-stories h2{font-size: 24px; margin: 0px;} .hoora-vs-other .main-comparison-body .nav-tabs .nav-link {font-size: 10px; width: 100%; padding: 12px 9px; font-family: "Montserrat-Light";} .hoora-vs-other .main-comparison-body .nav-tabs .nav-link.active {padding: 11px;} .hoora-vs-other .main-comparison-body .feature-list {border-radius: 12px;} .hoora-vs-other .main-comparison-body .comparison-card {border-radius: 12px; overflow-x: scroll;} .hoora-vs-other .main-comparison-body .comparison-card .row {width: 160%; justify-content: start !important;} .hoora-vs-other .main-comparison-body .brand-column .first-feature li {padding: 7px 10px} .support-from-hoora .feature-card {width: 167px; height: 167px; padding: 10px; border-radius: 18px; gap: 25px} .support-from-hoora .feature-card img {width: 70%;} .support-from-hoora .feature-card h5{font-size: 12px;} .support-from-hoora .feature-card-body {gap: 18px !important;} .support-from-hoora .feature-card-body {width: 290%;} .promotion-city-2 .city-info .main-cities .city{width: 177px; border-radius: 12px;} .promotion-city-2 .city-info .main-cities .city img {padding: 30px 20px; height: 140px; border-radius: 12px;} .promotion-city-2 .investment-overview-mobile-view .investment-overview .main-card-body {padding: 0 15px;} .promotion-city-2 .available-cities .city span {font-size: 17px; padding: 3px 0px; } .promotion-city-2 .available-cities .city-info h2{margin-bottom: 10px;} .p-success-stories .main-body {margin: 10px 0px;} .step-form .discount-with-date {font-size: 18px; margin-bottom: 25px;} .step-form .btn-form-option {font-size: 12px;} .step-form .step .form-control {padding: 12px} .step-form .step .form-control::placeholder{font-size: 12px !important;} .step-form .step .form-label, .step-form h4 {font-size: 14px;} .step-form .step .next-step, .step-form .step .prev-step {width: 38%; padding: 12px 19px; font-size: 12px;} .promotion-city-2 .city-info .main-cities {display: flex; gap: 20px; width: fit-content; justify-content: center; padding: 0px;} .available-cities .city-info {padding: 20px 3px} .join-car-wash-partner .banner-heading {margin-bottom: 15px;} .why-do-partner .main-body .content-box .box-icon {width: 60px; height: 60px; border-radius: 10px;} .why-do-partner .main-body .content-box .box-icon img {width: 30px; height: 30px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box p {font-size: 10px;margin-bottom: 2px;line-height: 14px;} .steps-started-journey .grid-box .steps-body .steps-container .step-box .step-number {margin-left: -34px;width: 22px;height: 21px;font-size: 9px; font-family: 'Montserrat-Bold';} .steps-started-journey .grid-box .steps-body button { border-radius: 5px; padding: 3px 10px; margin-left: 20px; font-size: 10px;} .steps-started-journey .grid-box .img-box img {width: 120%;margin-top: -38px;margin-left: -44px;} .steps-started-journey .grid-box .steps-body .steps-container { border-left: 1.6px solid #000; padding: 0px 0px 0px 22px;} .steps-started-journey .grid-box .steps-body h2 { margin-bottom: 18px; margin-top: 18px; font-size: 14px; line-height: 5px;} .steps-started-journey{margin-top: 2rem;} .steps-started-journey br{display:block;} .join-partner-media-coverage .card{border: 1px solid #FFC42C !important;} .join-partner-media-coverage h2, .what-you-do-hoora-promoter h2{text-align: start;} .join-partner-media-coverage a {padding: 13px 30px 15px 30px;border-radius: 4px;font-size: 18px;} .join-job-comparison .main-comparison-body .comparison-table {width: 190%;} .join-job-comparison .main-comparison-body .comparison-table {width: 245%;} .join-job-comparison .main-comparison-body .header-cell { font-size: 18px !important; line-height: 24px; height: 40px; padding: 40px 0px;} .join-job-comparison .main-comparison-body .cell {font-size: 14px;} .join-job-comparison .main-comparison-body .note {font-size: 12px;} .join-job-comparison .main-comparison-body .cell .check-icon-container .icon-check img {width: 14px;} .join-job-comparison .main-comparison-body .cell .check-icon-container .icon-check {margin-left: 0px;} .join-job-comparison{margin: 50px 0px;} .join-job-comparison .main-comparison-body {margin-top: 30px;} .join-partner-stories .scroll-video .video-body {width: 420% !important;} .faq-join-partner .faq-container .text-heading {width: 80%;} .faq-join-partner {padding: 10px 0px;} .faq-join-partner h2{font-size: 24px;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box p {font-size: 12px;} .jph-stories .scroll-video .video-body{width: fit-content !important;} .roi-8months-logo-item {padding: 0 15px;} .roi-8months-logo-item img { max-width: 120px;} .roi-8months-carousel .roi-8months-carousel-container{padding: 15px 0px; border-radius: 0px;} .roi-8months-carousel .container{padding: 0px;} .roi-benefits-cards .main-body .card{padding: 10px !important;} .roi-benefits-cards .roi-scroll-container{padding: 0 15px;} .roi-8months-choose-investment .main-body .investment-cards .investment-plan-btn {font-size: 14px; padding: 24px 50px; border: 0px;} .roi-8months-choose-investment .main-body .investment-cards {justify-content: center; align-items: center;} .roi-banner-8months .banner-heading h2{text-transform: uppercase; margin: 0px} .roi-banner-8months .banner-heading h5{margin: 14px 0px 24px 0px;} .roi-banner-8months .iframe-container::after {background: transparent;} .roi-banner-8months .iframe-container::before {background: transparent;} .roi-8months-apply-now .banner-heading a {margin-top: 25px;} .roi-8months-apply-now .banner-heading .live-container { padding: 12.3px 50px;background-color: #FFDF02 !important;} .roi-8months-apply-now .banner-heading .live-container p {font-size: 14px;color: black !important;} .roi-banner-8months .container {padding-top: 32px; } .roi-8months-contact-form .step-dot { width: 30px; height: 30px; font-size: 14px;} .roi-8months-contact-form .step-line {margin-top: 16px;} .roi-8months-contact-form .main-form .contact-form {padding: 39px 16px;} .roi-8months-contact-form #submit-partner-manager-sv, .roi-8months-contact-form .btn-next, .roi-8months-contact-form .btn-prev { font-size: 18px; line-height: 0.69px; padding: 22px 34px; border-radius: 6px;} #registrationForm .radio-offer label { width: 30% !important; margin: 2px !important; font-size: 12px; gap: 5px; padding: 8px 11px !important;} } .download_img{ transition: transform .2s; } .download_img img:hover{ transform: scale(1.1); } @media (max-width: 425px) { header .navbar .navbar-collapse .navbar-nav li a{ font-size: 18px !important; line-height: 58px !important;} .banner .text-heading .icon-btn {font-size: 12px; line-height: 18px;} .download_app .text-heading .download_img img{width: 40%; height: 44.79px;} .woocommerce a.button, .tinvwl_add_to_wishlist-text{font-size: var(--fs-12);} .banner .text-heading .frame .center .carousel .change_outer .change_inner .element{font-size: 1.5rem;margin: 0 !important;height: 50px;} .banner .text-heading h2{margin: 0 !important;} .frame , .carousel, .carousel .pre, .carousel .change_outer{ height: 40px !important; } .frame{ margin-bottom: 10px; } .carousel{ line-height: 15px !important; } .carousel .change_outer .change_inner { position: relative; animation: rotates 8s ease-in-out infinite !important; } @keyframes rotates { 0%, 20% { transform: translateY(0); } 25%, 35% { transform: translateY(-50px); } 40%, 50% { transform: translateY(-100px); } 55%, 65% { transform: translateY(-150px); } 70%, 95% { transform: translateY(-200px); } 100% { transform: translateY(-250px); } } .main-dashboard main .top-heading { overflow: scroll !important; } /* ---------------- IMP ---------------------- */ .main-dashboard main .top-heading .btn{margin: 0.8rem 0 0.8rem 0;} .main-dashboard main .top-heading a:nth-child(3) .btn { width: 140%;} .main-dashboard main .top-heading::-webkit-scrollbar{ width: 100%; height: 10px; border-radius: 10px;background-color: #f0a40063;} .main-dashboard main .top-heading::-webkit-scrollbar-thumb{ width: 10%; height: 10px; border-radius: 10px;background-color: #f0a400;} /* ---------------- IMP ---------------------- */ .channel-hero-banner .text-heading{text-align: center; position: absolute; bottom: 58px; padding: 0 20px; left: 0; right: 0; } .channel-hero-banner .text-heading h1{font-size: 1.8rem;} .channel-hero-banner .text-heading p{font-size: 0.7rem; line-height: 17px;color: #67788C;} .channel-hero-banner .text-heading h1 .line-in-text::after{bottom: -15px;} .padding-col{padding-right: 0 !important;} /* New PM with us */ /* .pm-with-us-banner .banner-heading {padding: 0 10px;} */ .pm-with-us-banner .container{padding: 30px 0 15px 0;} /* .pm-with-us-banner .banner-heading h1{text-align: center; font-size: 21px; line-height: 25px; font-weight: 800; font-family: 'Montserrat-ExtraBold' } */ .pm-with-us-banner .banner-heading h1{font-size: 22px; line-height: 28px; margin-bottom: 20px;} .pm-with-us-banner .banner-heading h5{font-size: 14px; line-height: 21px;} .pm-with-us-banner .banner-heading h1 br{display: none;} .pm-with-us-banner .iframe{ position: relative; padding: 36px 20px; margin-top: 20px;} .pm-with-us-banner .iframe::before{ width: 65%; background-color: #FFE300; content: "-"; right: 0px; top: 0; position: absolute; color: #FFE300; height: 262px; z-index: 1; border-radius: 10px 0 0 10px;} .pm-with-us-banner-sm .banner-heading p{font-family: 'Montserrat-Regular'; font-size: 10px; font-weight: 600; line-height: 20.72px;} .pm-with-us-banner-sm .banner-heading p span{ font-family: 'Montserrat-Bold'; font-size: 10px; font-weight: 700; line-height: 20.72px; text-align: center;} .pm-with-us-banner iframe{height: 192px !important; border-radius: 10px; width: 90%;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .first-line, .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line{padding: 10px 0 0 0 ;} .pm-nationwide-impact .container .card-body-main .card-body .card-text .last-line::after{ display: flex; align-items: center; justify-content: center; content: "-"; background-color: #FFE300; border-radius: 50%; width: 12px; height: 12px; color: #FFE300; position: absolute; right: -17px; border: 0px solid #FAFAFB; top: 40%;} .pm-nationwide-impact .container .card-body-main .card-body .card-text h2{ font-family: 'Montserrat-Bold'; font-size: 12px; font-weight: 600; line-height: 11.57px; text-align: left; margin-bottom: 5px;} .pm-nationwide-impact .container .card-body-main .card-body .card-text p { font-family: 'Montserrat-Medium'; font-size: 11px; font-weight: 500; line-height: 11.72px; text-align: left; margin: 0;} /* .pm-nationwide-impact .container .card-body-main .card-body .small-card { width: 45px; height: 45px; border-radius: 12px; opacity: 0px; background: #FFE300; display: flex; justify-content: center; align-items: center; } */ /* .pm-nationwide-impact .container .card-body-main .card-body .small-card img{width: 18px; padding: 0;} */ /* .lto-btn {font-size: 12px;} */ .lto-form .wpcf7 .wpcf7-submit {font-size: 16px; padding: 0px 8px} .choose-investment .main-body .investment-cards .boxs p{font-size: 12px;} .choose-investment .main-body .investment-cards .boxs h5{font-size: 22px; margin: 0 0 13px 0;} .choose-investment .main-body .investment-cards .boxs {padding: 16px;} .choose-investment .main-body .investment-cards .boxs button{font-size: 10px;} .franchise-table table, .franchise-table .highlight, .franchise-table th, .franchise-table .text-green td {font-size: 8px !important;} .franchise-table .small-btn {font-size: 6px; margin: 4px 0px;} /* ======== B2C =============== */ .b2c-count-overall .small-box-body {border-radius: 16px; padding: 17px 12px 14px 12px; width: 46%; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0px 4px 4px 0px #0000001a; border: 1px solid #0000001a; } .b2c-count-overall .small-box-body .small-card-text {line-height: 17px;} .b2c-count-overall .small-box-body .small-card-text .big-text{font-size: 18px; font-family: 'Montserrat-Bold';} .b2c-count-overall .small-box-body .small-card-text .small-text {font-size: 12px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-text .small-text-2 {font-size: 12px; font-family: 'Montserrat-SemiBold'; line-height: 0px;} .b2c-count-overall .small-box-body .small-card-text .extra-small-text {font-size: 10px; font-family: 'Montserrat-SemiBold'; line-height: 20px;} .b2c-count-overall .small-box-body .small-card-icon{width: 50px; height: 50px;} .service-book .card .card-body .card-title{font-size: 12px;} .service-book .card .card-body .card-text{font-size: 10px; line-height: 14px; } /* ======== B2C END =============== */ /* ======== # 1 Indias Autocare App =============== */ .benefits-cards .card .card-body .card-text {font-size: 10px; line-height: 13px;} .available-cities .map img{width: 100%; max-width: 100%;} .available-cities .city-grid {gap: 12px;} .available-cities .city-info h2 {font-size: 10px; margin-bottom: 12px; } .investment-overview-2 .main-card-body .card {padding: 14px 10px;} .choose-investment-2 .main-body .investment-cards p{font-size: 16px} .first-autocare-app-banner .banner-heading h2{font-size: 24px} /* ======== # 1 Indias Autocare App END =============== */ .pm-onboarding-form .label, .pm-onboarding-form .earning-badge .sub-value{font-size: 10px;} .pm-onboarding-form .value, .pm-onboarding-form .earning-badge .value{font-size: 12px;} .pm-onboarding-form .earning-badge, .pm-onboarding-form .earning-badge.active-badge {width: 145px; height: 75px; background-size: contain !important;} .pm-onboarding-form .main-form p, .pm-onboarding-form .monthly-earning .amount{font-size: 12px;} .pm-onboarding-form .plan-option input[type="radio"]:checked {margin-right: 0px;} .pm-onboarding-form .main-form .contact-form #submit-partner-manager-sv {font-size: 12px !important;} .blog-content .choose-investment-2 .main-body .investment-cards p {font-size: 12px;} .promotion-program-banner-2 h1 {font-size: 24px;} .promotion-program-banner-2 .banner-heading h2 {font-size: 20px;} .hoora-vs-other .main-comparison-body .comparison-card .row {width: 174%;} .support-from-hoora .feature-card-body {width: 310%;} .promotion-city .available-cities .city-info h2{font-size: 18px;} .join-car-wash-partner .banner-heading h2 {font-size: 33px; line-height: 38px;} .join-car-wash-partner .text-heading-2, .join-car-wash-partner .text-heading-1 {font-size: 20px; line-height: 24px;} .join-car-wash-partner .reverse-row-1 {padding: 10px 0px 38px 0px;} .what-you-do-hoora-promoter .main-body .content-box {gap: 12px} .why-do-partner .main-body .content-box .para-sub-heading {font-size: 12px; line-height: 16px;} .what-you-do-hoora-promoter .main-body .para-heading {font-size: 12px; line-height: 17px;} .join-job-comparison .main-comparison-body .comparison-table {width: 300%;} .join-job-comparison .main-comparison-body .cell {height: 48px; } .join-job-comparison .main-comparison-body .flex--07 {flex: 0.9 !important;} .join-job-comparison .main-comparison-body .flex--1 {flex: 1.5 !important;} .join-partner-stories .scroll-video .video-body .video-card {height: 537px !important;} .join-partner-stories .scroll-video .video-body {width: 470% !important;} .steps-started-journey-2 .grid-box .img-box img {width: 120% !important; margin-left: 48px !important; } .steps-started-journey-2 .grid-box .steps-body {width: 160%;} .steps-started-journey-2 .grid-box .steps-body .steps-container .step-box .step-number { margin-left: -32px; width: 19px; height: 16px; font-size: 7px; font-family: 'Montserrat-Bold'; padding: 8px;} .jph-stories .scroll-video .video-body{width: fit-content !important;} .roi-8months-choose-investment .main-body .investment-cards .investment-plan-btn {font-size: 12px; padding: 18px 32px;} #registrationForm .radio-offer label { width: 30% !important; margin: 2px !important; font-size: 12px; gap: 5px; padding: 8px 11px !important;} } @media (max-width: 347px) { .banner .text-heading img{width: 138.94px;} .banner .text-heading h2{font-size: 1.5rem; line-height: 1rem;} header .navbar .logo { width: 30%; margin: 0;} table, table tbody tr td button {font-size: 12px !important;} .tab-content .tab-pane .table-responsive .width{width: 150%;} .main-dashboard main .top-heading a:nth-child(3) .btn { width: 180%; } .channel-hero-banner .text-heading{text-align: center; position: absolute; bottom: 56px; padding: 0 20px; left: 0; right: 0; } .channel-hero-banner .text-heading h1{font-size: 1.4rem;} .channel-hero-banner .text-heading p{font-size: 0.6rem; line-height: 16px; color: #67788C;margin-bottom:0px;} .benefits-cards .card-body .card-img{width: 45px !important; height: 45px !important;} .benefits-cards .card-body .card-img img{width: 18px} .benefits-cards .card .card-body .card-title{font-size: 12px; line-height: 14px;} .benefits-cards .card .card-body .card-text{font-size: 12px; line-height: 14px;} .benefits-cards .main-section h5{font-size: 18px; line-height: 28px;} .pm-with-us-banner .banner-heading h1{font-size: 18px; line-height: 28px; margin-bottom: 20px;} .pm-with-us-banner .banner-heading h5 br{display: none !important;} .offer-pm-contact #submitBtnPartnerWithUs {font-size: 12px} /* ======== # 1 Indias Autocare App =============== */ .benefits-cards .card .card-body .card-text {font-size: 10px; line-height: 13px;} /* ======== # 1 Indias Autocare App END =============== */ .pm-onboarding-form .plan-option {padding: 13px 12px;} .pm-onboarding-form .earning-badge, .pm-onboarding-form .earning-badge.active-badge {width: 122px; height: 66px; background-size: contain} .pm-onboarding-form .earning-badge {padding: 5px 0 0 0 ;} .hoora-vs-other .main-comparison-body .nav-tabs .nav-link {width: 70px;} .hoora-vs-other .main-comparison-body .comparison-card .row {width: 211%;} #registrationForm .radio-offer label { width: 31% !important; margin: 2px !important; font-size: 11px; gap: 5px; padding: 11px 6px !important;} } /* .pm-onboarding-form .investment-details.active {display: block !important;} */ /* ---------------------------------------------- */ .padding-col { padding-right: (1.5rem * .5) !important} .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .loader { width: 48px; height: 48px; margin: auto; position: relative;} .loader:before { content: ''; width: 48px; height: 5px; background: #f0808050; position: absolute; top: 60px; left: 0; border-radius: 50%; animation: shadow324 0.5s linear infinite;} .loader:after { content: ''; width: 100%; height: 100%; background: #f08080; position: absolute; top: 0; left: 0; border-radius: 4px; animation: jump7456 0.5s linear infinite;} @keyframes jump7456 { 15% { border-bottom-right-radius: 3px; } 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow324 { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1); } } #sidebar, .woocommerce-breadcrumb{display: none;} .mt-5-rem{margin-top: 6.5rem;} .woocommerce a.button{background-color: var(--color-yellow);color: #082032;} .products li a img {border-radius: 18px;} .woocommerce .star-rating span::before{color: var(--color-yellow);} .woocommerce span.onsale{background-color: #0d6efd !important;color: white; line-height: 2.5;} .frame { position: relative; height: 50px; overflow: hidden; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .carousel { position: relative; width: 100%; text-align: center; font-size: 30px; line-height: 45px; height: 45px; } .carousel .pre { position: absolute; top: 0; right: 56%; height: 45px; } .carousel .change_outer { position: absolute; top: 0; text-align: left; height: 45px; overflow: hidden; } .carousel .change_outer .change_inner { position: relative; animation: rotate 8s ease-in-out infinite; } .carousel .change_outer .element { display: block; font-weight: 700; font-family: 'Montserrat-Bold'; font-size: 44px; color: var(--dark); margin: 2px 0 2px 0; } @keyframes rotate { 0%, 20% { transform: translateY(0); } 25%, 35% { transform: translateY(-50px); } 40%, 50% { transform: translateY(-100px); } 55%, 65% { transform: translateY(-143px); } 70%, 95% { transform: translateY(-193px); } 100% { transform: translateY(-230px); } } .wpcf7-form { &.submitting { .wpcf7-submit { pointer-events: none; display: none; } } } .channel-partner-input-form .form-select::placeholder, .channel-partner-input-form .form-control::placeholder, .channel-partner-input-form .form-select option{ font-size: 14px !important; color: #45505D !important; font-family: "Montserrat-Bold"; } .channel-partner-input-form .form-select, .channel-partner-input-form .form-control{ padding: 0.8rem; border: 2px solid #DFE3E7 !important; border-radius: 12px !important; font-family: "Montserrat-Bold"; color: #45505D !important; } .channel-partner-input-form .lable-heading{ font-family: "Montserrat-Bold"; /* font-size: 18px; */ font-weight: 600; /* line-height: 28px; */ /* letter-spacing: -0.02em; */ color: #45505D; } .wpcf7-character-count{ display: none; } /* .select2-container{ width: 100%; } */ .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 50px; width: 45px } .select2-container .select2-selection--single{ height: 50px; } .select2-container .select2-selection--single .select2-selection__rendered{ padding-top: 10px; color: #a2a1b0 !important; font-family: "Montserrat-SemiBold"; padding-left: 13px; text-transform: capitalize; font-size: 14px; } .select2-container--default .select2-selection--single{ border: 1px solid #cfd5db; border-radius: 8px; } .select2-container{ width: -webkit-fill-available !important; } /* ======= */ /* ======================== 2. HERO SECTION ======================== */ .herocontainercam { max-width: 1100px; margin: 0 auto; padding: 20px; } .herocam { background-color: #FFF9E9; } .hero-containercam { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .hero-text { flex: 1 1 auto; } /* Mobile view — max-width 768px as an example breakpoint */ @media (max-width: 768px) { .herocam { flex-direction: column; align-items: center; text-align: center; } .hero-text { margin: 0 auto; flex: 1 1 auto; } } .hero-image { flex: 1 1 300px; text-align: center; } .hero-image img { max-width: 100%; height: auto; } /* hide the “mobile” image by default, show desktop one */ .hero-image--mobile { display: none; } .hero-image--desktop { display: block; } /* —— MOBILE LAYOUT —— */ /* default: desktop shown, mobile hidden */ .hero-image--desktop { display: block; } .hero-image--mobile { display: none; } @media (max-width: 768px) { /* completely hide the desktop version */ .camprice { margin-bottom: 0; } .hero-image--desktop { display: none !important; } .subtitle{ margin-top:0; } /* show the mobile version */ .hero-image--mobile { display: block !important; width: 100%; height: 100%; margin-bottom: 0; margin-top:0; } /* stack everything */ .hero-containercam { flex-direction: column; align-items: stretch; } .camtitle{ white-space: normal; font-size: 2rem; line-height: 1.4; font-weight: 800; color: #212121; } } /* ======================== 3. TYPOGRAPHY & TEXT STYLES ======================== */ .pre-title { font-size: 2.25rem; font-weight: bold; display: inline-block; background: linear-gradient( 90deg, #ff4d00 0%, #ff7f00 50%, #ffcc00 100% ); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .camtitle { font-size: 2rem; font-weight: 800; color: #212121; } .caret { width: 24px; margin-bottom: 10px; margin-inline: 2px; } .camprice { font-size: 3rem; font-weight: 900; display: inline-block; background: linear-gradient( 90deg, #ff4d00 0%, #ff7f00 50%, #ffcc00 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .per-month { font-size: 1.5rem; font-weight: 700; background: linear-gradient(to right, #FF6A00, #FFCC00); -webkit-background-clip: text; color: transparent; margin-left: 0.5rem; } .camsubtitle { font-size: 1.60rem; font-weight: 700; color: #212121; } .camdescription { font-size: 1.30rem; color: #212121; } /* ======================== 4. BUTTON ======================== */ a.herobtnn, a.herobtnn:visited, a.herobtnn:hover, a.herobtnn:active { color: #000 !important; text-decoration: none !important; } .herobtnn { display: inline-block; background: linear-gradient(to bottom, #FFEA00 0%, #FF6B00 100%); border-radius: 999px; padding: 16px 32px; color: #000; text-decoration: none; font-weight: 700; font-size: 16px; box-shadow: 0 8px 24px rgba(255, 110, 0, 0.3); transition: box-shadow 0.2s, transform 0.2s; } /* optional hover lift */ .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 110, 0, 0.5); } /* ======================== 5. FEATURES SECTION ======================== */ .featurescam { background-color: #ffffff; padding: 60px 0; } .features-title { font-weight: 700; text-align: center; font-size: 2rem; margin-bottom: 40px; margin-top: 30px; } .features-list { font-size: 1rem; font-weight: 500; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 800px; margin: 0 auto; } .features-list li { display: flex; align-items: flex-start; font-size: 1.25rem; } .checktick { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 10px; } /* ======================== 6. ELIGIBILITY SECTION ======================== */ .eligibility-section { background-color: #FFF9E9; text-align: center; padding: 4rem 1rem; } .elig-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; } .elig-subtitle { font-size: 1.5rem; color: #4B5563; margin-bottom: 2.5rem; } .elig-cards { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 2rem; } .elig-card { display: flex; flex-direction: column; align-items: center; max-width: 140px; } .icon-box { width: 150px; height: 150px; border-radius: 40px; background: linear-gradient(180deg, #FCD34D 0%, #FB923C 100%); display: flex; align-items: center; justify-content: center; } .icon-box img { width: 150px; height: auto; } .card-text { margin-top: 1rem; font-size: 1rem; font-weight: bold; line-height: 1.3; text-align: center; } /* ======================== 7. HOW-IT-WORKS ======================== */ .how-it-works { max-width: 620px; margin: 3rem auto; padding: 0 1rem; } .how-it-works h2 { text-align: center; font-size: 2rem; margin-bottom: 2rem; } .how-it-works .contentcam { display: flex; align-items: stretch; gap: 1.5rem; flex-wrap: nowrap; overflow-x: auto; } .steps-left { display: flex; flex-direction: column; align-items: center; background: linear-gradient(to bottom, #FFD600 0%, #FF3D00 100%); border-radius: 12px; overflow: hidden; flex: 0 0 115px; } .step-number { color: white; font-size: 1.5rem; font-weight: bold; text-align: center; padding: 1rem 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .step-number:last-child { border-bottom: none; } .steps-right { flex: 1; background: #fafafa; border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; } .step-text { padding: 1rem 0; border-bottom: 1px solid #e0e0e0; font-size: 1rem; font-weight: 500; } .step-text:last-child { border-bottom: none; } .step-text .subtext { font-size: 0.875rem; color: #666; } /* ======================== 8. BROWSE DASH-CAMS ======================== */ .browse-dash-cams { max-width: 900px; margin: 0 auto; padding: 40px 20px; } .browse-dash-cams h1 { text-align: center; font-size: 32px; margin-bottom: 8px; } .browse-dash-cams .subtitle { text-align: center; color: #000; font-size: 18px; margin-bottom: 32px; font-weight: 500; } .DashCamscard { display: flex; justify-content: space-between; align-items: center; background: #fff8e1; padding: 24px; margin-bottom: 24px; border-radius: 10px; } .DashCamscard .card-content { flex: 1; padding-right: 20px; } .DashCamscard .card-image img { max-width: 280px; border-radius: 8px; } .DashCamscard .card-content h2 { font-size: 20px; margin: 0; } .DashCamscard .card-content h2 strong { font-weight: 700; } .DashCamscard .card-content h3 { font-size: 18px; margin: 4px 0 12px; font-weight: 500; } .DashCamscard .featuress { font-size: 14px; font-weight: 500; margin: none; } .DashCamscard .prices { font-size: 16px; font-weight: 500; margin: none; } .DashCamscard .subscription-table { border-collapse: separate; border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .DashCamscard .subscription-table th, .DashCamscard .subscription-table td { padding: 8px 16px; text-align: center; } .DashCamscard .subscription-table thead th:first-child { border-top-left-radius: 8px; } .DashCamscard .subscription-table thead th:last-child { border-top-right-radius: 8px; } .DashCamscard .subscription-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; } .DashCamscard .subscription-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; } .DashCamscard .subscription-table thead th { background: #000; color: #fff; font-size: 14px; } .DashCamscard .subscription-table tbody td.label { background: #000; color: #fff; font-weight: 500; text-align: left; } .DashCamscard .subscription-table tbody td.value { background: #000; color: #ffc107; font-weight: bold; } .DashCamscard .buttons { display: flex; gap: 12px; } .DashCamscard .hoora-code { background: #ffc107; border: none; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; } .DashCamscard .amazon { background: #e53935; color: #fff; text-decoration: none; text-align: center; border-radius: 4px; padding: 10px; width: 105px; } /* ======================== 9. DASHCAM FORM ======================== */ .dashcam-form * { box-sizing: border-box; } .dashcam-form { font-family: 'Inter', sans-serif; color: #000; display: flex; justify-content: center; padding: 20px; background: #F5F5F5; } .dashcam-form .form-wrapper { width: 850px; max-width: 900px; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .dashcam-form .form-title { text-align: center; margin-bottom: 16px; font-size: 1.25rem; font-weight: 600; } .dashcam-form .progress-bar { height: 4px; background: #FFD600; border-radius: 2px; margin-bottom: 24px; } .dashcam-form .section-label { display: block; margin: 16px 0 8px; font-size: 0.95rem; font-weight: 500; } .dashcam-form .optional { font-weight: 400; color: #666; font-size: 0.85rem; } .dashcam-form .form-control { width: 100%; padding: 12px 16px; margin-bottom: 12px; border: 1px solid #EDEFF2; border-radius: 8px; background: #FCFDFF; font-size: 0.95rem; } .dashcam-form .textarea { min-height: 120px; resize: vertical; } .dashcam-form .upload-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; /* consistent spacing */ padding: 12px 16px; /* space around content */ border: 2px dashed #ccc; /* match your existing style */ border-radius: 6px; cursor: pointer; max-width: 100%; background: #fafafa; } .dashcam-form .upload-box .upload-icon { font-size: 1.4em; flex: 0 0 auto; color: #8D9AAF; } .dashcam-form .upload-box .file-name { padding: 10px; font-size: 0.9rem; color: #8D9AAF; text-align: start; } .dashcam-form .upload-box .thumb-preview { flex: 0 0 auto; max-width: 80px; max-height: 80px; overflow: hidden; border-radius: 4px; } .dashcam-form .upload-box .thumb-preview img { display: block; width: 100%; height: auto; } .dashcam-form .toggle-group { margin-bottom: 12px; } .dashcam-form .toggle { display: inline-block; padding: 8px 16px; margin: 0 8px 8px 0; border: 1px solid #E8E9F1; border-radius: 8px; background: #fff; font-size: 0.9rem; cursor: pointer; } .dashcam-form .toggle:focus { outline: 2px solid #FFD600; outline-offset: 2px; } .dashcam-form .toggle.active { background-color: #07182F; border-color: #07182F; color: #fff; } .dashcam-form .submit-btn { width: 100%; padding: 14px; background-color: #07182F; color: #fff; font-size: 1rem; font-weight: 500; border: none; border-radius: 8px; margin-top: 16px; cursor: pointer; } /* toast styling */ #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 12px 24px; border-radius: 4px; opacity: 0; transition: opacity 0.3s ease; z-index: 1000; } #toast.show { opacity: 1; } /* ======================== 10. RESPONSIVE BREAKPOINTS ======================== */ /* Tablet / small desktop */ @media (max-width: 768px) { .features-list { grid-template-columns: 1fr; } .elig-title { font-size: 1.5rem; } .elig-subtitle { font-size: 0.9rem; margin-bottom: 2rem; } .elig-cards { gap: 1.5rem; } .elig-card { max-width: 120px; } .icon-box { width: 100px; height: 100px; border-radius: 25px; } .icon-box img { width: 50px; } .card-text { font-size: 0.8rem; } } /* Mobile phones */ @media (max-width: 480px) { .eligibility-section { padding: 3rem 0.5rem; } .elig-title { font-size: 1.25rem; } .elig-subtitle { font-size: 0.85rem; margin-bottom: 1.5rem; } .elig-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .elig-card { max-width: none; margin: 0; } .icon-box { width: 90px; height: 90px; border-radius: 20px; } .icon-box img { width: 90px; height: auto; border-radius: 20px; } .card-text { font-size: 14px; margin-top: 0.5rem; } } /* ========== BROWSE DASH-CAMS RESPONSIVE ========== */ /* Tablet / small-desktop: stack card content */ @media (max-width: 768px) { .browse-dash-cams { padding: 20px 10px; } .DashCamscard { flex-direction: column; align-items: center; padding: 20px; margin-bottom: 20px; } .DashCamscard .card-content { padding-right: 0; text-align: center; } .DashCamscard .card-image { margin-top: 16px; } .DashCamscard .card-image img { max-width: 80%; height: auto; } .DashCamscard .buttons { justify-content: center; flex-wrap: wrap; } } /* Mobile phones: force row + scale down */ @media (max-width: 480px) { /* stack everything vertically */ .DashCamscard { flex-direction: column; align-items: stretch; padding: 16px; } /* image at very top */ .DashCamscard .card-image { order: -1; margin-bottom: 16px; width: 100%; text-align: center; } .DashCamscard .card-image img { max-width: 80%; height: auto; display: inline-block; } /* content + table full width */ .DashCamscard .card-content { order: 0; width: 100%; padding: 0; text-align: left; } .DashCamscard .subscription-table { width: 100%; } /* buttons go below everything */ .DashCamscard .buttons { order: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; width: 100%; } .DashCamscard .buttons .hoora-code, .DashCamscard .buttons .amazon { width: 100%; padding: 12px; font-size: 14px; } } /* First Free Wash */ /* FreeWash Banner Section*/ .freewash-container { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; width: 100%; background-color: #EFE9E4; padding: 0px 5%; } .freewash-text-block { flex: 1 1 45%; min-width: 200px; } .freewash-text-block h1 { font-size: 60px; font-weight: 800; line-height: 1; color: #000; } .freewash-text-block span { display: block; font-size: 45px; font-weight: 700; line-height: 1.5; color: #000; } .freewash-cleaning-info { margin-top: 50px; } .freewash-cleaning-info h3 { font-size: 30px; font-weight: 800; color: #000; } .freewash-cleaning-info p { margin-top: 10px; font-size: 20px; font-weight: 800; line-height: 1.5; color: #000; } .freewash-download-btn { display: inline-block; margin-top: 24px; padding: 14px 90px; background-color: #000; color: #fff; text-decoration: none; font-size: 20px; font-weight: 700; border-radius: 10px; } .freewash-image-block { flex: 1 1 50%; min-width: 300px; margin-top: 1px; text-align: center; } .freewash-image { width: 100%; max-width: 600px; height: auto; object-fit: contain; margin: 0 auto; } /* MOBILE-SPECIFIC SHOW/HIDE LOGIC */ .freewash-text-block-mobile { display: none; } @media(min-width: 1024px){ .freewash-container{ padding: none; } .freewash-container .freewash-text-block{ padding-left: 15rem; } } /* MOBILE (≤991px) */ @media (max-width: 600px) { .freewash-container { position: relative; display: flex; flex-direction: column; text-align: start; } .freewash-text-block { position: absolute; top: 5px; left: 2rem; z-index: 2; width: calc(20% - 20px); } .freewash-cleaning-info { margin-top: 0px; text-align: center; } .freewash-text-block .freewash-cleaning-info, .freewash-text-block .freewash-download-btn { display: none; } .freewash-text-block h1 { font-size: 20px; line-height: 1.1; color: #000; margin: 0; } .freewash-text-block span { font-size: 20px; line-height: 1.1; color: #000; margin: 0; } .freewash-text-block-mobile { display: block; margin-top: calc(1px + 1px); } .freewash-text-block-mobile .freewash-cleaning-info h3 { font-size: 18px; text-align: center; font-weight:800px; color: #000; } .freewash-text-block-mobile .freewash-cleaning-info p { font-size: 15px; font-weight:800px; text-align: center; margin-bottom: 2rem; color: #000; } .freewash-text-block-mobile a { font-size: 16px; text-align: center; margin-bottom: 1rem; } .freewash-image-block { margin-top: 0; } .freewash-image { display: block; width: 100%; height: auto; max-width: 100%; } .freewash-download-btn { display: inline-block; margin-top: 0px; padding: 14px 32px; background-color: #000; color: #fff; text-decoration: none; font-size: 17px; font-weight: bold; border-radius: 10px; } .freewash-text-block-mobile .freewash-download-btn-theme{ display: inline; padding: 16px 70px; background-color: #000; color: #fff; text-decoration: none; font-weight: 700; border-radius: 10px; font-size: 20px; } } /* FEATURES SECTION */ .first-free-features { background-color: #ffffff; padding-top:35px; } .first-free-features-title { font-weight: 700; text-align: center; font-size: 2rem; margin: 0px 0 20px; } .first-free-features-list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 800px; /* ensure it can shrink on small screens */ width: 100%; } .first-free-features-list li { display: flex; align-items: center; font-size: 1rem; font-weight: 600; } .first-free-features-checktick { width: 24px; height: 24px; margin-right: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ——— Responsive breakpoint ——— */ @media (max-width: 600px) { .first-free-features-list { grid-template-columns: 1fr; padding: 0 1rem; /* give a little horizontal gutter on mobile */ } } /* FreeWash Eligibility Section */ .firstfreewash-eligibility-section { text-align: center; padding: 2rem 1rem; } .firstfreewash-eligibility-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.2rem; margin-top:20px; } .firstfreewash-eligibility-cards { display: flex; justify-content: space-evenly; gap: 2rem; flex-wrap: wrap; } .firstfreewash-eligibility-card { flex: 0 1 160px; display: flex; flex-direction: column; align-items: center; text-align: center; } .firstfreewash-icon-box { width: 150px; height: 150px; border-radius: 17px; background: #EDEDED; display: flex; align-items: center; justify-content: center; } .firstfreewash-icon-box img { width: 100px; height: auto; } .firstfreewash-card-text { margin-top: 1rem; font-size: 1rem; font-weight: bold; line-height: 1.3; } /* ✅ Mobile: keep all 3 cards in one row, but scale down */ @media (max-width: 768px) { .firstfreewash-eligibility-title { font-size: 1.2rem; margin-bottom: 1.2rem; } .firstfreewash-eligibility-cards { gap: 1rem; } .firstfreewash-eligibility-card { flex: 0 1 30%; max-width: 100px; } .firstfreewash-icon-box { width: 100px; height: 100px; border-radius: 17px; } .firstfreewash-icon-box img { width: 60px; } .firstfreewash-card-text { font-size: 0.85rem; } } /* First Freewash Stats Section */ .firstfreewash-stats { display: flex; justify-content: space-around; align-items: center; background-color: #FFE300; padding: 10px 10px; flex-wrap: nowrap; text-align: center; } .firstfreewash-stat { flex: 0 1 30%; max-width: 200px; } .firstfreewash-stat img { width: 64px; height: auto; margin-bottom: 16px; } .firstfreewash-stat h3 { font-size: 24px; font-weight: 800; margin: 0; } .firstfreewash-stat p { font-size: 16px; margin-top: 4px; font-weight: 500; } /* ✅ Mobile: Keep row layout but scale down slightly */ @media (max-width: 768px) { .firstfreewash-stats { padding: 10px 10px; gap: 10px; } .firstfreewash-stat { flex: 0 1 30%; max-width: 100px; } .firstfreewash-stat img { width: 48px; margin-bottom: 12px; } .firstfreewash-stat h3 { font-size: 18px; } .firstfreewash-stat p { font-size: 13px; } } /* First Freewash Download Section */ .firstfreewash-download-section { background-color: #f9fafb; padding: 50px 20px; text-align: center; font-family: 'Segoe UI', sans-serif; } .download-title { font-size: 28px; font-weight: 700; margin-bottom: 30px; } .featured-logos { border: 1px solid #000; border-radius: 16px; padding: 20px 10px; display: flex; justify-content: space-evenly; align-items: center; gap: 40px; flex-wrap: wrap; background-color: #fff; margin-bottom: 40px; } .featured-logos img { height: 70px; max-width: 180px; object-fit: contain; } .download-cta { text-decoration-line:none; background-color: #000; color: #fff; font-size: 25px; font-weight: 600; padding: 10px 90px; border-radius: 15px; display: inline-block; margin-bottom: 30px; text-align:center; } .store-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: nowrap; overflow-x: auto; padding: 0 10px; } /* Responsive Tweaks */ @media (max-width: 768px) { .hoora-why-choose .nav-tabs .nav-link{ font-size:9px !important; } .download-title { font-size: 22px; } .featured-logos { gap: 10px; padding: 15px; } .featured-logos img { height: 32px; max-width: 90px; } .download-cta { padding: 9px 60px; background-color: #000; color: #fff; text-decoration: none; font-weight: 500; border-radius: 10px; font-size: 25px; } .store-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: nowrap; overflow-x: auto; padding: 0 10px; } } /* ======================== join-car-wash-partner 6 ======================== */ .hero-car-wash-section { padding: 80px 0; color: #fff; } /* DESKTOP: two columns: header+footer on left, video on right */ .hero-car-wash-container { display: grid; grid-template-columns: minmax(0, 600px) 1fr; grid-template-rows: auto auto; grid-template-areas: "header video" "footer video"; column-gap: 30px; max-width: 1200px; margin: 0 auto; } /* assign areas */ .hero-car-wash-header { grid-area: header; } .hero-car-wash-video { grid-area: video; } .hero-car-wash-footer { grid-area: footer; } /* HEADER */ .hero-car-wash-header h1 { font-size: 51px; font-weight: 700; line-height: 1.2; margin: 0 0 20px; } .hero-car-wash-header h1 span { color: #ffd600; } /* FOOTER */ .hero-car-wash-footer p { font-size: 27px; margin: 0 0 30px; line-height: 1.4; } .hero-car-wash-footer strong { font-weight: bold; } .btn-car-wash-register { display: inline-block; padding: 15px 30px; background-color: #ffd600; color: #000; text-decoration: none; font-weight: 600; border-radius: 4px; font-size: 20px; } /* VIDEO */ .hero-car-wash-video { position: relative; width: 100%; max-width: 580px; aspect-ratio: 580 / 326; } .hero-car-wash-video img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; } /* MOBILE: stack in exact order header→video→footer */ @media (max-width: 768px) { .hero-car-wash-section { padding: 15px 0; /* cut in half from 80px */ } .hero-car-wash-container { grid-template-columns: 1fr; grid-template-areas: "header" "video" "footer"; text-align: center; row-gap: 20px; } .hero-car-wash-header h1 { font-weight: 700; font-size: 33px; margin-bottom: 5px } .hero-car-wash-video{ padding-inline: 10px; } .hero-car-wash-footer p { font-size: 21px; } } .steps-started-carwash-journey {margin-top: 5rem;} .steps-started-carwash-journey .grid-box{ background: #EDF7FF; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; border-radius: 15px; padding: 0px 43px 0px 43px;} .steps-started-carwash-journey .grid-box .img-box img { width: 70%; margin-top: 0px;} .steps-started-carwash-journey .grid-box .steps-body h2{font-size: 52px;font-family: "Montserrat-Bold";margin-left: -65px; margin-bottom: 40px; margin-top: 45px;} .steps-started-carwash-journey .grid-box .steps-body .steps-container {border-left: 1px solid #000;padding: 0px 22px;} .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box {display: flex; gap: 20px; margin-bottom: 40px; align-items: center;} .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box p { font-size: 24px; font-family: "Montserrat-Medium"; line-height: 24px; margin: 0px; width: fit-content;} .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box .step-number {margin-left: -45px;background: white;border-radius: 50%;width: 46px;margin-bottom: 0;height: 43px;display: flex;align-items: center;justify-content: center; border: 0.3px solid black; font-size: 18px; font-family: "Montserrat-Medium"; } .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box .step-number p{color: black;} .steps-started-carwash-journey .grid-box .steps-body button{border-radius: 12px;background: var(--black);color: var(--color-white);font-family: "Montserrat-Medium";padding: 10px 28px;margin-left: 45px;font-size: 20px; } @media (max-width: 768px) { .steps-started-carwash-journey{margin-top: 2rem;} .steps-started-carwash-journey .grid-box{ background: #EDF7FF; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; border-radius: 15px; padding: 0px 0px 0px 0px;} .steps-started-carwash-journey .grid-box .img-box img {width: 120%;margin-top: 30px;margin-left: -10px;} .steps-started-carwash-journey .grid-box .steps-body h2 { margin-bottom: 18px; margin-top: 18px; font-size: 14px; line-height: 5px;} .steps-started-carwash-journey .grid-box .steps-body .steps-container { border-left: 1.6px solid #000; padding: 0px 0px 0px 10.1px;} .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box {display: flex; gap: 20px; margin-bottom: 15px; align-items: center;} .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box p {font-size: 15px;margin-bottom: 2px;line-height: 15px;width: fit-content} .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box .step-number {margin-left: -20px;width: 22px;height: 21px;font-size: 9px; font-family: 'Montserrat-Bold';} .steps-started-carwash-journey .grid-box .steps-body .steps-container .step-box .step-number p{color: black;} .steps-started-carwash-journey .grid-box .steps-body button { border-radius: 5px; padding: 3px 10px; margin-left: 15px; font-size: 20px;} } /* Sp hiring Stats Section */ .sphiring-carwash-stats { display: flex; justify-content: center; background-color: #FFE300; text-align: center; padding: 2px; } .sphiring-carwash-stat { flex: 0 1 30%; max-width: 200px; } .sphiring-carwash-stat img { width: 64px; height: auto; margin-bottom: 16px; } .sphiring-carwash-stat h3 { font-size: 24px; font-weight: 800; margin: 0; } .sphiring-carwash-stat p { font-size: 15px; margin-top: 4px; font-weight: 500; margin-bottom: 0; } /* ✅ Mobile: Keep row layout but scale down slightly */ @media (max-width: 768px) { .sphiring-carwash-stats { display: flex; justify-content: space-around; align-items: center; background-color: #FFE300; flex-wrap: nowrap; text-align: center; margin: none; } .sphiring-carwash-stat { flex: 0 1 30%; } .sphiring-carwash-stat img { width: 48px; margin-bottom: 12px; } .sphiring-carwash-stat h3 { font-size: 18px; } .sphiring-stat p { font-size: 13px; margin-top: 0; } } .sphiring-featured-section { background-color: #f9fafb; padding: 70px 20px; text-align: center; font-family: 'Segoe UI', sans-serif; } .sphiring-featured-title { font-size: 30px; font-weight: 700; margin-bottom: 30px; } .sphiring-featured-logos { border: 1px solid #000; border-radius: 16px; padding: 20px 10px; display: flex; justify-content: space-evenly; align-items: center; gap: 40px; flex-wrap: wrap; background-color: #fff; margin-bottom: 40px; } .sphiring-btn-complete-registration { display: block; width: 100%; background-color: #0D1746; color: #FFFFFF; border: none; border-radius: 9px; padding: 14px 0; font-size: 20px; font-weight: 600; cursor: pointer; letter-spacing: 0.5px; word-spacing: 4px; } /* Responsive Tweaks */ @media (max-width: 768px) { .sphiring-featured-section { background-color: #f9fafb; padding: 20px 10px; text-align: center; } .sphiring-featured-title { font-size: 25px; font-weight: 700; } .sphiring-featured-logos { gap: 10px; padding: 15px; } .sphiring-featured-logos img { height: 32px; max-width: 90px; } .sphiring-btn-complete-registration{ display: block; width: 100%; background-color: #0D1746; color: #FFFFFF; border: none; border-radius: 9px; padding: 14px 0; font-size: 14px; font-weight: 600; cursor: pointer; } } /* ======================== partner-with-us 9 ======================== */ .partner-with-us-section { padding: 0 0; background-color: #FFF9EF; font-family: 'Montserrat-semibold' !important; height: 37rem; } /* DESKTOP: two columns: header+footer on left, video on right */ .partner-with-us-container { display: grid; grid-template-columns: minmax(0, 600px) 1fr; grid-template-rows: auto auto; grid-template-areas: "header video" "footer video"; column-gap: 30px; max-width: 1200px; margin: 0 auto; } /* assign areas */ .partner-with-us-header { grid-area: header; } .partner-with-us-video { grid-area: video; } .partner-with-us-footer { grid-area: footer; } /* HEADER */ .partner-with-us-header { height: 50px; margin-bottom: 0px; margin-top: 8rem; } .partner-with-us-header h1 { font-size: 51px; font-weight: 700; color: #000; } .partner-with-us-header span { font-size: 51px; font-weight: 700; color: #FF0000; margin-bottom: 0px; } /* FOOTER */ .partner-with-us-footer p { font-size: 27px; margin: 5rem 0 30px; line-height: 1.4; color: #000; } .btn-partner-with-us { display: inline-block; padding: 15px 30px; background-color: #000; color: #fff; text-decoration: none; font-weight: 600; border-radius: 10px; font-size: 20px; } /* VIDEO */ .partner-with-us-video { position: relative; width: 100%; max-width: 580px; } .partner-with-us-video{ align-items: center; display: block; } .img-desktop{ margin-left: 10rem; height: 35rem; width: 20rem; } .img-mobile{ margin-top: 3rem; height: 100%; width: 100%; } /* MOBILE: stack in exact order header→video→footer */ @media (max-width: 768px) { .partner-with-us-section { padding: 2px 0; background-color: #FFF9EF; font-family: 'Montserrat-semibold' !important; height: 31rem; } .partner-with-us-container { grid-template-columns: 1fr; grid-template-areas: "header" "video" "footer"; text-align: center; row-gap: 20px; height: 30rem; margin-top: 0px; } .partner-with-us-header { height: 50px; margin-bottom: 0px; margin-top: 0.4rem; } .partner-with-us-header h1 { font-weight: 700; font-size: 30px; margin-bottom: 10px } .partner-with-us-header span { font-weight: 700; font-size: 33px; } .partner-with-us-video{ padding-inline: 10px; } .partner-with-us-footer p { font-size: 21px; margin: 0 0 30px; } } .desktop-only, .mobile-only { display: none !important; } @media (min-width: 769px) { .desktop-only { display: block !important; } } @media (max-width: 768px) { .mobile-only { display: block !important; } } .apply-banner { max-width: 700px; margin: 0 auto; padding: 2rem 1rem; text-align: center; font-family: 'Montserrat-semibold' !important; } .apply-banner__title { font-size: 2.5rem; font-weight: 700; line-height: 1.2; } .apply-banner__highlight { /* if you ever want to style the number differently */ font-weight: 700; } .apply-banner__divider { height: 6px; width: 100%; max-width: 600px; background-color: #FFD600; /* your yellow */ margin: 1rem auto; } .apply-banner__subtitle { font-size: 1.5rem; font-weight: 600; line-height: 1.3; } /* --- Responsive tweaks --- */ @media (max-width: 768px) { .apply-banner__title { font-size: 2rem; } .apply-banner__subtitle { font-size: 1.25rem; } .apply-banner__divider { max-width: 400px; height: 5px; } } @media (max-width: 480px) { .apply-banner{ padding: 0px; margin-bottom: 15px; } .apply-banner__title { font-size: 1.5rem; } .apply-banner__subtitle { font-size: 1rem; } .apply-banner__divider { max-width: 400px; height: 4px; } } .btn-hoora-promoter { padding: 12px 25px; background-color: #000000; color: #fff; text-decoration: none; font-weight: 600; border-radius: 10px; font-size: 15px; width: 32%; } .stat-box__container { display: flex; flex-wrap: nowrap; /* always side-by-side */ justify-content: space-evenly; align-items: center; background-color: #FFE300; padding: clamp(16px, 4vw, 30px) clamp(10px, 8vw, 50px); overflow-x: auto; gap: clamp(12px, 4vw, 32px); } .stat-box__item { display: flex; align-items: center; min-width: 0; } .stat-box__icon { width: clamp(40px, 11vw, 65px); height: clamp(40px, 11vw, 65px); object-fit: contain; margin-right: clamp(8px, 3vw, 20px); flex-shrink: 0; } .stat-box__text { line-height: 1.2; min-width: 0; } .stat-box__value { font-size: clamp(20px, 6vw, 32px); font-weight: bold; color: #000; } .stat-box__label { font-size: clamp(12px, 3.5vw, 18px); color: #000; } /* Optional: Slightly reduce padding/gap/font on small screens */ @media (max-width: 600px) { .stat-box__container { padding: clamp(8px, 3vw, 20px) clamp(2vw, 4vw, 20px); gap: clamp(8px, 3vw, 20px); } .stat-box__icon { margin-right: clamp(6px, 2vw, 10px); } } /* 5 & 25 lac Investor */ .invest-section { /* background: url("/assets/images/5x-img.webp") no-repeat center/cover; */ background-color: #000000; color: #ffffff; padding: 15px 0; position: relative; } .invest-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .invest-left { flex: 1; max-width: 600px; } .invest-logo5x { width: 300px; } .invest-title { font-size: 2.5rem; margin: 0px 0 10px; line-height: 1.2; } .invest-title strong { color: #FFD902; } .invest-subtitle { display: block; font-size: 2.5rem; margin-top: 10px; } .invest-description { font-size: 1.5rem; margin: 20px 0; } .invest-description strong { color: #FFD902; } .invest-cta { background: #FFD902; color: #000; border: none; padding: 12px 24px; font-size: 1.5rem; border-radius: 4px; cursor: pointer; font-weight: bold; text-decoration: none; } .invest-right { flex: 1; text-align: right; } .invest-mobile { max-width: 100%; height: auto; } .invest-banner { background: #FFD902; color: #000; width: 109.9%; transform: rotate(-3deg); margin: 40px -10%; text-align: center; padding: 20px 0; } .invest-banner-text { font-weight: 500; font-size: 2rem; } .invest-returns { text-align: center; padding: 60px 20px; } .invest-returns-title { font-size: 2rem; margin-bottom: 0px; } .invest-underline { display: block; margin: 0 auto 0px; width: 30%; } .invest-cards { display: flex; justify-content: center; gap: 20px; } .invest-card { width: 20%; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .submit-investment-btn { display: block; width: 100%; background-color:#FFE300; color: #000000; border: none; border-radius: 9px; padding: 14px 0; font-size: 22px; font-weight: bolder; cursor: pointer; letter-spacing: 0.5px; word-spacing: 4px; } /* ===== Mobile layout: split content around the phone image ===== */ @media (max-width: 768px) { /* Turn the hero into a grid that we can precisely order */ .invest-container { display: grid; grid-template-columns: 1fr; /* one column */ grid-template-rows: auto auto auto auto auto; /* rows for: logo, title, phone, desc, cta */ grid-template-areas: "logo" "title" "phone" "desc" "cta"; row-gap: 10px; align-items: center; /* vertical centering within each row */ justify-items: center; /* horizontal centering of all cells */ padding: 0 16px; } /* Let the children of .invest-left participate directly in the parent grid */ .invest-left { display: contents; /* preserves desktop since it's inside a media query */ } /* Map elements to areas */ .invest-logo5x { grid-area: logo; width: 250px; } .invest-title { grid-area: title; font-size: 1.7rem; line-height: 1.2; margin: 2px 0 4px; } .invest-subtitle { font-size: inherit; margin-top: 4px; } .invest-right { grid-area: phone; justify-self: center; margin: 0 0 0; } .invest-mobile { width: 95%; height: auto; display: block; } .invest-description { grid-area: desc; font-size: 1.5rem; margin: 8px 0 0; } .invest-cta { grid-area: cta; font-size: 1.5rem; padding: 10px 18px; width: fit-content; } .invest-banner { position: relative; width: 99.5vw; /* exactly the viewport width */ margin-left: calc(50% - 50vw); /* full-bleed inside centered layout */ margin-top: 35px; margin-bottom: 20px; padding: 18px 0; /* text spacing */ overflow: hidden; /* never scroll sideways */ } /* Draw the tilted strip that fits the edges */ .invest-banner::before { content: ""; position: absolute; inset: -16px 0; /* tiny extra height so corners are clean */ background: #FFD902; /* Parallelogram that touches the left/right edges exactly */ /* Adjust the percentages to change the tilt */ clip-path: polygon( 0 48%, /* top-left lower -> more tilt */ 100% 0, /* top-right higher */ 100% 70%, /* bottom-right */ 0 100% /* bottom-left */ ); z-index: 0; } .invest-banner-text { position: relative; /* sits above the yellow strip */ z-index: 1; display: block; margin: 0 auto; max-width: 92vw; text-align: center; font-weight: 700; font-size: clamp(16px, 4.3vw, 20px); line-height: 1.12; } .invest-returns { padding: 0; } .invest-underline{ width: 80%; margin-top: 50px; } .invest-cards { display: flex; flex-wrap: nowrap; justify-content: flex-start !important; overflow-x: auto; gap: 12px; padding: 0; margin: 0; scroll-snap-type: x mandatory; scroll-padding-left: 0px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* Card size: smaller so 2nd card is more visible */ .invest-card { flex: 0 0 55vw; /* smaller card — shows more of the next one */ max-width: 250px; scroll-snap-align: start; margin-bottom: 20px; } /* Gutters for first and last card */ .invest-card:first-child { margin-left: 16px; } .invest-card:last-child { margin-right: 16px; } /* Optional: hide scrollbar */ .invest-cards::-webkit-scrollbar { display: none; } .invest-cards { scrollbar-width: none; } .submit-investment-btn{ display: block; width: 100%; background-color: #FFE300; color: #000000; border: none; border-radius: 9px; padding: 14px 0; font-size: 17px; font-weight: bold; cursor: pointer; } } /* Extra-small phones tweak */ @media (max-width: 400px) { .invest-logo5x { grid-area: logo; } .invest-title { grid-area: title; text-align: center; } .invest-subtitle { font-size: inherit; } .invest-description { grid-area: desc; text-align: center; } .invest-cta { grid-area: cta; justify-self: center; } } /* Premium Bike-wash */ .premium-bike-wash { position: relative; width: 100%; height: 100vh; overflow: hidden; } .premium-bike-wash .banner-img { width: 100%; height: 100%; object-fit: cover; /* Ensures the image covers the section without stretching */ object-position: center; /* Centers the image to avoid cropping on smaller screens */ z-index: -1; /* Keeps the image behind the overlay */ } .premium-bike-wash .overlay { position: absolute; top: 40%; left: 25%; transform: translate(-50%, -50%); text-align: start; color: #fff; } .premium-bike-wash .overlay h1 { font-size: 5rem; font-weight: bold; color: #FFE300; line-height: 0.8; } .premium-bike-wash .overlay h2 { font-size: 5rem; font-weight: bold; line-height: 1; } .premium-bike-wash .overlay h3 { font-size: 4rem; font-weight: semi-bold; line-height: 1; } .premium-bike-wash .overlay span { font-size: 5rem; font-weight: bold; color: #FFE300; line-height: 0.7; padding-left: 15px; } .premium-bike-wash .overlay p { font-size: 2.1rem; display: flex; margin-top: 3.5rem; margin-bottom: 3.5rem; font-weight: bold; line-height: 1; } .premium-bike-wash .overlay a { background-color: #ffffff; color: #000; border: none; padding: 15px 30px; font-size: 2rem; cursor: pointer; border-radius: 6px; margin-top: 1rem; font-weight: bold; text-decoration: none; } .premium-bike-wash .overlay button:hover { background-color: #e0b900; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .premium-bike-wash { position: relative; width: 100%; height: 29.2vh; overflow: hidden; } .premium-bike-wash .overlay { top: 10%; /* Adjust the vertical position */ left: 25%; transform: translateX(-50%); text-align: start; } .premium-bike-wash .overlay h1 { font-size: 2rem; /* Adjusting text size for smaller mobile screens */ } .premium-bike-wash .overlay h2 { font-size: 1.5rem; } .premium-bike-wash .overlay h3 { font-size: 1.4rem; } .premium-bike-wash .overlay span { font-size: 1.5rem; } .premium-bike-wash .overlay p { font-size: 1rem; /* Further smaller text size for mobile */ margin-top: 1rem; } .premium-bike-wash .overlay a { font-size: 0.7rem; /* Even smaller button font size */ margin-top: 5px; padding: 10px 10px; text-decoration: none; } } /* Mobile-specific adjustments for very small screens */ @media (max-width: 425px) { .premium-bike-wash { position: relative; width: 100%; height: 29.2vh; overflow: hidden; } .premium-bike-wash .overlay { top: 10%; /* Adjust the vertical position */ left: 25%; transform: translateX(-50%); text-align: start; } .premium-bike-wash .overlay h1 { font-size: 2rem; /* Adjusting text size for smaller mobile screens */ } .premium-bike-wash .overlay h2 { font-size: 1.5rem; } .premium-bike-wash .overlay h3 { font-size: 1.4rem; } .premium-bike-wash .overlay span { font-size: 1.5rem; } .premium-bike-wash .overlay p { font-size: 1rem; /* Further smaller text size for mobile */ margin-top: 1rem; } .premium-bike-wash .overlay a { font-size: 0.7rem; /* Even smaller button font size */ margin-top: 5px; padding: 10px 10px; text-decoration: none; } } /* Container Styles */ .career-container { width: 100%; text-align: center; } /* Banner Styles */ .career-banner { width: 100%; background-color: #ffcc00; padding: 20px; display: inline-block; text-align: center; } /* Title Styles */ .career-title { font-size: 3rem; font-weight: bolder; color: red; display: block; margin-bottom: 10px; } /* Price Styles */ .career-price { background-color: #000000; color: white; font-size: 2rem; padding: 10px 20px; border-radius: 5px; font-weight: bold; text-decoration: none; } /* Mobile Responsiveness */ @media screen and (max-width: 768px) { .career-title { font-size: 0.6rem; } .career-price { font-size: 18px; } .career-banner { padding: 15px; } } @media screen and (max-width: 480px) { .career-title { font-size: 1.2rem;; } .career-price { font-size: 16px; } } .offer-container { width: 100%; max-width: 600px; padding: 15px; margin: 20px auto; font-size: 16px; } .offer-container span{ color: #FF5722; } .offer-container h1{ margin-top: 2rem; font-size: 2rem; font-weight: bold; flex-direction: row; align-items: center; } .offer-details { display: flex; align-items: center; background-color: #EDEDED; padding: 10px; border-radius: 6px; border: 1px solid #E0E0E0; } .offer-image { width:40%; height: 40%; object-fit: cover; margin-right: 15px; } .offer-name { font-weight: bold; font-size: 2rem; color: #000000; } @media screen and (max-width: 480px) { .offer-details { display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #EDEDED; padding: 10px; border-radius: 6px; border: 1px solid #E0E0E0; } .offer-container h1{ font-size: 1.4rem; margin-bottom: 1rem; margin-top: 1rem; } .offer-name { font-weight: bold; font-size: 1.4rem; color: #000000; } } .career-desktop-only, .career-mobile-only { display: none !important; } @media (min-width: 769px) { .career-desktop-only { display: block !important; width: 100%; height: 100%; object-fit: cover; /* Ensures the image covers the section without stretching */ object-position: center; /* Centers the image to avoid cropping on smaller screens */ z-index: -1; /* Keeps the image behind the overlay */ } } @media (max-width: 768px) { .career-mobile-only { display: block !important; width: 100%; object-fit: fill; /* Ensures the image covers the section without stretching */ object-position: center; /* Centers the image to avoid cropping on smaller screens */ z-index: 0; /* Keeps the image behind the overlay */ } } /* ======================== Career Page ======================== */ /* Imports */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); /* ---------- Base ---------- */ .career-hero { background: #fff; font-family: system-ui, sans-serif; padding: 60px 20px; } .career-hero .career-wrap { align-items: center; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; margin: 0 auto; max-width: 1200px; } .career-hero .career-copy { flex: 1; } .career-hero .career-copy h1 { color: #0e0f11; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(22px, 2.5vw, 48px); font-weight: 700; line-height: 1.2; margin: 0 0 16px; } .career-hero .career-copy p { color: #333840; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.6; margin: 0; } .career-hero .career-img { display: flex; flex: 1; justify-content: center; text-align: center; } .career-hero .career-img img { border-radius: 12px; height: auto; max-width: 500px; width: 100%; } .career-page{ color: #0f172a; display: grid; font-family: Arial, sans-serif; gap: 28px; margin: 0 auto; max-width: 680px; padding: 16px 14px 0px; } .career-row{ display: grid; gap: 16px; grid-template-columns: 1fr; } .career-col.career-media{ display: grid; place-items: center; } .career-col.career-text{ background: #ffffff; border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); padding: 18px; } .career-row img{ border-radius: 10px; display: block; filter: drop-shadow(0 12px 24px rgba(2, 6, 23, 0.12)); height: auto; max-width: 520px; width: 100%; } .career-row h2{ font-size: 20px; line-height: 1.3; margin: 0 0 12px 0; } .career-lead{ font-weight: 600; margin: 0 0 6px 0; } .career-muted{ color: #475569; margin-top: 6px; } .career-checklist{ list-style: none; margin: 8px 0 0 0; padding: 0; } .career-checklist li{ margin: 8px 0; padding-left: 24px; position: relative; } .career-checklist li::before{ color: #111827; content: "•"; font-weight: 700; left: 8px; position: absolute; top: 0; } /* Journey */ .career-journey{ background: #ffe000; color: #0f172a; font-family: Arial, Helvetica, sans-serif; min-height: 45rem; /* prevent overflow */ padding: 3rem 16rem 0px; } .career-heading{ align-items: center; display: flex; gap: 12px; } .career-heading h2{ font-size: clamp(22px, 3.5vw, 34px); font-weight: 700; margin-bottom: 1rem; white-space: nowrap; } .career-line{ flex-grow: 1; height: auto; max-height: 5px; object-fit: contain; } .career-sub{ font-size: 15px; line-height: 1.6; margin: 14px 0 22px; max-width: 780px; } .career-steps-wrap{ display: grid; place-items: center; } .career-steps{ height: auto; max-width: 980px; width: 100%; } /* Department */ .career-dept{ color: #0f172a; font-family: Arial, Helvetica, sans-serif; padding: 28px 18px 40px; } .career-dept__heading{ align-items: center; display: flex; gap: 14px; padding: 2rem 16rem 2rem; } .career-dept__heading h2{ font-size: clamp(22px, 3.5vw, 34px); font-weight: 700; margin: 0; white-space: nowrap; } .career-dept__line{ flex: 1; height: 16px; max-width: 700px; object-fit: contain; } .career-dept__grid{ display: grid; gap: 20px; grid-template-columns: 1fr 1fr; } /* Apply Steps */ .careerapply-steps{ color: #0f172a; font-family: Arial, Helvetica, sans-serif; min-height: 45rem; padding: 3rem 16rem 0px; } /* Step toggles */ .stepdesktop-only, .stepmobile-only{ display: none !important; } /* Roles */ .career-roles{ background: #ffd400; color: #121212; display: grid; font-family: "Inter", sans-serif; min-height: 100vh; padding: 52px 20px 110px; place-items: start center; } .career-roles__wrap{ max-width: 920px; width: 100%; } .career-roles__header{ display: grid; gap: 28px; grid-template-columns: 40% 60%; margin-bottom: 16px; } .career-roles__pill{ align-items: center; background: #1f1f1f; border-radius: 14px; box-shadow: 0 12px 18px rgba(0,0,0,0.15); color: #fff; display: flex; font-size: 15px; font-weight: 700; height: 56px; justify-content: center; padding: 10px; } .career-roles__row{ display: grid; gap: 28px; grid-template-columns: 40% 60%; margin-bottom: 20px; } .career-roles__cell{ align-items: start; background: #fff; border-radius: 12px; box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 10px 20px rgba(0,0,0,.08); font-size: 15.5px; min-height: 64px; padding: 20px 26px; } .career-roles__cell--left{ font-weight: 600;text-align: center;align-content: center; } /* NEW: Bulleted list styles for roles (small + large screens) */ .career-roles__cell-inner { width: 100%; } .career-roles__list{ list-style: disc; margin: 0; padding-left: 1.25rem; /* bullet indent */ } .career-roles__list li{ margin: 6px 0; break-inside: avoid; } .career-role-meta{ margin-top: 10px; font-size: 13.5px; color: #4b5563; } .career-role-sep{ margin-right: 6px; } .career-role-location{ opacity: 0.9; } /* On wider screens, show list in two columns (still bullets) */ @media (min-width: 1024px){ .career-roles__list{ column-gap: 32px; } } /* Refer button */ .career-roles__refer{ align-items: center; background: #fff; border: none; border-radius: 10px; bottom: 28px; box-shadow: 0 10px 22px rgba(0,0,0,.18); color: #111; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 600; gap: 10px; padding: 12px 16px; position: fixed; right: 32px; z-index: 999; /* stay above content */ } .career-roles__refer-icon{ display: inline-flex; } /* ======================== MERGED MEDIA QUERIES ======================== */ /* --- ≤425px (very small phones) --- */ @media (max-width: 425px){ .career-hero .career-copy h1{ color: #0e0f11; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(22px, 2.5vw, 48px); font-weight: 700; line-height: 1.2; margin: 0 0 16px; text-align: center; } .career-hero .career-wrap{ align-items: center; display: inline-block; flex-wrap: wrap; gap: 40px; justify-content: space-between; margin: 0 auto; max-width: 100%; } .career-hero .career-img img{ border-radius: 12px; height: auto; max-width: 300px; width: 100%; } .career-roles__cell{ align-items: start; background: #fff; border-radius: 12px; box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 10px 20px rgba(0,0,0,.08); font-size: 16px; min-height: 55px; padding: 17px 23px; } .career-roles__cell--left{ font-weight: 800; } } /* --- ≤640px (phones) --- */ @media (max-width: 640px){ /* Journey */ .career-journey{ min-height: 24.3rem; padding: 1rem 1rem 0px; } .career-heading{ flex-direction: column; align-items: flex-start; } .career-line{ width: 100%; max-width: 220px; margin-bottom: 1rem; } .career-sub{ font-size: 14px; } .career-steps{ border-radius: 0px; } /* Department */ .career-dept__heading{ flex-direction: column; align-items: start; gap: 10px; margin-bottom: 8px; padding: 0; } .career-dept__line{ width: 100%; max-width: 220px; margin-bottom: 1rem; } .career-dept__grid{ gap: 14px; grid-template-columns: 1fr; } /* Apply Steps */ .careerapply-steps{ min-height: 26.3rem; padding: 1rem 1rem 1rem; } } /* --- ≤768px (tablets & down) --- */ @media (max-width: 768px){ .stepmobile-only{ display: block !important; } } /* --- ≥769px (above tablets) --- */ @media (min-width: 769px){ .stepdesktop-only{ display: block !important; } } /* --- ≥720px (desktop/tablet enhancements) --- */ @media (min-width: 720px){ .career-page{ gap: 56px; max-width: 1100px; padding: 40px 20px 80px; } .career-row{ align-items: center; gap: 28px; grid-template-columns: 1.15fr 1fr; } .career-row:first-of-type .career-col.career-media{ order: 2; } .career-row:first-of-type .career-col.career-text{ order: 1; } .career-row h2{ font-size: 28px; } .career-col.career-text{ border-radius: 18px; padding: 28px; } } /* --- ≤900px (force 40/60 layout on mobile for Roles) --- */ @media (max-width: 900px){ .career-roles__header, .career-roles__row{ grid-template-columns: 37% 57% !important; display: grid; gap: 15px; margin-bottom: 7px; } } /* ===================== Join Hoora Promoter 2 ======================== */ /* ============================= */ /* 🌟 Base Styles */ /* ============================= */ .join-hoora-promoter-2 { background: #F5F5F5; padding: 40px 0px; } .join-hoora-promoter-2 .banner-heading h2 { background: transparent; color: var(--black); font-family: "Montserrat-Bold"; -webkit-text-fill-color: unset; background-clip: unset; -webkit-background-clip: unset; font-size: 52px; } .join-hoora-promoter-2 .banner-heading p { font-size: 28px; line-height: 34px; font-family: "Montserrat-Regular"; } .join-hoora-promoter-2 .video-container { border-radius: 32px; } /* Feature Cards */ .join-hoora-promoter-2 .features { display: grid; grid-template-columns: repeat(4, 1fr); /* ✅ 4 in a row */ gap: 20px; justify-items: center; align-items: stretch; } .join-hoora-promoter-2 .features .small-card { background-color: var(--black) !important; border-radius: 10px; border-color: transparent !important; color: white; width: 100% !important; height: 140px; flex-direction: column; gap: 18px; display: flex; align-items: center; justify-content: center; text-align: center; } .join-hoora-promoter-2 .features .small-card .heading-text { color: var(--color-yellow); font-family: "Montserrat-Bold"; font-size: 32px; } .join-hoora-promoter-2 .features .small-card .heading-para { font-size: 18px; } .join-hoora-promoter-2 .features .small-card p { margin: 0px; } /* CTA Button */ .join-hoora-promoter-2 .cta .btn { background: #000000; color: white; border-radius: 14px; padding: 12px 50px; font-family: "Montserrat-Medium"; font-size: 24px; } .features-title-bar { background: var(--color-yellow, #FFD700); color: #000; text-align: center; font-family: "Montserrat-Bold"; font-size: 24px; padding: 16px 0; width: 100%; max-width: 800px; max-height: 60px; margin: 0 auto 20px auto; } /* ============================= */ /* 🌿 Benefits Section */ /* ============================= */ .benefits-section { padding: 60px 20px; text-align: center; } .benefits-section h2 { font-size: 3rem; font-weight: 700; margin-bottom: 4rem; } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; justify-items: center; margin-bottom: 40px; } .benefit-card { background: #f8f9fa; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); padding: 25px 20px; text-align: center; width: 100%; max-width: 260px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .benefit-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .benefit-card img { width: 50px; height: 50px; margin-bottom: 15px; } .benefit-card p { font-size: 16px; font-weight: 500; line-height: 1.4; margin: 0; } .stats-bar { background: #000; width: 100%; padding: 25px 0; } /* 📊 Flex container for stats */ .stats-container { display: flex; justify-content: center; align-items: center; gap: 25px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; } /* 🟡 Outer yellow cards */ .stat-item { display: flex; align-items: center; background: #FFD300; /* bright yellow */ border-radius: 12px; padding: 10px 12px; gap: 10px; min-width: 280px; height: 90px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } /* 🔵 Inner dark blue box */ .stat-content { background: #001541; color: #fff; border-radius: 8px; padding: 10px 15px; text-align: left; font-family: "Montserrat-Bold"; flex: 1; line-height: 1.3; } .stat-content p { margin: 0; font-size: 17px; font-weight: 600; } .stat-content p strong { color: #fff; font-size: 18px; } /* 🏙️ Icon styling */ .thisicon img { width: 36px; height: 36px; } /* ============================= */ /* 📱 Responsive Breakpoints */ /* ============================= */ /* ✅ Medium Screens (≤900px) */ @media (max-width: 900px) { .join-hoora-promoter-2 { padding: 30px 0; } .join-hoora-promoter-2 .banner-heading h2 { font-size: 38px; text-align: center; } .join-hoora-promoter-2 .banner-heading p { font-size: 20px; text-align: center; } .join-hoora-promoter-2 .features { grid-template-columns: repeat(2, 1fr); /* ✅ 2 per row on tablet */ gap: 20px; } .join-hoora-promoter-2 .features .small-card { height: auto; padding: 20px; } .join-hoora-promoter-2 .features .small-card .heading-text { font-size: 24px; } .join-hoora-promoter-2 .features .small-card .heading-para { font-size: 16px; } .join-hoora-promoter-2 .cta .btn { font-size: 20px; padding: 10px 35px; } .benefits-section h2 { font-size: 2.4rem; margin-bottom: 3rem; } .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .benefit-card { max-width: 100%; } .features-title-bar { font-size: 18px; padding: 12px 10px; max-width: fit-content; border-radius: 0; } .stat-item { justify-content: flex-start; border-radius: 8px; padding: 10px 15px; min-width: 175px !important; } .stat-content { padding: 8px 12px; width: 100% !important; max-width: 100% !important; } .stat-content p { font-size: 16px; } } /* ✅ Small Screens (≤600px) */ /* 🔹 2 feature cards per row */ @media (max-width: 600px) { .join-hoora-promoter-2 { padding: 20px 0; } .join-hoora-promoter-2 .banner-heading h2 { font-size: 30px; text-align: center; line-height: 1.2; } .join-hoora-promoter-2 .banner-heading p { font-size: 16px; text-align: center; line-height: 1.2; margin-top: 10px; } .join-hoora-promoter-2 .features { grid-template-columns: repeat(2, 1fr); /* ✅ 2 cards per row */ gap: 15px; } .join-hoora-promoter-2 .features .small-card { padding: 15px; border-radius: 8px; gap: 10px; } .join-hoora-promoter-2 .features .small-card .heading-text { font-size: 17px; } .join-hoora-promoter-2 .features .small-card .heading-para { font-size: 12px; } .join-hoora-promoter-2 .cta .btn { font-size: 16px; padding: 8px 25px; } .benefits-section { padding: 40px 10px; } .benefits-section h2 { font-size: 1.3rem; margin-bottom: 2rem; } .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .benefit-card { padding: 20px; max-width: 100%; } .benefit-card img { width: 40px; height: 40px; } .benefit-card p { font-size: 14px; } .features-title-bar { font-size: 17px; padding: 12px 10px; border-radius: 0; width: 100% !important; max-width: 100% !important; } .stats-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; justify-items: center; } .stat-item { justify-content: flex-start; border-radius: 8px; padding: 10px 15px; min-width: 175px !important; max-height: 60px !important; } /* Center the last card in second row */ .stat-item:nth-child(3) { grid-column: 1 / span 2; justify-self: center; } .thisicon img { width: 30px; height: 30px; } .stat-content { padding: 8px 12px; width: 100% !important; max-width: 100% !important; } .stat-content p { font-size: 12px; } .stat-content p strong { font-size: 12px; } } /* ============================= */ /* 🎥 Hoora Promoter Stories – YouTube Shorts Style */ /* ============================= */ .hoora-promoter-stories { background: #fff; padding: 60px 20px; text-align: center; } .hoora-promoter-heading h2 { font-family: "Montserrat-Bold"; font-size: 32px; color: #000; margin-bottom: 40px; } /* 🎬 Layout for Video Cards */ .hoora-promoter-scroll .hoora-promoter-video-body { display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; } /* 🎞️ Video Card */ .hoora-promoter-card { flex: 1 1 280px; max-width: 300px; border-radius: 16px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* 🩳 Shorts-Style Video Container */ .hoora-promoter-video { position: relative; background-size: cover; background-position: center; width: 100%; aspect-ratio: 9 / 16; /* Tall vertical Shorts format */ border-radius: 16px; overflow: hidden; } /* ▶️ Play Button Styling */ .hoora-promoter-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background: rgba(255, 255, 255, 0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .hoora-promoter-play img { width: 30px; height: 30px; filter: invert(13%) sepia(95%) saturate(6922%) hue-rotate(357deg) brightness(101%) contrast(114%); } .hoora-promoter-play:hover { background: #ff0000; transform: translate(-50%, -50%) scale(1.1); } /* ============================= */ /* 📱 Responsive Design */ /* ============================= */ /* Tablets (≤900px) */ @media (max-width: 900px) { .hoora-promoter-scroll .hoora-promoter-video-body { gap: 20px; } .hoora-promoter-heading h2 { font-size: 26px; } .hoora-promoter-card { max-width: 260px; } } /* Mobiles (≤600px) */ /* 🔹 Two cards on top, one centered below */ @media (max-width: 600px) { .hoora-promoter-scroll .hoora-promoter-video-body { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 15px; padding-bottom: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; justify-content: flex-start; } .hoora-promoter-scroll .hoora-promoter-video-body::-webkit-scrollbar { display: none; /* Hide scrollbar for cleaner look */ } .hoora-promoter-card { flex: 0 0 80%; /* Each video takes ~80% of screen width */ max-width: 80%; scroll-snap-align: start; } .hoora-promoter-video { aspect-ratio: 9 / 16; width: 100%; border-radius: 12px; background-position: center; background-size: cover; } .hoora-promoter-play { width: 60px; height: 60px; } .hoora-promoter-play img { width: 25px; height: 25px; } } /*bhupesh*/ /* ======================== New HomePage ======================== */ /*1st*/ .happy-clients{ font-size: 38px; font-weight: 600; text-transform: capitalize; color:#000000; float: left; width:50%; } .happy-clients-hoora-heading{ float: right; width:60% !important; } /*2nd*/ .rj-svp-bottom-heading{ color:#000; font-size: 35px; font-weight: 700; text-transform: capitalize; max-width: 500px; text-align: center; margin: 0 auto; } .svp-bottom p{ color: #000; font-size: 18px; color: #000; margin-top: 15px; } .smart-vehicle-page .svp-heading { text-align: center; font-size: 38px; font-weight: 700; margin-bottom: 10px; font-family: 'Lexend-Medium' !important; color:#0C0C0C; } .smart-vehicle-page .svp-content { display: flex; gap: 30px; } /*.smart-vehicle-page .svp-left, .smart-vehicle-page .svp-right { flex: 1; display: flex; flex-direction: column; gap: 20px; }*/ .smart-vehicle-page .svp-row { display: flex; gap: 20px; align-items: center; } .smart-vehicle-page .svp-row.full { justify-content: center; } .smart-vehicle-page .svp-box { flex: 1; background: #fff; border-radius: 16px; box-shadow: 0 4px 15px rgb(0 0 0 / 21%); padding: 20px; text-align: left; } .smart-vehicle-page .svp-box1 { flex: 1; background: #fff; border-radius: 16px; box-shadow: 0 4px 15px rgb(0 0 0 / 21%); padding: 25px 20px; text-align: left; } .smart-vehicle-page .svp-box.full,.smart-vehicle-page .svp-box.full { width: 100%; display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; align-items: center; } .smart-vehicle-page .svp-box img, .smart-vehicle-page .svp-box1 img { width: 100%; border-radius: 10px; /*margin-bottom: 10px;*/ } .smart-vehicle-page .svp-box img{ margin-bottom: 20px; } .rj-upto { margin-left: -8px; background: red; color: #fff; padding: 2px 22px; border-bottom-left-radius: 11px; border-top-left-radius: 11px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; } .smart-vehicle-page .svp-box h2, .smart-vehicle-page .svp-box1 h2 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; line-height: 1.4; font-family: 'Lexend-Medium' !important; } .smart-vehicle-page .svp-yellow { background: #f9d74c; display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 0.9rem; color: #946000; margin-bottom: 0; font-family: 'Lexend-Medium' !important; } .smart-vehicle-page .svp-note { font-size: 0.75rem; color: #777; font-family: 'Lexend-Medium' !important; } .rj-para-hoora{ color: #946000; font-family: 'Lexend-Medium' !important; } .smart-vehicle-page .svp-img { height: 100%; width: 100%; object-fit: cover; } .svp-item1 h2{ font-size: clamp(20px, 3vw, 35px); font-weight: 600; line-height: 1.4; font-family: 'Lexend-Medium' !important; } .svp-item1 p{ font-size: clamp(14px, 2vw, 18px); font-weight: 400; line-height: 1.4; font-family: 'Lexend-Medium' !important; } .svp-box-content,.smart-vehicle-page .svp-box { flex: 1 1 50% !important; } img.hoora-insurance-img-section{ width: 50% !important; } @media (max-width: 900px) { .svp-box-content { flex: 1 1 50%; } .download_img img:hover{ transform:unset !important; } } .smart-vehicle-page .svp-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px; } /*.smart-vehicle-page .svp-stat { flex: 1; background: #fafafa; border-radius: 16px; padding: 30px 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }*/ .svp-box-content img{ width: 180px !important; } .smart-vehicle-page .svp-stat h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; } .smart-vehicle-page .svp-stat p { font-size: 1rem; color: #444; font-family: 'Lexend-Medium' !important; } .smart-vehicle-page .svp-bottom { margin-top: 60px; } /*.smart-vehicle-page .svp-bottom h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }*/ /* .smart-vehicle-page .svp-bottom p { font-size: 1rem; color: #555; margin-bottom: 25px; }*/ .smart-vehicle-page .svp-store img { width: 160px; margin: 0 10px; transition: transform 0.2s ease; } .smart-vehicle-page .svp-store img:hover { transform: scale(1.05); } .smart-vehicle-page .svp-offer { display: inline-block; background-color:#2c2a71; color: #fff; font-weight: 100; font-size: 1rem; padding: 8px 18px 8px 12px; border-radius: 9999px; line-height: 1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); white-space: nowrap; font-family: 'Lexend-Medium' !important; margin-top: 10px; } .top-h{ font-weight: 700; font-size: 28px; margin: 0px; } /* ------------------------ Play store & Download section (bottom) ------------------------ */ .rj-svp-bottom-heading { color: #000; font-size: 42px; font-weight: 700; text-transform: capitalize; max-width: 500px; text-align: center; margin: 0 auto; font-family: 'Lexend-Medium' !important; } .svp-bottom p { color: #000; font-size: 20px; margin: 20px 0; font-family: 'Lexend-Medium' !important;} .happy-drive-stories { text-align: center; padding: 40px 20px; background: #fff; } .hoora-why-choose-div{ justify-content: space-between !important; } /* Heading block; laptop/desktop stays as-is */ .happy-drive-stories .top-hoora-why-choose { font-size: 38px; font-weight: 600; text-transform: capitalize; color: #000; } .happy-clients-hoora-heading { display: inline-block; } .happy-drive-stories .happy-drive-video-body { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-start; margin-top: 25px; } .happy-drive-stories .happy-drive-card { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); box-sizing: border-box; text-align: center; margin-bottom: 20px; } /* Player box */ .happy-drive-stories .happy-drive-video { position: relative; width: 100%; aspect-ratio: 16 / 16 !important; height: auto; padding-top: 0; background-color: #eee; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; } .happy-drive-stories .video-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; cursor: pointer; z-index: 1; } .happy-drive-stories p { font-weight: 600; font-size: 1rem; color: #111; margin-top: 10px; } .happy-drive-stories .happy-drive-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .happy-drive-stories .happy-drive-video.playing { background-image: none; } /* ========================================================= BREAKPOINTS xs: 0–575px | sm: 576–767px | md: 768–1023px lg: 1024–1439px | xl: 1440px+ ========================================================= */ /* XS (<=575px) — phones */ @media (max-width: 575.98px) { .smart-vehicle-page { padding: 32px 20px; } .smart-vehicle-page .svp-content { flex-direction: column; } .smart-vehicle-page .svp-row { flex-direction: row; } .smart-vehicle-page .svp-box h3 { font-size: .8rem; } .smart-vehicle-page .svp-offer { font-size: .5rem; } .rj-svp-bottom-heading { font-size: 30px; } .svp-bottom p { font-size: 16px; margin-inline: 16px; margin:16px 0 !important; } /* Happy Drive — two-at-a-time scroller */ .happy-drive-stories .happy-drive-video-body{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:12px !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; justify-content:flex-start !important; } .happy-drive-stories .happy-drive-video-body::-webkit-scrollbar{ display:none; } .happy-drive-stories .happy-drive-video-body{ -ms-overflow-style:none; scrollbar-width:none; } .happy-drive-stories .happy-drive-card{ flex:0 0 calc(50% - 6px) !important; max-width:calc(50% - 6px) !important; margin-bottom:0 !important; scroll-snap-align:start; } .happy-drive-stories .happy-drive-video{ aspect-ratio: 4 / 3 !important; } /* Keep existing Why Choose Hoora mobile as-is */ .hoora-vision-mission h2,.hoora-why-choose .top-hoora-why-choose{ font-size:24px; text-align:center; width:100% !important; } .hoora-empowering-livelihoods{ font-size:18px; } .hoora-vision-mission h4{ font-size:22px; margin-bottom:5px; margin-top:10px } .hoora-vision-mission p{ font-size:14px; } img.hoora-heading,.hoora-why-choose img.why-choose-hoora-heading{ width:50% !important; margin-right:88px; padding-bottom:16px; } .hoora-vision-mission h3{ margin:0 !important; font-size:20px; } .hoora-para{ max-width:300px; } .hoora-why-choose .nav{ flex-direction:row; display:flex; width:100%; gap:4px; flex-wrap:nowrap; justify-content:center; align-items:center; padding:0 10px; } .hoora-tab-content{ width:100%; margin:0 auto; } .hoora-why-choose .nav-tabs .nav-link{ font-size:10px; padding:10px 5px; text-align: start} .rj-tab-section{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:10px; } .service-card{ flex:0 0 calc(50% - 2.5rem); scroll-snap-align:start; } .service-card:nth-child(3){ flex:0 0 calc(50% - .5rem); margin-right:30%; } .rj-tab-section::-webkit-scrollbar{ display:none; } .rj-tab-section{ -ms-overflow-style:none; scrollbar-width:none; } .hoora-why-choose .service-card .card-body{ font-size:12px; } /* >>> Mobile fix ONLY for "Happy Drive Stories" heading + underline <<< */ .happy-drive-stories .d-flex.align-items-center { display:block !important; text-align:center; } .happy-drive-stories .top-hoora-why-choose { width:100% !important; text-align:center !important; margin:8px 0 4px !important; float:none !important; } .happy-drive-stories img.happy-clients-hoora-heading { display:block !important; float:none !important; width:60% !important; max-width:220px !important; margin:10px auto !important; padding-bottom:0 !important; } } /* SM (576–767px) — larger phones */ @media (min-width: 576px) and (max-width: 767.98px) { .happy-drive-stories .happy-drive-video-body{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:12px !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; } .happy-drive-stories .happy-drive-card{ flex:0 0 calc(50% - 6px) !important; max-width:calc(50% - 6px) !important; scroll-snap-align:start; } .happy-drive-stories .happy-drive-video{ aspect-ratio: 4 / 3 !important; } .happy-drive-stories .happy-drive-video-body::-webkit-scrollbar{ display:none; } .happy-drive-stories .happy-drive-video-body{ -ms-overflow-style:none; scrollbar-width:none; } /* Mobile heading fix also applies here */ .happy-drive-stories .d-flex.align-items-center { display:block !important; text-align:center; } .happy-drive-stories .top-hoora-why-choose { width:100% !important; text-align:center !important; margin:8px 0 4px !important; float:none !important; } .happy-drive-stories img.happy-clients-hoora-heading { display:block !important; float:none !important; width:60% !important; max-width:220px !important; margin:6px auto 0 !important; padding-bottom:0 !important; } } /* MD (768–1023px) — tablets */ @media (min-width: 768px) and (max-width: 1023.98px) { .happy-drive-stories .happy-drive-video-body { gap: 20px !important; } .happy-drive-stories .happy-drive-card{ flex:0 0 calc(33.333% - 13.34px) !important; max-width:calc(33.333% - 13.34px) !important; } .happy-drive-stories .happy-drive-video{ aspect-ratio: 16 / 9; } .hoora-vision-mission h2,.hoora-why-choose .top-hoora-why-choose{ font-size:25px; } .hoora-empowering-livelihoods{ font-size:20px; } .hoora-vision-mission h4{ font-size:24px; margin-bottom:2px; } .hoora-vision-mission p{ font-size:14px; } .download_img img{ transform: unset !important; } } /* LG (1024–1439px) — laptops (4 videos per row) */ @media (min-width: 1024px) and (max-width: 1439.98px) { .happy-drive-stories .happy-drive-video-body{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:16px !important; } .happy-drive-stories .happy-drive-card{ flex:0 0 calc(25% - 12px) !important; max-width:calc(25% - 12px) !important; margin-bottom:16px !important; } } /* XL (>=1440px) — large desktops (4 videos per row) */ @media (min-width: 1440px) { .happy-drive-stories .happy-drive-video-body{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:20px !important; } .happy-drive-stories .happy-drive-card{ flex:0 0 calc(25% - 15px) !important; max-width:calc(25% - 15px) !important; margin-bottom:20px !important; } } /* ===== Download badges: keep in one row on mobile & desktop (ONLY change) ===== */ .svp-bottom .download_img { display: flex !important; flex-wrap: nowrap !important; /* never wrap to next line */ justify-content: center !important; /* center horizontally */ align-items: center !important; gap: 14px !important; /* spacing between badges */ } /* remove any margins from links that could force wrapping */ .svp-bottom .download_img a { flex: 0 0 auto !important; margin: 0 !important; } /* responsive badge sizing so both fit side-by-side on small phones */ .svp-bottom .download_img img { display: block; height: auto; width: 42vw; /* ~84vw total + gap fits on mobile */ max-width: 180px; /* cap size */ } /* slightly larger on >=576px */ @media (min-width: 576px) { .svp-bottom .download_img img { width: 220px; max-width: 220px; } } /* Make SVP cards fully clickable without changing their look */ .svp-link { display: block; text-decoration: none; color: inherit; } .svp-link .svp-box { cursor: pointer; } .svp-link:focus-visible .svp-box, .svp-link:hover .svp-box { outline: none; /* optional: add a subtle hover if you want box-shadow: 0 6px 18px rgba(0,0,0,.12); */ } /* keep text above the bg */ .smart-vehicle-page .svp-stat-has-bg > *:not(.svp-stat-bg-img) { position: relative !important; z-index: 1 !important; } /**/ /* Vision Mission */ .hoora-vision-mission img{ width: 100%; border-radius: 6px !important; } .hoora-vision-mission h2{ font-size: 38px; font-weight: 600; text-transform: capitalize; color:#000000; float: left; width:30%; font-family: 'Lexend-Medium' !important; } img.hoora-heading{ float: right; width:70% !important; } .hoora-vision-mission h4{ font-size: 30px; font-weight: 500; text-transform: capitalize; color:#000000; margin: 12px 0 5px 0; font-family: 'Lexend-Medium' !important; } .hoora-vision-mission p { text-transform: capitalize; font-size: 16px; letter-spacing: 0px; font-family: 'Lexend-Light'; } .hoora-empowering-livelihoods{ font-size: 25px; font-weight: 500; text-transform: capitalize; color:#000000; margin-bottom: 2px; font-family: 'Lexend-Medium' !important; } /*Why Choose Hoora*/ .hoora-why-choose .top-hoora-why-choose{ font-size: 32px; font-weight: 600; text-transform: capitalize; color:#000000; float: left; width:30%; text-align: start; font-family: 'Lexend-Medium' !important; } .hoora-why-choose img.why-choose-hoora-heading { float: right; width: 70% !important; } .happy-drive-stories .top-hoora-why-choose{ font-size: 32px; font-weight: 600; text-transform: capitalize; color:#000000; float: left; width:42%; text-align: start; font-family: 'Lexend-Medium' !important; } .happy-drive-stories img.why-choose-hoora-heading { float: right; width: 58% !important; } .nav-tabs{ flex-direction:column; } /* Card Styling */ .hoora-why-choose .service-card { background-color: #ffcc00; border-radius: 10px; overflow: hidden; text-align: center; transition: all 0.3s ease; width: 100%; } .hoora-why-choose .service-card img { width: 100%; object-fit: cover; } .hoora-why-choose .service-card .card-body { background: #000; color: #fff; padding: 10px; } .hoora-why-choose .nav-tabs .nav-link.active { background: #000 !important; color: #fff !important; width: 100%; border: unset !important; border-radius: 6px; font-family: 'Lexend-Medium' !important; } .hoora-why-choose .nav-tabs .nav-link{ width:100%; text-align: start; } .hoora-why-choose .nav-link{ color: #000 !important; font-family: 'Lexend-Medium' !important; } .hoora-why-choose .nav-tabs .nav-link .hoora-why-choose .accordion-body .hoora-why-choose #home-tab-pane{ border: unset !important; } .hoora-why-choose .nav-item{ border: 1px solid #000; border-radius: 6px; text-align: center !important; width: 100%; } /* Layout Adjustments */ .hoora-why-choose .tab-content-area { display: flex; gap: 20px; } .hoora-why-choose .btn:hover { box-shadow:unset; background: #000; color: #fff; } .hoora-why-choose .btn:active { box-shadow:unset; background: #ffcc00; color: #fff; border:unset !important; } .hoora-why-choose .nav{ gap: 10px; } .coming-soon { background: #f9d74c; text-align: center; padding: 5px; border-radius: 10px; font-weight: 600; } /*responsive*/ @media (min-width: 320px) and (max-width:767px){ .hoora-vision-mission img { height: 60% !important; object-fit: cover; } .hoora-convinience2{ padding-left:4.5px !important; } .hoora-convinience1{ padding-right:4.5px !important; } .smart-vehicle-page .svp-content { gap: 20px; } .svp-box-content img{ width: 140px !important; } .nav-link .arrow{ display: none; } .smart-vehicle-page .svp-heading { font-size: 30px; text-align: center; margin-bottom: 34px; } .hoora-why-choose .nav-tabs .nav-link { text-align: center !important; } .smart-vehicle-page { padding: 40px 30px; } .smart-vehicle-page .svp-content { flex-direction: column; } .smart-vehicle-page .svp-row { flex-direction: row; } .smart-vehicle-page .svp-box1 img{ width: 100% !important; } .smart-vehicle-page .svp-offer { font-size: 12px !important; } .smart-vehicle-page .svp-box1{ padding:15px !important } .smart-vehicle-page .svp-box{ padding:12px !important } h2.top-hoora-why-choose.my-3{ margin-bottom: 0 !important; } .happy-clients-hoora-heading{ float: none !important; } img.hoora-heading.position-absolute { height: 5px; width: 194px; top: 30px; right: -16px; transform: translate(-50%); } .hoora-vision-mission h2,.hoora-why-choose .top-hoora-why-choose{ font-size: 24px; text-align: center; width:100% !important; } .hoora-empowering-livelihoods{ font-size: 18px; } .hoora-vision-mission h4{ font-size: 14px !important; margin-bottom: 5px; font-family: 'Lexend-Medium' !important; margin-top: 10px; } .hoora-vision-mission p { font-size: 12px; font-family: 'Lexend-Medium' !important; } img.hoora-heading,.hoora-why-choose img.why-choose-hoora-heading{ width: 50% !important; margin-right: 88px; padding-bottom: 16px; } .hoora-vision-mission h3{ margin-bottom: 10px !important; font-size: 14px; text-align:center; display: inline-block; font-family: 'Lexend-Medium' !important; } .hoora-para{ max-width: 300px; } .hoora-why-choose .nav { flex-direction: row; display: flex; width: 100%; gap: 14px; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 0px 10px; border: unset; } .hoora-tab-content{ width: 100%; margin: 0 auto; } .hoora-why-choose .nav-tabs .nav-link { font-size: 10px; padding: 10px 5px 10px 5px; } .rj-tab-section { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; /* a bit of scroll space */ } .service-card { flex: 0 0 calc(50% - 2.5rem); /* 2 cards visible */ scroll-snap-align: start; } /* 3rd card — 20% visible */ .service-card:nth-child(3) { flex: 0 0 calc(50% - 0.5rem); margin-right: 30%; /* creates partial visibility */ } /* Optional: hide scrollbar but keep scrollable */ .rj-tab-section::-webkit-scrollbar { display: none; } .rj-tab-section { -ms-overflow-style: none; scrollbar-width: none; } .hoora-why-choose .service-card img { height: 100%; } .hoora-why-choose .service-card .card-body { font-size: 12px; } .smart-vehicle-page .svp-row { flex-direction: row; } .smart-vehicle-page .svp-offer { font-size: 12px !important; } .smart-vehicle-page .svp-box1{ padding:9px !important } .smart-vehicle-page .svp-box{ padding:10px !important } h2.top-hoora-why-choose.my-3{ margin-bottom: 0 !important; } .happy-clients-hoora-heading{ float: none !important; } .happy-drive-stories .happy-drive-video { aspect-ratio: 16 / 16 !important; } .hoora-why-choose .nav-item{ width:auto !important; } } @media (min-width: 768px) and (max-width:1024px){ .hoora-vision-mission h2,.hoora-why-choose .top-hoora-why-choose { font-size: 25px; } .hoora-empowering-livelihoods{ font-size: 20px; } .hoora-vision-mission h4 { font-size: 24px; margin-bottom: 2px; } .hoora-vision-mission p { font-size: 14px; } } /* ===== Desktop (unchanged from before) ===== */ .Offering-dropdown { position: relative; overflow: visible; } .Offering-dropdown > a { position: relative; padding-right: 1.25em; } .Offering-dropdown > a::after { content: "▾"; position: absolute; right: .4em; top: 50%; transform: translateY(-50%); font-size: .85em; opacity: .7; } .Offering-dropdown > .sub-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 220px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.08); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; display: block !important; } .Offering-dropdown:hover > .sub-menu, .Offering-dropdown:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .Offering-dropdown > .sub-menu > li > a, .Offering-dropdown > .sub-menu > li.Offering-dropdown-item > a { display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap; } .Offering-dropdown > .sub-menu > li > a:hover, .Offering-dropdown > .sub-menu > li > a:focus { background: #f3f4f6; outline: none; } /* Let dropdown escape if header/nav clips it */ .site-header, .wp-block-navigation__container, .main-navigation { overflow: visible; } /* ===== Mobile tweaks ===== Make the submenu flow inline (stacked), always visible, and ensure readable text colors inside off-canvas drawers. */ .nav-tabs .nav-link{ border:1px solid transparent !important; } .smart-vehicle-page .svp-box img{ margin-bottom: 0 !important; } .svp-right { padding: 20px; } .svp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: center; grid-template-rows: repeat(10, auto); } .svp-item { grid-row-start: 1; grid-row-end: 8; height: 100%; } .svp-left{ flex-basis: 100%; } .smart-vehicle-page .svp-item1{ grid-row-start: 8; grid-row-end: -1; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; border-radius: 11px; padding: 20px; background-position:100%; } .smart-vehicle-page .svp-box.full, .smart-vehicle-page .svp-box.full{ margin-top: 18px !important; } .svp-img { width: 100%; height: auto; border-radius: 10px; object-fit: cover; } .svp-stat-img { width: 80px; margin-bottom: 10px; } .svp-stat-text { font-size: 1.4rem; font-weight: 700; color: #222; line-height: 1.4; } .svp-stat-text span { display: block; font-size: 1rem; color: #777; } /**/ /*.nav-link { position: relative; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }*/ .nav-link .arrow { width: 10px; height: 10px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); transition: transform 0.3s ease; margin-left: 8px; } .nav-link.active .arrow { transform: rotate(225deg); border-right: 2px solid #fff; border-bottom: 2px solid #fff; } /* .svp-bottom br{ display:none; } */ /* ✅ Responsive */ @media (max-width: 991px) { p.rj-para-hoora.mb-0,.smart-vehicle-page .svp-yellow { font-size: 12px !important; } .svp-bottom { display:block !important; } .coming-soon { padding: 10px 26px; font-size: 12px; display: inline-block; } .happy-drive-stories .top-hoora-why-choose { font-size: 24px; } .hoora-why-choose .nav-tabs .nav-link { text-align: center !important; } .svp-stat-text { font-size: 1.2rem; } .nav-link .arrow ,.nav-link.active .arrow { display: none; } .hoora-why-choose .nav-item { width: auto !important; } } .rj-tab-section{ width: 100%; } .hoora-vision-mission h2{ width: 28%; } .hoora-why-choose .nav-tabs .nav-link{ text-align: start; } img.partner-img{ padding-top:10px !important; padding-bottom:15px !important; } @media (min-width: 430px) and (max-width:768px) { .svp-bottom .download_img { gap: 26px !important; } .smart-vehicle-page .svp-heading { text-align: center; font-size: 38px; font-weight: 700; margin-bottom: 30px; font-family: 'Lexend-Medium' !important; } .smart-vehicle-page .svp-box { flex: 1; background: #fff; border-radius: 16px; box-shadow: 0 4px 15px rgb(0 0 0 / 21%); padding: 9px; text-align: left; } .svp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: px; align-items: center; grid-template-rows: repeat(10, auto); } .smart-vehicle-page .svp-img { height: 100%; width: 100%; object-fit: fill; } .smart-vehicle-page .svp-box h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; font-family: 'Lexend-Medium' !important; } .smart-vehicle-page .svp-offer { display: inline-block; background-color: #2c2a71!important; color: #fff!important; font-weight: 100; font-size: 1rem; padding: 8px 18px 8px 12px; border-radius: 9999px; line-height: 1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); white-space: nowrap; font-family: 'Lexend-Medium' !important; margin-top: 10px; } .smart-vehicle-page .svp-content { display: flex; gap: 16px; } .svp-box-content img{ width: 140px !important; } .smart-vehicle-page .svp-row { display: flex; gap: 14px; align-items: center; } .happy-drive-stories .happy-drive-video { position: relative; width: 80%; aspect-ratio: 16 / 16 !important; height: auto; padding-top: 0; background-color: #eee; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; } .happy-drive-stories .happy-drive-card { flex: 0 0 calc(67.333% - 100.34px) !important; max-width: 100% !important; } .hoora-why-choose .nav-tabs .nav-link { font-size: 12px !important; } .happy-drive-stories .happy-drive-video-body { gap: 20px !important; justify-content: center !important; } .happy-drive-stories .happy-drive-video { position: relative; width: 100%; aspect-ratio: 16 / 16 !important; height: auto; padding-top: 0; background-color: #eee; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; } .happy-drive-stories .video-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; cursor: pointer; z-index: 1; } .smart-vehicle-page .svp-item1{ grid-row-end: -1; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; border-radius: 19px; padding: 35px; } } .hoora-vision-mission img { height: 80%; object-fit:cover; } @media (min-width: 780px) and (max-width:1024px) { .smart-vehicle-page .svp-heading { font-size: 2rem !important; } .happy-drive-stories .happy-drive-card { flex: 0 0 calc(24.333% - 11.34px) !important; } .hoora-why-choose .nav-tabs .nav-link { font-size: 10px; } .hoora-vision-mission h2 { width: 34% !important; } .smart-vehicle-page .svp-content{ justify-content:center; } .smart-vehicle-page .svp-content { flex-wrap: wrap !important; } img.hoora-insurance-img-section { width: 36% !important; } .svp-item1 h2 { font-size: 35px !important; } .svp-item1 p { font-size: 20px !important; } .smart-vehicle-page .svp-item1{ padding: 30px !important; } .smart-vehicle-page .svp-heading { font-size: 38px !important; margin-bottom: 24px; text-align: center; } .hoora-vision-mission img { height: 80% !important;} } .partner-scroll { -webkit-overflow-scrolling: touch; padding-bottom: 10px; overflow-x: auto; overflow-y: hidden; } /* HIDE SCROLLBAR – Chrome, Safari, Edge */ .partner-scroll::-webkit-scrollbar { display: none; } /* HIDE SCROLLBAR – Firefox */ .partner-scroll { scrollbar-width: none; } /* HIDE SCROLLBAR – IE / old Edge */ .partner-scroll { -ms-overflow-style: none; } /* 2 cards in view on small screens */ .partner-scroll .partner-item { flex: 0 0 50%; max-width: 50%; } .faq-image-wrapper { text-align: center; } .faq-tag { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; border: 1px solid #000; /* adjust as per your design */ } .faq-heading { font-size: 32px; font-weight: 700; margin-bottom: 24px; } /* Desktop / large screens – sticky bottom-left */ /* @media (min-width: 992px) { #hero-cta-btn.hero-cta-btn--sticky { position: fixed; left: 40px; right: auto; bottom: 2rem; z-index: 9999; width: auto; } } */ /* Mobile + Tablet – sticky bottom nav (full-width) */ /* @media (max-width: 991.98px) { #hero-cta-btn.hero-cta-btn--sticky { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 6rem; border-radius: 0; z-index: 9999; font-size: 1.2rem; margin: 0 !important; box-shadow: 0px -4px 4px 0px #00000040 !important; background-color: white !important; } } */ /* Countdown Box */ .countdown-box { background: #ecfef0; padding: 25px; border-radius: 12px; margin-top: 20px; text-align: center; } /* Title */ .countdown-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color:#37A205; } /* 2-column CTA layout */ .cta-two-col-layout { display: flex; justify-content: space-between; align-items: center; width: 100%; color: #fff; padding: 0 5px; gap: 10px; } /* Left column */ .cta-col-1 { display: flex; flex-direction: column; align-items: flex; width: 55%; } .cta-seats { font-size: 15px; font-weight: 700; color: #000000; /* yellow-like highlight */ line-height: 21px; } /* Countdown styling inside CTA */ .countdown-in-cta { background: transparent !important; padding: 0 !important; } .countdown-in-cta .countdown-title { display: none !important; } .countdown-in-cta .countdown-time { font-size: 25px; font-weight: 800; color: #37A205; } /* Right column */ .cta-col-2 { width: 45%; text-align: center; font-size: 14px; font-weight: 700; line-height: 18px; background-color: #000; padding: 10px; border-radius: 7px; background: linear-gradient(82.31deg, #FFC117 0%, #FFE300 58.74%); color:black !important; } /*Become a distributor section*/ /*1st section*/ .hoora-distributor-banner-section{ background: #f5f5f5; padding: 50px 0px; } .hoora-distributor-banner h1{ color: #000; font-size: 42px; font-weight: 700; text-transform: capitalize; font-family: 'Lexend-Medium' !important; text-align: center; margin-bottom: 20px; } .hoora-distributor-banner p{ color: #000; font-size: 18px; font-weight: 400; text-transform: capitalize; font-family: 'Lexend-Medium' !important; text-align: center; margin-bottom: 20px; } .hoora-distributor-banner{ margin: 0 auto; display: flex; justify-content: center; flex-direction: column; } .hoora-distributor-banner img{ width: 60%; margin: 0 auto; } .hoora-apply-now-button a{ padding: 12px 30px; border-radius: 6px; display: inline-block; font-size: 20px; font-weight: 600; } .hoora-distributor-banner-responsive-img,.high-quality-product-responsive{ display: none; } /*3rd section*/ #why-become-hoora-section h2,#high-quality-product-section h2{ color: #000; font-size: 35px; font-weight: 700; text-transform: capitalize; font-family: 'Lexend-Medium' !important; text-align: center; margin-bottom: 35px; } .why-become-hoora-card{ border-radius: 14px; /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/ box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px; padding: 0px 0px 36px 0px; width: 33.33%; } .why-become-hoora-card h3{ color: #000; font-size: 22px; font-weight: 400; text-transform: capitalize; font-family: 'Lexend-Medium' !important; text-align: start; position: relative; left: 74px; top: 12px; } .why-become-hoora-card img{ max-width: 165px; } .why-become-hoora-responsive{ display: none; } /*4th*/ /*.high-quality-cards img{ } .high-quality-cards{ background: red; border-radius: 6px; text-align: center; }*/ .high-quality-product h2{ color: #000; font-size: 22px; font-weight: 400; text-transform: capitalize; font-family: 'Lexend-Medium' !important; } .high-quality-product-section-card-img{ width: 100%; object-fit: cover; } #showMoreBtn{ background: #000; color: #fff; font-size: 22px; font-weight: 400; text-transform: capitalize; font-family: 'Lexend-Medium' !important; border-radius: 6px; border:unset !important; } /*testimonila*/ .testimonial-section h2, #media-coverage-section h2{ color: #000; font-size: 35px; font-weight: 700; text-transform: capitalize; font-family: 'Lexend-Medium' !important; text-align: center; margin-bottom: 50px !important; } .testimonial-card { background: #fff; border-radius: 15px; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; justify-content: space-between; } .testimonial-card img{ width: 36%; height: 100%; object-fit: cover; } .stars { color: #ffc107; font-size: 24px; margin-top: -6px; } .testimonial-text { font-size: 14px; line-height: 1.6; color: #626262; font-family: 'Lexend-Medium' !important; } .testimonial-card h6{ background: #000; color: #fff; padding: 10px 12px; font-size: 14px; border-radius: 24px 20px 20px 0px; font-family: 'Lexend-Medium' !important; } .testimonial-card small{ background: #FFE300; font-weight: 600; border-radius: 0px 0px 16px 16px; padding: 0px 12px 6px 10px; font-size: 15px; display: inline-block; } /* HIDE SCROLLBAR */ /*.testimonial-scroll { overflow-x: auto; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; position: relative; } .testimonial-scroll::-webkit-scrollbar { display: none; } @media (max-width: 576px) { .testimonial-card { min-width: 100%; margin-right: 10px; } }*/ /* DESKTOP KEEP YOUR ORIGINAL LAYOUT */ /*@media (min-width: 577px) { .testimonial-card { min-width: 500px; } }*/ .slick-initialized .slick-slide { display: block; margin: 0px 10px; } .slick-initialized .slick-slide{ height: 340px; display: flex !important; } .hoora-show-button{ margin-top: clamp(55px, 3vw, 20px); } /*last*/ .hoora-media-coverage1 { background: #f5f5f5; border-radius: 6px; padding: 20px; max-width: 558px; margin: 0 auto; } .hoora-media-coverage2{ background: #f5f5f5; border-radius: 6px; padding: 20px; max-width: 450px; margin: 0 auto; } .hoora-media-coverage1 p,.hoora-media-coverage2 p{ color: #000; font-size: 20px; border-radius: 24px 20px 20px 0px; font-family: 'Lexend-Medium' !important; text-align: center; } #media-coverage-section img{ width: 100%; } .rj-high-quality{ display: none; } /*form*/ .hoora-become-a-distributor-form h2{ color: #000; font-size: 35px; font-weight: 700; text-transform: capitalize; font-family: 'Lexend-Medium' !important; text-align: center; margin-bottom: 50px !important; } .hoora-become-a-distributor-form h3{ color: #000; font-size: 25px; font-weight: 600; text-transform: capitalize; font-family: Montserrat-Regular !important; margin-bottom:20px !important; } .distributor-form { max-width: 720px; margin: 0 auto; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 12px; padding: clamp(50px, 3vw, 25px); } .distributor-form p{ color: #000; font-size: 14px; font-weight: 300; text-transform: capitalize; font-family: Montserrat-Regular !important; display: flex; gap: 10px; } .discount-radio span{ border: 1px solid #CFD5DB; padding: 14px; border-radius: 6px; color: #000; font-size: 14px; font-weight: 700; text-transform: capitalize; font-family: Montserrat-Regular !important; display: flex; gap: 10px; } .hoora-become-a-distributor-form #submit-partner-manager-sv{ background: #000 !important; padding: 10px 50px; color: #fff !important; border-radius: 6px; border: unset; font-size: 20px; margin-top: 44px !important; } .hoora-become-a-distributor-form .form-control::placeholder { font-size: 16px; } @media (max-width: 767px) { .svp-bottom .download_img{ display:block !important; } .hoora-apply-now-button{ margin-top: 40px; } .hoora-distributor-banner img{ width: 100% !important; } .hoora-distributor-banner h1{ font-size: 22px; line-height: 34px; } .hoora-distributor-banner p{ font-size: 16px; } .hoora-distributor-banner-responsive-img{ display: block; } #why-become-hoora-section h2{ font-size: 22px; } .why-become-hoora-responsive,.high-quality-product-responsive{ display: block; } .why-become-hoora-desktop,.hoora-distributor-banner-responsive-img1{ display: none; } .hoora-apply-now-button a { font-size: 16px; } .why-become-hoora-responsive{ overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; } .why-become-hoora-card img { max-width: 100px; } .why-become-hoora-card h3 { font-size: 16px; } .why-become-hoora-responsive .d-flex { overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 10px; } /* Hide scrollbar */ .why-become-hoora-responsive .d-flex::-webkit-scrollbar,.high-quality-product { display: none; } .why-become-hoora-card { flex: 0 0 68%; /* 1st card 100%, next card peek 20% */ scroll-snap-align: start; white-space: normal; } .why-become-hoora-card h3 { left: 50px } .high-quality-product-responsive { display: flex !important; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 10px; } .high-quality-product-responsive::-webkit-scrollbar { display: none; /* hide scrollbar on mobile */ } .high-quality-product-section-card-img { flex-shrink: 0; /* prevents shrinking */ scroll-snap-align: start; border-radius: 10px; } .high-quality-product-section-card-img:first-child { width: 100%; /* first image full width */ } .high-quality-product-section-card-img { max-width: 140px; object-fit: cover; height: 222px; } .testimonial-text { font-size: 14px; } .testimonial-card h6{ font-size: 12px; padding: 10px 15px; } .testimonial-card small{ padding: 0px 5px 5px 5px; font-size: 12px; } .stars { font-size: 15px; } .testimonial-card img { width: 35%; height: 100%; } .testimonial-card small { position: relative; top: -5px; } .testimonial-section h2, #media-coverage-section h2,#why-become-hoora-section h2, #high-quality-product-section h2, .hoora-become-a-distributor-form h2 { font-size: 25px; margin-bottom: 24px !important; } .hoora-media-coverage1 { max-width: 175px; padding: 6px } .hoora-media-coverage2{ max-width: 140px; padding: 6px } .hoora-media-coverage1 p, .hoora-media-coverage2 p { font-size: 10px; } .rj-high-quality,.high-quality-product-responsive{ display: block; } .hoora-become-a-distributor-form h3{ font-size: 20px; } .slick-initialized .slick-slide { height: 350px; } .distributor-form{ padding:12px !important; } .discount-radio span { padding: 10px !important; font-size: 12px !important; } } @media (min-width: 768px) and (max-width:1024px) { .why-become-hoora-card h3 { font-size: 16px; } .why-become-hoora-card h3 { left: 50px } .why-become-hoora-card img { max-width: 100px; } .high-quality-product-section-card-img { /*max-width: 170px;*/ } .testimonial-text { font-size: 12px; } .testimonial-card h6,.testimonial-card small,.stars { font-size: 14px; } #why-become-hoora-section h2, #high-quality-product-section h2{ margin-bottom: 20px !important; margin-top: 20px; } } .color-green{ color: #4CAF50 !important; } .color-yellow{ color: #000000 !important; background-color: #FFDF02 !important; } .roi-benefits-cards .card-body .card-img img {width: 85px; height: 85px;} /* Default styles for Apply Now button (desktop behavior) */ #hero-cta-new-btn { position: relative; /* Stay in place initially */ top: 20px; /* Adjust position from the top */ left: -3px; /* Adjust position from the left */ z-index: 100; /* Make sure it's above other content */ transition: all 0.3s ease-in-out; /* Smooth transition */ } .video-thumbnail-section { width: 100%; padding: 20px 0; } /* Desktop — 4 cards, no scroll */ .video-scroll { display: flex; gap: 20px; justify-content: space-between; overflow: hidden; /* disable scroll */ } .video-card { width: 25%; /* exactly 4 per row */ border-radius: 14px; overflow: hidden; } .video-card img { /* width: 100%; */ display: block; border-radius: 14px; } /* ============ TABLET ============ */ /* enable scroll, 2 cards + 20% next */ @media (max-width: 992px) { .video-scroll { overflow-x: auto; /* enable scroll */ scroll-behavior: smooth; scroll-snap-type: x mandatory; } .video-card { flex: 0 0 50%; /* 2 full cards + next 20% */ scroll-snap-align: start; } .video-scroll::-webkit-scrollbar { display: none; } } /* ============ MOBILE ============ */ /* enable scroll, 1 full + next 20% */ @media (max-width: 576px) { .video-card { flex: 0 0 44%; /* 1 card + 20% visible next */ } .video-scroll { margin-left: 14px; } } .video-scroll { display: flex; gap: 15px; margin-left: 14px; } .video-card { /* width: 100%; */ height: 100%; overflow: hidden; border-radius: 12px; display: block; position: relative; } .video-card img, .video-card video { /* width: 100%; */ height: 100%; object-fit: cover; } .channel-hero-banner .text-heading span{font-size: 50px; padding-top: 5px !important ; padding-bottom: 5px !important;margin-top: 29px !important;} /* Time */ .countdown-time { font-size: 22px; display: flex; justify-content: center; } .timewrapper { display: flex; flex-direction: row; align-items: flex-start; /* Align everything to top */ } .time-section { display: flex; flex-direction: column; align-items: center; } .time-value { font-size: 24px; font-weight: bold; line-height: 1; height: 30px; /* Fixed height for consistent alignment */ display: flex; align-items: center; justify-content: center; color: #37A205 !important; } .time-label { font-size: 16px; font-weight: 700; color: #000; margin-top: 8px; color: #37A205 !important; } .time-separator { font-size: 24px; font-weight: bold; align-self: flex-start; /* Force colons to top */ margin: 0 10px; /* Horizontal spacing */ line-height: 30px; /* Match time-value height */ height: 30px; /* Same height as numbers */ display: flex; align-items: center; color: #37A205 !important; } /* 🔥 MOBILE RESPONSIVE */ @media (max-width: 768px) { .countdown-box { padding: 18px; border-radius: 10px; margin-top: 5px; } .countdown-title { font-size: 16px; margin-bottom: 6px; } .countdown-time { font-size: 26px; letter-spacing: 1px; } } @media (max-width: 480px) { .countdown-box { padding: 15px; } .countdown-title { font-size: 15px; } .countdown-time { font-size: 22px; display: flex; justify-content: center; gap: 10px; } .time-section { display: flex; flex-direction: column; align-items: center; } .time-value { font-size: 24px; font-weight: bold; line-height: 1; color: red !important; } .time-label { font-size: 14px; color: #666; margin-top: 4px; font-weight: 600; color: red !important; } .time-separator { font-size: 24px; font-weight: bold; align-items: start; margin: 0 5px; color: red !important; } .fixed-apply-btn { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #FFD700; /* Change color if needed */ padding: 10px 0; text-align: center; z-index: 9999; font-size: 16px; font-weight: bold; margin: 0; /* Remove any margin */ box-sizing: border-box; /* Ensure padding is inside the box */ } } /*investor new page*/ .invest-title{ font-weight: 800; } .invest-section { /* Set background image */ background-image: url('../images/investor-bg.png'); background-size: cover; padding: 5% 0; } .invest-title { font-weight: 800; font-size: 57px !important; line-height: 55px !important; } .invest-mobile1{ width: 340px; margin-top: 15px; } } .invest-description { font-size: 1.5rem; margin: 0px 0px 28px 0 !important; } .invest-right1{ display:none; } @media (max-width: 576px) { .invest-title { font-size: 28px !important; line-height: 40px !important; } .invest-left { display: flex !important;; flex-direction: column !important;; justify-content: center !important;; margin: 0 auto !important;; align-items: center !important;; } .invest-mobile1 { width: 282px !important; } .invest-right1{ display: block; } .invest-right{ display: none; } }