body{overflow:hidden auto}.main{position:relative;overflow:hidden;display:flex}.main_content{position:absolute;z-index:3;bottom:0;color:#eee;padding:30px 16px;display:flex;flex-direction:column;gap:10px;@media screen and (min-width:768px){width: fit-content; top: 50%; transform: translateY(-50%); bottom: inherit; } @media screen and (min-width: 1024px) { padding: 0 100px; } @media screen and (min-width: 1440px) { gap: 24px; } } .main_content_title { font-family: "Montserrat"; font-size: 26px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; opacity: .9; margin: 0; @media screen and (min-width: 768px) { font-size: 34px; } @media screen and (min-width: 1440px) { font-size: 64px; } } .main_content_text { font-family: "Montserrat"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; @media screen and (min-width: 768px) { font-size: 22px; } @media screen and (min-width: 1440px) { font-size: 40px; } } .main_background { width: 100%; height: auto; z-index: 1; aspect-ratio: 1 / 1; @media screen and (min-width: 768px) { aspect-ratio: inherit; } } .main_image { top: 0; right: -2px; z-index: 2; width: auto; height: 100%; position: absolute; } .benefits { display: flex; flex-direction: column; padding: 0 16px; @media screen and (min-width: 1024px) { padding: 0 100px; } } .benefits_title { color: #000; font-family: "Montserrat"; font-size: 32px; font-style: normal; font-weight: 700; @media screen and (min-width: 1024px) { font-size: 64px; } } .main__slider { display: flex; } .slider__item { flex-shrink: 0; width: 140px; height: 180px; margin: 0; padding: 0; } .slider__item picture { display: block; width: 100%; height: 100%; } .slider__item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; } .main__slider .slick-list { overflow: visible; } .main__slider .slick-slide { width: 140px; height: 180px; margin: 0 6px; position: relative; @media screen and (min-width: 768px) { width: 290px; height: 364px; } } .main__slider .slick-dots { display: flex; justify-content: flex-start; align-items: center; gap: 6px; margin-top: 20px; } .main__slider .slick-dots li { width: 20px; height: 4px; margin: 0; list-style: none; @media screen and (min-width: 440px) { width: 40px; } @media screen and (min-width: 1024px) { width: 120px; } } .main__slider .slick-dots li button { display: block; padding: 0; width: 100%; height: 4px; border: none; background-color: #075BB866; cursor: pointer; transition: background-color 0.3s ease; font-size: 0; color: transparent; border-radius: 4px; } .main__slider .slick-dots li button:before { content: none; } .main__slider .slick-dots li.slick-active { width: 40px; @media screen and (min-width: 440px) { width: 80px; } @media screen and (min-width: 1024px) { width: 200px; } } .main__slider .slick-dots li.slick-active button { background-color: #043199; } .main__slider .slider__item_text { padding: 0 12px; position: absolute; color: #EEE; text-align: center; font-family: 'Montserrat'; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; top: 56%; @media screen and (min-width: 768px) { font-size: 24px; } } .store_title { color: #000; font-family: "Montserrat"; font-size: 32px; font-style: normal; font-weight: 700; padding: 0 16px; @media screen and (min-width: 1024px) { padding: 0 100px; } @media screen and (min-width: 1024px) { font-size: 64px; } } .store_list { display: flex; overflow: auto; padding: 0 32px; gap: 32px; scrollbar-width: none; -ms-overflow-style: none; @media screen and (min-width: 1024px) { padding: 0 132px; gap: 44px; } } .store_list::-webkit-scrollbar { display: none; } .store_list_item { position: relative; border-radius: 8px; color: #FFFFFF; min-width: 288px; max-width: 482px; background-size: cover; flex: 1; } .store_list_item:first-child { background-image: url("/images/franchise/gradient.jpg"); background-position: 50% 50%; } .store_list_item:last-child { background-image: url("/images/franchise/gradient_premium.jpg"); background-position: 30%; } .store_list_item_title { position: relative; display: flex; gap: 10px; flex-wrap: nowrap; padding: 14px; @media screen and (min-width: 1024px) { padding: 20px; } } .store_list_item:before { content: ""; position: absolute; width: 42px; height: 42px; left: -16px; background-position: 30% 50%; border-radius: 50%; @media screen and (min-width: 1024px) { width: 64px; height: 64px; left: -24px; } } .store_list_item_logo { width: 100px; height: 14px; @media screen and (min-width: 1024px) { width: 172px; height: 24px; } } .store_list_item_prem { width: 98px; height: 14px; @media screen and (min-width: 1024px) { width: 164px; height: 24px; } } .store_list_item:first-child:before { background-image: url("/images/franchise/gradient.jpg"); background-position: 32% 50%; @media screen and (min-width: 1024px) { background-position: 30% 50%; } } .store_list_item:last-child:before { background-image: url("/images/franchise/gradient_premium.jpg"); background-position: 29% 50%; @media screen and (min-width: 1024px) { background-position: 28%; } } .store_list_item_options { padding: 0 40px 16px 32px; display: flex; flex-direction: column; gap: 14px; @media screen and (min-width: 1024px) { padding: 16px 60px 24px 60px; } } .store_list_item_options li { font-family: "Montserrat"; color: #FFF; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; @media screen and (min-width: 1024px) { font-size: 24px; } } .banner { display: flex; flex-direction: column; margin: 32px 0; @media screen and (min-width: 1024px) { margin: 110px 0; } } .banner_image_wrapper { position: relative; width: 100%; min-height: 300px; display: flex; justify-content: flex-end; flex-direction: column; @media screen and (min-width: 768px) { min-height: 400px; justify-content: center; } } .banner_picture { width: 100%; height: auto; z-index: 1; } .banner_picture img { width: 100%; object-fit: cover; display: block; height: auto; } .banner_content { position: absolute; z-index: 2; padding: 16px; @media screen and (min-width: 1024px) { padding: 100px; } } .banner_text { color: #FFF; font-family: "Montserrat"; font-size: 32px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: left; @media screen and (min-width: 1024px) { font-size: 64px; line-height: normal; } } .banner_subtext { color: #FFF; font-size: 32px; font-style: normal; font-weight: 700; text-transform: uppercase; text-align: left; margin-top: 12px; font-family: "Montserrat"; @media screen and (min-width: 1024px) { font-size: 64px; line-height: normal; margin-top: 55px; } } .banner_button { width: 100%; padding: 10px; border-radius: 2px; background: #070708; color: #FFF; text-align: center; font-family: "Montserrat"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; max-width: 340px; margin: 32px auto; @media screen and (min-width: 1024px) { margin: 60px auto 24px auto; } } .support { background-image: url("/images/franchise/gradient.jpg"); background-size: cover; background-position: 50% 50%; } .support_title { color: #ffffff; font-family: "Montserrat"; text-transform: uppercase; font-size: 32px; font-style: normal; font-weight: 700; padding: 32px 16px; margin: 0; text-wrap: wrap; @media screen and (min-width: 1024px) { padding: 60px 100px; font-size: 64px; } } .support_list { display: flex; overflow: auto; padding: 0 16px 40px 16px; gap: 32px; scrollbar-width: none; -ms-overflow-style: none; @media screen and (min-width: 1024px) { padding: 0 70px 100px 70px; } } .support_list::-webkit-scrollbar { display: none; } .support_list_item { position: relative; border-radius: 12px; min-width: 288px; flex: 1; background-color: #FFFFFFCC; padding: 20px 16px; @media screen and (min-width: 1024px) { min-width: 360px; } } .support_list_item li { font-family: "Montserrat"; } .support_list_item_image { width: 100%; height: auto; object-fit: contain; display: flex; border-radius: 8px; } .support_list_item_title { color: #000; margin: 16px 0; font-family: "Montserrat"; font-size: 12px; font-style: normal; font-weight: 700; line-height: normal; @media screen and (min-width: 1024px) { font-size: 16px; } } .support_list_item_options { padding: 0 32px 0 16px; display: flex; flex-direction: column; gap: 14px; color: #000; font-family: "Montserrat"; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; @media screen and (min-width: 1024px) { font-size: 16px; } } .support_list_item_options_text::marker { color: #043199 } .process_title { font-family: "Montserrat"; text-transform: uppercase; font-size: 32px; font-style: normal; font-weight: 700; padding: 32px 16px; margin: 0; text-wrap: wrap; @media screen and (min-width: 1024px) { padding: 60px 100px; font-size: 64px; } } .process_list { padding: 0 20px 0 8px; max-width: 1280px; @media screen and (min-width: 768px) { display: flex; gap: 16px; } @media screen and (min-width: 1024px) { padding: 0 100px; gap: 85px; } } .process_side { flex: 1; } .process_item { display: flex; position: relative; padding-bottom: 16px; } .process_circle { min-width: 12px; min-height: 12px; max-width: 12px; max-height: 12px; border-radius: 50%; background-color: #043199; margin: 10px; @media screen and (min-width: 1024px) { min-width: 24px; min-height: 24px; max-width: 24px; max-height: 24px; margin: 10px 24px; } } .process_circle:before { content: ""; position: absolute; top: 15px; left: 15px; height: 100%; width: 2px; background: #043199; @media screen and (min-width: 1024px) { top: 34px; left: 35px; } } .process_circle.last:before { content: none; } .left_side_last:before { @media screen and (min-width: 768px) { content: none; } } .process_content { display: flex; flex-direction: column; gap: 8px; } .process_step { border-radius: 8px; background: #043199; padding: 8px 16px; color: #FFF; font-family: "Montserrat"; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; width: 100px; @media screen and (min-width: 1024px) { font-size: 16px; width: 138px; } } .process_text { color: #888; font-family: "Montserrat"; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; max-width: 465px; @media screen and (min-width: 1024px) { font-size: 14px; } } .footer { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; @media screen and (min-width: 768px) { flex-direction: row; align-items: center; } @media screen and (min-width: 1024px) { padding: 0 100px; max-width: 1440px; margin: 100px auto 0 auto; } } .footer_content { padding: 0 16px; display: flex; flex-direction: column; @media screen and (min-width: 768px) { width: 50%; } } .footer_title { font-family: "Montserrat"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 40px; text-transform: uppercase; margin-bottom: 32px; } .footer_description { font-family: "Montserrat"; font-size: 18px; font-style: normal; font-weight: 600; line-height: 25px; } .footer_images { display: flex; margin-top: 40px; } .footer_images_1 { width: 200px; height: 200px; @media screen and (min-width: 1440px) { width: 280px; height: 280px; } } .footer_images_2 { display: flex; flex-direction: column; } .footer_images_2 img { width: 100px; @media screen and (min-width: 1440px) { width: 160px; } } .footer_images_2 img:last-child { margin-top: -20px; margin-left: 40px; @media screen and (min-width: 1440px) { margin-left: 60px; } } .form { padding: 30px 16px; background-image: url("/images/franchise/gradient.jpg"); background-size: cover; background-position: 80% 10%; display: flex; flex-direction: column; @media screen and (min-width: 768px) { width: 50%; padding: 40px; } @media screen and (min-width: 1024px) { padding: 40px 84px 84px 84px; } } .form_label { display: flex; flex-direction: column; gap: 8px; color: #FFF; font-family: "Montserrat"; font-size: 10px; font-style: normal; font-weight: 400; line-height: normal; margin-bottom: 24px; @media screen and (min-width: 1024px) { font-size: 14px; } } .form_input { background: #FFF; border: none; outline: none; padding: 4px; @media screen and (min-width: 1024px) { padding: 10px; } } .form_button { margin-top: 20px; background: #000000; color: #FFF; text-align: center; font-family: "Montserrat"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; border-radius: 2px; padding: 10px; border: none; cursor: pointer; transition: .3s; @media screen and (min-width: 1024px) { max-width: 180px; margin: 12px auto 0 auto; width: 100%; } } .form_button:hover { background: #191919; } .form_notification { position: relative; padding: 12px 16px; border-radius: 4px; font-family: "Montserrat"; font-size: 14px; font-weight: 400; line-height: 1.4; opacity: 0; transition: opacity 0.3s ease,transform 0.3s ease; pointer-events: none; display: none; @media screen and (min-width: 1024px) { font-size: 16px; padding: 16px 20px; } } .form_notification.show { opacity: 1; display: flex; transform: translateY(0); pointer-events: auto; } .form_notification.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .form_notification.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }}}