/* Add CSS */

/* Inter Regular */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/InterRegular.woff2') format('woff2'),
       url('../fonts/inter/InterRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans/IBMPlexSansRegular.woff2') format('woff2'),
       url('../fonts/ibm-plex-sans/IBMPlexSansRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/d-din/ibmplexmono-regular-webfont.woff2') format('woff2'),
       url('../fonts/d-din/ibmplexmono-regular-webfont.woff') format('woff');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}

/* Define global variables */
:root {
  --bg-primary: #FFFFFF;
  --bg-accent: #024;
  --text-primary: #333333;
  --text-accent: #FFFFFF;
  --text-secondary:#1A1A1A;
  --highlight: #FFC107;
  --font-family-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-secondary: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 
  --font-family-code: 'IBM Plex Mono', monospace;
}

/* Reset and global styles */
html {
  height: 100%;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

.toolbar-menu .account, .toolbar-menu .account-edit {display: none !important;}

/* Global Reset*/
*, *::before, *::after {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: var(--font-family-primary, system-ui, -apple-system, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary, #333);
  /* background-color: #f8f9fa;  */
  background-color: #f5f5f5;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto; /* Grow, don't shrink, auto basis */
}

/* Typography for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: 700; 
  line-height: 1.3; 
  color: var(--bg-accent); 
  letter-spacing: 0.02em;
}

h1 {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 2rem; 
  line-height: 1.2;
  margin: 0 0 24px;
}
h2 {
  font-size: 1.8rem; 
  line-height: 1.25;
  margin: 0 0 20px;
}
h3 {
  font-size: 1.5rem; 
  line-height: 1.3;
  margin: 0 0 16px;
}
h4 {
  font-size: 1.2rem; 
  line-height: 1.35;
  margin: 0 0 12px;
}
h5, h6 {
  font-size: 0.95rem; 
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6px; }
  h3 { font-size: 1.2px; }
}


#user-login-form, .user-register-form, .user-pass {
    box-shadow: 1px 1px 5px royalblue;
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem 3rem;
}

ul.nav.primary.nav-tabs {
    display: flex;
    justify-content: center;
    --bs-nav-tabs-border-width: 0px;
    --bs-nav-tabs-border-color: #024;
    --bs-nav-tabs-border-radius: 0.375rem;
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-bg: #024;
    border-bottom: 1px solid #024;
    --bs-nav-tabs-link-active-border-color: #024;
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: #333;
    --bs-nav-link-hover-color: #024;
    --bs-nav-link-disabled-color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#user-login-form, .user-register-form .js-form-required.form-required {
    margin-bottom: 0.5rem;
}

#user-login-form, .user-register-form .form-control {
    margin-bottom: 0.5rem;
}

/* Heading with atom */
    .heading-atom {
      display: flex;
      align-items: center;
      gap: 0.5em;
      font-weight: 600;
      margin: 1em 0 0.8em;
    }

    /* Distinct Sublist */
    .r-d-sublist {
      list-style: none;
      padding: 1em 1.5em;
      margin: 1em 0;
      border-left: 4px solid #024;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
  
    .sub-spark {
      margin: 1em 0;
      list-style: none;
    }

    .sub-spark-header {
      display: flex;
      align-items: center;
      gap: 0.5em;
      font-weight: 600;
      font-size: 1rem;
    }

    /*spark html code &#10022;  */
    .icon-spark {
      font-size: 1em; /* inherits heading size */
      color: currentColor;
      flex-shrink: 0;
    }

    .sub-spark p {
      margin: 0.4em 0 0 1.5em; /* indent under title */
      font-size: 0.95rem;
      color: #333;
    }


.heading-icon::before,
    .subheading-icon::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 900; 
      margin-right: 0.25rem; 
      display: inline-block;
    }

    /* Heading icon (fa-atom) */
    .heading-icon::before {
      content: "\f5d2"; 
      color: #024; 
      font-size: 1em; 
      vertical-align: middle; 
    }

    /* Subheading icon (fa-sun) */
    .subheading-icon::before {
      content: "\f185"; 
      font-family: "Font Awesome 6 Free";
      font-weight: 900; 
      color: #024;
      font-size: 1em; 
      vertical-align: middle;
    }

    .subheading-list {
      padding: 1em 1.5em;
      margin: 1em 0;
      border-left: 2px solid #024;
      background: inherit;
      border-radius: 8px;
    }

    .subheading-list {
      margin: 1rem 0;
    }

    .subheading-icon {
        font-weight: bold;
        display: flex;
        align-items: center;
        color: #024;
        margin-bottom: 0.65rem;
    }

p, li, a, button {
  font-family: var(--font-family-primary);
  font-weight: 400;
  line-height: 1.6;
}

p strong {
  font-weight: 700;
  color: inherit;
}

/* Responsive text sizing */
@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.4rem !important; }
  h3 { font-size: 1.2rem !important; }
  p strong { font-size: 1rem !important; }
  .main-content p { font-size: 1rem; };
}

/* blockquote */
blockquote {
  font-family: var(--font-family-primary);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  border-left: 4px solid #025;
  padding: 16px 0 16px 24px;
  margin: 24px 0;
  color: #333333;
}

/* Code snippet */
code, pre {
  font-family: var(--font-family-code);
  font-weight: 400;
  font-size: 14px;
  background-color: #F5F5F5;
  padding: 4px 8px;
  border-radius: 4px;
}
pre {
  padding: 16px;
  overflow-x: auto;
}

.node-container {
            max-width: 100%;
            margin: auto;
            background: #fff;
            padding: 1.2rem 1.75rem;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            min-height: 800px;
        }
        .node-container ul {
            padding-left: 20px;
        }
        .node-container .emoji {
            font-size: 1.2em;
            margin-right: 5px;
        }
        .node-container .image-container {
            float: right;
            margin: 0 0 20px 20px;
            max-width: 300px;
        }
        .node-container .image-container img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
        .node-container .image-container figcaption {
            font-size: 0.9em;
            color: #666;
            text-align: center;
            margin-top: 5px;
            font-weight: 500;
        }
        @media (max-width: 768px) {
            .node-container .image-container {
                float: none;
                margin: 0 auto 20px;
                max-width: 100%;
            }

            .node-container {
              padding: 1rem;
            }
        }


.node__content {
  font-size: 1.075em;
  line-height: 1.5rem;
}

.node__content h3 {
  font-size: 1.5rem;
}

.node__content .field--type-image {
    margin: 0;
}

.node__content .field--name-field-image .colorbox_images {
  padding: 0.5rem;
  border: 1px solid #e9ecef;
}


#main_page {
  background-color: rgba(255, 255, 255, 0.9);
}

#main-wrapper {
    min-height: 800px;
    margin: 0.8rem 0 2rem 0;
}


#mainHeader, .header-wrapper, .megamenu-wraper, #overflowMenu, .banner-wrapper, #footerScrollbarWrapper {
  font-size: 14px;
}

#page-wrapper {
  flex: 1;
}

.container {
  position: relative;
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 1310px;
  padding-right: 15px;
  padding-left: 15px;
}

.displayNone {
  visibility: hidden;
}


/* css for menu bar */

/* Top bar Styling */

#topBar {
  border-bottom: 1px solid #c2c0c1;
  background: #edebe0;
  text-align: right;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-family: "Open-sans", 'Lato', sans-serif;
}

.col-xs-12 {
  padding-top: 0.1em;
}

col-xs-12 {
  width: 100%;
}

.push-right {
  float: right !important;
}

.push-left {
  float: left !important;
}

.textResize {
  margin-right: 1.5em;
}

.textResize #block-iterindia-textresize .changer:hover {
  color: darkorange;
}

.top-nav a.nav-link {
  color: black;
  padding: 5px !important;
  /* margin-top: 5px; */
  font-size: 0.8rem;
  /* font-weight: 550; */
  margin-right: 2.5em;
  font-family: "Open-sans", 'Lato', sans-serif;
}

.top-nav a.nav-link:hover {
  color: cadetblue;
}

ul#accessibilityMenu {
  padding: 0 !important;
}

#accessibility {
  display: flex;
  justify-content: space-between; /* Align items horizontally */
  align-items: center; /* Vertically center the elements */
}

#block-iterindia-textresize #block-iterindia-languageswitcher{
  display: flex;
  gap: 5px; 
}


.skipContent {
  text-decoration: none;
}

ul#accessibilityMenu {
  margin: 0;
  list-style-type: none;
}
#topBar #accessibility ul li a {
  color: #000;
  display: grid;
  align-items: center;
}

.skipContent .m-hide:hover {
  color: darkorange;
}

@media screen and (max-width: 327px) {
  #topbar {
      min-height: 0px;
      height: 0px;
  }
}

/* Custom media queries for responsiveness */
@media (max-width: 768px) {
  #topBar {
    padding: 5px 0; 
  }

  .m-hide {
    display: inline; 
  }

  .m-show {
    display: none; 
  }

  #accessibilityMenu {
    flex-wrap: wrap; 
    justify-content: center; 
  }

  #accessibilityMenu li {
    margin-bottom: 10px; 
  }
}

.iter-india-logo-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.ITER-India_banner {
  font-size: 1.5rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

#navbarNav .nav-item .dropdown-menu li.active>a {
  color: #000;
}

.logoBar {
  padding: 0.2em 0;
}

.logoBar img#logo {
  max-height: 76px;
  max-width: 145px;
  margin-left: 8px;
  margin-bottom: 0;
}

.otherLogos{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.iterMainLogo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.iterMainLogo img {
  width: 7.5rem;
  height: auto;
  padding: 0.4rem 0;
}

@media (max-width: 992px) {
  .iterMainLogo img {
    width: 6.5rem;
    height: auto;
}
}


/* Added on 11 April 2025 */

/* Sticky Navbar */

.menuBar .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 1px;
  padding-bottom: 1px;
}

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Background (slider or video) */
.hero-background {
  width: 100%;
  position: relative;
}

/* Navigation initial styling */
.hero-navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent; 
  z-index: 99;
  transition: background-color 0.3s ease; 
}

/* Menu styling */
.hero-navigation ul.menu {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: flex-end; 
}

.hero-navigation ul.menu a {
  color: #fff; 
  text-decoration: none;
  font-size: 18px;
  padding: 0 15px;
}

/* Sticky navigation styling */
.hero-navigation.sticky, .pageMenuBar.sticky {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  /* z-index: 1000; */
  z-index: 500;
  background-color: #fff; 
  box-shadow: 0 2px 8px rgba(10, 24, 51, 0.1); 
}

#heroNav.sticky .menuBar {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(10, 24, 51, 0.1);
}

/* page nav */

#pageNav {
  min-height: 84px;
}

@media (max-width: 992px) {
  #pageNav {
    min-height: 60px;
}
}

.pageMenuBar .search-container button.search-toggle.btn.btn-primary {
  color: #000;
}

.search-container a {
    color: #333;
}

#heroNav.sticky a {
  color: #000;
}

.hero-navigation .menuBar .region-search-box .search-container button.search-toggle.btn.btn-primary {
  color: #fff;
}

#heroNav.sticky .menuBar .region-search-box .search-container button.search-toggle.btn.btn-primary {
  color: #000;
}

.hero-navigation .menuBar:hover .region-search-box .search-container button.search-toggle.btn.btn-primary {
  color: #000;
}

.pageMenuBar.menuBar .region-search-box .search-container button.search-toggle.btn.btn-primary {
  color: #000;
}

.hero-navigation.sticky ul.menu a {
  color: #fff; 
  text-shadow: none; 
}


/* Responsive */

@media (max-width: 992px) {
  .iterPartnerLogos p {
    font-size: 1em;
  }

  .menuBar .container {
    padding-left: 0 !important;
  }

  .navbar-nav {
    position: absolute;
    background-color: #fff;
    margin-top: 1.3rem;
  }

  .menuBar ul.clearfix.nav.navbar-nav {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    display: block;
    margin-top: 0.5rem;
    padding: 2rem;
  }

  .menuBar .nav-link {
    padding: 1.25rem !important;
  }
}

