.banner {
position: relative;
width: 100%;
min-height: 90vh;
font-size: 18px;
background: linear-gradient(107.24deg, var(--primary-color) 0.3%, var(--secondary-light-color) 132.84%);
color: #fff;
}
.banner-title {
font-weight: 700;
font-size: 48px;
}
.banner-sub-title {
font-weight: 400;
font-size: 40px;
line-height: 66px;
}
.banner-sand {
color: #000;
background-color: var(--secondary-color);
padding: 8px 18px;
}
.banner-desc {
border-left: 1px solid #fff;
padding: 16px 21px;
width: 75%;
margin-top: 5rem;
margin-bottom: 3rem;
} .about-us {
padding-top: 140px;
padding-bottom: 140px;
} .mission-vision {
padding: 0;
padding-bottom: 140px;
}
.bg-our-mission {
background-image: linear-gradient(107.24deg, var(--primary-color) 0.3%, var(--secondary-light-color) 132.84%);
border-radius: 0 200px 0 0;
height: 200px;
}
.our-mission, .our-vision {
position: relative;
z-index: 1;
padding: 140px 60px;
}   
.bg-our-vision {
background-image: linear-gradient(107.24deg, var(--primary-color) 0.3%, var(--secondary-light-color) 132.84%);
transform: rotate(180deg);
border-radius: 0 200px 0 0;
height: 200px;
}
.big-white-logo {
position: absolute;
background-image: url(//lawgenix.co.th/wp-content/themes/lawgenix/assets/image/big-white-logo.png);
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
display: none;
}
.big-white-logo-mobile-top, .big-white-logo-mobile-bottom {
width: 50%;
position: absolute;
top: 80px;
left: 25%;
}
.big-white-logo-mobile-bottom {
transform: rotate(180deg);
}
@media(min-width: 576px) {
.big-white-logo-mobile-top, .big-white-logo-mobile-bottom {
top: 50px;
}
}
@media (min-width: 768px) {
.banner-title {
font-weight: 700;
font-size: 78px;
}
.banner-sub-title {
font-weight: 400;
font-size: 70px;
line-height: 96px;
}
.banner-sand {
color: #000;
background-color: var(--secondary-color);
padding: 8px 18px;
}
.banner-desc {
border-left: 1px solid #fff;
padding: 16px 21px;
width: 40%;
margin-top: 5rem;
margin-bottom: 3rem;
margin-left: auto;
}
.mission-vision {
min-height: 100vh;
}
.bg-our-mission {
height: auto;
}
.bg-our-vision {
height: auto;
z-index: -1;
}
.big-white-logo {
display: block;
}
.big-white-logo-mobile-top, .big-white-logo-mobile-bottom {
display: none;
}
}
@media(min-width: 1200px) {
.banner {
height: 90vh;
}
.banner-title {
font-weight: 700;
font-size: 111px;
}
.banner-sub-title {
font-weight: 400;
font-size: 100px;
line-height: 140px;
}
.banner-sand {
color: #000;
background-color: var(--secondary-color);
padding: 22px 28px;
}
.banner-desc {
border-left: 1px solid #fff;
padding: 16px 21px;
width: 25%;
position: absolute;
top: 206px;
right: 60px;
margin: 0;
}
}