@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,79.4,100..900;1,79.4,100..900&display=swap');


/* Reset basic browser styles */
 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

/* The main navigation bar container */

.nav {
       background-color:white;
    padding: 15px 0;
    }
    
    /* Add a new rule specifically for the row inside the navbar */
.nav .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.row {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
   
}
   
    

/* Logo styling */

.logo{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.logo a {
    color:black;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}

.logo .logo-img {
    width: 32px; /* Change this to make the logo bigger or smaller */
    height: auto; /* Ensures the image doesn't get stretched or squished */
    margin-right: 12px; /* Creates space between the image and the word "Treact" */
    transform: translateY(6px);
}


/* =========================================
   MOBILE & TABLET MEDIA QUERY (< 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* Slightly reduce the font size and spacing for mobile */
    .logo a {
        font-size: 20px; 
        letter-spacing: 0.5px; 
    }

    /* Shrink the image slightly and adjust the alignment to match the new text size */
    .logo .logo-img {
        width: 26px; 
        margin-right: 8px; 
        transform: translateY(4px); 
    }
}







/* Navigation links container */
.nav-links {
    list-style: none; /* Removes the bullet points */
    display: flex;
    align-items: center;
    gap: 30px; /* Adds space between each link */
}

/* Individual link styling */
.nav-links li a {
    color:black;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease; /* Smooth transition for the hover effect */
}

