* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Helvetica Neue";
src: url("./fonts/helvetica/HelveticaNeue-CondensedBold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Helvetica Neue Bold";
src: url("./fonts/helvetica/HelveticaNeueBold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Helvetica Neue";
src: url("./fonts/helvetica/HelveticaNeue-Medium.otf") format("opentype");
font-weight: 500; /* Medium is typically 500 */
font-style: normal;
}
@font-face {
font-family: "Helvetica Neue";
src: url("./fonts/helvetica/HelveticaNeue-Regular.ttf") format("opentype");
font-weight: 400; /* Medium is typically 500 */
font-style: normal;
}
body {
background: #ebf3f7;
font-family: "Inter", sans-serif;
}
.container {
width: 100%;
max-width: 1340px;
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
.navbar-area {
margin-top: 24px;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* .primary-button{
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 18px;
border-radius: 28px;
background: #1E8FCB;
text-decoration: none;
} */
.primary-button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 18px;
border-radius: 28px;
background: #1e8fcb;
text-decoration: none;
color: #fff;
font-family: "Helvetica Neue";
font-size: 16px;
font-style: normal;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
font-weight: 500;
line-height: 20px; /* 125% */
text-transform: uppercase;
text-decoration: none;
}
.primary-button:hover {
background: #1573a5;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
transform: translateY(-3px);
}
.primary-button:active {
transform: translateY(1px);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}
.hero-img{
max-width: 520px;
/* max-height: 600px; */
object-fit: cover;
}
.padding {
padding: 18px 36px;
}
/* banner area style */
.hide {
display: none;
}
.banner-area {
margin: 56px 0px 130px 0px;
}
.banner-content-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
align-items: center;
}
.banner-heading {
max-width: 597px;
color: #182230;
font-family: "Helvetica Neue", sans-serif;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 64px */
letter-spacing: -0.64px;
}
.banner-left-content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 60px;
}
.banner-left-content h3 {
color: var(--Gray-700, #344054);
font-family: "Helvetica Neue Bold", sans-serif;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 28px */
letter-spacing: -0.28px;
margin: 32px 0px 32px 0px;
}
.banner-description {
max-width: 528px;
color: var(--Gray-700, #344054);
font-family: "Helvetica Neue", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.mt-8{
margin-top: 8px;
}
.bottom-content {
margin-top: 44px;
}
.bottom-p {
max-width: 428px;
color: var(--Gray-700, #344054);
font-family: "Helvetica Neue", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 19.6px */
letter-spacing: -0.14px;
margin-top: 16px;
}
.banner-right-content {
display: flex;
justify-content: end;
position: relative;
align-items: center;
}
.franchicse-featured-wrap {
display: flex;
flex-direction: column;
gap: 12px;
position: absolute;
left: 0;
bottom: -10%;
}
.single-featured {
max-width: 394px;
display: flex;
gap: 14px;
padding: 16px;
border-radius: 16px;
background: #fff;
}
.featured-description {
max-width: 324px;
color: var(--Gray-800, #182230);
font-family: "Helvetica Neue Bold", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
.banner-right-content svg {
flex-shrink: 0;
margin-top: 3px;
}
/* footer area style */
footer {
background: #092d40;
}
.footer-content-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: 33px 0px;
}
.footer-content-wrap p {
color: rgba(255, 255, 255, 0.8);
text-align: right;
font-family: "Helvetica Neue", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 19.6px */
}
/* Responsive for 1024px */
@media (max-width: 1024px) {
.banner-content-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
/* gap: 25px; */
}
.banner-left-content h3 {
margin: 25px 0px 25px 0px;
}
.banner-heading {
max-width: 480px;
font-size: 42px;
}
.banner-description {
max-width: 440px;
font-size: 15px;
}
.banner-right-content img {
width: 90%;
}
}
/* Responsive for Tablet */
@media (max-width: 768px) {
.single-featured {
max-width: 324px;
display: flex;
gap: 7px;
padding: 14px;
border-radius: 16px;
background: #fff;
}
.banner-heading {
max-width: 480px;
font-size: 32px;
}
.banner-description {
max-width: 332px;
}
.banner-left-content h3 {
color: var(--Gray-700, #344054);
font-family: "Helvetica Neue", sans-serif;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: 100%;
letter-spacing: -0.28px;
margin: 25px 0px 25px 0px;
}
.banner-right-content img {
width: 100%;
}
.bottom-content {
margin-top: 25px;
}
.featured-description {
max-width: 319px;
font-size: 14px;
font-weight: 700;
line-height: 22px;
}
.bottom-p {
max-width: 324px;
}
.footer-content-wrap p {
font-size: 13px;
}
.banner-right-content svg {
width: 18px;
}
}
/* Responsive for Movile */
@media (max-width: 480px) {
.container {
padding: 0px 16px;
}
.banner-left-content {
padding-top: 0px;
}
.banner-left-content h3 {
font-size: 20px;
margin: 20px 0px 20px 0px;
letter-spacing: .5px;
}
.banner-right-content {
display: flex;
flex-direction: column;
position: relative;
}
.single-featured {
max-width: 100%;
}
.footer-content-wrap {
padding: 25px 0px;
}
.navbar img {
width: 70%;
}
.mt-20{
margin-top: 20px;
}
.primary-button {
color: #fff;
font-family: "Helvetica Neue";
font-size: 13px;
font-style: normal;
padding: 8px 18px;
font-weight: 500;
line-height: 20px;
text-transform: uppercase;
text-decoration: none;
gap: 4px;
flex-shrink: 0;
}
.padding {
padding: 12px 24px;
width: 100%;
}
.banner-content-wrap {
display: grid;
grid-template-columns: 1fr;
/* gap: 25px; */
}
.banner-content-wrap {
display: grid;
grid-template-columns: 1fr;
/* gap: 30px; */
}
.banner-description {
font-size: 14px;
line-height: 20px;
max-width: 100%;
}
.bottom-content {
display: none;
}
.hide {
display: block;
padding-top: 170px;
}
.bottom-p {
max-width: 100%;
}
.banner-area {
margin: 32px 0px 32px 0px;
}
.banner-heading {
max-width: 100%;
font-size: 32px;
}
.franchicse-featured-wrap {
display: flex;
flex-direction: column;
gap: 12px;
position: absolute;
left: 0;
bottom: 22%;
}
.featured-description {
max-width: 100%;
}
.footer-content-wrap p {
font-size: 12px;
text-align: left;
}
.svg-icon {
display: none;
}
svg {
width: 16px;
}
}