@media (max-width: 992px) {
  .pageMenuBar .nav__toggle {
    color: #000;
  }
}

@media (max-width: 767px) {
    nav.menu--main {
        padding-bottom: 0 !important; 
    }

  .hero-navigation .menuBar a {
    color: #000;
  }

  .hero-navigation .menuBar .dropdown-item a:hover {
    color: #fff !important;
  }

  ul.dropdown-menu.show {
    text-align: center;
  }

  nav.menu--main {
    margin: 0 !important;
  }

  #heroNav.sticky a {
    color: #000;
    background-color: #fff;
  }
}


@media screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-toggler {
    display: none;
 }
}

@media screen and (max-width: 992px) {
  .iterMainLogo {
    order: 2;
  }
  .search-container {
    order: 3;
  }
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  /* color: rgba(0, 0, 0, 0.55); */
  color: var(--bg-accent);
  background-color: transparent;
  border-radius: 0.375rem;
  transition: box-shadow 0.15s ease-in-out;
}

.menuBar .nav-link {
  display: block;
  padding: 1.9rem;
  text-decoration: none;
  font-size: 0.98rem;
  /* font-family: var(--font-family-semi-bold); */
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-bar .nav-item .dropdown-menu .dropdown-item {
  padding: 0;
  text-wrap: wrap;
}


.menu-bar .nav-item .dropdown-menu .dropdown-item a{
text-decoration: none;
display: block;
font-size: 0.95rem;
color: var(--bg-accent);
padding: 8px 16px;
letter-spacing: 0.02em;
font-family: var(--font-family-primary);
font-weight: 500;
}

.pageMenuBar {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(10, 24, 51, 0.1);
  transition: all 0.2s ease;
}

.hero-navigation .menuBar:hover {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(10, 24, 51, 0.15);
  color: var(--bg-accent);
}

@media(max-width: 992px) {
  .hero-navigation .menuBar{
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(10, 24, 51, 0.15);
    color: var(--bg-accent);
  }
}

.hero-navigation .menuBar {
  background-color: #80808030;
  /* border-bottom: 1px solid #ffffff57; */
  transition: all 0.5s;
}

.hero-navigation .menuBar a {
  color: #fff;
}

.hero-navigation .menuBar:hover a {
  color: var(--bg-accent);
}

nav.navbar.navbar-expand-lg.menu-bar {
  padding: 0;
}

.pageMenuBar .navbar-nav a.nav-link {
  color: var(--bg-accent);
}

.dropdown-menu[data-bs-popper] {
  margin-top: 0;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0px !important;
    padding-right: 0.35rem;
  }
}

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: white;
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none !important;
}

button.navbar-toggler {
  border: none;
}

.menuBar .nav .nav-item {
  margin: 0 0.4rem;
  font-family: var(--font-family-primary);
}

.menuBar .dropdown-item {
  border-top: 0.1rem solid #2121210a;
}

.menuBar .dropdown ul > li:first-of-type {
  border: none;
}

@media (max-width: 992px) {
  .menuBar .nav-item > .nav-link {
    font-size: 1em;
  }

  .menu-bar .nav-item .dropdown-menu .dropdown-item a {
    font-size: 0.82em;
  }
}


@media (min-width: 992px) {
  /* 1) Positioning context for nav links and dropdown menu container */
  .menuBar .nav-item > .nav-link {
    position: relative;
    display: block;
  }

  /* 2) Hidden underline by default */
  .menuBar .nav-item > .nav-link::after {
    content: '';
    position: absolute;
    bottom: 1rem;
    left: -0.2rem;
    width: 100%;
    height: 0.25rem;
    background-color: #024;
    /* background-color: #004A99; */
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    border: none;
  }

  /* 3) Expand on hover*/
  .menuBar .nav-item > .nav-link:hover::after {
    transform: scaleX(1);
  }

  /* 4) Keep underline when dropdown is open */
  .menuBar nav > .navbar-nav > .nav-item:hover > .nav-link::after {
    transform: scaleX(1);
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
      position: absolute;
      /* border-top: 2px solid #c59a10; */
  }

  .navbar-expand-lg .navbar-nav {
    padding-left: 1em;
    flex-direction: row;
  }
}

ul.dropdown-menu {
  /* Bootstrap variable overrides */
  --bs-dropdown-min-width: 16rem;
  --bs-dropdown-padding-x: 1.25rem;
  --bs-dropdown-padding-y: 0.75rem;
  --bs-dropdown-spacer: 0.3rem;
  --bs-dropdown-font-size: 1rem; /* Matches actual font-size below */
  --bs-dropdown-color: #f0f0f0;
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-divider-bg: #444;
  --bs-dropdown-divider-margin-y: 0.75rem;
  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-dropdown-link-color: #dddddd;
  --bs-dropdown-link-hover-color: black;
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-color: black;
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-disabled-color: #6c757d;
  --bs-dropdown-item-padding-x: 1.5rem;
  --bs-dropdown-item-padding-y: 0.75rem;
  --bs-dropdown-header-color: #a9a9a9;
  --bs-dropdown-header-padding-x: 1.25rem;
  --bs-dropdown-header-padding-y: 0.75rem;

  /* Component styling */
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem; /* Matches Bootstrap var */
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
  box-shadow: var(--bs-dropdown-box-shadow);
}



#navbarNav .navbar-nav .nav-item ul.dropdown-menu li a:hover {
  background-color: #024;
  color: #fff;
}

dropdown-item:hover {
  color: var(--bs-dropdown-link-hover-color) !important;
  background-color: #002244 !important;
}

/* default state: bars shown, close hidden */
.navbar-toggler .open-icon  { display: inline-block; }
.navbar-toggler .close-icon { display: none; }

/* when expanded (aria-expanded="true"), swap them */
.navbar-toggler[aria-expanded="true"] .open-icon  { display: none; }
.navbar-toggler[aria-expanded="true"] .close-icon { display: inline-block; }

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  /* color: #333333; */
}



.hero-navigation.sticky .nav__toggle {
  color: #000;
}

.hero-navigation .menuBar:hover .nav__toggle {
  color: #000;
}

/* show menu */
.show-menu {
  opacity: 1;
  top: 3.5rem;
  pointer-events: initial;
}

/* show icon */
.show-icon .nav__toggle-menu {
  opacity: 0;
  transform: rotate(90deg);
}

.show-icon .nav__toggle-close{
  opacity: 1;
  transform: rotate(90deg);
}


form#search-block-form {
  flex-flow: nowrap;
  padding: 0 !important;
}

input#edit-keys {
  border-radius: 50px;
}

@media (max-width: 768px) {
  .logoBar {
    text-align: center;
  }

  .topBar, .menuBar {
    text-align: center;
  }

  .iterMainLogo {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 992px) {
  .col-md-4 {
      width: 33.33333333%;
  }
}

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
      float: left;
  }
}

@media (max-width: 1199px) {
  .header-right {
      padding: 0;
  }
}

@media (max-width: 1199px) {
  .logo .site_logo {
      height: 90px;
  }
}

@media (max-width: 1199px) {
  .header-wrapper {
      padding: 0.4em 0;
  }
}

header-wrapper {
  padding: 10px 0;
}


@media (max-width: 768px) {
  .header-right.hidden-xs {
      display: none !important;
  }
}

@media (max-width: 992px) {
  .G20-Logo {
      display: none !important;
  }

  button.navbar-toggler {
    display: flex;
    justify-content: flex-end;
  }

  .search-container {
    display: none;
  }
}

.sidebar h4 {
  font-size: 1.5rem;
  font-weight: bold;
}

.sidebar .block {
  border-style: solid;
  border-width: 1px;
  padding: 15px 15px;
  margin: 0 0 20px;
}

/* search box */

.search-container {
  position: relative; 
}

.search-container {
  display: flex;
  position: relative;
  top: 0;
  bottom: 0;
  /* z-index: 1000; */
  justify-content: flex-end;
  left: 0;
  right: 0;
  align-items: center;
  padding-right: 0.5rem;
  font-size: 1.2rem;
  color: var(--bg-accent);
}

.search-container .btn:hover {
  background-color: none;
}

.search-input-group.collapse {
  display: none;
  max-width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.search-input-group.expand {
  display: flex;
  position: absolute; /* Positioned relative to .search-container */
  /* top: 100%;  */
  left: -250px;
  right: 20px;
  z-index: 1000; /* Stays above other elements */
  /* background: #004A99;  */
  background: #024;
  padding: 10px;
  /* margin-top: 5px; */
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.search-container .search-input-group input.form-control {
  border-radius: 50px;
}

.search-container .btn:hover {
  background-color: unset;
}

.region-search-box .search-container button.search-toggle.btn.btn-primary, .region-search-box button.btn.btn-primary {
  --bs-btn-color: white;
  --bs-btn-bg: none;
  --bs-btn-border-color: none;
  /* --bs-btn-hover-bg: cadetblue; */
  --bs-btn-hover-border-color: var(--bb-primary-dark);
  --bs-btn-focus-shadow-rgb: 167, 50, 62;
  --bs-btn-active-color: white;
  /* --bs-btn-active-bg: #4b7295; */
  --bs-btn-active-border-color: none;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: none;
  --bs-btn-disabled-bg: none;
  --bs-btn-disabled-border-color: none;
  --bs-btn-hover-color: white;
  border-radius: 50px;
}

.region-search-box .search-container button.search-toggle.btn.btn-primary {
  font-size: 1.1em;
  /* margin: 0.5em; */
  /* color: #000; */
  padding: 1.7rem 0;
}

@media (max-width: 992px) and (min-width: 992px){
  .search-container {
    margin: 5px;
    justify-content: flex-end;
  }
}


/* Added on 03 June 2025 */

/* Search API contents */

.page_search h4 a {
    color: #444;
    text-decoration: none;
}

.search-card-wrapper {
  margin: 0.5rem 0;
  padding: 10px;
  border: 2px solid #024;
}

.views-field.views-field-type, .views-field.views-field-field-date {
    display: inline;
    position: relative;
}

/* .views-field.views-field-field-date {
    margin-left: 0.5rem;
} */

.date_field_icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #b0b0b0;
    font-family: 'Montserrat';
    font-weight: bold;
}

.field--name-field-date, .ii-latest-news-outer .views-field-field-date, .news__list__outer .news__date, .news__and__events__list__outer .news_and_events__date {
  .field__item, .field-content{
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: var(--text-secondary);
    /* color: #6B7280; */
    /* color: #A0AEC0; for dark bg*/
    font-family: var(--font-family-primary);
    font-weight: 500;
  
    i.fa-calendar-days {
      margin-right: 0.4em;
    }
  }
}


.search__content .content_type_and_date {
    display: flex;
    gap: 0.75rem;
    opacity: 0.65;
}

.search__content .title a {
    text-decoration: none;
    color: #222;
    font-size: 1.1rem;
}

/* Custom Search API--- facets styling */

.page_search #sidebar_second {
    margin-top: 3.5rem;
}

.page_search #sidebar_second #block-iterindia-contenttype {
    border: none;
    padding: 0 15px;
    margin: 0;
}

.page_search #sidebar_second #block-iterindia-contenttype .content .facets-widget-links ul {
    list-style-type: none;
    padding: 0;
}

#facets-sidebar .facets-widget-links ul li.facet-item label .facet-item__value {
  text-decoration: none;
  color: var(--bg-accent);
}


#facets-sidebar .facets-widget-links ul li.facet-item label .facet-item__value:hover {
  text-decoration: underline;
  color: #024;
}

.facets_sidebar h2 {
    font-size: 1.5rem;
}

li.facet-item {
    text-decoration: none;
    padding: 0.5rem 0;
    font-size: 1rem;
}

.page_search #sidebar_second .facets_sidebar {
  position: relative;
}

.page_search .facets_sidebar #block-iterindia-contenttype::after {
    content: '';
    width: 1.5px;
    height: 100%;
    background: #024;
    position: absolute;
    top: 0;
    left: 0;
}

/* Latest News Section */

.ii_latest_news .region.region-latest-news {
  margin: 2rem 0;
}