/* Styling the Sign Up link to look like a button */
.nav-links  .btn-signup {
    background-color: #007bff; /* A nice, bright blue */
    color: #ffffff; /* White text so it stands out */
    text-decoration: none; /* Removes the default blue underline */
    
    /* PADDING: 10px top/bottom, 24px left/right */
    padding: 10px 24px; 
    
    /* BORDER-RADIUS: This creates the circular/pill edges */
    border-radius: 50px; 
    
    
    /* DISPLAY: Important for links so the padding works correctly */
    display: inline-block; 
    
    /* Smooth transition for the hover effect */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Make it look interactive when the user hovers over it */
.btn-signup:hover {
    background-color:#5e18e9; /* Changes to a darker blue */
    transform: translateY(-2px); /* Makes the button "lift" up slightly */
}

/* Hover effect for the links */
.nav-links li a:hover {
    color: #4c78af; /* Changes to a nice green when you hover */
}

/* Menu Backdrop */

.btn_menu{
    background-color: transparent;
    font-size: 40px;
    text-align: center;
    border: none;
    color: #6496db;
   display: none; 

}

.menu_backdrop{
    position: absolute;
    background-color: #242424;
    top:0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 300ms ease;
    opacity: 0;
    visibility: hidden;
}

.menu--open .menu_backdrop{

display: flex;
visibility: visible;
opacity: 1;

}

.menu--open{
height: 100vh;
overflow: hidden;

}
.menu_links{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu_list{
    padding: 32px;
}

.menu_link{
    font-size: 40px;
    color: white;
}

.btn_menu-closed{
    position: absolute;
right: 20px;
top: 10px;
padding: 8px;
color: white;
}

.companies-img {
  filter: grayscale(100%) opacity(60%); /* grayscale removes color, opacity makes it lighter */
  max-width: 250px; /* Restrict the maximum width */
  height: auto; /* Maintain original proportions */
  object-fit: contain; /* Ensure it fits nicely within its box without distortion */

}


/*HERO SECTION SPECIFIC STYLES
   ======================================== */
#hero {
    /* Put top/bottom padding here so the breathing room stays outside the row */
    padding: 80px 0; 
}

.hero-container {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 24px; /* Keeps the text from touching the edge of mobile screens */
    gap: 60px; 
    
}

.hero-content {
    flex: 4; 
    display: flex;  
    flex-direction: column;
}

.hero-title {
    font-size: 48px;
    line-height: 1.2;
    color: #222;
    margin-bottom: 20px;
}

.blue{
    color:#5e18e9;
}

.hero-intro {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
}


/* =========================================
   4. HERO RESPONSIVENESS (Mobile & Tablet)
   ========================================= */
@media (max-width: 900px) {
    .hero-container {
        flex-direction: column-reverse; /* Stacks the image on top of the text */
        text-align: center; /* Centers text for mobile */
        gap: 40px;
    }
    
    .hero-content, .hero-image {
        flex: none; /* Removes the 40/60 split */
        width: 100%; /* Forces both sides to take full width */
    }
    
    .hero-title {
        font-size: 36px; /* Makes the heading fit better on phones */
    }
}

/* The Rounded Email Bar */
.email-bar {
    display: flex;
    background-color: #f4f5f7; /* Light grey background for the whole bar */
    border-radius: 50px; /* Makes the entire bar a rounded pill shape */
    padding: 6px; /* Space between the outer edge and the button */
    border: 1px solid #e0e0e0;
    margin-bottom: 40px;
}

.email-input {
    flex: 1; /* Tells the input to take up all remaining space */
    background: transparent;
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    outline: none; /* Removes the blue glow when clicked */
}

.submit-btn {
    background-color: #5e18e9; /* Your signature green! */
    color: white;
    border: none;
    padding: 15px 32px;
    border-radius: 50px; /* Matches the rounded look of the bar */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #545883;
}

/* Trusted Customers Section */
.trusted-customers p {
    font-size: 14px;
    color: #888;
    margin-bottom: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.customer-icons {
    display: flex;
    gap: 24px;
    font-size: 32px;
    color: #a0a0a0; /* Soft grey icons */
}



.hero-image {
    flex: 6; 
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Adds a nice professional drop shadow */
}




/* =========================================
   RESPONSIVE DESIGN (Tablets & Phones)
   ========================================= */
@media (max-width: 900px) {
    .hero-section {
        flex-direction: column-reverse; /* Stacks them and puts the image on top! */
        padding: 40px 24px;
        gap: 40px;
    }
    
    .hero-content, .hero-image {
        flex: none;
        width: 100%; /* Resets widths to 100% on small screens */
    }

    .hero-title {
        font-size: 36px;
    }
}


/* =========================================
   SERVICES SECTION
   ========================================= */

 


   .ThreeColumnsWithSideImage_Container{
   text-size-adjust: 100%;
    tab-size: 4;
    line-height: inherit;
    font-family: Inter, system-ui;
    --tw-text-opacity: 1;
    color: rgb(36 62 99 / var(--tw-text-opacity));
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    position: relative;
}

/* Revert the main container back to column so the header stays on top of the cards */
.ThreeColumnsWithSideImage_ThreeColumnContainer {
    display: flex;
    max-width: 1024px;
    flex-flow: column; /* Changed back to column */
    align-items: center; /* Centers everything vertically */
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Force the header items to stack and center perfectly */
.header-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the h5, h2, and p inside */
    width: 100%;
    text-align: center;
;
}

/* Apply the 3-column row layout ONLY to the cards */
.services-row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center; /* Ensures the cards are centered horizontally */
}

/* Keep your 33.33% width for the cards */
.AserviceCardDiv {
    max-width: 24rem;
    width: 33.33%; 
}



.ThreeColumnsWithSideImage_Description{
    text-size-adjust: 100%;
    tab-size: 4;
    font-family: Inter, system-ui;
    box-sizing: border-box;
    font-size: large;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    margin: 0px;
    margin-top: 1rem;
    max-width: 36rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.625;
    opacity: 1;
    color: rgb(124 139 161 / var(--tw-text-opacity));
    width: 100%;
    text-align: center;
}

.ThreeColumnsWithSideImage_Spacer{
    text-size-adjust: 100%;
    tab-size: 4;
    line-height: inherit;
    font-family: Inter, system-ui;
    --tw-text-opacity: 1;
    color: rgb(36 62 99 / var(--tw-text-opacity));
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    margin-top: 2.5rem;
    width: 100%;
}

.Aservice-card{
        text-size-adjust: 100%;
    tab-size: 4;
    line-height: inherit;
    font-family: Inter, system-ui;
    --tw-text-opacity: 1;
    color: rgb(36 62 99 / var(--tw-text-opacity));
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
 margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    padding: 2rem 0.5rem;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
}

.imageContainer{
    text-size-adjust: 100%;
    tab-size: 4;
    line-height: inherit;
    font-family: Inter, system-ui;
    --tw-text-opacity: 1;
    color: rgb(36 62 99 / var(--tw-text-opacity));
    box-sizing: border-box;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    flex-shrink: 0;
    border-radius: 9999px;
    border-width: 1px;
    padding: 1.25rem;
    text-align: center;

}

.textContainer{
    text-size-adjust: 100%;
    tab-size: 4;
    line-height: inherit;
    font-family: Inter, system-ui;
    --tw-text-opacity: 1;
    color: rgb(36 62 99 / var(--tw-text-opacity));
    text-align: left;
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    margin-left: 1rem;
    margin-top: 0.5rem;
}

.Atitle{
        text-size-adjust: 100%;
    tab-size: 4;
    font-family: Inter, system-ui;
    --tw-text-opacity: 1;
    color: rgb(36 62 99 / var(--tw-text-opacity));
    text-align: left;
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.025em;
}

.Aservice-desc{
    text-size-adjust: 100%;
    tab-size: 4;
    font-family: Inter, system-ui;
    text-align: left;
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);  
    margin: 0px;
    font-weight: 500;
    line-height: 2;
    --tw-text-opacity: 1;
    color: rgb(124 139 161 / var(--tw-text-opacity));
    margin-top: 1rem;

}

