/* ******************************* */
/* General Styles */
/* ******************************* */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Open+Sans:wght@400;600;700&family=Oswald:wght@400;500;700&family=Permanent+Marker&family=Roboto+Condensed:wght@400;700&display=swap');

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background: #fff;
    overflow-x: hidden;
    color: #333;
    scroll-behavior: smooth; /* For smooth scrolling */
}

.container {
    max-width: 1320px; /* 10% wider */
    margin: 0 auto;
    padding: 0 20px;
}




/* ******************************* */
/* Header Styles */
/* ******************************* */


.header {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1000;
    border-bottom: 1px solid #ddd;
    width: 100%;
    display: flex; /* Ensure the header uses flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    height: 100px; /* Set a fixed height to make vertical centering easier */
    padding-top:5px
}


/* Full width for header container */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;

}


/* Logo container */
.logo {
    text-align: center; /* Keep logo centered */

}

/* Logo anchor tag */
.logo a {
    display: flex;
    align-items: center; /* Vertically center the logo */
    text-decoration: none;
}

/* Logo "BOOM!" Styles */
.logo-boom {
    position: relative;
    font-family: 'Bangers', cursive;
    font-size: 3.75em; /* Keep the original large size */
    background: linear-gradient(to bottom, #ffdd00 0%, #ff6600 50%, #990000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 2px; /* Small margin */
    padding-right: 12px; /* Keep your original padding */

    /* Thinner black outline */
    -webkit-text-stroke: 2px black;
}

.logo-boom::before {
    content: 'BOOM!';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: black;
    text-shadow: 4px 5px 0 rgba(0, 0, 0, 1); /* Black drop shadow */
    margin-right: 5px;
    padding-right: 5px;
}

/* Logo "Copy" Text Styles */
.logo-copy {
    font-family: 'Roboto', sans-serif;
    font-size: 3.25em; /* Maintain original size */
    font-weight: 500;
    color: #000;
    letter-spacing: -0.05em; /* Maintain letter spacing */
}

/* Navigation */
.nav {
    position: absolute; /* Absolutely position to the right */
    right: 30px; /* Align the nav button to the right */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Correct vertical alignment */
}

/* Navigation button */
.nav a {
    text-decoration: none;
    color: #fff; /* This was the hover state, now the regular state */
    font-weight: bold;
    padding: 15px 25px;
    border: 2px solid #007BFF;
    border-radius: 25px;
    background-color: #007BFF; /* This was the hover background, now the regular state */
    transition: background-color 0.3s, color 0.3s;
}

.nav a:hover {
    background-color: #fff; /* This was the regular state, now the hover state */
    color: #007BFF; /* This was the regular state, now the hover state */
}

/* ******************************* */
/* Hero Section */
/* ******************************* */

.hero {
    position: relative;
    height: 40vh; /* Maintain the overall height */
    color: #fff;
    background-color: #0d47a1; /* Fallback color */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0d47a1;
    background-size: cover;
    background-position: 50% 50%;
}

.hero .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove unnecessary padding */
    text-align: center;
}

.hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 8em; /* Keep the large size */
    font-weight: 700;
    margin: 0;
    padding: 0; /* Remove any padding */
    line-height: 1.1; /* Slightly tighter line height */
}

.hero-subtitle {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5em; /* Keep the large size */
    font-weight: 500;
    margin-top: 0.6em; /* Reduce top margin */
    margin-bottom: 0; /* No bottom margin */
    padding: 0; /* Ensure no extra padding */
    line-height: 1.1; /* Slightly tighter line height */
}
/* ******************************* */
/* Section Separators */
/* ******************************* */

.section-separator {
    width: 100%;
    text-align: center;
    padding: 0;
    position: relative;
    height: 0; /* Zero height since the brain icon will act as the separator */
}

.section-separator i {
    font-size: 80px; /* Brain icon size */
    color: #007BFF;
    position: absolute;
    top: -40px; /* Half of the icon's height to straddle the sections evenly */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    z-index: 2; /* Ensure the brain is visible above sections */
}

/* Section separator only for brain icon */
.section-separator.brain-icon i {
    font-size: 80px; /* Adjusted brain icon size */
}

/* Ensure sections are positioned correctly */
section {
    position: relative;
    z-index: 1; /* Keep sections behind the brain icon */
}


/* ******************************* */
/* Section Headings */
/* ******************************* */