.ii_latest_news .view-content.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.ii_latest_news .views-field-title a {
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 500;
  color: var(--bg-accent);
}

.ii_latest_news .views-field-title a:hover {
  text-decoration: underline;
  color: #024;
}


.ii-latest-news-outer .field-content img {
  /* width: 400px; */
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.ii-latest-news-outer .views-field-title {
    font-weight: 600;
}

.ii_latest_news {
  padding: 2.5rem 0;
}

.ii_news_header {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.71);
  font-size: 2rem;
  position: relative;
  display: inline;
  padding-left: 3px;
}

.ii_news_header:after{
  content: '';
  position: absolute;
  width: 105%;
  left: 5px;
  right: 0;
  bottom: -5px;
  height: 4px;
  background: #E0A803;
}

.ii__latest__news__readmore {
  text-align: center;
}

/* .ii-latest-news-outer .field-content {
  margin: 5px 0;
} */

@media (min-width: 768px) {
  .ii-latest-news-inner-content p{
    margin-bottom: 0;
  }
}

@media (max-width: 1230px) {
  ii-latest-news-outer  {
    margin-bottom: 1rem;
  }
} 

/* Responsive ii news */

@media (min-width: 400px) and (max-width: 992px) {
  .ii-latest-news-outer {
    width: 50% !important;
    font-size: 1rem;
  }
}

@media (max-width: 430px) {
  .ii-latest-news-outer {
    width: 100% !important;
    font-size: 1rem !important;
  }
}

.ii-latest-news-outer .views-field-field-date {
  font-family: verdana, sans-serif;
  /* font-weight: bold; */
  font-size: 0.8em;
  color: #024;
}


.ii-latest-news-outer {
  padding: 0 5px;
  width: 400px;
  height: auto;
  line-height: 1.6rem;
  /* position: relative; */
  margin-bottom: 1.5rem;
}

/* .ii-latest-news-outer img {
  object-fit: cover;
  width: 100%;
  height: 100%;
} */

.news_and_events__content img
 {
    width: 100%;
    height: auto;
}


.field-content.ii-latest-news-inner-content {
  /* padding: 0 6px; */
  line-height: 1.2rem;
  text-align: justify;
  margin: 0.5rem 0 0;
}

.ii-latest-news-inner-content p {
  line-height: 1.4rem;
}



/* ─── SET YOUR BUTTON COLOR HERE ─────────────────────────────────────────── */
:root {
  --btn-color: #024;  /* swap in any color you like! */
}

/* ─── OUTER WRAPPER (CENTERED) ───────────────────────────────────────────── */
.ii__latest__news__readmore {
  display: block;              /* so margin auto works */
  width: fit-content;          /* shrink-to-fit the link */
  margin: 40px auto;           /* centers horizontally, with 40px vertical gap */
  border: 2px solid var(--btn-color);
  border-radius: 4px;
  overflow: hidden;
}

/* ─── LINK & TEXT ─────────────────────────────────────────────────────────── */
.ii_latest_news_readmore {
  display: block;
  position: relative;
  padding: 0.5em 1em;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
}


.ii_latest_news_readmore span {
  position: relative;
  z-index: 1;                  
  color: var(--btn-color);
}

/* ─── FILL LAYER ──────────────────────────────────────────────────────────── */
.ii_latest_news_readmore::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 0;
  background-color: var(--btn-color);
  z-index: 0;
}

/* ─── HOVER: FILL UP + TEXT→WHITE ─────────────────────────────────────────── */
.ii__latest__news__readmore:hover .ii_latest_news_readmore::before {
  animation: fillUp 0.3s forwards ease-out;
}
.ii__latest__news__readmore:hover .ii_latest_news_readmore span {
  animation: textToWhite 0.3s forwards ease-out;
}

/* ─── UNHOVER: EMPTY DOWN + TEXT→Darkblue ────────────────────────────────────── */
.ii__latest__news__readmore:not(:hover) .ii_latest_news_readmore::before {
  animation: fillDown 0.3s forwards ease-in;
}
.ii__latest__news__readmore:not(:hover) .ii_latest_news_readmore span {
  animation: textToDarkblue 0.3s forwards ease-in;
}

/* ─── KEYFRAMES ───────────────────────────────────────────────────────────── */
@keyframes fillUp {
  from { height: 0; }
  to   { height: 100%; }
}
@keyframes fillDown {
  from { height: 100%; }
  to   { height: 0; }
}
@keyframes textToWhite {
  from { color: var(--btn-color); }
  to   { color: #fff; }
}
@keyframes textToDarkblue {
  from { color: #fff; }
  to   { color: var(--btn-color); }
}



/* CSS Slick Slide on Home page */


/* Home Slider Styling */
.homeSlider .slide__content .slide__media {
  height: 100vh;
}

.field-content.home-slider-video {
    height: 100vh;
    width: 100%;
}

.homeSlider .slide__content .slide__media img {
  height: 100vh;
  object-fit: cover;
}

.homeSlider .slide__content, .grid__content {
  max-height: 100vh;
}

.slide__caption a {
text-decoration: none;
color: white;
padding: 5px 15px;
border: 2px solid #fff;
font-family: 'Montserrat', sans-serif;
}

.slide__caption a:hover {
background-color: #fff;
color: #333333;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.6s ease, background-color 0.6s ease;
transform-origin: center;
}


.slick-slide {
    position: relative;
  }

  
.slick .slick-slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
    

.slick__slide video.my-full-viewport-video, .slick__slide .home-slider-images img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.slick__slide .home-slider-contents p{
    position: absolute;
    bottom: 0rem;
    right: 5rem;
    z-index: 999;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.slick__slide .home-slider-contents .slider-info {
    bottom: 10rem !important;
    right: 0rem !important;
    background: var(--highlight);
    color: #000;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 1px 3px 5px #222222c4;
    letter-spacing: 0.05em;
    font-size: 1.1rem;
}

@media(max-width: 778px) {
  .slick__slide .home-slider-contents .slider-info {
    bottom: 8rem !important;
    font-size: 1rem;
    letter-spacing: 0.02em;
  }
}

.slick__slide .home-slider-contents p {
    margin: 0;
    color: #fff;
}

.slick__slide .home-slider-contents p a {
    color: #fff;
    text-decoration: none;
} 

.slick__slide .home-slider-contents p a:hover {
    text-decoration: underline;
    color: #fff;
}


.slick__slide .home-slider-contents .slider_quote {
    position: absolute;
    left: 3rem;
    font-size: 1.1rem;
    color: #fff;
    bottom: 32rem;
    width: 30%;
    padding: 0.3rem;
}

/* Quote styling */
    .slick__slide .home-slider-contents .slider-quote {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #ffffff;
      z-index: 10;
      padding: 10px;
      max-width: 40%;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 15px;
      text-shadow: 
        0 4px 10px rgba(0,0,0,0.9),    
        0 0 12px rgba(0,0,0,0.7);
        }

    @media (max-width: 992px) {
      .slick__slide .home-slider-contents .slider-quote {
        flex-direction: column;
      }

      .slick__slide .home-slider-contents .slider-quote img {
        max-width: 140px; 
        height: 150px;
      }
    }

    .slick__slide .home-slider-contents .slider-quote img {
    max-width: 160px; 
    height: 170px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: scale(0.9);
    animation: fadeInImage 1.5s ease-out forwards;
    }

    .slick__slide .home-slider-contents .slider-quote h2 {
      font-size: 1.2rem;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 0;
      opacity: 0;
      animation: fadeInText 1s ease-in-out forwards;
      animation-delay: 0.2s;
      color: #fff;
      text-shadow: 0 4px 12px rgba(0,0,0,0.95);
    }

    .slick__slide .home-slider-contents .slider-quote p {
      font-size: 1.05rem;
      font-weight: 500;
      font-style: italic;
      position: relative;
      right: 0;
      opacity: 0;
      animation: fadeInText 1s ease-in-out forwards;
      animation-delay: 0.4s;
      padding-top: 0;
      margin-top: 1rem;
    }

    @keyframes fadeIn {
      0% { opacity: 0; transform: translate(-50%, -60%); }
      100% { opacity: 1; transform: translate(-50%, -50%); }
    }

    @keyframes fadeInImage {
      0% { opacity: 0; transform: translateY(-20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInImage {
      0% { opacity: 0; transform: translateY(-20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInText {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .slick__slide .home-slider-contents .slider-quote h2 {
        font-size: 1rem !important;
      }
      .slick__slide .home-slider-contents .slider-quote p {
        font-size: 0.8rem !important;
      }
      .slick__slide .home-slider-contents .slider-quote {
        max-width: 90%;
        padding: 15px;
      }
    }           

/* Added on 24 Feb 2025 */
.slide__caption {
  display: flex;
  justify-content: right;
  position: absolute;
}

.slick__slide .field .field__label {
  display: none;
}

.slick-slider, .slick-list, .slick-track {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh;
}


.slick-slide {
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center;
}

.slick-prev.slick-arrow {
    padding-left: 1.5rem;
}

.slick-next.slick-arrow {
    padding-right: 2rem;
}

.slick-prev, .slick-next {
    font-size: 1.6rem !important;
    color: #f2f2f2 !important;
}

@media (max-width: 768px) {
  .slide__caption {
    display: none;
  }

  .fusion_science_img {
    /* border: 1px solid #e3e3e3; */
    width: 100%;
    /* padding: 0.75rem; */
    }
}

@media (min-width: 768px) {
  .slide--caption--right .slide__caption {
    position: absolute;
    right: 0;
    left: auto;
    bottom: 0.01em;
    /* font-size: 16px; */
  }

  .imgRight {
    float: right;
    margin: 0 0 1.3rem 1.8rem;
    border: 1px solid #e3e3e3;
    padding: 8px;
    max-width: 50%;
    }

  .imgLeft {
    float: left;
    margin: 0 1.2rem 1.2rem 0;
    border: 1px solid #e3e3e3;
    padding: 8px;
    max-width: 50%;
  }  
}

/* Node home slider css */

.home__slider__content .node__content img {
    padding: 0.5rem;
    border: 1px solid #e9ecef;
    width: 800px;
    margin-bottom: 1rem;
}

.home__slider__content .field__items > .field__item {
    display: flex;
    justify-content: center;
}

.fusion_science_img {
    cursor: pointer;
    transition: 0.3s;
}

ul.moreImg {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
}

.moreImg li {
    padding: 0.75rem;
    /* border: 1px solid #e3e3e3;
    margin: 0 1rem; */
}


html.lightbox-active, body.lightbox-active {
      overflow: hidden;
    }

    /* Image wrapper for original images */
    .image-wrapper {
      position: relative;
      display: block;
      max-width: 100%;
      width: 100%;
    }

    .image-wrapper img {
      display: block;
      width: 100%;
      height: auto;
    }

    .entry-content img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
    }

    /* Ensure image is centered in fullscreen mode */
    .image-wrapper:fullscreen,
    .image-wrapper:-webkit-full-screen,
    .image-wrapper:-moz-full-screen,
    .image-wrapper:-ms-fullscreen {
      display: flex;
      align-items: center;
      justify-content: center;
      background: black;
      width: 100%;
      height: 100%;
    }

    .image-wrapper:fullscreen img,
    .image-wrapper:-webkit-full-screen img,
    .image-wrapper:-moz-full-screen img,
    .image-wrapper:-ms-fullscreen img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .image-wrapper:fullscreen{
    display: flex;
    justify-content: center;
    align-items: center;
    }

    /* Buttons on original images */
    .image-download-btn,
    .image-fullscreen-btn {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: none;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.2s ease;
      z-index: 10;
      padding: 8px; /* Larger touch target */
    }

    .image-download-btn:hover,
    .image-fullscreen-btn:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    .image-download-btn:focus,
    .image-fullscreen-btn:focus {
      outline: 2px solid var(--highlight);
      outline-offset: 2px;
    }

    .image-fullscreen-btn {
      top: 10px;
      right: 52px;
    }

    .image-download-btn {
      top: 10px;
      right: 10px;
    }

    .image-wrapper:hover .image-download-btn,
    .image-wrapper:hover .image-fullscreen-btn {
      display: flex;
    }

    /* Lightbox overlay */
    #fusionLightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s ease;
      touch-action: none; /* Prevent iOS scrolling */
    }

    #fusionLightbox.active {
      display: flex;
      opacity: 1;
    }

    /* Lightbox image */
    #fusionLightboxImg {
      max-width: 95vw;
      max-height: 85vh;
      object-fit: contain;
      user-select: none;
      touch-action: none;
    }

    /* Caption */
    #fusionLightboxCaption {
      position: absolute;
      bottom: 20px;
      color: white;
      text-align: center;
      width: 100%;
      max-width: 90%;
      padding: 0 10px;
      box-sizing: border-box;
      font-size: 16px;
      font-family: Arial, sans-serif;
      display: none;
    }

    /* Lightbox button styles */
    #fusionLightboxClose,
    #fusionLightboxPrev,
    #fusionLightboxNext {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    #fusionLightboxClose:hover,
    #fusionLightboxPrev:hover,
    #fusionLightboxNext:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    #fusionLightboxClose:focus,
    #fusionLightboxPrev:focus,
    #fusionLightboxNext:focus {
      outline: 2px solid var(--highlight);
      outline-offset: 2px;
    }

    /* Lightbox button positioning */
    #fusionLightboxClose {
      top: 20px;
      right: 20px;
    }

    #fusionLightboxPrev {
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
    }

    #fusionLightboxNext {
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* Loading spinner */
    .fusionLightboxLoading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
      z-index: 1001;
    }

    .fusionLightboxLoading .spinner {
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top: 4px solid white;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Responsive adjustments */
    @media (max-width: 600px) {
      .image-download-btn,
      .image-fullscreen-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
        padding: 6px;
      }
      .image-fullscreen-btn {
        right: 40px;
      }
      #fusionLightboxClose,
      #fusionLightboxPrev,
      #fusionLightboxNext {
        width: 35px;
        height: 35px;
        font-size: 16px;
        padding: 6px;
      }
      #fusionLightboxCaption {
        font-size: 14px;
        bottom: 10px;
      }
    }

    @media (max-width: 400px) {
      #fusionLightboxImg {
        max-width: 90vw;
        max-height: 80vh;
      }
      #fusionLightboxClose {
        top: 10px;
        right: 10px;
      }
      #fusionLightboxPrev {
        left: 10px;
      }
      #fusionLightboxNext {
        right: 10px;
      }
    }


