.Fotter {
    width: 100%;
    height: 200px;
    background-color: #202020;
    background-image: url("../images/pic/footer/BG.png");
    margin-top: 50px;
    background-size: cover;
    position: relative;
  }
  .Fotter .mainF {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .mainF::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #014e68;
    opacity: 0.7;
  }
  .Fotter .mainF .logoF {
    width: 180;
    height: auto;
    position: absolute;
    left: 50%;
    top: 0;
    margin-top: 0;
    transform: translate(-50%, 0);
    z-index: 1;
  }
  
  #porfolio1 {
    width: 170;
    height: auto;
    position: absolute;
    left: 50%;
    top: -65px;
    margin-top: 0;
    transform: translate(-50%, 0);
    z-index: 1;
  }

  .mainF .line {
    width: 80%;
    height: 1px;
    background-color: #ddd;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.9;
    z-index: 1;
  }
  .Fotter img {
    width: 30px;
    height: 30px;
    margin-top: 10px;
    z-index: 1;
  }
  .Fotter p {
    color: white;
    font-size: 17px;
    font-family: "BankGothic";
    font-weight: 500;
    margin-right: 10px;
    direction: ltr;
  }
  .Fotter .mainF .call {
    width: 25%;
    position: absolute;
    display: inline-flex;
    direction: rtl;
    left: 10px;
    top: 30%;
    z-index: 1;
  }
  .Fotter .mainF .call img {
    position: absolute;
    left: 10px;
    top: 10px;
  }
  .Fotter .mainF .call p {
    position: absolute;
    left: 50px;
    top: 5px;
  }
  .Fotter .mainF .location {
    width: 35%;
    position: absolute;
    display: inline-flex;
    direction: rtl;
    left: 10px;
    bottom: 17%;
    z-index: 1;
  }
  .Fotter .mainF .location img {
    position: absolute;
    left: 10px;
    bottom: 10px;
  }
  .Fotter .mainF .location p {
    position: absolute;
    left: 50px;
    bottom: -5px;
  }
  #contact {
    display: none;
  }
  .Fotter .mainF .social {
    position: absolute;
    top: 60%;
    right: 23%;
    margin-top: 0px;
    z-index: 1;
  }
  .Fotter .mainF .social img {
    width: 35px;
    height: 35px;
    margin-left: 20px;
    margin-top: 0px;
  }
  .Fotter .mainF .social #youtube {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0px;
  }
  .Fotter .mainF .social img:hover {
    cursor: pointer;
  }
  .Fotter .mainF #FP1 {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 17px;
    font-family: "BankGothic";
    font-weight: 500;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
