@font-face {
    font-family: 'Switzer';
    src: url('path-to-font/switzer.woff2') format('woff2'),
        url('path-to-font/switzer.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* For Joyride STD font */
@font-face {
    font-family: 'Joyride STD';
    src: url('path-to-font/JoyrideSTD.ttf') format('truetype');
    /* Modify path to the font file */
    font-weight: normal;
    font-style: normal;
}

.footer-section a {
  color: white;
  text-decoration: none;
}
/* Font family applied correctly */
.font-primary {
    font-family: 'Switzer', sans-serif !important;
}

* {
    font-family: 'Switzer', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    background-color: #151515 !important;
    width: 100%;
}

.container {
    min-width: 100%;
    padding: 0;
    margin: 0;
    --bs-gutter-x: 0 !important;
}

.container>* {
    width: 100%;
    /* Ensure child elements take full width */
    padding: 1px;
    /* Apply padding to each child */
    box-sizing: border-box;
    /* Include padding in the width */
    color: white;
    /* Text color for readability */
    margin-bottom: 10px;
    /* Add spacing between child elements */
}

.make-Logo {
    width: 80px;
    height: 50px;
}

.container-fluid {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    /* Optional, to limit the content width */
    padding: 0;
    /* padding: 1rem; */
}

/* Make the navbar responsive */
.navbar {
    margin-bottom: 0 !important;
    background-color: black !important;
}

/* Navbar-toggler icon (hamburger) styling */
.navbar-toggler-icon {
    filter: invert(1);
    /* Inverts the color to make it white */
}

/* Navbar links styling */
.navbar-nav .nav-link {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    margin-right: 10px;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #fff;
    transition: width 0.4s ease;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

.form-container {
    padding: 100px 20px;
    justify-items: center;
    width: 100%;
    margin-top: 40px;
    background-color: #151515 !important;
}

/* Flexbox layout for technology section */
.form-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    max-width: 980px;
    padding: 80px 0;
}

.form-left {
    margin-top: 25px;
}

.form-left h2 {
    font-size: 34px;
    margin-bottom: 20px;
    color: white;
}

.form-left p {
    color: #6e6e6e;
    font-size: 16px;
    line-height: 1.7;
    max-width: 550px;
    color: white;

}

.form-left p span a {
    color: #EAF765 !important;
    text-decoration: none !important;
}

/* Form Right (Container for Form) */
.form-right form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    padding-left: 30px;
}

/* Form Row (Grouping Fields Together) */
.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

/* Form Group (Individual Field Container) */
.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Label Styling */
.form-group label {
    font-size: 14px;
    margin-bottom: 8px;
    color: white;
}

/* Required Field Indicator */
.form-group label span {
    color: red;
}

.footer-section a {
  color: white;
  text-decoration: none;
}

/* Input Field Styling */
.form-field {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100% !important;
}


/* Form Column for Checkboxes and Privacy Policy */
.form-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 20px;
}

/* Checkbox Group */
.checkbox-group p {
    display: block;
    font-size: 14px;
    color: white;
    margin-bottom: 6px;
    padding-bottom: 10px;
}

.checkbox-group label {
    display: block;
    font-size: 14px;
    color: white;
    margin-bottom: 6px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 2px;
}

/* Privacy Policy */
.privacy-policy {
    font-size: 14px;
    color: #FAFAFA;
}

.privacy-policy a {
    color: #EAF765;
    text-decoration: none;
    text-decoration: underline;
}


/* Button Styling */
.submit-btn {
    padding: 10px 25px;
    font-weight: bold;
    background-color: #EAF765;
    color: #151515;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    align-self: flex-end;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-content {
        flex-direction: column;
        /* Stack columns vertically on smaller screens */
        width: 100% !important;
    }

    .form-right {
        padding: 40px 0 0 0 !important;
        width: 100%;
    }

    .form-right form {
        padding-left: 0 !important;
    }
}

@media (max-width: 481px) {
    .form-right form {
        padding-left: 0 !important;
    }

    .form-row {
        flex-direction: column;
        /* Stack form fields vertically when the screen is smaller than 481px */

    }
}



.team-contents {
    padding: 0 30px;
    justify-items: center;
    width: 100%;
    margin-top: -20px;
    background-color: #151515 !important;
}

.main-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    max-width: 980px;
    padding: 80px 0 ;
    gap: 260px;
    /* Adds space between the left and right contents */
}

.content-left h2 {
    flex: 1;
    max-width: 40%;
    font-size: 34px;
    /* Adjusted width to ensure headings fit in one line */
}

.content-left p {
    flex: 1;
    max-width: 42%;
    padding-top: 18px;
    font-size: 15px;
    font-weight: bold;
    /* Adjusted width to ensure headings fit in one line */
}

.content-left .title-large h2 {
    font-size: 90px !important;
}

.content-left .title-large h2 span {
    -webkit-text-stroke: 2px #fff;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);

}

.content-right {
    flex: 2;
    margin-top: 6px;
    line-height: 1.6;
    padding-left: 10rem;
    width: 100%;
}
.content-right  p a{

    font-weight: bold;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Joyride STD";
    font-size: 22px;
    font-family: "WesFy Black", sans-serif;

}
.content-right p a i{
    color: #EAF765;
}
.underline {
    width: 100%;
    height: 1px;
    background-color: #ddd;
    margin-bottom: 30px;
    max-width: 980px;
    /* Ensure the underline is never larger than the parent container */
    margin: 0 auto;
    /* Center it within the parent container */
}

