﻿
body {
    position: relative;
    height: 100%;
}

body {
    background: #000;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 100%;
}
.slider-custom-css {
    width: 6% !important;
    background-color: #0000009e !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
    height: 1.5rem !important;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    right: 15px !important;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    left: 23px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/*Swiper Responsive*/

.swiper-button-next, swiper-button-prev {
    position: relative;
    width: 100%;
    /*z-index: 9999;*/
}

.swiper-button-next {
    left: 52% !important;
    z-index: 20 !important;
    color: white !important;
}

.swiper-pagination-bullets, .swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom,20px) !important;
}

.swiper-button-prev {
    left: 46% !important;
    z-index: 20 !important;
    color: white !important;
}

    .swiper-button-next:after, .swiper-button-prev:after {
        bottom: 1.99rem !important;
        position: relative;
        font-size: 14px !important;
        font-weight: 900;
        z-index: 20 !important;
    }


.cover-img {
    grid-column: 1/-1;
    max-height: 76vh!important;
}
@media screen and (max-width: 768px) {
    .cover-img{
        height: 60vh;
    }
}

    .navbar-list a.active {
        --tw-text-opacity: 1;
        color: white;
        border-bottom: 1px solid gray;
    }

    .cart-content {
        background-color: black;
        opacity: 0.9;
    }

    .basket-container.cart-overlay {
        background: #12120e;
    }

    @media screen and (max-width: 768px) {
        .cart-overlay {
            margin-top: 5.1rem !important;
        }
    }

    @media screen and (max-width: 480px) {
        .cart-overlay {
            margin-top: 5.1rem !important;
        }

        .checkout-btn {
            text-align: center;
            width: 86%;
            padding: 0.7rem 0.2rem !important;
            font-size: 12px;
        }
    }

@media screen and (max-width: 1650px) {
    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
        right: 8px !important;
        padding-left: 10px !important;
    }

    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
        left: 16px;
        margin-right: 16px;
    }

    .slider-custom-css {
        width: 8% !important
    }
}

    @media screen and (max-width: 1280px) {
        .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
            right: 8px !important;
            padding-left: 10px !important;
        }

        .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
            left: 10px;
            margin-right: 20px;
        }

        .slider-custom-css {
            width: 10% !important
        }
    }

    @media screen and (max-width: 1024px) {

        .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
            right: 0 !important;
            padding-left: 10px !important;
        }

        .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
            left: 2px;
            margin-right: 16px;
        }

        .slider-custom-css {
            width: 10% !important
        }
    }

    @media screen and (min-width: 1500px) {
        .cover-img {
            grid-column: 1/-1;
            max-height: 76vh !important;
        }
    }
    /* Overlay  */
    @media screen and (max-width: 960px) {
        .black-overlay-left {
            margin-left: 0rem !important;
        }

        .black-overlay-right {
            margin-right: 0rem !important;
        }
    }
    /* Cover Image  */
    @media screen and (max-width: 900px) {
        .cov-img-right {
            background-position: right;
        }
    }

    /* Product core name  */
    .product-core-name {
        font-size: 40px;
    }

    @media screen and (max-width: 976px) {
        .product-core-name {
            font-size: 36px;
        }
    }

    @media screen and (max-width: 902px) {
        .product-core-name {
            font-size: 32px;
        }
    }

    @media screen and (max-width: 829px) {
        .product-core-name {
            font-size: 30px;
        }
    }

    @media screen and (max-width: 793px) {
        .product-core-name {
            font-size: 28px;
        }
    }

    @media screen and (max-width: 767px) {
        .product-core-name {
            font-size: 38px;
        }
    }

    @media screen and (max-width: 344px) {
        .product-core-name {
            font-size: 32px !important;
        }
    }
    /* Product Core Description  */
    @media screen and (max-width: 945px) {
        .product-core-desc {
            font-size: 0.9rem;
        }
    }

    @media screen and (max-width: 874px) {
        .product-core-desc {
            font-size: 0.8rem;
        }
    }

    @media screen and (max-width: 803px) {
        .product-core-desc {
            font-size: 0.7rem;
        }
    }

    @media screen and (max-width: 768px) {
        .product-core-desc {
            font-size: 1.2rem;
        }

        .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
            right: 0 !important;
            padding-left: 10px !important;
        }

        .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
            left: -10px;
            margin-right: 16px;
        }

        .slider-custom-css {
            width: 15% !important
        }

        .cart-content {
            background-color: transparent;
        }

        .basket-container.cart-overlay {
            background: black;
        }
    }
    /* Overlay  */
    @media screen and (max-width: 960px) {
        .black-overlay-left {
            margin-left: 0rem;
        }

        .black-overlay-right {
            margin-right: 0rem;
        }

        .instawrap {
            margin-right: 2.6rem;
        }
    }
    /* Cover Image  */
    @media screen and (max-width: 900px) {
        .cov-img-right {
            background-position: right;
        }
    }

   

    @media screen and (max-width: 767px) {
        .edition-bottom {
            display: none !important;
        }

        .cover-overlay {
            grid-column: 1/-1 !important;
            margin-top: 33rem !important;
            height: 26.6rem !important;
            margin-right:  0  !important;
        }

        .cov-img-right {
            background-position: top !important;
            height: 950px !important;
        }

        .beach1 {
            height: 59rem !important;
        }

        .ltdedt {
            margin-top: 1.5rem !important;
        }

        .instawrap {
            margin-right: 0 !important;
        }
    }

    @media screen and (max-width: 500px) {
        .cover-overlay {
            margin-top: 32rem !important;
            height: 27.6rem !important;
        }
    }


    @media screen and (max-width: 450px) {
        .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
            right: 0 !important;
            padding-left: 22px !important;
        }

        .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
            left: -22px;
            margin-right: 16px;
        }

        .slider-custom-css {
            width: 23% !important
        }
    }
    /* Weather Section */
    .containerr {
        height: auto;
    }
}