/* =========================================
   TABLET VIEW (Screens smaller than 900px)
   ========================================= */
@media (max-width: 900px) {
    /* Switch from 3 columns to 2 columns */
    .AserviceCardDiv {
        width: 50%;
    }
    
    /* Slightly reduce the massive padding on the main container */
    .ThreeColumnsWithSideImage_ThreeColumnContainer {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    
    /* Shrink the main heading a bit */
    .ThreeColumnsWithSideImage_Heading {
        font-size: 2.5rem;
    }
}

/* =========================================
   MOBILE VIEW (Screens smaller than 640px)
   ========================================= */
@media (max-width: 640px) {
    /* Switch to 1 single column (stacking the cards) */
    .AserviceCardDiv {
        width: 100%;
        max-width: 100%; 
    }

    /* Shrink the heading further for small phone screens */
    .ThreeColumnsWithSideImage_Heading {
        font-size: 2rem;
    }

    /* OPTIONAL BUT RECOMMENDED: 
       Stack the icon on top of the text for mobile, rather than side-by-side */
    .Aservice-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .textContainer {
        margin-left: 0; /* Remove the left margin since it's centered now */
        margin-top: 1rem;
        text-align: center;
    }

    .Atitle, .Aservice-desc {
        text-align: center;
    }
}





/* =========================================
   PROFESSIONALS SECTION
   ========================================= */
#professionals-section {
    padding: 100px 0; /* Generous vertical padding */
    background-color: #ffffff; /* White background */
}

/* Specific flex container behavior for this row */
.row-professionals {
    display: flex;
    align-items: center; /* Vertically centers the text against the image */
    justify-content: space-between;
    gap: 80px; /* Space between the illustration and the text */
    padding: 0 24px; /* Global side padding for mobile safety */
}

/* =========================================
   LEFT portion (Illustration)
   ========================================= */
.pros-image-wrapper {
    flex: 1; /* Takes up exactly 50% of the row */
    display: flex;
    justify-content: center;
}

.img-design {
    width: 100%;
    max-width: 450px; /* Prevents the illustration from getting too huge */
    height: auto;
}

/* =========================================
   RIGHT portion (Content)
   ========================================= */
.pros-content {
    flex: 1; /* Takes up exactly 50% of the row */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns all text and button to the left */
}
 

.pros-big-heading {
    font-size: 44px;
    color: #222;
    line-height: 1.2;
    margin-bottom: 24px;
}

.pros-paragraph {
    font-size: 18px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* The Blue "Learn more" Button */
.btn-learn-more {
    display: inline-block;
    background-color: #007bff; /* Bright professional blue */
    color: #ffffff; /* White text */
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 50px; /* Rounded 'pill' shape */
    font-size: 16px;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 123, 255, 0.3); /* Soft blue shadow */
}

.btn-learn-more:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Lifts slightly */
}

/* =========================================
   RESPONSIVE DESIGN (Mobile & Tablet)
   ========================================= */
@media (max-width: 900px) {
    .row-professionals {
        flex-direction: column; /* Stacks image on TOP of text */
        gap: 50px;
        text-align: center;
    }
    
    .pros-content {
        align-items: center; /* Centers text and button on mobile */
    }

    .pros-big-heading {
        font-size: 32px;
    }
}

