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

::-webkit-scrollbar{
    width: 12px;
}

::-webkit-scrollbar-track{
    background-color: white;
}

::-webkit-scrollbar-thumb{
    background-color: pink;
    border-radius: 20px;
    height: 200px;
    border: 2px solid rgb(217, 215, 215);
}

::-webkit-scrollbar-thumb:hover{
    background-color: gray;
}

/* signup , signin, forget password */

.signup, .signin, .forget, .changePass {
    background: linear-gradient(to top, pink , white);
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup form, .signin form, .forget form, .changePass form {
    height: auto;
    width: 25rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: transparent;
    box-shadow: 2px 2px 8px gray;
    padding: 30px;
}

.signup form input, .signup form button, .signin form input, .signin form button, .forget form input, .forget form button, .changePass form input, .changePass form button {
    padding: 10px;
    font-size: 15px;
    border-radius: 10px;
    border: none;
}

.signup form input:focus {
    outline: 0;
}


.signup form a, .signin form a, .forget form a {
    text-align: right;
    color: palevioletred;
    text-decoration: none;
}

.signup form h2, .signin form h2, .forget form h2, .changePass form h2 {
    text-align: center;
    text-shadow: 2px 2px 8px pink;
    color: palevioletred;
}

.signup form button, .signin form button, .forget form button, .changePass form button{
    width: 40%;
    margin: auto;
    background-color: palevioletred;
    cursor: pointer;
    color: white;
}
.changePass form button{
    width: 60%;
    margin-top: 10px;
}

.changePass form input.i1{
    width: 40px;
    text-align: center;
}

div.i {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

/* header */

.header {
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border: 2px double pink;
    font-size: 20px;
    box-shadow: 0 5px 9px pink;
    position: fixed;
    top: 0;
    background-color: white;
    z-index: 2;
}

.logo a {
    text-decoration: none;
    color: black;
    font-weight: bolder;
}

.menu {
    display: flex;
    flex-direction: row;
    gap: 20px;
    position: relative;
    left: 70px;
}

.menu a {
    text-decoration: none;
    color: black;
    border: 2px solid pink;
    padding: 20px 30px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 300;
    font-family: sans-serif;
}

.menu a:hover {
    background-color: pink;
    transform: rotate(1deg);
    transition: all 1s ease-in-out;
    border-radius: 5px 50px 50px 50px;
}

.menu .item1 {
    background-color: pink;
    transform: rotate(1deg);
    transition: all 2s ease-in-out;
    border-radius: 5px 50px 50px 50px;
}

.mbl_menu {
    display: none;
}

.icons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.mbl_menu i:hover, .logo a:hover , .icons i:hover{
    color: palevioletred;
}

.menu_mbl{
    display: none;
}

.menu_mbl a{
    text-decoration: none;
    color: black;
    padding: 10px;
}

.drop{
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: linear-gradient(to bottom,pink,white);
    position: absolute;
    top: 80px;
    right: 30px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.drop a{
    text-decoration: none;
    color: black;
    font-size: smaller;
    padding: 15px;
    display: block;
}


#search_box input{
    padding: 15px;
    width: 80%;
    position: relative;
    right: -40px;
    background-color: rgb(254, 205, 213);
    border: none;
    border-radius: 20px 0px 20px 20px;
    outline: 0;
}


/* home */

.l1 img, .l2 img, .l3 img, .l4 img, .l5 img {
    height: 100px;
    width: 100px;
}

.pink_bg img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.img_bg img {
    height: 400px;
    width: 600px;
}

.home {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 100px;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(to bottom,white, pink);
}

.right {
    position: relative;
}

.gray_bg {
    position: relative;
    height: 15rem;
    width: 38rem;
    top: 350px;
    right: 60px;
    background-color: rgb(197, 196, 196);
    border-radius: 30px 200px 10px 200px;
}

.pink_bg {
    height: 30rem;
    width: 40rem;
    background-color: pink;
    border-radius: 200px 500px 20px 300px;
    position: relative;
    top: -300px;
}

.img_bg {
    position: relative;
}

.img_bg img {
    position: absolute;
    top: -20px;
}

.pink_border {
    border: 2px dotted rgb(228, 147, 161);
}

.pink_border:hover {
    transform: rotate(360deg);
    transition: 2s ease-in-out;
}

.l1 , .l2, .l3, .l4 ,.l5 {
    background-color: rgba(225, 225, 223, 0.77);
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}
.l1:hover , .l2:hover, .l3:hover, .l4:hover ,.l5:hover {
    filter: drop-shadow(6px 6px 2px rgb(194, 193, 193));
}
.l1 img , .l2 img , .l3 img , .l4 img , .l5 img {
    position: absolute;
    top: 20px;
    left: 0;
}

.l1 img:hover , .l2 img:hover , .l3 img:hover , .l4 img:hover , .l5 img:hover {
    transform: rotateY(180deg);
    transition: 2s ease-in-out;
}

.left_side {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 30px 0;
    gap: 20px;
}

.left p {
    margin: 10px 90px;
}

.left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.left h2{
    font-size:xx-large;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: rgb(185, 116, 127);
}

.left h2::first-letter {
    font-size: 60px;
}

.left p {
    text-transform: capitalize;
}

.left h3 {
    text-transform: capitalize;
    font-size: x-large;
    margin: 25px 0;
    color: rgb(185, 116, 127);
}

.left a button {
    text-decoration: none;
    padding: 20px;
    width: 30%;
    background-color: pink;
    border: 2px dotted rgb(185, 116, 127);
    border-radius: 20px;
    margin: 20px auto;
    font-size: 17px;
    text-transform: capitalize;
    color: black;
    cursor: pointer;
}

.left a button:hover , .center_items a button:hover, .about2 button:hover{
    background-color: white;
    transform: rotate(1deg);
    color: rgb(185, 116, 127);
    transition: all 1s ease-in-out;
    border-radius: 5px 50px 50px 50px;
}

/* new arrivals */

.new_arrivals {
    height: auto;
    width: 100%;
    background: linear-gradient(to top, white,pink);
    padding-top: 110px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;
}

.first_new h3 {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
}

.left_new {
    border-right: 2px dotted rgb(185, 116, 127);
}

.first_new p {
    text-transform: capitalize;
}

.first_new {
    display: flex;
    flex-direction: row;  
}

.left_new , .right_new {
    background-color: antiquewhite;
    padding: 20px;
    width: 100%;
    text-align: center;
}

.second_new {
    display: flex;
    flex-direction: column;
}

.four_items {
    display: flex;
    flex-direction: row;
    background-color: rgb(239, 237, 237);
    padding: 20px;
    justify-content: space-around;
    text-transform: uppercase;
    text-align: center;
}

.three_items {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around; 
}

.three_items img {
    background-color: rgb(226, 191, 95);
}

.center_items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.center_items h4 {
    text-transform: capitalize;
    font-weight: 800;
    font-style: italic;
    margin-bottom: 20px;
    color: black;
    font-size: x-large;
}

.center_items h2 {
    text-transform: capitalize;
    color: rgb(185, 116, 127);
    font-size: 50px;
    margin-bottom: 20px;
}

.center_items p {
    font-family: sans-serif;
    text-align: center;
    font-style: italic;
    margin-bottom: 40px;
}

.center_items a button {
    text-decoration: none;
    padding: 20px 40px;
    background-color: pink;
    border: 2px dotted rgb(185, 116, 127);
    border-radius: 20px;
    margin: 20px auto;
    font-size: 15px;
    text-transform: capitalize;
    color: black;
    cursor: pointer;
}

.third_new {
    display: flex;
    flex-direction: row;
    padding: 20px;
    background-color: aliceblue;
    justify-content: space-around;
    text-align: center;
}

.third_new h2, .third_new p {
    text-transform: uppercase;
}

.third_new button {
    padding: 20px;
    background-color: red;
    color: white;
    font-size: large;
    border: none;
    cursor: pointer;
}

/* products */

.products {
    height: auto;
    width: 100%;
    background: linear-gradient(to top ,white 40%, pink 5%, white 40%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    padding-bottom: 30px;
    overflow: hidden;
}


.top_products {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 50px;
    align-items: center;
    margin-top: 120px;
}

.images_prods {
    display: flex;
    flex-direction: row;
    gap: 90px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.images_prod {
    background-color: rgb(230, 150, 125);
    border-radius: 50%;
    height: 100px;
    width: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    outline-color: rgb(185, 116, 127);
    outline-style: dotted;
    outline-width: 2px;
    outline-offset: 10px;   
}

.images_prod img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    cursor: pointer;
}

.images_prod img:hover {
    transform: rotate(360deg);
    transition: 2s ease-in-out;
}

.top_products h2 {
    font-weight: bold;
    font-size: xx-large;
    color: rgb(185, 116, 127);
    text-align: center;
    text-transform: capitalize;
}

.images_prod h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: medium;
    letter-spacing: 2px;
    color: rgb(185, 116, 127);
}

.all_products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px 20px;
}

.all_products .prod {
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    width: 300px; 
    border-radius: 20px;
    justify-content: center;
    height: auto;
    margin: auto;
}

.gray_prod {
    height: 300px;
    width: 300px;
    background-color: rgb(245, 242, 242);
    border-radius: 20px;
    position: relative;
    border: 2px dotted palevioletred;
}

.btn_prod {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.gray_prod h3 {
    position: absolute;
    bottom: 70px;
    left: 60px;
    color: rgb(185, 116, 127);
}

.gray_prod .btn_prod {
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    bottom: 30px;
    left: 30px;
    top: 250px;
}

.btn_prod h5 {
    color: black;
    font-size: larger;
}

.btn_prod button i {
    position: absolute;
    right: -370px;
    color: rgb(185, 116, 127);
    cursor: pointer;
}

.gray_prod i {
    font-size: x-large;
    position: absolute;
    top: -5px;
    left: -5px;
    color: black;
    cursor: pointer;
}

.gray_prod i:hover {
    color: rgb(185, 116, 127);
}

.pink_prod {
    height: 13rem;
    width: 9rem;
    background-color: pink;
    border-radius: 200px 200px 10px 500px;
    position: absolute;
    right: 0;
    top: -30px;
}

.pink_prod img {
    height: 200px;
    width: 200px;
    position: absolute;
    right: 50px;
    top: 40px;
    cursor: pointer;
    filter: drop-shadow(8px 8px 8px rgb(88, 87, 87));
}

.pink_prod img:hover {
    transform: rotateY(180deg);
    transition: 1.5s ease-in-out; 
}

/* about */

.about {
    height: auto;
    width: 100%;
    background: linear-gradient(to top ,white, pink, white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.about1 {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60vh;
    background-image: url(images/about/about_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    opacity: 0.6;
}

.about1 h2 {
    color: rgb(185, 116, 127);
    font-size: xx-large;
    margin-top: -120px;
    text-transform: capitalize;
    text-align: center;
}

.about1 p {
    text-transform: capitalize;
    text-align: center;
}

.about2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.about2 h2 {
    font-size:xx-large;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
    color: rgb(185, 116, 127);
}

.about2 h2::first-letter {
    font-size: 60px;
}

.about2 p {
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 30px;
}

.about2 h6 {
    text-align: center;
    text-transform: lowercase;
    font-size: larger;
    width: 500px;
    font-weight: lighter;
}

.about2 button {
    padding: 20px;
    width: 30%;
    background-color: pink;
    border: 2px dotted rgb(185, 116, 127);
    border-radius: 20px;
    margin: 60px 180px 0px;
    font-size: 15px;
    text-transform: capitalize;
    color: black;
    cursor: pointer;
}

.about3 {
    display: flex;
    flex-direction: row;
    padding: 20px;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(226, 191, 95,0.8);
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
}

.about4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px 0;
    gap: 50px;
}

.about4 h2 , .about5 h2 {
    text-transform: capitalize;
    font-size: xx-large;
    color: rgb(185, 116, 127);
    text-align: center;
}

.about4 p, .about5 p {
    text-transform: capitalize;
    text-align: center;
}

.images_team img{
    height: 25rem;
    width: 18rem;
}

.images_team{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 80px;
}

.team1, .team2, .team3 {
    position: relative;
}

.icons_team {
    position: absolute;
    top: 200px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-size: 30px;
    left: 80px;
}

.icons_team a {
    color: white;
}

.images_team img:hover{
    cursor: pointer;
    opacity: 0.4;
}

.about5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
    margin-bottom: 40px;
}

.service1, .service2 , .service3 {
    border: 7px dotted pink;
    filter: drop-shadow(8px 8px 10px rgb(185, 116, 127));
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 10px;
}

.sevices {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-around;
}

.service1 img , .service2 img, .service3 img{
    height: 25rem;
    width: 18rem;
}

/* contact */

.contact {
    display: flex;
    flex-direction: column;
    height: auto;
    width: auto;
    margin: 20px 10px;
    gap: 30px;
    text-align: center;
    color: rgb(185, 116, 127);
    font-size: x-large;
    padding-top: 120px;
    overflow: hidden;
}

.contact_page {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: large;
    gap: 20px;
}

.contact11 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border: 2px dotted rgb(185, 116, 127);
    padding: 20px 30px;
    border-radius: 20px;
    width: 100%;
}

.contact11 form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact11 form input, .contact11 form textarea {
    padding: 15px 10px;
    font-size: 15px;
    outline: 0;
    background-color: rgb(247, 201, 208);
    border: none;
}

.contact11 form input:focus, .contact11 form textarea:focus {
    border: none;
}

.contact12 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.contact12 iframe {
    width: 80%;
    height: 100%;
}

.btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.btns button{
    padding: 15px 20px;
    border-radius: 20px;
    background-color: pink;
    border: none;
    font-size: 15px;
    color: rgb(111, 7, 42);
}

/* terms & conditions , privacy policy , faq's */

.terms, .privacy , .faq {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    width: 100%;
    overflow: hidden;
}

.terms11 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/terms_conditions/terms.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    width: 100%;
    margin-top: 90px;
    height: 60vh;
    object-fit: fill;
    font-size: xx-large;
    color: white;
    text-shadow: 0px 2px 2px black;
}

.privacy11 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/privacy_policy/privacy.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    width: 100%;
    margin-top: 90px;
    height: 60vh;
    object-fit: fill;
    font-size: xx-large;
    color: white;
    text-shadow: 0px 2px 2px black;
}

