/* style.css */

/* --- Color Palette Variables --- */
:root {
   --color-bg-body: rgb(255, 255, 255);
  --color-bg-header: #fff;
  --color-white: #fff;

  /* Text */
  --color-brand-primary: #b80103;
  /* (Blue) Logo, Headings */
  --color-text-nav: #4a4a4a;
  --color-text-nav-hover: #b80103;
  /* (Red) Nav hover uses the primary action color */

  /* CTA Button (Primary Action - Red) */
  --color-cta-fallback: #b80103;
  --color-cta-gradient-start: #b80103;
  --color-cta-gradient-end: #d6a65e;
  /* Changed: Solid red is stronger than a gradient */
  --color-cta-hover-start: #9a0002;
  /* Changed: Darker red on hover */
  --color-cta-hover-end: #9a0002;
  /* Changed: Darker red on hover */

  /* Secondary Button (Secondary Action - Blue) */
  --color-button-secondary-border: #2e354f;
  /* (Blue) Using the secondary brand color */
  --color-button-secondary-text: #2e354f;
  /* (Blue) Using the secondary brand color */
  --color-button-secondary-hover-bg: #f0f1f4;
  /* Changed: A very light tint of the blue */

  /* Shadows (using rgba for transparency) */
  --color-shadow-light: rgba(0, 0, 0, 0.05);
  --color-shadow-medium: rgba(0, 0, 0, 0.1);
  --color-shadow-dark: rgba(0, 0, 0, 0.15);


  /* Footer colors (Based on the Blue secondary color) */
  --color-bg-footer-main: var(--color-brand-primary);
  /* (Blue) Re-using brand primary */
  --color-bg-footer-bottom: var(--color-brand-primary);
  --color-bg-footer-widget: var(--color-brand-primary);

  --color-footer-border: #4a526a;

  --color-text-footer:#111111;
  --color-text-footer-secondary:#444444;
}