.section-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 3em;
    font-weight: 700;
    text-transform: uppercase;
    
    position: relative;
    text-align: center;
}

.section-heading.animate-left {
    opacity: 0;
    transform: translateX(-100px);
    animation: slideInLeft 1s forwards;
}

.section-heading.animate-right {
    opacity: 0;
    transform: translateX(100px);
    animation: slideInRight 1s forwards;
    margin-bottom:15px;
}

.section-heading .highlight {
    color: #007BFF;
}

.section-heading .underline {
    position: relative;
    display: inline-block;
}

.section-heading .underline:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 5px;
    background-size: contain;
}

/* ******************************* */
/* Animations */
/* ******************************* */

@keyframes slideInLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-heading.animate-left,
.section-heading.animate-right,
.section-heading.animate-up {
    opacity: 1;
    transform: none;
}

/* ******************************* */
/* Schools of Persuasion Section */
/* ******************************* */

.schools-of-persuasion {
    padding-bottom: 50px; /* Reduced padding */
    background-color: #e3f2fd;
    position: relative;
    overflow: hidden;
}

.schools-of-persuasion p {
    font-size: 1.5em;
    padding-bottom:30px;
}

.schools-slider {
    position: relative;
    height: 80px; /* Keep the container height */
    overflow: hidden; /* Keep overflow hidden */
    display: flex; /* Flexbox for centering */
    align-items: center; /* Vertically center content */
    margin-top: 0px;
    padding-bottom:30px;
 
}

.school-name {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 3em; /* Ensure the font size is controlled here */
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    color:#000;
    margin-top: -10px; /* Adjust this to tweak the vertical position */
    padding: 0; /* No extra padding */
    margin: 0; /* No extra margin */
}

/* Animation keyframes for sliding */
@keyframes slideSchools {
    0% { transform: translateY(0%); }
    5.55% { transform: translateY(-100%); }
    11.11% { transform: translateY(-200%); }
    16.66% { transform: translateY(-300%); }
    22.22% { transform: translateY(-400%); }
    27.77% { transform: translateY(-500%); }
    33.33% { transform: translateY(-600%); }
    38.88% { transform: translateY(-700%); }
    44.44% { transform: translateY(-800%); }
    50% { transform: translateY(-900%); }
    55.55% { transform: translateY(-1000%); }
    61.11% { transform: translateY(-1100%); }
    66.66% { transform: translateY(-1200%); }
    72.22% { transform: translateY(-1300%); }
    77.77% { transform: translateY(-1400%); }
    83.33% { transform: translateY(-1500%); }
    88.88% { transform: translateY(-1600%); }
    94.44% { transform: translateY(-1700%); }
    100% { transform: translateY(-1800%); }
}

.schools-of-persuasion::before {
    content: '';
    opacity: 0.1;

}

/* ******************************* */
/* Stop Guessing Section */
/* ******************************* */

.stop-guessing {

    background-color: #fff;
}

.stop-guessing .content {

    margin: 0 auto;
    padding-bottom:50px;
}

.stop-guessing p {
    font-size: 1.5em;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

/* Adjust the icon style */
.icon-ab-testing i {
    font-size: 450px; /* Adjust the icon size as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Make sure it occupies full height */
    position: absolute;
    top: 50%;
    left: 50%;

}

/* ******************************* */
/* Our Process Section */
/* ******************************* */

.our-process {
    padding: 50px 0;
    background-color: #e3f2fd;
    position: relative;
    overflow: hidden;
    z-index: 1;
}


/* Process steps container */
.process-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; /* Avoid vertical centering */
    max-width: 1320px;
    margin: 0 auto;
    gap:40px;
    padding-top:15px;
    padding-bottom:50px;
}

/* Individual step */
.step {
    width: 350px;
    height: 350px;
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative; /* Ensure icon stays inside the card */
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Center content vertically */
    align-items: center;      /* Center content horizontally */
}
/* Adjust step content positioning */
.step-content {
    position: absolute;
    top: 10px; /* Move content closer to the top */
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Move content towards the top */
    align-items: center;
}

/* Ensure the boxes are squares */
.step::before {
    display: none; /* Temporarily remove this to see if it affects the layout */
}


