/* Font */
   @font-face {
       font-family: 'iranyekan';
       src: url(fonts/iranyekanwebregular.eot) format("eot");
       src: url(fonts/iranyekanwebregular.ttf) format("ttf"),
           url(fonts/iranyekanwebregular.woff) format("woff"),
           url(fonts/iranyekanwebregular.woff2) format("woff2");
   }

   body {
       margin: 0;
       padding: 0;
       font-family: iranyekan;
   }

   a,
   a:hover,
   a:visited {
       color: #0071bc;
   }

   .legend {
       background-color: #fff;
       border-radius: 3px;
       bottom: 30px;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
       font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
       padding: 10px;
       position: fixed;
       right: 10px;
       z-index: 5;
       /* visibility: hidden; */
       font-family: iranyekan;
       direction: rtl;
   }

   .legend h4 {
       margin: 0 0 10px;
   }

   .circle {
       border-radius: 50%;
   }

   .legend div span {
       display: inline-block;
       height: 20px;
       margin-right: 5px;
       width: 70px;
   }

   #map {
       top: 0;
       height: 100vh;
       width: 100vw;
       position: fixed;
   }

   #mapInset {
       bottom: 50px;
       right: 30px;
       height: 180px;
       width: 250px;
       max-width: 100%;
       position: fixed;
       z-index: 1;
       opacity: 1;
       transition: opacity 0.5s ease-in-out;
       pointer-events: none;
   }

   #mapInset .mapboxgl-ctrl-bottom-left {
       display: none;
   }

   @media (max-width: 500px) {
       #mapInset {
           display: none;
       }
   }

   #header {
    margin: auto;
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 5;
    padding: 2vh 0vh 5vh 0vh;
    color: #fff;
    font-size: 1.5em;
    background-image: url("images/background_D.jpg");
    background-repeat: no-repeat;
    background-size: cover; /* Changed from contain to cover */
    background-position: center;
    font-family: iranyekan;
}

/* Media queries for different screen sizes */
@media (max-width: 768px) {
    #header {
        background-image: url("images/background_D.jpg");
        background-size: cover; /* Adjust as needed */
        background-position: center;
    }
}

@media (max-width: 480px) {
    #header {
        background-image: url("images/background_M.jpg");
        background-size: cover; /* Adjust as needed */
        background-position: center;
    }
}

   #header h1,
   #header h2,
   #header p {
       padding: 2vh 2vw;
       text-align: center;
   }

    #footer {
       width: 100%;
       min-height: 5vh;
       padding-top: 2vh;
       padding-bottom: 2vh;
       text-align: center;
       line-height: 25px;
       font-size: 13px;
       position: relative;
       z-index: 5;
       font-family: iranyekan;

   }

   #features {
       padding-top: 10vh;
       padding-bottom: 10vh;
   }

   .hidden {
       visibility: hidden;
   }

   .centered {
       width: 50vw;
       margin: 0 auto;
   }

   .lefty {
       width: 33vw;
       margin-left: 5vw;
   }

   .righty {
       width: 33vw;
       margin-left: 62vw;
   }

   .fully {
       width: 100%;
       margin: auto;
   }

   .light {
       color: #444;
       background-color: #fafafa;
       direction: rtl;
   }

   .light .h2{
    font-size: 10pt;
    color: #444;
    background-color: #fafafa;
    direction: rtl;
    height: 5pt;
}

   .dark {
       color: #fafafa;
       background-color: #444;
   }

   .step {
       padding-bottom: 50vh;
       /* margin-bottom: 10vh; */
       opacity: 0.25;
   }

   .step.active {
       opacity: 0.9;
   }

   #ninth-chapter {
       opacity: 0.9
   }

   .step div {
       padding: 25px 50px;
       line-height: 25px;
       font-size: 13px;
       font-family: iranyekan;

   }

   .step img {
       width: 100%;
   }

   @media (max-width: 750px) {

       .centered,
       .lefty,
       .righty,
       .fully {
           width: 90vw;
           margin: 0 auto;
       }
   }

   /* Fix issue on mobile browser where scroll breaks  */
   .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
   .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
       touch-action: unset;
   }



   .legend span {
       display: inline-block;
       width: 120px;
       /* Adjust width as needed */
       height: 20px;
       /* Adjust height as needed */
   }

   .most-value {
       background: linear-gradient(to right, #007A00, #7CCB1F, #FFEE82, #FFC271, #F87738, #C2011B);
       margin-left: 5px;
       margin-right: 5px;
   }

   .least-value {
       background: linear-gradient(to right, #C2011B, #F87738, #FFC271, #FFEE82, #7CCB1F, #007A00);
       margin-left: 5px;
       margin-right: 5px;
   }

   .symbology {
       display: flex;
       align-items: center;
   }