footer {
background-color: var(--darkblue);
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/02/white-line.svg);
}
.footer-copyrights::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/02/white-line.svg);
}
footer .footer-inner {
padding-left: 80px;
padding-right: 80px;
padding-top: 56px;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
margin: 0 auto;
padding-bottom: 56px;
position: relative;
}
@media (max-width: 768px) {
footer .footer-inner {
padding-left: 24px;
padding-right: 24px;
}
}
footer .footer-inner::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 1px;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/02/white-line.svg);
}
footer .footer-inner .first {
position: relative;
grid-column: span 5 / span 5;
}
footer .footer-inner .first::before,
footer .footer-inner .second::before {
content: '';
position: absolute;
bottom: -120px;
right: 0;
width: 1px;
height: 179%;
background-image: url(//traditionalyacht.com/wp-content/uploads/2024/02/verti-line.svg);
}
footer .footer-inner .second {
position: relative;
grid-column: span 5 / span 5;
row-gap: 24px;
}
footer .footer-inner .third {
grid-column: span 2 / span 2;
row-gap: 24px;
}
@media (max-width: 1015px) {
footer .footer-inner .first,
footer .footer-inner .second,
footer .footer-inner .third {
grid-column: span 12 / span 12;
}
footer .footer-inner .second::before,
footer .footer-inner .first::before {
display: none;
}
}
footer .footer-copyrights {
position: relative;
}
footer .copyright-grid .first {
position: relative;
grid-column: span 5 / span 5;
}
footer .copyright-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
padding-top: 21px;
padding-bottom: 21px;
}
footer .copyright-grid .second {
position: relative;
grid-column: span 5 / span 5;
}
footer .copyright-grid .third {
grid-column: span 2 / span 2;
}
@media (max-width: 1015px) {
footer .copyright-grid {
padding-top: 0px;
padding-bottom: 0px;
}
footer .copyright-grid .second {
grid-column: span 12 / span 12;
text-align: center;
}
footer .footer-inner .second::before,
footer .footer-inner .first::before {
display: none;
}
}
footer .footer-image .btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
footer .footer-image .btn {
padding: 16px;
}
footer .footer-image img {
height: 200px;
object-fit: cover;
}
}