.slide__description p {
  text-align: center;
  color: #fff !important;
}

.slide__caption {
  position: relative;
}


.slide__description {
  background-color: #21252954;
  color: #fff;
  padding: 10px;
  text-align: center;
  height: 10%;
  width: 150%;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.75rem;
  font-family: 'Montserrat', sans-serif;
}

.slide__caption {
  background-color: inherit !important;
}

/* Intranet page CSS */

#innerMain {
padding: 45px 0;
min-height: 420px;
margin-bottom: 4em;
}

.intra-container {
margin: 0 auto;
width: 100%;
max-width: 1200px;
padding-left: 15px;
padding-right: 15px;
}

.intra-fullcontent {
width: 100%;
border: 0;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline
}

#innerMain .pagetitle {
font-family: SegoeUISemiBold;
color: #00019a;
font-size: 26px;
margin-bottom: 30px;
}

.innerMain h2 {
display: block;
line-height: 26px;
margin-bottom: 20px;
}

.iterIndiaIcons {
padding-left: 0px;
text-align: center;
margin-top: 20px;
}

.iterIndiaIcons li {
margin: 10px 0;
}

.innerMain .iterIndiaIcons li {
list-style-type: none;
}

.intranet-list{
  list-style-type: none;
}

.iterIndiaIcons li a {
  font-size: 18px;
  font-weight: 600;
  border: 1px solid #ddd;
  padding: 30px 15px;
  margin: 0 15px;
  display: block;
  position: relative;
  line-height: 1.333;
  transition: .4s ease-out;
}


.iterIndiaIcons li a {
text-decoration: none;
color: #484848;
}

ul.iterIndiaIcons li .iconImg {
display: block;
margin: 0 auto 20px;
text-align: center
}

.iterIndiaIcons em {
font-style: italic;
}

.iterIndiaIcons li a:hover {
background-color: rgba(128, 128, 128, 0.687);
}

.iterIndiaIcons a {
display: flex;
text-decoration: none;
color: inherit;
max-width: 400px;
position: relative;
padding: 2rem;
box-shadow: inset 0 0 0 3px #06060665, inset -4px -4px 0 6px #ccccccb0;
background-color: #FFF;
cursor: pointer; 
&:before {
    position: absolute; 
    left: 0;
    bottom: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 1, 1, 0.142);
    transform-origin: 0 bottom 0;
    transform: scaleY(0);
    transition: .4s ease-out;
}
&:hover {
    .li {
        color: #FFF;
    }
    &:before {
        transform: scaleY(1);
    }
}
}

@media screen and (max-width: 800px){
ul.iterIndiaIcons li a {
    width: 100%;
}
}


/* Photo Gallery CSS */

.view-photo-gallery .item-list img.image-style-image-gallary {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}


.view-photo-gallery .item-list {
  padding: 0 15px;
}

.view-photo-gallery .item-list ul, .pws-equipment-dev-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: stretch;
  gap: 2rem;
  padding-left: 0;
  list-style: none;
}

@media only screen and (max-width: 767px) {
  .page-photo-gallery .view-photo-gallery .item-list ul li {width: 46%; margin: 20px 2%;}
}

@media only screen and (max-width: 639px) {
  #innerMain .page-title {font-size: 23px;}
  #innerMain {padding: 35px 0;}
}

@media only screen and (max-width: 479px) {
  #innerMain .page-title {font-size: 21px;}
  #innerMain h3 {font-size: 20px;}
  #innerMain h4 {font-size:18px;}
}


/* Visitor Information */

#visitorInfo {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.location-container {
display: flex;
margin-bottom: 20px;
margin-left: 20x;
}

.address-container {
width: 35%;
/* height: 300px; */
padding: 10px;
box-sizing: border-box;
background-color: #f0f0f0;
}

.map-container{
  width: 100%;
  height: 300px;
  left:0;
  overflow: hidden;
 }

.map iframe{
 width: 100% !important;
 height:100% !important;
 left:0;
 top:0;
 position:absolute;
}

/* .table-responsive {
    padding: 0;
} */

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* Media Query for smaller screens to ensure table fits within its container */
@media (max-width: 600px) {
  .table-responsive {
      overflow-x: auto;
  }

  table {
    width: 100%; /* Ensures the table stretches to the container's width */
  }
}

/* Tenders/Career Notice CSS */


thead.theadStyle {
/* background: #004A99; */
background: #024;
}


.node--type-career-notice .node__content .field--label-inline {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}


/* styling to button */

.js-form-item.js-form-type-search.form-type-search.js-form-item-keys.form-item-keys.form-no-label.mb-3 {
margin-bottom: 0px;
margin-top: 0.5rem;
}


#search-block-form {
  display: flex;
  align-content: stretch;
  justify-content: center;
  align-items: flex-end;
}

button#edit-submit {
  margin-left: 0.25em;
}


/* Captcha styling */
input#edit-captcha-response {
  width: 20% !important;
  flex: none;
}

.input-group-prepend {
  margin-right: 3rem;
}


/* About Staff */

.mainStaff {
 display: flex;
 justify-content: center;
}

.staffGroupImage {
    display: flex;
    justify-content: center;
}

.staffRow {
width: 100%;
margin: 0 -15px;
}

.staffCol {
padding-right: 0;
padding-left: 0;
}

.staffData
 {
    padding: 0;
}

.innerRow {
display: inline-block;
/* width: 100%; */
padding: 5px 0;
}

.staff-addr-photo{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.staffGroupImage .image-wrapper {
      text-align: center;
      margin-bottom: 1rem;
    }

.staffGroupImage img {
    padding: 0.35rem;
    /* border: 1px solid #ddd; */
    width: 70%;
    border-radius: 2rem;  
}

@media (max-width: 576px) {
  .staffGroupImage img {
    width: 100%;
  }
}

.innerStyle {
display: inline-block;
font-weight: 700;
color: #024;
padding-right: 15px;
}

.innerRow p {
margin: 0;
margin-bottom: 0px;
display: inline;
letter-spacing: 0.5px;
} 

@media only screen and (max-width: 767px) {
.staffCol {
  width: 100%;
}
}

/********** Table **********/

.path-archive .view-new-tenders .view-content .table-responsive.col {
    padding: 0;
}

.tableOut { 
overflow-y:hidden; 
overflow-x:auto; 
margin-bottom: 25px;
}
table, .tableData{
border-collapse: separate;
border-spacing: 0;
width: 100%; 
empty-cells:show; 
border:none;
border-top:1px solid #E9E9EA;
border-left:1px solid #E9E9EA;}
table table, .tableData table { 
margin:0
}
th,td, .tableData th, .tableData td {
border:none; padding:8px 10px;
border-bottom:1px solid #E9E9EA;border-right:1px solid #E9E9EA;
}
/* table tr:nth-child(even) td{
background-color:#f8f9fa;} */
caption,th,td {
font-weight: normal; background:#fff}
th, .tableData th {
background: #024 !important; color: #fff; text-align:left;}
th a, .tableData th a {
color: #fff; text-decoration:underline;}
th a:hover, .tableData th a:hover {
color: #024;} 
.tableScroll { 
overflow-y:hidden; overflow-x:auto} 

.staffDeptTitleOuter {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    font-weight: bold;
}

/* General table styling */
    .staffData table, .tableOut {
      table-layout: fixed; 
      width: 100%; 
      border-collapse: collapse; 
      box-sizing: border-box; 
      background-color: #fff; 
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    }

    th, td {
      text-align: left; 
      border: 1px solid #ddd; 
      overflow-wrap: break-word; 
    }

    /* Header styling */
    th {
      background-color: #024; /* Vibrant header background */
      color: white; /* High-contrast text */
      font-weight: bold;
    }

    /* Hover effect for rows */
    /* tr:hover {
      background-color: #f5f5f5; 
    } */

    /* Alternating row colors for readability */
    /* tr:nth-child(even) {
      background-color: #f9f9f9;
    } */

    /* Responsive adjustments */

     @media screen and (max-width: 992px) {
      table {
        display: block; /* Enable horizontal scrolling */
        overflow-x: auto; /* Scroll on small screens */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      }

      .tableData th, .tableData td {
        min-width: 200px; /* Minimum column width for readability */
      }

      .view-iter-india-tenders th, .view-iter-india-tenders td {
        min-width: 350px; /* Minimum column width for readability */
      }

      th, td {
        min-width: 200px;
        padding: 8px;
      }


    }

    @media screen and (min-width: 992px) {
      .people-finder-ajax-search-form {
          width: 800px !important;
        }
    }


    @media screen and (max-width: 600px) {
      table {
        display: block; /* Enable horizontal scrolling */
        overflow-x: auto; /* Scroll on small screens */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      }

      th, td {
        min-width: 100px; /* Minimum column width for readability */
        padding: 8px; /* Slightly reduced padding for smaller screens */
      }

      .tableData th, .tableData td {
        min-width: 200px;
      }
    }

    /* Ensure accessibility */
    table[role="grid"] {
      border: 1px solid #ccc; /* Clear table border */
    }

    /* Container for table to handle large datasets */
    .table-container {
      max-width: 1000px; /* Max width for larger screens */
      margin: 20px auto; /* Center table */
      padding: 0 10px; /* Side padding */
    }


table, .table {
  font-weight: 400;
  font-size: 1rem; /* Slightly smaller for dense data */
  line-height: 1.5;
  color: #1A1A1A;
  border-collapse: collapse;
  letter-spacing: 0.02em;
  background-color: #fff;
}
/* Table Styling */
thead th {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 14px;
  color: #FFFFFF;
  background-color: #1A2A44;
  padding: 12px 16px;
  text-align: left;
  text-transform: uppercase;
}
td {
  font-family: var(--font-family-primary);
  font-weight: 400;
  /* font-size: 14px; */
  color: #1A1A1A;
  padding: 12px 16px;
  border-bottom: 1px solid #E0E0E0;
  line-height: 1.5;
}
/* tr:nth-child(even) { background-color: #F9F9F9; } */


/* Some style on basic pages */

#innerMain p {
margin-bottom: 15px;
text-align: justify;
}

/* #page p {
  text-align: justify;
} */

.main-content p {
  text-align: justify;
  letter-spacing: 0.01em;
}

p.text-align-center
 {
    text-align: center;
    margin-top: 1rem;
}


/* people finder */

/* Make the table container responsive */
.search-staff-wrapper {
  width: 70%;
  margin: 0 auto; /* center horizontally */
  max-width: 100%;
}

/* Constrain height and allow scrolling */
#search-staff-results {
  display: block;       
  width: 100%;         
  max-height: 600px;    
  overflow-y: auto;     
  -webkit-overflow-scrolling: touch; 
}

/* Keep the table layout intact */
#search-staff-results table {
  width: 100%;
  border-collapse: collapse;
}

#search-staff-results thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* Hide scrollbar by default */
/* Firefox */
#search-staff-results {
  scrollbar-width: none;
  -ms-overflow-style: none; /* IE 10+ */
  margin-top: 1rem;
}

/* WebKit (Chrome, Safari, Edge) */
#search-staff-results::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Show a colored thumb on hover or focus-within */
#search-staff-results:hover,
#search-staff-results:focus-within {
  scrollbar-width: thin;
}

/* WebKit: set width on hover/focus-within */
#search-staff-results:hover::-webkit-scrollbar,
#search-staff-results:focus-within::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#search-staff-results table {
  table-layout: fixed;       
  width: 100%;               
  max-width: 100%;         
}