.with-top-underline {
    border-top: 1px solid #ddd;
}

.with-bottom-underline {
    border-bottom: 1px solid #ddd;
}

.button1 {
    display: inline-block;
    background-color: white;
    color: #000;
    border: none;
    padding: 1rem 2rem;
    line-height: 1.25rem;
    margin: 5px;
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 2rem;
    margin-top: 20px;
}

.button1:hover {
    background-color: #000;
    color: #fff;
}

  
  
.bg-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Full height of the viewport */
    background-image: url('../Images/MAKE-Agency-About-Hero.webp'); /* Background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 20px 0 0 0;
    overflow: hidden; /* Prevent images from overflowing */
  }
  
  .bg-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Black overlay */
    z-index: 1; /* Overlay is above the background but below the images */
  }
  
  .bg-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3; /* Text is above images and overlay */
    pointer-events: none; /* Prevent the text from blocking mouse events */
  }
  
  .bg-content h3 {
    margin: 0;
    font-size: 40px;
  }
  
  .image-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Prevent the images from interfering with mouse events */
    z-index: 1; /* Images are below the overlay and text */
  }
  
  .gallery-image {
    position: absolute;
    width: 200px;
    height: 200px;
    object-fit: cover;
    opacity: 0; /* Initially hide the images */
    transition: opacity 1 ease, transform 1s ease;
    pointer-events: none; /* Prevent images from interfering with mouse events */
  }
  
  .gallery-image.show {
    opacity: 1; /* Show images when active */
  }
  
  
  .navigation-header {
    background-color: #151515 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 9rem;
    width: 100%;
    box-sizing: border-box;
  }
  
  .scroll-top-section {
    display: flex;
    justify-content: space-between;
    /* Ensures space between the children */
    align-items: center;
    width: 100%;
    max-width: 1000px;
    padding: 0;
  }
  
  .scroll-top-section h3 {
    color: white;
  }
  
  .scrolling-button {
    margin-top: -1rem;
    width: 5%;
  }
  
  .custom-arrow-button {
    background-color: transparent;
    color: white;
    border: 1px solid white;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  
  .footer-info {
    background-color: #151515 !important;
    margin-top: -20px;
    padding: 5px;
  }
  
  .footer-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Align items to the start vertically */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    /* Centers the footer on the page */
    padding: 0;
  
  }
  
  .footer-info img {
    width: 40%;
    /* Maintains aspect ratio */
    margin-bottom: 18px;
    /* Space below the image */
    align-items: center;
  }
  
  
  .footer-info .d-flex {
    position: relative;
    top: -0.2em;
  }
  
  .footer-info p {
    color: #f8f8f899;
    font-size: 0.8rem;
  }
  
  
  .footer {
    color: white;
    background-color: #151515;
    padding: 2rem 0;
    /* Added padding for better spacing */
    margin-top: -15px;
  }
  
  .footer-section {
    display: flex;
    justify-content: space-between;
    /* Ensures space between the columns */
    align-items: flex-start;
    /* Align items to the start vertically */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    /* Centers the footer on the page */
    padding: 0;
  }
  

  
  /* Links and Social columns should be closer together */
  .footer-column.links-column,
  .footer-column.social-column {
    flex: 1;
    /* These columns will take up less space */
    min-width: 150px;
    /* Ensure the columns have a minimum width */
  }
  

  .footer-column h3 {
    font-size: 13px;
    margin-bottom: 15px;
    color: #f8f8f899;
    padding: 10px 0;
  }
  
  .footer-column p {
    font-size: 14px;
    padding: 10px 0;
    color: white;
  }
  
  .footer-column input[type="email"] {
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid white;
    background: transparent;
    color: white;
    outline: none;
    width: 100%;
    max-width: 22rem;
    /* Adjusted max-width to make it more responsive */
  }
  
  .footer-column button {
    padding: 10px;
    background-color: #eaf765;
    border: none;
    color: black;
    font-size: 0.6rem;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1.2rem;
    font-weight: bold;
    width: 100%;
    max-width: 7rem;
    /* Ensures button is not too wide */
    margin-top: 1rem;
  }
  
  
  /* Responsive adjustments */
  @media (max-width: 920px) {
    .footer-section {
      flex-direction: column;
    }
  
    .footer-column {
      margin-bottom: 1.5rem;
      /* Adjusting the margin to ensure proper spacing in column layout */
    }
  
    .footer-column.subscribe-column {
      max-width: 100%;
    }
  
    .footer-column.links-column,
    .footer-column.social-column {
      flex: 1;
      /* Makes these columns equal width in the mobile view */
    }
    .main-content {
        flex-direction: column; /* Stack content vertically */
        gap: 20px; /* Reduce gap */
      }
    
      .content-left, .content-right {
        max-width: 100%; /* Full width for stacked layout */
        padding-left: 0 !important;
        
      }
   
  }
  @media (max-width: 810px) {
    .bg-content h3{
        font-size: 24px; /* Reduce font size for smaller screens */
        text-align: center; /* Ensure text stays centered */
        width: 100%; /* Ensure the text takes full width */
        word-wrap: break-word; /* Prevent long text from overflowing */
        text-wrap: wrap;
      }
  }