/**
 * Theme Name: SPG
 * Theme URI: [Your Theme URL, if available]
 * Description: A child theme for Divi. This theme is used for custom modifications and enhancements on top of the Divi parent theme.
 * Author: Sourena Gelareh
 * Author URI: 
 * Template: Divi
 * Version: 1.0.0
 * License: Commercial License - All rights reserved
 */
  
/* Add your custom styles below */
@font-face {
    font-family: 'ETmodules';
    src: url('../Divi/core/admin/fonts/all/modules.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Bootstrap Icons';
    src: url('./assets/vendor/bootstrap-icons.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    src: url('./assets/vendor/fontawesome/fa-solid-900.woff2') format('woff2');
    font-display: swap;
}

/* ============================================================================== */
/* ================================HERO========================================== */
/* ============================================================================== */

/* UPDATED: Force hero section to cover full viewport height */
#hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: 100vh !important;
    height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    /* padding: 80px 0 0 0 !important; */
    padding: 80px !important;


}
/* Ensure hero content is above any background and centered */
#hero .container {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Make sure the row takes full height and centers content */
#hero .container .row {
    width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
    align-items: center !important;
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    #hero {
        min-height: 100vh !important;
        height: 100vh !important;
        padding: 20px 0 !important;
    }
    
    #hero .container {
        padding: 0 20px !important;
    }
}

@media (max-width: 768px) {
    #hero .container {
        padding: 0 15px !important;
    }
}

/* Ensure sections below hero don't overlap and are visible */
#homepage-content > section:not(#hero),
#divi-content-area {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: auto !important;
}


/* Ensure hero is the first thing visible */
#hero.hero.section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Polygonizr canvas positioning for full coverage */
#hero canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/*
 * This media query targets screens up to 991px wide,
 * which covers both mobile phones and tablets.
 */
/* Media query for mobile devices */
@media (max-width: 991px) {
    /* Main hero text styling */
    #hero h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    #hero h2 {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Styling for the list of links on mobile */
    .circle-list {
        list-style: none !important;
        margin-top: 5px !important;
    }

    /* Styling for each individual link */
    .circle-list a {
        font-size: 12px !important;
        margin: 0 !important;
        padding: 5px 0 !important;
        font-weight: normal !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: white !important;
        text-decoration: none;
    }
    
    /* Style for the icons within the links */
    .circle-list a i {
        margin-right: 8px;
        font-size: 16px;
    }

    /* Change color on hover for both the icon and text */
    .circle-list a:hover {
        color: #FFD700 !important;
    }

    /* 'NEW' badge styling */
    .circle-list a span {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }
} 


/* For screens between 992px and 1200px (e.g., Tablets and small desktops) */
@media (max-width: 1200px) {
  #hero h1 {
    font-size: 38px !important;
  }
  #hero h2 {
    font-size: 18px !important;
  }
}

/* For screens between 768px and 991px (e.g., Tablets in portrait) */
@media (max-width: 991px) {
  #hero {
      min-height: 100vh !important;
      height: 100vh !important;
      padding: 50px 0 !important; /* Adjust this value for mobile phones */
  }
    /* #hero h1 {
    font-size: 32px !important;
  }
  #hero h2 {
    font-size: 16px !important;
  } */
  .circle-list a {
    font-size: 14px !important;
  }
}

/* For screens under 767px (e.g., Mobile phones) */
@media (max-width: 767px) {
  #hero h1 {
    font-size: 32px !important;
  }
  #hero h2 {
    font-size: 16px !important;
  }
  .circle-list a {
    font-size: 12px !important;
  }
}

/* Hero circle labels: same behavior (no underline until hover) */
.home .circle-container .label a {
  color: #FFFFFF !important;
  text-decoration: none;
  /*font-weight: 600;*/
}


/* Reserve space for hero and header to avoid jumps */
#hero { min-height: 420px; }      /* adjust to your actual hero height */
#main-header, .et_menu_container { min-height: 80px; }

@media (max-width: 767px){
  .circle-list a { padding:12px 16px; display:inline-block; }
}


