@font-face {
  font-family: "General sans";
  src: url('../GeneralSans_Complete/GeneralSans_Complete/Fonts/TTF/GeneralSans-Variable.ttf') format('woff2');
   font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'karla';
  src: url('../fonts/Karla-Medium.woff2') format('woff2');
   font-display: swap;
}
@font-face {
  font-family: "Noto sans semiMedium";
  src: url('../fonts/NotoSansSinhala_SemiCondensed-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Dm sans';
  src: url('../fonts/DMSans-VariableFont_opsz,wght.woff2') format('woff2');
   font-display: swap;
}
body{
    font-family: 'Dm sans';
}
nav{

  font-family: 'karla';
  font-weight: 500;
  font-size: 11px;
  }
  .nav-btn-one{
    border: solid 2px yellow;
    height: 32px;
    margin-top: 4px;
    margin-left: 5px;
    border-radius: 4px;
    color: yellow;
    background: transparent;
    min-width: 74px;
    font-size: 13px;
  }
  .nav-btn-two{
border: solid 2px yellow;
    height: 30px;
    margin-top: 4px;
    margin-left: 22px;
    border-radius: 4px;
    color: yellow;
    background: transparent;
    min-width: 73px;
    font-size: 13px;
    font-family: "karla", "Noto sans regular";
  }
  .nav-link{
        padding-left:5px;
        font-family: "karla","noto sans semibold";
        
      }
      .nav-item.dropdown {
    list-style: none; /* Removes the marker */
  }
  .fade:not(.show) {
      opacity: 1 !important;
  }
  a{
    text-decoration: none !important;
  }
  #languageSwitcher{
    border: none;
    outline: none;
    padding-left: 0px;
    font-family: "karla", system-ui, "Noto Sans Regular";
    padding-top: 8px;
    color: white;
    font-size: 12px;
    padding-right: 1px;
    margin-top: 3px;
  }
  

  .computer-container{
    display: flex;
      flex-wrap: wrap; /* Allow items to wrap to the next row */
      gap: 10px; /* Space between items */
      width: 100%; /* Make the container take full width */
  }
.btn-main{
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next row */
  gap: 10px; /* Space between items */
  width: 100%; /* Make the container take full width */
  justify-content: center;
  padding: 17px 12px;
  margin-top: 60px;
}


  .icon-right {
  position: absolute !important;
  bottom: -17px;
  left: 41%;
  transform: translateY(-50%);
  color: white;
  font-size: 18px;
}
  .btn{
    border-width: 2px;
    font-family: "General sans","Noto sans semiMedium";
    font-size: 14px;
    width: 215px;
  }
  /* Icon color for clicked items */
  .clicked .icon-right {
    color:#edbc00; /* Yellow arrow when clicked */
  }


  .btn.active {
    background-color: #0d6efd; /* Primary color */
    color: white;
    border-color: #0d6efd;
  }
  .av-small {
    position: relative;
    width: 97%;
    /*overflow: hidden;*/
  /*background-color: rgb(219, 219, 219);*/
  max-width: 900px;
    aspect-ratio: 967/400;

  }
  
  .av-small picture {
  display: block; /* Ensures the picture element behaves as a block for margin */
  margin-bottom: 15px; /* Adjust the value (15px) as needed */
}
  .main-container{
    display: flex;
    justify-content: center;
    margin-top: 14px;
    margin-bottom: 93px;
  }
  .small-ad {
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
  }
  .nav-item a {
    padding-top: 9px;
    text-decoration: none;
    font-family: "karla", system-ui;
    font-size: 13px;
}
  .footer-container{
    background-color:#004346;
  }
  @media(max-width:450px){
    .av-small{
      aspect-ratio: 430/508;
    }
    .main-container{
      margin-top:15px;
      margin-bottom: 85px;
    }
    .btn-main{
      padding-bottom: 10px;
    }

  }
@media(max-width:470px){
.btn-main{
  padding: 17px 3px;
}
.btn{
width: 207px;
}
}
@media(max-width:446px){
.btn-main{
  padding: 17px 3px;
}
.btn{
width: 46%;
}
}