/* --- Basic Resets & Body --- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
[x-cloak] { 
    display: none !important; 
}
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-bg-body);
    /* Light background to see the header shadow */
    line-height: 1.6;
}
main{
    display: flex;
    flex-flow: column wrap;
    align-items: start;
    /* padding: calc(20px + 4vw); */
    row-gap: 80px;
}
/* --- Header Container --- */
.site-header {
    background-color: transparent;
    width: 100%;
    padding: 20px 20px;
    border-bottom: 2px solid var(--color-button-secondary-text);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.button-sidebar-top-right{
     width: 30px;
    height: 30px;
    background: transparent;
    border: none;
}
.sidebar-self{
    display: flex;
    flex-flow: column wrap;
    position: fixed;
    top: 0;
    right: 0;
    width:40vw;
    max-width: 250px;
    min-width:250px;
    height: 100%;
    box-shadow: -2px 0px 6px 2px rgba(0,0,0,0.2);
    background-color: rgb(255,255, 255);

}
.align-self-flexend{
    align-self: flex-end;
}
a{
    text-decoration: none;
    color: var(--color-button-secondary-text);
}
.icon{
    width: 40px;
    height: 40px;
    padding: 6px;
    
}
.icon_2x{
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: center;
    padding: 6px;
}
.border_icon{
    border: 2px solid var(--color-brand-primary);
    margin-right: 20px;
    border-radius: 50%;
}
.contact-icon-list{
  
}
.contact-icon-list > li{
    margin: 20px;
    list-style: none;
    
}
.contact-icon-list > li > a{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}
.contact-icon-svg{
    margin:0 10px;
    padding:10px 0;
}
.sidebar-self > ul > li{
    list-style: none;
    padding: 10px;
    /* padding:10px 4vw; */
    outline: none;
    border: none;
    color: var(--color-button-secondary-text);
}
.menu-bar-top-right-corner{
    display: none;
   
    
    
}
.padding-10{
    padding: 10px;
}
.padding-20{
    padding: 0 10vw;
}
.border-bototm-2px{
    border:none;
    border-bottom: 2px solid var(--color-button-secondary-text);
}
.flex-row-space-around-items-to-start{
    display: flex;
    flex-flow: row wrap;
    justify-content: stretch;
    align-items: flex-start;
    align-content: flex-start;
}

.gap-flex-10{
    gap: 10vw;
}
.gap-flex-4{
    gap: 4vw;
}
.flex-row-start {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    align-items: center;
}
.flex-row-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.flex-row-spacebetween {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.flex-column-start{
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    
}
.behave-992-as-grid-column-2{
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;

}
.behave-992-as-grid-column-2 > div{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
        
       
}   
.container {
    max-width: 100%;
    /* Standard container width */
    /* margin: 0 auto; */
    /* Center the content */
    /* padding: 0 2rem; */
    /* Side padding */

    /* Flexbox for layout */
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    /* Pushes logo left, nav/button right */
    align-items: center;
    /* Vertically centers all items */
}

/* --- Logo --- */
.logo-icon {
    object-fit: cover;
    object-position: center;
}

.site-name {
    text-decoration: none;
    /* Eyeballed styles from the image */
    color: var(--color-brand-primary);
    font-size: 2.25rem;
    /* Large font size */
    font-weight: 700;
    /* Bold */
    margin: 0;
    margin-left: 10px;
}

/* --- Right-side Content (Nav + Button) --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* --- Navigation --- */
.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav li {
    margin-left: 2.5rem;
    /* Space between nav items */
}

.main-nav a {
    text-decoration: none;
    color: var(--color-text-nav);
    /* Dark gray text */
    font-weight: 500;
    /* Medium weight */
    font-size: 1rem;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--color-text-nav-hover);
    /* Darken on hover */
}

/* --- CTA Button --- */
.cta-button {
    text-decoration: none;
    color: var(--color-white);
    font-weight: normal;
    font-size: 0.9rem;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    /* Fully rounded ("pill") shape */
    margin: 0;
    /* Space between nav and button */
    white-space: nowrap;
    /* Prevents text from wrapping */

    /* Gradient background */
    background-color: transparent;

    /* The linear gradient */
    background-image: linear-gradient(45deg,
            var(--color-cta-gradient-start),
            var(--color-cta-gradient-end));

    /* Subtle shadow on the button */
    /* box-shadow: 0 2px 4px var(--color-shadow-medium); */
    border: 2px solid transparent;
    transition: all 0.2s ease;
 
    background-clip: padding-box;
}

.cta-button:hover {
    /* transform: translateY(-2px); */
    /* Slight lift on hover */
    background-color: transparent;
    background-image: none;
    border: 2px solid var(--color-button-secondary-border);
    /* box-shadow: 0 4px 8px var(--color-shadow-dark); */
    color: var(--color-button-secondary-border);

}


/* ------------ hero section ----------------- */
.hero-section {
    background-color: var(--color-bg-body);
    /* Default background */
    padding: 6rem 0;
    /* Vertical padding for the section */
}

.hero-container {
    max-width: 100%;
    margin: 0;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    min-height: 450px;
    /* Ensure a minimum height for the hero */
    background-color: var(--color-white);
    /* White background for the whole card-like hero */
    border-radius: 10px;
    /* Slight roundness to the hero card */

    overflow: hidden;
    /* Important for border-radius on child elements */
}

.hero-content {
    flex: 1;
    /* Takes up available space */
    padding: 3rem 4rem;
    /* Padding inside the content area */
    background-color: var(--color-bg-hero-light);
    /* Left pane background */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    max-width: 100%;
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--color-text-subtitle);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.hero-title {
    font-size: 3.5rem;
    /* Large, bold title */
    font-weight: 900;
    /* Extra bold for impact */
    color: var(--color-button-secondary-text);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--color-text-description);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    
    /* Control line length */
}

.button {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: inline-flex;
    /* To better center text vertically if needed */
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    /* For secondary button consistency */
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    /* Space between buttons */
}

