@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap");
@import url(https://db.onlinewebfonts.com/c/782f2c02e556ab4fef462a7d4c859fa9?family=Mundial-Regular);
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body {
overflow-x: hidden;
}
img {
width: 100%;
height: auto;
}
a,
ol,
ul,
li,
p {
list-style-type: none;
text-decoration: none;
margin: 0px;
font-family: "Mundial-Regular";
}
a {
display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
padding: 0px;
font-family: "Space Grotesk", sans-serif;
}
ul {
padding: unset;
} .site_btn {
display: inline-flex;
background: #fff;
border-radius: 60rem;
padding: 23px 36px;
align-items: center;
justify-content: center;
font-weight: 700;
color: #001432;
transition: 0.55s;
}
.site_btn.alt {
background-color: #000000;
color: #fff;
}
.site_btn.alt:hover {
background-color: #fff;
color: #000000;
}
.site_btn:hover {
background: #009aff;
color: #fff;
} .site_ctn {
width: 100%;
max-width: 1510px;
margin: 0 auto;
} header {
background: rgba(241, 241, 241, 0.07);
backdrop-filter: blur(10rem);
-webkit-backdrop-filter: blur(10rem);
padding: 34px 35px 34px 110px;
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: all 0.4s;
}
header.scrolled {
background: rgba(0, 20, 50, 0.75);
padding-top: 20px;
padding-bottom: 20px;
z-index: 1;
}
header .header_innerwrap {
display: flex;
align-items: center;
justify-content: space-between;
}
header .header_innerwrap .header_links_wrap {
display: flex;
align-items: center;
gap: 40px;
}
header .header_innerwrap .header_links_wrap nav ul {
display: flex;
align-items: center;
gap: 30px;
}
header .header_innerwrap .header_links_wrap nav ul li a {
font-weight: 700;
font-size: 17px;
line-height: 17px;
color: #fff;
position: relative;
}
header .header_innerwrap .header_links_wrap nav ul li a::after {
position: absolute;
top: calc(100% + 10px);
height: 2px;
width: 0;
background: #fff;
content: "";
left: 0;
transition: 0.55s;
}
header .header_innerwrap .header_links_wrap nav ul li a:hover:after {
width: 100%;
}
header .header_innerwrap .header_links_wrap .header_btn_wrap {
display: flex;
align-items: center;
gap: 15px;
}  section.banner {
background-image: url(//smartmaitfranchise.com/wp-content/themes/bmg-theme/images/banner_bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
align-items: flex-end;
}
section.banner .banner_outtewrap {
display: flex;
align-items: center;
justify-content: flex-end;
}
section.banner .banner_outtewrap .banner_cntnt {
width: 100%;
max-width: 684px;
padding: 275px 0;
}
section.banner .banner_outtewrap .banner_image {
width: 100%;
max-width: 49%;
position: relative;
align-self: end;
}
section.banner .banner_outtewrap .banner_cntnt h1 {
font-style: normal;
font-weight: 700;
font-size: 80px;
line-height: 102px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.eyebro {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
color: #ffffff;
font-family: "Mundial-Regular";
margin-bottom: 42px;
display: inline-block;
text-transform: uppercase;
}  section.join {
padding: 130px 15px;
}
section.join .join_outterwrap {
width: 100%;
max-width: 1240px;
margin: 0 auto;
text-align: center;
}
section.join .join_outterwrap .join_head {
}
section.join .join_outterwrap .join_head h2 {
font-weight: 700;
font-size: 60px;
line-height: 76px;
color: #00265f;
margin-bottom: 51px;
}
section.join .join_outterwrap .join_head p {
font-size: 20px;
line-height: 32px;
color: #001432;
width: 100%;
max-width: 80%;
margin: 0 auto;
}  section.franchise {
background-color: #f1f1f1;
padding: 134px 15px 125px;
}
section.franchise.alt {
background-color: unset;
}
section.franchise .franchise_outterwrap {
display: flex;
gap: 88px;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
section.franchise .franchise_outterwrap .franchise_cntnt_wrap {
width: 100%;
max-width: 45%;
}
section.franchise .franchise_outterwrap .franchise_cntnt_wrap h2 {
font-weight: 700;
font-size: 60px;
line-height: 77px;
color: #00265f;
}
section.franchise .franchise_outterwrap .franchise_cntnt_wrap .franchise_cntnt {
position: sticky;
top: 100px;
}
section.franchise .franchise_outterwrap .franchise_cntnt_wrap p {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #001432;
margin-top: 26px;
}
section.franchise .franchise_outterwrap .franchise_list_wrap {
width: 100%;
max-width: 65%;
display: flex;
flex-direction: column;
gap: 60px;
}
section.franchise
.franchise_outterwrap
.franchise_list_wrap
.franchise_list_block {
display: flex;
gap: 52px;
}
section.franchise
.franchise_outterwrap
.franchise_list_wrap
.franchise_list_block
.franchise_list_icon
img {
width: 68px;
height: 68px;
}
section.franchise
.franchise_outterwrap
.franchise_list_wrap
.franchise_list_block
.franchise_list_cntnt {
flex: 1;
}
section.franchise
.franchise_outterwrap
.franchise_list_wrap
.franchise_list_block
.franchise_list_cntnt
h3 {
font-weight: 700;
font-size: 28px;
line-height: 32px;
color: #00265f;
margin-bottom: 20px;
}
section.franchise
.franchise_outterwrap
.franchise_list_wrap
.franchise_list_block
.franchise_list_cntnt
p {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #001432;
margin-bottom: 15px;
}
section.franchise
.franchise_outterwrap
.franchise_list_wrap
.franchise_list_block
.franchise_list_cntnt
ul {
padding-left: 20px;
}
section.franchise
.franchise_outterwrap
.franchise_list_wrap
.franchise_list_block
.franchise_list_cntnt
ul
li {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #001432;
list-style-type: disc;
}  section.looking {
background-image: url(//smartmaitfranchise.com/wp-content/themes/bmg-theme/images/looking_bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 140px 15px;
}
section.looking .looking_outterwrap {
display: flex;
justify-content: flex-end;
}
section.looking .looking_outterwrap .looking_cntnt {
width: 100%;
max-width: 50%;
}
section.looking .looking_outterwrap .looking_cntnt h2 {
font-weight: 700;
font-size: 60px;
line-height: 77px;
color: #ffffff;
margin-bottom: 23px;
}
section.looking .looking_outterwrap .looking_cntnt p {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #f1f1f1;
margin-bottom: 53px;
}
section.looking .looking_outterwrap .looking_cntnt ul li {
font-weight: 400;
font-size: 24px;
line-height: 50px;
color: #f1f1f1;
}  section.breakdown {
padding: 130px 15px;
}
section.breakdown .breakdown_outterwrap {
border: 3px solid #d9d9d9;
border-radius: 20px;
padding: 70px 195px 70px 102px;
display: flex;
gap: 134px;
align-items: flex-end;
}
section.breakdown .breakdown_outterwrap .breakdown_head h2 {
width: 336px;
font-weight: 700;
font-size: 60px;
line-height: 66px;
color: #00265f;
}
section.breakdown .breakdown_outterwrap .breakdown_block_wrap {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
section.breakdown .breakdown_outterwrap .breakdown_block_wrap .breakdown_block {
background: #f1f1f1;
border-radius: 20px;
padding: 20px 40px;
}
section.breakdown
.breakdown_outterwrap
.breakdown_block_wrap
.breakdown_block
h4 {
font-weight: 700;
font-size: 30px;
line-height: 48px;
text-align: center;
color: #001432;
text-align: center;
}
section.breakdown
.breakdown_outterwrap
.breakdown_block_wrap
.breakdown_block
p {
font-weight: 300;
font-size: 20px;
line-height: 24px;
text-align: center;
text-transform: uppercase;
color: #001432;
}  section.different {
padding: 30px 15px 130px;
}
section.different .different_outterwrap {
}
section.different .different_outterwrap .different_head {
width: 100%;
max-width: 619px;
margin-bottom: 42px;
}
section.different .different_outterwrap .different_head h2 {
font-weight: 700;
font-size: 60px;
line-height: 77px;
color: #00265f;
}
section.different .different_outterwrap .different_block_mainwrap {
position: relative;
padding-right: 80px;
}
section.different .different_outterwrap .different_block_mainwrap .dfrnt_bg {
border-radius: 15px;
position: absolute;
left: 0;
top: 0;
height: 630px;
object-fit: cover;
z-index: -1;
}
section.different .different_outterwrap .different_block_innerwrap {
width: 100%;
max-width: 671px;
margin-left: auto;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
top: -82px;
}
section.different
.different_outterwrap
.different_block_innerwrap
.different_block {
background: #00265f;
border-radius: 20px;
padding: 40px;
}
section.different
.different_outterwrap
.different_block_innerwrap
.different_block
h3 {
font-weight: 700;
font-size: 28px;
line-height: 36px;
color: #f1f1f1;
margin-bottom: 30px;
}
section.different
.different_outterwrap
.different_block_innerwrap
.different_block
p {
font-weight: 300;
font-size: 20px;
line-height: 32px;
color: #f1f1f1;
}  section.launch {
padding: 0 15px;
}
section.launch .launch_outterwrap {
}
section.launch .launch_outterwrap .launch_head {
}
section.launch .launch_outterwrap .launch_head h2 {
font-weight: 700;
font-size: 60px;
line-height: 76px;
text-align: center;
color: #00265f;
margin-bottom: 109px;
}
section.launch .launch_innerwrap {
width: 100%;
max-width: 823px;
margin: 0 auto;
display: flex;
gap: 140px;
}
section.launch .launch_innerwrap .launch_head {
width: 100%;
max-width: 178px;
}
section.launch .launch_innerwrap .launch_list_wrap {
display: flex;
flex-direction: column;
gap: 74px;
position: relative;
}
section.launch .launch_innerwrap .launch_list_wrap:before {
content: "";
width: 3px;
height: 90%;
background-color: #cedbf0;
position: absolute;
left: -57px;
top: 0;
}
section.launch .launch_innerwrap .launch_list_block {
position: relative;
}
section.launch .launch_innerwrap .launch_list_block::before {
content: "";
position: absolute;
width: 36px;
height: 36px;
background-color: #cedbf0;
border-radius: 50px;
left: -74px;
top: 0;
}
section.launch .launch_innerwrap .launch_list_block h3 {
font-weight: 700;
font-size: 28px;
line-height: 32px;
color: #00265f;
margin-bottom: 20px;
}
section.launch .launch_innerwrap .launch_list_block p {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #001432;
}  section.faqs {
padding: 131px 70px 80px;
}
section.faqs .faqs_outterwrap {
display: flex;
align-items: center;
}
section.faqs .faqs_outterwrap .faqs_image {
width: 100%;
max-width: 40%;
}
section.faqs .faqs_outterwrap .faqs_image img {
border-radius: 15px;
}
section.faqs .faqs_outterwrap .faqs_cntnt_wrap {
background: #001432;
border-radius: 0px 30px 30px 0;
padding: 45px 90px 69px 60px;
width: 100%;
max-width: 60%;
}
section.faqs .faqs_outterwrap .faqs_cntnt_wrap h2 {
font-weight: 700;
font-size: 60px;
line-height: 77px;
color: #ffffff;
margin-bottom: 64px;
}
section.faqs .faqs_outterwrap .faqs_cntnt_wrap .faqs_list_wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 92px;
row-gap: 60px;
padding: 0 30px;
}
section.faqs .faqs_outterwrap .faqs_cntnt_wrap .faqs_list_wrap .faq_list_block {
}
section.faqs
.faqs_outterwrap
.faqs_cntnt_wrap
.faqs_list_wrap
.faq_list_block
h3 {
font-weight: 700;
font-size: 28px;
line-height: 36px;
color: #f1f1f1;
margin-bottom: 15px;
}
section.faqs
.faqs_outterwrap
.faqs_cntnt_wrap
.faqs_list_wrap
.faq_list_block
p {
font-weight: 300;
font-size: 20px;
line-height: 32px;
color: #f1f1f1;
}   #integrator_banner {
}
#integrator_banner .banner_outtewrap {
flex-direction: column;
justify-content: center;
}
#integrator_banner .banner_outtewrap .banner_cntnt {
max-width: 734px;
padding: 275px 0 78px;
text-align: center;
}
#integrator_banner .banner_outtewrap .banner_image {
max-width: 100%;
margin-bottom: -200px;
}
#integrator_banner .banner_outtewrap .banner_image img {
border-radius: 20px;
}  #integrator_join {
padding: 260px 15px 130px;
}
#integrator_join .join_outterwrap .join_head ul {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 50px;
}
#integrator_join .join_outterwrap .join_head ul li {
font-size: 20px;
line-height: 32px;
color: #001432;
width: 100%;
max-width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
#integrator_join .join_outterwrap .join_head:last-child {
margin-top: 120px;
}
#integrator_join .join_outterwrap .join_head:last-child h2 {
margin-bottom: 10px;
}
section.join .join_outterwrap .join_head .join_who_block ul {
flex-direction: row !important;
justify-content: space-between !important;
margin-top: 92px !important;
}
section.join .join_outterwrap .join_head .join_who_block ul li {
display: flex;
flex-direction: column;
text-align: left !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 186px !important;
justify-content: flex-start !important;
margin: unset !important;
}
section.join .join_outterwrap .join_head .join_who_block ul li img {
width: 80px;
margin-bottom: 40px;
}
section.join .join_outterwrap .join_head .join_who_block ul li span {
padding-left: 20px;
}  section.whatnot {
padding: 123px 15px 198px;
}
section.whatnot .whatnot_outterwrap {
width: 100%;
max-width: 1240px;
margin: 0 auto;
display: flex;
}
section.whatnot .whatnot_outterwrap .whatnot_block {
width: 50%;
position: relative;
}
section.whatnot .whatnot_outterwrap .whatnot_block:last-child {
padding-left: 57px;
}
section.whatnot .whatnot_outterwrap .whatnot_block:last-child::after {
content: none;
}
section.whatnot .whatnot_outterwrap .whatnot_block::after {
content: "";
background-color: #d0d5d7;
right: 0;
top: 50%;
position: absolute;
width: 2px;
height: 120%;
transform: translateY(-50%);
}
section.whatnot .whatnot_outterwrap .whatnot_block h3 {
height: 128px;
width: 100%;
max-width: 554px;
font-weight: 700;
font-size: 50px;
line-height: 64px;
color: #00265f;
margin-bottom: 51px;
}
section.whatnot .whatnot_outterwrap .whatnot_block ul {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
width: 100%;
max-width: 510px;
}
section.whatnot .whatnot_outterwrap .whatnot_block ul li {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #001432;
display: flex;
align-items: baseline;
gap: 10px;
}
section.whatnot .whatnot_outterwrap .whatnot_block ul svg {
width: 27px;
position: relative;
top: 7px;
}
section.whatnot .whatnot_outterwrap .whatnot_block p {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #001432;
margin-bottom: 15px;
}  section.franchisor {
}
section.franchisor .franchisor_outterwrap {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
section.franchisor .franchisor_outterwrap .franchisor_head h2 {
font-weight: 700;
font-size: 59.896px;
line-height: 76px;
text-align: center;
color: #00265f;
width: 100%;
max-width: 700px;
margin: 0 auto;
margin-bottom: 120px;
}
section.franchisor .franchisor_innerwrap {
display: flex;
justify-content: space-between;
gap: 58px;
}
section.franchisor .franchisor_innerwrap .franchisor_block {
width: 33%;
text-align: center;
}
section.franchisor .franchisor_innerwrap .franchisor_block img {
width: 100%;
max-width: 190px;
height: 190px;
object-fit: contain;
margin-bottom: 31px;
}
section.franchisor .franchisor_innerwrap .franchisor_block h4 {
font-weight: 700;
font-size: 45px;
line-height: 57px;
text-align: center;
color: #00265f;
}  section.step {
padding: 163px 15px 143px;
}
section.step .step_outterwrap {
background-color: #001432;
border-radius: 20px;
padding: 80px 15px 104px;
}
section.step .step_outterwrap .step_head h2 {
font-weight: 700;
font-size: 59.896px;
line-height: 76px;
text-align: center;
color: #f1f1f1;
}
section.step .steps_innerwrap {
margin: 143px 0 72px;
display: flex;
gap: 40px;
justify-content: space-between;
}
section.step .steps_innerwrap .steps_block {
padding: 69px 50px 50px;
border-radius: 20px;
background-color: #00265f;
width: 33%;
position: relative;
display: flex;
align-items: flex-end;
}
section.step .steps_innerwrap .steps_block span {
display: flex;
justify-content: center;
align-items: center;
background-color: #009aff;
width: 127.28px;
height: 127.28px;
border-radius: 50%;
font-family: "Space Grotesk";
font-weight: 400;
font-size: 93.8108px;
line-height: 120px;
text-align: center;
color: #ffffff;
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
}
section.step .steps_innerwrap .steps_block .steps_block_cntnt h5 {
font-weight: 700;
font-size: 45px;
line-height: 57px;
color: #ffffff;
margin-bottom: 40px;
}
section.step .steps_innerwrap .steps_block .steps_block_cntnt p {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #ffffff;
}
.steps_btn_wrap {
text-align: center;
}
.steps_btn_wrap .site_btn {
font-size: 26px;
text-transform: uppercase;
}   footer .footer_outterwrap .footer_top {
display: flex;
}
footer .footer_outterwrap .footer_top .footer_logo_wrap {
width: 100%;
max-width: 50%;
background-color: #001432;
border-radius: 30px 30px 0 0;
padding: 75px 93px 90px 170px;
}
footer .footer_outterwrap .footer_top .footer_getstarted_wrap {
width: 100%;
max-width: 50%;
border-radius: 30px;
background-color: #f1f1f1;
padding: 44px 168px 60px 93px;
display: flex;
align-items: center;
}
footer
.footer_outterwrap
.footer_top
.footer_getstarted_wrap
.site_btn.alt:hover {
background-color: #009aff;
color: #fff;
}
footer .footer_outterwrap .footer_top .footer_getstarted_wrap h3 {
font-weight: 700;
font-size: 46px;
line-height: 59px;
color: #001432;
}
footer .footer_outterwrap .footer_btm_wrap {
padding: 60px 150px 60px 170px;
background-color: #001432;
margin-top: -30px;
}
footer .footer_outterwrap .footer_btm_wrap {
display: flex;
align-items: flex-start;
}
footer .footer_outterwrap .footer_btm_wrap .footer_links_wrap {
width: 100%;
max-width: 50%;
display: flex;
align-items: flex-start;
}
footer .footer_outterwrap .footer_btm_wrap .footer_links_wrap ul {
columns: 2;
width: 100%;
max-width: 60%;
}
footer .footer_outterwrap .footer_btm_wrap .footer_links_wrap ul li a {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16.5866px;
line-height: 35px;
color: #ffffff;
}
footer .footer_outterwrap .footer_btm_wrap .footer_social_links {
width: 100%;
max-width: 50%;
text-align: right;
}
footer .footer_outterwrap .footer_btm_wrap .footer_social_links ul {
display: flex;
justify-content: flex-end;
gap: 15px;
}
footer .footer_outterwrap .footer_btm_wrap .footer_social_links ul li {
padding: 15px;
border-radius: 50px;
background: #8c95a3;
display: inline-block;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.4s;
}
footer .footer_outterwrap .footer_btm_wrap .footer_social_links ul li:hover {
background: #009aff;
}
footer .footer_outterwrap .footer_btm_wrap .footer_social_links ul li i {
font-size: 25px;
color: #001432;
}
footer .footer_outterwrap .copy_right {
padding: 100px 0 38px 210px;
background-color: #001432;
position: relative;
}
footer .footer_outterwrap .copy_right::before {
content: "";
position: absolute;
background-image: url(//smartmaitfranchise.com/wp-content/themes/bmg-theme/images/copy_bg_logo.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
footer .footer_outterwrap .copy_right p,
footer .footer_outterwrap .copy_right a {
font-weight: 400;
font-size: 16.5866px;
line-height: 16px;
color: #ffffff;
position: relative;
}  .hamburger {
width: 25px;
height: 20px;
position: relative;
cursor: pointer;
display: none;
}
.line {
position: absolute;
height: 2px;
width: 100%;
background: #fff;
border-radius: 5px;
transition: all 0.4s ease;
} .line:nth-child(1) {
top: 0;
}
.line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.line:nth-child(3) {
bottom: 0;
} .hamburger.active .line:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.hamburger.active .line:nth-child(2) {
opacity: 0;
}
.hamburger.active .line:nth-child(3) {
bottom: auto;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}  .custom-popup-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 43, 0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.custom-popup-overlay.active {
opacity: 1;
visibility: visible;
}
.custom-popup {
background: #1b52a4;
width: 450px;
max-width: 90%;
padding: 40px;
border-radius: 10px;
text-align: center;
position: relative;
transform: scale(0.8);
transition: transform 0.35s ease;
}
.custom-popup-overlay.active .custom-popup {
transform: scale(1);
}
.custom-popup h3 {
color: #fff;
margin-bottom: 10px;
}
.custom-popup p {
color: #fff;
margin-bottom: 25px;
}
.custom-popup input {
width: 100%;
padding: 12px;
margin-bottom: 12px;
border: 1px solid #fff;
border-radius: 6px;
}
.custom-popup button[type="submit"] {
background: #fff;
color: #1b52a4;
border: none;
padding: 12px 22px;
border-radius: 6px;
cursor: pointer;
}
.popup-close {
position: absolute;
right: 15px;
top: 12px;
font-size: 22px;
background: none;
border: none;
cursor: pointer;
color: #fff;
}