/* Beach Bournfire Responsive */
.beach1, .cov-img-right, .cover-overlay, .img-cov-left, .black-overlay-right {
    height: 50rem;
}

@media screen and (min-width: 2000px) {
    .beach1, .cov-img-right, .cover-overlay, .img-cov-left, .black-overlay-right {
        height: 55rem !important;
    }
}
@media screen and (min-width: 1450px) {
    .beach1, .cov-img-right, .cover-overlay, .img-cov-left, .black-overlay-right {
        height: 50rem;
    }
}

@media screen and (max-width: 1450px) {
    .beach1, .cov-img-right, .cover-overlay, .img-cov-left, .black-overlay-right {
        height: 35rem;
    }
}

@media screen and (max-width: 1000px) {
    .beach1, .cov-img-right, .cover-overlay, .img-cov-left, .black-overlay-right {
        height: 30rem;
    }

    .exp {
        margin-top: 1rem !important;
    }
}

    /*Hamberg Menu Responsive*/
    @media screen and (max-width: 767px) {
        .responsive_nav_list {
            position: absolute;
            top: 4.3rem;
            /*left: -15rem;*/
            background-color: black !important;
            width: 100% !important;
            height: 100vh;
        }

        .list-reset {
            flex-direction: column;
            /* align-items: center !important;
        justify-content: flex-start !important;
        margin-left: 4.5rem !important;*/
            margin-top: 2rem;
        }

        .range {
           
            margin-bottom: 0.5rem;
        }
        .nav-item-links {
        margin: 0.5rem;
        }

        .rangelinee {
            width: 100%;
/*            margin-left: auto;
*/        }

        .rangeline {
            display: block !important;
        }

        .serves {
            margin-left: -30px !important;
            margin-top: 2rem;
        }

        .shopic {
            display: none;
        }
    }

    @media screen and (max-width: 450px) {
        .sm_logo {
            width: 210px !important;
        }
    }

  /*  @media screen and (max-width: 375px) {
        .list-reset {
            margin-top: -30rem !important;
        }
    }*/
    /* Weather Responsive */
    .weather-dt {
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-columns: 0.25fr 0.375fr 0.375fr;
        text-transform: uppercase;
    }

    .weather-dt-title {
        grid-row: span 2 / span 2;
        grid-column-start: 1;
        display: flex;
        flex-direction: column;
        /*  justify-content: center;
    align-items: center;*/
        margin-top: 4rem;
        margin-left: 7.4rem;
    }

    .weather-dt1 {
        margin-top: 3rem;
        margin-right: 6rem;
    }

    @media screen and (max-width: 768px) {
        .weather-dt {
            grid-template-rows: repeat(1, minmax(0, 1fr));
            grid-template-columns: .25fr .15fr .40fr .40fr;
            padding-bottom: 2rem;
            column-gap: 1rem;
        }

        .weather-dt-title {
            grid-row: 1;
            margin-top: 4rem;
            margin-left: 2rem;
        }

        .weather-line {
            right: -2.5rem !important;
        }

        .weather-dt1 {
            flex-direction: column;
            grid-column: 3/4 !important;
            margin-top: 0;
            margin-right: 0;
            grid-row: 1;
        }

        .temp {
            margin-left: 0 !important;
        }

        .temptxt {
            margin-left: 0.8rem;
        }

        .windtxt {
            margin-left: 0.7rem;
        }

        .viseye {
            margin-right: 0 !important;
        }

        .weather-dt2 {
            flex-direction: column;
            grid-column: 4/-1 !important;
            grid-row: 1;
        }
    }

    @media screen and (max-width: 630px) {
        .sidetxt {
            bottom: -32rem !important;
            /* right: -3rem !important;*/
        }
    }

    @media screen and (max-width: 550px) {
        .weather-dt {
            grid-template-rows: repeat(3, minmax(0, 1fr));
            grid-template-columns: 1fr;
        }

        .weather-dt-title {
            grid-row: 1;
            justify-content: flex-start;
            align-items: flex-start;
            margin-top: 4rem !important;
            margin-left: 3rem !important;
        }

        .weather-dt1 {
            grid-row: 2 !important;
            grid-column: 1 !important;
            margin-left: 3rem !important;
            margin-top: -1rem !important;
            justify-content: flex-start !important;
        }

        .weather-dt2 {
            grid-column: 1 !important;
            grid-row: 3 !important;
            margin-left: 3rem !important;
            margin-top: 0.7rem !important;
        }

        .weather-line {
            display: none;
        }

        .presuretitle {
            margin-left: 0.9rem !important;
        }

        .visibletitle {
            margin-left: 0.9rem !important;
        }

        .humiditytitle {
            margin-left: 0.9rem !important;
        }



        .weathericon {
            display: none;
        }

        .ver_coordinate {
            font-size: 1.125rem;
        }

        .cord {
            display: none;
            justify-content: flex-start !important;
        }

        .secondline {
            margin-top: -2rem !important;
        }

        .mobline {
            display: block !important;
        }
    }

    /*Footer Responsive*/
    .email-textbox::placeholder {
        font-family: Pathway Gothic One !important;
        color: white;
        letter-spacing: 0.15rem;
    }

    @media screen and (max-width: 510px) {
        .emailsub {
            flex-direction: column;
        }

        .emailborder {
            width: 100% !important;
        }

        .emailbox {
            margin-right: auto;
            margin-left: auto;
            width: 18rem !important;
        }

        .email_form {
            margin-left: 0 !important;
        }

        .more {
            max-width: 18rem !important;
            width: 18rem !important;
            margin-bottom: 1rem !important;
        }
    }

    @media screen and (max-width: 510px) {
        .emailborder {
            width: 100% !important;
        }

        .emailbox {
            width: 14rem !important;
        }

        .more {
            max-width: 14rem !important;
            width: 14rem !important;
        }

        .b1 {
            margin-top: -1rem !important;
        }

        .email_mob {
            margin-left: 0 !important;
            margin-right: 0 !important;
            
        }

        .sub_mob {
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .email_mob_in {
            margin-left: 0 !important;
            text-align: center;
        }
    }



    /*Instagram button*/
    .more {
        max-width: 150px;
        max-height: 40px;
    }

    .instawrap {
        margin-right: 2.6rem;
    }

  
    /*Instagram Responsive*/
    @media screen and (max-width: 960px) {
        .follow {
            margin-left: -2rem;
        }

        .insta {
            margin-left: -2.5rem !important;
        }
    }

    @media screen and (max-width: 450px) {
        .insta {
            width: 107% !important;
        }
    }
    /* Cart Design */
    .shopimg {
        height: 280px;
        margin-left: 1.5rem;
    }

    @media screen and (max-width: 500px) {
        .item-border {
            width: 85% !important;
        }
    }

    @media screen and (max-width: 400px) {
        .item-border {
            width: 81% !important;
        }
    }

    /*    Popup Responsive */
    @media screen and (max-width: 750px) {
        .age_logo {
            width: 232px !important;
        }

        .res-txt {
            font-size: 1.4rem !important;
        }

        .res-txtt {
            font-size: 1rem !important;
        }
    }