/* Secondary Button (New) */
.button-secondary {
    color: var(--color-button-secondary-text);
    background-color: transparent;
    border-color: var(--color-button-secondary-border);
    border-width: 2px;
}

.button-secondary:hover {
    background-color: var(--color-button-secondary-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px var(--color-shadow-light);
    /* Subtle shadow on hover */
}

.hero-image-wrapper{
    flex: 1;
    /* Takes up remaining space */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--color-bg-hero-right);
    max-width: 100%;
    max-height: 100%;
    overflow-x: auto;
    /* Right pane background */
    padding: 2rem;
    /* Padding around the image */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;



    overflow: hidden;
    cursor: grab;
    user-select: none;

}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.scroll-container{
    width: 96%;
    max-width: 600px;
    
    overflow: hidden;
    /* border: 1px solid #ccc; */
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    margin: 2%;
    
    /* max-height: 400px; */
}
.scroll-content{
    max-width: 100%;
    display: inline-flex;
    will-change: transform;
}
.my-slider-image {
  width: 100%;
  /* height: 100%; */
  user-select: none;
  -webkit-user-drag: none;
  object-fit: cover;
  aspect-ratio: 16 / 9; 
  border-radius: 6px;
}

/* _________________________ */
/*          Dots Image       */
.dots-container {
  display: flex;
  justify-content: center;
  gap: 8px; /* Space between dots */
  padding: 12px 0;
}

.dots-container button {
  /* Reset button styles */
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;

  /* Create the dot shape */
  width: 10px;
  height: 10px;
  border-radius: 50%; /* Makes it a circle */
  background-color: #ccc; /* Inactive color */

  /* Smooth transition */
  transition: background-color 0.2s ease;
}

.dots-container button:hover {
  background-color: #999;
}

/* The active dot style */
.dots-container button.is-active {
  background-color: #333; /* Active color */
}
/* _________________________ */
.hero-image {
    /* width: 100%; 
    max-width: none; 
    height: auto; */
    pointer-events: none;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    border-radius: 4px;
}

/* Optional: Responsive adjustments */



/* --- NEW CSS for Services Section --- */

.services-section {
    /* Spacing for the section */
   
    background-color: transparent;
    padding: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-content: stretch;
    align-items: flex-start;
    justify-content: center;
    

}
.padded_sect{
    padding:0 8vw;
}
.section-title {
    /* "OUR SERVICES" title */
    font-size: calc(1.5em + 1vw - 0.2vh);
    /* A bit smaller than hero title */
    font-weight: 700;
    color: var(--color-button-secondary-text);
    /* Using brand blue from :root */
    text-align: left;
    margin-bottom: 0;
    /* Space below the title */
    letter-spacing: 1px;
    line-height: calc(1.0em + 1vw - 0.2vh );
    /* margin-left: 8vw; */
}

.section-title-2{
    font-size: 20px;
    font-weight: 700;
    color: var(--color-button-secondary-text);
    letter-spacing: 1px;
}
.services-grid-wrapper{
  
    display: flex;
    
}
.services-grid {
    display: inline-flex;
    margin:20px 0;
    max-width: 80vw;
    padding: 20px 10vw;
    overflow-x: auto;
    gap: 4vw;
    max-width: 100%;
    overflow-x: auto;
    align-self: center;
}
.service-card,.comment-card{
    /* Individual card styling */
    background-color: var(--color-white);
    /* White card background */
    padding: 2.5rem 2rem;
    border-radius: 10px;
    /* Rounded corners */
    text-align: center;
    /* Center all content */

    /* Subtle shadow from image */
    box-shadow: 0 4px 12px var(--color-shadow-light);
    
    transition: all 0.3s ease;
}
.service-card{
    min-width: 250px;
    max-width: 250px;
}

.comment-card{
    min-width: 350px;
    max-width: 350px;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch;
}

