.html{
  scroll-behavior: smooth;

}
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body{
  background-color: rgb(203, 211, 212);
  overflow-x: hidden;
} 
@font-face {
    font-family: "vazir";
    src: url(../Fonts/Vazir.eot),
    url(../Fonts/Vazir.ttf),
    url(../Fonts/Vazir.woff),
    url(../Fonts/Vazir.woff2);
  }
  
  @font-face {
    font-family: "shabnam";
    src: url(../Fonts/Shabnam-Bold.eot),
    url(../Fonts/Shabnam-Bold.ttf),
    url(../Fonts/Shabnam-Bold.woff),
    url(../Fonts/Shabnam-Bold.woff2);
  }
  @font-face {
    font-family: "modam";
    font-weight: bold;
    src: url(../Fonts/Modam-Medium.eot),
    url(../Fonts/Modam-Medium.svg),
    url(../Fonts/Modam-Medium.ttf),
    url(../Fonts/Modam-Medium.woff),
    url(../Fonts/Modam-Medium.woff);
  }
*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

    /* menu of sec */
    .div_sec{
      margin-top: 2%;
      text-align: center;
      width: 80vw;
      height: auto;     
      background-color: #1e3a8a;
      margin-left: auto;
      margin-right: auto;
      border-radius: 8px;
    }
    .div_sec ul{
      direction: rtl; 
        padding-top: 1%;
        padding-bottom: 1%;
    }
    .div_sec ul li{
      padding: 1.3vw 1.3vw 1.3vw 1.3vw;
      font-size: clamp(0.6rem, 2.5vw, 1rem);
      font-family: "modam";
      display: inline-block;
      transition: 0.3s;
    }
    .div_sec ul li a{
      position: relative;
        text-decoration: none;
        color: white;
        transition: 0.3s;
    }
    .div_sec ul li a::after{
      content: '';
      position: absolute;
      bottom: -80%;
      left: 0;
      height: 3px;
      width: 0%;
      background: #3b82f6;
      border-radius: 12px;
      transition: all 0.2s ease;
      
      }
      .div_sec ul li a:hover::after{
      width: 100%;
      }
      .div_sec ul li a::after{
      left: 50%;
      transform: translateX(-50%);
      }
    /* menu of sec */
    

    /* content */
    .container{
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        padding: 2%;
        margin-top: -2%;
    }
    .div_right{
        background-color: #1e3a8a;
        padding-top: 2%;
        text-align: center;
        border-radius: 10px;
        flex: 1;
        height: fit-content;
        position: sticky;
        top: 20px;
    }
    .div_right h1 , .div_right h4{
        color: rgb(209, 209, 209);
        font-family: "shabnam";
    }
    .div_right hr{
        color: white;
        width: auto;
        
    }
    .div_right p{
        color: rgb(209, 209, 209);
        font-family: "vazir";
    }
    .div_right p span{
        color: #ff9500;
    }
    .div_center{
        background-color: #1e3a8a;
        padding: 2% 2% 2% 2%;
        flex: 2;
        border-radius: 10px;
    }
    .div_center h2{
        color: rgb(209, 209, 209);
        font-family: "shabnam";
        scroll-margin-top: 50%;
    }
    .div_center p{
        color: rgb(209, 209, 209);
        font-family: "vazir";
        text-align: justify;
    }
    .div_center p span{
      color: #ff9500;
    }
    .div_center p span a{
      color: #ff9500;
    }
    .div_center p a{
      color: #ff9500;

    }
    .div_center ul li span {
      color: #ff9500;
    }
    .div_center ul li{
      color: #ffd700;
      font-family: "vazir";
    }
    .licence_p span{
      font-weight: bold;
      font-size: 1.3rem;
    }
  /* استایل اولیه تصاویر */
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-right: 5%;
    justify-content: center;
  }
  .thumbnail {
    width: 100%;
    max-width: 300px;
    height: auto; /* تا تصویر به تناسب تغییر کند */
    cursor: pointer;
    border-radius: 10px;
  }
    @media screen and (max-width:795px) {
      .div_sec{
        width: 100% !important;
        border-radius: 0px;
      }
      .div_sec ul li a:hover::after{
        width: 0%;
        }
      }
    @media screen and (max-width:768px) {
        .container{
            flex-direction: column;
        }
        .div_right{
            position: relative;
            top: 0;
            flex: none;
            width: auto;
        }
        .div_center{
            flex: none;
            width: auto;
        }
        .gallery {
          gap: 15px;
        }
    }
    @media screen and (max-width:600px) {
     
      .container{
       width: auto;
    }
      .div_center ul li{
        list-style: none;
      }
      .div_right h1{
        margin-top: 1%;
      }
      .div_sec{
        display: none;
      }
    }
 
    @media screen and (max-width:575px) {
      .container{
        width: 95% !important;
      }
      }