body {
    margin: 0;
    word-wrap: break-word;
    hyphens: auto;
    background-color: var(--color--gray-100);
    background-image: none; 
    background-position: top left;
}

.primary-nav__menu-item--level-1 {
  max-width: 15rem;
}

.site-branding {
  background-image: none;
}
/* #header{
  position:fixed;
  top:0;
}
.site-header__inner {
  background:transparent !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
#header-nav{
  background:transparent;
} */
.site-footer {
  background: none;
  color: black;
}

.region--footer_top__inner #block-irfrc-sitebranding {
  height: 30px;
}
/* #header .site-header__inner, .container.site-header__inner__container{
  filter: blur(16px);
  background: transparent;
} */
.page-wrapper {
  margin: 0 auto;
}
.hero-slide{
  max-width:1440px;
  margin:0 auto;
  padding-inline:80px;
}

.hero-slide .swiper-slide {
  position: relative;
}

.view-home-page-slider .swiper-button-next:after,
.view-home-page-slider .swiper-button-prev:after {
  display: none;
}

.hero-slide .slider-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  z-index: 2;
}

.hero-slide .slider-button {
  display: inline-block;
  padding: 13px 24px;
  background: #0069e1;
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

.hero-slide .slider-content .slider-title {
  color: #fff;
  font-family: Marcellus;
  font-weight: 400;
  font-size: 60px;
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.2;
}

.hero-slide .slider-content .slider-subtitle {
  color: #fff;
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 17px;
  text-align: center;
  margin-bottom: 40px;
}

.view-home-page-slider .swiper-pagination-bullet {
  background: #868686;
  height: 8px;
  width: 8px;
  transform: scale(1);
  opacity: 1;
}

.view-home-page-slider .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

h1.page-title {
  display: none;
}

.advancing-section .two-column {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50px;
  padding-inline: 0;
}

.advancing-section .two-column .content-left,
.advancing-section .two-column .content-right {
  width: 48%;
}

.advancing-section .cards-section .content-right {
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.advancing-section .two-column .content-left h2,
.climate-risk .left h2,
.collaboration-section h2 {
  font-family: Marcellus;
  font-weight: 400;
  font-size: 38px;
  color: #191970;
  margin-bottom: 32px;
  line-height: 1.4;
}
.climate-risk .left h2{
  margin-top:0px;
}
.advancing-section .two-column .content-left h2{
  margin-top:0;
}
.advancing-section .two-column .content-left a {
  padding: 13px 24px;
  font-family: IBM Plex Sans;
  font-weight: 500;
  font-size: 17px;
  color: #fff;
  border-radius: 8px;
  background-color: #0069e1;
  display: flex;
  align-items: center;
  text-decoration: none;
  width: fit-content;
  gap: 6px;
}

.advancing-section .two-column .content-left a img {
  max-width: 13px;
  height: auto;
  object-fit: contain;
}

.advancing-section .two-column .content-right p,
.advancing-section .cards-section .info-card h3 {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 20px;
  color: #1e1e1e;
  line-height: 1.2;
}

.advancing-section .cards-section .info-card {
  padding: 16px 24px 16px;
  background-color: #fff3f0;
  border-radius: 16px;
  height: 100%;
}

.advancing-section .cards-section .info-card h3 {
  color: #191970;
  margin:14px 0;
}

.advancing-section .cards-section .info-card p {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 17px;
  color: #1e1e1e99;
  margin-bottom: 0;
}

.collaboration-wrapper {
  padding: 60px 20px 20px;
}

.collaboration-section {
  max-width: 95%;
  margin: 0 auto;
  text-align: center;
}

.collaboration-section h2 {
  margin-bottom: 20px;
}

/* .collaboration-section h3 {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.8px;
  color: #1e1e1e;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.collaboration-section p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
  color: #1e1e1e99;
} */
.advancing-section .cards-section .info-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-content__container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding-inline:64px;
}
.main-content__container .grid-full{
  grid-column-gap: 0;
}
.climate-risk {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.climate-risk .left {
  width: 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
  height: -webkit-fill-available;
}
.climate-risk .right {
  max-width: 600px;
  width: 100%;
  position: relative;
}
.climate-risk .feature-list li{
  padding: 16px 0;
  border-bottom: 0.5px solid #1e1e1e5e;
  border-image: linear-gradient(to right, #1e1e1e5e 50%, #1e1e1e5e 50%) 1;
}
.climate-risk .feature-list {
  list-style: none;
  padding-left: 0;
  margin:0;
  margin-top: 110px;
}

.climate-risk .feature-list li {
  position: relative;
  padding-left: 24px;
}
.climate-risk .feature-list li a{
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color:#1E1E1E5E;
  text-decoration: none;
  margin-left:14px;
}

.climate-risk .feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 20px;
  height: 20px;
  background: url("../tick-inactive.svg") no-repeat center / contain;
  top: 50%;
  transform: translateY(-50%);
  margin-right:10px;
}
.climate-risk .feature-list li.active::before {
  background: url("../tick-active.svg") no-repeat center / contain;
}
.climate-risk .feature-list li.active a{
  opacity: 1;
  color: #191970;
}
.climate-risk .feature-list li.active{
  border-image: linear-gradient(to right, #191970 50%, #1e1e1e5e 50%) 1;
}
.climate-risk .right .image-wrapper {
  position: relative;
}
.climate-risk .right .image-wrapper .image-caption {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%);
  padding: 16px 20px;
  backdrop-filter: blur(28px);
  border-radius: 8px;
  max-width: 552px;
  width: 100%;
  border: 0.5px solid #9999995e;
  margin-block: 0;
}
.collaboration-section h3 {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 30px;
  color: #1e1e1e;
}
.collaboration-section p {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  text-align: center;
  color: #1e1e1e99;
}
#block-irfrc-footerresources .menu--level-1{
  width:200px;
}
.site-footer{
  border-inline-start:none !important;
  background: linear-gradient(to bottom, #ffffff 70%, #E4F1FF 100%);
}
.site-footer__inner.container{
max-width:1440px;
width:100%;
margin:0 auto;
padding-inline:80px;
padding-bottom:0;
}
.site-footer__inner #block-irfrc-copyright,.site-footer__inner #block-irfrc-footer{
  margin-bottom: 16px;
}
.region--footer_top__inner{
width:100%;
display:flex;
align-items:flex-start;
justify-content:space-between;
position:relative;
border-bottom:0.5px solid #00336661;
padding-bottom:30px;
gap:80px;
}
.region--footer_top__inner #block-irfrc-sitebranding{
margin-inline-end:0;
padding-inline:0;
flex:unset;
min-width:0px;
padding-left:14px;
}
#block-irfrc-footerlogosection, #block-irfrc-footernavigation, #block-irfrc-footerresources{
  margin-inline-end: 0px;
}
#block-irfrc-footerresources{
  max-width: fit-content;
}
#block-irfrc-footerlogosection
.block__content{
  width: 350px;
}
#block-irfrc-footerlogosection
.block__content .irfrc-header{
display: flex;
gap:8px;
align-items: center;
margin-top: 20px;
}
#block-irfrc-footerlogosection
.block__content .irfrc-header img{
  max-width: 120px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
#block-irfrc-footerlogosection
.block__content .irfrc-header .irfrc-title{
font-family: IBM Plex Sans;
font-weight: 500;
font-size: 17px;
line-height: 1.2;
color:#1E1E1E;
}
.site-footer__inner p, .site-footer__inner a{
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 17px;
line-height: 1.2;
text-transform: capitalize;
color:#1E1E1E;
text-decoration:none;
outline: none;
}
.site-footer__inner h2.block__title{
font-family: IBM Plex Sans;
font-weight: 600;
font-size: 22px;
color:#003366;
margin-bottom:20px;
line-height: 30px;
}
#block-irfrc-footeraddress .text-content p{
font-weight: 400;
font-style: Regular;
font-size: 17px;
color: #1E1E1EDE;
}
#block-irfrc-footeraddress .text-content a{
color:#1E1E1EDE;
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 17px;
text-decoration:none;
}
.region--footer-bottom{
justify-content:space-between;
}
.region--footer-bottom .menu--level-1{
display:flex;
gap:15px;
}
.region--footer-bottom .menu--level-1 .menu__item--level-1{
position:relative;
}
.region--footer-bottom
.menu--level-1
.menu__item--level-1:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: -10px;
color:#1E1E1E;
}
.region--footer-bottom .menu--level-1 li a,.region--footer-bottom #block-irfrc-copyright .text-content  p{
  font-family: Lato;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
}
#block-irfrc-footernavigation{
  max-width: 120px;
}
#header .container.site-header__inner__container{
max-width:1440px;
width:100%;
margin:0 auto;
padding-inline:80px;
color:#000;
}
#header .header-nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 300px;
}
.header-nav ul.primary-nav__menu--level-1{
gap:20px;
}
.header-nav ul.primary-nav__menu--level-1 a{
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 15px;
color:#1E1E1E;
}
.header-nav ul.primary-nav__menu--level-1 a.primary-nav__menu-link--active-trail{
background-color:#0069E1;
border-radius:100px;
color:#fff;
padding-inline:20px;
}
.header-nav ul.primary-nav__menu--level-1 .primary-nav__menu-link:focus{
  border:none;
}
.header-nav ul.primary-nav__menu--level-1 .primary-nav__menu-link::before{
  border: none;
}
.about-us-banner{
position:relative;
}
.about-us-banner .banner-image img{
width:100%;
}
.about-us-banner .banner-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.about-us-banner .banner-content .banner-title{
font-family: Marcellus;
font-weight: 400;
font-size: 60px;
line-height:1.2;
color:#fff;
margin-bottom:28px;
text-align:center;
}
.about-us-banner .banner-content .banner-subtitle{
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 17px;
line-height: 1.2;
color:#fff;
text-align:center;
}
.view-about-us .views-row{
display:flex;
gap:60px;
align-items:center;
margin-bottom: 60px;
}
.view-about-us .views-field-field-image, .view-about-us .views-field-body{
width:50%;
}
.view-about-us .views-row:nth-child(odd){
flex-direction:row-reverse;
}
.view-about-us .views-row .views-field-body h3, .about-us-principles h2{
font-family: Marcellus;
font-weight: 400;
font-size: 40px;
line-height:1.2;
color:#191970;
margin-bottom:20px;
}
.view-about-us .views-row .views-field-body p{
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 17px;
line-height: 1.2;
color:#1E1E1E99;
}
.about-us-principles{
display:flex;
flex-direction:column;
gap:20px;
align-items:center;
justify-content:center;
margin-top:10px;
}
.about-us-principles .small-title{
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 22px;
line-height: 1.2;
color:#0069E1;
margin-bottom:4px;
}
.about-us-principles h2{
margin-bottom:0;
}
.about-us-principles .section-description{
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 17px;
line-height:1.2;
text-align: center;
color:#1E1E1E99;
max-width:578px;
width:100%
}
.about-us-principles div.principles-grid{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:100px;
}
.about-us-principles .principle-card{
display:flex;
}
.about-us-principles .principle-card:first-child h4{
  width:84%;
}
.about-us-principles .principle-card .principle-icon{
padding:6px;
border-radius:8px;
background-color:#0069E1;
height:fit-content;
margin-right:14px;
}
.about-us-principles .principle-card .principle-icon img{
  height:25px;
  width:70px;
  object-fit: contain;
}
.about-us-principles .principle-card-content h4{
font-family: Marcellus;
font-weight: 400;
font-size: 22px;
line-height: 1.2;
color:#191970;
margin-top:0;
}
.about-us-principles .principle-card-content p{
font-family: IBM Plex Sans;
font-weight: 400;
font-size: 17px;
line-height: 1.2;
color:#1E1E1E99;
}
.about-research-highlight{
  padding:30px 20px;
  background-color:#FFF3F0;
  border-radius:16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  margin:100px 0 80px;
  }
  .about-research-highlight .research-images {
    display:grid;
    grid-template-columns:50% 47%;
    grid-auto-rows:auto;
    gap:20px;
    width:57%;
  }
  .research-images .image-card:first-child(){
  order:1;
  }
  .research-images .image-card:nth-child(2){
  order:3;
  }
  .research-images .image-card.large{
  order:2;
  grid-row:span 2;
  }
  .image-card{
  max-width:356px;
  width:100%;
  object-fit:contain;
  position:relative;
  }
  .image-card.large{
  max-width:336px;
  }
  .image-card  span{
  position:absolute;
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  color:#fff;
  left:20px;
  bottom:16px;
  }
  .about-research-highlight .research-content{
  width:42%;
  }
  .about-research-highlight .research-content .highlight-description{
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color:#1E1E1E;
  margin-bottom:15px;
  }
  .about-research-highlight .research-content .research-points{
  list-style:none;
  margin:0;
  }
  .about-research-highlight .research-content .research-points li{
  display:flex;
  gap:8px;
  }
  .about-research-highlight .research-content .research-points li .check-icon{
  display:block;
  width:20px;
  height:20px;
  }
  .about-research-highlight .research-content .research-points li p{
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-style: Regular;
  font-size: 15px;
  line-height: 1.2;
  color:#1E1E1E99;
  margin-block:10px;
  }
  .about-research-highlight .research-content .research-points div{
    position: relative;
    padding-left:30px;
  }
  .about-research-highlight .research-content .research-points li p strong{
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color:#000000;
  }
  .about-research-highlight .research-content .research-points li p strong::after{
    content:"";
    background: url(../check.svg) no-repeat center;
    position: absolute;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    top: 10px;
    left:0px;
  }
  .about-research-highlight .research-content .research-points div{
  margin-bottom:10px;
  }
  .about-us-bottom-banner{
    position:relative;
    margin-bottom: 80px;
    }
    .about-us-bottom-banner .banner-content{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:16px;
    }
    .about-us-bottom-banner .banner-content .banner-title
    {
    font-family: Marcellus;
    font-weight: 400;
    font-style: Regular;
    font-size: 40px;
    line-height: 1.2;
    text-align: center;
    color:#fff;
    margin-bottom: 10px;
    }
    .about-us-bottom-banner .banner-content .banner-subtitle{
    font-family: IBM Plex Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 17px;
    line-height: 1.2;
    text-align: center;
    color:#fff;
    max-width:530px;
    width:100%;
    margin:4px 0px 20px;
    }
    .about-us-bottom-banner .banner-content .banner-btn{
    padding:13px 24px;
    background:#0069E1;
    font-family: IBM Plex Sans;
    font-weight: 500;
    font-size: 17px;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    padding-right:40px;
    position:relative;
    }
    .about-us-bottom-banner .banner-content .banner-btn::after{
      position: absolute;
      content: "";
      background: url('../Arrow.png') no-repeat center;
      background-size: 15px 15px;
      width: 15px;
      height: 15px;
      top: 54%;
      right: 15px;
      transform: translateY(-50%);
    }
    .about-us-bottom-banner .banner-image img{
      width: 100%;
    }
    /*layout related css*/
    .main-content{
      width:100%;
      margin:0;
    }
    /*climate indices css starts*/
    .climate-index-banner{
      position:relative;
      }
      .climate-index-banner .banner-image img{
      width:100%;
      }
      .climate-index-banner .banner-content{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      }
      .climate-index-banner .banner-content .banner-title{
          color: #fff;
          font-family: Marcellus;
          font-weight: 400;
          font-size: 60px;
          text-align: center;
          margin-bottom: 28px;
          line-height: 1.2;
      }
      .climate-index-banner .banner-content .banner-subtitle{
      color: #fff;
          font-family: IBM Plex Sans;
          font-weight: 400;
          font-size: 17px;
          text-align: center;
          margin-bottom: 40px;
      }
      .quick-navigation ul{
      list-style:none;
      display:flex;
      align-items:center;
      gap:24px;
      margin-bottom:40px;
      margin-left:0px;
      }
      .quick-navigation ul li{
      padding:8px 16px;
      border:0.5px solid #0069E1;
      color:#0069E1;
      background:#fff;
      border-radius:8px;
      }
      .quick-navigation ul li a{
      text-decoration:none;
      color:#0069E1;
      font-family: IBM Plex Sans;
      font-weight: 400;
      font-size: 17px;
      line-height: 1.2;
      outline:none;
      }
      .quick-navigation ul li a:hover{
      color:#0069E199;
      }
      .quick-navigation ul li.is-active{
      background:linear-gradient(to right, #0069E1, #191970);
      border:none;
      }
      .quick-navigation ul li.is-active a{
        color: #fff;
      }
      .graphSection{
      gap:16px;
      }
      .graphSection .filterArea{
        flex:0 0 200px;
      }
      .graphSection .filter-header label{
      font-family: IBM Plex Sans;
      font-weight: 500;
      font-size: 20px;
      line-height: 1.2;
      color:#1E1E1E;

      }
      .graphSection .filter-group:not(:last-child) .filter-header label{
        cursor: pointer;
      }
      .graphSection .filter-header{
      margin-bottom:12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      }
      .graphSection .filter-group:not(:last-child) .filter-header{
        cursor: pointer;
      }
      .graphSection .filter-header img{
        max-width: 16px;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .graphSection .filter-options{
        /* display: none; */
        max-height: 200px;
        overflow: overlay;
      }
      /* .graphSection .filter-options.active{
        display: block;
      } */
      ::-webkit-scrollbar {
        width: 10px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #FAFAFA;
        border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #C1C1C1;
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #888787;
    }
      .graphSection .filter-options label{
      font-family: IBM Plex Sans;
      font-weight: 400;
      font-size: 13px;
      line-height: 1.2;
      color:#000;
      display:flex;
      gap:8px;
      margin-bottom:12px;
      }
      .graphSection .filter-options label input[type="checkbox"]{
      height:16px;
      width:16px;
          border: 1px solid #0069E1 !important;
          border-radius:4px;
          background-color: #0069E1;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          appearance: auto;
      }
      .graphSection .filter-options label input[type="checkbox"]:focus{
        outline:none !important;
      }
      .graphSection .line-separator{
      margin-top:10px;
      }
      .filter-group .search-box{
        display: block;
      margin-bottom:15px;
      padding:0px;
      position:relative;
      /* display: none; */
      }
      /* .filter-group .search-box.box-active{
        display: block;
      } */
      .filter-group .search-box input{
      position:relative;
      padding:6px 10px;
      padding-left:30px;
      border-radius:8px;
      border:0.5px solid #1E1E1E5E;
      font-family: IBM Plex Sans;
      font-weight: 400;
      font-size: 13px;
      color:#1E1E1E;
      }
      .filter-group .search-box input:focus {
        border: 0.5px solid #1E1E1E5E;
        outline: none;
      }
      
      .filter-group .search-box img {
        position: absolute;
        width: 16px;
        height: 16px;
        background: url('../search.png') no-repeat center;
        background-size: contain;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 1;
      }
      .graphSection .filter-options:has(input[type="radio"]){
        position: relative;
        padding:4px;
      }
       .graphSection .filter-options label input[type="radio"]{
      border: none;
      outline:1px solid #0069E1 !important;
      outline-offset: 3px;
      margin-right: 4px;
      }
      /*
      .graphSection #regionFilter label::before, .graphSection #countryFilter label::before{
        position: absolute;
        height: 20px;
        width: 20px;
        border:1px solid #0069E1;
        border-radius: 50%;
      }
      .graphSection #regionFilter label::after, .graphSection #countryFilter label::after{
        position: absolute;
        height: 10px;
        width: 10px;
        background-color:#0069E1;
        border-radius: 50%;
      }
      .graphSection #countryFilter label::before, .graphSection #regionFilter label::before {
        position: absolute;
        height: 20px;
        width: 20px;
        border:1px solid #0069E1;
        border-radius: 50%;
        transform: scale(0);
        transition: all ease 0.2s;
      }
      .graphSection #regionFilter label input[type="radio"]:checked::before{
        transform: scale(1);
      } */
      .graphArea .seleted-options{
        width:fit-content;
        text-align: left;
        margin-left:300px;
        margin-bottom:10px;
      }
      .graphArea #ciChart .highcharts-title{
        font-family: IBM Plex Sans;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    color: #555555;
      }
    /*climate indices css ends*/
    .mobile-nav-button{
      outline:none !important;
    }
    .mobile-nav-button__icon,.mobile-nav-button__icon::after, .mobile-nav-button__icon::before{
      border-top:3px solid #000 !important;
    }
    .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon{
      border-top:none !important;
    }
    @media (max-width:1366px){
      #header .header-nav {
        gap: 200px;
    }

    }
    @media (max-width:1280px){
      #header .container.site-header__inner__container, .hero-slide, .site-footer__inner.container{
      padding-inline:40px;
      }
      .main-content__container {
          padding-inline: 32px;
      }
      #block-irfrc-footerresources .menu--level-1{
        max-width: 150px;
      }
      }
      @media (max-width:1024px){
        .climate-index-banner .banner-content .banner-title{
          font-size: 48px;
        }
        .climate-index-banner .banner-content .banner-subtitle{
          margin-bottom: 20px;
        }
        .climate-index-banner{
          height: 300px;
        }
        .climate-index-banner .banner-image, .climate-index-banner .banner-image img {
          height:100%;
        }
        .header-nav ul.primary-nav__menu--level-1 a{
          padding-inline: 20px;
        }
        #block-irfrc-footerlogosection .block__content .irfrc-header{
          flex-direction: column;
          align-items: flex-start;
          margin-top: 10px;
        }
        #block-irfrc-footerlogosection .block__content{
          width: 220px;
        }
        .region--footer_top__inner{
          gap:40px;
        }
        .about-us-principles .principle-card:first-child h4{
          width:100%;
        }
        .hero-slide .slider-content .slider-subtitle{
          margin-bottom: 20px;
        }
        .mobile-nav-button__label{
          height:20px;
          width: 40px;
          position: static;
          color:#000 !important;
        }
        .climate-risk .feature-list {
          margin-top: 50px;
        }
        .hero-slide .slider-content{
          width:85%;
        }
        .hero-slide .slider-content .slider-title{
          font-size:48px;
          margin-bottom: 20px;
        }
        .advancing-section .two-column .content-left h2, .climate-risk .left h2, .collaboration-section h2{
          font-size: 32px;
        }
        .advancing-section .two-column{
          flex-direction: column;
          gap:16px;
        }
        .advancing-section .two-column .content-left, .advancing-section .two-column .content-right,.advancing-section .cards-section .content-right {
          width: 100%;
        }
        .advancing-section .two-column .content-right p{
          margin:0;
        }
        .advancing-section .two-column .content-left img, .climate-risk .right .image-wrapper img{
          width: 100%;
        }
        .climate-risk{
          gap:20px;
        }
        .climate-risk .left {
          width: 100%;
        }
        .climate-risk .right{
          max-width:unset;
        }
        .climate-risk .right .image-wrapper .image-caption{
          max-width:90%;
        }
        .about-us-bottom-banner .banner-image{
          height:300px;
        }
        .about-us-bottom-banner .banner-image img{
          height:100%;
        }
        .about-us-principles .principle-card .principle-icon img{
          height:20px;
        }
        .about-research-highlight{
          flex-direction: column;
        }
        .about-research-highlight .research-images{
          width:100%;
        }
        .image-card, .image-card.large{
          max-width:unset;
        }
        .image-card img{
          width:100%;
        }
        .about-us-banner .banner-content .banner-title{
          font-size: 48px;
        }
        .about-research-highlight .research-content{
          width:100%;
        }
        .about-research-highlight .research-content .research-points div {
          margin-bottom: 0px;
      }
      .about-us-bottom-banner {
        height: 300px;
      }
      .about-us-bottom-banner .banner-image,.about-us-bottom-banner .banner-image img{
        height: 100%;
      }
      .view-about-us .views-row .views-field-body h3, .about-us-principles h2{
        font-size:32px;
      }
      .view-about-us .views-row .views-field-body h3, .about-us-principles h2{
        gap:20px;
      }
      .view-about-us .views-row{
        margin-bottom: 0;
      }
      .about-us-bottom-banner .banner-content{
        gap:0;
      }
      .hero-slide .slider-image img{
        height:100%;
         border-radius: 16px;
      }
      .climate-risk .left h2{
        margin-bottom: 10px;
      }
      .graphArea .seleted-options{
        margin-left: 0;
        margin: 0 auto;
      }
      }
      @media (max-width:820px){
        .advancing-section .cards-section .info-card{
          height:220px;
        }
        .region--footer-bottom #block-irfrc-copyright{
          width:60%;
        }
        .about-us-principles div.principles-grid{
          gap:60px;
        }
        .about-us-principles .principle-card .principle-icon img{
          height:15px;
        }
        .climate-risk .feature-list{
          margin-top:0px;
        }
        .climate-risk .right .image-wrapper .image-caption{
          padding:8px 10px;
        }
      }
      @media (max-width:769px){
        .hero-slide{
          height:400px;
        }
        .hero-slide .slider-image{
          height:100%
        }
         .hero-slide .slider-image img{
          height:100%;
           object-fit:cover;
           border-radius: 16px;
        }
        .collaboration-wrapper {
          padding: 20px 20px 70px;
      }
    .region--footer_top__inner{
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap:0px;
    }
    #block-irfrc-footernavigation{
      max-width: 100%;
    }
    #block-irfrc-footerresources .menu--level-1 {
      width: 100%;
  }
    #block-irfrc-footernavigation, #block-irfrc-footerresources, #block-irfrc-footeraddress{
      margin-top: 16px;
      width:100%;
      text-align: center;
    }
    .region--footer-bottom {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap:10px;
    }
  .region--footer-bottom #block-irfrc-copyright {
    width: 100%;
}
.region--footer-bottom #block-irfrc-copyright p{
  text-align: center;
}
.view-about-us .views-row, .view-about-us .views-row:nth-child(odd) {
  flex-direction: column;
}
.view-about-us .views-field-field-image, .view-about-us .views-field-body, .view-about-us .views-field-field-image img {
  width:100%;
}
.about-us-principles div.principles-grid{
  flex-direction: column;
  gap:20px;
}
.about-us-principles .principle-card .principle-icon img{
  width:30px;
}
.view-about-us .views-row{
  gap:20px;
  margin-bottom:20px;
}
#block-irfrc-footerresources{
  margin-right:0px;
}
.climate-risk{
  flex-direction: column;
}
.climate-risk .left h2{
  margin-bottom: 0px;
}
#block-irfrc-footerlogosection .block__content .irfrc-header .irfrc-title, #block-irfrc-footerlogosection p{
  text-align: center;
}
#block-irfrc-footerlogosection .block__content{
  width: 100%;
}
#block-irfrc-footerlogosection .block__content .irfrc-header {
  align-items: center;
}
.graphSection .filterArea{
  flex:0 0 160px;
  overflow: auto;
}
.graphSection .filter-header label{
  font-size: 18px;
}
      }
      @media(max-width:576px){
        #header .container.site-header__inner__container, .hero-slide, .site-footer__inner.container{
          padding-inline:20px;
          }
          .main-content__container {
              padding-inline: 12px;
          }
        .hero-slide .slider-content .slider-title {
          font-size: 32px;
          margin-bottom: 16px;
      }
      .hero-slide .slider-content .slider-subtitle{
        font-size:17px;
        margin-bottom: 20px;
      }
        .advancing-section .cards-section .content-right {
            grid-template-columns: 1fr;
            gap:16px;
        }
        .collaboration-section h2 {
       font-size:30px
            
    }
        .collaboration-wrapper{
           
            padding:40px 0px;
        }
        
        .climate-risk .left h2,.advancing-section .two-column .content-left h2 {
        font-size:30px
    }
    .hero-slide{
      height:400px;
    }
    .hero-slide .slider-image{
      height:100%
    }
     .hero-slide .slider-image img{
      height:100%;
       object-fit:cover;
       border-radius: 16px;
    }
    .hero-slide .slider-button{
      font-size: 14px;
      padding:6px 16px;
    }
    .advancing-section .two-column .content-left a{
      font-size: 14px;
    }
