@charset "UTF-8";
html, body {
font-size: 16px;
margin: 0 auto;
padding: 0;
font-family: "PorscheNext";
background-color: #fafafa;
min-height: 100vh;
scroll-behavior: smooth;
max-width: 1920px;
}
@media (max-width: 780px) {
html, body {
font-size: 14px;
}
}
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
*, *::after, *::before {
box-sizing: border-box;
}
table, th, td {
border: 0;
vertical-align: top;
padding: 0;
}
/* Fix mobile Safari increase font-size on landscape mode */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
}
/* Reapply the pointer cursor for anchor tags */
a,
button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol,
ul,
menu,
summary {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input,
textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
box-sizing: border-box;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
/* Remove details summary webkit styles */
::-webkit-details-marker {
display: none;
}
strong {
font-weight: 600;
}
.ot-floating-button__open,
.ot-floating-button__close {
display: grid;
place-items: center;
}
.c-baner {
position: relative;
line-height: 0;
}
@media (max-width: 780px) {
.c-baner {
max-height: 480px;
height: 50vh;
}
}
.c-baner__content {
position: absolute;
bottom: 15%;
left: 0;
right: 0;
max-width: calc(1532px + 10vw);
margin: 0 auto;
padding: 0 5vw;
color: #fff;
padding-right: 5vw;
}
.c-baner__title {
font-size: clamp(32px, 5vw, 64px);
line-height: 1.2;
font-weight: 400;
}
.c-baner__subline {
font-size: clamp(16px, 3vw, 28px);
font-weight: 400;
line-height: 1.2;
}
.c-baner__img {
object-fit: cover;
min-height: 100%;
min-width: 100%;
}
@media (max-width: 960px) {
.c-baner__subline {
font-size: 1rem;
max-width: 75%;
}
}
.c-baner--width {
height: auto;
}
.c-baner--width .c-baner__img {
max-width: 100%;
min-height: 50%;
}
.c-buttonssection {
padding: 0 5vw 5rem 5vw;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.c-buttonssection__button {
border-radius: 4px;
padding: 15px 28px;
text-align: center;
font-size: 16px;
}
.c-buttonssection__button--black {
border: 2px solid rgb(1, 2, 5);
background-color: rgb(1, 2, 5);
color: #fff;
}
.c-buttonssection__button--white {
border: 2px solid rgb(1, 2, 5);
background-color: #fff;
color: rgb(1, 2, 5);
}
.c-phototextsection {
margin: 5rem 5vw 5rem 5vw;
}
.c-phototextsection__item {
color: #fff;
width: 100%;
height: 100%;
}
.c-phototextsection__item--photo {
line-height: 0;
width: 100vw;
max-width: 748px;
overflow: hidden;
height: 100vh;
max-height: 490px;
}
.c-phototextsection__item--photo img {
object-fit: cover;
transition: transform 0.25s;
min-height: 100%;
min-width: 100%;
}
@media (max-width: 780px) {
.c-phototextsection__item--photo img {
min-height: 331px;
min-width: 100%;
}
}
@media (max-width: 780px) {
.c-phototextsection__item--photo {
height: 331px;
}
}
.c-phototextsection__item--text {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 4vw;
background: rgb(1, 2, 5);
}
@media (max-width: 780px) {
.c-phototextsection__item--text {
min-height: auto;
}
}
.c-phototextsection__item--text h2 {
font-size: 2rem;
font-weight: 700;
margin: 1rem 0;
}
.c-phototextsection__item--text p {
font-size: 1.25rem;
margin: 1rem 0;
margin-bottom: 2rem;
}
.c-phototextsection__item--text a {
border: 2px solid #fff;
border-image-source: linear-gradient(-90deg, #00AEEF 0%, #FFCF5B 33%, #D71920 69%, #F26522 100%);
padding: 15px 28px;
text-decoration: none;
color: #fff;
font-size: 16px;
transition: all 0.15s;
border-image-slice: 1;
border-radius: 4px;
}
.c-phototextsection__item--text a:hover {
background-color: rgba(148, 149, 152, 0.18);
border-color: rgb(136, 137, 140);
backdrop-filter: blur(32px);
}
.c-phototextsection__wrap {
margin: 0 auto;
width: 100%;
max-width: 1532px;
background-color: rgb(1, 2, 5);
border-radius: 12px;
overflow: hidden;
}
@media (min-width: 780px) {
.c-phototextsection__wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.c-phototextsection:hover .c-phototextsection__item--photo img {
transform: scale(1.1);
}
.c-topimagesection {
margin: 5rem 0 0 0;
background: linear-gradient(to bottom, black 90%, white 70%);
}
.c-topimagesection__title {
color: #fff;
font-size: clamp(32px, 5vw, 64px);
font-weight: 700;
text-align: center;
margin-top: -5vw;
position: relative;
z-index: 2;
}
.c-topimagesection__image {
position: relative;
z-index: 1;
}
.c-topimagesection__image::after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%);
}
.c-photo {
margin: 5rem 5vw 0 5vw;
}
.c-photo__wrap {
max-width: 1314px;
border-radius: 12px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.c-photo__image {
max-width: auto;
min-width: 100%;
object-fit: cover;
}
@media (min-width: 780px) {
.c-photo--90 .c-photo__wrap {
padding-right: 10%;
}
}
@media (min-width: 780px) {
.c-photo--60 .c-photo__wrap {
padding-right: 30%;
}
}
.c-phototext {
margin: 5rem 5vw 0 5vw;
}
.c-phototext__wrap {
max-width: 1314px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 2rem;
}
@media (max-width: 768px) {
.c-phototext__wrap {
flex-direction: column;
}
}
.c-phototext__title {
font-size: clamp(28px, 5vw, 56px);
line-height: clamp(28px, 5vw, 56px);
margin-bottom: 2rem;
}
.c-phototext__col {
width: 100%;
max-width: 714px;
}
.c-phototext__col--photo {
border-radius: 12px;
overflow: hidden;
}
.c-phototext__col--photo img {
object-fit: cover;
min-height: 100%;
}
.c-phototext__col--text {
display: flex;
justify-content: center;
align-items: center;
max-width: 476px;
}
.c-phototext__button {
background-color: #fff;
color: rgb(1, 2, 5);
font-size: 17px;
line-height: 25px;
padding: 15px 28px;
border-radius: 4px;
display: inline-block;
margin-top: 2rem;
border: 1px solid rgb(1, 2, 5);
}
.c-phototext__button--black {
background-color: rgb(1, 2, 5);
color: #fff;
}
@media (max-width: 768px) {
.c-phototext__button {
display: block;
text-align: center;
margin-bottom: 1rem;
}
}
.c-phototext--white {
color: #fff;
}
@media (min-width: 780px) {
.c-phototext--overlap {
margin-top: -7%;
margin-bottom: -10%;
z-index: 7;
position: relative;
}
}
.c-offerslider {
margin-top: 7rem;
margin-bottom: 5rem;
}
@media screen and (max-width: 960px) {
.c-offerslider {
margin-top: 3rem;
margin-bottom: 3rem;
}
}
.c-offerslider__title {
font-size: clamp(2rem, 4vw, 51px);
font-weight: 700;
margin-bottom: 2rem;
}
@media (max-width: 780px) {
.c-offerslider__title {
text-align: center;
}
}
.c-offerslider__choice {
display: flex;
align-items: center;
margin-left: 10px;
margin-bottom: 20px;
gap: 10px;
}
.c-offerslider__type {
cursor: pointer;
padding: 5px 10px;
transition: all 0.2s ease-in-out;
border-radius: 8px;
}
.c-offerslider__type:hover {
background-color: #eeeff2;
}
.c-offerslider__type--active {
transition: all 0.2s ease-in-out;
cursor: pointer;
padding: 5px 10px;
border-radius: 8px;
}
.c-offerslider__type--active::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: rgb(1, 2, 5);
}
.c-offerslider__type--active:hover {
background-color: #eeeff2;
}
.c-offerslider__wrap {
position: relative;
}
.c-offerslider__wrap::after {
content: " ";
position: absolute;
bottom: 0;
right: 0;
top: 3rem;
width: 20vw;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 100%);
}
@media (min-width: 780px) {
.c-offerslider__wrap {
padding-left: clamp(1rem, (100% - 1314px) / 2, 25vw);
}
}
@media (max-width: 780px) {
.c-offerslider__wrap {
overflow: hidden;
}
}
.c-offerslider__arrows {
position: absolute;
right: 10vw;
top: -4rem;
z-index: 666;
}
@media (max-width: 780px) {
.c-offerslider__arrows {
top: -2.5rem;
}
}
.c-offerslider__arrow {
width: 32px;
height: 32px;
font-size: 24px;
line-height: 0;
cursor: pointer;
}
@media (max-width: 780px) {
.c-offerslider .glide__track {
width: 150vw;
}
}
.c-offerslide {
max-width: 419px;
margin: 0 auto;
border-radius: 12px;
background-color: rgb(238, 239, 242);
padding: clamp(2rem, 5vw, 3rem);
height: 840px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.c-offerslide__fuel {
font-weight: 700;
padding: 9px 10px;
font-size: 15px;
line-height: 15px;
background-color: #fff;
}
.c-offerslide__img {
margin-block: 10px;
}
.c-offerslide__img img {
max-width: 100%;
height: auto;
}
.c-offerslide__title {
font-weight: 700;
line-height: 1.2;
font-size: 30px;
line-height: 48px;
}
.c-offerslide__description {
font-size: 13px;
color: rgb(83, 84, 87);
margin-block: 10px;
}
.c-offerslide__param {
font-weight: 700;
font-size: 23px;
line-height: 36px;
}
.c-offerslide__label {
font-size: 15px;
color: rgb(83, 84, 87);
}
.c-offerslide__buttons {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
margin-top: 2rem;
}
.c-offerslide__button {
border-radius: 4px;
padding: 15px 28px;
text-align: center;
font-size: 16px;
}
.c-offerslide__button--black {
border: 2px solid rgb(1, 2, 5);
background-color: rgb(1, 2, 5);
color: #fff;
}
.c-offerslide__button--white {
border: 2px solid rgb(1, 2, 5);
background-color: #fff;
color: rgb(1, 2, 5);
}
.c-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 2rem;
padding-block: 2rem;
padding-inline: 2rem;
color: white;
}
@media screen and (max-width: 960px) {
.c-form {
width: 100%;
margin-inline: 0;
}
}
.c-form__bg {
display: flex;
background: rgb(1, 2, 5);
background-repeat: no-repeat;
background-size: cover;
padding-block: 2rem;
position: relative;
margin-inline: 5% 0;
}
.c-form__bg--col {
background: none;
width: 45%;
}
.c-form__bg--col .c-form__input {
width: 47%;
}
.c-form__bg--col .c-form__description {
width: 100%;
}
@media screen and (max-width: 960px) {
.c-form__bg--col {
width: 100%;
}
}
.c-form__bg--wide {
background: none;
width: 85%;
}
.c-form__bg--wide .c-form__input {
width: 22%;
}
.c-form__bg--wide .c-form__description {
width: 100%;
}
@media screen and (max-width: 960px) {
.c-form__bg--wide {
width: 100%;
}
.c-form__bg--wide .c-form__input {
width: 47%;
}
}
.c-form__bg--small {
background: none;
color: rgb(1, 2, 5);
padding: 5rem 5vw 0 5vw;
}
.c-form__bg--small .c-form__bg {
background-color: transparent;
max-width: 600px;
margin: 0 auto;
}
.c-form__bg--small .c-form__input, .c-form__bg--small .c-form__textarea {
border: 1px solid rgb(1, 2, 5);
border-radius: 4px;
margin-top: 1rem;
color: rgb(1, 2, 5);
}
.c-form__bg--small .c-form__label {
background: #fafafa;
color: rgb(1, 2, 5);
padding: 0.5rem 0.5rem 0.25rem 0.5rem;
margin-top: 0.5rem;
}
.c-form__bg--small .c-form__consent-text {
margin-top: 1rem;
}
.c-form__bg--small .c-form__header {
font-weight: bold;
font-size: 37px;
}
.c-form__bg--small .c-form__subheader {
font-weight: bold;
}
.c-form__bg--small .c-form__submit-btn {
width: 100%;
background-color: rgb(1, 2, 5);
color: #fff;
margin-top: 1rem;
text-align: center;
}
.c-form__header {
width: 100%;
font-size: 1.8rem;
}
.c-form__subheader {
width: 100%;
font-size: 1.2rem;
}
.c-form__input-wrapper {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
@media screen and (max-width: 960px) {
.c-form__input-wrapper {
width: 100%;
}
}
.c-form__textarea-wrapper {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 10px;
}
.c-form__label {
position: absolute;
top: 20%;
left: 0.75rem;
color: #fff;
cursor: text;
transition: all 0.1s ease-in-out;
transform-origin: left;
}
.c-form__label--textarea {
top: 1.5rem;
}
.c-form__label--error {
border-color: #fc0d1b;
color: #fc0d1b;
background-color: #ffdbdd;
}
.c-form__input {
padding-inline: 0.75rem;
padding-block: 1rem 0.375rem;
border-bottom: 1px solid #8a9097;
transition: all 0.1s ease-in-out;
color: #fff;
}
.c-form__input::placeholder {
color: transparent;
}
.c-form__input:is(:focus) {
border-color: #3f83f8;
}
.c-form__input:is(:focus):not(.form__input--error) + label {
color: #3f83f8;
}
.c-form__input:is(:focus, :not(:placeholder-shown)) + label {
top: -5px;
left: 0.785rem;
scale: 0.7;
}
.c-form__input--error {
border-color: #fc0d1b;
color: #fc0d1b;
background-color: #ffdbdd;
}
.c-form__checkbox-wrapper {
width: 100%;
margin-left: 25px;
margin-block: 10px;
}
.c-form__checkbox-wrapper:has(input:checked) label::before {
content: "✓";
background-color: #001e50;
line-height: 0;
font-size: 0.9rem;
}
.c-form__checkbox-wrapper--small {
width: 100px;
}
.c-form__checkbox {
position: relative;
cursor: pointer;
font-size: 0.9rem;
}
.c-form__checkbox::before {
content: "";
position: absolute;
left: -25px;
width: 20px;
height: 20px;
display: grid;
place-items: center;
color: #fff;
font-size: 1.1rem;
line-height: 1;
border-radius: 3px;
border: 1px solid #8a9097;
transition: all 0.2s ease-in-out;
}
.c-form__checkboxes-wrapper {
width: 100%;
display: flex;
gap: 0.25rem;
}
.c-form__textarea {
height: 100px;
padding-inline: 0.75rem;
padding-block: 1.5rem 1rem;
border-bottom: 1px solid #8a9097;
transition: all 0.1s ease-in-out;
color: #fff;
}
.c-form__textarea::placeholder {
color: transparent;
}
.c-form__textarea:focus {
border-color: #3f83f8;
}
.c-form__textarea:is(:focus) + label {
color: #3f83f8;
}
.c-form__textarea:is(:focus, :not(:placeholder-shown)) + label {
scale: 0.75;
top: 0.4rem;
}
.c-form__error-message-wrapper {
position: absolute;
bottom: -1.2rem;
}
.c-form__error-message-wrapper--checkbox {
position: static;
}
.c-form__error-message {
height: 1rem;
font-size: 0.7rem;
color: #fc0d1b;
margin-block: 0.25rem 0;
white-space: nowrap;
}
.c-form__consent-text {
font-size: 0.7rem;
}
.c-form__expand-btn {
display: block;
font-weight: 600;
cursor: pointer;
}
.c-form__submit-btn {
padding-block: 0.75rem;
padding-inline: 5rem;
border-radius: 5px;
border: 1px solid #fff;
color: #fff;
transition: all 0.2s ease-in-out;
}
.c-form__submit-btn:hover {
cursor: pointer;
color: rgb(1, 2, 5);
background-color: #fff;
}
.c-form__submit-btn:disabled {
opacity: 0.3;
}
.c-form__submit-btn:disabled:hover {
color: #fff;
background-color: rgb(1, 2, 5);
}
@media screen and (max-width: 960px) {
.c-form__submit-btn {
margin-inline: auto;
}
}
.c-form__popup-overlay {
position: fixed;
inset: 0;
display: grid;
place-items: center;
backdrop-filter: blur(10px);
background-color: rgba(1, 2, 5, 0.1);
z-index: 99999;
}
.c-form__popup {
position: relative;
padding-inline: 3rem;
padding-block: 3rem;
background-color: #fff;
border-radius: 10px;
text-align: center;
box-shadow: 2px 2px 15px rgba(1, 2, 5, 0.1);
}
.c-form__popup-close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
font-size: 1.4rem;
cursor: pointer;
}
.c-map {
margin: 5rem 5vw 0 5vw;
}
.c-map iframe {
width: 100%;
height: 100%;
min-height: 590px;
}
@media (max-width: 780px) {
.c-map iframe {
min-height: 440px;
}
}
.c-map table {
margin: 1rem 0;
}
.c-map__wrap {
margin: 0 auto;
width: 100%;
max-width: 1311px;
background: rgb(14, 14, 18);
min-height: 590px;
overflow: hidden;
border-radius: 12px;
color: #fff;
}
@media (min-width: 780px) {
.c-map__wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
}
}
.c-map__col {
width: 100%;
}
.c-map__col--map {
line-height: 0;
}
.c-map__col--text {
font-weight: 400;
padding: 0 2rem;
}
.c-map__col--text img {
margin-bottom: -0.3rem;
margin-right: 0.5rem;
}
@media (max-width: 780px) {
.c-map__col--text {
padding: 2rem;
}
}
.c-map__col--text address {
font-style: normal;
}
.c-map__col--text h3 {
font-size: 1.8rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 1rem;
}
.c-map__col--text a {
color: #fff;
text-decoration: none;
}
.c-dealer {
margin: 8rem 5vw 0 5vw;
}
.c-dealer__wrap {
max-width: 1314px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 2rem;
}
@media (max-width: 768px) {
.c-dealer__wrap {
flex-direction: column;
}
}
.c-dealer__wrap b {
font-weight: bold;
}
.c-dealer__wrap p {
margin: 0.5rem 0;
}
.c-dealer__wrap table td {
padding: 0.25rem 0.5rem 0 0;
}
.c-dealer__wrap h4 {
font-size: 28px;
font-weight: bold;
margin-bottom: 2rem;
}
.c-logo-bar__wrap {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1680px;
margin: 0 auto;
gap: 1rem;
padding: 0 3vw;
min-height: 80px;
}
.c-logo-bar__toggle {
width: 100%;
}
.c-logo-bar__logo {
text-align: center;
width: 100%;
}
.c-logo-bar__logo a {
text-align: center;
}
.c-logo-bar__logo img {
width: 245px;
}
.c-logo-bar__location {
font-size: 24px;
font-weight: 400;
line-height: 30px;
text-align: right;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.c-logo-bar__location img {
height: 27px;
line-height: 0;
}
.c-logo-bar--default {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
.c-logo-bar--default .c-logo-bar__toggle {
display: none;
}
.c-logo-bar--default .c-logo-bar__logo {
width: clamp(150px, 16%, 300px);
filter: invert(1);
margin-inline: auto;
}
.c-logo-bar--default .c-logo-bar__location {
display: none;
}
.c-logo-bar--white {
background-color: #fff;
}
@media (max-width: 780px) {
.c-logo-bar__toggle {
display: none;
}
.c-logo-bar__logo img {
width: 134px;
}
.c-logo-bar__location {
display: none;
}
}
@media (max-width: 1100px) {
.c-logo-bar__location {
font-size: 16px;
}
}
.c-footer {
margin-top: 5vw;
padding-block: 2rem;
padding-inline: 2rem;
background-color: rgb(1, 2, 5);
color: #fff;
text-align: center;
}
.c-footer__main {
font-size: 1.4rem;
}
.c-footer__submain {
font-size: 1.2rem;
font-weight: 600;
margin-block: 0.25rem 0.75rem;
}
.c-columnphototextsection {
display: flex;
padding-inline: clamp(1rem, (100% - 1314px) / 2, 25vw);
gap: 30px;
margin-block: 100px;
}
@media screen and (max-width: 960px) {
.c-columnphototextsection {
flex-direction: column;
margin-block: 30px;
}
}
.c-columncomponent {
display: flex;
flex-direction: column;
border-radius: 10px;
width: calc((100% - 60px) / 3);
}
@media screen and (max-width: 960px) {
.c-columncomponent {
width: 100%;
}
}
.c-columncomponent--photo {
position: relative;
}
.c-columncomponent--black {
background-color: rgb(1, 2, 5);
padding: 30px;
flex-grow: 1;
display: flex;
justify-content: center;
gap: 25px;
min-height: 100%;
}
.c-columncomponent--black__header {
color: #fff;
font-size: clamp(20px, 2vw, 30px);
max-width: 100%;
line-height: 1.2;
}
.c-columncomponent--black__link {
color: #fff;
line-height: 1.2;
border: 1px solid #fff;
border-radius: 8px;
font-size: clamp(14px, 1.5vw, 20px);
display: flex;
justify-content: center;
align-items: center;
padding-block: 5%;
}
.c-columncomponent--black__line {
width: 100%;
height: 1px;
background-color: #fff;
}
.c-columncomponent__header {
position: absolute;
color: #fff;
bottom: 35%;
font-size: clamp(20px, 2vw, 30px);
left: 10%;
max-width: 100%;
line-height: 1.2;
}
@media screen and (max-width: 960px) {
.c-columncomponent__header {
font-size: 24px;
bottom: 30%;
}
}
.c-columncomponent__text {
position: absolute;
color: #fff;
bottom: 5%;
line-height: 1.2;
left: 10%;
right: 10%;
font-size: clamp(14px, 1.5vw, 20px);
}
@media screen and (max-width: 960px) {
.c-columncomponent__text {
font-size: 16px;
}
}
.c-blackbackgroundphototext {
position: relative;
}
.c-blackbackgroundphototext__content--left {
position: absolute;
top: 38%;
left: 10%;
color: #fff;
display: flex;
flex-direction: column;
gap: 20px;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__content--left {
position: static;
color: rgb(1, 2, 5);
margin-top: 30px;
}
}
.c-blackbackgroundphototext__header--left {
font-size: clamp(20px, 1.5vw, 45px);
line-height: 1.2;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__header--left {
width: 100%;
font-size: 24px;
margin-left: 5%;
}
}
.c-blackbackgroundphototext__text--left {
font-size: clamp(14px, 1vw, 18px);
line-height: 1.2;
width: 100%;
max-width: 400px;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__text--left {
width: 100%;
margin-left: 5%;
}
}
.c-blackbackgroundphototext__link--left {
font-size: clamp(14px, 1vw, 18px);
display: flex;
justify-content: center;
border: 1px solid #fff;
border-radius: 8px;
max-width: 270px;
padding-block: 5%;
margin-top: 30px;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__link--left {
width: 100%;
border: 1px solid rgb(1, 2, 5);
margin-left: 5%;
max-width: 200px;
padding-block: 3%;
margin-top: 0;
}
}
.c-blackbackgroundphototext__content--right {
position: absolute;
top: 35%;
right: 10%;
color: #fff;
display: flex;
flex-direction: column;
gap: 20px;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__content--right {
position: static;
color: rgb(1, 2, 5);
margin-top: 30px;
}
}
.c-blackbackgroundphototext__header--right {
font-size: clamp(20px, 1.5vw, 45px);
line-height: 1.2;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__header--right {
width: 100%;
font-size: 24px;
margin-left: 5%;
}
}
.c-blackbackgroundphototext__text--right {
font-size: clamp(14px, 1vw, 18px);
line-height: 1.2;
width: 100%;
max-width: 400px;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__text--right {
width: 100%;
margin-left: 5%;
}
}
.c-blackbackgroundphototext__link--right {
font-size: clamp(14px, 1vw, 18px);
display: flex;
justify-content: center;
border: 1px solid #fff;
border-radius: 8px;
max-width: 270px;
padding-block: 5%;
margin-top: 30px;
}
@media screen and (max-width: 960px) {
.c-blackbackgroundphototext__link--right {
width: 100%;
border: 1px solid rgb(1, 2, 5);
margin-left: 5%;
max-width: 200px;
padding-block: 3%;
margin-top: 0;
}
}
/*# sourceMappingURL=style.css.map */