/*
    Created on : Dec 16, 2025 10:13:35 am
    Author     : sahan.geesara@ebeyonds.com
*/


:root {
  --number-header-height: 76px;
  --color-gray-option-1: #F2F2F2;
  --color-blue: #293E5C;
  --color-yellow: #FCB813;
  --color-dark-yellow: #976B02;
  --color-white: #fff;
  
  --default-font-size: 15px;
  --default-line-height: 22px;
  
  --font-size-h1: 36px;
  --line-height-h1: 43.2px;
  
  --font-size-h2: 32px;
  --line-height-h2: 38.4px;
  
  --font-size-h3: 26px;
  --line-height-h3: 31.2px;
  
  --font-size-h4: 22px;
  --line-height-h4: 30.8px;
  
  --font-size-h5: 20px;
  --line-height-h5: 28px;
  
  --font-size-h6: 18px;
  --line-height-h6: 25.2px;
}

/* Desktop Sizes */
@media (min-width: 1024px) {
  :root {
    --default-font-size: 15px;
    --default-line-height: 22px;
  
    --font-size-h1: 48px;
    --line-height-h1: 53px;
    
    --font-size-h2: 35px;
    --line-height-h2: 35px;
    
    --font-size-h3: 26px;
    --line-height-h3: 31.5px;
    
    --font-size-h4: 22px;
    --line-height-h4: 28.6px;
    
    --font-size-h5: 20px;
    --line-height-h5: 23px;
    
    --font-size-h6: 18px;
    --line-height-h6: 25.2px;
  }
}

@media (min-width: 1920px) {
  :root {
    --default-font-size: 15px;
    --default-line-height: 22px;
  
    --font-size-h1: 48px;
    --line-height-h1: 53px;
    
    --font-size-h2: 35px;
    --line-height-h2: 35px;
    
    --font-size-h3: 26px;
    --line-height-h3: 31.5px;
    
    --font-size-h4: 22px;
    --line-height-h4: 28.6px;
    
    --font-size-h5: 20px;
    --line-height-h5: 23px;
    
    --font-size-h6: 18px;
    --line-height-h6: 25.2px;
  }
}

/* Typography */
/*p, li {
  font-size: var(--default-font-size);
  line-height: var(--default-line-height);
}*/

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

h3:not(.feature-box-title, .list-title, .x-box-custom-link-title) {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}


.h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

.h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

.h3{
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

.h6 {
  font-size: var(--font-size-h6) !important;
  line-height: var(--line-height-h6) !important;
}


a:hover,
.link:hover,
.link-one:hover,
.content-wrapper a:not(.link-as-button):hover,
label a:hover,
.link.download-link:hover,
.company-information-block .content-wrapper a:hover:not(.link-as-button),
.r2g-xbox-list-component.option-five.variation-one .flex-container a.link:hover {
    color: var(--color-dark-yellow);
}


.r2g-breadcrumb .breadcrumb-nav a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}


.pagination li.active a {
    background: var(--color-blue);
}

.pagination li a:hover {
    border-color: var(--color-blue);
}


.footer-item .primary-button:hover,
.link-as-button.button-six:hover {
    background-color: var(--color-yellow);
    color: var(--color-blue);
}

.slick-arrow:hover {
    color: var(--color-dark-yellow);
}
.r2g-xlist-main-strip.xlist-with-rotator .rotatorElement .slick-arrow:hover {
    color: var(--color-yellow);
}

.content-wrapper .x-box-custom-link-title a:hover {
    color: var(--color-blue) !important;
    background: var(--color-yellow);
    border-color: var(--color-yellow);
}
.content-wrapper .x-box-custom-link-title a:hover:after {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}

header.style-3 #main-menu a:hover,
header.style-3 #main-menu li.active a,
header.style-3 #more-menu-wrapper a:hover,
header.style-3 #more-menu-wrapper li.active a,
header .top-bar-navigation a:hover,
header .r2g-contact-options a:hover,
header.style-3 #main-menu li.mega-menu-open.has-mega-menu a,
.mega-menu-open.has-mega-menu .mega-menu-arrow:before {
    color: var(--color-dark-yellow);
}

.mega-menu ul li>a:hover,
.mega-menu ul li.active>a {
    color: var(--color-dark-yellow);
}


a.link.link-one:hover {
    color: var(--color-yellow);
}