html{
font-size:16px;
}
body{
font-family: 'krete', sans-serif;
}
.cta-button{
font-family: 'krete', sans-serif;
}
.banner{
display:flex;
min-height:31.25rem;
max-height:65.5rem;
background:#1f421c;
position:relative;
overflow:hidden;
}
.green-circle{
position:absolute;
width:13.125rem;
height:13.125rem;
background:#567C48;
border-radius:50%;
top:12.5rem;
left:5rem;
z-index:1;
}
.banner-container{
display:flex;
width:100%;
position:relative;
z-index:2;
gap:1.25rem;
min-height:65.5rem;
}
.banner-content{
flex:1;
display:flex;
padding:0;
flex-direction:column;
justify-content:center;
position:relative;
z-index:3;
box-sizing:border-box;
}
.text-content{
padding:0rem 2.85rem 0rem 8.55rem;
}
.banner-title{
font-size:3.5rem;
font-weight:700;
color:#FCF5F2;
margin-bottom:1.25rem;
line-height:100%;
max-width:31.25rem;
font-family:'kretebold', sans-serif !important;
}
.banner-text{
font-size:1.25rem;
color:#cad1ca;
margin-bottom:2.1875rem;
max-width:28.125rem;
line-height:140%;
}
.cta-button{
display:inline-block;
padding:0.75rem 2.5rem;
background:#E54F18;
color:#F5F5F5 !important;
text-decoration:none;
border-radius:1.875rem;
font-weight:500;
transition:all 0.3s ease;
width:fit-content;
}
.cta-button:hover{
transform:translateY(-2px);
background:#ff5722;
box-shadow:0 5px 20px rgba(255, 107, 53, 0.3);
}
.banner-image{
flex:1;
position:relative;
min-height:31.25rem;
}
.banner-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
@media (max-width: 992px){
.banner-content{
padding:3.75rem 2.5rem;
}
.banner-title{
font-size:2.5rem;
}
.banner-text{
font-size:1rem;
}
}
@media (max-width: 768px){
.banner{
min-height:auto;
}
.banner-container{
flex-direction:column;
}
.green-circle{
width:9.375rem;
height:9.375rem;
top:6.25rem;
left:5.625rem;
transform:translateX(-50%);
}
.banner-content{
text-align:center;
align-items:center;
justify-items:center;
}
.text-content{
display:flex;
flex-direction:column;
padding:3.125rem 1.875rem;
align-items:center;
}
.banner-title{
font-size:2rem;
}
.banner-text{
font-size:1rem;
}
.cta-button{
margin:0 auto;
}
.banner-image{
width:100%;
}
}
@media (max-width: 480px){
.green-circle{
width:13.125rem;
height:13.125rem;
top:6.25rem;
left:1.875rem;
}
.banner-content{
padding:2.5rem 1.25rem;
}
.banner-title{
font-size:1.75rem;
}
.banner-text{
font-size:0.95rem;
}
.cta-button{
padding:0.75rem 1.875rem;
font-size:0.95rem;
}}