@media (max-width: 1600px) {
    .Fotter {
        width: 100%;
        height: 200px;
        background-color: #202020;
        margin-top: 50px;
        background-image: url("../images/pic/footer/BG.png");
        background-size: cover;
      }
    
      .Fotter .mainF {
        width: 100%;
        height: 100%;
        position: relative;
      }
    
      .mainF::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #014e68;
        opacity: 0.7;
      }
    
    
      .mainF .line {
        width: 80%;
        height: 1px;
        background-color: #ddd;
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.9;
        z-index: 1;
      }
    
      .Fotter img{
        width: 25px;
        height: 25px;
        margin-top: 10px;
        z-index: 1;
      }
        
      #porfolio1{
        width: 85px;
        height: auto;
        z-index: 1;
      }
    
      .Fotter p {
        color: white;
        font-size: 14px;
        font-family: "BankGothic";
        font-weight: 500;
        margin-right: 10px;
        direction: ltr;
      }
    
      .Fotter .mainF .call {
        width: 40%;
        position: absolute;
        display: inline-flex;
        direction: rtl;
        left: 10px;
        top: 35%;
        z-index: 1;
      }
    
      .Fotter .mainF .call img {
        position: absolute;
        left: 10px;
        top: 10px;
      }
    
      .Fotter .mainF .call p {
        position: absolute;
        left: 50px;
        top: 5px;
      }
    
      .Fotter .mainF .location {
        width: 60%;
        position: absolute;
        display: inline-flex;
        direction: rtl;
        left: 10px;
        bottom: 20%;
        z-index: 1;
      }
    
      .Fotter .mainF .location img {
        position: absolute;
        left: 10px;
        bottom: 10px;
      }
    
      .Fotter .mainF .location p {
        position: absolute;
        left: 50px;
        bottom: -5px;
      }
    
      .Fotter .mainF .social {
        position: absolute;
        top: 60%;
        right: 23%;
        margin-top: 0px;
        z-index: 1;
      }
    
      .Fotter .mainF .social img {
        width: 35px;
        height: 35px;
        margin-left: 20px;
        margin-top: 0px;
      }
    
      .Fotter .mainF .social #youtube {
        width: 35px;
        height: 35px;
        position: absolute;
        top: 0px;
      }
    
      .Fotter .mainF .social img:hover {
        cursor: pointer;
      }
    
      .Fotter .mainF #FP1 {
        color: white;
        font-size: 15px;
        font-family: "BankGothic";
        font-weight: 500;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
      }
}
@media (max-width: 1199.99px) {
    .Fotter {
        width: 100%;
        height: 250px;
        background-color: #202020;
         background-image: url("../images/pic/footer/BG.png");
        background-size: contain;
      }
    
      .Fotter .mainF {
        width: 100%;
        height: 100%;
        position: relative;
      }
    
      .mainF::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #014e68;
        opacity: 0.7;
      }
      .Fotter .mainF .logoF2 {
        width: 167px;
        height: 110px;
        position: absolute;
        left: calc(50% + 60px);
        top: 5px;
        transform: translate(-50%, 0);
        z-index: 1;
      }
    
      .mainF .line {
        width: 80%;
        height: 1px;
        background-color: #ddd;
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.9;
        z-index: 1;
      }
    
      .Fotter img {
        width: 25px;
        height: 25px;
        margin-top: 10px;
        z-index: 1;
      }
    
      #porfolio1 {
        width: 70px;
        height: auto;
        margin-top: 10px;
        z-index: 1;
      }
    
      .Fotter p {
        color: white;
        font-size: 13px;
        font-family: "BankGothic";
        font-weight: 500;
        margin-right: 10px;
        direction: ltr;
      }
    
      .Fotter .mainF .call {
        width: 40%;
        position: absolute;
        display: inline-flex;
        direction: rtl;
        left: 10px;
        top: 35%;
        z-index: 1;
      }
    
      .Fotter .mainF .call img {
        position: absolute;
        left: 10px;
        top: 10px;
      }
    
      .Fotter .mainF .call p {
        position: absolute;
        left: 50px;
        top: 5px;
      }
    
      .Fotter .mainF .location {
        width: 60%;
        position: absolute;
        display: inline-flex;
        direction: rtl;
        left: 10px;
        bottom: 20%;
        z-index: 1;
      }
    
      .Fotter .mainF .location img {
        position: absolute;
        left: 10px;
        bottom: 13px;
      }
    
      .Fotter .mainF .location p {
        position: absolute;
        left: 50px;
        bottom: 1px;
      }
    
      .Fotter .mainF .social {
        position: absolute;
        top: 65%;
        right: 20%;
        margin-top: 0px;
        z-index: 1;
      }
    
      .Fotter .mainF .social img {
        width: 30px;
        height: 30px;
        margin-left: 20px;
        margin-top: 0px;
      }
    
      .Fotter .mainF .social #youtube {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0px;
      }
    
      .Fotter .mainF .social img:hover {
        cursor: pointer;
      }
    
      .Fotter .mainF #FP1 {
        color: white;
        font-size: 14px;
        font-family: "BankGothic";
        font-weight: 500;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
      }
}
@media (max-width: 999.99px) {
    .Fotter {
        width: 100%;
        height: 250px;
        background-color: #202020;
         background-image: url("../images/pic/footer/BG.png");
        background-size: contain;
      }
    
      .Fotter .mainF {
        width: 100%;
        height: 100%;
        position: relative;
      }
    
      .mainF::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #014e68;
        opacity: 0.7;
      }
      .Fotter .mainF .logoF2 {
        width: 167px;
        height: 110px;
        position: absolute;
        left: calc(50% + 60px);
        top: 5px;
        transform: translate(-50%, 0);
        z-index: 1;
      }
    
      .mainF .line {
        width: 80%;
        height: 1px;
        background-color: #ddd;
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.9;
        z-index: 1;
      }
    
      .Fotter img {
        width: 25px;
        height: 25px;
        margin-top: 10px;
        z-index: 1;
      }
    
      #porfolio1 {
        width: 70px;
        height: auto;
        margin-top: 10px;
        z-index: 1;
      }
    
      .Fotter p {
        color: white;
        font-size: 13px;
        font-family: "BankGothic";
        font-weight: 500;
        margin-right: 10px;
        direction: ltr;
      }
    
      .Fotter .mainF .call {
        width: 60%;
        position: absolute;
        display: inline-flex;
        direction: rtl;
        left: 10px;
        top: 43%;
        z-index: 1;
      }
    
      .Fotter .mainF .call img {
        position: absolute;
        left: 10px;
        top: 10px;
      }
    
      .Fotter .mainF .call p {
        position: absolute;
        left: 50px;
        top: 5px;
      }
    
      .Fotter .mainF .location {
        width: 60%;
        position: absolute;
        display: block;
        direction: rtl;
        left: 10px;
        bottom: 18%;
        z-index: 1;
      }
      #contact {
        width: 85px;
        height: 30px;
        position: absolute;
        background-image: url("../images/pic/ToolBar-icon/button.png");
        background-size: contain;
        left: 50%;
        top: 62%;
        transform: translateX(-50%);
        display: none;
        z-index: 1;
        text-align: center;
        color: white;
        font-size: 14px;
        font-family: "Cairo";
        text-decoration: none;
      }
    
      .Fotter .mainF .location img {
        position: absolute;
        left: 10px;
        bottom: 13px;
      }
    
      .Fotter .mainF .location p {
        position: absolute;
        left: 50px;
        bottom: 1px;
      }
    
      .Fotter .mainF .social {
        position: absolute;
        top: 65%;
        right: 20%;
        margin-top: 0px;
        z-index: 1;
      }
    
      .Fotter .mainF .social img {
        width: 30px;
        height: 30px;
        margin-left: 20px;
        margin-top: 0px;
      }
    
      .Fotter .mainF .social #youtube {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0px;
      }
    
      .Fotter .mainF .social img:hover {
        cursor: pointer;
      }
    
      .Fotter .mainF #FP1 {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 14px;
        font-family: "BankGothic";
        font-weight: 500;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
      }
}
@media (max-width : 760px){
  .Fotter{
    margin-top: 0px;
  }
}
@media (max-width: 699.99px) {
  .Fotter {
    width: 100%;
    height: 250px;
    background-color: #202020;
     background-image: url("../images/pic/footer/BGmob.png");
    background-size: contain;
  }

  .Fotter .mainF {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .mainF::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #014e68;
    opacity: 0.7;
  }

  .Fotter .mainF .logoF {
    width: 170px;
  }
  .Fotter .mainF .logoF2 {
    width: 140px;
    height: 90px;
    position: absolute;
    left: calc(50% + 50px);
    top: 10%;
    transform: translate(-50%, 0);
    z-index: 1;
  }

  .mainF .line {
    width: 80%;
    height: 1px;
    background-color: #ddd;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.9;
    z-index: 1;
  }

  .Fotter img {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    z-index: 1;
  }

  .Fotter p {
    color: white;
    font-size: 10px;
    font-family: "BankGothic";
    font-weight: 500;
    margin-right: 10px;
    direction: ltr;
  }

  .Fotter .mainF .call {
    width: 97%;
    position: absolute;
    display: inline-flex;
    direction: rtl;
    right: 10px;
    top: 50%;
    z-index: 1;
  }

  .Fotter .mainF .call img {
    position: absolute;
    left: 10px;
    top: 10px;
  }

  .Fotter .mainF .call p {
    position: absolute;
    left: 50px;
    top: 5px;
  }

  .Fotter .mainF .location {
    width: 60%;
    position: absolute;
    display: block;
    direction: rtl;
    left: 10px;
    bottom: 15%;
    z-index: 1;
  }
  #contact {
    width: 85px;
    height: 30px;
    position: absolute;
     background-image: url("../images/pic/ToolBar-icon/button.png");
    background-size: contain;
    left: 50%;
    top: 65%;
    transform: translateX(-50%);
    display: block;
    z-index: 1;
    text-align: center;
    color: white;
    font-size: 14px;
    font-family: "Cairo";
    text-decoration: none;
    display: none;
  }

  .Fotter .mainF .location img {
    position: absolute;
    left: 10px;
    bottom: 13px;
  }

  .Fotter .mainF .location p {
    position: absolute;
    left: 50px;
    bottom: 1px;
  }

  .Fotter .mainF .social {
    position: absolute;
    top: 72%;
    right: 21%;
    margin-top: 0px;
    z-index: 1;
  }

  .Fotter .mainF .social img {
    width: 25px;
    height: 25px;
    margin-left: 15px;
    margin-top: 0px;
  }

  .Fotter .mainF .social #youtube {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0px;
  }

  .Fotter .mainF .social img:hover {
    cursor: pointer;
  }

  .Fotter .mainF #FP1 {
    width: 100%;
    color: white;
    font-size: 10px;
    font-family: "BankGothic";
    font-weight: 500;
    position: absolute;
    bottom: 0;
    text-align: center;
    z-index: 1;
  }
}
@media (max-width: 374.99px) {
  .Fotter {
    width: 100%;
    height: 250px;
    background-color: #202020;
     background-image: url("../images/pic/footer/BGmob.png");
    background-size: contain;
  }

  .Fotter .mainF {
    width: 97%;
    height: 100%;
    position: relative;
  }

  .mainF::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #014e68;
    opacity: 0.7;
  }
  .Fotter .mainF .logoF2 {
    width: 140px;
    height: 90px;
    position: absolute;
    left: calc(50% + 50px);
    top: 10%;
    transform: translate(-50%, 0);
    z-index: 1;
  }

  .mainF .line {
    width: 80%;
    height: 1px;
    background-color: #ddd;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.9;
    z-index: 1;
  }

  .Fotter img {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    z-index: 1;
  }

  .Fotter p {
    color: white;
    font-size: 10px;
    font-family: "BankGothic";
    font-weight: 500;
    margin-right: 10px;
    direction: ltr;
  }

  .Fotter .mainF .call {
    width: 100%;
    position: absolute;
    display: inline-flex;
    direction: rtl;
    right: 10px;
    top: 50%;
    z-index: 1;
  }

  .Fotter .mainF .call img {
    position: absolute;
    left: 10px;
    top: 10px;
  }

  .Fotter .mainF .call p {
    position: absolute;
    left: 50px;
    top: 5px;
  }

  .Fotter .mainF .location {
    width: 60%;
    position: absolute;
    display: block;
    direction: rtl;
    left: 10px;
    bottom: 15%;
    z-index: 1;
  }
  #contact {
    width: 85px;
    height: 30px;
    position: absolute;
    background-image: url("../images/pic/ToolBar-icon/button.png");
    background-size: contain;
    left: 50%;
    top: 65%;
    transform: translateX(-50%);
    display: block;
    z-index: 1;
    text-align: center;
    color: white;
    font-size: 14px;
    font-family: "Cairo";
    text-decoration: none;
    display: none;
  }

  .Fotter .mainF .location img {
    position: absolute;
    left: 10px;
    bottom: 13px;
  }

  .Fotter .mainF .location p {
    position: absolute;
    left: 50px;
    bottom: 1px;
  }

  .Fotter .mainF .social {
    position: absolute;
    top: 72%;
    right: 21%;
    margin-top: 0px;
    z-index: 1;
  }

  .Fotter .mainF .social img {
    width: 25px;
    height: 25px;
    margin-left: 15px;
    margin-top: 0px;
  }

  .Fotter .mainF .social #youtube {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0px;
  }

  .Fotter .mainF .social img:hover {
    cursor: pointer;
  }

  .Fotter .mainF #FP1 {
    width: 100%;
    color: white;
    font-size: 9px;
    font-family: "BankGothic";
    font-weight: 500;
    position: absolute;
    bottom: 5;
    text-align: center;
    z-index: 1;
  }

}