#search-staff-results th, td {
  padding: 8px 12px;        
  overflow: hidden;          
  text-overflow: ellipsis;   
}

#search-staff-results th:nth-child(1) { width: 25%; }  /* NAME */
#search-staff-results th:nth-child(2) { width: 20%; }  /* DESIGNATION */
#search-staff-results th:nth-child(3) { width: 20%; }  /* DEPARTMENT */
#search-staff-results th:nth-child(4) { width: 10%; }  /* EXTENSION */
#search-staff-results th:nth-child(5) { width: 25%; }  /* EMAIL */

/* Style the draggable thumb */
#search-staff-results::-webkit-scrollbar-thumb {
  background-color: rgba(0, 34, 68, 0.968);
  border-radius: 4px;
}

#search-staff-results::-webkit-scrollbar-track {
  background: transparent;
}


.people-finder-wrapper .js-form-item.js-form-type-textfield {
    margin-bottom: 1rem;
}

.view-id-news_events form .form-actions {
  align-self: center;
}

form .form-actions {
  align-self: flex-end;
}

.form-control:focus {
    box-shadow: 0 0 0 0.1rem #024;
    background: #fff;
    border-color: #024;
    color: #222;
}

thead {
background-color: #024;
}

.people-finder-wrapper {
    display: flex;
    justify-content: center;
  }


.people-finder-wrapper #edit-filters {
    margin: 0 !important;
}

.people-finder-ajax-search-form label {
  letter-spacing: 0.5px;
}

.btn-check:checked+.btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check)+.btn:active:focus-visible {
  box-shadow: none !important;
}

.people-finder-ajax-search-form .btn-primary, .filterForm .btn-primary {
    border: 1.5px solid #024 !important;
    background-color: #fff;
    color: #024;
    transition: 0.5s;
    letter-spacing: 1px;
    border-radius: 5px;
    --bs-btn-focus-box-shadow: none;
}

.views-exposed-form .filterForm .btn-primary:hover {
  color: #024;
  background-color: #fff;
}

.people-finder-ajax-search-form .btn-primary:hover, .filterForm .btn-primary:hover {
    color: #fff;
    background: #024;
}

.people-finder-ajax-search-form {
  background-color: rgb(255 255 255 / 54%);
  padding: 24px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  width: 100%;
}

.people-finder-ajax-search-form input,
.people-finder-ajax-search-form select,
.people-finder-ajax-search-form button {
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.people-finder-ajax-search-form input:focus,
.people-finder-ajax-search-form select:focus {
  border-color: #1e40af;              
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.22);
  outline: none;
}

#search-staff-results thead th {
    border: 0 !important;
    border-left: 0 !important;
}

#search-staff-results tbody, #search-staff-results td, #search-staff-results tfoot, #search-staff-results th, #search-staff-results thead, #search-staff-results tr {
    border-left: 0;
}

#search-staff-results {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  /* overflow: hidden; */
  border: 2px solid #002244;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

@media (max-width: 481px) {
  .people-finder-ajax-search-form {
    width: 100%;
  }
}

/* What is Fusion-- Sidebar-first */

fusion__science {
font-size: 1rem;
}

.fusion__science__inner {
    line-height: 1.5rem;
    font-size: 0.95rem;
}

.fusion__science__inner a {
    text-decoration: none;
}

.fusion__science__inner a:hover {
    text-decoration: underline;
}

/* views styling */
.views-view-responsive-grid__item {
  background-color: ghostwhite;
  padding: 1rem;
}

/* styles added on 25 september 2024 */
article.node.node--type-events-articles.node--view-mode-teaser.clearfix {
  background-color: #faebd785;
  padding: 2em;
  border-radius: 20px;
  padding-top: 1rem;
}

.mainStaff .innerRow span.innerstyle, span.innerstyle {
  color: #024;
  font-weight: bold;
}

.mainStaff .innerRow span.innerstyle {
  margin-right: 0.4rem;
}
  
  /* Footer */
 

@media only screen and (max-width: 767px) {
  .footerLogo {
      width: 100%;
  }
}

@media only screen and (max-width: 1200px) {
  .footer_bottom {
    font-size: 0.999em;
  }
} 


ul.iter_partner_logo_items {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  justify-content: center;
  align-items: center;
  /* width: 200px; */
  margin: 0;
}

li.iter_partner_logo_item {
  padding: 0.3em;
}

.iter_partner_logo_item img {
    box-shadow: 0px 1px 3px #024;
    width: 70px;
    height: 47px;
    object-fit: cover;
}

.iterPartnerLogos span {
  text-align: center;
  font-size: 1.1rem;
  display: inline-block;
  position: relative;
}

.iterPartnerLogos span:after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: .11rem;
    background: #E0A803;
    top: 1.75rem;
}

.home-footer-address p {
  margin-bottom: 0;
  /* text-align: center; */
}

.topFooterLogo a.ioLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-decoration: none;
}

span.ioLogoName {
  font-size: 1.1rem;
}


.site-footer .block {
  border: 0;
  border-color: rgba(255,255,255,0.1);
}


/* Hide off-screen, show on keyboard focus */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  background: #000;
  color: #fff;
  clip: auto;
  white-space: normal;
  z-index: 10000;
  border-radius: 4px;
  font-size: 1rem;
}


.IO_site_video {
  display: flex;
  justify-content: center;
}

.footer-first {
  background-color: #024;
}

ul.nav.footer-nav {
  display: inline;
  /* list-style-type: circle; */
}

.footer-nav a.nav-link {
  color: #fff;
  padding: 2px 0;
  font-size: 0.9rem;
  line-height: 1.5rem;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.footer-nav a.nav-link:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-first-nav {
  color: #000;
}

.home-footer-address h5 {
  font-size: 1.2rem;
}

.footer_bottom_right h2 {
    color: inherit;
}

.iiAddress p {
  color: #fff;
}

.iterNewsLine {
  position: relative;
  width: 100%;
  text-align: center;
}

.iterNewsLine .text_on_image {
  font-size: 1rem;
  color: #fff;
  position: absolute;
  color: rgb(255, 255, 255);
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
  background-color: rgba(41, 41, 41, 0.8);
  padding: 0.5rem;
  text-align: center;
}

.footer-first .row.py-4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* padding: 0 2.5rem; */
}

@media (min-width: 992px) {
  .footer .footer-top {
  width: 20%;
 }
}

@media (min-width: 992px) {
  .footer .footer-top {
  margin-bottom: 1rem !important;
}
}

.footer-top .footer_menu_heading {
  font-size: 1rem;
  font-weight: 500;
  position: relative;
  display: inline-block;
  color: var(--text-accent);
}


.footer-top .footer_menu_heading:after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: -4px;
  height: .1em;
  background: #8f8f8f;
}




@media (max-width: 554px) { 
  .footer .footer-top {
    justify-content: flex-start;
  }
}

#block-iterindia-otherlinks-menu {
    font-size: 1.2rem;
}

.footer-second {
  padding: 2rem 0;
  border-bottom: 0.2px solid #3333331a;
}

.footer-iter-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-bottom, .footer-bottom .content a, .footer-bottom .content ul, .footer-bottom .content li {
  color: var(--text-secondary);
  font-size: 0.92rem;
  padding: 1rem 0;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
}

.footer_bottom_left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}


/* Ensure the button is hidden by default */
.back-to-top {
  position: fixed;
    bottom: 8px;
    right: 1.1rem;
    width: 55px;
    height: 55px;
    background: #024;
    color: #fff;
    font-size: 24px;
    line-height: 48px;
    z-index: 999;
    display: none;
    opacity: 0;
    transition: transform 0.2s, color 0.2s;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #ffc107 !important;
}

@media (max-width: 551px){
  .back-to-top {
    right: 2rem;
  }
}

.back-to-top:hover {
  transform: scale(1.1);
  color: #fff;
  background-color: #024;
}

/* When the container has class “visible”, make it opaque */
.back-to-top.visible {
  display: block;
  opacity: 1;
}



#block-iterindia-views-block-page-last-updated-block-1, #block-iterindia-visitorcountblock, #block-iterindia-currentdatetimeblock {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 768px) {
  .footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
  }

  ul.nav.firstFooterNav {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  div#block-iterindia-copyright-2 {
    display: flex;
    justify-content: center;
    align-items: center;
 }

 .footer_bottom_left {
  display: flex;
  align-items: center;
  width: 100%;
 }

  div#block-iterindia-views-block-page-last-updated-block-1, div#block-iterindia-visitorcountblock, #block-iterindia-currentdatetimeblock {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 345px) {
  #block-iterindia-currentdatetimeblock {
    display: flex;
    flex-direction: column;
  }
}

#block-iterindia-currentdatetimeblock h2 {
  font-size: 1em !important;
  font-family: inherit;
  margin: 0;
  margin-right: 0.3rem;
  font-weight: normal !important;
}


@media (max-width: 992px) {
  .IO_site_video {
    text-align: center;
  }
}

.firstFooterNav a.nav-link {
  color: inherit;
  padding: 0;
  padding-right: 0.5rem;
}

.firstFooterNav a.nav-link:hover {
  color: #024;
}

/* Views filter Style */

.views-exposed-form .filterForm {
    padding: 1.5em;
    gap: 10px;
    color: #fff;
    background-color: #002244;
    margin-bottom: 1.75rem;
    display: flex !important;
    flex-wrap: wrap;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 5px 0px;
    align-items: center;
}

.views-exposed-form .filterForm #edit-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.view-iter-india-tenders .filterForm div#edit-actions {
    align-self: flex-end;
}

.text-muted {
    color: #fff !important;
    opacity: 1;
}

