/* Global Styles */
body {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Custom Colors */
.bg-red {
    background-color: #E74C3C;
}

.red {
    color: #E74C3C;
}

.bg-light-red {
    background-color: #F8E0E0;
}

.light-red {
    color: #F8E0E0;
}

.bg-light-gray {
    background-color: #F8F8F8;
}

.dark-gray {
    color: #333;
}

.bg-dark-gray {
    background-color: #333;
}

/* Typography */
.poppins-font {
    font-family: 'Poppins', sans-serif;
}

/* Responsive Font Sizes for Headings */
@media screen and (min-width: 1024px) {
    .f1-l {
        font-size: 2.2rem;
    }
    .f2-l {
        font-size: 1.9rem;
    }
    .f3-l {
        font-size: 1.7rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .f1-m {
        font-size: 1.9rem;
    }
    .f2-m {
        font-size: 1.7rem;
    }
    .f3-m {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .f1-ns {
        font-size: 1rem; /* Site name */
    }
    .f2-ns {
        font-size: 1.7rem; /* Hero H1 */
    }
    .f3-ns {
        font-size: 1.4rem; /* Section H2 */
    }
    .f4-ns {
        font-size: 1.1rem; /* Card H3 / Subheadings */
    }
    .f5-ns {
        font-size: 0.9rem; /* Paragraphs / smaller text */
    }
}

/* Hero Section */
#hero {
    min-height: 80vh;
    padding-top: 8rem;
    padding-bottom: 5rem;
    position: relative;
    overflow: hidden;
}

#hero .z-minus {
    z-index: -1;
}

/* Image Overlays */
.absolute--fill {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.bg-black-50 {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Object Fit for Images */
.object-fit-cover {
    object-fit: cover;
}

/* Card Heights for consistency */
#services .h-100,
#products .h-100,
#team .h-100 {
    height: 100%;
}

#services img,
#products img {
    height: 300px; /* Consistent height for service/product images */
}

#products img {
    height: 350px; /* Slightly taller for product images */
}

/* Burger Menu */
#mobile-menu {
    transition: max-height 0.3s ease-out;
    max-height: max-content;
}

#mobile-menu.open {
    max-height: 200px; /* Adjust based on content */
}

@media screen and (min-width: 1100px) {
    #burger-menu-toggle,
    #mobile-menu {
        display: none !important;
    }
}

@media screen and (max-width: 1099px) {
    .dn-ns {
        display: block !important;
    }
    .flex-ns {
        display: none !important;
    }
}

/* Pricing Calculator */
#pricing-calculator-form input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

#pricing-calculator-form label {
    cursor: pointer;
}

/* Footer */
.email-break-all {
    word-break: break-all;
}

/* Cookie Banner */
#cookie-banner {
    z-index: 1000;
}

#cookie-settings-modal {
    z-index: 1001;
}

#cookie-settings-modal .mw6 {
    max-width: 600px;
}

#cookie-settings-modal input[type="checkbox"] {
    width: auto;
    vertical-align: middle;
}

#cookie-settings-modal label {
    cursor: pointer;
}

#cookie-settings-modal .absolute {
    top: 1rem;
    right: 1rem;
}

/* General button styling to remove underline */
button,
.link.dim.ph4.pv3.bg-white.red.b.br-pill.f5.f4-ns.ttu.pointer.no-underline,
.link.dim.ph4.pv3.bg-red.white.b.br-pill.f5.f4-ns.ttu.pointer.no-underline {
    text-decoration: none !important;
}

/* Anchor link smooth scroll behavior */
html {
    scroll-behavior: smooth;
}
/* Styles for the main container, providing top and side padding */
.userClauseNet {
    margin-top: 2rem; /* Space from content above the clause net */
    padding-left: 1.5rem; /* Padding on the left side */
    padding-right: 1.5rem; /* Padding on the right side */
    /* You might want to add max-width and margin: auto; here for centering on large screens */
    /* max-width: 1200px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Heading 1 styles */
.userClauseNet h1 {
    font-size: 1.8rem; /* Moderate size for main heading */
    margin-top: 2rem; /* Space above the heading */
    margin-bottom: 1rem; /* Space below the heading */
    line-height: 1.2; /* Improved readability */
    font-weight: 700; /* Bold weight */
}

/* Heading 2 styles */
.userClauseNet h2 {
    font-size: 1.6rem; /* Moderate size for sub-heading */
    margin-top: 1.8rem;
    margin-bottom: 0.9rem;
    line-height: 1.3;
    font-weight: 600;
}

/* Heading 3 styles */
.userClauseNet h3 {
    font-size: 1.4rem; /* Moderate size for a deeper sub-heading */
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
    font-weight: 600;
}

/* Heading 4 styles */
.userClauseNet h4 {
    font-size: 1.2rem; /* Smaller heading, good for minor sections */
    margin-top: 1.4rem;
    margin-bottom: 0.7rem;
    line-height: 1.5;
    font-weight: 500;
}

/* Heading 5 styles */
.userClauseNet h5 {
    font-size: 1.1rem; /* Smallest heading, often used for captions or minor labels */
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    line-height: 1.6;
    font-weight: 500;
}

/* Paragraph styles */
.userClauseNet p {
    font-size: 1rem; /* Base font size for paragraphs */
    margin-bottom: 1rem; /* Space between paragraphs */
    line-height: 1.6; /* Optimal line height for readability */
}

/* Unordered list styles */
.userClauseNet ul {
    margin-top: 1rem; /* Space above the list */
    margin-bottom: 1rem; /* Space below the list */
    padding-left: 1.5rem; /* Indentation for bullet points */
    list-style-type: disc; /* Default bullet style */
}

/* Ordered list styles (added for common use case, though not explicitly requested for "ul, li" only) */
.userClauseNet ol {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem; /* Indentation for numbers */
    list-style-type: decimal; /* Default numbered style */
}

/* List item styles */
.userClauseNet li {
    margin-bottom: 0.5rem; /* Space between individual list items */
    line-height: 1.6; /* Inherit or set for readability within list items */
}


.hero-bg-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.z-0{ z-index: 0; }
.z-1{ z-index: 1; }
.z-2{ z-index: 2; }


.social-icon{
  font-size: 28px;
  line-height: 1;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9999px;
}

.social-icon:hover{
  border-color: rgba(255,255,255,.55);
}

.footer-email{
  overflow-wrap: anywhere; 
}


@media(max-width: 767px){
    .w-25-ns,
    .w-50-ns,
    .w-50-m{
        width: 100% !important;
    }
}

@media(max-width: 991px){
    footer .tl-m,
    footer .tr-m{
        text-align: center !important;
    }

    footer .w-50-m{
        width: 100%;
    }

    footer .justify-end-m{
        justify-content: center !important;
    }
}

b, strong {
    font-weight: 400;
}

header{
    z-index: 9;
}

main{
    overflow: hidden !important;
}