.service-card:hover {
    /* Add a subtle lift on hover */
    transform: translateY(-5px);
    box-shadow: 0 6px 16px var(--color-shadow-medium);
    /* Slightly darker shadow on hover */
}

.service-icon {
    /* Styling for the icon image */
    height: 64px;
    /* Fixed height for icons */
    width: 64px;
    max-width: 64px;
    max-height: 64px;
    margin-bottom: 1.5rem;
    /* Space below icon */
    object-fit: contain;
    /* This color will apply if you use an inline SVG with 'currentColor' fill */
    color: var(--color-brand-primary);
    border: 1px solid var(--color-brand-primary);
    border-radius: 32px;
}

.service-title {
    /* "RESIDENTIAL SOLAR" title */
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-button-secondary-text);
    /* Using brand blue */
    margin-bottom: 1rem;
    /* Space below card title */
}
.padding-common{
    padding: 20px 10vw;
}
.section-description{
    font-size: calc(0.65rem + 0.4vw);
}
.service-description {
    /* Placeholder text style */
    font-size: calc(0.65rem + 0.4vw);
    color: var(--color-text-nav);
    /* Using the nav gray color for text */
    line-height: 1.6;
    max-width: 250px;
}

.comment-desc-text{
    margin: 10px 0;
    letter-spacing: 1px;
    font-weight: 500;
}
.comment-by-text{
    letter-spacing: 0px;
    font-weight: 400;
}
/* --- Add these styles to your existing @media blocks --- */


/* ------------- Why Section ------- */

/* ------------- Footer Section ----------------*/

/* --- NEW CSS for Footer --- */
a{
    margin: 0;
    padding: 0;
}
.site-footer {
    border: none;
    border-top:2px solid var(--color-button-secondary-border);
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-button-secondary-text);
}

.site-footer-main {
    padding: 4rem 0;
    border-bottom: 1px solid var(--color-footer-border);
}

/* Base rule for both footer containers */
.footer-container {
    /* Changed from 100% to a max-width for better layout */
    margin: 0 auto;
    padding: 0 2rem;
    gap: 2.5rem;
}

/* --- Top Footer Styles --- */

/* This targets ONLY the top footer container */
.site-footer-main .footer-container {
    display: grid;
    /* This creates 2 columns: 1fr for .footer-about, 2.5fr for .flex-adjust-row */
    grid-template-columns: 1fr 2.5fr;
    align-items: start;
}

/* This is the flex wrapper for the link widgets */
.flex-adjust-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between; /* Changed from center to space-between */
    gap: 2rem;
}

.footer-widget {
    font-size: 0.95rem;
    min-width: 150px; /* Reduced min-width to fit better */
    display: flex;
    flex-direction: column; /* Corrected from 'column wrap' */
    align-items: flex-start; /* Aligns content left */
}

.footer-widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-button-secondary-text);
    margin-bottom: 1.5rem;
    white-space: nowrap;
}

.footer-links-list {
    list-style: none;
}

.footer-links-list li {
    margin-bottom: 0.8rem;
    text-align: left;
}

.footer-links-list a {
    text-decoration: none;
    color: var(--color-text-footer);
    transition: color 0.3s ease;
}

.footer-links-list a:hover {
    color: var(--color-button-secondary-text);
}

/* Column 1: About */
.footer-about {
    /* No special grid/flex rules needed, it's a grid item */
}

.footer-about .footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.logo-icon-footer {
    height: 40px;
    width: 40px;
    border-radius: 4px;
}

.site-name-footer {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-nav);
}

.footer-description {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}


/* Column 5: Social Icons */
.footer-social-links {
    list-style: none;
    display: flex;
    flex-direction: column; /* Stacked vertically */
    gap: 0.75rem;
}