.region-copyright p.noPara {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* Styling the tenders block */

.newsEventsAutoScroll {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  /* overflow: hidden; */
}
.newsEventsAutoScroll::-webkit-scrollbar {
  display: none; /* WebKit browsers */
}


/* Change file link colors */
.newsEventsInner .file a {
  color: #024;
}

.newsEventsInner .file a:hover {
  color: #024;
}

.newsEventsInner .views-field-title a {
  text-decoration: none;
  font-weight: 600;
}

.newsEventsInner .views-field-title a:hover {
  text-decoration: underline;
}


/* Main Page */

main#content.main-content.col.main-content-wrapper.front-page-content {
  background-image: linear-gradient(rgb(246, 241, 241), #ff99338e);
  animation: gradient-animation 18s ease infinite;
  text-align: center;
}

/* Gallary */

.field.field--name-field-image12.field--type-image.field--label-hidden.field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* Color box Styling */

li.color-box {
  box-shadow: 1px 1px 5px royalblue;
  float: left !important;
  position: relative !important;
  margin-top: 5px !important;
}

.view-photo-gallery .item-list ul li {
  margin: 0;
  padding: 0;
}

.view-photo-gallery .item-list ul li .views-field.views-field-title {
  width: 100%;
  position: absolute;
  bottom: 0;
  /* background: #004A99c9; */
  background-color: #024;
  color: white;
  font-weight: 500;
  font-size: 1em;
  padding: 5px;
}


.color-box {
  text-align: center;
}

.field--name-field-photo .field__label {
  visibility: hidden;
}

.field--type-image img, .field--name-field-user-picture img {
  margin-bottom: 0 !important;
}

.node--type-photo-gallary .node__content.clearfix {
  display: grid;
}

.view-photo-gallery img {
  height: 200px;
  object-fit: cover;
}

.field--name-field-photo .field__items {
  display: grid;
  margin: 0 auto;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}


.field--name-field-photo .field__item {
  display: flex;
  justify-content: center;
}

.field--name-field-photo .field__item .colorbox_images {
  /* width: 100%; */
  width: 350px;
  height: 250px;
  padding: 0.5rem;
  box-shadow: 1px 1px 3px var(--bg-accent);
}

.node--type-photo-gallary .colorbox_images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

ol.breadcrumb {
  font-size: 1em;
  background-color: #024;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
  font-size: 0.9rem;
  padding: 0.5rem !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

a {
  color: #002244c7;
}

a:hover {
  color: #002244;
  text-decoration: none;
}

.messages__item .placeholder {
  background-color: inherit;
  opacity: 1;
}

.breadcrumb-item a {
  color: #fff;
}

.breadcrumb-item a:hover {
  text-decoration: underline !important; 
  color: #fff;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, ">") !important;
}


#block-iterindia-content ul.bulletText {
  line-height: 2rem;
  list-style-type: square;
  color: #333333;
}

#block-iterindia-content .bulletText a:hover {
  text-decoration: none;
}

/* News Styling */

.item-list.newsListWrapper {
  margin-top: 2em;
  padding: 0 !important;
}

li.col-lg-3.col-md-4.col-sm-6.col-xs-12.newsList {
  padding: 15px !important;
}

ul.NewsSection {
  display: flex;
  flex-wrap: wrap;
}

.newsList .newsOuter {
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 100%;
  padding: 15px;
  position: relative;
  min-height: 500px;
}



.view-display-id-page_2 .view-content.row {
    display: inline;
}

.page-event-list-outer .field-content img {
  border: 1px solid #ddd;
  padding: 5px;
}

.page-event-list-outer {
  background-color: #fff;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 5px;
  min-height: 250px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: box-shadow 0.3s ease;
}

.page-event-list-outer:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    /* border: 1px solid #E0A803 */
}

.page-event-list-outer .views-field-title a{
  text-decoration: none;
}


.page-event-list-outer a:hover {
  text-decoration: none;
}

.row {
    --bs-gutter-x: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

/* NewsEvents Styling */


/* NewsBlock */

.newsEventsInner {
  background-color: #f9f9f9;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  position: relative;
}

/* Fix the title position */
.newsEventsInner h2 {
  font-size: 18px;
  font-weight: bold;
  color: #024;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
  position: relative;
  text-align: center;
}


a.btn.btn-sm {
  margin-top: 10px;
  background: #024;
  color: white;
}

a.newsEventButton {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination .active>.page-link, .page-link.active {
    z-index: 3;
    color: #fff;
    background-color: #024;;
    border-color: #024;;
}


.page-link {
    color: #000;
}

.pagination .page-link:focus {
    z-index: 4;
    background-color: rgb(0, 34, 68, 0.89);
    outline: 0;
    box-shadow: 0 0 0 0.01rem rgba(0, 34, 68, 0.9);
    color: #fff;
}


/* Footer Logoss */

#footer-logos {
  border-top: 0.2px solid #3333331a;
  border-bottom: 0.2px solid #3333331a;
}

.footerLogoes img.align-left {
  margin: 1rem;
}

.footerLogoes ul {
  list-style: none;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footerLogoes li {
  display: inline-block;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.footerLogoes img {
  height: 85px;
  width: auto;
}


/* alert message */

.messages__content.container.alert.alert-success.alert-dismissible.fade.show {
  margin-bottom: 0 !important;
}


.field.field--name-field-date01.field--type-datetime.field--label-inline {
  margin-bottom: 0.8rem;
  font-family: 'Open Sans', 'Roboto', 'Lato', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.12rem;
  display: inline-block;
}

.field.field--name-field-date.field--type-datetime.field--label-inline {
  margin: 0.5rem 0;
}

.newsOuter .views-field.views-field-field-date01 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 1.05rem;
}

span.date_label {
  margin-right: 0.1rem;
  font-family: "Open-sans", 'Lato', sans-serif;
}


/* More News Content */

.news__list__outer {
    padding: 0;
}

.news__list__outer .news-item, .news__and__events__list__outer .news_and_events__item{
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 2rem;
  min-height: 250px;
}

.news__list__outer .news-item:hover, .news__and__events__list__outer .news_and_events__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.news__list__outer .news-image, .news__and__events__list__outer .news_and_events__image {
  flex-shrink: 0;
  margin-right: 1.25rem;
  position: relative;
  width: 350px;
  height: 280px;
  overflow: hidden;
  background-color: #fff;
}

.news__list__outer .news-image img, .news__and__events__list__outer .news_and_events__image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;      
  border-radius: 6px;
  object-fit: cover;
}

.news__list__outer .news-content, .news__and__events__list__outer .news_and_events__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 2rem 2rem;
}

/* .news__list__outer .news-content .title, .page-event-list-outer .views-field.views-field-title, .news__and__events__list__outer .news_and_events__content .title {
  margin-top: 0; 
  font-weight: bold;
  color: #222;
} */

.news__list__outer .news-content .title a, .page-event-list-outer .views-field.views-field-title a, .page-event-list-outer .views-field.views-field-title a, .news__and__events__list__outer .news_and_events__content .title a {
  color: #222;
  font-size: 1.2rem;
  margin-top: 0;
  font-weight: bold;
}

.news__list__outer .news-content p, .news__and__events__list__outer .news_and_events__content p
 {
  margin: 0;
  line-height: 1.6;
  margin-top: 0.15em;
}

.news__list__outer .news-content .meta {
  margin-top: auto;
  font-size: 0.875rem;
  color: #777;
  margin-top: 0.75rem;
}

.news__list__outer .news-content a, .news__and__events__list__outer .news_and_events__content a{
  text-decoration: none;
}

.news__list__outer .news-content .views-more-link, .news__and__events__list__outer .news_and_events__content .views-more-link {
  color: rgb(108 117 125);
}

.news__list__outer .news-content a
:hover,  .news__and__events__list__outer .news_and_events__content a:hover{
  color: #024;
}

.news__list__outer .news-content p>a:hover, .news__and__events__list__outer .news_and_events__content p>a:hover{
  text-decoration: underline;
  color: #024;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .news__list__outer .news-item, .news__and__events__list__outer .news_and_events__item {
    flex-direction: column;
  }

  .news__list__outer .news-image, .news__and__events__list__outer .news_and_events__image {
    margin-right: 0;
    margin-bottom: 1rem;
    width: 100%;       
    height: 240px;      
    max-height: none;
  }

  .news__list__outer .news-image img, .news__and__events__list__outer .news_and_events__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* News and  Events node */

.other_inline_img {
  padding: 0.5rem !important;
  border: 1px solid #f5f5f5;
  float: none !important;
}

caption, .caption, figcaption {
  font-family: var(--font-family-primary);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  /* color: #666666; */
  margin-top: 8px;
  text-align: left;
}

.news__content .field--type-image, .events__content .field--type-image, .news_and_events__content .field--type-image{
    display: none;
}

.news_and_events__content .field--type-datetime {
    opacity: 0.6;
    font-weight: bold;
    font-size: 0.95rem;
}

.news__content div > p > img, .news_and_events__content div > p > img {
  padding: 0.5rem;
  float: left;
}

.news_and_events__content .title h3{
    line-height: 1.7rem;
}

/* Event's Styling */

.event-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 1rem 0;
}

/* Wrapping div around each rendered .event-card (from fields template) */
.event-card-wrapper {
  display: flex;
}

.event-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.event-card-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%; 
  overflow: hidden;
}

.event-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card-image .event-card-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: #fff;
}

.event-card-title {
  margin: 0;
  font-size: 1.25rem;
  /* font-weight: 600; */
  line-height: 1.2;
}

.event-card-title a {
  text-decoration: none;
}

.event-card-date {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #aaa;
}

.event-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
  gap: 0.75rem;
  position: relative;
}

.event-card-description {
  flex: 1; /* pushes button to bottom if content is short */
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.8em; /* about 3 lines */
  color: #444;
  line-height: 1.5;
  margin: 0;
}

.event_readmore_link {
    height: 2.2rem;
    width: 100%;
}

.event_readmore_link a {
    position: absolute;
    bottom: 0;
    margin-bottom: 1rem;
}

.event-card-button {
  display: inline-block;
  align-self: flex-start;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 2px solid #024;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

.event-card-button:hover,
.event-card-button:focus {
  background-color: #024;
  color: #fff !important;
}

@media (max-width: 768px) {
  .event-card-grid {
    grid-template-columns: 1fr; /* stack cards on narrow screens */
  }
  .event-card-image {
    padding-top: 50%; /* slightly shorter ratio if preferred */
  }
}

/* About PD ITER-India */

/* Container: flex to put image and content side-by-side */
.pd__iterindia {
  display: flex;
  align-items: flex-start;
}

.pd__iterindia_photo {
  margin-right: 2rem;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.pd__iterindia_photo img {
  max-width: 300px;
  height: 350px;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Content area takes up remaining space */
.pd__iterindia__content {
  flex: 1;
}

.pd_iterindia_content {
  padding: 2rem 2rem;
}

/* Paragraphs: comfortable line-height and spacing */
.pd_iterindia_content p {
  margin-bottom: 1em;
  line-height: 1.6;
  color: #333;
}

/* Name and title block */
.pd_iterindia_name {
  padding: 0 2rem;
}

.pd_iterindia_name h5 {
  margin: 0;
  font-size: 1.2rem;
  color: #222;
}

.pd_iterindia_name span {
  display: block;
  font-size: 0.9em;
  color: #555;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
  .pd__iterindia {
    flex-direction: column;
    text-align: center;
  }

  .pd__iterindia_photo {
    width: 100%;       
    height: 240px;      
    max-height: none;
    margin-bottom: 15px;
  }

  .pd__iterindia_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pd__iterindia__content,
  .pd_iterindia_content p,
  .pd_iterindia_name h5,
  .pd_iterindia_name span {
    text-align: center;
  }
}

.fa-quote-left, .fa-quote-right {
    font-size: 1.5rem;
    opacity: 0.3;
}


/* New style for announcements */

/* Subtle Professional R&D Marquee – Navy & Gold */
.rnd-marquee-container {
  position: relative;
  overflow: hidden;
  background: #024; /* Deep navy base */
  color: #f5f5f5; /* Light gray-white text for readability */
  padding: 0.9rem 1rem;
  height: 3.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  border-bottom: 1px solid #E0A803; /* Subtle gold border */
}

.rnd-marquee-heading {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #E0A803; /* Gold accent for heading */
  color: #024; /* Navy text on gold */
  padding: 0 2rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
}

/* Hide unnecessary Views fields */
.rnd-marquee-container .views-field.views-field-title {
  display: none;
}

.rnd-marquee-track {
  display: flex;
  width: fit-content;
  animation: rnd-marquee-scroll 45s linear infinite;
  padding-left: 16rem;
  align-items: center;
  height: 100%;
  gap: 6rem;
}

.rnd-marquee-content {
  display: flex;
  align-items: center;
  gap: 6rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.1rem;
  font-weight: 500;
}

.rnd-marquee-icon {
  font-size: 1.4rem;
  margin-right: 0.8rem;
  color: #E0A803; /* Gold icon */
}

.rnd-marquee-content p strong {
    color: #fff;
}

.rnd-marquee-content p {
    margin-bottom: 0;
}

.rnd-marquee-content a {
    text-decoration: none;
}

.rnd-marquee-heading .fa-solid.fa-bullhorn {
    margin-left: 0.25rem;
    font-size: 1.1rem;
}

/* Seamless scroll */
@keyframes rnd-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover/focus */
.rnd-marquee-container:hover .rnd-marquee-track,
.rnd-marquee-container:focus-within .rnd-marquee-track {
  animation-play-state: paused;
}

/* Fade edges – using navy for subtle blend */
.rnd-marquee-container::before,
.rnd-marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 12rem;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* .rnd-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, #024, transparent);
}
.rnd-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, #024, transparent);
} */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rnd-marquee-track {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .rnd-marquee-container { height: 4rem; }
  .rnd-marquee-heading { padding: 0 1.4rem; font-size: 0.95rem; }
  .rnd-marquee-track { padding-left: 12rem; gap: 3rem; animation-duration: 55s; }
  .rnd-marquee-content { font-size: 1rem; }
}

/* Added on 01 July 2025 */

.node__content .field--label-inline .field__label {
  font-weight: 600;
  font-size: 1em;
  font-family: var(--font-family-primary);
}

.node__content .field--label-inline .field__label::after{
  content: ':';
}

.node__content .field--label-inline .field__item {
  color: #222;
}

.field--label-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* scroll down button */

#scroll-down-arrow {
  position: absolute;
  bottom: 8px;
  right: 1.1rem;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 24px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}