.faq11 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/faqs/faq.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    width: 100%;
    margin-top: 90px;
    height: 60vh;
    object-fit: fill;
    font-size: xx-large;
    color: white;
    text-shadow: 0px 2px 2px black;
}

.terms12, .privacy12, .faq12 {
    display: flex;
    flex-direction: column;
}

.terms12 h2, .privacy12 h2, .faq12 h2 {
    text-align: center;
    color: rgb(185, 116, 127);
    font-size: xx-large;
    margin-top: 40px;
}

dl {
    margin: 80px auto;
    border: 3px dotted pink;
    padding: 20px;
}

dt {
    font-weight: bold;
    font-size: large;
}

dd {
    text-indent: 45px;
}

.qa {
    border: 2px dotted pink;
    padding: 40px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

summary {
    font-weight: bold;
    font-size: large;
}

/* cart */

.cart {
    height: auto;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 120px;
}

.cart .top {
    background: linear-gradient(to top, pink, white);
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart .top h2 {
    font-size: xx-large;
    text-transform: capitalize;
    font-weight: bold;
    text-shadow: 2px 2px 2px palevioletred;
}

.icons3 {
    display: flex;
    flex-direction: row;
    background-color: bisque;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px;
}

.i1 i, .i2 i, .i3 i {
    color: rgb(185, 116, 127);
}

.i1 p, .i2 p, .i3 p {
    text-indent: 3px;
    margin-top: 5px;
}

.center {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.cart12 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid pink;
    padding: 20px;
    width: 30%;
    height: 40%;
}

.cart11 {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.cart12 h2 {
    text-align: center;
    color: rgb(185, 116, 127);
    text-transform: capitalize;
}

.width1 {
    height: 1.5px;
    margin: 20px auto;
    width: 90%;
    background-color: rgb(185, 116, 127);
}

.c1 {
    display: flex;
    flex-direction: row;
    text-transform: capitalize;
    justify-content: space-between;
}

.cart12 button {
    padding: 20px;
    background-color: pink;
    border: none;
    font-size: 15px;
    margin: 10px 0;
    text-transform: capitalize;
    cursor: pointer;
}

.cart11 form {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-evenly;
    align-items: center;
}

.cart11 form input {
    padding: 15px;
    font-size: 15px;
}

.cart11 form button {
    padding: 17px;
    font-size: 15px;
    background-color: rgb(228, 147, 161);
    color: black;
    border: none;
    text-transform: capitalize;
    cursor: pointer;
}

.cart11 form a {
    color: rgb(185, 116, 127);
    text-transform: capitalize;
}

.cart11 table {
    overflow: scroll;
    text-transform: capitalize;
}

.cart11 table, .cart11 table tr, .cart11 table td, .cart11 table th {
    padding: 20px;
    border: 2px solid pink;
    border-collapse: collapse;
}

.cart11 table td {
    text-align: center;
}

.cart11 table tr .pm button {
    padding: 10px;
    border: none;
    margin: 5px;
    color: white;
    font-size: large;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
}

.cart11 table tr .pm .green {
    background-color: rgb(40, 250, 40);
}

.cart11 table tr .pm .red {
    background-color: rgb(254, 52, 52);
}

.cart11 table tr .rr {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
}

.cart11 table tr .rr .r1 {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}

.cart11 table tr .rr h5 {
    color: rgb(185, 116, 127);
    font-size: large;
}

.cart11 table tr .rr .r3 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-evenly;
}

.cart11 table tr .rr .r3 select, .cart11 table tr .rr .r3 button {
    padding: 10px;
}

.cart11 table tr .rr .r3 button {
    border: none;
    font-size: 15px;
    cursor: pointer;
}

.cart11 table tr .rr .r3 .heart i {
    color: rgb(185, 116, 127);
}

.cart11 table tr .rr .r3 .delete i {
    color: red;
}

/* footer */

footer {
    display: flex;
    flex-direction: column;
    padding: 10px 250px;
    background-color: pink;
    text-transform: capitalize;
    width: 100%;
    border: 2px dotted rgb(185, 116, 127);
    position: relative;
}

.above i{
    padding: 10px;
    background-color: white;
    position: absolute;
    right: 10px;
    color: rgb(185, 116, 127);
    font-size: xx-large;
}

.above i:hover {
    border-radius: 20px;
}

.footer_section2 {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.s2_div2 i {
    padding-right: 20px;
    font-size: 30px;
    color: black;
}

.s2_div2 {
    margin-top: -10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.s2_div2 i:hover {
    color: white;
}

.s2_div1 p {
    font-size: 17px;
    margin-bottom: 10px;
}

.footer_section1 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 40px;
}

.s1_div1 {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.s1_div2 {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.s1_div3 {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.s1_div4 {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.footer_section1 .s1_div1 a,.s1_div2 a,.s1_div3 a,.s1_div4 a {
    text-decoration: none;
    color: black;
    margin-bottom: 7px;
}

.footer_section1 .s1_div1 a:hover,.s1_div2 a:hover,.s1_div3 a:hover,.s1_div4 a:hover {
    color: white;
}


@media (max-width:600px) {

    /* header */

    .mbl_menu {
        display: block;
    }
    
    .menu {
        display: none;
    }
    .drop{
        position: absolute;
        top: 80px;
        right: 80px;
    }
    .menu_mbl{
        position: absolute;
        top: 80px;
        right: 20px;
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom,pink,white);
        padding: 20px;
        font-size: medium;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    #cross{
        display: none;
    }
    #active{
        display: block;
    }
    .menu_mbl {
        display: none;
    }
    #search_box {
        display: none;
    }
    /* home */

    .l1 img, .l2 img, .l3 img, .l4 img, .l5 img {
        height: 50px;
        width: 50px;
    }
    .img_bg img {
        height: 150px;
        width: 230px;
    }
    .home {
        height: auto;  
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
        gap: 160px;
    }
    .gray_bg {
        height: 7rem;
        width: 15rem;
        position: relative;
        top: 140px;
        right: 0px;
    }
    .pink_bg {
        height: 10rem;
        width: 16rem;
        top: -100px;
        position: relative;
    }
    .img_bg img {
        position: absolute;
        top: -40px;
    }
    .pink_bg .pink_border {
        height: 50px;
        width: 50px;
    }
    .left {
        padding: 0 40px;
        text-align: center;
    }
    .left p {
        margin: 10px 10px;
        text-align: justify;
    }
    .l1 , .l2, .l3, .l4 ,.l5 {
        background-color: rgba(235, 235, 231, 0.77);
        height: 50px;
        width: 50px;
    }
    .left_side {
        gap: 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .left a button {
        padding: 20px;
        width: 70%;
    }

    /* new arrivals */

    .left_new {
        border: none;
    }
    .first_new {
        display: flex;
        flex-direction: column;  
        gap: 10px;
    }
    .four_items {
        display: flex;
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .three_items {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;   
    }
    .third_new {
        display: flex;
        flex-direction: column;
        gap: 20px;
        font-size: small;
    }
    .center_items p {
        text-align: justify;
        margin-top: 10px;
    }

    /* products */

    .all_products .prod {
        width: 270px;
    }

    /* about */

    .about2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 30px;
        align-items: center;
    }

    .about2 h2 {
        font-size: larger;
    }

    .about2 h6 {
        font-size: small;
        padding: 0 100px;
    }

    .about2 button {
        margin: 60px 170px;
    }

    .about3 {
        display: flex;
        flex-direction: column;
        gap: 40px;
        justify-content: center;
        align-items: center;
        font-size: 15px;
    }

    .images_team {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 10px;
    }
    .sevices {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 0 15px;
        align-items: center;
    }
    .service1, .service2 , .service3 {
        width: 300px;
    }

    /* contact */

    .contact_page {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: large;
        gap: 20px;
    }

    /* terms & conditions , privacy policy , faq's */

    .terms11, .privacy11, .faq11 { 
        text-align: center;
        font-size: x-large;
        margin-top: 100px;
    }

    .qa {
        padding: 20px;
    }

    /* cart */

    .icons3 {
        flex-direction: column;
        gap: 40px;
        font-size: 10px;
    }

    .cart .top h2 {
        font-size: larger;
    }

    .icons3 p, .icons3 h2 {
        text-align: center;
    }

    .center {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .cart11 {
        width: 90%;
        overflow-x: auto;
    }

    table {
        overflow-x: scroll;
    }
    

    .cart12 {
        width: 90%;
    }

    .cart11 form {
        flex-direction: column;
        margin: 20px 0;
        gap: 20px;
    }

    .cart11 form button, .cart11 form input {
        width: 100%;
    }

    /* footer */

    footer {
        padding: 10px;
    }
    .s2_div2 i {
        padding-right: 20px;
        font-size: 20px;
    }
    .s2_div1 p {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .footer_section1 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        text-align: center;
        gap: 20px;
    }
    
}

@media (min-width:321px) and (min-width:375px){
    /* header */

    .drop{
        position: absolute;
        top: 80px;
        right: 110px;
    }
}

@media (min-width:376px) and (max-width:426px){
    /* header */

    .drop{
        position: absolute;
        top: 80px;
        right: 135px;
    }
}

@media (min-width:601px) and (max-width:770px) {

    /* header */

    .mbl_menu {
        display: block;
    }
    
    .menu {
        display: none;
    }

    .drop{
        position: absolute;
        top: 80px;
        right: 205px;
    }

    .menu_mbl{
        position: absolute;
        top: 80px;
        right: 20px;
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom,pink,white);
        padding: 20px;
        font-size: medium;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        display: none;
    }
    #cross{
        display: none;
    }
    #active{
        display: block;
    }
    #search_box input {
        display: block;
    }

    /* home */

    .l1 img, .l2 img, .l3 img, .l4 img, .l5 img {
        height: 70px;
        width: 70px;
    }
    .img_bg img {
        height: 300px;
        width: 500px;
    }
    .home {
        height: auto;  
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
        gap: 400px;
    }
    .gray_bg {
        height: 10rem;
        width: 27rem;
        position: relative;
        top: 340px;
        left: 0;
    }
    .pink_bg {
        height: 23rem;
        width: 30rem;
        position: relative;
        top: -250px;        
    }
    .img_bg img {
        position: absolute;
        top: -33px;
    }
    .l1 img , .l2 img , .l3 img , .l4 img , .l5 img {
        position: absolute;
        top: 40px;
        left: 15px;
    }

    /* new arrivals */

    .three_items {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;    
    }
    .third_new {
        font-size: small;
    }

    /* products */
    
    .all_products .prod {
        width: 350px;
    }

    /* about */

    .about2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 30px;
        align-items: center;
    }

    .about3 {
        font-size: 10px;
        margin: 20px 0;
    }

    .images_team {
        gap: 6px;
    }

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

    /* terms & conditions and privacy policy */

    .terms11, .privacy11, .faq11 { 
        margin-top: 90px;
    }

    /* cart */

    .icons3 {
        font-size: 10px;
    }

    .center {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .cart11 {
        width: 90%;
    }

    .cart12 {
        width: 90%;
    }


    /* footer */

    footer {
        padding: 10px;
    }
    .s2_div2 i {
        padding-right: 20px;
        font-size: 20px;
    }
    .s2_div1 p {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .footer_section1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
    }
    
    
}

@media (min-width:771px) and (max-width:1025px) {

    /* header */

    .mbl_menu {
        display: block;
    }
    
    .menu {
        display: flex;
        position: relative;
        left: 0;
    }

    .drop{
        position: absolute;
        top: 80px;
        right: 35px;
    }

    .menu_mbl{
        display: none;
    }

    .mbl_menu{
        display: none;
    }
    
    #search_box input{
        display: none;
    }

    /* home */

    .img_bg img {
        height: 300px;
        width: 500px;
    }
    
    .home {
        height: auto;  
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
        gap: 400px;
    }
    .gray_bg {
        height: 13rem;
        width: 35rem;
        position: relative;
        top: 350px;
    }
    .pink_bg {
        height: 23rem;
        width: 38rem;
        position: relative;
        top: -250px; 
        left: 0px;       
    }
    .img_bg img {
        position: absolute;
        top: -35px;
        left: 40px;
    }

    /* about */

    .about2 button {
        margin: 60px 170px 0px;
    }

    .about3 {
        font-size: 15px;
        margin-bottom: 20px;
    }

    /* terms & conditions and privacy policy */

    .terms11, .privacy11, .faq11 { 
        margin-top: 90px;
    }

    /* cart */

    .center {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .cart11 {
        width: 90%;
    }

    .cart12 {
        width: 90%;
    }

    /* footer */

    footer {
        padding: 10px;
    }
    .s2_div2 i {
        padding-right: 20px;
        font-size: 20px;
    }
    .s2_div1 p {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .footer_section1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
    }
}

@media (min-width:1026px) and (max-width:1440px){

    .drop{
        position: absolute;
        top: 80px;
        right: 35px;
    }

}

@media (min-width:1441px) and (max-width:2560px){

    .drop{
        position: absolute;
        top: 80px;
        right: 35px;
    }

    #search_box input{
        display: block;
    }

}