/*
========================================================
     ************** Responsive **************
========================================================
*/
@media screen and (max-width : 1160px) {
     .about-text-other {
          width:50%;
     }
     .about-pic-other {
          width:48%;
          height: 610px;
     }
}
@media screen and (min-width : 1070px) and (max-width : 1160px){
     .about-text-other pre {
          /* margin-right: -50px; */
          margin-bottom: 14px;
          white-space: pre-line;
          padding-right: 12%;
     }
}
@media screen and (min-width : 981px) and (max-width : 1070px){
     .about-text-other pre {
          /* margin-right: -50px; */
          margin-bottom: 14px;
          white-space: pre-line;
          padding-right: 10%;
     }
}
@media screen and (max-width : 1120px) {
     .about-text-other {
          padding: 3px 0px 20px;
     }
     .about-pic-other {
          height: 610px;
     }
}
/* @media screen and (max-width : 1024px){
    
     .contact-other-icon{
          //margin-left: 9px;
     }
    .contact-email, 
    .contact-link, 
    .contact-tell {
        // padding: 0px !important;
    }
    .contact-info-other ul li:last-child{
     //margin-left: 0px !important;
    }
    .contact-form-other{
     width: 43%;
     left: -10px;
     }
} */
@media screen and (min-width : 801px) and (max-width : 1024px) {
     /********************/
     /* Contact Us */
     /* Communication Information side */
     .contact-info-other {
          width:98% !important;
          border-right: 9px solid #edded5 !important;
          margin-bottom: 36px;
     }
     /* Ul : Normal Dimention */
     .contact-info-normal {
          display: none !important;
     }
     /* Ul : Responsive dimention */
     .contact-info-res {
          display: block !important;
          width: 94%;
          direction: rtl;
     }
     /* Row 1 | First Child : Address : Show in One Row */
     .address-res {
          width: 100%;
          margin-bottom: 17px;
     }
     /* Text */
     .address-res address {
          font-size: 15px;
     }
     /* Row 2 | Other Contents in One Box */
     .contact-child-res {
          width: 100%;
          /**** CSS3 ... For All Browsers ****/
          /*Safari 3.1-6 */
          display: -webkit-box;
          /* Opera 12.1, Firefox 20+ */
          display: flex;
          display: -moz-box;
          display: -ms-flexbox;
          /* IE 10 */
          display: -o-flex;
     }
     /* Communication Information side | Elements */
     .contact-info-other ul li {
          direction: rtl;
          /* margin: 0; */
          /**** CSS3 ... For All Browsers ****/
          /*Safari 3.1-6 */
          display: -webkit-box;
          /* Opera 12.1, Firefox 20+ */
          display: flex;
          display: -moz-box;
          display: -ms-flexbox;
          /* IE 10 */
          display: -o-flex;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -o-justify-content: center;
          -ms-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -o-align-items: center;
          -ms-align-items: center;
          align-items: center;
     } 
     .contact-child-res li:nth-child(1),
     .contact-child-res li:nth-child(2),
     .contact-child-res li:nth-child(3) {
          margin-left: 10px;
     }
     .contact-other-icon {
          font-size: 33px !important;
          margin-left: 7px;
     } 
     /* Map Side */
     .contact-map-other{
          width: 50%;
          right: -13px;
     }
     /* Form Side */
     .contact-form {
          width: 44%; 
          left: -2px;
     }
     
     
     .contact-link {
          padding-right: 0px;
     }    
     .contact-child-res li {
          margin-bottom: 0px !important;
     }
     .contact-email, 
     .contact-link, 
     .contact-tell {
          margin: 0px;
     }
}
@media screen and (min-width : 1295px) and (max-width : 1335px) {
     .contact-form::before {
          font-size: 5.6em;
     }
 } 
 @media screen and (min-width : 1255px) and (max-width : 1295px) {
     .contact-form::before {
          font-size: 5.4em;
     }
 }
 @media screen and (min-width : 1215px) and (max-width : 1255px) {
     .contact-form::before {
          font-size: 5.2em;
     }
 }
 @media screen and (min-width : 1175px) and (max-width : 1215px) {
     .contact-form::before {
          font-size: 5em;
     }
 }
 @media screen and (min-width : 1138px) and (max-width : 1175px) {
     .contact-form::before {
          font-size: 4.8em;
     }
 }
 @media screen and (min-width : 1098px) and (max-width : 1138px) {
     .contact-form::before {
          font-size: 4.6em;
     }
 }
 @media screen and (min-width : 1024px) and (max-width : 1098px) {
     .contact-form::before {
          font-size: 4.6em;
     }
 }