/* =========================================
   HOW IT WORKS (STEPS) SECTION
   ========================================= */
#steps-section {
    padding: 100px 0; 
    background-color: #f9f9f9; /* Light grey background */
}

/* Specific flex behavior for this 50/50 row */
.row-split {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 60px; /* Space between the text column and the image */
    padding: 0 24px; /* Global side padding for mobile safety */
}

/* =========================================
   LEFT portion (Text Content)
   ========================================= */
.split-content {
    flex: 1; /* Takes up 50% of the horizontal space */
    display: flex;
    flex-direction: column;
}


.split-heading {
    font-size: 40px;
    color: #222;
    line-height: 1.2;
    margin-bottom: 40px; /* Big gap before the steps start */
}

/* --- The Numbered Steps Styling --- */
.steps-container {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Adds breathing room between each step */
}

.step-item {
    display: flex;
    align-items: flex-start; /* Aligns the icon with the top of the text */
    gap: 20px; /* Space between the icon circle and the text */
}

.step-icon {
    /* This creates the big gray circular icons */
    background-color: #e4e6eb; /* Soft gray background */
    color: #888; /* Darker gray number */
    font-size: 24px;
    font-weight: 900;
    
    /* Perfect Circle Math */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    
    /* Centers the number perfectly inside the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* CRITICAL: Prevents the circle from squishing into an oval on small screens */
    flex-shrink: 0; 
}

.step-title {
    font-size: 22px;
    color: #222;
    margin-bottom: 8px;
}

.step-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* =========================================
   RIGHT portion (Image Column)
   ========================================= */
.split-image {
    flex: 1; /* Takes up 50% of the horizontal space */
}

.split-image img {
    width: 100%;
    height: auto;
    border-radius: 12px; 
    display: block;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08); /* Soft drop shadow */
}

/* =========================================
   RESPONSIVE DESIGN (Mobile & Tablet)
   ========================================= */
@media (max-width: 900px) {
    .row-split {
        flex-direction: column-reverse; /* Stacks image on TOP of the steps on mobile */
        gap: 50px;
    }
    
    .split-heading {
        font-size: 32px;
    }
}

/*VALUES SECTION*/

  /*Individual Block (affords spacing between the two paras) */
.principle-block {
    margin-bottom: 30px; /* Space below the first paragraph block */
}

/* 3. Header Area (Icon + Heading) */
.principle-header {
    display: flex; /* Puts icon and heading in a single row */
    align-items: center; /* Centers them vertically against each other */
    margin-bottom: 12px; /* Space between header and paragraph text */
}

/* 4. Base Icon Styling (the 'Circle') */
.icon {
    display: flex; /* Allows centering the character ($ or 💼) inside the circle */
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    width: 40px; /* Diameter of the circle */
    height: 40px; /* Diameter of the circle */
    border-radius: 50%; /* Makes the rectangle a perfect circle */
    margin-right: 15px; /* Space between the circle and the text */
    font-size: 1.2rem; /* Size of the character inside the circle */
    font-weight: bold;
}

/* 5. Specific Icon Colors */

/* Lavender shaded ($) icon */
.icon-affordable {
    background-color: #c1f4c9; /* Lavender background */
    color: #4B0082; /* Deep Indigo text color for contrast */
}

/* Bluish shaded (briefcase) icon */
.icon-professional {
    background-color: #eb9447; /* Light bluish/cyan background */
    /* Briefcase emoji uses its own natural colors, color property not needed */
}

/* 6. Typography Styling */
.principle-heading {
    margin: 0; /* Removes default browser margins so Flexbox alignment works */
    font-size: 1.5rem;
    color: #333; /* Dark gray for the heading */
    font-weight: 600;
}

.principle-text {
    margin: 0 0 0 55px; /* Aligns the text under the heading, not under the icon (40px icon + 15px margin) */
    font-size: 1rem;
    color: #555; /* Slightly lighter gray for the body text */
    line-height: 1.6; /* Increases line spacing for easy reading */
}

/* --- Responsive adjustment for mobile --- */
@media (max-width: 600px) {
    .principle-text {
        margin: 0; /* On small screens, let text wrap back under the icon */
        padding-top: 10px;
    }
} 