/* Step numbers with blue circle behind them */
.step-number {
    width: 100px; /* Bigger circle */
    height: 100px; /* Bigger circle */
    background-color: #007BFF;
    color: #fff;
    font-size: 2.5em; /* Larger font size */
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -50px; /* Adjusted to be halfway in and out of the box */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Blue background icon with 10% opacity */
.icon-bg {
    font-size: 15em;  /* Adjust as needed */
    color: rgba(0, 123, 255, 0.1);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 60%;   /* Position at the vertical center */
    left: 50%;  /* Position at the horizontal center */
    transform: translate(-50%, -50%);  /* Offset by 50% to truly center */
    z-index: 0; /* Ensure it's behind the text */
}

.step h3 {
    font-size: 1.5em;
    padding-top:50px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    margin-top: 30px; /* Moved heading closer to the top */
}

.step p {
    font-size: 1.5em; /* Matched to the sentence example */
    line-height: 1.5;
    position: relative;
    z-index: 2;
    max-width: 90%; /* Prevent text overflow */
    margin: 0 auto;
    margin-top: 10px; /* Adjusted to move text closer to the heading */
}

/* Blue color for BOOM! COPY in the heading */
.section-heading .highlight {
    color: #007BFF;
}

/* 50px padding below BOOM! COPY Process line */
.section-heading.animate-right {
    margin-bottom: 50px;
}



/* ******************************* */
/* Benefits Section */
/* ******************************* */

.benefits {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
}

.benefit-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.benefit-item {
    width: 250px;
    margin: 20px;
    text-align: center;
    animation: fadeInUp 1s forwards;
    position: relative;
    background-color: #e3f2fd;
    padding: 30px;
    border-radius: 10px;
}

.benefit-item .icon-circle {
    width: 60px;
    height: 60px;
    background-color: #007BFF;
    color: #fff;
    font-size: 2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}

.benefit-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.benefit-item p {
    font-size: 1.1em;
    line-height: 1.5;
}

/* ******************************* */
/* What Makes Us Different Section */
/* ******************************* */

.what-makes-us-different {
    padding: 50px 0 50px 0; /* 50px padding at the bottom */
    background-color: #e3f2fd;
}

.difference-content {
    max-width: 800px; /* Ensure the block doesn't go too wide */
    margin: 0 auto; /* Center the entire block horizontally */
    text-align: center; /* Center the contents */
}

.difference-content ul {
    list-style: none;
    padding: 0;
    text-align: left; /* Align the text inside the list to the left */
    display: inline-block; /* Ensure the list itself is treated as an inline block to center it */
}

.difference-content ul li {
    font-size: 1.875em; /* Keep the larger text size */
    margin-bottom: 45px; /* Keep the padding between tickbox lines */
    position: relative;
    padding-left: 80px; /* Slightly reduced left padding to make more room */
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    
}

.difference-content ul li i {
    position: absolute;
    left: 0;
    top: 0;
    color: #007BFF;
    font-size: 1.75em; /* Checkbox icon size */
    margin-right: 20px; /* Balanced space between checkbox and text */
}

/* Section heading styles */
.what-makes-us-different .container h2 {
    margin-bottom: 40px; /* Increase spacing between heading and checkboxes */
}

.section-heading .highlight {
    color: #007BFF; /* Highlight BOOM! Copy in blue */
}




/* ******************************* */
/* Why Choose Us Section */
/* ******************************* */

.why-choose-us {
    padding: 50px 0;
    background-color: #fff;
}

.reasons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom:30px;
}

.reason {
    width: 300px;
    margin: 20px;
    text-align: center;
    animation: fadeInUp 1s forwards;
}

