*{
    padding: 0;
    margin: 0;
}

body{
    width: 100%;
    height: 100%;
    font-family: inter-regular !important;
}


/* variabls */
:root{
    --lights:#C7C8C6;
    --primary:#1B2316;
    --secondary:#222C1D;
    --deep:#1A1E23;
}


/* Colors */
.bg-lights{
    background-color: var(--lights) !important;
}
.bg-primary{
    background-color: var(--primary) !important;
}
.bg-secondary{
    background-color: var(--secondary) !important;
}
.bg-deep{
    background-color: var(--deep) !important;
}


.text-lights{
    color: var(--lights) !important;
}
.text-primary{
    color: var(--primary) !important;
}
.text-secondary{
    color: var(--secondary) !important;
}


.border-lights{
    border-color: var(--lights) !important;
}
.border-primary{
    border-color: var(--primary) !important;
}
.border-secondary{
    border-color: var(--secondary) !important;
}


/* font family */
@font-face {
    font-family: inter-regular;
    src: url(/asset/font/Inter_24pt-Regular.ttf);
}
@font-face {
    font-family: inter-medium;
    src: url(/asset/font/Inter_24pt-Medium.ttf);
}
@font-face {
    font-family: inter-samiBold;
    src: url(/asset/font/Inter_24pt-SemiBold.ttf);
}
@font-face {
    font-family: inter-bold;
    src: url(/asset/font/Inter_24pt-Bold.ttf);
}
@font-face {
    font-family: inter-light;
    src: url(/asset/font/Inter_28pt-Thin.ttf);
}

.inter-regular{
    font-family: inter-regular !important;
}
.inter-medium{
    font-family: inter-medium !important;
}
.inter-bold{
    font-family: inter-bold !important;
}
.inter-samibold{
    font-family: inter-samiBold !important;
}
.inter-light{
    font-family: inter-light !important;
}



/* Font_size */
.fs-10{
    font-size: 10px !important;
}
.fs-11{
    font-size: 11px !important;
}
.fs-12{
    font-size: 12px !important;
}
.fs-13{
    font-size: 13px !important;
}
.fs-14{
    font-size: 14px !important;
}
.fs-15{
    font-size: 15px !important;
}
.fs-16{
    font-size: 16px !important;
}
.fs-17{
    font-size: 17px !important;
}
.fs-18{
    font-size: 18px !important;
}
.fs-19{
    font-size: 19px !important;
}
.fs-20{
    font-size: 20px !important;
}
.fs-21{
    font-size: 21px !important;
}
.fs-22{
    font-size: 22px !important;
}
.fs-23{
    font-size: 23px !important;
}
.fs-24{
    font-size: 24px !important;
}
.fs-25{
    font-size: 25px !important;
}
.fs-26{
    font-size: 26px !important;
}
.fs-27{
    font-size: 27px !important;
}
.fs-28{
    font-size: 28px !important;
}
.fs-29{
    font-size: 29px !important;
}
.fs-38{
    font-size: 38px !important;
}


/* Landing Page */