.btn-learn-more {
    /* Sizing & Spacing */
    display: inline-block;
    padding: 12px 28px;
    margin-top: 10px;
    
    /* Colors */
    background-color: #2563eb; /* Vibrant blue */
    color: #ffffff; /* White text */
    
    /* Typography */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none; /* Removes the underline from the link */
    
    /* The Rounded Shape */
    border-radius: 50px; /* High number forces the rounded pill shape */
    
    /* Smooth hover animation */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover Effect */
.btn-learn-more:hover {
    background-color: #1d4ed8; /* Slightly darker blue when hovered */
    transform: translateY(-2px); /* Lifts the button up slightly */
}

/* NEW PRICE CARDS*/

/* Universal Box Sizing based on your copied styles */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Base Layout with Supervisor's Exact Font and Base Color */
.pricing-section {
  position: relative;
  padding: 80px 20px;
  /* Applied exact font family */
  font-family: Inter, system-ui, sans-serif; 
  /* Applied exact text color */
  color: rgb(36, 62, 99); 
  background-color: #f9f9f9;
  overflow: hidden; 
  line-height: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1; 
}

/* Header Styling */
.pricing-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 50px auto;
}

.subheading {
  color: #443ee5;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.heading {
  font-size: 2.5rem;
  /* Kept the supervisor's exact color for the heading */
  color: rgb(36, 62, 99); 
  margin-bottom: 20px;
}

.highlight {
  color: #3e4ce5;
}

.description {
  /* Using a slightly muted opacity of the supervisor's color for the description */
  color: rgba(36, 62, 99, 0.8); 
  line-height: 1.6;
}

/* Pricing Cards Layout */
.plans-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

/* Individual Card Styling */
.plan-card {
  background: white;
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  flex: 1;
  box-shadow: 0 10px 30px rgba(36, 62, 99, 0.08); /* Adjusted shadow to match brand color */
  position: relative;
  overflow: hidden;
  width: 75%;
}

.featured-plan {
  transform: scale(1.05); 
  border: 2px solid #3e5fe5;
  box-shadow: 0 15px 40px rgba(229, 62, 62, 0.15);
  background-color: rgb(19, 100, 170);
  color: white;

}

.plan-highlight-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #FFB4BC, #e53e3e);
}