.reason .icon-circle {
    width: 70px;
    height: 70px;
    background-color: #007BFF;
    color: #fff;
    font-size: 2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.reason h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.reason p {
    font-size: 1.1em;
    line-height: 1.5;
}

/* ******************************* */
/* Call to Action Section */
/* ******************************* */

.call-to-action {
    padding: 100px 0;
    background-color: #007BFF;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.call-to-action p {
    font-size: 1.5em;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.call-to-action .btn {
    background-color: #fff;
    color: #007BFF;
    padding: 20px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.5em;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.call-to-action .btn:hover {
    background-color: #f0f0f0;
}

.call-to-action::before {
    content: '';
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: -50px;
    width: 150%;
    height: 100%;
    background-size: 100px 100px;
}

/* ******************************* */
/* Modal Styles */
/* ******************************* */

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8); /* Black background with opacity */
}

.modal-content p {
    font-size: 1.5em; /* Adjust this to match your body text size */
    font-family: 'Open Sans', sans-serif; /* Ensure consistent font */
    line-height: 1.6;
    text-align: center; /* Center-align the text in the modal */
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 40px;
    border-radius: 10px;
    position: relative;
    max-width: 500px;
    box-sizing: border-box;
    text-align: left;
    width: 100%; /* Fixed width */
    height: 730px; /* Fixed height */
    overflow-y: auto; /* Allows scrolling if content overflows */
}

.close-btn {
    position: absolute;
    top: 10px;  /* Adjust this to make it aligned properly */
    right: 15px; /* Ensure equal spacing on top and right */
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Centering and setting proper styles for h2 */
.modal-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5em; /* Keep the large size */
    font-weight: 500;
    margin-top: 0.6em; /* Reduce top margin */
    margin-bottom: 0; /* No bottom margin */
    padding: 0; /* Ensure no extra padding */
    line-height: 1.1; /* Slightly tighter line height */
    text-align:center;
}

/* Adjust form fields for better alignment */
.modal-content label {
    display: block;
    margin: 25px 0 5px;
    font-size: 1.2em;
    
}

.modal-content input,
.modal-content textarea {
    width: calc(100% - 40px); /* Reduce padding to ensure equal space on both sides */
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.2em; /* Increase font size */
    font-family: 'Open Sans', sans-serif; /* Ensure consistent font */

}

.modal-content textarea {
    resize: none;
}

.modal-content input[type="submit"] {
    background-color: #007BFF;
    color: #fff;
    border: none;
    margin: 30px auto 0 auto; /* Center the button */
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    padding: 15px;
    display: block; /* Make the button a block element */
    width: auto; /* Remove width constraints to fit the content naturally */
    text-align: center; /* This aligns the text inside the button */
}


.modal-content input[type="submit"]:hover {
    background-color: #0056b3;
    text-align:center;
}

/* ******************************* */
/* Footer Styles */
/* ******************************* */

footer {
    background-color: #333;
    color: #fff;
    padding: 5px 0;
    text-align: center;
}

footer a {
    color: #fff;
    margin-left: 10px;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}




/* ******************************* */
/* Icon Styles */
/* ******************************* */

/* Large Icon Styles */
.large-icon {
    position: absolute;
    top: 50%; /* Vertically center at 50% of the section's height */
    transform: translateY(-50%); /* Pull it up by 50% of its height to achieve perfect vertical centering */
    z-index: 1001;
    font-size: 500px;
    visibility: visible;
    text-align: left; /* Keeps the icon aligned left */
    padding-left:35px;
}

/* Icons on white backgrounds - set to blue */
.icon-process, .icon-ab-testing, .icon-benefits, .icon-choose, .icon-services, .icon-different {
    color: #007BFF; /* Blue icon on white background */
    font-size: 400px; /* Adjust individual sizes as needed */
    visibility: visible; /* Ensure visibility */
    opacity: 0.1; /* Reduce opacity for subtle background effect */
}


/* Icons on blue backgrounds - set to white */
.icon-talk {
    color: #fff !important; /* White icon on blue background */
    font-size: 450px !important; /* Adjust individual sizes as needed */
    display: block !important; /* Ensure the icon is displayed */
    visibility: visible !important; /* Ensure icon is visible */
    opacity: .1 !important; /* Reduce opacity for subtle background effect */

}



/* Ensure the sections are positioned properly */
section {
    position: relative; /* Make sure each section is positioned relative to its container */
    padding: 50px 0; /* Add 50px padding to top and bottom */
}

/* Ensure content stays above the icons */
.section-heading, .container, .benefit-items, .reasons {
    position: relative;
    z-index: 2; /* Keep content above the large icons */
}





/* ******************************* */
/* Services Offered Seection */
/* ******************************* */
.services-offered {
    padding: 50px 0;
    background-color: #fff;
    position: relative;
}

.service-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom:30px;
}

.service-item {
    width: 250px;
    margin: 20px;
    text-align: center;
    background-color: #e3f2fd;
    padding: 30px;
    border-radius: 10px;
}

.service-item .icon-circle {
    width: 60px;
    height: 60px;
    background-color: #007BFF;
    color: #fff;
    font-size: 2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}

.service-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.services-offered p {
    font-size: 1.5em; /* Match the size used in other sections */
    line-height: 1.6;
    text-align: center;

}

