.inter-font {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    /*font-weight: <weight>;*/
    font-style: normal;
}

.noto-serif-font {
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    /*font-weight: <weight>;*/
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

html {
    overflow-x: hidden;
}
body{
    background-color: #f5f8ff;
}



.width1140 {
    width: 1140px;
    margin: 0 auto;
}

/*shared styles */
.fontBlack {
    color: black;
}

.fontGray {
    color: #898c8f;
}

.fontOrange {
    color: #e95a08;
}

.upperNav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 110px;
}

.upperNav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.upperNav ul li {
    list-style: none;
}

.upperNav li a {
    text-decoration: none;
    font-size: 16px;
}

.selected {
    font-weight: 800;
}

.cartBtn {
    background-color: #f5f8ff;
    border: none;
}

.cartBtn a {
    text-decoration: none;
    font-size: 16px;
}

/*banner--------------*/
.banner {
    height: 461px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /*border: 1px solid black;*/
    margin-bottom: 110px;
}

.bannerTitle {
    font-size: 65px;
    font-weight: 700;
}

.bannerPara {
    margin-top: 0;
    font-size: 22px;
    font-weight: 400;
}

.banner img {
    margin: 0;
    width: 576px;
    ;
}

/*Our Plants-------------------------------------------------------------------- */
.ourPlants {
    margin-bottom: 110px;
}

.ourPlantsTexts {
    text-align: center;
}

.title1 {
    font-size: 65px;
    font-weight: 700;
    margin-bottom: 16px;
}

.para1 {
    font-size: 22px;
    font-weight: 400;

    margin-bottom: 50px;
}

.plantCardConatainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.plantCard {
    display: flex;
    width: 270px;
    height: 485px;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    /*border: 2px solid black;*/
}

.plantName {
    font-size: 22px;
    font-weight: 500;
    margin: 0px;
}

.plantPrice {
    font-size: 22px;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
}

.btnCart {
    width: 270px;
    color: white;
    background-color: #e95a08;
    border: none;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    align-self: stretch;
    padding-bottom: 15px;
    padding-top: 15px;
    margin: 0px;
}

/*plants lover part-----------------*/
.plantsLover {
    display: flex;
    justify-content: space-between;
    margin-bottom: 110px;
}

.plTexts {
    margin-left: 90px;
}

.plTexts h2 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
}

.plTexts li {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 20px;
}

.plImages {
    position: relative;
    display: inline-block;
}
@keyframes spin {
    0% {
        transform: rotate(0deg); 
    }
    100% {
        transform: rotate(360deg); 
    }
}
.trustedBadge {
    position: absolute;
    top: -150px;
    right: -120px;
    width: 286px;
    height: 286px;
    z-index: 2;
    animation: spin 10s linear infinite;
}

/*discount cards*/
.deals {
    margin-bottom: 110px;
}

.dealTexts {
    text-align: center;
}

.dealCardContainer {
    display: flex;
    justify-content: space-between;
}

.discCardLeft {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.discCardLeft1 {
    text-align: center;
    background-image: url('../assets/deal-bloom.png');
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;
    border-radius: 10px;
    width: 367px;
    height: 200px;
    align-content: center;
}

.discCardLeft1 a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin-top: 0px;
}

.discCardLeft1 h2 {
    font-size: 20px;
    color: white;
    font-weight: 700;
    margin-bottom: 15px;
}

.discCardLeft2 {
    text-align: center;
    background-image: url('../assets/deal-ana.png');
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;
    border-radius: 10px;
    width: 367px;
    height: 200px;
    align-content: center;
}

.discCardLeft2 a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin-top: 0px;
}

.discCardLeft2 h2 {
    font-size: 20px;
    color: white;
    font-weight: 700;
    margin-bottom: 15px;
}

.discCardRight {
    text-align: center;
    background-image: url('../assets/deal-zabo.png');
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;
    border-radius: 10px;
    width: 753px;
    height: 425px;
    align-content: center;
}

.discCardRight a {
    text-decoration: none;
    color: white;
    font-size: 22px;
    font-weight: 600;
    margin-top: 0px;
}

.discCardRight h2 {
    font-size: 40px;
    color: white;
    font-weight: 600;
    margin-bottom: 15px;
}

/*form -----------------*/
.form {
    margin-bottom: 110px;
    margin-left: -20px;
    background-image: url('../assets/news-letter-bg.png');
    background-color: rgba(0, 0, 0, 0.4);
    background-size: cover;
    background-blend-mode: multiply;
    width: 100vw;
    height: 533px;
    justify-content: center;
    align-content: center;
}

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

}

.formTitle {
    font-size: 50px;
    font-weight: 700;
    color: white;
    text-align: center;
}

.formInput input[type="email"] {
    background-color: white;
    height: 50px;
    width: 644px;
    border: none;
}

input::placeholder {
    font-size: 18px;
    padding: 10px;
}