.footer-social-links a {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    
    /* border-radius: 50%; */
    /* border: 1px solid var(--color-brand-primary); */
    color: var(--color-brand-primary);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.footer-social-links a:hover {
    background-color: transparent;
    color: var(--color-text-footer-secondary);
    border-color: var(--color-text-footer-secondary);
}

/* --- Bottom Footer Styles --- */

.site-footer-bottom {
  
    padding: 4rem 0 0 0;
}

/* This targets ONLY the bottom footer container */
.site-footer-bottom .footer-container {
    display: flex; /* Overrides the base 'display: grid' */
    flex-flow: row wrap;
    gap: 2.5rem;
    align-items: stretch; /* Makes columns equal height */
}

/* This targets the 3 direct children: 2x .footer-widget-dark and 1x .footer-column-stacked */
.site-footer-bottom .footer-container > * {
    flex: 1 1 300px; /* Each of the 3 columns will auto-adjust */
}

/* This is the wrapper for the stacked "Legal" and "Newsletter" boxes */
.footer-column-stacked {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}



.footer-widget-dark {
    /* background-color: var(--color-text-nav); */
    border-radius: 10px;
    padding: 2rem;
   
    display: flex;
    flex-direction: column;
   
}

/* Contact Info List (Cols 1 & 2) */
.footer-contact-info {
    list-style: none;
    color: var(--color-text-footer);
    font-size: 0.95rem;
}

.footer-contact-info li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.footer-contact-info li i {
    color: var(--color-text-footer-secondary);
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

/* Arrow links in Col 1 */
.footer-links-list.arrowed a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-links-list.arrowed a::after {
    content: '>';
    color: var(--color-text-footer-secondary);
    font-weight: bold;
}

/* Link-only item in Col 2 */
.footer-contact-info li.link-item {
    margin: 1rem 0;
}
.footer-contact-info li.link-item a {
    text-decoration: none;
    color: var(--color-text-footer-secondary);
    transition: color 0.3s ease;
}
.footer-contact-info li.link-item a:hover {
    color: var(--color-text-footer-secondary);
}
.footer-contact-info li.link-item a::after {
    content: '>';
    color: var(--color-text-footer-secondary);
    font-weight: bold;
    margin-left: auto;
}

/* Separator in Col 1 */
.footer-widget-dark > .footer-contact-info {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-footer-border);
}

/* Legal grid in Col 3 */
.footer-legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}

/* Social links in Col 3 */
.footer-widget-dark .footer-social-links.dark {
    flex-direction: row;
    margin-top: auto; /* Pushes to bottom */
    padding-top: 1rem;
}

/* Newsletter form in Col 4 */
.footer-description-dark {
    color: var(--color-text-footer);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto; /* Pushes to bottom */
    padding-top: 1rem;
}

.footer-newsletter-form input[type="email"] {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-text-footer-secondary);
    background-color: transparent;
    color: var(--color-brand-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    outline:none;
}

.footer-newsletter-form input[type="email"]::placeholder {
    color: var(--color-text-footer-secondary);
}

.button-subscribe {
    text-decoration: none;
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    white-space: nowrap;
    background-color: var(--color-cta-fallback);
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    outline: none;
}

.button-subscribe:hover {
    background-color: var(--color-cta-hover-end);
}

/* --- Responsive Media Queries --- */
.form-container{
    
}
.form-container > form > div{
    display: grid;
    grid-template-columns: 40% auto;
}
.form-container input,textarea{
    border: none;
    border-bottom: 2px solid var(--color-footer-border);
    background-color: transparent;
    padding: 8px 12px;
    outline: none;
    font-size: 18px;

}
@media (max-width: 992px) {
    /* Stacks the top footer columns */
    .site-footer-main .footer-container {
        grid-template-columns: 1fr; /* Stack all columns */
        text-align: center;
    }
    .footer-about .footer-logo {
        justify-content: center;
    }
    .footer-social-links {
        flex-direction: row;
        justify-content: center;
    }
    /* Centers the widgets in the top footer when stacked */
    .flex-adjust-row {
        justify-content: center;
    }
    .footer-widget {
        align-items: center;
    }
    .footer-links-list li {
        text-align: center;
    }
    .form-container > form > div
    {
        display: grid;
        grid-template-columns: 100%;
    }
}

