 <style id="sections-styles">
/* CSS for section section:header */
.hero-header-section {
  position: relative;
  min-height: 360px; /* Height of background image */
  background: linear-gradient(141deg, #000000 0%, #1e3985 108.12%, #1e2d4d 184.66%); /* style_2 */
  color: #ffffff;
  display: flex;
  flex-direction: column;
}
.hero-background-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  opacity: 0.5; /* Adjust as needed to match visual */
}
.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-top-overlay { /* style_4 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 137px; /* Height of node 1:1350 */
  background: linear-gradient(180deg, #051944 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
}
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.site-logo img {
  width: 122px; /* Node 1:1361 */
  height: auto;
}
.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 24px; /* Adjusted for visual spacing */
}
.main-nav a {
  color: #f8fafc; /* style_14, style_15 */
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px; /* style_12, style_14, style_15 */
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-nav a:hover {
  color: #faba00;
}
.nav-arrow {
  width: 16px; /* SVG original 24px, scaled down */
  height: 16px;
}
.header-cta .btn-primary.btn-small { /* style_17, style_18 */
  background-color: #faba00;
  color: #072b5a; /* Dark text on yellow for contrast */
  font-weight: 700;
  font-size: 12px;
  padding: 8px 16px; /* Adjusted for visual */
  border-radius: 24px;
}
.mobile-nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}
.mobile-nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 900px) { /* Breakpoint for nav collapse */
  .main-nav {
    display: none; /* Will be shown via JS */
    position: absolute;
    top: 70px; /* Below header */
    left: 0;
    right: 0;
    background-color: #051944; /* Dark background for dropdown */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  .main-nav.active {
    display: block;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: center;
  }
  .main-nav li {
    padding: 10px 0;
  }
  .header-cta {
    display: none; /* Can move CTA into mobile menu or keep visible */
  }
  .mobile-nav-toggle {
    display: block;
  }
}