/* ============================================================================== */
/* ================================ICON========================================== */
/* ============================================================================== */


/* Styling for the desktop icons */
.circle-container a i {
    font-size: 30px;
    line-height: 1;
    transition: all 0.3s ease;
}

/* Assigning the specific colors to each icon */
.circle-container:nth-of-type(1) a i {
    color: rgb(255, 215, 0); /* AI Integration: Gold */
}
.circle-container:nth-of-type(2) a i {
    color: #004fa7; /* Prescriptive Analytics: Dark Blue */
}
.circle-container:nth-of-type(3) a i {
    color: #00b8ff; /* Predictive Maintenance: Light Blue */
}
.circle-container:nth-of-type(4) a i {
    color: #0097e1; /* Intelligent Healthcare Logistics: Medium Blue */
}
.circle-container:nth-of-type(5) a i {
    color: #00ddff; /* Mobility and Logistics: Bright Blue */
}
.circle-container:nth-of-type(6) a i {
    color: #092b80; /* Railway Predictive Maintenance: Darker Blue */
}
.circle-container:nth-of-type(7) a i {
    color: #6699CC; /* Corrosion Analytics: Light Blue */
}

/* Add hover effect to the icons on desktop */
.circle-container a i:hover {
    color: white !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                 0 0 20px rgba(255, 255, 255, 0.6),
                 0 0 30px rgba(255, 255, 255, 0.4);
}



/* ============================================================================== */
/* ================================BADGE========================================== */
/* ============================================================================== */


/* High-contrast NEW badge (desktop + mobile) */
.badge-new,
.circle-list a span {                 /* your mobile list badge */
  background: #B00020;                /* darker red => passes WCAG with white */
  color: #fff;
  font-size: 13px;                    /* was 11px */
  font-weight: 700;
  padding: 2px 8px;                   /* larger pill */
  border-radius: 10px;
  line-height: 1.2;
  display: inline-block;
  min-height: fit-content;
  max-width: fit-content; /* Prevent it from stretching beyond its content */

}


.home .circle-container .label a:hover,
.home .circle-container .label a:focus {
  color: #D7B400 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}



/* Label hover: slightly darker gold for better contrast than #FFD700 */
.home .circle-container .label a:hover {
  color: #D7B400 !important;
}





.home .circle-container .label a {
  color: white !important;
  text-decoration: none !important;
}

.home .circle-container .label a:hover {
  color: #FFD700 !important;
  text-decoration: none !important;
}
.circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
    position: relative;
}




/* ============================================================================== */
/* ================================Complianz===================================== */
/* ============================================================================== */
/* Cookie bar links (Complianz) */
.cmplz-cookiebanner .cmplz-links a { 
  padding:10px 12px; 
  display:inline-block; 
}







@media (max-width: 992px) {
    .circle-container {
        position: relative;
        margin-top: 20px;
    }
    .circle-container .circle {
        margin-bottom: 10px;
    }
    .label {
        text-align: center;
    }
    .position-absolute {
        position: relative !important;
    }
}
@media (max-width: 768px) {
  .circle-container {
    display: none !important;
  }
}







/* FOOTER REFINEMENTS */

.footer-social a {
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social a:hover {
  transform: scale(1.2);
  color: #FFD700;
}

.footer-column h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #ffffff;
  font-weight: 700;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li a {
  color: #E0E0E0;
  text-decoration: none;
}

.footer-column ul li a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .footer-column {
    margin-bottom: 30px;
    text-align: center;
  }
}


/* === BLOG FRONT PAGE WIDTH FIX === */

body.blog #main-content .container {
  max-width: 1400px !important;
  width: 100% !important;
  padding: 0 30px;
}

body.blog .et_pb_post {
  width: 100%;
  margin-bottom: 40px;
}

/* === FOOTER WIDTH AND SPACING FIX === */
#main-footer {
  width: 100% !important;
  background-color: #2E7D32;
  padding: 50px 0;
}

#main-footer .container {
  max-width: 1400px !important;
  margin: 0 auto;
  padding: 0 30px;
}

#footer-bottom {
  text-align: center;
  padding-top: 30px;
  color: #ccc;
}