@media (max-width: 992px) {

    .menu-bar-top-right-corner{
        display: block;
    }
    .header-right {
        display: none;
    }
    .hero-container {
        flex-direction: column;
        padding: 0;
    }

    .hero-content {
        padding: 3rem;
        border-radius: 10px 10px 0 0;
        /* Adjust border radius for stacked layout */
    }

    .hero-image-wrapper {
        border-radius: 0 0 10px 10px;
        /* Adjust border radius for stacked layout */
        padding: 3rem;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .site-name {
        font-size: 1.8rem;
    }

    .main-nav li {
        margin-left: 1.5rem;
    }

    .button-primary {
        margin-left: 1.5rem;
    }
    .behave-992-as-grid-column-2{
        display: grid;
        grid-template-columns: auto auto;
        
       
    }
    
     .behave-992-as-grid-column-2 > div{
        display: grid;
        grid-template-columns: auto auto;
        
       
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: flex-start;
        /* padding: 0 1rem; */
    }

    .site-header {
        padding: 10px;
    }

    .site-name {
        /* margin-bottom: 1rem; */
    }

    

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 1rem;
    }

    .main-nav li {
        margin: 0.5rem 0;
    }

    .button-primary {
        margin-left: 0;
        width: 80%;
        /* Make button wider */
        max-width: 250px;
    }

    .hero-section {
        padding: 3rem 0;
    }

    .hero-content {
        padding: 2rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .button {
        width: 100%;
        max-width: 300px;
        /* Limit button width on smaller screens */
    }
    /* Inside @media (max-width: 768px) */
   
    .section-title {
        
        /* Smaller title on mobile */
        /* margin-bottom: 2rem; */
    }

    .services-grid {
        gap: 1.5rem;
    }

    .service-card {
        padding: 2rem;
        min-width: 250px;
        max-width: 40vw;
    }
    .footer-container {
    padding: 0 1rem;
    }
    .site-footer-main {
        padding: 3rem 0;
    }
    .site-footer-bottom {
        padding: 3rem 0;
    }
    .footer-widget-dark {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-content {
        padding: 1.5rem;
    }

    .hero-image-wrapper {
        padding: 1.5rem;
    }
    .behave-992-as-grid-column-2 > div{
        display: flex;
        flex-flow: column wrap;
         
    } 
}
/* Inside @media (max-width: 768px) */

.desc-span-highlight{
    font-weight: bold;
}
.horizontal-scroll-wrapper{
    max-width:100%;
    overflow-x:auto;
    /* padding: 4vw; */
}
.styled-table {
    
    border-collapse: collapse;
    border-radius: 8px;
    
}

/* Table header */
.styled-table thead {
    background-color: transparent;
    color: var(--color-brand-primary);
    border: 1px solid var(--color-brand-primary);
}

/* Header cells */
.styled-table th {
    padding: 12px 15px;
    text-align: left;
}

/* Table body */
.styled-table tbody {
    background-color: transparent;
    color:var(--color-button-secondary-text);
    border: 2px solid var(--color-brand-primary);
}

/* General data cells */
.styled-table td {
    padding: 12px 15px;
    border: 1px dashed rgba(0,0,0,0.2);
    min-width: 200px;
}

/* Special row with a white bottom border */
.styled-table .row-divider {
    /* border-bottom: 2px solid var(--color-brand-primary); */
}

/* Dark blue cells for 'Package' */
.styled-table .cell-package {
    background-color: var(--color-brand-primary);
    color: white;
    font-weight: bold;
}

/* Bold text for 'Price' cells */
.styled-table .cell-price {
    font-weight: bold;
}


.footer-copyright{
    font-size: 0.85rem;
    color: rgba(0,0,0,0.4);
    border: none;
    border-top: 1px solid rgba(0,0,0,0.2);
}
.copyright-p{

}