#scroll-down-arrow:hover {
  background: #024;
  transform: scale(1.1);
}


/* Overview of Indian Deliverables to ITER */

/* Wrapper for the entire content, centers and adds background pattern */
    .iter-india-wrapper {
        position: relative;
        overflow: hidden;
    }
    .iter-india-wrapper::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath d="M50,20 A30,30 0 0,1 80,50 A30,30 0 0,1 50,80 A30,30 0 0,1 20,50 A30,30 0 0,1 50,20" fill="none" stroke="%23002244" stroke-width="0.3" stroke-dasharray="188.5"%3E%3Canimate attributeName="stroke-dashoffset" from="188.5" to="0" dur="4s" repeatCount="indefinite"/%3E%3C/path%3E%3Ccircle cx="30" cy="30" r="8" fill="%2300224444"%3E%3Canimate attributeName="r" values="8;10;8" dur="3s" repeatCount="indefinite"/%3E%3C/circle%3E%3Ccircle cx="70" cy="70" r="10" fill="%2300224444"%3E%3Canimate attributeName="r" values="10;13;10" dur="4s" repeatCount="indefinite"/%3E%3C/circle%3E%3C/svg%3E') no-repeat center;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none; 
}


/* Stactic animation */
/* .iter-india-wrapper::before { 
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath d="M50,20 A30,30 0 0,1 80,50 A30,30 0 0,1 50,80 A30,30 0 0,1 20,50 A30,30 0 0,1 50,20" fill="none" stroke="%23002244" stroke-width="0.3" stroke-dasharray="188.5"/%3E%3Ccircle cx="30" cy="30" r="8" fill="%2300224444"/%3E%3Ccircle cx="70" cy="70" r="10" fill="%2300224444"/%3E%3C/svg%3E') no-repeat center;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
} */

    /* Flexbox container for each deliverable, aligns text and image */
    .iter-india-block {
        display: flex;
        align-items: center;
        margin-bottom: 3rem;
  
        position: relative;
        z-index: 1;
    }
    /* Reversed layout for alternating text/image order */
    .iter-india-block.iter-india-reverse {
        flex-direction: row-reverse;
    }
    /* Text content area with rounded corners for readability */
    .iter-india-text {
        flex: 1;
        padding: 1.5rem;
        background: #f8f9fa;
        border-radius: 15px;
    }
    /* Heading style for deliverable titles */
    .iter-india-text h2 {
        color: #003087;
        font-size: 1.8rem;
        font-weight: 600;
        margin: 0 0 1rem;
    }
    /* Paragraph and list styling for content */
    .iter-india-text p, .iter-india-text ul {
        line-height: 1.8;
        font-size: 1rem;
        color: #222;
    }
    /* List padding for better readability */
    .iter-india-text ul {
        padding-left: 1.5rem;
        margin: 1rem 0;
    }
    /* Image container for deliverable visuals */
    .iter-india-img {
        flex: 1;
        padding: 1.5rem;
    }
    /* Placeholder for images with rounded corners */
    .iter-india-img-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        font-style: italic;
        font-size: 1rem;
    }
    .iter-india-img-placeholder img {
        padding: 5px;
        border: 1px solid #e4e1e1;
        border-radius: 10px;
            
    }
    /* Link styling for "Read More" buttons */
    .iter-india-link, .india-contrib-btn-primary, .btn-primary {
      display: inline-block;
      /* margin-top: 1rem; */
      color: #222;
      text-decoration: none;
      font-weight: 500;
      font-size: 1rem;
      padding: 6px 12px;
      border: 1.5px solid #024;
      border-radius: 5px;
      background: inherit;
      transition: background-color 0.3s, color 0.3s;
  }

    /* Hover effect for links */
    .iter-india-link:hover, .india-contrib-btn-primary:hover, .btn-primary:hover {
        background-color: #002244;
        color: #fff;
        border-color: #024;
        /* background-color: #E6F0FF;
        color: #222;
        border-color: #E6F0FF; */
    }

    .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
      color: #fff;
      background-color: var(--bg-accent);
      border-color: var(--bg-accent);
    }
    /* Responsive design for smaller screens */
    @media (max-width: 768px) {
        .iter-india-block, .iter-india-block.iter-india-reverse {
            flex-direction: column;
        }
        .iter-india-text, .iter-india-img {
            flex: 100%;
        }
    }



/* India's Contribution to ITER */

@keyframes slideIn {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .animate-slideIn {
            animation: slideIn 1s ease-out forwards;
        }
        .animate-fadeIn {
            animation: fadeIn 1.5s ease-in forwards;
        }
        .iter-india-timeline-item {
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .iter-india-timeline-item:hover {
            transform: scale(1.05);
            background-color: #e6e6fa50;
        }
        .iter-india-component-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            padding: 1.5rem !important;
            position: relative;
            cursor: pointer;
            border: 1.5px solid #eee;
        }

        .iter-india-component-card:hover {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            border: 1.5px solid #024;
        }

        .iter-india-component-card .card-img-top {
            height: 250px;
            width: auto;
            object-fit: cover;
        }
        .text-primary {
            color: #333 !important;
        }
        .modal-body ul {
            list-style-type: disc;
            padding-left: 20px;
        }
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .iter-india-component-card h3 {
            color: #024 !important;
            margin-bottom: 1.1rem;
            font-weight: 500 !important;
        }

        .iter-india-timeline-item {
          cursor: pointer;
        }

        /* Ensure cards in a row have the same height */
        .row.equal-height {
            display: flex;
            flex-wrap: wrap;
        }
        .row.equal-height > .col {
            display: flex;
            flex-direction: column;
        }
        .row.equal-height > .col > .iter-india-component-card {
            flex: 1;
            justify-content: center;
        }

        @media screen and (max-width: 992px) {
          .iter-contrib-container .col
          {
              width: 50%;
          }
        }

        @media screen and (max-width: 600px) {
          .iter-contrib-container .col
          {
              width: 100%;
          }
        }

/* New Overview Page */

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 1s ease-out forwards;
        }
        .iter_india_overview .card {
            border: none;
            border-radius: 12px;
            /* background-color: #f8f9fa; */
            background-color: #024 !important;
            color: #fff;
        }

        .iter_india_overview .col-lg-8 {
            padding-right: 0.75rem;
        }

        .join-fusion-div{
            display: flex;
            align-items: center;
            flex-direction: column;
            }

      .iter_india_overview p{
          margin-bottom: 0;
      }

      .indias-contribution .col-lg-8, .indias-contribution .col-lg-4 {
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .iter_india_overview h2 {
        color: var(--highlight);
      }

      .iter_india_overview p {
        color: #fff;
      }

/* Timeline container */
        .timeline {
            position: relative;
            max-width: 100%;
            margin-bottom: 1rem;
            padding: 20px 0;
        }

        /* Vertical line with gradient */
        .timeline::after {
            content: '';
            position: absolute;
            width: 8px;
            background-color: var(--bg-accent);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -4px;
            border-radius: 4px;
            z-index: -1;
        }

        /* Timeline item container */
        .timeline-item {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
            box-sizing: border-box;
            opacity: 0;
            animation: fadeIn 0.8s ease-out forwards;
        }

        /* Alternate sides */
        .timeline-item:nth-child(odd) {
            left: 0;
            text-align: right;
        }

        .timeline-item:nth-child(even) {
            left: 50%;
            text-align: left;
        }

        /* Timeline dot with hover effect */
        .timeline-item::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;    
            background-color: var(--text-accent);
            border: 4px solid var(--bg-accent);
            border-radius: 50%;
            z-index: 1;
            top: 20px;
            transition: transform 0.3s ease, border-color 0.3s ease;
            cursor: pointer;
        }

        .timeline-item:nth-child(odd)::after {
            right: -12px;
        }

        .timeline-item:nth-child(even)::after {
            left: -12px;
        }

        .timeline-item:hover::after {
            transform: scale(1.2);
        }

        /* Timeline content with hover effect */
        .timeline-content {
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .timeline-content:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }

        .timeline-content h3 {
            margin: 0 0 10px 0;
            color: #222;
            font-size: 1.5em;
        }

        .timeline-content p {
            margin: 0;
            color: #555;
            font-size: 1em;
            line-height: 1.5;
            text-align: left;
        }

        .timeline-content ul {
          text-align: left;
        }

        /* Date badge */
        .timeline-content::before {
            content: attr(data-date);
            position: absolute;
            top: -15px;
            left: 20px;
            background-color: var(--highlight);
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 1.1rem;
            font-weight: bold;
        }

        .timeline-item:nth-child(odd) .timeline-content::before {
            left: auto;
            right: 20px;
        }

        /* Fade-in animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .timeline-item:nth-child(odd) {
            animation-delay: 0.2s;
        }

        .timeline-item:nth-child(even) {
            animation-delay: 0.4s;
        }

        /* Responsive design */
        @media screen and (max-width: 768px) {
            .timeline::after {
                left: 31px;
            }

            .timeline-item {
                width: 100%;
                text-align: left;
                padding: 20px 25px 20px 50px;
            }

            .timeline-item:nth-child(odd),
            .timeline-item:nth-child(even) {
                left: 0;
            }

            .timeline-item:nth-child(odd)::after,
            .timeline-item:nth-child(even)::after {
                left: 19px;
                right: auto;
            }

            .timeline-content::before {
                left: 20px;
                right: auto;
            }
        }


        .block-views-blockjourney-of-iter-india-block-1 h2 {
            text-align: center;
            margin-bottom: 2rem;
            font-size: 2rem;
        }

.featured-bottom {
    margin-bottom: 5rem;
}

/* Power Supply custom style*/

.power-supply .timeline::after, .icrf-execution-strategy .timeline::after{
    z-index: 1;
}

.power-supply .timeline-item::after, .icrf-execution-strategy .timeline-item::after
 {
    background-color: var(--bg-accent);
}

.power-supply .timeline-content a {
    text-decoration: none;
}

.power-supply .timeline-content a:hover{
    text-decoration: underline;
}

.ssrf-generator img, .pws-inner-img img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}