.btnSub {
    background-color: #e95a08;
    border: none;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    height: 50px;
    width: 186px;
}

/*footer section----------------------*/
footer {
    width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerLeft {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    
}

.footerLeft img {
    width: 135px;
    height: 84px;
}

.footerLeft p {
    font-size: 22px;
    font-weight: 400;
    
}

.bottomNav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
}

.bottomNav a {
    text-decoration: none;
    color: #898c8f;
    font-size: 16px;
    font-weight: 400;
}

.bottomNav li {
    list-style: none;
    margin-bottom: 30px;
}

.footerRight {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}



/* For Mobile Devices */
@media screen and (max-width: 576px) {

    .width1140 {
        max-width: 100%;

    }
    .fontBlack {
        color: black;

    }

    .title1 {
        font-size: 24px;
        margin-bottom: 16px;
        margin-left: 16px;
    }

    .para1 {
        font-size: 16px;
        margin-left: 16px;
    }
    .upperNav li{
         margin-right: 16px;
    }
    .upperNav li:not(:last-child) {
        display: none;
    }

    /*banner--------------*/
    .banner {
        height: 400px;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: flex-end;
        /*border: 1px solid black;*/
        margin-bottom: 110px;
        
    }

    .banner img {
        width: 100%;
        height: 245px;
        margin-bottom: 0px;
    }

    .bannerTitle {
        font-size: 24px;
        font-weight: 700;
        margin-left: 16px;
    }

    .bannerPara {
        margin-top: 13px;
        font-size: 14px;
        font-weight: 400;
        margin-left: 16px;
    }

    .banner img {
        margin: 0;
    }

    /*Our Plants-------------------------------------------------------------------- */
    .ourPlants {
        margin-bottom: 110px;
        width: 100%;
    }

    .ourPlantsTexts {
        text-align: center;
    }

    .plantCardConatainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: 15px;
        align-content: center;
    }

    .plantCard {
        display: flex;
        width: 171px;
        height: 341px;
        flex-direction: column;
        gap: 10px;
        margin: 0 auto;
        /*border: 2px solid black;*/
    }

    .plantCard img {
        width: 171px;
        height: 196.5px;
    }

    .plantName {
        font-size: 16px;
        font-weight: 500;
        margin: 0px;
    }

    .plantPrice {
        font-size: 16px;
        font-weight: 700;
        margin-top: 5px;
        margin-bottom: 0px;
        text-align: center;
    }

    .btnCart {
        width: 171px;
        padding-bottom: 10px;
        padding-top: 10px;
        margin: 0px;
    }

    /*plants lover part-----------------*/

    .plantsLover {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 110px;
    }

    .plTexts {
        margin: 0 auto;
    }

    .plantsLover img {
        width: 100%;
    }

    .plTexts h2 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
        margin-left: 16px;
    }

    .plTexts li {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .plImages {
        position: relative;
        display: inline-block;
    }

    .trustedBadge {
        visibility: hidden;
    }



    /*discount cards*/
    .deals {
        margin-bottom: 110px;
        max-width: 100%;
        align-content: center;
    }

    .dealCardContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .discCardLeft {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .discCardLeft1 {
        width: 367px;
        height: 200px;
        align-content: center;
    }

    .discCardLeft1 a {
        text-decoration: none;
        color: white;
        font-size: 16px;
        font-weight: 600;
        margin-top: 0px;
    }

    .discCardLeft1 h2 {
        font-size: 20px;
        color: white;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .discCardLeft2 {
        text-align: center;
        background-image: url('../assets/deal-ana.png');
        background-color: rgba(0, 0, 0, 0.4);
        background-blend-mode: multiply;
        border-radius: 10px;
        width: 367px;
        height: 200px;
        align-content: center;
    }

    .discCardLeft2 a {
        text-decoration: none;
        color: white;
        font-size: 16px;
        font-weight: 600;
        margin-top: 0px;
    }

    .discCardLeft2 h2 {
        font-size: 20px;
        color: white;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .discCardRight {
        width: 367px;
        height: 200px;
        align-content: center;
    }

    .discCardRight a {
        text-decoration: none;
        color: white;
        font-size: 16px;
        font-weight: 600;
        margin-top: 0px;
    }

    .discCardRight h2 {
        font-size: 20px;
        color: white;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .form {
        margin-bottom: 110px;
        width: 576px;
        height: 275px;
        margin-left: -20px;
        justify-content: center;
        align-content: center;
    }

    .formBar {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .formTitle {
        font-size: 20px;
    }

    .formInput input[type="email"] {
        width: 218px;
    }

    .btnSub {
        font-size: 16px;
        font-weight: 500;
        width: 103px;
    }

    footer {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px;
        margin-bottom: 50px;
    }
    .footerLeft p {
    font-size: 16px
    
}


    .bottomNav ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 0px;
    }
}