@font-face {
  font-family: 'Cygnito';
  src: url('cygnitomonopro-sralt.otf');
}

body {
    background: #000;
    color: #000;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

h1, h2, h3, h4, h5, .headfont {
    font-family: 'Cygnito';
}

img {
    width: auto;
    max-width: 100%;
}

.corner-clip {
    clip-path: polygon(
    15px 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
}

#mobileMenu {
    height: 100vh;
    background: #ff4a1f;
    z-index: 999;
    border-right: 2px solid #000;
    width: 300px;
    left: -305px;
    transition: left 0.6s ease;
}

#mobileMenu.open {
    left: 0;
}

#mobileMenu #menuClose {
    top: 20px;
    right: 20px;
    cursor: pointer;
}

/* Header */
.header-bar {
    background: #ff4a1f;
}

.logo {
    max-height: 85px;
}

.homeHead {
    background: url("../images/fizzydig shape-bigblack.png") no-repeat center;
    background-size: 100% 100%;
    height: 450px;
}

.homeHead .headTop .left {
    width: 45%;
    line-height: 1;
}

.homeHead .headTop .right {
    width: 50%;
}

.homeHead .headTop .right p {
    color: #fff;
    font-size: 90px;
    line-height: 1;
}

.homeHead .headBottom > div {
    width: 48%;
}

.homeHead .headBottom .right {
    gap: 40px;
}

.homeHead .headBottom .right a {
    color: #ff4a1f;
}

.homeHead .headBottom .right a.arrowLink {
    background: url(../images/arrows-02.png) no-repeat right top 3px;
    background-size: auto 26px;
}

.homeHead .headBottom .right a:hover {
    color: #fff;
}

.nav-links ul a {
    font-family: 'Cygnito';
    display: block;
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

.nav-links ul a.active {
    color: #fff;
}

.nav-links svg {
    border: 2px solid #000;
    border-radius: 3px;
    cursor: pointer;
}

/* Cards */
.info-card {
    border-radius: 18px;
    height: 100%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.info-card h3 {
    margin-bottom: 15px;
}

.info-card ul {
    padding-left: 18px;
}

/* Colour themes */
.yellow { background: #d6bb3a; }
.teal   { background: #27d3c3; }
.stone  { background: #b5ad9f; }
.light  { background: #f2f2f2; }
.blue   { background: #6e87c7; }
.red    { background: #ff4a1f; }
.purple { background: #a067ab; }
.white  { background: #ffffff; }

/* Footer */
.footer-bar {
    background: #ff4a1f;
}

.footer-bar a {
    color: #000;
    font-weight: 600;
    text-decoration: none;
}

.footer-bar a:hover {
    color: #fff;
}

/* How-to title */
.howto-title h1 {
    font-weight: 800;
}

/* Step cards */
.step-number {
    font-size: 160px;
    line-height: 1;
}

.homeSection > h2 {
    border-bottom: 1px solid #000;
    clip-path: polygon(
        15px 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% calc(100% - 15px),
        100% 100%,
        100% 100%,
        0 100%,
        0 15px
    );
}

.worldsBox .slick-slider {
    margin-bottom: 0;
}

.worldsBox .slick-slider .carouselImg .slideInner {
    position: relative;
}

.worldsBox .slick-slider .carouselImg .slideInner span {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 105px;
}

.worldsBox .slick-slider .slick-prev:before,
.worldsBox .slick-slider .slick-next:before {
    color: #000;
    font-size: 32px;
}

.worldsBox .slick-slider .slick-prev {
    left: -40px;
}

.worldsBox .slick-slider .slick-next {
    right: -30px;
}

.carouselOuter .slick-slider button.slick-arrow:before {
	display: none;
}

.latestBox .latestInner > div .imgOuter {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.latestBox .latestInner > div a.arrowLink {
    color: #ff4a1f;
    background: url(../images/arrows-02.png) no-repeat right top 3px;
    background-size: auto 33px;
}

.fdModal .modal-content {
    background: #000;
    color: #fff;
}

.fdModal .modal-body h1 span {
    display: block;
    color: #ff4a1f;
}

.fdModal .modal-body .fdModalBtn,
.filtersInner .fdModalBtn {
    color: #000;
    background: #ff4a1f;
    clip-path: polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 8px
      );
}

.fdModal .modal-body .termsTxt {
    font-size: 13px;
}

/* Media Queries */

@media all and (max-width:1399px){
    .homeHead {
        height: 410px;
    }
    .homeHead .headTop .left p {
        font-size: 2rem!important;
    }
    .homeHead .headTop .right p {
        font-size: 80px;
    }
    .homeHead .headBottom .left p,
    .homeHead .headBottom .right a {
        font-size: 1.3rem!important;
    }
    .homeHead .headBottom .right a.arrowLink {
        background-size: auto 22px;
    }
    .worldsBox .slick-slider .carouselImg .slideInner span {
        font-size: 1.5rem!important;
    }
}

@media all and (max-width:1199px){
    .logo {
        max-height: 75px;
    }
    .homeHead {
        height: 345px;
    }
    .homeHead .headTop .left p {
        font-size: 1.8rem!important;
    }
    .homeHead .headTop .right p {
        font-size: 64px;
    }
    .homeHead .headBottom .left p,
    .homeHead .headBottom .right a {
        font-size: 1rem!important;
    }
    .homeHead .headBottom .right a.arrowLink {
        background-size: auto 16px;
    }
    .worldsBox .slick-slider .carouselImg .slideInner span {
        font-size: 1.2rem!important;
    }
}

@media all and (max-width:992px){
    .step-number {
        font-size: 120px;
    }
    .homeHead {
        height: auto;
        background-image: none;
        background-color: #000;
        clip-path: polygon(
            15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px
        );
    }
    .homeHead .headTop .right {
        width: 100%;
        text-align: center;
    }
    .homeHead .headBottom {
        flex-direction: column;
    }
    .homeHead .headBottom > div {
        width: 100%;
        text-align: center;
    }
    .homeHead .headBottom .right {
        justify-content: center!important;
    }
}

@media all and (max-width:768px){
    .logo {
        max-width: 75%;
    }
    .step-number {
        font-size: 78px;
    }
}

@media all and (max-width:576px){
    .homeHead .headTop .right p {
        font-size: 54px;
    }
}