@media screen and (min-width : 970px) and (max-width : 1024px) {
     .contact-form::before {
          font-size: 5.2em;
     }
 }
 @media screen and (min-width : 935px) and (max-width : 970px) {
     .contact-form::before {
          font-size: 5em;
     }
 }
 @media screen and (min-width : 900px) and (max-width : 935px) {
     .contact-form::before {
          font-size: 4.8em;
     }
 }
 @media screen and (min-width : 875px) and (max-width : 900px) {
     .contact-form::before {
          font-size: 4.6em;
     }
 }
 @media screen and (min-width : 845px) and (max-width : 875px) {
     .contact-form::before {
          font-size: 4.4em;
     }
 }
 @media screen and (min-width : 800px) and (max-width : 845px) {
     .contact-form::before {
          font-size: 4.2em;
     }
 }
@media screen and (max-width : 800px) {
     /********************/
     /* Contact Us */
     /* Form Side */
     .contact-header p {
          padding: 0px 14px;
     }
     .container-box,.box-slider{
          padding: 10px !important;
     }
}
@media screen and (min-width : 621px) and (max-width : 800px) {
     /********************/
     /* Contact Us | Show Two Rows : Form Side Go to the Top & Map Side Go to the Bottom */
     /* Map Side : in Normal View | Hidden */
     .contact-map-normal {
          display: none;
     }
     /* Map Side : in Responsive View | Go to the Bottom */
     .contact-map-res {
          display: block;
          width: 100% !important;
          margin-top: 37px;
     }
     /* Form Side | Go to the Top */
     .contact-form {
          width: 56%;
          left: 0px;
     }
     .contact-form form {
          width: 100%;
          padding: 0px;
     }
     .customer-label,
     .seller-radio {
          font-size: 14px;
     }
     .contact-form form input[type="text"],
     .contact-form form input[type="email"],
     .contact-message {
          width: 90%;
     }
     /* Communication Information Side */
     /* Container */
     .contact-info-other {
          width:37%;
     }
     .contact-info-other ul {
          padding: 27px 17px;
     }
     
}
@media screen and (min-width : 760px) and (max-width : 800px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container : Before */
     .contact-form::before {
          font-size: 5rem;
     }
}
@media screen and (min-width : 730px) and (max-width : 760px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container : Before */
     .contact-form::before {
          font-size: 4.7rem;
     }
}
@media screen and (min-width : 690px) and (max-width : 730px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container : Before */
     .contact-form::before {
          font-size: 4.3rem;
     }
}
@media screen and (min-width : 680px) and (max-width : 690px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container : Before */
     .contact-form::before {
          font-size: 4rem;
     }
}
@media screen and (min-width : 655px) and (max-width : 680px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container : Before */
     .contact-form::before {
          font-size: 3.7rem;
     }
}
@media screen and (min-width : 625px) and (max-width : 655px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container : Before */
     .contact-form::before {
          font-size: 3.5rem;
     }
}
@media screen and (min-width : 620px) and (max-width : 625px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container : Before */
     .contact-form::before {
          font-size: 3.3rem;
     }
}
@media screen and (min-width : 621px) and (max-width : 690px) {
     /********************/
     /* Contact Us */
     /* Form Side */
     /* Container */
     .contact-form {
          width: 49%;
     }
     .contact-message {
          margin-bottom: 25px;
     }
     /* Communication Information Side */
     .contact-info-other {
          width: 44%;
     }
     .first-contact-header {
          font-size: 1.7rem;
     }
     .first-contact-header::before {
          right: -116px !important;
     }
     .first-contact-header::after {
          left: -115px !important;
     }
     .first-contact-header:hover::before {
          right: -119px !important;
     }
     .first-contact-header:hover::after {
          left: -117px !important;
     }
}
@media screen and (min-width : 680px) and (max-width : 730px) {
     /********************/
     /* Contact Us */
     /* Form Side : Container */
     .contact-form {
          width: 53%;
     }
     /* Communication Information Side */
     .contact-info-other {
          width: 40%;
     }
}
@media screen and (min-width : 845px) and (max-width : 980px) {
     /********************/
     /* About Us | Hidden Main Pre & Show Responsive Modes of Pre */
     .about-pre-main {
          display: none;
     }
     .about-pre-res-2 {
          display: block;
     }
}
/* Min-Width:845px to Max-Width:900px | About Us | Picture Boxes Seprate From Text Boxes in All Rows */
@media screen and (min-width : 844px) and (max-width : 980px) {
     /********************/
     /* About Us */
     /* Only Text Box of Row 1 */
     .about-text-row-1 {
          border-left: 9px solid #edded5 !important;
          margin-left: 2%;
     }
     /* Only Text Box of Row 2 */
     .about-text-row-2 {
          border-right: 9px solid #edded5 !important;
          margin-right: 2%;
     }
     /* All Picture Boxes */
     .about-pic-other {
          width: 47%;
          height: 493px;
     }
}
@media screen and (max-width : 844px) {
     /********************/
     /* About Us */
     /* Remove Row 2 and Show their Elements in Row 1 */
     .about-container-row-2 {
          display: none;
     }
     /* Show */
     .about-text-res,
     .about-pic-res {
          display: block;
     }
     .about-pic-row-1 h2 {
          font-size: 1.3rem !important;
          line-height: 47px !important;
     }
     .about-text-other {
          width: 100%;
          border-left: 9px solid #edded5;
          margin-right: 0px;
          margin-top: 22px;
     }
     .about-container-row {
          -webkit-flex-wrap: wrap-reverse;
          -moz-flex-wrap: wrap-reverse;
          -o-flex-wrap: wrap-reverse;
          -ms-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
     }
     .manager {
          text-indent: -32px;
     }
}
@media screen and (max-width : 650px) {
     /********************/
     /* About Us */
     /* Hidden Main Pre & Show Responsive Modes of Pre */
     .about-pre-main {
          display: none;
     }
     /* Common Attributes For Pre */
     .about-pre-res-1,
     .about-pre-res-2 {
          white-space: pre-line;
          margin-bottom: 14px !important;
          padding-right: 13%;
     }
     .about-pic-row-1 h2 {
          font-size: 1.2rem !important;
     }
}
/* Min-Width:440 to Max-Width:650px | About Us | Pre 1 */
/* Max-Width:439px | About Us | Pre 2 */
@media screen and (min-width : 440px) and (max-width : 650px) {
     /********************/
     /* About Us */
     .about-pre-res-1 {
          display: block; 
     }
}
/* Min-Width:500 to Max-Width:850px | About Us | Two Pictures are in One Row */
@media screen and (min-width : 500px) and (max-width : 844px) {
      /* About Us | Distances Between Pictures */
     .about-pic-row-1 {
          margin-right: 17px;    
     }
}
@media screen and (min-width : 620px) and (max-width : 844px) {
     /********************/
     /* About Us */
     /* Height of the Pictures */
     .about-pic-other {
          height: 386px;
     }
}
@media screen and (min-width : 650px) and (max-width : 825px) {
     /********************/
     /* About Us */
     /* Height of the Pictures */
     .about-pic-other {
          height: 365px;
     }
}
@media screen and (min-width : 500px) and (max-width : 650px) {
     /********************/
     /* About Us */
     /* About Us | Height of the Pictures */
     .about-pic-other {
          height: 300px;
     }
}
@media screen and (max-width : 620px) {
     /********************/
     /* Contact Us */
     /* One Coloumn */
     .contact-info-other,
     .contact-form,
     .contact-map-other {
          width: 100%;
          margin-bottom: 18px;
     }
     /* Communication Side */
     .contact-info-other {
          /* Show Comlete Border */
          border-right: 9px solid #edded5 !important;
     }
     .contact-info-other ul {
          width: 100%;
          font-size: 15px;
          padding: 27px 6% !important;
     }
     .contact-info-other ul li:first-child .contact-other-icon {
          margin-left: 20px;
     }
     /* Form Side */
     .contact-form {
          left: 0px;
          padding: 6% 1%;
     }
     .contact-form form {
          width: 100%;
          padding: 0px;
     } 
     .contact-form form input[type="text"],
     .contact-form form input[type="email"],
     .contact-message {
          width: 88%;
     }    
     .container{
        width: 85% !important;
        position: relative;
        /* right: 13%; */
        float: left;
    }
    .singin-sec,.login-sec{
        width: 100% !important;
        
    }
    .singin-container,.login-container{
        width: 96%;
        /* margin-right: 8% */
    }
    .login-tab{
     flex-wrap: wrap;
    }
    footer{
     width: 87% !important;
    }
    .footer-des{
     width: 100% !important;
    }
}
@media screen and (min-width : 425px) and (max-width : 620px) {
     /********************/
     /* Contact Us */
     /* Communication Information Side : Change Position of Communication Information Contents & Show Image */
     /* Background Image */
     .contact-info-other {
          /* Show Background Image */
          background-image: url("../image/tell6.png");
          background-repeat: no-repeat;
          background-position: -64px -2px;
          /**** CSS3 ... For All Browsers ****/
          -webkit-background-size: 53%;
          -moz-background-size: 53%;
          -o-background-size: 53%;
          -ms-background-size: 53%;
          background-size: 53%;
          -webkit-transition: all 0.2s;
          -moz-transition: all 0.2s;
          -o-transition: all 0.2s;
          -ms-transition: all 0.2s;
          transition: all 0.2s;
     }
     .contact-info-other ul li {
          /**** CSS3 ... For All Browsers ****/
          -webkit-justify-content: right;
          -moz-justify-content: right;
          -o-justify-content: right;
          -ms-justify-content: right;
          justify-content: right;
          -webkit-align-items: center;
          -moz-align-items: center;
          -o-align-items: center;
          -ms-align-items: center;
          align-items: center;
     }
     /* Location Text */
     .contact-info-other ul li:first-child .contact-other-icon {
          margin-left: 17px !important; 
          font-size: 44px;
     } 
     .contact-other-icon {
          margin-left: 24px !important;
     }
     .contact-email,
     .contact-link,
     .contact-tell {
          margin: 0px;
          font-size: 0.8rem;
     }
}
@media screen and (min-width : 500px) and (max-width : 525px) {
     /********************/
     /* Contact Us */
     /* Background Image */
     .contact-info-other {
          /**** CSS3 ... For All Browsers ****/
         -webkit-background-size: 64%;
         -moz-background-size: 64%;
         -o-background-size: 64%;
         -ms-background-size: 64%;
         background-size: 64%;
    }
}
@media screen and (max-width : 500px) {
     /********************/
     /* About Us | Elements are in One Column */
     /* Height of the Pictures */
     .about-pic-other {
          width: 100%;
          height: 381px;
     }
     .about-pic-row-1 {
          margin-right: 0px !important;
          margin-bottom: 17px;
     }
     .about-pic-row-1 h2 {
          font-size: 1.4rem !important;
          line-height: 56px !important;
     }
     .about-inner-text {
          margin-top: 6px !important;
     }
     /********************/
     /* Contact Us */
     /* Background Image */
     .contact-info-other {
          /**** CSS3 ... For All Browsers ****/
         -webkit-background-size: 67%;
         -moz-background-size: 67%;
         -o-background-size: 67%;
         -ms-background-size: 67%;
         background-size: 67%;
    }
}
@media screen and (min-width : 575px) and (max-width : 620px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 6.5rem;
     }
}
@media screen and (min-width : 560px) and (max-width : 575px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 6.3rem;
     }
}
@media screen and (min-width : 515px) and (max-width : 560px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 6rem;
     }
}
@media screen and (min-width : 490px) and (max-width : 515px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 5.5rem;
     }
}
@media screen and (min-width : 450px) and (max-width : 490px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 5rem;
     }
}
@media screen and (min-width : 430px) and (max-width : 450px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 4.7rem;
     }
}
@media screen and (min-width : 415px) and (max-width : 430px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 4.5rem;
     }
}
@media screen and (min-width : 400px) and (max-width : 415px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 4.3rem;
     }
}
@media screen and (min-width : 370px) and (max-width : 400px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 4rem;
     }
}
@media screen and (max-width : 370px) {
     /************************/
     /* Contact Us */
     /* Container : Before Size */
     .contact-form::before {
          font-size: 3.5rem !important;
     }
     .page-title{
          font-size: 30px !important;
     }
}
@media screen and (min-width : 425px) and (max-width : 449px) {
     /************************/
     /* Contact Us */
     /* Communication Information Side : Sُize of Elements */
     .contact-info-other ul {
          font-size: 14px !important;
     }
}
/* Max-Width:439px | About Us | Pre 2 */
@media screen and (max-width : 439px) {
     /********************/
     /* About Us */
     .about-pre-res-2 {
          display: block;    
     }
}
@media screen and (max-width : 360px) {
     /************************/
     /* Contact Us */
     /* Communication Information Side */
     .contact-info-other ul {
          margin: 0px;
     }
     .contact-info-other ul li address {
          line-height: 28px;
     }
     /* h1 */
     .first-contact-header {
          font-size: 1.6rem;
     } 
     .first-contact-header::after {
          left: -110px !important;
     }
     .first-contact-header::before {
          right: -110px !important;
     }
     .first-contact-header:hover::before {
          right: -113px !important;
     }
     .first-contact-header:hover::after {
          left: -115px !important;
     }
     /* Form Side */
     .contact-message {
          margin-bottom: 20px; 
     }
}
@media screen and (max-width : 355px) {
     /************************/
     /* About Us */
     /* Height of the Pictures */
     .about-pic-other {
          height: 335px !important;
     }
}
@media screen and (max-width : 335px) {
     /************************/
     /* Contact Us */
     /* Form Side */
     .contact-form::before {
          font-size: 3.4rem !important;
          letter-spacing: 16px;
     }
}
@media screen and (max-width : 320px) {
     /************************/
     /* Contact Us */
     /* Communication Information Side */
     .contact-info-other ul {
          padding: 27px 16px;
     }
     /* Form Side */
     .contact-form::before {
          font-size: 3.2rem !important;
          letter-spacing: 14px;
     }
}
@media screen and (max-width : 300px) {
     /************************/
     /* Contact Us */
     /* Communication Information side : Width */
     .contact-info-other {
          width: 93%;
     }
     .contact-other-icon {
          font-size: 27px !important;
     } 
     /* h1 */
     .first-contact-header {
          font-size: 1.6rem;
     } 
     .first-contact-header::after {
          left: -108px !important;
     }
     .first-contact-header::before {
          right: -108px !important;
     }
     .first-contact-header:hover::before {
          right: -110px !important;
     }
     .first-contact-header:hover::after {
          left: -110px !important;
     }
}
/* Galaxy Fold */
@media screen and (max-width : 280px) {
     /************************/
     /* About Us */
     /* h1 */
     .about-top-header {
          font-size: 1.6rem;
     }
     .about-top-header::after {
          left: -95px;
     }
     .about-top-header::before {
          right: -95px;
     }
     .about-top-header:hover::before {
          right: -101px;
     }
     .about-top-header:hover::after {
          left: -99px;
     }
     /************************/
     /* Contact Us */
     /* Form Side */
     .contact-form::before {
          font-size: 3rem !important;
     }    
}