.pws-inner-list figure {
    position: relative;
}

.pws-inner-list figcaption {
    position: absolute;
    bottom: 0;
    background: var(--bg-accent);
    color: #fff;
    font-style: normal;
    font-size: 0.8em;
    text-transform: uppercase;
    padding: 0.5em 0.75em;
    width: 100%;
}

.pws-inner-list img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

ul.pws-equipment-dev-list {
    padding-left: 0;
}

.ssrf-generator figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.connector {
    font-size: 40px;
    color: #024;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100px; */
    position: relative;
  }

  .connector:before {
    content: "\f061"; /* Unicode for fas fa-arrow-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .connector:hover:before {
    /* color: #007bff; */
    transform: scale(1.2);
    transition: color 0.3s, transform 0.3s;
  }

.timeline-section h2, .timeline-section p {
    text-align: center;
}

.img-with-textlink {
    position: relative;
}

.installed-pws figure .more-info, .img-with-textlink .text-link .more-info {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0.88em;
    /* font-style: italic; */
    font-weight: 500;
    color: #fff;
    background: rgb(85, 85, 85, 0.5);
    padding: 5px;
}

@media screen and (max-width: 768px) {
  .installed-pws figure .more-info {
    display: none;
  }
}

.installed-pws figure .more-info:hover, .img-with-textlink .text-link .more-info:hover {
    text-decoration: underline;
    color: var(--highlight);
}

@media screen and (max-width: 576px){
    .inner-page-pws .col-lg-8.col-md-6 {
      margin-bottom: 1.5rem;
  }
}


.inner-page-pws .row {
    align-items: center;
    text-align: center;
}


/* Indian Deliverables to ITER */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
}

.image-field, .body-field {
  flex: 1;
  min-width: 0;
}

.image-field {
  max-width: 50%;
  order: 1;
  display: flex;
  justify-content: flex-start;
}

.body-field {
  max-width: 50%;
  order: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-field, .body-field {
    max-width: 100%;
    flex: 100%;
  }
}

@media (max-width: 480px) {
  .flex-container {
    gap: 10px; /* Reduce gap on very small screens */
  }
}


/* Technology Development */

.iter-india-tech-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        .iter-india-tech-bubble-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: clamp(10px, 2vw, 20px);
            padding: 20px;
            max-width: 100%;
        }
        .iter-india-tech-bubble {
            width: clamp(80px, 12vw, 120px);
            height: clamp(80px, 12vw, 120px);
            background: linear-gradient(135deg, #002244, #003366); /* Fallback color */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            font-size: clamp(0.7em, 1.5vw, 0.9em);
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 34, 68, 0.3);
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: clamp(5px, 1vw, 10px);
            line-height: 1.2;
            min-height: 0;
            background-size: cover;
            background-position: center;
        }
        .iter-india-tech-bubble::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background: rgba(0, 34, 68, 0.5);  */
            z-index: 1;
            transition: background 0.3s ease;
        }
        .iter-india-tech-bubble:hover::before {
            background: rgba(0, 34, 68, 0.3); /* Lighter overlay on hover */
        }
        .iter-india-tech-bubble:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 15px rgba(0, 34, 68, 0.4);
        }
        .iter-india-tech-bubble:active {
            transform: scale(0.98);
        }
        .iter-india-tech-bubble span {
            position: relative;
            z-index: 2; /* Ensure text is above overlay */
        }
        .iter-india-tech-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 34, 68, 0.7);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .iter-india-tech-modal-content {
            background: white;
            border-radius: 10px;
            padding: clamp(15px, 3vw, 20px);
            max-width: 90vw;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 34, 68, 0.2);
            width: 60%;
        }
        .iter-india-tech-modal-content h3 {
            color: #002244;
            margin-top: 0;
            font-size: clamp(1.1em, 2.5vw, 1.3em);
        }
        .iter-india-tech-modal-content p {
            margin: 10px 0;
            color: #555;
            font-size: clamp(0.85em, 1.8vw, 0.95em);
        }
        .iter-india-tech-modal-content ul {
            padding-left: 20px;
            margin: 10px 0;
        }
        .iter-india-tech-modal-content li {
            margin-bottom: 8px;
            color: #666;
            font-size: clamp(0.85em, 1.8vw, 0.95em);
        }
        .iter-india-tech-close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5em;
            cursor: pointer;
            color: #002244;
        }
        .iter-india-tech-close-btn:hover {
            color: #003366;
        }
        @media (max-width: 768px) {
            .iter-india-tech-bubble-container {
                gap: 15px;
                padding: 10px;
            }
            .iter-india-tech-bubble {
                font-size: 0.8em;
                line-height: 1.1;
                width: 130px;
                height: 130px;
            }
            .iter-india-tech-modal {
                padding: 10px;
            }
            .iter-india-tech-modal-content {
                width: 95vw;
                max-height: 85vh;
            }
        }
        @media (max-width: 480px) {
            .iter-india-tech-bubble-container {
                gap: 10px;
                padding: 5px;
            }
            .iter-india-tech-bubble {
                width: 70px;
                height: 70px;
                font-size: 0.7em;
            }
            .iter-india-tech-modal-content {
                padding: 10px;
                border-radius: 8px;
            }
        }
        @media (min-width: 1200px) {
            .iter-india-tech-bubble-container {
                gap: 25px;
            }
            .iter-india-tech-bubble {
                width: 140px;
                height: 140px;
                font-size: 1em;
            }
        }

/* -------------------------------------------------
   Bubble container
   ------------------------------------------------- */
.iter-india-tech-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    padding: 2rem;
}

/* -------------------------------------------------
   Single bubble + caption
   ------------------------------------------------- */
.iter-india-tech-bubble {
    position: relative;
    width: 180px;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.iter-india-tech-bubble:hover {
    transform: scale(1.08);
}

/* Caption (title) placed **under** the circle */
.iter-india-tech-bubble span {
    display: block;
    margin-top: .75rem;
    text-align: center;
    font-weight: 600;
    font-size: .95rem;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------
   Modal (only minor tweaks)
   ------------------------------------------------- */
.iter-india-tech-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.iter-india-tech-modal .modal-content {
    background: #fff;
    max-width: 560px;
    width: 100%;
    padding: 1.5rem;
    border-radius: .5rem;
    position: relative;
}

.iter-india-tech-modal .close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #555;
}

.iter-india-tech-bubble-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: fit-content;
}

.iter-india-tech-bubble {
    width: 180px;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    position: relative;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.iter-india-tech-bubble:hover {
    transform: scale(1.05);
}

.iter-india-tech-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 10;
    margin-bottom: 8px;
    max-width: 300px;
    text-align: center;
}

.iter-india-tech-bubble:hover .iter-india-tech-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Arrow for tooltip */
.iter-india-tech-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
}

.iter-india-tech-caption {
    margin-top: 12px;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
    color: #333;
    max-width: 140px;
    word-wrap: break-word;
}

.placeholder {
  background-color: inherit;
}

/* Diagnostics R & D page */

.diag_img {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.diag_img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.diag-img-para .row.row-1, .diag-img-para .row.row-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.diag-img-para img.fusion_science_img.col-2-img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.diag-img-para p.cxrs_para {
    padding: 0.5rem;
    background-color: aliceblue;
    text-align: center;
}

.diag-img-para .col.col--2, .diag-img-para .col--1 {
    text-align: center;
}

.diag-img-para  .row-2 .col--1 img.fusion_science_img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.diag-img-para  p.diag-cxrs-para {
    text-align: center;
    font-weight: 600;
}

.diag-img-para .col.col--1 {
    display: flex;
    justify-content: center;
    align-items: center;
}



/* TimeLine New Style */

.paragraph.paragraph--type--timeline {
    margin-top: 0.5rem;
}

.iter-timeline {
  position: relative;
  max-width: 1200px;
  /* margin: 20px auto; */
  margin-bottom: 10rem;
  padding: 10px 0;
}

/* Central vertical line */
.iter-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #0024;
  transform: translateX(-50%);
  z-index: 1;
}

/* Parent fields */
.iter-timeline__section-title {
  text-align: center;
  font-size: 2.8rem;
  color: #024;
  margin-bottom: 0;
}

.iter-timeline__intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 20px;
  font-size: 1.2rem;
  color: #0024;
  line-height: 1.8;
}

/* Target the field__item siblings for nth-child */
.iter-timeline .field__item {
  position: relative;
  margin-bottom: 100px;
  clear: both;
}

/* Circle marker - always centered on line */
.iter-timeline .field__item .iter-timeline__marker {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background: #FFC107;
  border: 8px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #0024;
  z-index: 2;
  transition: all 0.3s ease;
}

/* Content card - base styles */
.iter-timeline .field__item .iter-timeline__content {
  position: relative;
  width: 45%;
  background: white;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(0, 36, 0, 0.12);
  transition: all 0.3s ease;
}

/* Alternating left/right via nth-child on field__item */
.iter-timeline .field__item:nth-child(odd) .iter-timeline__content {
  float: left;
  margin-right: 5%;
  margin-right: auto;
  text-align: left;
}

.iter-timeline .field__item:nth-child(even) .iter-timeline__content {
  float: right;
  margin-left: 5%;
  margin-left: auto;
  text-align: left;
}

/* Hover effects on field__item */
.iter-timeline .field__item:hover .iter-timeline__content {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 36, 0, 0.18);
}

.iter-timeline .field__item:hover .iter-timeline__marker {
  transform: translateX(-50%) scale(1.2);
  box-shadow: 0 0 0 6px #0024, 0 8px 16px rgba(0, 36, 0, 0.25);
}

/* Year in card */
.iter-timeline__year {
    font-size: 1.5rem;
    font-weight: 800;
    color: #024;
    margin-bottom: 0.5rem;
}

.iter-timeline__year:before
 {
    content: '';
    position: absolute;
    width: 6%;
    height: 4px;
    background: #FFC107;
    z-index: 1;
    transition: background 0.3s ease;
    top: 75px;
    left: 72px;
}

/* Body text */
.iter-timeline__body {
  /* color: #0024; */
  font-size: 1.15rem;
  line-height: 1.8;
  margin: 0;
}

.iter-timeline__body a {
    text-decoration: none;
}

.iter-timeline__body a:hover {
    text-decoration: underline;
}

.iter-timeline .field__item:hover .iter-timeline__content::before {
  background: #000;
}

/* Responsive: Single-sided on mobile */
@media (max-width: 992px) {
  .iter-timeline::before {
    left: 40px;
    transform: none;
  }

  .iter-timeline {
    margin-bottom: 2rem;
  }

  .iter-timeline .field__item .iter-timeline__marker {
    left: 20px;
    transform: none;
  }

  .iter-timeline .field__item:nth-child(odd) .iter-timeline__content,
  .iter-timeline .field__item:nth-child(even) .iter-timeline__content {
    float: none !important;
    width: calc(100% - 100px);
    margin-left: 80px !important;
    margin-right: 0 !important;
    text-align: left;
  }

  .iter-timeline .field__item .iter-timeline__content::before {
    display: none; /* Cleaner on mobile */
  }
}

/* R & D pages */

.section-heading {
    margin-top: 2rem;
}


.field.field--name-field-images-with-caption-conten.field--type-entity-reference-revisions.field--label-hidden.field__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust minmax for desired min width */
    gap: 24px; /* Space between items */
    margin: 20px 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

/* Ensure each image with caption fits nicely */
/* .image-with-caption {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
} */

/* .image-with-caption:hover {
  transform: translateY(-4px);
} */

.image-with-caption img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* .image-with-caption img {
  width: 380px;
  height: 280px;
  object-fit: fill;
} */

.image-with-caption figcaption, .field--name-field-image-caption {
  /* padding: 16px; */
  /* background: #f9f9f9; */
  /* font-style: italic; */
  color: #555;
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 14.4px;
}

.paragraph .field--name-field-image-1 img {
    width: 100%;
}

/* Optional: Single column on very small screens */
@media (max-width: 480px) {
  .image-caption-grid {
    grid-template-columns: 1fr;
  }
}