.first-section{
    background-image: url(/asset/image/background/nagy-arnold-X_IvVDuHvDQ-unsplash\ 1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
     
}

/* Navbar  */
.logo img{
    width: 48px;
    height: 48px;
}
.navbarDropdown{
    background:transparent;
    backdrop-filter: blur(40px);
    border: 1px solid var(--lights);
}
.navbarDropdown li a:hover{
    background:transparent !important;
     
}
.navbar-toggler{
    padding: 5px 10px !important;
    outline: none !important;
    border: 1px solid !important;
}

@media only screen and (max-width: 768px) {
  .navbar.navbar-expand-lg{
    background: transparent;
    backdrop-filter: blur(20px);
    }
}


/* Search */
.searchOffcanvas{
    background:transparent;
    backdrop-filter: blur(40px);
    height: 150px !important;
}
.offcanvasButton{
    color: #fff !important;
    font-size: 22px;
    padding: 6px;
    border: 1px solid var(--lights);
    border-radius: 50%;
    opacity: 100%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.searchInput{
    background: transparent;
    color: var(--lights);
    border-top: none;
    border-left: none;
    border-right: none;
}
.searchInput:focus{
    background: transparent;
    color: var(--lights);
    box-shadow: none;
    border-color: var(--lights);
}
.searchInput::placeholder{
    color: var(--lights);
    font-size: 14px;
    opacity: 75%;
}
.searchBtn{
    font-size: 20px;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
}

/* shopinghOffcanvas */
.offcanvas-backdrop.show {
    opacity: 100% !important;
    background:transparent;
}
.shopinghOffcanvas{
    background:transparent;
    backdrop-filter: blur(80px);
    width: 20% !important;
}
@media only screen and (max-width: 768px) {
  .shopinghOffcanvas{
        width: 30% !important;
    }
}
@media only screen and (max-width: 525px) {
  .shopinghOffcanvas{
        width: 50% !important;
    }
}
@media only screen and (max-width: 375px) {
  .shopinghOffcanvas{
        width: 70% !important;
    }
}

.shopingCarts-close{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 22px;
    padding-right: 3px;
    padding-top: 3px;
}


/* First Section */
.bigtext{
    font-size: 118px;
}
@media only screen and (max-width: 768px) {
   .bigtext{
        font-size: 80px !important;
    }
    .big-p{
        font-size: 18px !important;
    }
}@media only screen and (max-width: 425px) {
   .bigtext{
        font-size: 50px !important;
        text-align: center;
    }.big-p{
        font-size: 16px !important;
    }
}


.homeBtn .firstbtn{
    width: 217 !important;
    height: 64 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}.homeBtn .firstbtn:hover{
    background-color: var(--lights);
    color: var(--primary) !important;
}
.secondbtn iconify-icon{
    font-size: 68px !important;
}
@media only screen and (max-width: 540px) {
   .homeBtn .firstbtn{
        width: 180 !important;
        height: 54 !important;
        font-size: 20px !important;
        background-color: var(--lights);
        color: var(--primary) !important;
    }.homeBtn .firstbtn:hover{
        background: transparent;
        color: var(--lights) !important;
    }
    .secondbtn{
        iconify-icon{
            font-size: 55px !important;
        }
        span{
            font-size: 16px !important;
        }
    }
}
@media only screen and (max-width: 465px) {
   .homeBtn .firstbtn{
        width: 150 !important;
        height: 45 !important;
        font-size: 18px !important;
        background-color: var(--lights);
        color: var(--primary) !important;
    }
    .secondbtn{
        iconify-icon{
            font-size: 44px !important;
        }
        span{
            font-size: 14px !important;
        }
    }
}
@media only screen and (max-width: 385px) {
   .homeBtn{
    display: block !important;
    text-align: center !important;
   }
    .homeBtn .firstbtn{
        width: 250 !important;
        height: 45 !important;
        font-size: 20px !important;
    }
    .homeBtn .secondbtn{
        margin-top: 15px !important;
        width: 250 !important;
        height: 45 !important;
        background-color: var(--lights);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        iconify-icon{
            font-size: 40px !important;
            color: var(--primary);
        }
        span{
            font-size: 16px !important;
            color: var(--primary);
        }
    }

}

/* ExclusiveSlider */
.ExclusiveSlider {
    background: rgba(255, 255, 255, 0.07); /* light glass effect */
    backdrop-filter: blur(10px);          /* frosted glass */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    position: relative;
    padding: 10px;
    color: white;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid #494E45;
}
.sliderOverflow{
    overflow-x: hidden !important;
}
.plant-img {
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 420px;
    z-index: 2;
    object-fit: cover;
}
.card-content {
    margin-top: 300px;
    text-align: start;
}@media only screen and (max-width: 1440px) {
    .card-content {
        margin-top: 240px;
    }
}@media only screen and (max-width: 1250px) {
    .card-content {
         margin-top: 180px;
    }
}
@media only screen and (max-width: 980px) {
    .card-content {
        margin-top: 380px;
    }
}
@media only screen and (max-width: 768px) {
    .card-content {
         margin-top: 300px;
    }
    .plant-img {
        width: 450px;
    }
}
@media only screen and (max-width: 445px) {
    .card-content {
        margin-top: 270px;
    }
    .ExclusiveSlider{
        padding: 0px !important;
    }
}

.subtitle {
    color: #b4b2b2 !important;
}
.title {
    margin-bottom: 10px;
}
.buy-btn {
    border: 1px solid #b4b2b2 !important;
    background-color: transparent;
    color: white;
}
.buy-btn:hover{
    border: 1px solid #b4b2b2 !important;
    background-color: var(--lights);
    color: var(--primary) !important;
}

.nextArrows{
    font-size: 40px;
    height: 40px;
    width: 40px;
    border: 1px solid var(--lights);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 80%;
    right: 1%;
}

/* Comments */
.blurBack{
    background: rgba(255, 255, 255, 0.07); /* light glass effect */
    backdrop-filter: blur(10px);          /* frosted glass */
    -webkit-backdrop-filter: blur(10px);
    color: white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid #494E45;
}






/* Our Trendy plants */
.plantsTitle{
    font-size: 55px !important;
    font-family: inter-samiBold; 
    display: inline;
    padding: 0px 25px;
    position: relative;
    overflow: visible;
    
    &::after{
        content: '';
        background-image: url(/asset/image/shape/Vector\ 1.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 60px;
        width: 65px;
        position: absolute;
        top: 0;
        right: 0;
    }
    &::before{
        content: '';
        background-image: url(/asset/image/shape/Vector\ 2.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 65px;
        width: 60px;
        position: absolute;
        bottom: -4px;
        left: 0;
    }
}@media only screen and (max-width: 535px) {
    .plantsTitle{
        font-size: 40px !important;
        padding: 0px 20px;
        &::after{
            content: '';
            height: 42px;
            width: 40px;
        }
        &::before{
            content: '';
            height: 42px;
            width: 40px;
        }
    }
}@media only screen and (max-width: 535px) {
    .plantsTitle{
        font-size: 30px !important;
        &::after{
            content: '';
            height: 42px;
            width: 42px;
        }
        &::before{
            content: '';
            height: 42px;
            width: 42px;
        }
    }
}


.plantabigCards{
    position: relative;
    border-radius: 125px;
    height: 526px;
}
.plantsImages{
    width: 610px;
    height: 732px;
    margin-top: -250px;
}

.plantabigCardsBtn.first{
    width: 217px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover{
        background-color: var(--lights);
        color: var(--secondary) !important;
    }
}
.plantabigCardsBtn.second{
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover{
        background-color: var(--lights);
        color: var(--secondary) !important;
    }
}

@media only screen and (max-width: 1300px) {
    .plantsImages{
        width: 550px;
        height: 650px;
        
    }
    .plantabigCardsTitle{
        font-size: 32px !important;
    }
    .plantabigCardsPrice{
        font-size: 32px !important;
    }
    .plantabigCardsBtn.first{
        width: 200px;
        height: 60px;
    }
    .plantabigCardsBtn.second{
        width: 60px;
        height: 60px;
    }
}
@media only screen and (max-width: 992px) {
    .plantabigCards{
        border-radius: 100px;
        height:auto !important;
        border-radius: 55px !important;
    }
    .plantsImages{
        width: 550px;
        height: 650px;
        
    }
    .plantabigCardsTitle{
        font-size: 32px !important;
    }
    .plantabigCardsPrice{
        font-size: 32px !important;
    }
    .plantabigCardsBtn.first{
        width: 200px;
        height: 60px;
    }
    .plantabigCardsBtn.second{
        width: 60px;
        height: 60px;
    }
}
@media only screen and (max-width: 525px) {
    .plantabigCards{
        border-radius: 100px;
        height:auto !important;
        border-radius: 15px !important; 
    }
    .plantsImages{
        width: 100%;
        height: 450px;
        margin-top: -200px;
        
    }
    .plantabigCardsTitle{
        font-size: 24px !important;
    }
    .plantabigCardsPrice{
        font-size: 24px !important;
    }
    .plantabigCardsPara{
        font-size: 17px !important;
    }
    .plantabigCardsBtn.first{
        width: 180px;
        height: 50px;
        font-size: 20px !important;
    }
    .plantabigCardsBtn.second{
        width: 50px;
        height: 50px;
    }
}





/* Our Top Selling */
.toSellingCard{
    border-radius: 55px;
}
.toSellingCard .mainImages2 img{
    margin-top: -150px !important;
}
.toSellingCardTitle{
    font-size: 38px !important;
}
.toSellingCardText{
    font-size: 18px;
    opacity: 75%;
}
.toSellingCardPrice{
    font-size: 35px !important;
}
.toSellingCardshoping{
    width: 45px;
    height: 45px;
    display: flex; 
    align-items: center;
    justify-content: center;
    font-size: 24px;
    &:hover{
        background-color: var(--lights) !important;
        color: var(--secondary) !important;
    }
}
@media only screen and (max-width: 525px) {
 .toSellingCard{
        border-radius: 35px;
    }
    .toSellingCard .mainImages2 img{
        margin-top: -150px !important;
    }
    .toSellingCardTitle{
        font-size: 34px !important;
    }
    .toSellingCardText{
        font-size: 16px;
        opacity: 75%;
    }
    .toSellingCardPrice{
        font-size: 29px !important;
    }
    .toSellingCardshoping{
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}





/* Our Top Selling */
.TrendyplantsCard{
    border-radius: 50px;
}
.TrendyplantsCardTeaxt{
    font-size: 20px !important;
}