.millisense_why_flower{
user-select: none;
select: none;
/* padding: 140px 20px; */
}
.flower__sections{
position: relative;
}
.flower__wrapper{
transform: scale(0.95);
display: grid;
grid-template-areas: "left center right";
grid-template-columns: 1fr auto 1fr;
align-items: center;
justify-content: center;
gap: 50px;
.flower__btn{
border: 2px solid #FFFF;
color: #FFFFFF;
border-radius: 8px;
text-align: center;
font-family: 'averta-regular', Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22.4px;
letter-spacing: 0.5px;
padding: 27px 60px;
min-width: 220px;
transition: all .3s;
&:hover{
transition: all .3s;
background: #FFFFFF;
color: #000000;
}
}
}
.flower__center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -83px;
margin-top: -67px;
}
.flower--band{
width: 820px;
height: 820px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
position: relative;
background-position: center;
background-size: cover;
background-image: url('data:image/svg+xml,');
}
.flower__section{
background: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform-origin: center;
}
.flower__section--content{
width: 190px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 190px;
flex-direction: column;
font-size: 23.47px;
line-height: 29.9px;
font-family: 'averta-extrabold';
}
.flower__overlay--wrapper{
position: absolute;
left: 0;
top: 8px;
width: 100%;
height: 100%;
right: 0;
bottom: 0;
z-index: 9999;
align-items: center;
justify-content: center;
display: none;
}
.flower__overlay{
background-color: #69c350;
border-radius: 50%;
max-width: 700px;
width: 100%;
height: 700px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
display: none;
position: relative;
.close-icon{
top: 20px;
right: 20px;
position: absolute;
cursor: pointer;
}
.flower__overlay--content{
max-width: 480px;
.flower__overlay--content--inner{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 35px;
.flower__overlay--content--inner--title{
font-size: 45.67px;
line-height: 130%;
letter-spacing: 0.457px;
font-family: 'averta-extrabold';
}
.flower__overlay--content--inner--headline{
font-size: 23px;
font-style: normal;
font-weight: 400;
line-height: 29.9px; /* 130% */
}
.flower__overlay--content--inner--description{
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 135%; /* 21.6px */
letter-spacing: 0.48px;
}
}
}
.flower__overlay--content--inner--btn{
color: #000000;
background-color: transparent;
border: 2px solid #000000;
border-radius: 8px;
padding: 11px 56px;
transition: all .3s;
&:hover{
background-color: #000000;
color: #FFFFFF;
transition: all .3s;
}
}
}
@media screen and (max-width: 1500px) {
.flower__wrapper {
grid-template-areas: "center center"
"left right";
grid-template-columns: 1fr 1fr;
> div:nth-child(1){
grid-area: left;
}
> div:nth-child(2){
grid-area: center;
margin: 0 auto;
}
> div:nth-child(3){
grid-area: right;
}
}
}
@media screen and (max-width: 820px) {
.flower__overlay{
border-radius: 0;
justify-content: flex-start;
text-align: left;
max-width: 390px;
height: auto;
.flower__overlay--content--inner--title{
margin-top: 20px;
}
.flower__overlay--content{
padding: 35px;
.flower__overlay--content--inner{
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 15px;
}
}
.close-icon{
top: 30px;
right: 30px;
path{
stroke: #000000;
}
}
.flower__overlay--content--inner--icon svg{
height: 52px;
width: auto;
}
}
}
@media screen and (max-width: 775px) {
/** User Scale in combination with screen width */
.millisense_why_flower {
padding-top: 120px;
padding-bottom: 120px;
}
.flower__wrapper{
transform: scale(0.95);
}
}
@media screen and (max-width: 725px) {
.flower__wrapper{
transform: scale(0.85);
}
.millisense_why_flower{
padding-top: 100px;
padding-bottom: 100px;
}
}
@media screen and (max-width: 675px) {
.flower__wrapper{
transform: scale(0.75);
}
.millisense_why_flower{
padding-top: 60px;
padding-bottom: 60px;
}
}
@media screen and (max-width: 575px) {
.flower__wrapper{
transform: scale(0.65);
}
.millisense_why_flower{
padding-top: 40px;
padding-bottom: 40px;
}
}
@media screen and (max-width: 500px) {
.flower__wrapper{
transform: scale(0.55);
}
.millisense_why_flower{
padding-top: 20px;
padding-bottom: 20px;
}
}
@media screen and (max-width: 400px) {
.flower__wrapper{
transform: scale(0.45);
}
.millisense_why_flower{
padding-top: 0px;
padding-bottom: 0px;
}
.flower--band {
margin-top: -35vh !important;
}
}