:root {
    --dark-blue: #0B2842;
    --orange: #D4A869;
    --light-blue: #A6C9C9;
    --dark-red: #683327;
    --light: #F5F5F5;
    --new-orange: #D4A869;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
      font-family: "Noto Kufi Arabic", sans-serif;
    /*font-family: 'IBM Plex Sans Arabic', sans-serif;*/
    background-color:#f6f6f6;

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

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  
  .container h1 {
    text-align: center;
    position: relative;
    color: var(--dark-blue);
    font-size: 40px;
    font-weight: bolder;
    padding: 0 0 1% 0;
  }
  
  .container h1::after {
    content: '';
    background: var(--new-orange);
    width: 100px;
    height: 4px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }

  /*row setting*/
  .row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/*RESPONSIVE CODE*/
@media screen and (max-width: 880px) {

    /*general*/
    .container h1::after {
      bottom: -10px;
      height: 3px;
    }
  
    .container h1 {
      text-align: center;
      position: relative;
      color: var(--dark-blue);
      font-size:27px;
    }
  

}