.P{
     background: linear-gradient(90deg, #b0f2de, #55e0b2);
}



/* Card Content Styling */
.plan-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.name {
  font-weight: 700;
  font-size: 1.2rem;
  color: rgb(36, 62, 99);
  margin-bottom: 15px;
}


.price {
  font-size: 3rem;
  font-weight: 800;
  color: rgb(36, 62, 99);
  margin-bottom: 5px;
}

.duration {
  color: rgba(36, 62, 99, 0.6);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}
.B{
    color: white;
}

.feature {
  color: rgba(36, 62, 99, 0.8);
}

.main-feature {
  font-weight: bold;
  color: rgb(255, 255, 255);
  padding-bottom: 15px;
  border-bottom: 1px solid rgb(226, 232, 240); /* Matched your exact border-color from the inspect tool */
  margin-bottom: 5px;
}

/* Button Styling */
.buy-button {
  width: 100%;
  padding: 15px;
  border-radius: 50px;
  border: 2px solid #e53e3e;
  background: transparent;
  color: #e53e3e;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.Pbtn{
    background: linear-gradient(to right, #63d4be, #88baa8);
    border: none;
    color:white;
}

.Ebtn{
    background: linear-gradient(to right, #ca9a5a, #de791b);
    border: none;
    color:white;
}

.buy-button:hover {
  background: #e53e3e;
  color: white;
}

.buy-button.primary {
  background: #f4f0f0;
  color: rgb(64, 70, 234);
}

.buy-button.primary:hover {
  background: #c53030;
  border-color: #c53030;
}

/* Decorative SVG Blob */
.decorator-blob {
  position: absolute;
  bottom: -200px;
  left: -200px;
  z-index: -1; 
  opacity: 0.5;
  pointer-events: none; 
}

/* Responsive formatting for mobile devices */
@media (max-width: 900px) {
  .plans-container {
    flex-direction: column;
  }
  .featured-plan {
    transform: scale(1); 
  }
}

/* New Mobile Cards */

/* --- BASE TYPOGRAPHY & COLORS --- */
:root {
  --primary-purple: #4f46e5; /* Deep bluish-purple */
  --light-purple: #e0e7ff; 
  --text-dark: #1f2937;
  --text-gray: #4b5563;
  --gray-bg: #f3f4f6; /* For the circular arrows */
  --star-gold: #f59e0b;
}

.testimonials-section {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- THE 50/50 ROW LAYOUT --- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* Space between the left and right halves */
  align-items: stretch; /* Makes both columns equal height */
}

/* Calculate 50% width minus half the gap space */
.col-half {
  flex: 1 1 calc(50% - 20px);
  display: flex;
  flex-direction: column;
}

/* --- LEFT SIDE: Image --- */
.image-container {
  border-radius: 16px;
  overflow: hidden;
}

.testimonial-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the image fills the space without stretching */
  min-height: 400px; /* Prevents image from shrinking too much */
}

/* --- RIGHT SIDE: The 30/70 Split --- */
.content-top {
  flex: 0 0 30%; /* Forces this container to take exactly 30% of the height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0px;
}

.content-bottom {
  flex: 0 0 70%; /* Forces this container to take exactly 70% of the height */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes the arrows to the bottom */
}

/* --- TEXT STYLING --- */
.sub-heading {
  color: var(--primary-purple);
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.main-heading {
  font-size: 2.5rem;
  color: var(--text-dark);
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.2;
}

.description {
  color: var(--text-gray);
  line-height: 1.6;
  margin-top: 0;
}

/* --- SLIDER & TESTIMONIAL STYLING --- */
.slider-wrapper {
  position: relative;
  flex-grow: 1; /* Takes up available space above the arrows */
}

.slide {
  background-color: #ffffff;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Soft, professional shadow */
}

/* Visibility classes for React to toggle later */
.active-slide {
  display: block;
}

.hidden-slide {
  display: none;
}

.stars {
  color: var(--star-gold);
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.slide-heading {
  font-size: 1.2rem;
  color: var(--primary-purple);
  margin-top: 0;
  margin-bottom: 12px;
}

.A_img{
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
}

@media (min-width:640px){
    .A_img{
        height: 5rem;
        width: 5rem;
    }
}

@media (max-width: 768px) {
  
  /* 1. Force the main container into a column */
  .test-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  /* 2. Force the image and text into a column */
  .author_img {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 3. THE FIX: Strip away any absolute positioning so it falls inline */
  .slider-controls {
    position: static !important; /* Forces it back into the normal document flow */
    transform: none !important;  /* Removes any X/Y nudging from desktop */
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px; /* Space between the text and the buttons */
    gap: 15px; /* Space between the left and right arrow */
  }
}

.author_img{
    display: flex;
}

.author-info{
    margin-top: 0.5rem;
    text-align: center;
    padding-top: 30px;
    color: gray;
}

@media (min-width: 768px){
    .author-info{
    text-align:left;}
}

@media (min-width:640px ){
    .author-info{
        margin-left: 1.5rem;
        margin-top: 0px;
    }
}

.author-name{
    font-size: 1.25rem;
    font-weight: 700;
}


.slide-text {
  color: var(--text-gray);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 20px;
}


.author-company {
    font-weight: 500;
   
}

.test-box{
    margin-top: auto;
    display: flex;
    flex-direction:row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* --- CIRCULAR ARROWS --- */
.slider-controls {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 0px;
}

.arrow-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background-color: var(--gray-bg);
  color: var(--text-dark);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.arrow-btn:hover {
  background-color: var(--primary-purple);
  color: #ffffff;
}

/* --- RESPONSIVE MEDIA QUERIES (Mobile) --- */
@media (max-width: 900px) {
  .row {
    flex-direction: column; /* Stacks the columns vertically */
  }
  
  .col-half {
    flex: 1 1 100%; /* Columns now take up 100% of the width */
  }
  
  .content-top, .content-bottom {
    flex: auto; /* Turns off the strict 30/70 split on mobile so text can flow naturally */
  }
  
  .testimonial-img {
    min-height: 250px; /* Smaller image on mobile */
  }
}

/* Banner styles */

.GetStarted_StyledContainer{
    margin-bottom: 5rem;
 position: relative; 
 box-sizing: border-box;
 border-width: 0px;
 border-style: solid;
 border-color: rgb(226 232 240);
}

.GetStarted_StyleContainer-2{
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.GetStarted_BgColor1{
    position: relative;
    border-radius: 0.5rem;
    --tw-bg-opacity:1;
    background-color: rgb(100 21 255);
    padding-top: 5rem;
    padding-bottom: 5rem;
    overflow: hidden;
}

.GetStarted_Row{
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    max-width: 1024px;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align:base_line;
    font-family: 'Roboto', sans-serif;
}

.GetStarted_ColumnContainer{
    max-width: 32rem;
}

.GetStarted_Text{
    font-size: 1.5rem;
    font-weight: 700;
    --tw-text-opacity:1;
    color: rgb(247 250 252);
}

.GetStarted_ColumnContainer.GetStarted_LinksContainer{
margin: top 3rem;
display: flex;
flex-direction: row;
justify-content: center;
gap: 1.5rem;
}

.GetStarted_Link{
 white-space: nowrap;
 text-align: center;
    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.025rem;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 300ms;
}

.GetStarted_Link.GetStarted_PrimaryLink {
    --tw-bg-opacity:1;
    background-color: rgb(245 101 101);
    --tw-text-opacity:1;
    color: rgb(247 250 252);
    --tw-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px;
    box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} 

.GetStarted_Link.GetStarted_SecondaryLink{
    --tw-border-opacity:1;
    border-color: rgb(160 174 192);
    --tw-text-opacity:1;
    color: rgb(247 250 252);
    
}

a{
    color: inherit;
    text-decoration: inherit;
}

.GetStarted_DecoratorBlobContainer{
    position:absolute;
    inset: 0px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: 0.5rem;
}

.GetStarted__DecoratorBlob1{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20rem;
    width: 20rem;
    --tw-translate-x: -5rem;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-translate-y: 8rem;
    --tw-text-opacity: 1;
    color: rgb(80 17 204 / var(--tw-text-opacity));
    opacity: 0.5;  
} 
.GetStarted__DecoratorBlob2{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 20rem;
    width: 20rem;
    --tw-translate-x: 5rem;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-translate-y: -16rem;
    --tw-text-opacity: 1;
    color: rgb(80 17 204 / var(--tw-text-opacity));
    opacity: 0.5;
}
        
  /* =========================================
   MOBILE & TABLET MEDIA QUERY (< 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Reduce the massive 5rem padding to save screen space */
    .GetStarted_StyleContainer-2 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .GetStarted_BgColor1 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* 2. Stack the main content vertically and center it */
    .GetStarted_Row {
        flex-direction: column;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 3. Slightly reduce the main text size */
    .GetStarted_Text {
        font-size: 1.25rem;
    }

    /* 4. Stack the buttons vertically so they don't squish */
    .GetStarted_ColumnContainer.GetStarted_LinksContainer {
        flex-direction: column;
        width: 100%; /* Ensures the container takes full width */
        margin-top: 2rem;
    }

    /* Make the links stretch across the mobile screen */
    .GetStarted_Link {
        width: 100%; 
    }

    /* 5. Shrink the decorative blobs so they don't cover the text */
    .GetStarted__DecoratorBlob1, 
    .GetStarted__DecoratorBlob2 {
        height: 12rem;
        width: 12rem;
        opacity: 0.25; /* Make them more transparent so text is easier to read over them */
    }
}



        
        
       

        
               

/* =========================================
   FOOTER SECTION
   ========================================= */
#main-footer {
    background-color:rgb(100 21 255); /* A rich, deep navy blue */
    padding: 80px 0 40px 5%; /* Lots of space on top, less on bottom */
    color:rgb(247 250 252); /* White text for contrast */
}

/* --- Top Portion: 5 Column Grid --- */
.footer-links-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Divides into 5 equal columns */
    gap: 20px;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
}

.footer-col ul {
    list-style: none; /* Removes bullet points */
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: rgb(247 250 252); /* A soft, readable grey-blue */
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease, padding-left 0.3s ease; /* Smooth hover animation */
}

.footer-col ul li a:hover {
    color: #007bff; /* Bright blue on hover */
    padding-left: 5px; /* Creates a cool "slide right" effect when hovered */
}

/* --- Middle Portion: Dividing Line --- */
.footer-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Very light, slightly transparent white line */
    margin: 40px 0; /* Space above and below the line */
}

/* --- Bottom Portion: Logo, Copyright, Socials --- */
.footer-bottom-row {
    display: flex;
    flex-direction: column;
    -webkit-box-align:center;
    align-items: center;
    -webkit-box-pack:justify;
    justify-content: justify;
}

@media(min-width: 768px){
    .footer-bottom-row{
        flex-direction: row;
    }
}



/* --- Bottom Portion: Logo, Copyright, Socials --- */
.footer-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Fixed from 'justify' */
}

@media(min-width: 768px){
    .footer-bottom-row {
        flex-direction: row;
    }
}

.footer-logo {
    display: flex; 
    align-items: center;
    justify-content: center;
    flex: 1; /* Takes up equal space so the center text stays centered */
    margin-bottom: 1rem; /* Added spacing for mobile */
}  

.footer-links-row, 
.row, 
.footer-bottom-row {
    max-width: 1200px; /* Stops it from stretching infinitely */
    margin-left: auto; /* Centers the container */
    margin-right: auto;
}

/* Fixed typo: min-widht to min-width */
@media(min-width: 768px){
    .footer-logo {
        justify-content: flex-start;
        margin-bottom: 0;
    }
}

.img-footer {
    width: 2rem;
}

.footer-title {
    margin-left: 0.5rem;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: rgb(247 250 252);
}

.copy-rights {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(203 213 224);
}

@media(min-width: 640px){
    .copy-rights {
        font-size: 1rem;
    }
}

.Social-icons {
    display: flex;
    margin-top: 1.5rem;
    justify-content: center;
}

@media(min-width: 768px){
    .Social-icons {
        margin-top: 0px;
        flex: 1; /* Takes up equal space so the center text stays centered */
        justify-content: flex-end; /* Pushes icons to the far right */
        padding-right: 5%;
    }
}

.socials {
    display: inline-flex; /* Allows centering the SVG perfectly */
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* Fixed width */
    height: 2.5rem; /* Fixed height */
    margin-right: 1rem;
    cursor: pointer;
    border-radius: 50%; /* Perfect circle */
    background-color: rgb(247 250 252);
    color: rgb(26 32 44);
    transition: all 300ms ease;
}

/* Removes the margin on the last icon so it aligns flush right */
.socials:last-child {
    margin-right: 0;
}

.socials svg {
    height: 1.25rem;
    width: 1.25rem;
}


  

/* =========================================
   NAVBAR RESPONSIVE DESIGN
   ========================================= */
@media (max-width: 900px) {
    .nav-links {
        display: none; /* Hides the desktop links on mobile */
    }
    
    .btn_menu {
        display: block; /* Shows the hamburger button on mobile */
        position: absolute;
        right: 24px;
        top: 18px;
    
    }
}

/* DESKTOP FAILSAFE */
/* If the screen is larger than a tablet, force the mobile menu to stay hidden */
@media (min-width: 901px) {
    .menu_backdrop {
        display: none !important; 
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/*Brief*/

.feather-briefcase{
    text-size-adjust: 100%;
    tab-size: 4;
    line-height: inherit;
    font-family: Inter, system-ui;
    --tw-border-opacity: 1;
    text-align: center;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    color: rgb(155 44 44 / var(--tw-text-opacity));
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(226, 232, 240);
    display: block;
   /* vertical-align:middle;*/
    height: 1.25rem;
    width: 1.25rem;
}

/* --- Base Desktop Layout (You likely already have this) --- */
.footer-links-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
    gap: 30px; /* Space between columns */
}

/* --- Tablets (Smaller screens, under 1024px) --- */
@media (max-width: 1024px) {
    .footer-links-row {
        grid-template-columns: repeat(3, 1fr); /* Drops to 3 columns */
    }
}

/* --- Mobile Phones (under 768px) --- */
@media (max-width: 768px) {
    .footer-links-row {
        grid-template-columns: repeat(2, 1fr); /* Drops to 2 columns */
    }
}

/* --- Very Small Phones (under 480px) --- */
@media (max-width: 480px) {
    .footer-links-row {
        grid-template-columns: 1fr; /* Stacks into a single vertical column */
        text-align: center; /* Centers text for a cleaner look on tiny screens */
    }
    
    /* Center the unordered lists if text is centered */
    .footer-col ul {
        display: flex;
        flex-direction: column;
        align-items: center; 
    }
}