.advancing-section .cards-section .info-card {
  height: unset;
}
.about-us-banner .banner-image{
  height:300px;
}
.about-us-banner .banner-image img{
  height:100%;
}
.about-us-banner .banner-content .banner-title, .about-us-bottom-banner .banner-content .banner-title {
  font-size:32px;
}
.about-us-banner .banner-content .banner-subtitle, .about-us-bottom-banner .banner-content .banner-subtitle {
  font-size: 17px;
}
.about-us-banner .banner-content{
  width:85%;
}
.view-about-us .views-row,.view-about-us .views-row:nth-child(odd) {
  flex-direction: column;
}
.view-about-us .views-field-field-image, .view-about-us .views-field-body{
  width:100%;
}
.view-about-us .views-row{
  gap:10px;
}
.about-us-principles div.principles-grid{
  flex-direction: column;
  gap:16px;
}
.about-us-principles .principle-card .principle-icon img{
  width:40px;
  height:15px;
}
.about-us-bottom-banner .banner-content{
  width:90%;
}
.about-us-bottom-banner .banner-content .banner-btn{
  padding:6px 16px;
  padding-right:40px;
  font-size: 14px;
}
.about-us-bottom-banner .banner-content .banner-btn::after {
  top:50%;
}
.about-research-highlight{
  margin:60px 0;
}
.image-card span{
  font-size: 15px;
  left:8px;
  bottom:12px;
}
.about-research-highlight .research-images{
  gap:10px;
}
.site-footer__inner h2.block__title{
  margin-bottom: 10px;
}
/*climate index css starts*/
.climate-index-banner{
  height: 300px;
}
.climate-index-banner .banner-image, .climate-index-banner .banner-image img{
  height: 100%;
}
.climate-index-banner .banner-content .banner-title{
  font-size: 32px;
}
.climate-index-banner .banner-content .banner-subtitle{
  font-size: 15px;
}
.graphArea .seleted-options{
  margin-left: 0px;
  margin:0 auto;
  text-align: center;
}
.graphSection{
  flex-direction: column;
}
.graphSection .graphArea{
  width:100% !important;
}
.quick-navigation ul{
  flex-direction: column;
  gap:12px !important;
  margin-bottom: 20px !important;
  align-items: flex-start !important;
}
.quick-navigation ul li{
  width: 100%;
}
.climate-index-banner .banner-content{
  width:85%;
}
/*climate index css ends*/
.mobile-nav-button{
  width:70px;
  height: 20px;
}
.graphSection .filterArea{
  overflow: visible;
}
    }