/* === OPTIONAL: HIDE SIDEBAR ON BLOG PAGE === */
body.blog #sidebar {
  display: none;
}

body.blog #left-area {
  width: 100% !important;
}




/* ========================================= */
/* === ACCESSIBILITY & CONTRAST FIXES === */
/* ========================================= */


.sub-menu, 
.dropdown-menu, 
ul li ul {
    background-color: rgba(90, 76, 213, 0.8) !important;
    box-shadow: none !important; /* Remove any shadow */
    border: none !important; /* Remove any border if present */
}

#header.header-scrolled,
#header.header-inner-pages {
  background: rgba(90, 76, 213, 0.8); /*rgba(24, 6, 185, 0.8);*/
  padding: 12px 0;
}
/* Remove top padding/margin from the submenu container */
#top-menu li ul,
#et-top-navigation .nav li ul {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove underline by default */
#et-top-navigation .nav li a {
  text-decoration: none;
}

/* On the front page, show white underline on hover */
body.home #et-top-navigation .nav li a:hover {
  text-decoration: underline;
  text-decoration-color: white;
}
/* On the front page: white underline on hover */
body.home #et-top-navigation .nav li a:hover {
  text-decoration: underline;
  text-decoration-color: white;
}

/* On non-front pages: black underline on hover */
body:not(.home) #et-top-navigation .nav li a:hover {
  text-decoration: underline;
  text-decoration-color: black;
}
body.home #et-top-navigation .nav li a {
    color: #ffffff !important;
}
/* body:not(.home) #et-top-navigation .nav li a {
    color: black !important;
} */



/* ============================================================================== */
/* ===============================FOOTER FINAL FIX============================== */
/* ============================================================================== */

/* REMOVE the debug borders and fix the layout */
.footer .col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
    /* REMOVE THESE DEBUG LINES: */
    border: none !important;
    min-height: auto !important;
}

/* Fix the logo styling */
.footer .footer-logo {
    max-height: 80px !important;
    max-width: 200px !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 20px !important;
    display: block !important;
    object-fit: contain !important;
}

/* Ensure logo container doesn't have strange styling */
.footer .footer-about:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Make sure the logo container has proper spacing */
.footer .footer-about img {
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Remove any unwanted spacing or borders from all columns */
.footer .col-lg-3,
.footer .col-md-12 {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure clean layout without any visual separators */
.footer .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    align-items: flex-start !important;
    border: none !important;
}

/* Clean up the footer container */
.footer .container,
.footer .footer-top {
    border: none !important;
    background: none !important;
}

/* Ensure proper text alignment for the first column */
.footer .col-lg-3:first-child {
    text-align: left !important;
}

/* Style the footer headings consistently */
.footer h4 {
    color: white !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    border: none !important;
}

/* Style footer links consistently */
.footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.footer ul li {
    margin-bottom: 8px !important;
    border: none !important;
}

.footer ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    border: none !important;
}

.footer ul li a:hover {
    color: white !important;
    text-decoration: underline !important;
}

/* Tablet responsive */
@media (max-width: 991px) {
    .footer .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        border: none !important;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .footer .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 40px !important;
        border: none !important;
    }
    
    .footer .footer-about:first-child {
        align-items: center !important;
    }
    
    .footer .social-links {
        justify-content: center !important;
    }
}

/* ============================================================================== */
/* ===============================COPYRIGHT BACKGROUND FIX====================== */
/* ============================================================================== */

/* Copyright section with lighter background */
.footer .copyright {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Alternative: If you want it even lighter */
.footer .copyright {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Copyright text styling */
.footer .copyright p {
    margin: 0 0 10px 0 !important;
    font-size: 14px !important;
    color: inherit !important;
}

.footer .copyright .sitename {
    color: white !important;
    font-weight: 600 !important;
}

.footer .copyright .credits {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
}

/* Ensure the copyright container spans full width */
.footer .container.copyright {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Mobile responsive for copyright */
@media (max-width: 768px) {
    .footer .container.copyright {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .footer .copyright {
        padding: 15px 0 !important;
    }
}