*,
*::before,
*::after { box-sizing: border-box; padding: 0; margin: 0; }
* { font-size: clamp(16px, 1vw, 20px); }
*:focus { outline: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { font-family: 'Nunito Sans'; -webkit-tap-highlight-color: transparent; }

p, li { line-height: 1.5; }
ul, ol { margin: 0; }
a, a:link, a:hover, a:focus, a:active { text-decoration: none; outline: 0; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }

.container {  position: relative; padding: 0 60px; }
.container.px-0 { padding-left: 0; padding-right: 0; }

.row {  display: flex; flex-wrap: wrap; margin: 0 -20px;  }
.row > * {  padding: 0 20px; }

[class*="col-"] { width: 100%; }

section { margin: 100px 0; }
section.grey { background: #F1F1F1; padding: 100px 0; margin-top: 0; }
section.black { background: #000; padding: 100px 0; color: #fff; margin-top: 0; }

header { position: absolute; top: 0; width: 100%; padding: 50px 0; z-index: 10; }
header .logo img { width: 160px; }
header ul { list-style: none; }
header ul li { display: inline-block; }
header ul li:not(:last-child) { margin-right: 100px; }
header ul li a { position: relative; color: #fff; line-height: 1; text-transform: uppercase; }
header ul li a:after { content: ""; display: block; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: #fff; transition: all 0.8s; }
header ul li a:hover::after { width: 100%; }

.nav-toggle { display: none; position: relative; width: 32px; height: 26px; }
.nav-toggle .bar { position: absolute; left: 50%; width: 100%; height: 2px; background: #fff; border-radius: 10px; transition: all 0.3s; }
.nav-toggle .bar.bar1 { top: 0; transform: translateX(-50%); }
.nav-toggle .bar.bar2 { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle .bar.bar3 { bottom: 0; transform: translateX(-50%); }
.mob-nav-active .nav-toggle .bar1 { top: 50%; transform: translate(-50%, 0) rotate(45deg); }
.mob-nav-active .nav-toggle .bar2 { opacity: 0;  }
.mob-nav-active .nav-toggle .bar3 { top: 50%; bottom: auto; transform: translate(-50%, 0) rotate(-45deg); }

.hero { position: relative; height: 100vh; color: #fff; overflow: hidden; margin: 0; }
.hero .text-wrapper { position: absolute; right: 60px; bottom: 100px; left: 60px; z-index: 1; }
.hero h1 { font-size: clamp(40px, 5vw,70px); font-weight: 800; line-height: 1; max-width: 800px; margin-bottom: 20px; text-wrap: balance; }
.hero p { max-width: 500px; text-wrap: balance; }
.hero .cover-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: brightness(50%); object-fit: cover; z-index: -1; }

.button { display: inline-block; background: #E5D9CD; padding: 18px 50px; line-height: 1; font-weight: 700; color: #000; text-transform: uppercase; border-radius: 30px; transition: all 0.3s; }
.button.black { background: #000; color: #fff; }
.button.white { background: #fff; color: #000; }
.button.beige { background: #E5D9CD; color: #000; }

.section-title { font-family: 'Bricolage Grotesque'; font-size: clamp(32px, 5vw, 80px); line-height: 1; font-weight: 800; max-width: 380px; }
.style-text h2, .style-text h3, .style-text h4, .style-text h5, .style-text h6 { font-family: 'Nunito Sans'; text-transform: uppercase; font-weight: 900; }
.style-text h3 { font-size: clamp(18px, 2vw, 24px); }
.style-text p, .style-text ul { margin: 20px 0; }
.style-text ul, .style-text ol { padding-left: 40px; }
.style-text *:first-child { margin-top: 0; }
.style-text *:last-child { margin-bottom: 0; }
.style-text a { color: #000; }

.gallery { margin-top: 70px; }
.gallery .swiper { padding: 0 60px; }
.gallery .swiper .swiper-slide { width: auto; height: 60vh; }
.gallery .swiper .swiper-slide img { width: auto; height: 100%; }
.swiper-button-prev, .swiper-button-next { width: 84px; height: 70px; transform: translateY(-50%); margin: 0; }
.swiper-button-prev { left: 90px; }
.swiper-button-next { right: 90px; }
.swiper-button-prev:after, .swiper-button-next:after { width: 100%; height: 100%; }
.swiper-button-prev:after { content: ""; background: url('../images/left.svg') center center / contain no-repeat; } 
.swiper-button-next:after{ content: ""; background: url('../images/right.svg') center center / contain no-repeat; } 
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 1; pointer-events: auto; }

.map { width: 100%; height: 600px; margin-top: 40px; }

.dalmatian-dog-img { width: 100%; }

footer { position: relative; background: #000; padding: 100px 0 50px 0; margin-top: 60px; }
footer ul li:not(:last-child) { margin-bottom: 10px; }
footer ul li a { text-transform: uppercase; }
footer a { color: #fff; } 
footer .socials { display: flex; gap: 40px; margin-top: 30px; }
footer .socials a { font-size: clamp(20px, 1.6vw, 26px); }
footer .mrlja-img { position: absolute; left: 60px; top: -180px; z-index: -1; }

@media only screen and (min-width: 992px) and (max-width: 1399px) {
    header .logo img { width: 140px; } 

    header ul li:not(:last-child) { margin-right: 40px; }
}

@media only screen and (min-width: 768px) and (max-width: 1399px) {
    .container { padding: 0 40px; }

    .hero .text-wrapper { left: 40px; right: 40px; }

    .gallery .swiper { padding: 0 40px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    header .logo img { width: 130px; }
    .nav-toggle { margin-top: 30px; }

    section { margin: 70px 0; }
    section.grey, section.black { padding: 70px 0; }

    .section-title { margin-bottom: 25px; }

    .dalmatian-dog-img { width: 50%; margin: 50px auto 0 auto; }
}

@media only screen and (max-width: 991px) {
    header .container { height: 100%; }
    header nav { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
    .mob-nav-active { overflow: hidden; }
    .mob-nav-active header { height: 100vh; background: #000; }
    .mob-nav-active header nav { display: block; }
    header ul li:not(:last-child) { margin: 0 0 20px 0; }
    header ul li { display: block; text-align: center; }
    header ul li a { font-size: clamp(24px, 2vw, 34px); }
    .nav-toggle { display: block; }

    .hero .text-wrapper { bottom: 120px; }

    .gallery { margin-top: 30px; }
    .gallery .swiper .swiper-slide { height: 27vh; }
    .swiper-button-prev, .swiper-button-next { display: none; }

    .dalmatian-dog-img { display: block; }

    footer .mrlja-img { display: none; }
}

@media only screen and (max-width: 767px) {
    .container { padding: 0 25px; }

    header { padding: 20px 0; }
    header .logo img { width: 100px; }
    .nav-toggle { margin-top: 25px; }

    section { margin: 50px 0; }
    section.black, section.grey { padding: 50px 0; }

    .hero .text-wrapper { right: 25px; left: 25px; }

    .button { padding: 12px 30px; }
 
    .section-title { margin-bottom: 20px; }

    .gallery .swiper { padding: 0 25px; }

    .map { height: 300px; margin-top: 25px; }

    .dalmatian-dog-img { width: 70%; margin: 30px auto 0 auto; }

    .style-text p, .style-text ul { margin: 16px 0; }
    .style-text ul, .style-text ol { padding-left: 30px; }

    footer { padding: 50px 0; }
    footer .socials { margin-top: 20px; }
}

/*------------------------------------------------------- Fonts -------------------------------------------------------*/

.font-icon { font-family: 'font-icons'; }

/* latin-ext */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 100%;
    src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 100%;
    src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'font-icons';
  src: url('../fonts/font-icons.eot?60485460');
  src: url('../fonts/font-icons.eot?60485460#iefix') format('embedded-opentype'),
       url('../fonts/font-icons.woff2?60485460') format('woff2'),
       url('../fonts/font-icons.woff?60485460') format('woff'),
       url('../fonts/font-icons.ttf?60485460') format('truetype'),
       url('../fonts/font-icons.svg?60485460#font-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*------------------------------------------------------- Utils & grid -------------------------------------------------------*/

.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }

.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }

.align-self-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }

.h-100 { height: 100%; }
.w-100 { width: 100%; }

.gap-0 { gap: 0; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }
.gap-50 { gap: 50px; }
.gap-60 { gap: 60px; }
.gap-70 { gap: 70px; }
.gap-80 { gap: 80px; }
.gap-90 { gap: 90px; }
.gap-100 { gap: 100px; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0!important; }
.mt-10 { margin-top: 10px!important; }
.mt-15 { margin-top: 15px!important; }
.mt-20 { margin-top: 20px!important; }
.mt-25 { margin-top: 25px!important; }
.mt-30 { margin-top: 30px!important; }
.mt-40 { margin-top: 40px!important; }
.mt-50 { margin-top: 50px!important; }
.mt-60 { margin-top: 60px!important; }
.mt-70 { margin-top: 70px!important; }
.mt-80 { margin-top: 80px!important; }
.mt-90 { margin-top: 90px!important; }
.mt-100 { margin-top: 100px!important; }

.mb-0 { margin-bottom: 0!important; }
.mb-10 { margin-bottom: 10px!important; }
.mb-15 { margin-bottom: 15px!important; }
.mb-20 { margin-bottom: 20px!important; }
.mb-25 { margin-bottom: 25px!important; }
.mb-30 { margin-bottom: 30px!important; }
.mb-40 { margin-bottom: 40px!important; }
.mb-50 { margin-bottom: 50px!important; }
.mb-60 { margin-bottom: 60px!important; }
.mb-70 { margin-bottom: 70px!important; }
.mb-80 { margin-bottom: 80px!important; }
.mb-90 { margin-bottom: 90px!important; }
.mb-100 { margin-bottom: 100px!important; }

.col-auto { flex: 0 0 auto; width: auto; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%;}
.col-10 { flex: 0 0 auto; width: 83.33333333%;}
.col-9 { flex: 0 0 auto; width: 75%;}
.col-8 { flex: 0 0 auto; width: 66.66666667%;}
.col-7 { flex: 0 0 auto; width: 58.33333333%;}
.col-6 { flex: 0 0 auto; width: 50%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%;}
.col-4 { flex: 0 0 auto; width: 33.33333333%;}
.col-3 { flex: 0 0 auto; width: 25%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%;}
.col-1 { flex: 0 0 auto; width: 8.33333333%;}

.offset-text { margin-left: 3%; }
.offset-1 { margin-left: 8.33333333%; }
.offset-2 { margin-left: 16.66666667%; }
.offset-3 { margin-left: 25%;}
.offset-4 { margin-left: 33.33333333%;}
.offset-5 { margin-left: 41.66666667%; }
.offset-6 { margin-left: 50%; }

.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important ;}
.order-5 { order: 5 !important; }

@media (min-width: 768px) {

    .d-md-flex { display: flex; }
    .d-md-block { display: block; }
    .d-md-none { display: none; }

    .justify-content-md-start { justify-content: flex-start; }
    .justify-content-md-center { justify-content: center; }
    .justify-content-md-end { justify-content: flex-end; }
    .justify-content-md-between { justify-content: space-between; }
    
    .align-items-md-start { align-items: flex-start; }
    .align-items-md-center { align-items: center; }
    .align-items-md-end { align-items: flex-end; }

    .align-self-md-start { align-self: flex-start; }
    .align-self-md-center { align-self: center; }
    .align-self-md-end { align-self: flex-end; }

    .text-md-left { text-align: left; }
    .text-md-center { text-align: center; }
    .text-md-right { text-align: right; }

    .gap-md-0 { gap: 0; }
    .gap-md-10 { gap: 10px; }
    .gap-md-20 { gap: 20px; }
    .gap-md-30 { gap: 30px; }
    .gap-md-40 { gap: 40px; }
    .gap-md-50 { gap: 50px; }
    .gap-md-60 { gap: 60px; }
    .gap-md-70 { gap: 70px; }
    .gap-md-80 { gap: 80px; }
    .gap-md-90 { gap: 90px; }
    .gap-md-100 { gap: 100px; }

    .mt-md-0 { margin-top: 0!important; }
    .mt-md-10 { margin-top: 10px!important; }
    .mt-md-15 { margin-top: 15px!important; }
    .mt-md-20 { margin-top: 20px!important; }
    .mt-md-25 { margin-top: 25px!important; }
    .mt-md-30 { margin-top: 30px!important; }
    .mt-md-40 { margin-top: 40px!important; }
    .mt-md-50 { margin-top: 50px!important; }
    .mt-md-60 { margin-top: 60px!important; }
    .mt-md-70 { margin-top: 70px!important; }
    .mt-md-80 { margin-top: 80px!important; }
    .mt-md-90 { margin-top: 90px!important; }
    .mt-md-100 { margin-top: 100px!important; }

    .mb-md-0 { margin-bottom: 0!important; }
    .mb-md-10 { margin-bottom: 10px!important; }
    .mb-md-15 { margin-bottom: 15px!important; }
    .mb-md-20 { margin-bottom: 20px!important; }
    .mb-md-25 { margin-bottom: 25px!important; }
    .mb-md-30 { margin-bottom: 30px!important; }
    .mb-md-40 { margin-bottom: 40px!important; }
    .mb-md-50 { margin-bottom: 50px!important; }
    .mb-md-60 { margin-bottom: 60px!important; }
    .mb-md-70 { margin-bottom: 70px!important; }
    .mb-md-80 { margin-bottom: 80px!important; }
    .mb-md-90 { margin-bottom: 90px!important; }
    .mb-md-100 { margin-bottom: 100px!important; }

    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }

    .offset-md-text { margin-left: 3%; }
    .offset-md-1 { margin-left: 8.33333333%; }
    .offset-md-2 { margin-left: 16.66666667%; }
    .offset-md-3 { margin-left: 25%;}
    .offset-md-4 { margin-left: 33.33333333%;}
    .offset-md-5 { margin-left: 41.66666667%; }
    .offset-md-6 { margin-left: 50%; }

    .order-md-0 { order: 0 !important; }
    .order-md-1 { order: 1 !important; }
    .order-md-2 { order: 2 !important; }
    .order-md-3 { order: 3 !important; }
    .order-md-4 { order: 4 !important ;}
    .order-md-5 { order: 5 !important; }
}

@media (min-width: 992px) {
    .d-lg-flex { display: flex; }
    .d-lg-block { display: block; }
    .d-lg-none { display: none; }

    .justify-content-lg-start { justify-content: flex-start; }
    .justify-content-lg-center { justify-content: center; }
    .justify-content-lg-end { justify-content: flex-end; }
    .justify-content-lg-between { justify-content: space-between; }

    .align-items-lg-start { align-items: flex-start; }
    .align-items-lg-center { align-items: center; }
    .align-items-lg-end { align-items: flex-end; }

    .align-self-lg-start { align-self: flex-start; }
    .align-self-lg-center { align-self: center; }
    .align-self-lg-end { align-self: flex-end; }

    .text-lg-left { text-align: left; }
    .text-lg-center { text-align: center; }
    .text-lg-right { text-align: right; }

    .gap-lg-0 { gap: 0; }
    .gap-lg-10 { gap: 10px; }
    .gap-lg-20 { gap: 20px; }
    .gap-lg-30 { gap: 30px; }
    .gap-lg-40 { gap: 40px; }
    .gap-lg-50 { gap: 50px; }
    .gap-lg-60 { gap: 60px; }
    .gap-lg-70 { gap: 70px; }
    .gap-lg-80 { gap: 80px; }
    .gap-lg-90 { gap: 90px; }
    .gap-lg-100 { gap: 100px; }

    .mt-lg-0 { margin-top: 0!important; }
    .mt-lg-10 { margin-top: 10px!important; }
    .mt-lg-15 { margin-top: 15px!important; }
    .mt-lg-20 { margin-top: 20px!important; }
    .mt-lg-25 { margin-top: 25px!important; }
    .mt-lg-30 { margin-top: 30px!important; }
    .mt-lg-40 { margin-top: 40px!important; }
    .mt-lg-50 { margin-top: 50px!important; }
    .mt-lg-60 { margin-top: 60px!important; }
    .mt-lg-70 { margin-top: 70px!important; }
    .mt-lg-80 { margin-top: 80px!important; }
    .mt-lg-90 { margin-top: 90px!important; }
    .mt-lg-100 { margin-top: 100px!important; }

    .mb-lg-0 { margin-bottom: 0!important; }
    .mb-lg-10 { margin-bottom: 10px!important; }
    .mb-lg-15 { margin-bottom: 15px!important; }
    .mb-lg-20 { margin-bottom: 20px!important; }
    .mb-lg-25 { margin-bottom: 25px!important; }
    .mb-lg-30 { margin-bottom: 30px!important; }
    .mb-lg-40 { margin-bottom: 40px!important; }
    .mb-lg-50 { margin-bottom: 50px!important; }
    .mb-lg-60 { margin-bottom: 60px!important; }
    .mb-lg-70 { margin-bottom: 70px!important; }
    .mb-lg-80 { margin-bottom: 80px!important; }
    .mb-lg-90 { margin-bottom: 90px!important; }
    .mb-lg-100 { margin-bottom: 100px!important; }

    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }

    .offset-lg-text { margin-left: 3%; }
    .offset-lg-1 { margin-left: 8.33333333%; }
    .offset-lg-2 { margin-left: 16.66666667%; }
    .offset-lg-3 { margin-left: 25%;}
    .offset-lg-4 { margin-left: 33.33333333%;}
    .offset-lg-5 { margin-left: 41.66666667%; }
    .offset-lg-6 { margin-left: 50%; }

    .order-lg-0 { order: 0 !important; }
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .order-lg-3 { order: 3 !important; }
    .order-lg-4 { order: 4 !important ;}
    .order-lg-5 { order: 5 !important; }
}

@media (min-width: 1200px) {
    .d-xl-flex { display: flex; }
    .d-xl-block { display: block; }
    .d-xl-none { display: none; }

    .justify-content-xl-start { justify-content: flex-start; }
    .justify-content-xl-center { justify-content: center; }
    .justify-content-xl-end { justify-content: flex-end; }
    .justify-content-xl-between { justify-content: space-between; }

    .align-items-xl-start { align-items: flex-start; }
    .align-items-xl-center { align-items: center; }
    .align-items-xl-end { align-items: flex-end; }

    .align-self-xl-start { align-self: flex-start; }
    .align-self-xl-center { align-self: center; }
    .align-self-xl-end { align-self: flex-end; }

    .text-xl-left { text-align: left; }
    .text-xl-center { text-align: center; }
    .text-xl-right { text-align: right; }

    .gap-xl-0 { gap: 0; }
    .gap-xl-10 { gap: 10px; }
    .gap-xl-20 { gap: 20px; }
    .gap-xl-30 { gap: 30px; }
    .gap-xl-40 { gap: 40px; }
    .gap-xl-50 { gap: 50px; }
    .gap-xl-60 { gap: 60px; }
    .gap-xl-70 { gap: 70px; }
    .gap-xl-80 { gap: 80px; }
    .gap-xl-90 { gap: 90px; }
    .gap-xl-100 { gap: 100px; }

    .mt-xl-0 { margin-top: 0!important; }
    .mt-xl-10 { margin-top: 10px!important; }
    .mt-xl-15 { margin-top: 15px!important; }
    .mt-xl-20 { margin-top: 20px!important; }
    .mt-xl-25 { margin-top: 25px!important; }
    .mt-xl-30 { margin-top: 30px!important; }
    .mt-xl-40 { margin-top: 40px!important; }
    .mt-xl-50 { margin-top: 50px!important; }
    .mt-xl-60 { margin-top: 60px!important; }
    .mt-xl-70 { margin-top: 70px!important; }
    .mt-xl-80 { margin-top: 80px!important; }
    .mt-xl-90 { margin-top: 90px!important; }
    .mt-xl-100 { margin-top: 100px!important; }

    .mb-xl-0 { margin-bottom: 0!important; }
    .mb-xl-10 { margin-bottom: 10px!important; }
    .mb-xl-15 { margin-bottom: 15px!important; }
    .mb-xl-20 { margin-bottom: 20px!important; }
    .mb-xl-25 { margin-bottom: 25px!important; }
    .mb-xl-30 { margin-bottom: 30px!important; }
    .mb-xl-40 { margin-bottom: 40px!important; }
    .mb-xl-50 { margin-bottom: 50px!important; }
    .mb-xl-60 { margin-bottom: 60px!important; }
    .mb-xl-70 { margin-bottom: 70px!important; }
    .mb-xl-80 { margin-bottom: 80px!important; }
    .mb-xl-90 { margin-bottom: 90px!important; }
    .mb-xl-100 { margin-bottom: 100px!important; }

    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }

    .offset-xl-text { margin-left: 3%; }
    .offset-xl-1 { margin-left: 8.33333333%; }
    .offset-xl-2 { margin-left: 16.66666667%; }
    .offset-xl-3 { margin-left: 25%;}
    .offset-xl-4 { margin-left: 33.33333333%;}
    .offset-xl-5 { margin-left: 41.66666667%; }
    .offset-xl-6 { margin-left: 50%; }

    .order-xl-0 { order: 0 !important; }
    .order-xl-1 { order: 1 !important; }
    .order-xl-2 { order: 2 !important; }
    .order-xl-3 { order: 3 !important; }
    .order-xl-4 { order: 4 !important ;}
    .order-xl-5 { order: 5 !important; }
}

@media (min-width: 1400px) {
    .d-xxl-flex { display: flex; }
    .d-xxl-block { display: block; }
    .d-xxl-none { display: none; }

    .justify-content-xxl-start { justify-content: flex-start; }
    .justify-content-xxl-center { justify-content: center; }
    .justify-content-xxl-end { justify-content: flex-end; }
    .justify-content-xxl-between { justify-content: space-between; }

    .align-items-xxl-start { align-items: flex-start; }
    .align-items-xxl-center { align-items: center; }
    .align-items-xxl-end { align-items: flex-end; }

    .align-self-xxl-start { align-self: flex-start; }
    .align-self-xxl-center { align-self: center; }
    .align-self-xxl-end { align-self: flex-end; }

    .text-xxl-left { text-align: left; }
    .text-xxl-center { text-align: center; }
    .text-xxl-right { text-align: right; }

    .gap-xxl-0 { gap: 0; }
    .gap-xxl-10 { gap: 10px; }
    .gap-xxl-20 { gap: 20px; }
    .gap-xxl-30 { gap: 30px; }
    .gap-xxl-40 { gap: 40px; }
    .gap-xxl-50 { gap: 50px; }
    .gap-xxl-60 { gap: 60px; }
    .gap-xxl-70 { gap: 70px; }
    .gap-xxl-80 { gap: 80px; }
    .gap-xxl-90 { gap: 90px; }
    .gap-xxl-100 { gap: 100px; }

    .mt-xxl-0 { margin-top: 0!important; }
    .mt-xxl-10 { margin-top: 10px!important; }
    .mt-xxl-15 { margin-top: 15px!important; }
    .mt-xxl-20 { margin-top: 20px!important; }
    .mt-xxl-25 { margin-top: 25px!important; }
    .mt-xxl-30 { margin-top: 30px!important; }
    .mt-xxl-40 { margin-top: 40px!important; }
    .mt-xxl-50 { margin-top: 50px!important; }
    .mt-xxl-60 { margin-top: 60px!important; }
    .mt-xxl-70 { margin-top: 70px!important; }
    .mt-xxl-80 { margin-top: 80px!important; }
    .mt-xxl-90 { margin-top: 90px!important; }
    .mt-xxl-100 { margin-top: 100px!important; }

    .mb-xxl-0 { margin-bottom: 0!important; }
    .mb-xxl-10 { margin-bottom: 10px!important; }
    .mb-xxl-15 { margin-bottom: 15px!important; }
    .mb-xxl-20 { margin-bottom: 20px!important; }
    .mb-xxl-25 { margin-bottom: 25px!important; }
    .mb-xxl-30 { margin-bottom: 30px!important; }
    .mb-xxl-40 { margin-bottom: 40px!important; }
    .mb-xxl-50 { margin-bottom: 50px!important; }
    .mb-xxl-60 { margin-bottom: 60px!important; }
    .mb-xxl-70 { margin-bottom: 70px!important; }
    .mb-xxl-80 { margin-bottom: 80px!important; }
    .mb-xxl-90 { margin-bottom: 90px!important; }
    .mb-xxl-100 { margin-bottom: 100px!important; }

    .col-xxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100%; }

    .offset-xxl-text { margin-left: 3%; }
    .offset-xxl-1 { margin-left: 8.33333333%; }
    .offset-xxl-2 { margin-left: 16.66666667%; }
    .offset-xxl-3 { margin-left: 25%;}
    .offset-xxl-4 { margin-left: 33.33333333%;}
    .offset-xxl-5 { margin-left: 41.66666667%; }
    .offset-xxl-6 { margin-left: 50%; }

    .order-xxl-0 { order: 0 !important; }
    .order-xxl-1 { order: 1 !important; }
    .order-xxl-2 { order: 2 !important; }
    .order-xxl-3 { order: 3 !important; }
    .order-xxl-4 { order: 4 !important ;}
    .order-xxl-5 { order: 5 !important; }
}