@import url(../Fonts/transfonter.org-20231027-125649/stylesheet.css);
@import url(../Fonts/Inter/stylesheet.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white: #FFFFFF;
    --black: #000000;
    --theme-color: #CA4654;
}

body {
    font-family: "DIN Next LT Pro";
    min-height: 100%;
}

li {
    list-style: none;

}

a {
    text-decoration: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.error-page{
    background-color: var(--theme-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .error-text {
            color:var(--white);
            text-align: center;    
            font-family: "DIN Next LT Pro";
            font-size: 52.011px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: capitalize;
        }
}
.loging-section {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 0;

    .logo-bg-set {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        filter: blur(8px);
        -webkit-filter: blur(8px);
    }
}

.loging-card {
    width: 466px;
    height: 433px;
    background: var(--white);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 50%;
    right: 28%;
    transform: translate(-100%, -50%);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .logo-box {
        text-align: center;
        padding: 10px;

        & img {
            width: 64px;
        }
    }

    .main-title {
        color: var(--black);
        font-family: "DIN Next LT Pro";
        font-size: 35.188px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: capitalize;
        text-align: center;
    }

    .sub-text {
        color: #CA4654;
        text-align: center;
        font-family: "DIN Next LT Pro";
        font-size: 15.046px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        text-transform: uppercase;
        width: min(100% - 0px, 80%);
        margin-inline: auto;
        margin-bottom: 30px;
    }

    .btn-section {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .btn-verify {
            border: none;
            display: flex;
            width: 301.62px;
            height: 36.356px;
            padding: 10.772px 26.93px;
            justify-content: center;
            align-items: center;
            gap: 13.465px;
            margin-bottom: 5px;
            color: var(--white);
            font-family: "DIN Next LT Pro";
            font-size: 21.722px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            background-color: var(--black);
        }
        .accept{
            background-color: var(--theme-color);
        }
    }


    .form-section {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 30px;
        padding: 20px 50px;
        margin-top: 35px;

        .form-box {
            text-align: center;

            .main-title {
                color: var(--theme-color);
                font-family: "DIN Next LT Pro";
                font-size: 16.132px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                text-transform: capitalize;
            }

            .input-box {
                border: 1px solid var(--theme-color);
                background: #FFF;
                width: 100%;
                text-align: center;
                -webkit-appearance: none;
                appearance: none;
                padding: 5px 5px;
                color: var(--theme-color);

                &::placeholder {
                    color: var(--theme-color);
                }

                &:focus {
                    outline: none;
                }
            }
        }
    }

    .btn-box {
        text-align: center;
        margin-top: 40px;

        .btn-enter {
            border: none;
            padding: 8px 20px;
            text-align: center;
            color: var(--white);
            font-family: "DIN Next LT Pro";
            font-size: 16.132px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-transform: capitalize;
            background-color: var(--theme-color);
        }
    }

    .end-text {
        text-align: center;
        color: var(--theme-color);
        font-family: "DIN Next LT Pro";
        font-size: 14.132px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
        margin-top: 25%;
    }
}

.custom-container {
    /* max-width: 100%; */
    margin-inline: auto;
}

.menu-icon {
    display: none;
    cursor: pointer;
}

.navbar-home-section {

    position: relative;
    padding: 100px 50px 0px 50px;
    display: flex;
    align-items: center;

    .boder-bottom-move {
        /* border-bottom: 5px solid var(--theme-color); */
        /* animation: moveBorder 4s ease-in-out forwards; */
        opacity: 0;
        transition: opacity 2s ease-out;
        transition-delay: 2s;
        -webkit-transition: opacity 2s ease-out;
        -webkit-transition-delay: 2s;

    }

    .list-section {
        /* width: 100%; */
        opacity: 0;

        .list-group-nav-ul {
            padding-left: 60px !important;
            display: flex;
            align-items: center;
            padding: 5px 20px;
            flex-wrap: nowrap;

            .nav-item {
                margin-inline: 40px;

                .nav-link {
                    color: var(--theme-color);
                    font-family: "DIN Next LT Pro";
                    font-size: 19.388px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal;
                    text-transform: capitalize;
                    text-wrap: nowrap;
                }
            }
        }
    }
}

.navbar-section {
    position: relative;
    display: flex;
    align-items: center;
    padding: 100px 75px 0px 64px;

    .nav-img-box {
        position: absolute;
        width: 100px;
        height: 100px;
        background: var(--white);
        top: 34%;
        left: 4%;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list-section {
        border-bottom: 5px solid var(--theme-color);
        width: 100%;

        .list-group-nav-ul {
            display: flex;
            padding-left: 150px;
            align-items: center;
            padding: 5px 20px;
            flex-wrap: wrap;
            padding-left: 150px;

            .nav-item {
                margin-inline: 40px;

                .nav-link {
                    color: var(--theme-color);
                    font-family: "DIN Next LT Pro";
                    font-size: 19.388px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal;
                    text-transform: capitalize;
                }
            }
        }
    }
}

.full-screen-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 2s ease;
    -webkit-transition: opacity 2s ease;
    z-index: 9999;
    height: 100vh;
    cursor: auto;

    .logo-img {
        cursor: pointer;
        width: 500px;
        transition: top 2s ease-in-out, right 2s ease-in-out, width 2s ease-in-out, height 2s ease-in-out;
        -webkit-transition: top 2s ease-in-out, right 2s ease-in-out, width 2s ease-in-out, height 2s ease-in-out;
        
    }

    .bg-red-hot-white-box {
        background-color: var(--theme-color);
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        opacity: 1;
        transition: opacity 2s ease;
        -webkit-transition: opacity 2s ease;
       
        .hot-white-img {
            cursor: pointer;
            width: 500px;
            /* transition: opacity 0.5s ease-in-out; */
            /* transition: z-index 0.5s ease-in-out; */
            z-index: 1;
        }
    }
}

.home-body {
    background-color: var(--theme-color);

}

.nav-home-ul {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    transition-delay: 3s;
    -webkit-transition: all 0.5s ease-in-out;
    -webkit-transition-delay: 3s;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -webkit-transition-duration: trnsform 5s ease-in-out;
}

.home-page-container {
    margin: 50px 0;
    opacity: 0;
    /* transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 2s;
    -webkit-transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-transition-delay: 2s; */
}

.footer-home-page-section {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    transition-delay: 2s;
    -webkit-transition: all 0.5s ease-in-out;
    -webkit-transition-delay: 2s;
    display: none;
}


/* -------------- home page section start ---------------- */
.home-container-box {
    transform: translateY(50px);
    opacity: 0;
    transition: all 2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-duration: all 5s ease-in-out;
    -webkit-transition-duration: all 2s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-transition: all 5s ease-in-out;



    .main-head-title {
        font-family: "DIN Next LT Pro";
        font-size: 80.625px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
        color: var(--theme-color);
    }

    .sub-text {
        color: var(--black);
        font-family: "DIN Next LT Pro";
        font-size: 17.284px;
        font-style: normal;
        font-weight: 700;
        line-height: 191.3%;
        /* 36.891px */
        text-transform: uppercase;
    }

    .sub-text-color {
        color: var(--theme-color);
        font-family: "DIN Next LT Pro";
        font-size: 17.284px;
        font-style: normal;
        font-weight: 700;
        line-height: 191.3%;
        text-transform: uppercase;
    }
}

.home-img-slider-section {
    transform: translateY(50px);
    opacity: 0;
    transition-duration: all 5s ease-in-out;
    transition: all 5s ease-in-out;
    -webkit-transition-duration: all 5s ease-in-out;
    -webkit-transition: all 5s ease-in-out;
    margin-top: 110px;

    .home-swiper {
        .swiper-wrapper {
            .swiper-slide {
                justify-content: center;
                display: flex;

                .home-img {
                    box-shadow: 0px 4px 4px 0px #00000040;
                }
            }
        }
    }
}

/* -------------- home page section End ---------------------- */

.contact-us-section {
    .contact-main-box {
        margin: 100px auto;
        width: min(100% - 0px, 500px);

        .contact-card {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            .social-box {
                width: 70px;
                height: 70px;
                display: flex;
                justify-content: center;

                .img-social {
                    width: 50px;
                }
            }

            .main-text {
                font-weight: 700;
                font-size: 17px;
                color: var(--black);

                & a {
                    color: var(--black);
                    text-decoration: none;
                }
            }
        }
    }
}

/* ------------- footer section start ---------- */
.bg-theme-color {
    background-color: var(--theme-color);
}

.footer-section {
    margin-top: auto;
    padding: 50px 0px;

    .footer-logo {
        width: 90px;
    }

    .footer-text {
        margin-bottom: 0;

        .footer-link {
            font-family: Inter;
            font-size: 17px;
            font-style: normal;
            font-weight: 400;
            line-height: 40px;
            /* 166.667% */
            letter-spacing: 0.48px;
            margin-right: 10px;
            text-decoration: none;
            color: var(--white);
            display: inline-block;
        }
    }

    .insta-logo {
        width: 35px;
    }

    .footer-copyright-text {
        text-align: end;
        color: var(--white);
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        /* 166.667% */
        letter-spacing: 0.48px;
        margin-bottom: 0;
        font-family: DIN Next LT Pro;
    }
}

/* --------------- footer section End ------------ */

.custom-container-product {
    margin-inline: auto;
}

.products-section {
    height: 80vh;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;

    .img-box {
        width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-inline: auto;

        & img {
            width: 100%;
        }
    }
}

.swiper-slide-prev {
    .img-box {
        margin-left: -70px;
        transition: all 0.5s step-start;
        transition-duration: all 0.5s step-start;
        -webkit-transition: all 0.5s step-start;
        -webkit-transition-duration: all 0.5s step-start;
        cursor: pointer;
    }
}

.swiper-slide-next {
    .img-box {
        margin-right: -70px;
        transition: all 1s step-start;
        transition-duration: all 0.5s step-start;
        -webkit-transition: all 0.5s step-start;
        -webkit-transition-duration: all 0.5s step-start;
        cursor: pointer;
    }
}

.swiper-slide-active {
    .img-box {
        width: 600px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-inline: auto;
        transition-timing-function: CUBIC-BEZIER(0.25, 0.1, 0.25, 1) !important;
        transition: all 0.5s CUBIC-BEZIER(0.25, 0.1, 0.25, 1) !important;
        animation-timing-function:  all 1s CUBIC-BEZIER(0.25, 0.1, 0.25, 1) !important;
        animation-duration: 1000ms;
        animation-timing-function: CUBIC-BEZIER(0.25, 0.1, 0.25, 1);

       
        /* border: 1px solid red;
        animation: bounce 0.5s;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
        animation-iteration-count: infinite; */


        & img {
            width: 100%;
            animation:easeOutBounce 1s CUBIC-BEZIER(0.25, 0.1, 0.25, 1) !important;
            /* animation-duration: 1s !important; */
            /* animation-delay: 2s !important; */
            transform: scale(1.0);
            /* animation-delay: 0.5s !important; */
            /* animation-duration: 4000ms; */
            /* animation-timing-function: CUBIC-BEZIER(0.25, 0.1, 0.25, 1); */

        }
    }
}

.swiper-slide-next,
.swiper-slide-prev {
    .img-box {
        width: 300px !important;
        transition:  1s cubic-bezier(0.45, 1.45, 0.8, 1) !important;
        transition-duration: 1000ms;
        transition-delay: 1000ms;
        -webkit-transition:  1s cubic-bezier(0.45, 1.45, 0.8, 1) !important;
       -webkit-transition-duration: 1000ms;
        -webkit-transition-delay: 1000ms;
    }
}

.products-card.active {
    opacity: 1;
}

.products-description-box {
    width: min(100% - 0px, 500px);
    margin-inline: auto;
    height: 130px;
    overflow: hidden;
    scroll-behavior: smooth;
    margin-top: 20px;

    .products-card.active {
        opacity: 1;
    }

    .products-card {
        text-align: center;
        height: 150px;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        transition-duration: opacity 7s ease-in-out;
        transition-delay: opacity 0.5s ease-in-out;
        -webkit-transition: opacity 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -webkit-transition-duration: opacity 7s ease-in-out;
        -webkit-transition-delay: opacity 0.5s ease-in-out;

        .main-title {
            color: var(--white);
            font-family: "DIN Next LT Pro";
            font-size: 35px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: uppercase;
        }

        .sub-text {
            color: var(--white);
            text-align: center;
            font-family: "DIN Next LT Pro";
            font-size: 20px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            text-transform: capitalize;
        }
    }
}



@media (max-width:991px) {

    .loging-card {
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

@media (max-width:768px) {
    .loging-section .logo-bg-set {
        width: 400px;
    }
    .loging-card {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 346px;

        .form-section {
            padding: 20px 0;
        }
    }

    .navbar-section .nav-img-box {
        left: 10%;
    }

    .full-screen-logo .bg-red-hot-white-box .hot-white-img {
        cursor: pointer;
        width: 200px;
        transition: opacity 0.5s ease-in-out;
        -webkit-transition: opacity 0.5s ease-in-out;

    }

    .full-screen-logo {

        /* left: 14% !important; */
        .logo-img {
            width: 200px;
        }
    }

    .menu-icon {
        display: block !important;
        text-align: end;

        & img {
            width: 30px;
        }
    }

    .navbar-home-section {
        padding: 100px 23px 0px 32px;

        .list-section .list-group-nav-ul {
            display: none !important;
            position: absolute;
            background: var(--theme-color);
            left: 0;
            width: 100%;
            top: 180px;
            flex-direction: column;
            z-index: 9999;
            padding-left: 0 !important;

            .nav-link {
                color: var(--white) !important;
            }
        }

        .list-section .list-group-nav-ul.active {
            display: flex !important;
            gap: 15px;
            justify-content: center;
            height: 154px;
        }
    }

    .navbar-section {
        padding: 100px 23px 0px 32px;

        /* .nav-img-box{
            left: 6%;
            top: 33%;
            width: 50px;
            & img{
                width: 70px;
            }
        }  */
        .list-section .list-group-nav-ul {
            display: none !important;
            position: absolute;
            background: var(--theme-color);
            left: 0;
            width: 100%;
            top: 158px;
            flex-direction: column;
            z-index: 9999;
            padding-left: 0 !important;

            .nav-link {
                color: var(--white) !important;
            }
        }

        .list-section .list-group-nav-ul.active {
            display: flex !important;
            gap: 15px;
            justify-content: center;
            height: 180px;
        }
    }

    .products-section {
        height: 350px;
    }

    .products-description-box .products-card {
        .main-title {
            font-size: 22px;
        }

        .sub-text {
            font-size: 12px;
        }
    }


    /* -------------- home page section start ---------------- */
    .home-container-box {
        .main-head-title {
            font-size: 40px;
        }

        .sub-text {
            font-size: 14px;
        }
    }

    /* -------------- home page section End ---------------------- */

    .footer-section .footer-logo {
        width: 70px;
    }

    .set-footer-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

@media (max-width:600px) {
    .error-page .error-text{
        font-size: 22px;
    }
    .swiper-slide .img-box {
        width: 90px !important;
        transition: all 0.5s elease-in-out;
        -webkit-transition: all 0.5s elease-in-out;
    }

    .swiper-slide-active .img-box {
        width: 160px !important;
        transform: scale(1.2);
    }

    .swiper-slide-prev {
        transition: all 0.5s elease-in-out;
        -webkit-transition: all 0.5s elease-in-out;

        .img-box {
            margin-left: 0px;
            transition: all 0.5s elease-in-out;
            -webkit-transition: all 0.5s elease-in-out;

        }
    }

    .swiper-slide-next {
        transition: all 0.5s elease-in-out;
        -webkit-transition: all 0.5s elease-in-out;

        .img-box {
            margin-right: 0px;
            transition: all 0.5s elease-in-out;
            -webkit-transition: all 0.5s elease-in-out;
        }
    }
}

@media(max-width:991px) and (min-width:768px) {
    .products-section {
        height: 450px;
    }

    .swiper-slide .img-box {
        width: 180px !important;
    }

    .swiper-slide-active .img-box {
        width: 300px !important;
    }

    .swiper-slide-prev {
        .img-box {
            margin-left: -30px;

        }
    }

    .swiper-slide-next {
        .img-box {
            margin-right: -30px;
        }
    }

    .set-footer-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}


@media (max-width:1024px) and (min-width:1024px) {
    /* .products-section {
        height: 450px;
    } */
}

@media (max-width:820px)and (min-width:820px) {
    /* .products-section {
        height: 450px;
    } */
}

@media (min-width: 1400px) {

    .custom-container-product {
        max-width: 1320px;

    }
}




@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}

@keyframes moveBorder {
    0% {
        width: 0%;
    }

    50% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}
@keyframes easeOutBounce {
    0% {
      transform: translateX(0);
    }
    5% {
        transform: translateX(-1.5%);
        /* transform: scale(1.0); */
        transition: all 0.1s ease-in-out;
  
    }
    10% {
        transform: translateX(-2.5%);
        /* transform: scale(1.0); */
        transition: all 0.2s ease-in-out;
  
    }
    15% {
        transform: translateX(-3.5%);
        /* transform: scale(1.0); */
        transition: all 0.2s ease-in-out;
  
    }
    20% {
        transform: translateX(-4.5%);
        /* transform: scale(1.0); */
        transition: all 0.3s ease-in-out;
  
    }
    25% {
        transform: translateX(-5.5%);
        /* transform: scale(1.0); */
        transition: all 0.5s ease-in-out;
  
    }
    30% {
      transform: translateX(-6.5%);
      /* transform: scale(1.0); */
      transition: all 0.7s ease-in-out;

    }
    35% {
        transform: translateX(-8%);
        /* transform: scale(1.0); */
        transition: all 0.9s ease-in-out;
  
    }
    40% {
      transform: translateX(-9%);
      /* transform: scale(1.0); */
      transition: all 1s ease-in-out;

    }
    45% {
        transform: translateX(-10%);
        /* transform: scale(1.0); */
        transition: all 1.5s ease-in-out;
  
    }
    50% {
        transform: translateX(-15%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    55% {
        transform: translateX(-14%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    60% {
        transform: translateX(-13%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
    }
    65% {
        transform: translateX(-11%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    70% {
        transform: translateX(-9%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    75% {
        transform: translateX(-6.5%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    80% {
        transform: translateX(-3.5%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
    }
    85% {
        transform: translateX(-1.5%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    90% {
        transform: translateX(-1%);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    95% {
        transform: translateX(0);
        /* transform: scale(1.0); */
        transition: all 1s ease-in-out;
  
    }
    100% {
      transform: translateX(0);
      /* transform: scale(1.0); */
      transition: all 2s ease-in-out;
    }
  }