/* ///////////////////////////////////////////////////////////// */
@media screen and (max-width : 1300px) {
     .products-sec,.basket-sec {
          width: 90% !important;
          margin: 0 !important;
     }
     .category-box {
          width: 90% !important;
     }
}
@media screen and (max-width : 1200px) {
     .basket-table table {
          width: 90em !important;
      }
     .about-sec{
          width: 90%;
      }
}
@media screen and (max-width : 990px) {
     nav {
          width: 5%;
     }
     .header-container {
          width: 90%;
     }
     .container {
          /* width: 88%; */
     }
     .about-container,.products-container,.basket-container{
        width: 94% !important; 
     }
     footer {
          width: 94%;
     }

     .product-container {
          align-items: center !important;
          flex-direction: column-reverse;
      }
      .product-des {
          width: 96% !important;
          margin-top: 4em;
      }
      .product-gallery {
          width: 80% !important;
      }

      .about-container::before {
          width: 62% !important;
          right: -15em !important;
      }
      .about-img{
          display: none !important;
      }
      .about-des {
          width: 96% !important;
      }
      .about-info {
          align-items: center ;
          flex-direction: column;
      }
      .about-ele {
          width: 94% !important;
          margin-top: 2% !important;
          height: 10em !important;
      }
      .contact-container {
          width: 90%;
      }
      .blog-ele {
          width: 44.8%;
      }
}
@media screen and (max-width : 890px) {
     nav {
          width: 7%;
     }
     .header-container {
          width: 88%;
     }
     .container {
          /* width: 86% !important; */
     }
     footer {
          width: 92%;
     }
     .container::before {
          left: -11em !important;
     }
     .about-container,.products-container,.basket-container {
          width: 92% !important;;
      }
      .products-ele {
          width: 29.3% !important;
      }
      .category-contaoner {
          flex-direction: column;
      }
      .category-contaoner li {
          margin: 2em 0 !important;
      }
      .category-contaoner li {
          width: 20em !important;
      }
      .category-box {
          margin-top: 3em !important;
      }
      .contact-img{
          display: none;
      }
      .contact-box {
          width: 100%;
      }
}
@media screen and (max-width : 640px) {
     .container::before {
          width: 25em !important;
     }
     .m-code-container{
          width: 350px !important;
     }
}
@media screen and (max-width : 650px) {
     nav {
          width: 9%;
     }
     .header-container {
          width: 86%;
     }
     .container {
          /* width: 84% !important; */

     }
     footer {
          width: 90%;
     }
     .footer-container {
          flex-direction: column;
      }
      .footer-logo-sec {
          width: 100%;
          flex-direction: column;
          margin-top: 5%;
      }
      .footer-des {
          width: 98%;
          margin-top: 5%;
      }
      .footer-des :where(p,small) {
          text-align: center !important;
      }
      .product-gallery {
          width: 95% !important;
      }
      .about-container,.products-container,.basket-container {
          width: 90% !important;;
      }
      .products-ele {
          width: 46% !important;
      }
      .products-sec {
          width: 84% !important;
          padding: 3% !important;
     }
     .category-contaoner li {
          width: 100% !important;
      }
      .about-title {
          font-size: 25px;
      }
      .about-des p {
          line-height: 28px;
          font-size: 14px;
     }
     :is(.header-container) h1,:is(.basket-header,.products-header) h2,.signin-title,.contact-title,.box-title {
          font-size: 25px;
      }
     .header-container {
          flex-direction: column-reverse;
     }
     .header-container h1{
          text-align: center;
     }
     .singin-ele {
          width: 90%;
     }
     .blog-ele {
        width: 100%;
        margin: 1em 0;
     }
     .blogs-box {
          width: 95%;
     }
}
@media screen and (max-width : 510px) {
     nav {
          width: 14%;
     }
     .header-container {
          width: 81%;
     }
     .container {
          /* width: 79% !important; */
     }
     footer {
          width: 85%;
     }
     .container::before {
          width: 20em !important;
          left: -15em !important;
     }
      .logo-container {
          width: 5em;
      }
      .title-sec h2 {
          font-size: 23px !important;
      }
      .price-title {
          font-size: 21px !important;
      }
      .price{
          font-size: 20px !important;
      }
      .menu-sec {
          width: 83.1vw;
          padding: 0 1vw;
      }
      .about-container,.products-container,.basket-container {
          width: 85% !important;;
      }
      .products-ele {
          width: 100% !important;
      }
      .buy-btn {
          font-size: 17px;
      }
           .header-container h1 {
          font-size: 22px;
      }
      .contact-box {
          padding: 1em;
     }
     .form-ele,.form-btn {
          width: 100%;
     }
     .m-product-option{
          flex-direction: column;
          align-items: center;
     }
     .quantity-sec {
          width: 10em;
     }
     .quantity-sec button {
          padding: 16px 0;
     }
     .buy-btn {
          width: 9.5em;
          float: left;
          padding: 0.6em 1em;
          box-sizing: border-box;
     }
     .products-sec {
        width: 100% !important;
     }
}
@media only screen and (max-width: 400px) {
     .about-sec {
         margin: 0 1em;
     }
 }