/*  Strat Varibles  */
:root {
    --main-color : #4E6484;
    --min-gradient:linear-gradient(to bottom, #A72951 , #751332) ;
    --sub-color : #F5F5FA;
  }

  /*  End  Varibles  */

  /*  Start Global Rules  */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

  }

  body {
      font-family: 'Roboto', sans-serif;
      height: auto;
      direction: ltr;
      background-color: var(--sub-color);
    }

  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;

  }

  /*  Small Screen  */
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }

  /*  Medium Screen */
  @media (min-width:992px) {
    .container {
      width: 970px;
    }
  }

  /*  Larg Screen */
  @media (min-width:1200px) {
    .container {
      width: 1170px;
    }
  }

  html {
    scroll-behavior: smooth;


  }



  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  a{
    text-decoration: none;
  }


  /*  STARTA nav  BY BASEL AHMED  */
  .nav{
    background-color: #F5F5FA;
    position: fixed;
    width: 100%;
    z-index: 90;
    height: auto;
    border-bottom: 1px solid var(--main-color);


  }
  @media(max-width:992px){
    .nav{
      height: 51px;
      padding: 0;
    }

  }

  .nav .containe{
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
  }

  @media(max-width:992px){
    .nav .containe {
      justify-content:space-between;
      flex-direction: row-reverse;
      height: 50px;
      padding: 0px 0;

    }
  }

  .nav .containe .logo  {

    padding: 0px 30px;
  }
  @media(max-width:992px){
    .nav .containe .logo  {
      height: auto;
      padding: 0px 10px;
    }
  }
  .nav .containe .logo  img{
    height: 50px;

    width: auto;

  }

  @media(max-width:992px){
    .nav .containe .logo  img{
      height: 35px;
    }
    .nav .containe #icon{
      font-size: 10px;
      padding: 0;
      height: auto;
      padding: 35px 10px;
    }
    .nav .containe #icon img {
      height: 40px;
    }
    
       .nav .containe #icon img {
        height: 40px;
        position: relative;
      }
      .nav .containe .redball::before {
          content: "";
          background-color: red;
          height: 10px;
          width: 10px;
          top: 10px;
          left: 17px;
          border-radius: 20px;
          position: absolute;
          z-index: 1;
      }
  }


  .nav .containe .links ul{
    display: flex;

  }

  .nav .containe .links ul img{
    display: none;
  }
  .nav .containe .links ul .icons{
    display: none;
  }


  @media (max-width: 991px) {
    .nav .containe .links > ul{
        display: block;
        height: 100vh;
        width: 90%;
        position: fixed;
        background-color: var(--sub-color);
        right: 100%;
        top: 0%;
        text-align: center;
        transition: all 2.5s ease-in-out forwards;
        -webkit-transition: all 2.5s ease-in-out forwards;
        -moz-transition: all 2.5s ease-in-out forwards;
        -ms-transition: all 2.5s ease-in-out forwards;
        -o-transition: all 2.5s ease-in-out forwards;
        z-index: 100;

  }
  .nav .containe .links > ul img{
        height: 100px;
        width: 100px;
        margin: 20px;
       display: block;
  }

  .nav .containe .links > ul .icons{
    display: block;
    background-color: #751332;
    height: 300px;
    color: #448944;
  }


  .nav .containe .links .show{
      right: 14%;
      opacity: 95%;
  }

  }
  .nav .containe .links {
    /*background-color: #751332;
    */position: relative;

  }
  .nav .containe .links  li{
    color: var(--main-color);
    font-size: 16px;
    font-weight: 400;
    margin: 17px;


  }
  .nav .containe .links #dropdown {
    margin: 0;
    padding: 17px;
  }

  @media(max-width:992px){
    .nav .containe .links #dropdown {
      margin: 0;
      padding-left: 40px;
    }

  }
  .nav .containe .links .dropdonw-content {
    background-color:  var(--sub-color);
    position:absolute;
    top: 54px;
    left: 34%;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    display: none;
  }
  #cart {
    display: none;
  }
  @media(max-width:992px){
    .nav .containe .links .dropdonw-content {
      background-color: transparent;
      position: static;
      top: 54px;
      left: 38%;
      border-radius: 15px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      -ms-border-radius: 15px;
      -o-border-radius: 15px;
      display: flex;
      padding: 0px 30px;
    }
    .nav .containe .links .dropdonw-content a li {
      border: none;
    }
    #cart {
      display:inline;
    }

  }
  .nav .containe .links .dropdonw-content.show {
    display: flex;
  }

  .nav .containe .links .dropdonw-content ul {
     display: flex;
    flex-direction: column;
    color: white;
  }
  .nav .containe .links .dropdonw-content ul li {

    color: var(--main-color);
    cursor: pointer;
  }


  @media (max-width: 992px) {
    .nav .containe .links li{
        margin: 20px 20px;
        text-align: left;
        padding: 0px 20px;
        font-size: 17px;
        font-family: 'Roboto', sans-serif;

    }


   .nav .containe .links li:first-child{
        border-bottom: 2px solid var(--main-color);
        margin: 0;
        width: auto;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        position: relative;

    }
    .nav .containe .links li:first-child .cancel img{
      height: 20px;
      width: 20px;
    }

  }


  .nav .containe .links li:first-child  ul{
    display: flex;
    display: none;

  }

  @media(max-width:992px){

      .nav .containe .links li:first-child  ul{
        position: absolute;
        top: 25px;
        right:  50%;
        width: 150px;
        height: 30px;
        display: flex;
        margin: 0;
        padding: 0;
        color: var(--main-color);
        /*font-size: 20px;
        */font-weight: 800px;
        background-color: var(--main-color);
        margin: 0px;
        /*padding: 5px 10px;
        */border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -ms-border-radius: 10px 10px 10px 10px;
        -o-border-radius: 10px 10px 10px 10px;
      }

      .nav .containe .links li:first-child  ul li{
        padding: 0px 10px;
        margin: 0px;
        font-family: Almarai;
        font-size: 16px;
        font-style: normal;
        font-weight: 800;
        padding: 5px;
        cursor: pointer;
        border: none;
      }

      @media(max-width:992px) {
        .nav .containe .links li:first-child  ul li{

          font-size: 20px;

        }

      }

      .nav .containe .links li:first-child  ul li.active{
        background-color: var(--main-color);
        color: white;
      }

      .nav .containe .links li:first-child  ul li:first-child,
      .nav .containe .links li:first-child  ul li:first-child{
      /* background-color: var(--main-color); */
      border-radius: 0px 10px 10px 0px;
      }
      .nav .containe .links li:first-child  ul li:last-child,
      .nav .containe .links li:first-child  ul li:last-child{
      /* background-color: var(--main-color); */
      border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -ms-border-radius: 10px 0px 0px 10px;
      -o-border-radius: 10px 0px 0px 10px;
      display: flex;
      justify-content: end;
      }
    .nav .containe .links li:last-child a{
      padding-top: 20px;
      color: #448944;

    }
  }
  @media(min-width:992px){
    .nav .containe .links  li:nth-child(2) > :nth-child(2){
      display: none;
    }


  }

    @media (max-width: 992px) {
    .nav .containe .links li:nth-child(2){
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      border-bottom: 2px  solid  var(--main-color) ;
      margin: 0;

    }
    .nav .containe .links  li:nth-child(2)  a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .nav .containe .links li:nth-child(5){
      border-top: 1px solid var(--main-color);
      padding-top: 10px;
      margin: 0;
      padding-left: 40px;
    }
    .nav .containe .links li:nth-child(7){
      border-top: 1px solid var(--main-color);
      padding-top: 10px;
      margin: 0;
      padding-left: 40px;

    }
  }
    .nav .containe .links li:nth-child(2) img{
      height: 40px;
      width: 40px;
    }
    .nav .containe .links li:nth-child(2) img#ball{
      position: relative;
    }
    .nav .containe .links li:nth-child(2) img#ball::after {
      content: attr(number);
      position: absolute;
      top: -8px;
      color: white;
      background-color: var(--main-color);
      border-radius: 50%;
      right: 14px;
      padding: 4px;
      font-size: 12px;
      font-weight: 900;
      z-index: 20;
    }

    .nav .containe .links li:last-child .links {
      display: flex;
      justify-content: center;
      padding-top: 20px;
    }
    .nav .containe .links li:last-child .links a img {
      height: 25px;
      width: 25px;
      cursor: pointer;
    }

    .nav .containe .links li:last-child .links a:hover img:first-child{
      display: none;
    }
    .nav .containe .links li:last-child .links a img:last-child{
      display: none;
    }
    .nav .containe .links li:last-child .links a:hover img:last-child{
      display: block;
    }


    @media(max-width:992px){
  .nav .containe .links li:nth-child(8){
     display: none;

  }
    }
  .nav .containe .links a{
    color:var(--main-color);
  }

  @media(max-width:992px){
    .nav .containe .links a{
      color: var(--main-color);
    }

  }
  .nav .containe .links a:hover, .active{
    /* border-bottom: solid 3px white; */
    font-size: 16PX;
  }
  .nav .containe .links .links h3 {
  display: none;
  }
  @media(max-width:992px){
    .nav .containe .links a:hover,
    .nav .containe .links a:hover.active{
      color: var(--main-color) !important;
      /* border-bottom: solid 3px white; */
      font-size: 20PX;
    }
    .nav .containe .links:last-child a:hover{
      color: white !important;
    }
    .nav .containe .links .links {
      background-color: var(--main-color);
      display: flex;
      height: 300px;
      flex-direction: column;
      justify-content: center;
      align-items: center;

    }

    .nav .containe .links .links h3 {
      display: block;
       color: white;
       font-size: 20;
       font-weight: 700;
    }
    .nav .containe .links .links .socail-links {
      display: flex;
    }
  }
  .nav .containe .links .links a img {
    height: 25px;
    width: 25px;
    cursor: pointer;
  }
  .nav .containe .links .links a img:first-child{
    display: none;
  }
  .nav .containe .links .links a:hover img:first-child{
    display: block;
  }
  .header .containe .links .links a img:last-child{
    display: block;
  }
  .nav .containe .links .links a:hover img:last-child{
    display: none;
  }


  .nav .containe  #icon{
    display: none;
    color: white;
    padding: 20px;
    font-size: 25px;
    cursor: pointer;
  }
  @media (max-width: 991px) {
    .nav .containe  #icon{
      display: block;
      color: white;
      padding: 20px 20px;
    }
    .nav .containe  #icon img{
      height: 20px;
    }
  }


  .nav .containe  .icons{
    color: var(--main-color);
    margin: 0px 0;
    padding: 0px;
    transition: all 3s;
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    -ms-transition: all 3s;
    -o-transition: all 3s;
  }
  .nav .containe  .icons img{
     display: block;
    }
    .nav .containe  .icons ul{
      display: flex;
      position: relative;
  }
  .nav .containe  .icons ul li{
    /* margin: 0px 10px; */
    margin-right: 20px;
  }
  .nav .containe  .icons ul li a{
    color: white;

  }
  .nav .containe  .icons ul li a .lang{
    color: var(--main-color);
    /*font-size: 20px;
    */font-weight: 800px;
    background-color: white;
    margin: 0px;
    /*padding: 5px 10px;
    */border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
  }
  .nav .containe  .icons ul li a .lang ul li{
    padding: 0px 10px;
    margin: 0px;
    font-family: Almarai;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    padding: 5px;
  }

  .nav .containe  .icons ul li a .lang ul li.active
  {
    background-color: var(--main-color);
    color: white;
  }
  .nav .containe  .icons ul li a .lang ul li:first-child,
  .nav .containe  .icons ul li a .lang ul li:first-child{
    /* background-color: var(--main-color); */
    border-radius: 0px 10px 10px 0px;
  }
  .nav .containe  .icons ul li a .lang ul li:last-child,
  .nav .containe  .icons ul li a .lang ul li:last-child{
    /* background-color: var(--main-color); */
    border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -ms-border-radius: 10px 0px 0px 10px;
    -o-border-radius: 10px 0px 0px 10px;
  }
  .nav .containe .icons ul li .cartshopping{
    display: block;
   }


   .nav .containe .icons ul  #ball{
}
.nav .containe .icons ul  #ball::before{
  content: attr(number);
  position: absolute;
  top: -8px;
  color: white;
  background-color: var(--main-color);
  border-radius: 50%;
  right: 14px;
  /* padding: 4px; */
  font-size: 12px;
  font-weight: 900;
  z-index: 20;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;


}
   @media (max-width: 992px) {
    .nav .containe .links #test  a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
      }

      .nav .containe .links   #test  a img {
        position: relative;
      }

      .nav .containe .links  #test  a::before {
         content: attr(number);
        position: absolute;
        top: 15px;
        color: white;
        background-color: var(--main-color);
        border-radius: 50%;
        right: 37px;
        /* padding: 4px; */
        font-size: 12px;
        font-weight: 900;
        z-index: 20;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
   }
   @media (max-width: 992px) {
    .nav .containe .icons ul li .cartshopping{
      display: none;
     }
  }

  .nav .containe  .icons ul li img{
    height: 25px;
    width: 25px;
    cursor: pointer;
  }

  @media(max-width:992px){

    .nav .containe  .icons{
      display: none;
    }
  }
  .nav .containe  .icons i{
    padding: 0px 5px;

  }

  .nav .containe .links .active{
    color: var(--sub-color) !important;
    background-color: var(--main-color) !important;
    padding: 8px;
    border-radius: 10px;
}

  /*  END nav  BY BASEL AHMED  */

  /*  START HERO SECTION  BY BASEL AHMED  */

  .hero{
    height: 100vh;
    background-image: url(../images/bg_hero.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    object-fit: fill;
    overflow: hidden;
  }

  @media(max-width:992px){
    .hero{
      height: 110vh;
      background-image: url(../images/bg_hero.png);
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      object-fit: fill;
      overflow: hidden;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    position: absolute;
    background-color: rgb(255 255 255);
    height: 100%;
    width: 100%;
    z-index: 1;
  }
  .hero .container{
    height: 100vh;
    display: flex;
    z-index: 2;
  }
  @media(max-width:992px){
    .hero .container{
      height: calc( 100vh - 0px);
      display: flex;
      z-index: 2;
    }
  }
  .hero .container .content{
    margin-top: 55px;
    display: flex;
    justify-content: space-evenly;
    height: 100%;
    width: 100%;
    z-index: 3;
  }
  @media(max-width:992px){
    .hero .container .content {
     flex-direction: column-reverse;
     margin-top:  80px;
     height: calc(100% - 50px);
    }

  }

  .hero .container .content .text {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: start;
  }
  @media(max-width:992px){
    .hero .container .content .text {
      width: 100%;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px;
    }
  }

  .hero .container .content .text .sub-content h3 {
    font-size: 80px;
    color: #4e6484;
    font-weight: 800;
    font-family:  Almarai;
    padding-bottom: 20px;

  }

  @media(max-width:992px){
    .hero .container .content .text .sub-content h3 {
      font-size: 43px;
      font-weight: 700;
    }
    .hero .container .content .text .sub-content  .links {
      display: flex;
      flex-direction: column;
      padding: 0px;

    }
    .hero .container .content .text .sub-content  #bgwhitw b {
      /* background-color: var(--sub-color);
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      color: var(--main-color); */

  }
  }

  .hero .container .content .text .sub-content p {
    font-size: 20px;
    color: black;
    font-weight: 700;
    font-family:  Almarai;
    padding-bottom: 20px;
    line-height: 1.7;
  }

  @media(max-width:992px){
    .hero .container .content .text .sub-content p {
      font-size: 13px;
    }

  }

  .hero .container .content .text .sub-content a button {
    padding: 10px ;
    background-color: var(--main-color);
    border-radius:10px ;
    -webkit-border-radius:10px ;
    -moz-border-radius:10px ;
    -ms-border-radius:10px ;
    -o-border-radius:10px ;
    border:  2px solid transparent  ;
    color: white;
    font-size: 20px;
    font-weight: 700;
    font-family:  Almarai;
    width: calc(50%  - 40px);
    margin: 10px 10px;
    /* box-shadow: 4px 4px 4px #00000078; */
  }
  .hero .container .content .text .sub-content button:hover {
    background:transparent;
    border:  2px solid white  ;
  }

  @media(max-width:992px){
    .hero .container .content .text .sub-content button {
      background-color: white;
      font-size: 20px;
      font-weight: 700;
      font-family:  Almarai;
      width: calc(100%  - 10px);
      margin: 10px;
      color: var(--main-color);
    }
    .hero .container .content .text .sub-content button:hover {
      color: white;
    }
  }


  .hero .container .content .text .sub-content button:last-of-type  {

    background-color: var(--main-color);
    color: var(--sub-color);

  }
  .hero .container .content .text .sub-content button.active  {

    background-color: var(--sub-color);
    color: var(--main-color);

  }

  .hero .container .content .text .sub-content button:last-of-type:hover  {

    border:  2px solid white  ;

    cursor: pointer;
  }

  @media(max-width:992px){
    .hero .container .content .text .sub-content button:last-of-type {
      background: transparent;
      color: var(--sub-color);
      border:  2px solid white  ;
      box-shadow: none;
      width: 95%;

    }

    .hero .container .content .text .sub-content button:first-of-type {
      background-color: var(--sub-color);
      color: var(--main-color);
      border:  2px solid white  ;
      box-shadow: none;
      width: 95%;

    }

    .hero .container .content .text .sub-content #bgwhitw button {
      /* background:transparent; */
      border:  2px solid white  ;
      /* color: white; */
    }
  }

  
  .hero .container .content .img {
    width: 50%;
    display: flex;
    /* align-items: start; */
    /* justify-content: center; */
    padding: 20px 10px;
    height: 100%;
  }
  @media(max-width:992px){
    .hero .container .content .img {
      margin: 0;
      width: 100%;
      height: calc(100% - 40px);
      padding: 0;
      display: none;
    }
  }
  .hero .container .content .img  .content {
    height: calc(80% - 40px);
    padding: 20px;

  }

  @media(max-width:992px){
    .hero .container .content .img  .content {
      height: 100%;
      padding: 20px;
      margin: 0;

    }

  }
  .hero .container .content .img  .content  img {
    height: 100%;
    width: 100%;
  }
  .hero .container .content .img .content video {
    display: none;
  }
  @media (max-width: 992px) {
    .hero .container .content .img .content video {
      display: block;
      border-radius: 40px;
      overflow: hidden;
      object-fit: cover;
      object-position: center;
      /* scale: 2; */
    }
  }


  .hero .container .content .imgmobile {
    width: 50%;
    display: flex;
    /* align-items: start; */
    /* justify-content: center; */
    padding: 20px 10px;
    height: 100%;
    display: none;
  }
  @media(max-width:992px){
    .hero .container .content .imgmobile {
      margin: 0;
      width: 100%;
      height: calc(100% - 40px);
      padding: 0;
      display: flex;
      width: 350px;
    }
  }
  .hero .container .content .imgmobile  .content {
    height: calc(80% - 40px);
    padding: 20px;

  }

  @media(max-width:992px){
    .hero .container .content .imgmobile  .content {
      height: 100%;
      padding: 20px;
      margin: 0;

    }

  }
  .hero .container .content .imgmobile  .content  img {
    height: 100%;
    width: 100%;
  }
  .hero .container .content .imgmobile .content video {
    display: none;
  }
  @media (max-width: 992px) {
    .hero .container .content .imgmobile .content video {
      display: block;
      border-radius: 40px;
      overflow: hidden;
      object-fit: cover;
      object-position: center;
      /* scale: 2; */
    }
  }

  .hero .animation-background {
    position: absolute;
    right: -191px;
    top: 0;
    background-color: white;
    width: 62%;
    height: 91%;
    border-radius: 50%;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @media (max-width: 992px) {
    .hero .animation-background {
      display: none;
    }
  }

  .hero .animation-background video {
    /* width: 1100px; */
    /* height: 615px; */
    /* transform: translate(173px, -60px); */
    width: 75%;
    position: relative;
    right: 50px;
    top: 0;
  }



  /*  START HERO SECTION  BY BASEL AHMED  */

  /*  START ABOUT SECTION  US BY BASEL AHMED  */

  .AboutUs{
    height: auto;
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .AboutUs .statis {
    display: flex;

    justify-content: space-evenly;
    gap: 0px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    height: 150px;
    text-align: center;
    z-index: -1;
    margin-top: -60px;
    box-shadow: 0px 10px 35px #4e64846e;
    /* box-shadow: 0px 10px 35px rgba(68, 137, 68, 0.30); */

  }
  @media(max-width:992px){
    .AboutUs .statis {
      display: flex;
      flex-direction: column;
      height: auto;
      gap: 20px;
      box-shadow:none;
    }
  }
  .AboutUs .statis .box {
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;


  }
  .AboutUs .statis .box:nth-child(1)  {
    border-radius: 10px 0px 0px 10px ;
    -webkit-border-radius: 10px 0px 0px 10px ;
    -moz-border-radius: 10px 0px 0px 10px ;
    -ms-border-radius: 10px 0px 0px 10px ;
    -o-border-radius: 10px 0px 0px 10px ;
  }
  .AboutUs .statis .box:nth-child(2)  {
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -ms-border-radius: 0;
     -o-border-radius: 0;
  }
  .AboutUs .statis .box:nth-child(3)  {
    border-radius: 0px 10px 10px 0px ;
    -webkit-border-radius: 0px 10px 10px 0px ;
    -moz-border-radius: 0px 10px 10px 0px ;
    -ms-border-radius: 0px 10px 10px 0px ;
    -o-border-radius: 0px 10px 10px 0px ;
  }

  @media(max-width:992px){
    .AboutUs .statis .box  {
        margin: 10px 0;
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        -ms-border-radius: 10px !important;
        -o-border-radius: 10px !important;
        box-shadow: 0px 10px 35px #4e64846e;
        /* box-shadow:0px 10px 35px rgba(68, 137, 68, 0.30); */
  }
  }
  .AboutUs .statis .box .number {
      font-size:  16px;
      font-weight: 700;
      color: var(--main-color);
  }
  .AboutUs .statis .box span{
      font-size: 64px;
      font-weight: 900;
      color: var(--main-color);
   }

   @media(max-width:992px){
    .AboutUs .statis .box span{
      font-size: 64px;
      font-weight: 700;
      color: var(--main-color);
   }
   }
  .AboutUs .statis .box .text{
    font-size: 15px;
    font-weight: 700;
    padding: 0px 50px;
  }


  .AboutUs .statis .box .text .content{
    background-color: #751332;
    display: flex;
  }


  .AboutUs .statis .box:nth-child(2) {
    border-left:  2px solid #448944;
    border-right:  2px solid #448944;
    margin: 0;
  }
  @media(max-width:992px){
    .AboutUs .statis .box:nth-child(2) {
      border:0;
    }
  }

  .AboutUs .text {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .AboutUs .text .content{
    display: flex;
    background-color:#F5F5FA;
    background-image: url(../images/aboutorg.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px;
  }

  @media(max-width:992px){
    .AboutUs .text .content{
      display: flex;
      flex-direction: column;
    }
  }
  .AboutUs .text   h3 {
     font-size: 40px;
     font-weight: 800;
     color: var(--main-color);
     font-family:  Almarai;
  }
  @media(max-width:992px){
    .AboutUs .text   h3 {
      font-size: 24px;
      font-weight: 800;
      color: var(--main-color);
      font-family:  Almarai;
      text-align: center;

    }
  }
  .AboutUs .text .content .img{
    padding: 20px;
    width: 100%;

  }
  @media(max-width:992px){

    .AboutUs .text .content .img img{
      height: 100%;
      width:100%;
    }
  }

  .AboutUs .text .content .img img{
    height: 100%;
    width:100%;
  }
  .AboutUs .text .content .text{
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    font-size: 24px;
    font-family: 400;
    color: #000000;
    font-family:  Almarai;
  }

  @media(max-width:992px){
    .AboutUs .text .content .text{
      padding: 0px;
      text-align: center;
      font-size: 16px;
      font-family: 400;
      color: #000000;
      font-family:  Almarai;
    }
  }

  /*  END  ABOUT SECTION  US BY BASEL AHMED  */

  /*  START  SYSTEM SECTION BY BASEL AHMED   */
    .systems{

      background-color:#F5F5FA;
      background-image: url(../images/aboutorg.png);
      background-size: cover;
      background-repeat: no-repeat;
      height: auto;
      position: relative;
      text-align: center;
      display:  flex;
      padding: 50px 0 ;
    }

    .systems  .container  h3 {
      color: var(--main-color);
      font-size: 40px;
      font-family:  Almarai;
      padding: 0 20px ;
      font-weight: 800;
    }

    @media(max-width:992px){
      .systems  .container  h3 {

        font-size: 24px;
        padding: 0 20px ;
      }
    }

    .systems  .container > p {
      font-size: 20px;
      font-family:  Almarai;
      font-weight: 700;
    }

    @media(max-width:992px){
      .systems  .container  > p {

        font-size: 15px;
      }
    }


    .systems  .container > .text  {
      padding: 10px 25%   ;
    }

    @media(max-width:992px){
      .systems  .container > .text  {
        padding: 10px 0%   ;
      }
    }

    .systems  .container  .content  {
      /*display: flex;
      */height: auto;
      padding: 20px;
      direction: rtl;
      transition: transform 0.5s ease  ;
      -webkit-transition: transform 0.5s ease  ;
      -moz-transition: transform 0.5s ease  ;
      -ms-transition: transform 0.5s ease  ;
      -o-transition: transform 0.5s ease  ;
  }
    @media(max-width:992px){
      .systems  .container  .content  {
        display: flex;
        height: auto;
        padding: 20px;
        direction: rtl;
        width: 90vw ;

      }
    }
    .systems  .container  .content .mySwiper2 {
      display: none;
    }
    @media(max-width:992px){
      .systems  .container  .content .mySwiper {
        display: none;
      }
      .systems  .container  .content .mySwiper2 {
        display: flex;
      }
    }
    .systems  .container  .content .swiper-slide {
      background-color: white;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      cursor: pointer;
      
    }
    /* .systems  .container  .content .swiper-slide:hover {
      transform: scale(1.05,1.05);
      -webkit-transform: scale(1.05,1.05);
      -moz-transform: scale(1.05,1.05);
      -ms-transform: scale(1.05,1.05);
      -o-transform: scale(1.05,1.05);
  } */
  @media(max-width:992px){
    /* .systems  .container  .content .swiper-slide:hover {
      transform: scale(1.0,1.0);
      -webkit-transform: scale(1.0,1.0);
      -moz-transform: scale(1.0,1.0);
      -ms-transform: scale(1.0,1.0);
      -o-transform: scale(1.0,1.0);
  } */
  }
  .systems  .container  .content .swiper-slide  .img  {

    height: 222px;

  }
    .systems  .container  .content .swiper-slide  .img img {
      height: 100%;
      width: 100%;
      border-radius: 20px 20px  0px 0px ;
      -webkit-border-radius: 20px 20px  0px 0px ;
      -moz-border-radius: 20px 20px  0px 0px ;
      -ms-border-radius: 20px 20px  0px 0px ;
      -o-border-radius: 20px 20px  0px 0px ;
  }
    .systems  .container  .content .swiper-slide  .text  {

       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       padding:  20px 0 ;
    }
    .systems  .container  .content .swiper-slide  .text h3 {
      font-size: 24px;
      font-weight: 700;
    }
    @media(max-width:992px){
      .systems  .container  .content .swiper-slide  .text h3 {
        font-size: 16px;
        font-weight: 700;
      }
    }

    .systems  .container  .content .swiper-slide .text p {
      font-size: 20px;
      padding: 20px;
      font-family: Almarai;
      font-weight: 400;
      line-height: 1.3;
    }
    @media(max-width:992px){
      .systems  .container  .content .swiper-slide  .text p {
        font-size: 13px;
        font-weight: 400;
      }
    }
    .systems  .container  .content .swiper-slide  .text a  {
       background-color: var(--main-color);
       padding: 0px  20px;
       color: white;
       border: none;
       width: 80%;
       border-radius: 10px;
       -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
       -ms-border-radius: 10px;
       -o-border-radius: 10px;
       font-size: 24px;
       font-weight: 700;
       font-family:  Almarai;
  }

  @media(max-width:992px){
    .systems  .container  .content .swiper-slide  .text a  {
      padding: 10px;
      font-size: 16px;
      font-weight: 400;
  }
  }




  /*  END    SYSTEM SECTION BY BASEL AHMED   */



  /*  START PRODECT SECTION BY BASEL AHMED  */

  .proudects{
    padding: 20px 0;
  }

  .proudects .container{
    text-align: center;
  }
  .proudects .container h3 {
    color: var(--main-color);
    font-family: Almarai;
    font-weight: 800;
     font-size: 40px;
     padding: 20px 0;

  }

  @media(max-width:992px){
    .proudects .container h3 {
      font-size: 24px;
      font-weight: 800;
       padding: 20px 0;

    }
  }
  .proudects .container .content{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 0px 40px;


  }
  @media(max-width:992px){
    .proudects .container .content{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
      padding: 10px;
    }
  }
  .proudects .container .content .box {
     height: 250px;
     background-color: white;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -ms-border-radius: 20px;
     -o-border-radius: 20px;
     display: flex;
     justify-content: center;
     align-items: end;
     position: relative;
     transition:  all 1.5s ease ;
     -webkit-transition:  all 1.5s ease ;
     -moz-transition:  all 1.5s ease ;
     -ms-transition:  all 1.5s ease ;
     -o-transition:  all 1.5s ease ;
     overflow: hidden;
  }


  .proudects .container .content .box:hover {
      align-items: center;
      cursor: pointer;

    }
    .proudects .container .content .box img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
    }
    .proudects .container .content .box:hover img {
      transform: scale(1.5,1.5);
      -webkit-transform: scale(1.5,1.5);
      -moz-transform: scale(1.5,1.5);
      -ms-transform: scale(1.5,1.5);
      -o-transform: scale(1.5,1.5);
  }
  .proudects .container .content .box::before {
     content: "";
     background-color: #00000023;
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 1;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -ms-border-radius: 20px;
     -o-border-radius: 20px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
  }

  @media(max-width:992px){
    .proudects .container .content .box {
      height: 150px;
    }
  }
  .proudects .container .content .box h3 {
    font-size: 25px;
    color: white;
    z-index: 3;
    position: absolute;
  }

  @media(max-width:992px){
    .proudects .container .content .box h3 {
      font-size: 18px;
    }
  }
    .proudects .container button {
      background-color: var(--main-color);
      color: white;
      font-family: Almarai;
      font-weight: 800;
      font-size: 24px;
      padding: 10px  40px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border: none;
      margin:  50px 0 ;
      cursor: pointer;
  }
  @media(max-width:992px){
    .proudects .container button {
      width: 70%;
      font-weight: 800;
      font-size: 20px;
      padding: 10px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border: none;
      margin:  50px 0 ;
  }
  }

  /*  END PRODECT SECTION BY BASEL AHMED  */


  /*    START NEWS SECTION BY BASEL AHMED   */

   .news{
     background-color:#F5F5FA;
     background-image: url(../images/aboutorg.png);
     background-size: cover;
     background-repeat: no-repeat;
     height: auto;
     position: relative;
     text-align: center;
     display:  flex;
    }
  .news .container {
    padding: 50px;

  }

  @media(max-width:992px){
    .news .container {
      padding: 20px;

    }
  }

  .news .container > h3 {
     color: var(--main-color) ;
     font-size: 46px ;
     font-weight: 800;
     padding-bottom: 50px;
     font-family: Almarai;
  }

  @media(max-width:992px){
    .news .container > h3 {
      font-size: 24px;
      font-weight: 800;
       padding: 20px 0;

    }
  }


  .news .container .new {
    display: flex ;
    width: 100%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin:  50px 0;
    background-color: rgb(78 100 132 / 28%);;
    position: relative;
  }
  .news .container .new:hover::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(78, 100, 132, 0.123);
    position: absolute;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    cursor: pointer;
  }
  @media(max-width:992px){
    .news .container .new {
      display: flex ;
      flex-direction: column;
      width: 100%;
      margin:  50px 0;
    }
  }


  .news .container .new .img {
    width: 50%;
    height: 346px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;

  }

  @media(max-width:992px){
    .news .container .new .img {
      width: 100%;

    }
  }
  .news .container .new .img  img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .news .container .new .text {
    width: 50%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 30px;
    text-align: left;

  }

  @media(max-width:992px){
    .news .container .new .text {
      width: 100%;

    }
  }
  .news .container .new .text h3 {
    color: var(--main-color);
    font-size: 24px;
    font-weight: 800;
    font-family: Almarai;
    align-self: flex-start;
  }

  @media(max-width:992px){
    .news .container .new .text h3 {
      color: var(--main-color);
      font-size: 16px;
      font-weight: 800;
      font-family: Almarai;
      align-self: flex-start;
      padding-bottom: 20px;
    }

  }
  .news .container .new .text p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    font-family: Almarai;
    align-self: flex-start;
  }


  @media(max-width:992px){
    .news .container .new .text p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      font-family: Almarai;
      align-self: flex-start;
      padding-bottom: 20px;

    }


  }
    .news .container .new .text span {
      align-self: self-start;
    }


    @media(max-width:992px){
      .news .container .new .text span {
        align-self: self-start;
        font-size: 13px;
        color: rgba(93, 92, 92, 0.7);
        font-family: Almarai;
        font-weight: 400;
      }


    }



  .news .container .new .text .more {
    display: flex;
    justify-content: flex-end;
    font-weight: 400;
    font-family: Almarai;
  }
  .news .container .new .text .more  a {
    font-size: 15px;
    cursor: pointer;
    color: black;
    font-weight: 600;
    z-index: 12;

  }

  @media(max-width:992px){

    .news .container .new .text .more  a {
      font-size: 13px;
      cursor: pointer;
      color: black;

    }
  }



  .news .container button {
    background-color: var(--main-color);
    color: white;
    font-family: Almarai;
    font-weight: 800;
    font-size: 24px;
    padding: 10px 40px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: none;
    margin:  50px 0 ;
    cursor: pointer;
  }

  @media(max-width:992px){
    .news .container button {
      width: 70%;
      font-weight: 800;
      font-size: 20px;
      padding: 10px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border: none;
      margin:  50px 0 ;
  }
  }

  /*    END NEWS SECTION BY BASEL AHMED   */


  /*    START ENERGEY  SECTION  BY BASEL AHMED  */

  .Renewable_energy{
    background-color:#F5F5FA;
    background-image: url(../images/aboutorg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    position: relative;
    text-align: center;
    display:  flex;
   }
  .Renewable_energy .container {
   padding: 50px;

  }

  @media(max-width:992px){
   .Renewable_energy .container {
     padding: 20px;

   }
  }

  .Renewable_energy .container > h3 {
    color: var(--main-color) ;
    font-size: 46px ;
    font-weight: 800;
    padding-bottom: 50px;
    font-family: Almarai;
  }

  @media(max-width:992px){
   .Renewable_energy .container > h3 {
     font-size: 24px;
     font-weight: 800;
     padding: 20px 0;

    }
  }

  .Renewable_energy .container .content {
    display: flex;
    height: auto;
  }
  @media(max-width:992px){
    .Renewable_energy .container .content {
      display: flex;
      flex-direction: column-reverse;
      height: auto;
    }
  }
  .Renewable_energy .container .content .img {
    width: 40%;
  }

  @media(max-width:992px){
    .Renewable_energy .container .content .img {
      width: 100%;
    }

  }

  .Renewable_energy .container .content .img img {
    width: 100%;
    height: 100%;
  }
  .Renewable_energy .container .content .text {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px  0;
  }
  @media(max-width:992px){
    .Renewable_energy .container .content .text {
      width: 100%;
     text-align: center;
    }

  }
  .Renewable_energy .container .content .text > p  {

     font-weight: 700;
     font-size: 24px;
     font-family: Almarai;
     text-align: start;

  }

  @media(max-width:992px){
    .Renewable_energy .container .content .text  > p {
      font-size: 16px;
      font-weight: 700;
      font-family: Almarai;
      text-align: center;

    }

  }
  .Renewable_energy .container .content .text a  {
    margin:  20px  0;
    background: none;
    border: 1px solid var(--main-color);
    border-radius: 10px;
    padding: 10px;
    color: var(--main-color);
    font-size: 24px;
    font-family: Almarai;
    width: 50%;
    cursor: pointer;
  }


  @media(max-width:992px){
    .Renewable_energy .container .content .text a  {
      margin:  20px  0;
      background: none;
      border: 1px solid var(--main-color);
      border-radius: 10px;
      padding: 10px;
      color: var(--main-color);
      font-size: 24px;
      font-family: Almarai;
      width: 50%;
      cursor: pointer;
    }

  }

  .Renewable_energy .container .content .text a:hover  {
    background-color: var(--main-color);
    color: white;
  }



  /*    END  ENERGEY  SECTION  BY BASEL AHMED  */

  /*    START COMPANIES  SECTION  BY BASEL AHMED  */

  .companies {
    background-color: #f5f5fa;
    /* background-image: url(../images/aboutorg.png); */
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 500px;
  }
  .companies .container {
    padding: 50px;
  }

  @media (max-width: 992px) {
    .companies {
      height: auto;
    }
    .companies .container {
      padding: 20px;
      width: 80vw;
    }
  }

  .companies .container > h3 {
    color: var(--main-color);
    font-size: 46px;
    font-weight: 800;
    /* padding-bottom: 70px; */
    font-family: Almarai;
  }

  @media (max-width: 992px) {
    .companies .container > h3 {
      font-size: 24px;
      font-weight: 800;
      padding: 40px 0;
    }
  }

  .companies .slider {
    width: 100%;
    background-color: white;
    /* padding: 0px 10%; */
    margin: 30px 0px;
  }

  .companies .slider .container {
    padding: 0px;
  }

  .companies .slider .container .swiper {
    width: 100%;
    /* background-color: white; */
  }

  .companies .slider .container .swiper-slide {
    /* border-radius: 10px; */
    overflow: hidden;
    /* box-shadow: 0px 4px 40px 0px #0000000d; */
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .companies .slider .container .swiper-slide .image {
    width: 100%;
    height: 80%;
    object-fit: contain;
    object-position: center;
  }

  /*    END  COMPANIES  SECTION  BY BASEL AHMED  */

  /*    START PARTNERS  SECTION  BY BASEL AHMED  */

  .partners {
    background-color: #f5f5fa;
    background-image: url(../images/aboutorg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 500px;
  }
  .partners .container {
    padding: 50px;
  }

  @media (max-width: 992px) {
    .partners {
      height: 300px;
    }
    .partners .container {
      padding: 20px;
      width: 80vw;
    }
  }

  .partners .container > h3 {
    color: var(--main-color);
    font-size: 46px;
    font-weight: 800;
    /* padding-bottom: 70px; */
    font-family: Almarai;
  }

  @media (max-width: 992px) {
    .partners .container > h3 {
      font-size: 24px;
      font-weight: 800;
      padding: 40px 0;
    }
  }

  .partners .slider {
    width: 100%;
    background-color: white;
    /* padding: 0px 10%; */
    margin: 30px 0px;
  }

  .partners .slider .container {
    padding: 0px;
  }

  .partners .slider .container .swiper {
    width: 100%;
    /* background-color: white; */
  }

  .partners .slider .container .swiper-slide {
    /* border-radius: 10px; */
    overflow: hidden;
    /* box-shadow: 0px 4px 40px 0px #0000000d; */
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .partners .slider .container .swiper-slide .image {
    width: 100%;
    height: 80%;
    object-fit: contain;
    object-position: center;
  }

  /*    END  COMPANIES  SECTION  BY BASEL AHMED  */


  /*  START  FOOTER SECTION  BY BASEL AHMED  */
  .footer{
    background-color:var(--main-color);
    background-image: url(../images/aboutorg.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    -ms-border-radius: 45px;
    -o-border-radius: 45px;
    height: auto;
    position: relative;
    text-align: center;
    height: 400px;
    margin:80px 10px  10px 10px ;
  }


  @media(max-width:992px){
    .footer{
      height:545px;
    }
  }
  .footer .container {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    height: 85%;
  }
  @media(max-width:992px){
    .footer .container {
      display: grid;
      grid-template-columns: 100%;
      height: auto;
    }
  }
  .footer .container .img {
    display: flex;
    flex-direction: column;
    /* padding: 20px; */
    justify-content: center;
    align-items: center;
    padding: 10px;

  }
  .footer .container .img img {
    height: 97px;
    width: 186px;
  }

  @media(max-width:992px){
    .footer .container .img img {
      height: 67px;
      width: 129px;
    }

  }
  .footer .container .img p{
    color: white;
    padding-top: 20px;
    font-size: 14px;
    font-weight: 400;
    font-family: Almarai;
    line-height: 1.5;
  }

  @media(max-width:992px){
    .footer .container .img p{
      font-size: 12px;
      font-weight: 400;
    }
  }
  .footer .container .links {
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
  }

  @media(max-width:992px){
    .footer .container .links {
      display: none;
    }
  }
  .footer .container .links h3 {
    font-size: 24px;
    font-weight: 700;
    color: white;
    font-family: Almarai;
    padding: 0px 0px 40px 0px;
  }

  @media(max-width:992px){
    .footer .container .links h3 {
      font-size: 24px;
      font-weight: 700;
      color: white;
      font-family: Almarai;
      padding: 0px 0px 10px 0px;
    }


  }
  .footer .container .links ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .footer .container .links ul  li{
    color: white;
    font-size: 20px;
    font-family: Almarai;
    font-weight: 400;
  }

  .footer .container .icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }
  .footer .container .icons > h3 {
    font-size: 20px;
    font-weight: 700;
    font-family: Almarai;
    color: white;
    padding: 20px 0;
   }

  .footer .container .icons p {
    font-size: 20px;
    font-weight: 400;
    font-family: Almarai;
    color: white;
    padding: 10px 10px ;
   }

   @media(max-width:992px){
    .footer .container .icons p {
      font-size:12px;
      font-weight: 400;
      font-family: Almarai;
      color: white;
      padding: 10px 10px ;
     }

   }
  .footer .container .icons .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
  }
  .footer .container .icons .links h3 {
    font-size: 20px;
    font-weight: 400;

  }
  .footer .container .icons .links .socail-links  {
    display: flex;
  }
  .footer .container .icons .links .socail-links  a {
    padding: 10px;
  }
  .footer .container .icons  .links a img {
    height: 35px;
    width: 35px;
    cursor: pointer;
  }
  @media(max-width:992px){
    .footer .container .icons  .links a img {
      height: 25px;
      width: 25px;
      cursor: pointer;
    }
  }

  .footer .container .icons .links a:hover img:first-child{
    display: none;
  }
  .footer .container .icons .links a img:last-child{
    display: none;
  }
  .footer .container .icons  .links a:hover img:last-child{
    display: flex;
  }


  .footer .right  {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: center;
    padding: 0px 30px;
    align-items: center;
    z-index: 10;
    color: white;
  }

  @media(max-width:992px){
    .footer .right  {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      justify-items: center;
      padding: 0px 30px;
      align-items: center;
      z-index: 10;
      color: white;
    }
  }
  .footer  .right .beacon {
     display: flex;
     align-items: center;
     flex-direction: row;

  }
  .footer  .right .beacon  span{
    padding-right: 10px;
    font-size: 15px;
  }

  @media(max-width:992px){
    footer .right  {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-evenly;
    }
    .footer .right p {
        font-size: 10px;
    padding-bottom: 20px;
    }
    .footer .container .right .beacon {
        padding-bottom: 15px;

    }

  }
  .footer  .right   {
    border-top: 1px #ffffff7d solid;
    padding-top: 10px;
    background-color: transparent;
  }


  /*  END  FOOTER SECTION  BY BASEL AHMED  */

  /*  START ENERGY IMPORTANT PAGE  BY ABSEL AHMED  */

  /*  START ENERGY IMPORTANT   BY ABSEL AHMED  */

  .important_enrgy{
    height: auto;
    padding: 20px 0;
    background-color: #F5F5FA;
  }
  .important_enrgy  .container  {
   padding-top: 80px;

  }
  .important_enrgy .container  .system_details  {

    background-image: url(../images/enrgy_important.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px ;
    -webkit-border-radius: 20px ;
    -moz-border-radius: 20px ;
    -ms-border-radius: 20px ;
    -o-border-radius: 20px ;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  }
  .important_enrgy .container  .system_details::before  {
    content: "";
    position: absolute;
    background-color: rgb(78 100 132 / 28%);
    height: 100%;
    width: 100%;
    z-index: -1;
    border-radius: 20px ;
    -webkit-border-radius: 20px ;
    -moz-border-radius: 20px ;
    -ms-border-radius: 20px ;
    -o-border-radius: 20px ;
    z-index: 1;

  }
  .important_enrgy  .container .system_details  > h3 {
    font-size: 40px;
    font-weight: 800;
    font-family: Almarai;
    color: white;
    z-index: 2;
  }
  @media(max-width:992px){
    .important_enrgy  .container .system_details  > h3 {
      font-size: 25px;
      font-weight: 400;
      font-family: Almarai;
      color: white;
      z-index: 2;
    }
  }
  .important_enrgy  .container  .system_details   > p {
    font-size: 24px;
    font-weight: 400;
    font-family: Almarai;
    padding: 20px 60px;
    color: white;
    z-index: 2;
  }
  @media(max-width:992px){
    .important_enrgy  .container  .system_details   > p {
      font-size: 13px;
      font-weight: 400;
      font-family: Almarai;
      padding: 10px 40px;
      color: white;
      z-index: 2;
    }
  }

  /*  START ENERGY IMPORTANT  BY BASEL AHMED  */

  .allsystems{
    height: auto;
    background-color: #F5F5FA;
  }
  .allsystems .container{
    display: flex;
    height: 100%;
  }

  @media(max-width:992px){
    .allsystems .container{
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
  .allsystems .container .system  {
    width: 70%;
  }

  @media(max-width:992px){
    .allsystems .container .system  {
      width: 100%;
    }
  }
  .allsystems .container .system .content {
    border: 1px solid rgba(68, 137, 68, 0.6);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px;
  }
  .allsystems .container .system .img {
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .allsystems .container .system .img img {
     height:  100%;
     width: 100%;
  }
  .allsystems .container .system .text {
    padding: 10px;
    line-height: 2;


  }
  .allsystems .container .system h3 {
       font-size: 30px;
       padding: 0px 10px;
       font-weight: 400;
    }
  .allsystems .container .sugention {
    width: 30%;
    padding: 25px;

  }

  @media(max-width:992px){
    .allsystems .container .sugention {
      width: 100%;
      padding: 25px;

    }
  }
  .allsystems .container .sugention .content {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    /* border: 1px solid rgba(68, 137, 68, 0.6); */
  }
  .allsystems .container .sugention  .box {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    text-align: center;
    margin: 40px 0px;
    background-color: rgb(78 100 132 / 28%);

  }
  .allsystems .container .sugention  .box img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .allsystems .container .sugention  .box  h3  {
    font-size: 16px;
    font-weight: 700;
    font-family: Almarai;
    color: var(--main-color);
    padding: 5px ;
  }
  .allsystems .container .sugention  .box  p  {
    font-size: 13px;
    font-weight: 400;
    padding: 15px ;
    line-height: 1.5;
  }

  /*  START ENERGY IMPORTANT  PAGE  BY BaSEL AHMED  */

  /* START  ALL PROUDECT SECTION BY BASEL AHEMD  */

  .allproudect{
    height: auto;
    background-color: #F5F5FA;

  }
  .allproudect .title {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }
  .allproudect .title ul {
    display: flex;
    /* grid-template-columns: repeat(auto-fill,minmax(350px,1fr )); */
    gap: 25px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    color: rgba(129, 129, 129, 1);
    padding: 0px 20px;
  }

  @media(max-width:992px){
    .allproudect .title ul {
      font-size: 14px;
      font-weight: 700;
      display: grid;
     grid-template-columns: repeat(auto-fill,minmax(100px,1fr ));
     gap: 20px;
    }

  }
  .allproudect .title ul li {

    cursor: pointer;
  }
  .allproudect .title ul a {
    color: rgba(129, 129, 129, 1);;
  }
  .allproudect .title ul li.active,
  .allproudect .title ul li:hover {
    color: #000000;
  }
  .allproudect .content {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr ));
    gap: 20px 10px;
    padding: 20px;
  }
  @media(max-width:992px){
    .allproudect .content {
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 20px 10px;
      padding: 15px;
    }
  }
  .allproudect .content .box {
    height: auto;
    width: auto;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 2px solid  rgba(0, 0, 0, 0.2);
  }
  @media(max-width:992px){
    .allproudect .content .box {
      height: auto;
      width: auto;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      border: 2px solid  rgba(0, 0, 0, 0.2);
    }
    .allproudect .content .box .text > span{
      font-size: 6px;
    }
  }
  .allproudect .content .box .img{
    width: 100%;
    height: 60%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .allproudect .content .box .img img {
    height: 240px;
    width: 100%;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
  }
     @media(max-width:990px){
      .allproudect .content .box .img img {
           height: 160px;
      }
   }

  .allproudect .content .box .text  {
    padding: 10px 20px ;
   }

   @media(max-width:990px){
     .allproudect .content .box .text  {
       padding: 0px 10px ;
      }
   }
   .allproudect .content .box .text span:first-child {
     font-size: 14px;
     font-weight: 400;
     color: rgba(129, 129, 129, 1);
   }
   @media(max-width:992px){
     .allproudect .content .box .text span:first-child {
       font-size: 7px;
     }
   }
   .allproudect .content .box .text h3 {
      font-size: 16px;
      color: var(--main-color);

   }

   @media(max-width:990px){
     .allproudect .content .box .text h3 {
       font-size: 9px;
       font-weight: 700px;

    }
   }

   .allproudect .content .box .text span:last-child {
     font-size: 14px;
     font-weight: 400;
     color: rgba(39, 92, 39, 1);
   }

   @media(max-width:992px){
     .allproudect .content .box .text span:last-child {
       font-size: 10px;
       font-weight: 800;
       color: rgba(39, 92, 39, 1);
     }

   }
   .allproudect .content .box .links {
     display: flex;
     padding: 10px;
     width: 100%;
     gap: 0px 5px;
   }

   @media(max-width:992px){
     .allproudect .content .box .links {
       display: flex;
       flex-direction: row-reverse;
       padding: 10px;
       width: 100%;
       gap: 0px 5px;
     }

   }
   .allproudect .content .box .links .cart {
     padding: 0px;
     border: 1px solid   rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     width: 70%;
   }
   .allproudect .content .box .links .cart button {
     padding: 4px;
       background: none;
       border: none;
       font-size: 13px;
       font-weight: 700;
       font-family: 'Almarai';
       cursor: pointer;
   }
   @media(max-width:992px){
     .allproudect .content .box .links .cart button {
         padding: 0px;
         background: none;
         border: none;
         font-size: 9px;
         font-weight: 700;
         font-family: 'Almarai';
         cursor: pointer;
     }
     .allproudect .content .box .links .cart img {
      height: 13px;

     }
   }
   .allproudect .content .box .links .cart a {
     color: #000000;
   }
   .allproudect .content .box .links .count {
     border: 1px solid  rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: space-evenly;
     width: 30%;
   }
   .allproudect .content .box .links .count .quantity-input  {
      display: flex;
   }
   .allproudect .content .box .links .count .quantity-input  input {
     width: 100%;
     text-align: center;
     border: none;
       background: transparent;
       font-weight: 600;
   }
   .allproudect .content .box .links .count .quantity-input  button {
     padding: 9px;
     font-weight: 900;
     border: none;
     background: transparent;
     cursor: pointer;
   }

   @media(max-width:992px){
     .allproudect .content .box .links .count .quantity-input  button {
       padding: 3px;
       font-weight: 400;
       border: none;
       background: transparent;
     }
   }
   .allproudect .content .box .links .count .quantity-input  button:first-child {
     font-size: 25px;
   }
   .allproudect .content .box .links .count .quantity-input  button:last-child {
     font-size: 15px;
   }
   .allproudect .content .box .links .count span {
     font-size: 20px;
     font-weight: 700;
   }
   .allproudect .content .box .links .count span:not(:nth-child(2)) {
       cursor: pointer;
   }
   /* END  ALL PROUDECT SECTION BY BASEL AHEMD  */



  /*  STATR DEATILS PRUDECT PAGE BY BASEL AHMED  */

  .proudect_detilas{
    height: auto;
    background-color: #F5F5FA;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    padding: 50px 0;
  }
  .proudect_detilas .container{
    display: flex;
    height: 100%;
  }
  @media(max-width:992px){
    .proudect_detilas .container{
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0px 25px;
    }
  }
  .proudect_detilas .container .img {
    background-color: white;
    height: 570px;
    width: 50%;
    padding: 10px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;

  }
  @media(max-width:992px){
    .proudect_detilas .container .img {
      width: 100%;
      height: 80%;

    }
  }
  .proudect_detilas .container .img img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .proudect_detilas .container .text {
    width: 50%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 0px 20px;

  }
  @media(max-width:992px){
    .proudect_detilas .container .text {
      width: 100%;
      padding: 0;
    }
  }
  .proudect_detilas .container .text h3 {
    font-size: 20px;
    font-weight: 800;
    font-family: Almarai;
  }
  @media(max-width:992px){
    .proudect_detilas .container .text h3 {
      font-size: 14px;
      font-weight: 800;
      font-family: Almarai;
      padding: 20px 0px;
    }
  }
  .proudect_detilas .container .text > span:first-of-type {
    font-size: 13px;
    font-weight: 800;
    font-family: Almarai;
    color: var(--main-color);
  }
  @media(max-width:992px){
    .proudect_detilas .container .text > span:first-of-type {
      font-size: 12px;
      font-weight: 800;
      font-family: Almarai;
      color: var(--main-color);
    }
  }
  .proudect_detilas .container .text > span:nth-of-type(2) {
    font-size: 24px;
    font-weight: 800;
    font-family: Almarai;
    color: var(--main-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) ;
    padding-top: 10px;
    padding-bottom: 30px;
  }

  @media(max-width:992px){
    .proudect_detilas .container .text > span:nth-of-type(2) {
      font-size: 20px;
      font-weight: 800;
      font-family: Almarai;
      color: var(--main-color);
      border-bottom: 1px solid rgba(0, 0, 0, 0.2) ;
      padding-bottom: 30px;
    }

  }

  .proudect_detilas .container .text >  span:nth-of-type(3) {
    background-color: white;
    font-size: 20px;
    font-weight: 400;
    font-family: Almarai;
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
  }

  @media(max-width:992px){
    .proudect_detilas .container .text >  span:nth-of-type(3) {
      background-color: white;
      font-size: 14px;
      font-weight: 400;
      font-family: Almarai;
      padding: 10px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      margin: 10px 0;
    }

  }
  .proudect_detilas .container .text > span:nth-of-type(4) {
    background-color: white;
    font-size: 20px;
    font-weight: 400;
    font-family: Almarai;
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;

  }

  @media(max-width:992px){
    .proudect_detilas .container .text > span:nth-of-type(4) {
      background-color: white;
      font-size: 14px;
      font-weight: 400;
      font-family: Almarai;
      padding: 10px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;

    }
  }
  .proudect_detilas .container .text p {
    font-size: 16px;
    font-weight: 400;
    font-family: Almarai;
    line-height: 1.6;

  }

  @media(max-width:992px){
    .proudect_detilas .container .text p {
      font-size: 13px;
      font-weight: 400;
      font-family: Almarai;
      line-height: 1.6;
      padding: 10px 5px;

    }
  }
  .proudect_detilas .container .text .links {
    display: flex;
    padding: 10px;
    width: 100%;
    gap: 0px 20px;
  }
  .proudect_detilas .container .text .links .cart a {
    color: #000000;
  }
  .proudect_detilas .container .text .links .cart {
    padding: 10px;
    border: 1px solid   rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 70%;
    cursor: pointer;
  }
  .proudect_detilas .container .text .links .cart button {
    padding: 4px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Almarai';
    cursor: pointer;
    color: #000000;
  }
  .proudect_detilas .container .text .links .count {
    border: 1px solid  rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 30%;
  }
  .proudect_detilas .container .text .links .count .quantity-input {
    display: flex;
  }
  .proudect_detilas .container .text .links .count .quantity-input input {
    width: 100%;
    text-align: center;
    padding: 5px;
    border: none;
    background-color: transparent;
  }
  .proudect_detilas .container .text .links .count .quantity-input button {
    padding: 0px 20px;
      font-size: 10px;
      font-weight: 900;
      cursor: pointer;
       border: none;
    background-color: transparent;
    color: #000000;
  }
  @media(max-width:992px){
    .proudect_detilas .container .text .links .count .quantity-input button {
      padding: 0px 5px;
        font-size: 10px;
        font-weight: 900;
        cursor: pointer;
         border: none;
      background-color: transparent;
      color: #000000;
    }
  }
  @media(max-width:992px){
    .proudect_detilas .container .text .links .count .quantity-input button {
      padding: 0px 10px;
        font-weight: 400;
    }
  }
  .proudect_detilas .container .text .links .count span {
    font-size: 20px;
    font-weight: 700;
  }


  .proudect_detilas .container .text .links .count span:not(:nth-child(2)) {
      cursor: pointer;
  }

  .more_details_proudect{
    background-color: #F5F5FA;
    padding: 20px 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  }
  .more_details_proudect .container h3{
    padding: 20px 0 ;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
  }
  .more_details_proudect .content{
    background-color: white;
    display: flex;
    padding: 10px;
    border: 1px  solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  @media(max-width:992px){
    .more_details_proudect .content{
      display: flex;
      flex-direction: column-reverse;
      padding: 10px;
    }
  }
  .more_details_proudect .content .text{
    width: 50%;
    display: flex;
    padding: 50px;
  }
  @media(max-width:992px){
    .more_details_proudect .content .text{
      width: 100%;
      display: flex;
      padding: 15px;
    }
  }
  .more_details_proudect .content .text p{
    line-height: 1.5;
    font-weight: 400;
    font-size: 16px;
    flex-direction: column;
  }
  .more_details_proudect .content .img{
    width: 50%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    height: 600px;


  }
  @media(max-width:992px){
    .more_details_proudect .content .img{
      width: 100%;
      display: flex;
      flex-direction: column;


    }
  }
  .more_details_proudect .content .img .swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .more_details_proudect .content .img .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
  }

  .more_details_proudect .content .img .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    cursor: pointer;
  }
  .more_details_proudect .content .img .mySwiper2 {
    height: 80%;
    width: 100%;
  }
  .more_details_proudect .content .img .mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .more_details_proudect .content .img .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }

  .more_details_proudect .content .img .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }

  .more_details_proudect .content .img .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    cursor: pointer;
  }


  .sugution_proudect{
    background-color: #F5F5FA;
    padding: 20px 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);

  }
  .sugution_proudect .container {
  }
  .sugution_proudect .container > h3 {
    padding: 20px 0 ;
    font-size: 24px;
    font-weight: 700;
  }

  @media(max-width:992px){
    .sugution_proudect .container > h3 {
      padding: 20px 0 ;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
    }

  }
  .sugution_proudect .container .content {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 20px;
    padding: 20px;
  }


  .sugution_proudect .container .content .box {
    background-color: #F5F5FA;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 1px solid gray;
  }
  .sugution_proudect .container .content .box img {
    border-radius: 20px 20px 0px 0px ;
    -webkit-border-radius: 20px 20px 0px 0px ;
    -moz-border-radius: 20px 20px 0px 0px ;
    -ms-border-radius: 20px 20px 0px 0px ;
    -o-border-radius: 20px 20px 0px 0px ;
  }
  .sugution_proudect .container .content .box span:first-of-type{
    font-weight: 400;
    font-size: 14px;
    padding: 10px 10px;
    color: rgba(129, 129, 129, 1);
  }
  .sugution_proudect .container .content .box span:last-of-type{
    font-weight: 400;
    font-size: 14px;
    padding: 30px 10px;
  }
  .sugution_proudect .container .content .box h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color);
    padding: 10px;
  }


  .sugution_proudect .container .mySwiper ,
  .sugution_proudect .container .mySwiper2  {
     padding: 10px;
  }
  .sugution_proudect .container .mySwiper .swiper-pagination-bullet,
  .sugution_proudect .container .mySwiper2 .swiper-pagination-bullet {
    display: none;
  }
  @media(max-width:992px){
    .sugution_proudect .container .mySwiper  {
      display: none;
    }
  }
  .sugution_proudect .container .mySwiper2   {
    display: none;

  }
  @media(max-width:992px){
    .sugution_proudect .container .mySwiper2  {
      display: block;
    }
  }
  .sugution_proudect .container .mySwiper .swiper-slide .box ,
  .sugution_proudect .container .mySwiper2 .swiper-slide .box {
    background-color: #F5F5FA;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 1px solid gray;
    cursor: pointer;
  }
  .sugution_proudect .container .mySwiper .swiper-slide .box img ,
  .sugution_proudect .container .mySwiper2 .swiper-slide .box img {
    height: 250px;
    border-radius: 20px 20px 0px 0px ;
    -webkit-border-radius: 20px 20px 0px 0px ;
    -moz-border-radius: 20px 20px 0px 0px ;
    -ms-border-radius: 20px 20px 0px 0px ;
    -o-border-radius: 20px 20px 0px 0px ;
  }
  .sugution_proudect .container .mySwiper .swiper-slide .box span:first-of-type,
  .sugution_proudect .container .mySwiper2 .swiper-slide .box span:first-of-type{
    font-weight: 400;
    font-size: 14px;
    padding: 10px 10px;
    color: rgba(129, 129, 129, 1);
  }
  .sugution_proudect .container .mySwiper .swiper-slide .box span:last-of-type,
  .sugution_proudect .container .mySwiper2 .swiper-slide .box span:last-of-type{
    font-weight: 400;
    font-size: 14px;
    padding: 30px 10px;
  }
  .sugution_proudect .container .mySwiper .swiper-slide .box h3 ,
  .sugution_proudect .container .mySwiper2 .swiper-slide .box h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color);
    padding: 10px;
  }

  .sugution_proudect .container .mySwiper .swiper-slide .box span{
    color: rgba(129, 129, 129, 1);

  }
  /*  END DEATILS PRUDECT PAGE BY BASEL AHMED  */


  /*  START  IMPORTANT ENERGY REWABLE PAGE  BY BASEL AHMED  */

  .imp_energy_rewable{
    height: auto;
    background-color: #F5F5FA;
    padding: 50px 0;
  }
  .imp_energy_rewable .container{
    display: flex;
    height: 100%;
  }

  @media(max-width:992px){
    .imp_energy_rewable .container{
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
  .imp_energy_rewable .container .system  {
    width: 100%;
  }

  @media(max-width:992px){
    .imp_energy_rewable .container .system  {
      width: 100%;
    }
  }
  .imp_energy_rewable .container .system .content {
    border: 1px solid rgba(68, 137, 68, 0.6);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px;
  }
  .imp_energy_rewable .container .system .img {
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .imp_energy_rewable .container .system .img img {
     height:  100%;
     width: 100%;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -ms-border-radius: 20px;
     -o-border-radius: 20px;
  }
  .imp_energy_rewable .container .system .text {
    padding: 10px;
    line-height: 2;


  }
  .imp_energy_rewable .container .system h3 {
       font-size: 30px;
       padding: 0px 10px;
       font-weight: 400;
    }


  /*  START  IMPORTANT ENERGY REWABLE PAGE  BY BASEL AHMED  */


  /*  START ALL NEWS PAGE BY BASEL AHMED  */

  .title_news{
    height: auto;
    padding: 20px 0;
    background-color: #F5F5FA;
  }
  .title_news  .container  {
   padding-top: 80px;

  }
  .title_news .container  .news_details  {

    background-image: url(../images/enrgy_important.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px ;
    -webkit-border-radius: 20px ;
    -moz-border-radius: 20px ;
    -ms-border-radius: 20px ;
    -o-border-radius: 20px ;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  }
  .title_news .container  .news_details::before  {
    content: "";
    position: absolute;
        background-color: rgb(78 100 132 / 28%);
    background-color: #042104a3;
    height: 100%;
    width: 100%;
    z-index: -1;
    border-radius: 20px ;
    -webkit-border-radius: 20px ;
    -moz-border-radius: 20px ;
    -ms-border-radius: 20px ;
    -o-border-radius: 20px ;
    z-index: 1;

  }
  .title_news  .container .news_details  > h3 {
    font-size: 30px;
    font-weight: 800;
    font-family: Almarai;
    color: white;
    z-index: 2;
  }
  @media(max-width:992px){
    .title_news  .container .news_details  > h3 {
      font-size: 20px;
      font-weight: 400;
      font-family: Almarai;
      color: white;
      z-index: 2;
    }
  }
  .title_news  .container  .news_details   > p {
    font-size: 24px;
    font-weight: 400;
    font-family: Almarai;
    padding: 20px 60px;
    color: white;
    z-index: 2;
  }
  @media(max-width:992px){
    .title_news  .container  .news_details   > p {
      font-size: 13px;
      font-weight: 400;
      font-family: Almarai;
      padding: 10px 40px;
      color: white;
      z-index: 2;
    }
  }



  .all_news{
    background-color:#F5F5FA;
    height: auto;
    position: relative;
    text-align: center;
    display:  flex;
    overflow: hidden;
   }
   .all_news .container {
    padding: 50px;
  }
  @media(max-width:992px){
    .all_news .container {
      padding: 50px;
      width: 100vw;
    }
  }


  .all_news .container .mySwipernews {
    width: 100%;
    /* background-color: #751332; */
    cursor: pointer;
  }
  .all_news .container .mySwipernews .swiper-slide {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(500px,1fr));
    gap: 0px 40px;

  }

  .all_news .container .mySwipernews .swiper-wrapper{
    /* height: 1000px; */
    padding: 0px;
  }
  .all_news .container .mySwipernews .sildercss {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
  }
  .all_news .container .mySwipernews  .sildercss.swiper-pagination-bullet-active {
    color: #fff;
    background: #007aff;
  }
  @media(max-width:992px){
    .all_news .container .mySwipernews{
      height: auto;
      padding: 20px 0;
      width: 100%;
    }
  }

  .all_news .container .mySwipernews .swiper-wrapper .new {
    display: flex ;
    width: 100%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin:  50px 0;
    background-color: rgb(78 100 132 / 28%);
    flex-direction: column;
  }
  .all_news .container .mySwipernews .swiper-wrapper .new:nth-child(3)  {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: row;
  }

  @media(max-width:992px){
    .all_news .container .mySwipernews .swiper-wrapper .new:nth-child(3)  {
      grid-column: 1 / span 1;
      display: flex;
      flex-direction: column;
    }
  }

  @media(max-width:992px){
   .all_news .container .mySwipernews .swiper-wrapper .new {
     display: flex ;
     flex-direction: column;
     width: 75%;
     margin:  50px 0;
   }
  }



  .all_news .container .mySwipernews .swiper-wrapper .new .img {
   height: 370px;
   width: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
  }

  @media(max-width:992px){
   .all_news .container .mySwipernews .swiper-wrapper .new .img {
     width: 100%;

   }
  }
  .all_news .container .mySwipernews .swiper-wrapper .new .img  img{
   width: 100%;
   height: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
  }
  .all_news .container .mySwipernews .swiper-wrapper .new .text {
   width: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   padding: 30px;
   text-align: right;

  }

  @media(max-width:992px){
   .all_news .container .mySwipernews .swiper-wrapper .new .text {
     width: 100%;

   }
  }
  .all_news .container .mySwipernews .swiper-wrapper .new .text h3 {
   color: var(--main-color);
   font-size: 24px;
   font-weight: 800;
   font-family: Almarai;
   align-self: flex-start;
   padding-bottom: 20px;
   text-align: left;
  }

  @media(max-width:992px){
   .all_news .container .mySwipernews .swiper-wrapper .new .text h3 {
     color: var(--main-color);
     font-size: 16px;
     font-weight: 800;
     font-family: Almarai;
     align-self: flex-start;
     padding-bottom: 20px;
   }

  }
  .all_news .container .mySwipernews .swiper-wrapper .new .text p {
   font-size: 18px;
   font-weight: 400;
   line-height: 1.5;
   font-family: Almarai;
   align-self: flex-start;
   padding-bottom: 20px;
   text-align: left;
  }


  @media(max-width:992px){
   .all_news .container .mySwipernews .swiper-wrapper .new .text p {
     font-size: 14px;
     font-weight: 400;
     line-height: 1.5;
     font-family: Almarai;
     align-self: flex-start;
     padding-bottom: 20px;

   }


  }
   .all_news .container .mySwipernews .swiper-wrapper .new .text span {
     align-self: self-start;
   }


   @media(max-width:992px){
     .all_news .container .mySwipernews .swiper-wrapper .new .text span {
       align-self: self-start;
       font-size: 13px;
       color: rgba(93, 92, 92, 0.7);
       font-family: Almarai;
       font-weight: 400;
     }


   }



  .all_news .container .mySwipernews .swiper-wrapper .new .text .more {
   display: flex;
   justify-content: flex-end;
   font-weight: 400;
   font-family: Almarai;

  }
  @media(max-width:992px){
    .all_news .container .mySwiper .swiper-wrapper .swiper-slide {
      display: flex;
      flex-direction: column;
    }
   .all_news .container {
     padding: 20px;

   }
   .all_news .container .content {
    display: grid;
    grid-template-columns:100%;
    gap: 0px 40px;
  }
  }
  .all_news .container  .content {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(500px,1fr));
    gap: 0px 40px;
  }

  @media(max-width:992px){
   .all_news .container {
     padding: 20px;

   }
   .all_news .container .content {
    display: grid;
    grid-template-columns:100%;
    gap: 0px 40px;
  }
  }

  .all_news .container > h3 {
    color: var(--main-color) ;
    font-size: 46px ;
    font-weight: 800;
    padding-bottom: 50px;
    font-family: Almarai;
  }

  @media(max-width:992px){
   .all_news .container > h3 {
     font-size: 24px;
     font-weight: 800;
      padding: 20px 0;

   }
  }


  .all_news .container .new {
    display: flex ;
    width: 100%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   margin:  50px 0;
   background-color: rgba(68, 137, 68, 0.185);
   flex-direction: column;

  }
  .all_news .container .new:nth-child(3)  {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: row;
  }

  @media(max-width:992px){
    .all_news .container .new:nth-child(3)  {
      grid-column: 1 / span 1;
      display: flex;
      flex-direction: column;
    }
  }

  @media(max-width:992px){
   .all_news .container .new {
     display: flex ;
     flex-direction: column;
     width: 100%;
     margin:  50px 0;
   }
  }


  .all_news .container .new .img {
   width: 100%;
   height: 370px;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;

  }

  @media(max-width:992px){
   .all_news .container .new .img {
     width: 100%;

   }
  }
  .all_news .container .new .img  img{
   width: 100%;
   height: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
  }
  .all_news .container .new .text {
   width: 100%;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   padding: 30px;
   text-align: left;

  }

  @media(max-width:992px){
   .all_news .container .new .text {
     width: 100%;

   }
  }
  .all_news .container .new .text h3 {
   color: var(--main-color);
   font-size: 24px;
   font-weight: 800;
   font-family: Almarai;
   align-self: flex-start;
   padding-bottom: 20px;
  }

  @media(max-width:992px){
   .all_news .container .new .text h3 {
     color: var(--main-color);
     font-size: 16px;
     font-weight: 800;
     font-family: Almarai;
     align-self: flex-start;
     padding-bottom: 20px;
   }

  }
  .all_news .container .new .text p {
   font-size: 18px;
   font-weight: 400;
   line-height: 1.5;
   font-family: Almarai;
   align-self: flex-start;
   padding-bottom: 20px;
  }


  @media(max-width:992px){
   .all_news .container .new .text p {
     font-size: 14px;
     font-weight: 400;
     line-height: 1.5;
     font-family: Almarai;
     align-self: flex-start;
     padding-bottom: 20px;

   }


  }
   .all_news .container .new .text span {
     align-self: self-start;
   }


   @media(max-width:992px){
     .all_news .container .new .text span {
       align-self: self-start;
       font-size: 13px;
       color: rgba(93, 92, 92, 0.7);
       font-family: Almarai;
       font-weight: 400;
     }


   }



  .all_news .container .new .text .more {
   display: flex;
   justify-content: flex-end;
   font-weight: 400;
   font-family: Almarai;
  }
  .all_news .container .new .text .more  a {
   font-size: 15px;
   cursor: pointer;
   color: black;

  }

  @media(max-width:992px){

   .all_news .container .new .text .more  a {
     font-size: 13px;
     cursor: pointer;
     color: black;

    }
  }

  .all_news .container .count {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

  }
  .all_news .container .count  span{
    height: 35px;
    width: 35px;
    background-color: white;
    padding: 0px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    cursor: pointer;
    border: 2px solid rgb(161, 161, 165);
    padding: 5px;
  }
  .all_news .container .count  span img{
    height: 100%;
    width: 100%;
  }




  /*    END NEWS SECTION BY BASEL AHMED   */

  /*  END  ALL NEWS PAGE BY BASEL AHMED  */

  /*  START CART SHOOPING PAGE  BY BASEL AHEMD  */

  .title_cart{
    height: auto;
    padding: 20px 0;
    background-color: #F5F5FA;
  }
  .title_cart  .container  {
   padding-top: 80px;

  }
  .title_cart .container  .cart_details  {

    background-image: url(../images/enrgy_important.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px ;
    -webkit-border-radius: 20px ;
    -moz-border-radius: 20px ;
    -ms-border-radius: 20px ;
    -o-border-radius: 20px ;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  }
  .title_cart .container  .cart_details::before  {
    content: "";
    position: absolute;
    background-color: rgb(78 100 132 / 28%);
    height: 100%;
    width: 100%;
    z-index: -1;
    border-radius: 20px ;
    -webkit-border-radius: 20px ;
    -moz-border-radius: 20px ;
    -ms-border-radius: 20px ;
    -o-border-radius: 20px ;
    z-index: 1;

  }
  .title_cart  .container .cart_details  > h3 {
    font-size: 40px;
    font-weight: 800;
    font-family: Almarai;
    color: white;
    z-index: 2;
  }
  @media(max-width:992px){
    .title_cart  .container .cart_details  > h3 {
      font-size: 20px;
      font-weight: 400;
      font-family: Almarai;
      color: white;
      z-index: 2;
    }
  }
  .title_cart  .container  .cart_details   > p {
    font-size: 24px;
    font-weight: 400;
    font-family: Almarai;
    padding: 20px 60px;
    color: white;
    z-index: 2;
  }
  @media(max-width:992px){
    .title_cart  .container  .cart_details   > p {
      font-size: 13px;
      font-weight: 400;
      font-family: Almarai;
      padding: 10px 40px;
      color: white;
      z-index: 2;
    }
  }

  .items_cart   {
    height: auto;
    padding: 20px 0;
    background-color: #F5F5FA;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  }
  .items_cart  .container  .content  {
    display: flex;
    height: auto;
    width: 100%;
    padding: 10px;
  }
  @media(max-width:992px){
    .items_cart  .container  .content  {
      display: flex;
      flex-direction: column;
    }
  }

  .items_cart  .container  .content .items  {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 20px;
    width: 60%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px 0;
    border: 1px solid rgb(109, 106, 106);
  }

  @media(max-width:992px){
    .items_cart  .container  .content .items  {
      display: flex;
      flex-direction: column;
      background-color: white;
      border-radius: 20px;
      width: 100%;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      padding: 20px 0;
      border: 1px solid rgb(109, 106, 106);
    }

  }

    .items_cart  .container  .content .items > span {
      font-weight: 400;
      font-size: 16px;
      border-top: 1px solid rgb(128, 125, 125);
      border-bottom: 1px solid rgb(109, 106, 106);
      width: 100%;
      padding: 10px 20px;
    }
    @media(max-width:992px){
      .items_cart  .container  .content .items > span {
        font-weight: 400;
        font-size: 13px;
      }
    }
    .items_cart  .container  .content .items > span  input {
      margin: 0px 10px;
      cursor: pointer;

    }
    .items_cart  .container  .content .items  .item {
      border-bottom: 1px solid rgb(109, 106, 106);
      display: flex;
      height: 200px;
      padding: 20px 10px;
    }

    @media(max-width:992px){
      .items_cart  .container  .content .items  .item {
        border-bottom: 1px solid rgb(109, 106, 106);
        display: flex;
        height: 130px;
        padding: 20px 10px;
      }
    }
    .items_cart  .container  .content .items  .item .img {
      width: 50%;
      display: flex;
    }
    .items_cart  .container  .content .items  .item .img .check{
      background-color: white;
      width: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .items_cart  .container  .content .items  .item .img .check input{
      cursor: pointer;
    }
    .items_cart  .container  .content .items  .item .img .sub_img {
      width: 85%;

    }
    .items_cart  .container  .content .items  .item .img .sub_img img {
      padding: 10px;
      height: 100%;
      width: 100%;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      border: 1px solid rgb(109, 106, 106);

  }


    .items_cart  .container  .content .items  .item .text {
      width: 60%;
      display: flex;
    }
    .items_cart  .container  .content .items  .item .text .right {
      width: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
     padding: 10px;
    }
    .items_cart  .container  .content .items  .item .text .right h3 {
      font-weight: 700;
      font-family: Almarai;
      font-size: 20px;
    }
    @media(max-width:992px){
      .items_cart  .container  .content .items  .item .text .right h3 {
        font-weight: 700;
        font-family: Almarai;
        font-size: 12px;
      }
    }
    .items_cart  .container  .content .items  .item .text .right span {
      font-weight: 800;
      font-family: Almarai;
      font-size: 13px;
      color: rgba(82, 82, 82, 1);
    }

    @media(max-width:992px){
      .items_cart  .container  .content .items  .item .text .right span {
        font-weight: 800;
        font-family: Almarai;
        font-size: 8px;
        color: rgba(82, 82, 82, 1);
      }
    }

    .items_cart  .container  .content .items  .item .text .right span:nth-child(4) {
      font-weight: 800;
      font-family: Almarai;
      font-size: 24px;
      color: var(--main-color);
    }

    @media(max-width:992px){
      .items_cart  .container  .content .items  .item .text .right span:nth-child(4) {
        font-weight: 800;
        font-family: Almarai;
        font-size: 13px;
        color: var(--main-color);
      }
    }
    .items_cart  .container  .content .items  .item .text .left {
      width: 35%;
    }
    .items_cart  .container  .content .items  .item .text .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 3px;
    }

    .items_cart  .container  .content .items  .item .text .left .count {
      border: 1px solid  rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      padding: 2px;
    }
    .items_cart  .container  .content .items  .item .text .left .count form .quantity-input  {
      display: flex;
    }
    .items_cart  .container  .content .items  .item .text .left .count form .quantity-input input {
      width: 100%;
      background-color: transparent;
      border: none;
      text-align: center;
      font-size: 13px;
      font-weight: 400;

    }
    .items_cart .container  .content .items  .item .text .left .count form .quantity-input  button {
      border: none;
      background-color: transparent;
      border: none;
      font-size: 18px;
      font-weight: 400;
      color: #000000;
      padding: 5px;
    }
    .items_cart  .container  .content .items  .item .text .left .count span {
      font-size: 20px;
      font-weight: 700;
    }

    @media(max-width:992px){
      .items_cart  .container  .content .items  .item .text .left .count span {
        font-size: 12px;
        font-weight: 700;
        border: none;
        text-align: center;
      }
    }


    .items_cart  .container  .content .items  .item .text .left .count span:not(:nth-child(2)) {
      cursor: pointer;
    }

    .items_cart  .container  .content .items  .item .text .left  .detel {
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
    .items_cart  .container  .content .items  .item .text .left  .detel button {
      padding: 0px 5px;
      background: none;
      border: none;
      font-size: 13px;
      font-weight: 700;
      font-family: 'Almarai';
      cursor: pointer;
      color: #000000;
    }

  .items_cart  .container  .content .amount_price  {
    width: 40%;
    padding: 0px 0px 0px 20px;

  }
  @media(max-width:992px){
    .items_cart  .container  .content .amount_price  {
      width: 100%;
      padding: 20px 0px;
    }
  }
  .items_cart  .container  .content .amount_price  .content {
    background-color: white;
    border: 1px solid rgb(109, 106, 106);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 200px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
  }
  .items_cart  .container  .content .amount_price  .content h3 {
    font-size: 25px;
    font-weight: 700;
  }
  @media(max-width:992px){
    .items_cart  .container  .content .amount_price  .content h3 {
      font-size: 19px;
      font-weight: 700;
      font-family: Almarai;
    }
  }

  .items_cart  .container  .content .amount_price  .content span {
    font-size: 16px;
    font-weight: 800;
  }
  @media(max-width:992px){
    .items_cart  .container  .content .amount_price  .content span {
      font-size: 14px;
      font-weight: 800;
      font-family: Almarai;
    }
  }

  .items_cart  .container  .content .amount_price  .content a {
    font-size: 24px;
    font-weight: 800;
    border: none;
    padding: 10px;
    color: white;
    font-family: Almarai;
    background-color: var(--main-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    cursor: pointer;
    text-align: center;
  }
  @media(max-width:992px){
    .items_cart  .container  .content .amount_price  .content a {
      font-size: 19px;
      font-weight: 800;
      font-family: Almarai;
    }
  }
  /*  END CART SHOOPING  PAGE BY BASEL AHEMD  */


  /*  START CART BUY PAGE BY BASEL AHMED  */

  .cart_buy{
    display: flex;
    background-color: #F5F5FA;
  }

  .cart_buy .container .content{
    display: flex;
  }
  @media(max-width:992px){
    .cart_buy .container .content{
      display: flex;
      flex-direction: column;
    }
  }
  .cart_buy .container .content .right{
    width: 60%;
    text-align: center;
    padding: 20px;
  }
  @media(max-width:992px){
    .cart_buy .container .content .right{
      width: 100%;
      padding: 0;
    }
  }
  .cart_buy .container .content .right h3 {
    font-weight: 800;
    font-size: 24px;
    padding: 10px 0;
  }
  @media(max-width:992px){

    .cart_buy .container .content .right h3 {
      font-weight: 700;
      font-size: 12px;
    }
  }
  .cart_buy .container .content .right > span {
    font-weight: 700;
    font-size: 16px;

  }
  @media(max-width:992px){

    .cart_buy .container .content .right > span {
     display: none;
    }
  }
  .cart_buy .container .content .right .from{
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin: 10px 0;
    border: 1px solid rgba(68, 137, 68, 0.3);
  }

  @media(max-width:992px){
    .cart_buy .container .content .right .from{
      background-color: white;
      padding: 0px;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      margin: 10px 0;
    }
  }
  .cart_buy .container .content .right .from .head{
    border-bottom: 2px solid gray;
    padding: 10px;
    text-align: start;
  }
  .cart_buy .container .content .right .from .head > span{
    font-weight: 400;
    font-size: 20px;
    font-family: Almarai;
  }
  @media(max-width:992px){
    .cart_buy .container .content .right .from .head > span{
      font-weight: 400;
      font-size: 16px;
      font-family: Almarai;
    }
  }
  .cart_buy .container .content .right .from .head  button{
    background-color: var(--main-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    color: white;
    padding: 10px;
    border: none;
    font-weight: 800;
    font-family: Almarai;
    cursor: pointer;
  }

  @media(max-width:992px){
    .cart_buy .container .content .right .from .head  button{
      font-weight: 400;
      font-size: 16px;

    }
  }

  .cart_buy .container .content .right .from form {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px ,1fr));
    gap: 20px;
    padding: 20px;

  }
  @media(max-width:992px){
    .cart_buy .container .content .right .from form {
      display: grid;
      grid-template-columns: auto;
      gap: 10px;
      padding: 20px;

    }
  }
  .cart_buy .container .content .right .from form .col {
    display: flex;
    flex-direction: column;
    text-align: start;
    font-weight: 400;
    font-size: 20px;
  }
  @media(max-width:992px){
    .cart_buy .container .content .right .from form .col {
      display: flex;
      flex-direction: column;
      text-align: start;
      font-weight: 400;
      font-size: 13px;
    }
  }
  .cart_buy .container .content .right .from form .col:nth-child(5) {
    grid-column: 1 / span 2;
  }
  @media(max-width:992px){
    .cart_buy .container .content .right .from form .col:nth-child(5) {
      grid-column: 1;
    }
  }
  .cart_buy .container .content .right .from form .col:nth-child(5) textarea {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
     height: 200px;
     padding: 10px;
     resize: none;
  }
  .cart_buy .container .content .right .from form .col:last-child {
    color: #448944;
    grid-column: 1 / span 2;
    font-size: 20px;
    font-weight: 700;
  }

  @media(max-width:992px){
    .cart_buy .container .content .right .from form .col:last-child {
      color: #448944;
      grid-column:1;
      font-size: 20px;
      font-weight: 700;
    }
  }
  .cart_buy .container .content .right .from form .col:last-child button {
    background-color: var(--main-color);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: none;
    font-weight: 400;
    font-size: 20px;
    font-family: Almarai;
    padding: 10px;
  }
  @media(max-width:992px){
    .cart_buy .container .content .right .from form .col:last-child button {
      font-weight: 400;
      font-size: 13px;
      font-family: Almarai;
      padding: 10px;
    }
  }
  .cart_buy .container .content .right .from form .col  input {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: 1px solid var(--main-color);
    font-family: Almarai;
    padding: 20px;
    background-color: rgba(249, 255, 249, 1);

  }

  @media(max-width:992px){
    .cart_buy .container .content .right .from form .col  input {
      padding: 10px;

    }
  }
  .cart_buy .container .content .right .from form .col  input::placeholder {
    font-size: 20px;
    padding: 30px 0px;
    font-weight: 400;
  }

  @media(max-width:992px){
    .cart_buy .container .content .right .from form .col  input::placeholder {
      font-size: 11px;
      padding: 10px 0px;
      font-weight: 400;
    }

  }
  .cart_buy .container .content .right .from form .col label {
    padding: 10px 0 ;
  }
  .cart_buy .container .content .left{
    width: 40%;
    text-align: center;

  }


  @media(max-width:992px){
    .cart_buy .container .content .left{
      width: 100%;
    }
  }
  .cart_buy .container .content .left h3{
    font-size: 27px;
    font-weight: 700;
  }
  .cart_buy .container .content .left .content{
    margin-top: 60px;
    border: 1px solid rgba(68, 137, 68, 0.3);
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 10px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .cart_buy .container .content .left table{
    background-color: white;
    padding: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .cart_buy .container .content .left table th{
    border-bottom: 1px solid #ddd;
    padding: 10px;

  }
  .cart_buy .container .content .left table th:not(:nth-child(3)){
    border-left: 1px solid #ddd;
  }
  .cart_buy .container .content .left table tr:not(:last-child) td:not(:nth-child(3)) {
    /* border: 1px solid #ddd; */
    border-left: 1px solid #ddd;
    padding: 10px;
  }

  .cart_buy .container .content .left button{
    font-weight: 700;
    font-size: 20px;
    background-color:white;
    background-color: #448944;
    border: 2px solid gray;
    padding: 10px;
    color: var(--main-color);
    color: white;
    border: 2px solid rgb(34, 23, 23);
    border: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    font-family: Almarai;
    justify-self: start;
    cursor: pointer;
  }

  /*  END CART BUY PAGE BY BASEL AHMED  */

  /*  START CART BUY PAGE BY BASEL AHMED  */

  /*  START CART BUY PAGE BY BASEL AHMED  */

  .contect{
    background-color: #F5F5FA;
  }

  .contect .container .content{
    display: flex;
  }
  @media(max-width:992px){
    .contect .container .content{
      display: flex;
      flex-direction: column;
    }
  }
  .contect .container .content .right{
    width: 60%;
    text-align: center;
    padding: 20px;
  }
  @media(max-width:992px){
    .contect .container .content .right{
      width: 100%;
      padding: 0;
    }
  }
  .contect .container .content .right h3 {
    font-weight: 800;
    font-size: 24px;
    padding: 10px 0;
  }
  @media(max-width:992px){

    .contect .container .content .right h3 {
      font-weight: 700;
      font-size: 12px;
    }
  }
  .contect .container .content .right > span {
    font-weight: 700;
    font-size: 16px;

  }
  @media(max-width:992px){

    .contect .container .content .right > span {
     display: none;
    }
  }
  .contect .container .content .right .from{
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin: 10px 0;
    border: 1px solid rgba(68, 137, 68, 0.3);
  }

  @media(max-width:992px){
    .contect .container .content .right .from{
      background-color: white;
      padding: 0px;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      margin: 10px 0;
    }
  }
  .contect .container .content .right .from .head{
    border-bottom: 2px solid gray;
    padding: 10px;
    text-align: start;
  }
  .contect .container .content .right .from .head > span{
    font-weight: 400;
    font-size: 20px;
    font-family: Almarai;
  }
  @media(max-width:992px){
    .contect .container .content .right .from .head > span{
      font-weight: 400;
      font-size: 16px;
      font-family: Almarai;
    }
  }
  .contect .container .content .right .from .head  button{
    background-color: var(--main-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    color: white;
    padding: 10px;
    border: none;
    font-weight: 800;
    font-family: Almarai;
    cursor: pointer;
  }

  @media(max-width:992px){
    .contect .container .content .right .from .head  button{
      font-weight: 400;
      font-size: 16px;

    }
  }

  .contect .container .content .right .from form {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px ,1fr));
    gap: 20px;
    padding: 20px;

  }
  @media(max-width:992px){
    .contect .container .content .right .from form {
      display: grid;
      grid-template-columns: auto;
      gap: 10px;
      padding: 20px;

    }
  }
  .contect .container .content .right .from form .col {
    display: flex;
    flex-direction: column;
    text-align: start;
    font-weight: 400;
    font-size: 20px;
  }
  @media(max-width:992px){
    .contect .container .content .right .from form .col {
      display: flex;
      flex-direction: column;
      text-align: start;
      font-weight: 400;
      font-size: 13px;
    }
  }
  .contect .container .content .right .from form .col:nth-child(1) {
    grid-column: 1 / span 2;
  }
  @media(max-width:992px){
    .contect .container .content .right .from form .col:nth-child(1) {
      grid-column: 1;
    }
  }
  .contect .container .content .right .from form .col:nth-child(4) {
    grid-column: 1 / span 2;
  }
  @media(max-width:992px){
    .contect .container .content .right .from form .col:nth-child(4) {
      grid-column: 1;
    }
  }
  .contect .container .content .right .from form .col:nth-child(5) {
    grid-column: 1 / span 2;
  }
  @media(max-width:992px){
    .contect .container .content .right .from form .col:nth-child(5) {
      grid-column: 1;
    }
  }
  .contect .container .content .right .from form .col:nth-child(5) textarea {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
     height: 200px;
     resize: none;
  }
  .contect .container .content .right .from form .col:last-child {
    color: #448944;
    grid-column: 1 / span 2;
    font-size: 20px;
    font-weight: 700;
  }

  @media(max-width:992px){
    .contect .container .content .right .from form .col:last-child {
      color: #448944;
      grid-column:1;
      font-size: 20px;
      font-weight: 700;
    }
  }
  .contect .container .content .right .from form .col:last-child button {
    background-color: var(--main-color);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: none;
    font-weight: 400;
    font-size: 20px;
    font-family: Almarai;
    padding: 10px;
  }
  @media(max-width:992px){
    .contect .container .content .right .from form .col:last-child button {
      font-weight: 400;
      font-size: 13px;
      font-family: Almarai;
      padding: 10px;
    }
  }
  .contect .container .content .right .from form .col  input {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: 1px solid var(--main-color);
    font-family: Almarai;
    padding: 20px;
    background-color: rgba(249, 255, 249, 1);

  }

  @media(max-width:992px){
    .contect .container .content .right .from form .col  input {
      padding: 10px;

    }
  }
  .contect .container .content .right .from form .col  input::placeholder {
    font-size: 20px;
    padding: 30px 0px;
    font-weight: 400;
  }

  @media(max-width:992px){
    .contect .container .content .right .from form .col  input::placeholder {
      font-size: 11px;
      padding: 10px 0px;
      font-weight: 400;
    }

  }
  .contect .container .content .right .from form .col label {
    padding: 10px 0 ;
  }
  .contect .container .content .left{
    width: 40%;
    text-align: center;
    padding: 30px 0;

  }
  @media(max-width:992px){
    .contect .container .content .left{
      width: 100%;
    }
  }
  .contect .container .content .left h3{
    font-size: 20px;
    font-weight: 700;
    padding: 20px 0;

  }
  .contect .container .content .left .content{
    border: 1px solid rgba(68, 137, 68, 0.3);
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 10px 0;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .contect .container .content .left .content .number_conect{
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    padding: 40px 20px;
  }
  .contect .container .content .left .content .number_conect .col{
    display: flex;
    flex-direction: column;
    text-align: start;
  }
  .contect .container .content .left .content .number_conect .col span{
    font-family:Almarai ;
    font-size: 20px;
    font-weight: 400;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
  }
  .contect .container .content .left .content .icons{
    display: flex;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }

  .contect .container .content .left .content .icons h3{
    display: block;
     font-size: 20px;
     font-weight: 700;
     font-family: Almarai;
  }

  @media(max-width:992px){
    .contect .container .content .left .content .icons h3{
      display: block;
       font-size: 16px;
       font-weight: 700;
       font-family: Almarai;
    }
  }
  .contect .container .content .left .content .icons .socail-links {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--main-color);
    padding: 10px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -ms-border-radius:15px;
    -o-border-radius:15px;
  }

  .contect .container .content .left .content .icons img {
  height: 25px;
  width: 25px;
  cursor: pointer;
  }
  .contect .container .content .left .content .icons a img:first-child{
  display: none;
  }
  .contect .container .content .left .content .icons a:hover img:first-child{
  display: block;
  }
  .contect .container .content .left .content .icons a img:last-child{
  display: block;
  }
  .contect .container .content .left .content .icons a:hover img:last-child{
  display: none;
  }


  .contect .container .content .left table{
    background-color: white;
    padding: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
  }
  .contect .container .content .left table th{
    border-bottom: 1px solid #ddd;
    padding: 10px;

  }
  .contect .container .content .left table th:not(:nth-child(3)){
    border-left: 1px solid #ddd;
  }
  .contect .container .content .left table tr:not(:last-child) td:not(:nth-child(3)) {
    /* border: 1px solid #ddd; */
    border-left: 1px solid #ddd;
    padding: 10px;
  }

  .contect .container .content .left button{
    font-weight: 700;
    font-size: 20px;
    background-color:white;
    background-color: #448944;
    border: 2px solid gray;
    padding: 10px;
    color: var(--main-color);
    color: white;
    border: 2px solid rgb(34, 23, 23);
    border: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    font-family: Almarai;
    justify-self: start;
    cursor: pointer;
  }

  .about {
    padding: 50px 0px;
  }

  .about .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .about .container img {
    width: 80px;
    padding-bottom: 15px;
  }

  .about .container h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
  }
  .about .container p {
    line-height: 30px;
    font-size: 14px;
    text-align: center;
  }

  @media (max-width: 789px) {
    .about .container p {
      text-align: start;
    }
    .about .container h3 {
      text-align: start;
    }
  }

  .about .container .box {
    border-radius: 30px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 3px solid transparent;
    transition: 0.4s;
  }

  @media (max-width: 789px) {
    .about .container .box {
      flex-direction: row;
      gap: 30px;
    }
  }

  .about .container .box:hover {
    background-color: #4e648417;
    border: 3px solid var(--main-color);
  }

  .about .container .about-us {
    max-width: 750px;
  }

  .about .container .about-us .text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .about .container .vision-message {
    display: flex;
    gap: 30px;
  }

  @media (max-width: 789px) {
    .about .container .vision-message {
      flex-direction: column;
    }
  }

  .about .container .vision-message .vision {
    flex: 1;
  }

  .about .container .vision-message .message {
    flex: 1;
  }

  .about .container .goals {
    max-width: 750px;
    padding: 10px 25px;
  }

  .about .container .goals ul li {
    list-style-type: disc;
    /* list-style-position: inside; */
  }

  .about .container .goals p {
    text-align: center;
  }

  /*  END CART BUY PAGE BY BASEL AHMED  */