.hero-container {
margin: 0 auto;
padding-left: calc((100% - 1440px) / 2);
width: 100%;
box-sizing: border-box;
}
.overlay-content {
max-width: 672px;
position: relative;
z-index: 2;
}
.full-height-header-grid {
height: calc(100vh - 180px);
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
box-sizing: border-box;
margin: 0 15px;
}
.full-height-header-grid::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(109.09deg, rgba(10, 31, 49, 0.8) 18.9%, rgba(10, 31, 49, 0) 108.82%);
z-index: 1;
border-radius: 10px;
margin: 0 15px;
}
.hero-top-content {
text-align: left;
}
.hero-top-content .content-block a {
color:white;
text-decoration:underline;
}
.hero-top-content .content-block {
max-width: 633px;
}
.full-height-header-wrapper {
position: relative;
background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);
}
.full-height-header-wrapper .image-block img {
max-width: 100%;
height: auto;
}
.full-height-header-wrapper .title-block h1 {
font-size: var(--font-h1);
color: var(--white-color);
margin: 0;
max-width: 100%;
font-weight: 700;
font-size: 60px;
line-height: 120%;
}
.full-height-header-wrapper .content-block p {
font-weight: var(--font-weight-light);
color: var(--white-color);
font-size: var(--font-base);
line-height: 32px;
letter-spacing: 0%;
max-width: 617px;
margin: 0px;
margin-top: 10px;
}
.full-height-header-wrapper .content-block {
margin-top: 15px;
}
.full-height-header-wrapper .hero-buttons {
margin-top: 30px;
}
.full-height-header-wrapper .hero-buttons .btn:nth-child(2) {
background: transparent;
color: var(--white-color);
border: 1px solid var(--white-color);
margin-left: 12px;
padding: 15px 30px 15px 30px;
}
.full-height-header-wrapper .hero-buttons .btn:nth-child(2)::before {
content: none;
}
.full-height-header-wrapper .hero-buttons .btn:hover {
background: var(--white-color);
color: var(--secondary-color);
transition: .2s ease-in-out;
border-color: var(--white-color);
}
.full-height-header-grid .hero-list-main {
background: var(--white-color);
border-top-left-radius: 15px;
padding: 14px 0 0 14px;
position: relative;
z-index: 2;
margin-left: auto;
margin-top: auto;
width: 100%;
}
.full-height-header-grid .hero-list-main .hero-address-list {
background: var(--secondary-color);
padding: 40px 60px;
display: flex;
justify-content: space-between;
align-items: baseline;
border-radius: 14px;
}
.full-height-header-grid .hero-address-list .address-item {
text-align: left;
}
.full-height-header-grid .hero-address-list .address-item h3 {
font-weight: var(--font-weight-medium);
font-size: var(--font-h3);
color: var(--primary-color);
margin: 0;
line-height: 30px;
letter-spacing: 0%;
}
.full-height-header-grid .hero-address-list .address-item p {
font-weight: var(--font-weight-light);
color: var(--white-color);
font-size: var(--font-base);
line-height: 32px;
margin: 0;
}
.hero-author-wrapper {
position: relative;
z-index: 1;
display: flex;
align-items: center;
background: transparent;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
padding: 10px;
max-width: 351px;
margin-left: auto;
margin-top: auto;
width: 100%;
gap: 20px;
margin-bottom: 40px;
overflow: hidden;
}
.hero-author-wrapper::before {
content: "";
position: absolute;
inset: 0;
background: #0A1F31B2;
backdrop-filter: blur(10px);
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
z-index: -1;
}
.hero-author-wrapper .author-image {
height: 113px;
}
.hero-author-wrapper .author-image img {
width: 113px;
height: 113px;
border-radius: 50%;
object-fit: cover;
}
.hero-author-wrapper .content .author-name {
font-weight: 700;
font-size: 17px;
line-height: 32px;
letter-spacing: 0px;
color: var(--white-color);
margin: 0;
}
.hero-author-wrapper .content .author-button {
font-weight: 400;
font-size: 17px;
line-height: 32px;
color: #FFFFFFCC;
position: relative;
margin-top: 10px;
}
.hero-author-wrapper .content .author-button::after {
content: "";
position: absolute;
right: -30px;
width: 20px;
height: 20px;
background-image: url(https://rinxs.nl/wp-content/uploads/2025/07/right.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 19px;
transition: transform 0.3s ease;
top: 0px;
}
.hero-author-wrapper .content .author-button:hover::after {
transform: translateX(4px);
transition: transform 0.3s ease;
}
@media only screen and (max-width: 1440px) {
.full-height-header-grid {
flex-direction: column;
}
.full-height-header-grid {
height: calc(100vh - 30px);
margin: 0;
}
.full-height-header-grid .hero-list-main {
margin-top: auto;
width: 70%;
}
.full-height-header-wrapper .title-block h1,
.full-height-header-wrapper .content-block p {
max-width: 100%;
}
.overlay-content {
margin-top: 250px;
}
.hero-container {
padding-right: 15px;
padding-left: 15px;
}
.hero-author-wrapper{
overflow: visible;
}
.full-height-header-wrapper{
padding: 0 30px;
margin: 0;
}
.full-height-header-grid::before{
margin: 0 30px;
}
}
@media only screen and (max-width: 767px) {
.full-height-header-wrapper{
padding: 0 15px;
margin: 0;
}
.full-height-header-grid::before{
margin: 0 15px;
}
}
@media only screen and (max-width: 1000px) {
.full-height-header-wrapper .title-block h1 {
line-height: 100%;
}
.mobile .hero-list-main {
width: 100%;
box-sizing: border-box;
border-radius: 15px;
padding: 0 15px;
background: var(--white-color);
position: relative;
z-index: 2;
}
.mobile .hero-list-main .hero-address-list {
flex-wrap: wrap;
gap: 20px;
padding: 40px 20px;
background: var(--secondary-color);
display: flex;
justify-content: space-between;
align-items: baseline;
border-radius: 14px;
}
.mobile .hero-address-list .address-item {
text-align: left;
}
.mobile .hero-address-list .address-item h3 {
font-weight: var(--font-weight-medium);
font-size: var(--font-h3);
color: var(--primary-color);
margin: 0;
line-height: 30px;
letter-spacing: 0%;
}
.mobile .hero-address-list .address-item p {
font-weight: var(--font-weight-light);
color: var(--white-color);
font-size: var(--font-base);
line-height: 32px;
margin: 0;
}
.desktop-hero-list {
display: none;
}
.mobile {
display: block;
width: 100%;
box-sizing: border-box;
}
.overlay-content {
margin-top: 170px;
}
.full-height-header-grid::before {
height: calc(100vh - 30px);
}
}
@media only screen and (max-width: 950px) {
.full-height-header-wrapper {
margin-bottom: 0;
}
.hero-author-wrapper {
margin-bottom: 40px;
}
.overlay-content {
max-width: 100%;
}
}
@media only screen and (max-width: 775px) {
.overlay-content .hero-bottom-content .bottom-left,
.overlay-content .hero-bottom-content .bottom-right,
.overlay-content .hero-bottom-content .bottom-left h3 {
display: block;
}
.hero-bottom-content {
padding: 0 30px 15px;
}
.overlay-content .hero-bottom-content .bottom-left h3 {
border: none;
margin-bottom: 15px;
}
.overlay-content .hero-bottom-content .bottom-left,
.overlay-content .hero-bottom-content .bottom-right {
width: auto;
}
.full-height-header-wrapper .hero-buttons .btn:nth-child(2) {
padding: 9px 20px 9px 20px;
}
.full-height-header-wrapper .title-block h1 {
font-size: 38px;
line-height: 120%;
}
}
@media only screen and (max-width: 620px) {
.hero-container {
padding-right: 15px;
padding-left: 15px;
}
.full-height-header-grid,
.full-height-header-grid::before{
height: calc(858px - 30px);
}
}
@media only screen and (max-width: 550px) {
.full-height-header-wrapper .content-block p {
line-height: 32px;
}
.hero-container {
margin-bottom: 40px;
}
.overlay-content{
margin-top: 120px;
}
}
@media only screen and (max-width: 450px) {
.hero-author-wrapper .author-image img{
width: 100px;
height: 100px;
}
.hero-author-wrapper .author-image{
height: 100px;
}
.hero-author-wrapper{
max-width: 320px;
}
}
@media only screen and (max-width: 430px) {
.overlay-content {
margin-top: 80px;
}
.hero-author-wrapper{
width: calc(100% - 30px);
overflow: visible;
}
}
@media only screen and (max-width: 424px){
.full-height-header-wrapper .hero-buttons .btn:nth-child(2){
margin-left: 0;
margin-top: 10px;
}
}