.service-item p {
    font-size: 1.1em;
    line-height: 1.5;
}

.icon-services {
    color: #007BFF;
    font-size: 450px;
}



.section-separator.brain-icon i {
    font-size: 80px; /* Adjust this value to fit your needs */
    color: #007BFF;
    position: absolute;
    top: -40px; /* Adjust to control the vertical position */
    left: calc(50% - 40px); /* Offset by half the icon's width to center it */
    z-index: 2;
}



/*****************************/
/* Legal Page Specific Styles */
/*****************************/

.legal-heading {
    font-size: 3em; /* Larger than H2 */
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
}

.legal-subheading {
    font-size: 2em; /* Size consistent with subheadings on legal pages */
    font-weight: 600;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 15px;
}

.legal-body {
    font-size: 1.5em; /* Matches the size of 'There are 18 ways...' text */
    line-height: 1.6;
    color: #333;
}














/* ******************************* */
/* Responsive Styles for 1024px */
/* ******************************* */
@media (max-width: 1024px) {
    .step, .reason, .benefit-item {
        width: 45%; /* Adjust width for steps, reasons, and benefits */
    }

    .process-steps {
        display: flex;
        flex-direction: column; /* Stack the steps vertically */
        align-items: center; /* Center-align the process steps */
    }

    .step {
        width: 100%; /* Full width for each step */
        max-width: 500px; /* Ensure steps don't exceed max width */
        height: 350px; /* Set a fixed height for consistency */
        margin: 20px auto; /* Center horizontally */
    }

    /* Ensure the step number and icon are centered */
    .step-number {
        width: 100px; /* Adjust size of the step number circle */
        height: 100px;
        font-size: 2.5em; /* Adjust font size */
        top: -50px; /* Adjust positioning */
    }

    /* Re-center the brain icons */
    .section-separator.brain-icon i {
        left: 50%; /* Center the icon */
        transform: translateX(-50%); /* Ensure the icon is centered */
    }

    .step-content {
        position: relative;
        z-index: 2;
        text-align: center; /* Center the text */
    }

    .step-content h3 {
        margin-top: 40px; /* Ensure there is spacing between the step number and heading */
    }

    .icon-bg {
        display: none; /* Hide background icons at this size */
    }

    .our-process {
        padding-top: 50px; /* Ensure extra padding above the process section */
        padding-bottom: 50px; /* Ensure extra padding below the process section */
    }
}

/* ******************************* */
/* Responsive Styles for 780px */
/* ******************************* */