/* CSS for section section:hero */
.hero-content-section {
  position: relative; /* Sits within .hero-header-section flow */
  z-index: 3;
  color: #ffffff;
  text-align: left;
  padding-top: 40px; /* Adjust based on visual spacing from header */
  padding-bottom: 60px;
  flex-grow: 1; /* Takes remaining space in flex column of hero-header-section */
  display: flex;
  align-items: center; /* Vertically center if hero-header-section has fixed height */
}
.hero-inner-content {
    /* padding-left is 86px from edge of 1024px container for title */
    /* Container already has 20px padding. So 86-20 = 66px additional margin or padding */
    /* For simplicity, let container handle base padding. Max-width for text elements. */
}
.hero-content-section h1 { /* style_5 */
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2; /* 38.72px / 32px */
  color: #ffffff;
  margin-bottom: 20px; /* Space to subtitle */
  max-width: 394px; /* Width of text node 1:1351 */
}
.hero-content-section p { /* style_6 */
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Figma says 700, visually might be lighter */
  font-size: 16px;
  line-height: 1.2; /* 19.36px / 16px */
  color: #ffffff;
  margin-bottom: 30px; /* Space to button */
  max-width: 405px; /* Width of text node 1:1352 */
}
.hero-content-section .btn-primary { /* style_8, style_9 */
  background-color: #faba00;
  color: #2b5183;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding: 12px 25px; /* To achieve height 43px */
  border-radius: 10px;
}
@media (max-width: 767px) {
    .hero-content-section {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .hero-content-section h1, .hero-content-section p {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-content-section .btn-primary {
        margin-left: auto;
        margin-right: auto;
    }
}

/* CSS for section section:why-meshworks */
.why-meshworks-section {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #ffffff;
}
.why-meshworks-section .section-title { /* style_20 */
  color: #000000;
  text-align: left; /* Figma style_20 is text-align: left */
  margin-bottom: 25px; /* (455-408) - approx half of title height */
}
.why-meshworks-section .section-description { /* style_21 */
  color: #545454;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.66; /* 25px / 15px */
 /* max-width: 846px;  Width of text node 1:1363 */
  /* text-align: justified; from style_21 */
}

/* CSS for section section:modules */
.modules-section {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #f8f9fa; /* Light gray for separation */
}
.modules-section .section-title { /* style_22 */
  color: #000000;
}
.modules-section .section-subtitle { /* style_23 */
  color: #545454;
  margin-bottom: 40px;
}
.modules-grid {
    gap: 30px; /* Spacing between cards */
}
.module-card { /* style_24 for background */
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 25px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.module-icon {
  width: 25px; /* From Figma nodes 1:1370-1373 */
  height: auto; /* Maintain aspect ratio, original height 25-28px */
  margin-bottom: 15px;
}
.module-title { /* style_29 */
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  margin-bottom: 10px;
}
.module-description { /* style_30 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2; /* 14.52px / 12px */
  color: #545454;
  text-align: justify;
  margin-bottom: 15px;
  flex-grow: 1; /* Pushes link to bottom */
}
.module-link { /* style_31 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #2b5183;
  margin-top: auto; /* Pushes link to bottom if card heights vary */
}
.module-link:hover {
  text-decoration: underline;
}
.modules-footer-link { /* Node 1:1452, style_88 */
    margin-top: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 1.2; /* 24.2px / 20px */
    color: #2b5183;
}
.modules-footer-link strong {
    font-weight: 700;
}

@media (max-width: 991px) { /* Tablet */
    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) { /* Mobile */
    .modules-grid {
        grid-template-columns: 1fr;
    }
}

/* CSS for section section:brochure */
.brochure-section { /* Frame 1:1386, bg from 1:1387 */
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #ffffff; /* Fallback, main card has its own bg */
}
.brochure-container { /* Node 1:1387 style_33 */
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  overflow: hidden; /* For the blue panel effect */
  padding: 0; /* Container padding removed, handled internally */

}
.brochure-content {
  padding: 40px;
  flex: 1 1 55%; /* Adjust ratio */
}
.brochure-content .section-title { /* style_20 */
  color: #000000;
  text-align: left;
  margin-bottom: 20px;
}
.brochure-description { /* style_41 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2; /* 18.15px / 15px */
  color: #919191;
  text-align: justify;
  margin-bottom: 30px;
  max-width: 474px;
}
.btn-download { /* style_36, style_37 */
  background-color: #ebebeb;
  color: #c60000;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 20px; /* Adjust for height 50px */
  border-radius: 8px;
}
.btn-download .btn-icon {
  width: 30px; /* Node I1:1399;638:118 */
  height: 30px;
  margin-right: 8px;
}
.brochure-image-area { /* Node 1:1398 style_35 */
  background-color: #074276;
  flex: 1 1 45%; /* Adjust ratio */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative; /* For potential image absolute positioning if needed */
}
.brochure-cover-img { /* Node 1:1400, style_40 */
  max-width: 100%;
  max-height: 280px; /* Original height 277.96 */
  border-radius: 5px;
  box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.52);
}

@media (max-width: 767px) {
  .brochure-container {
    flex-direction: column;
    max-width: 100%; /* Allow it to be full width within page padding */
  }
  .brochure-content {
    padding: 30px;
    text-align: center;
  }
  .brochure-content .section-title, .brochure-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .brochure-image-area {
    width: 100%;
    padding: 30px;
    border-radius: 0 0 20px 20px; /* Adjust if container has radius */
  }
}

/* CSS for section section:value-props */
.value-props-section {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #ffffff;
}
.value-props-section .section-title { /* style_22 */
  color: #000000;
}
.value-props-section .section-subtitle { /* style_42 */
  color: #545454;
  font-size: 14px;
  margin-bottom: 50px;
}
.value-props-grid {
    gap: 40px 30px; /* row-gap column-gap */
}
.value-prop-item {
  display: flex;
  align-items: flex-start; /* Align icon bg with top of text */
  gap: 20px;
}
.value-prop-icon-bg { /* style_44 */
  background-color: #eff6ff;
  border-radius: 10px;
  width: 40px; /* Approx from Figma (38-40px) */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.value-prop-icon {
  width: 25px; /* Approx from Figma */
  height: 25px;
  object-fit: contain;
}
.value-prop-text {
  flex-grow: 1;
}
.value-prop-title { /* style_43 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #000000;
  margin-bottom: 8px;
}
.value-prop-description { /* style_47 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2; /* 15.73px / 13px */
  color: #545454;
}
@media (max-width: 575px) { /* Mobile */
    .value-props-grid {
        grid-template-columns: 1fr;
    }
    .value-prop-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* CSS for section section:resources */
.resources-section { /* Background from 1:1422 style_49 */
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #f8fafc;
}
.resources-section .section-title { /* style_50 */
  color: #000000;
}
.resources-section .section-subtitle { /* style_51 */
  color: #545454;
  font-size: 16px;
  margin-bottom: 40px;
}
.resources-grid {
    gap: 30px;
}
.resource-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.resource-category-header { /* Nodes 1:1425, 1:1428, 1:1431 */
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: -15px!important;
}
.category-icon {
  width: 20px; /* Approx from Figma (18-23px) */
  height: 20px;
}
.category-title { /* style_52 */
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px!important;
  color: #000000;
  margin: 0;
}
.resource-card { /* Base style from I1:1434;926:453 (style_56) */
  background-color: #ffffff;
  border: 1px solid #ededed;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.resource-card-icon-bg { /* style_57 */
  background-color: #eff6ff;
  border-radius: 7px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.resource-card-icon {
  width: 20px; /* Approx from Figma (19.4px) */
  height: 20px;
}
.resource-card-content {
  flex-grow: 1;
}
.resource-card-title { /* style_59 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  margin-bottom: 8px;
  line-height: 1.2;
}
.resource-card-description { /* style_60 */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.33; /* 16px / 12px */
  color: #000000; /* Figma says #000000, could be #545454 for better hierarchy */
  margin-bottom: 12px;
}
.resource-card-link { /* style_61 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.45; /* 16px / 11px */
  color: #074276;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.resource-card-link img {
  width: 12px; /* SVG original size */
  height: 12px;
}
.view-all-link { /* style_72 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #074276;
  margin-top: 10px; /* Space above link */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.view-all-link img { /* style_73, style_74, style_75 (border only) */
    width: 18px; /* Original 22px, seems to be an arrow line */
    height: 1px; /* It's a line, not a filled arrow */
    background-color: #074276; /* Simulating the border as background */
}
@media (max-width: 991px) { /* Tablet */
    .resources-grid {
        grid-template-columns: 1fr; /* Stack columns */
    }
    .resource-column {
        margin-bottom: 30px; /* Space between stacked columns */
    }
    .resource-column:last-child {
        margin-bottom: 0;
    }
}

/* CSS for section section:cta */
.cta-section { /* Background from 1:1446 style_78 */
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
  background: linear-gradient(315deg, #074276 0%, #1e3985 71.39%, #074276 141.42%);
  color: #ffffff;
  overflow: hidden;
}
.cta-background-image-container { /* For 1:1447 style_79 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5; /* style_79 opacity */
  z-index: 1;
}
.cta-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-content {
  position: relative;
  z-index: 2;
}
.cta-title { /* style_80 */
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2; /* 45.98px / 38px */
  color: #ffffff;
  margin-bottom: 20px;
}
.cta-subtitle { /* style_81 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2; /* 15.73px / 13px */
  color: #ffffff;
  margin-bottom: 30px;
  max-width: 464px;
  margin-left: auto;
  margin-right: auto;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}
.cta-buttons .btn {
  padding: 12px 25px; /* To match height 52px */
  font-size: 17px; /* style_84, style_86 */
  font-weight: 500;
}
.cta-buttons .btn-icon {
  width: 26px; /* Approx from Figma */
  height: 26px;
}
/* Decorative images - example if needed
.deco-img-growup { position: absolute; left: 10%; top: 20%; width: 29px; z-index: 0;}
.deco-img-dollar { position: absolute; right: 10%; top: 25%; width: 31px; z-index: 0;}
*/
@media (max-width: 575px) {
    .cta-title {
        font-size: 30px;
    }
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px; /* Limit button width */
    }
}

/* CSS for section section:footer */
.site-footer {
  position: relative;
  background-color: #1d1d1d; /* Fallback color */
  color: #cccccc;
  padding-top: 60px;
  padding-bottom: 30px;
  font-size: 14px;
}
.footer-bg-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.1; /* Adjust for subtle background */
}
.footer-bg-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-content {
  position: relative;
  z-index: 1;
}
.footer-top {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #444444;
}
.footer-logo {
  max-width: 100px;
  margin-bottom: 15px;
}
.footer-about p, .footer-contact p {
  line-height: 1.7;
  margin-bottom: 15px;
}
.footer-contact h4, .footer-subscribe h4, .footer-links-column h4 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 600;
}
.social-icons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.social-icons img {
  width: 24px;
  height: 24px;
  border-radius: 4px; /* if they are actual icons */
}
.footer-search {
  display: flex;
  max-width: 250px;
}
.footer-search input {
  flex-grow: 1;
  padding: 8px 12px;
  border: 1px solid #555555;
  background-color: #333333;
  color: #ffffff;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}
.footer-search button {
  padding: 8px 10px;
  border: 1px solid #555555;
  background-color: #444444;
  border-left: none;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
}
.footer-search button img {
    width: 16px; height: 16px;
}
.subscribe-form {
  display: flex;
}
.subscribe-form input {
  flex-grow: 1;
  padding: 10px 12px;
  border: 1px solid #555555;
  background-color: #333333;
  color: #ffffff;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}
.subscribe-form .btn-primary {
  border-radius: 0 4px 4px 0;
  padding: 10px 15px;
  font-size: 14px;
}
.footer-links {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}
.footer-links-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links-column li {
  margin-bottom: 10px;
}
.footer-links-column a {
  color: #cccccc;
  transition: color 0.3s ease;
}
.footer-links-column a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #444444;
  font-size: 13px;
  color: #aaaaaa;
}
.footer-bottom p {
  margin: 5px 0;
}
.footer-bottom a {
  color: #aaaaaa;
}
.footer-bottom a:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
    .footer-top, .footer-links {
        grid-template-columns: 1fr; /* Stack all columns */
        text-align: center;
    }
    .footer-logo, .social-icons, .footer-search, .subscribe-form {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-search, .subscribe-form {
        max-width: 100%;
    }
}



  /* Extra add */
  
  
.module-card{
font-family: 'Inter', sans-serif;
}
.section-subtitle text-center{
font-family: 'Inter', sans-serif;
}
.value-prop-item{
font-family: 'Inter', sans-serif;
}
.section-subtitle text-center{
font-family: 'Inter', sans-serif;
}
.category-title{
font-family: 'Inter', sans-serif;
}
.cta-subtitle{
font-family: 'Inter', sans-serif;
}
.cta-buttons{
font-family: 'Inter', sans-serif;
}

.resource-card-icon-bg {
  position: relative;
  width: 40px;  /* or match your design */
  height: 40px;
  background-color: #ebebeb; /* default background */
  border-radius: 10%;         /* optional: make it circular */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.resource-card-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  transition: opacity 0.3s ease;
}

.hover-icon {
  opacity: 0;
}

.resource-card:hover .default-icon {
  opacity: 0;
}

.resource-card:hover .hover-icon {
  opacity: 1;
}

.resource-card:hover .resource-card-icon-bg {
  background-color: #1265a8; /* red background on hover */
}


.btn.btn-primary.asedrf {
 background-color: #faba00;
color: #2b5183;
padding: 12px;
}


.btn.btn-primary.asedrf:hover {
  background-color: white;
}


.download-resources-section__button {
    display: inline-flex
;
    align-items: center;
    background-color: #ebebeb;
    border-radius: 8px;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    color: #c60000;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    gap: 8px;
}

.download-resources-section__button:hover {
    background-color: #c60000;
    color: #ffffff;
}



.btn-download {
  background-color: #ebebeb;
  color: #c60000;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-download .btn-icon {
  width: 16px;
  height: 16px;
  transition: opacity 0.3s ease;
}

.btn-download .hover-icon {
  display: none;
}

.btn-download:hover {
  background-color: #c60000;
  color: #fff;
}

.btn-download:hover .default-icon {
  display: none;
}

.btn-download:hover .hover-icon {
  display: inline;
}


.module-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #d0d0d0;
}
.brochure-cover-img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #d0d0d0;
}
.resource-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #716767;
}


a.btn.btn-request-demo.aswed{
	margin-right:20px;
	background-color: #ffffff;
	color: #2151cc;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 17px;
	padding: 15px 25px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	}
	a.btn.btn-request-demo.aswed:hover{
	background-color: blue;
	color: white;
	}
	
	
.btn-request-demo .icon-hover {
  display: none;
}

.btn-request-demo:hover .icon-default {
  display: none;
}

.btn-request-demo:hover .icon-hover {
  display: inline;
}
	
	a.btn.btn-talk-expert.aswed:hover{
	box-shadow: 0px 1px 20px 5px rgb(255 255 255 / 99%);
	}
	
	a.btn.btn-talk-expert.aswed
	{
	   background-color: rgba(10, 29, 90, 0.79);
	   color: #ffffff;
	   border: 1px solid #ffffff;
	   font-family: 'Inter', sans-serif;
	   font-weight: 500;
	   font-size: 17px;
	   padding: 15px 25px;
	   border-radius: 8px;
	   text-decoration: none;
	   display: inline-flex;
	   align-items: center;
	   gap: 8px;
	   }

  /* CARD STYLING */
  .module-card {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 15px;
    scroll-snap-align: start;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s;
  }

  .module-card:hover {
    transform: translateY(-5px);
  }

  /* HIDE SCROLLBAR BUT KEEP FUNCTIONAL */
  #modulesScroll {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 10px 30px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
  }

  #modulesScroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* ARROW BUTTONS */
  .arrow-btn {
    position: absolute;
    top: 40%;
    z-index: 5;
    background-color: #007bff; /* Blue background */
    color: white;
    border: none;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
  }

  .arrow-btn:hover {
    background-color: #0056b3;
  }

  #leftArrow { left: 60px; text-decoration: none; top: 350px; background-color: #faba00;width: 52px;height: 52px;}
  #rightArrow { right: 60px; text-decoration: none;top: 350px; background-color: #faba00;width: 52px;height: 52px;}

  /* RESPONSIVE CARD WIDTH */
  @media (max-width: 1024px) {
    .module-card {
      flex: 0 0 50%;
    }
  }

  @media (max-width: 600px) {
    .module-card {
      flex: 0 0 100%;
    }
  }
</style>
  