@media (max-width: 780px) {

    /* Adjust the header padding for logo and button */
    .header-container {
        display: flex;
        justify-content: space-between; /* Push the logo to the left and button to the right */
        padding-left: 10px; /* Ensure small padding for logo */
        padding-right: 5px; /* Ensure small padding for Let's Talk button */
    }

    .nav a {
        position: relative;
        right: -15px; /* Adjust this value to move the button to the right */
    }

    /* Fix for H2 headings not wrapping */
    .section-heading {
        font-size: 2.5em; /* Adjust font size slightly larger than 480px */
        word-wrap: break-word; /* Ensure headings break onto the next line */
        white-space: normal; /* Prevent overflowing out of the screen */
    }

    /* Increase font size for hero section titles */
    .hero-title {
        font-size: 6em; /* Increase size */
    }

    .hero-subtitle {
        font-size: 4.5em; /* Increase size */
    }

    /* Process Section: Ensure consistent box sizes and alignment */
    .step {
        width: 100%; /* Full width */
        max-width: 500px; /* Ensure proper width */
        height: 350px; /* Set consistent height */
        margin: 20px auto; /* Center horizontally */
        position: relative; /* Ensure correct positioning for the step number */
    }

    /* Adjusting step content for consistent alignment and padding */
    .step-content {
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Center content horizontally */
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        margin-top: -10px; /* Adjust vertical positioning of content */
    }

    /* Adjust spacing between headings and text in step boxes */
    .step-content h3 {
        margin-bottom: 25px; /* Add space below the heading */
    }

    /* Adjust paragraph spacing */
    .step-content p {
        margin-top: -10px; /* Move paragraph higher to prevent overflow */
        padding: 0;
    }

    /* Re-center the step number */
    .step-number {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -50px; /* Adjusted to be half in/half out consistently */
        width: 100px;
        height: 100px;
        font-size: 2.5em;
        line-height: 100px; /* Vertically center the number in the circle */
    }

    /* Re-center the brain icons */
    .section-separator.brain-icon i {
        left: 50%; /* Center the icon */
        transform: translateX(-50%); /* Ensure it is fully centered */
    }

    /* Hide the large icons */
    .large-icon {
        display: none; /* Hide the background icons */
    }

    /* Reduce padding in the call to action */
    .call-to-action {
        padding: 40px 0; /* Reduce padding */
    }

    .call-to-action p {
        font-size: 1.5em; /* Adjust text size */
    }

    /* Reduce padding below "Let's Talk" button */
    .call-to-action .btn {
        margin-bottom: 20px; /* Reduce bottom margin */
    }

    /* Fix "What Makes Boom Copy Different" wrapping issue */
    .difference-content ul li {
        white-space: normal; /* Ensure the text wraps onto the next line */
        font-size: 1.75em; /* Adjust font size */
        margin-bottom: 40px; /* Adjust spacing between tickboxes */
        padding-left: 70px; /* Adjust padding for icons */
    }

    /* Padding for proper spacing */
    .why-choose-us, 
    .our-process {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Process-steps alignment */
    .process-steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    /* Re-center the brain icons */
    .section-separator.brain-icon i {
        left: 50%;
        transform: translateX(-50%);
    }

    .call-to-action {
        padding: 40px 0;
    }
}



/* ******************************* */
/* Responsive Styles for 450px */
/* ******************************* */

@media (max-width: 450px) {

    /* Adjust the header padding for logo */
    .header-container {
        display: flex;
        justify-content: center; /* Center the logo */
        padding-left: 5px; /* Ensure small padding for logo */
    }

    /* Removing "Let's Talk" button */
    .nav {
        display: none;
    }

    /* Fix for H2 headings not wrapping */
    .section-heading {
        font-size: 2em; /* Reduce font size */
        word-wrap: break-word; /* Ensure headings break onto the next line */
        white-space: normal; /* Prevent overflowing out of the screen */
    }

    /* Further adjustments for the hero section */
    .hero-title {
        font-size: 4.5em; /* Slightly reduce size */
    }

    .hero-subtitle {
        font-size: 2.5em; /* Keep the subtitle readable */
    }

    /* Center the content in the "Why BOOM! Copy" section */
    .why-choose-us .container,
    .our-process .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Padding for proper spacing */
    .why-choose-us, 
    .our-process {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Fixing alignment of step boxes */
    .process-steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    /* Ensure steps are centered */
    .step {
        margin: 20px auto;
        text-align: center; /* Center content within the step */
        padding: 0; /* Remove left/right padding */
        min-height: 340px; /* Set a minimum height for consistency */
        position: relative; /* Required for absolute positioning of step number */
    }

    /* Fix padding/margin in the step-content */
    .step-content {
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Ensures the content is perfectly centered within the step */
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        margin-top: -10px; /* Move the content up slightly */
    }

    /* Adjust heading and paragraph inside the step box */
    .step-content h3 {
        margin-top: -20px; /* Move heading higher */
        padding-top: 0; /* Adjust padding if necessary */
    }

    .step-content p {
        margin-top: -10px; /* Move paragraph higher to prevent it from overflowing out of the box */
        padding: 0; /* Remove extra padding */
    }

    /* Adjusting step number to be half-in/half-out */
    .step-number {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -135px; /* Adjust the top value for consistency */
        width: 80px;
        height: 80px;
        font-size: 2em;
        line-height: 80px; /* Ensures number is vertically centered inside the circle */
    }

    /* Re-center the brain icons */
    .section-separator.brain-icon i {
        left: 50%; /* Center the icon */
        transform: translateX(-50%); /* Ensure it is fully centered */
    }

    /* Fix the width of reasons div in "Why BOOM! Copy" section */
    .reasons {
        width: 100%; /* Ensure full width for content */
    }

    /* Reason section individual items */
    .reason {
        width: 90%; /* Ensure wider items in reasons section */
        margin: 20px auto; /* Center the items */
    }

    /* Hide the large icons */
    .large-icon {
        display: none; /* Hide the background icons */
    }

    /* Reduce padding in the call to action */
    .call-to-action {
        padding: 40px 0; /* Reduce padding */
    }

    .call-to-action p {
        font-size: 1.2em; /* Adjust text size */
    }

    /* Reduce padding below "Let's Talk" button */
    .call-to-action .btn {
        margin-bottom: 20px; /* Reduce bottom margin */
    }


    .difference-content ul li {
        font-size: 1em; /* Adjust font size here to shrink the text */
        white-space: normal; /* Ensure the text wraps onto the next line */
        margin-bottom: 15px; /* Adjust the spacing between each item if needed */
        line-height: 1.5; /* Adjust line height for better readability */
    }
/* Adjust the spacing between the heading and text in all step boxes */
.step-content h3 {
    margin-bottom: 25px; /* Add space below the heading */
}


}



/* ******************************* */
/* Responsive Styles for 600px */
/* ******************************* */

@media (max-width: 700px) {

    /* Adjust the header padding for logo and button */
    .header-container {
        display: flex;
        justify-content: space-between; /* Push the logo to the left and button to the right */
        padding-left: 15px; /* Ensure small padding for logo */
        padding-right: 5px; /* Ensure small padding for Let's Talk button */
    }

    .nav a {
        margin-right: 5px; /* Adjust right margin to fine-tune button position */
        text-align: center; /* Ensure the button is centered properly */
    }

    /* Fix for H2 headings not wrapping */
    .section-heading {
        font-size: 2em; /* Reduce font size */
        word-wrap: break-word; /* Ensure headings break onto the next line */
        white-space: normal; /* Prevent overflowing out of the screen */
    }

    /* Further adjustments for the hero section */
    .hero-title {
        font-size: 4.5em; /* Slightly reduce size */
    }

    .hero-subtitle {
        font-size: 2.5em; /* Keep the subtitle readable */
    }

    /* Center the content in the "Why BOOM! Copy" and "Our Process" sections */
    .why-choose-us .container,
    .our-process .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Padding for proper spacing */
    .why-choose-us, 
    .our-process {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Fixing alignment of step boxes */
    .process-steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    /* Ensure steps are centered and have consistent height */
    .step {
        margin: 20px auto;
        text-align: center; /* Center content within the step */
        padding: 0; /* Remove left/right padding */
        min-height: 360px; /* Set a consistent minimum height across all steps */
        position: relative; /* Required for absolute positioning of step number */
    }

    /* Fix padding/margin in the step-content */
    .step-content {
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* Ensures the content is perfectly centered within the step */
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        margin-top: -10px; /* Move the content up slightly */
    }

    /* Adjust heading and paragraph inside the step box */
    .step-content h3 {
        margin-top: -20px; /* Move heading higher */
        padding-top: 0; /* Adjust padding if necessary */
    }

    .step-content p {
        margin-top: -10px; /* Move paragraph higher to prevent it from overflowing out of the box */
        padding: 0; /* Remove extra padding */
    }

    /* Adjusting step number to be half-in/half-out */
    .step-number {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -175px; /* Adjust the top value for consistency */
        width: 80px;
        height: 80px;
        font-size: 2em;
        line-height: 80px; /* Ensures number is vertically centered inside the circle */
    }

    /* Fix the width of reasons div in "Why BOOM! Copy" section */
    .reasons {
        width: 100%; /* Ensure full width for content */
    }

    /* Reason section individual items */
    .reason {
        width: 90%; /* Ensure wider items in reasons section */
        margin: 20px auto; /* Center the items */
    }

    /* Re-center the brain icons */
    .section-separator.brain-icon i {
        left: 50%; /* Center the icon */
        transform: translateX(-50%); /* Ensure it is fully centered */
    }

    /* Hide the large icons */
    .large-icon {
        display: none; /* Hide the background icons */
    }

    /* Reduce padding in the call to action */
    .call-to-action {
        padding: 40px 0; /* Reduce padding */
    }

    .call-to-action p {
        font-size: 1.2em; /* Adjust text size */
    }

    /* Reduce padding below "Let's Talk" button */
    .call-to-action .btn {
        margin-bottom: 20px; /* Reduce bottom margin */
    }

    .difference-content ul li {
        font-size: 1.25em; /* Adjust font size here to shrink the text */
        white-space: normal; /* Ensure the text wraps onto the next line */
        margin-bottom: 15px; /* Adjust the spacing between each item if needed */
        line-height: 1.5; /* Adjust line height for better readability */
    }
    .step-content h3 {
        margin-bottom: 25px; /* Add space below the heading */
    }
}