:root {
  --primary: #FE2020 !important; /* Set the new primary color (#FE2020) */
  --secondary: #DFDFDF;
}

/* styles.css */

/* Navbar styling */
.navbar {
  background-color: #fff; /* Change the background color of the navbar */
  padding-left: 30px; /* Add left padding */
  padding-top: 0;
  padding-bottom: 0;
  margin-right: -15px;
  line-height: 50px;
  position: fixed;
  top: 0;
  z-index: 1000;
}

/* Remove padding from the navbar in mobile view */
@media (max-width: 767px) {
  .navbar {
    padding-left: 0;
    padding-right: 15px;
  }

  .landing-section {
    padding-top: 80px !important; /* Adjust this value as needed */
  }
}

/* Navbar logo */
.navbar-brand img {
  max-height: 80px; /* Adjust the height of the logo as needed */
}

/* Navbar links styling */
.navbar-nav li.nav-item a.nav-link {
  color: #000; /* Change the color of the navigation links */
  font-size: 16px; /* Adjust the font size of the links */
  font-weight: 500; /* Adjust the font weight of the links */
  margin-left: 20px;
}

/* Hover effect for navigation links */
.navbar-nav li.nav-item a.nav-link:hover {
  color: #FE2020; /* Change the color to your desired hover color */
}


/* Navbar button styling */
.navbar-nav li.nav-item a.btn-primary {
  background-color: #FE2020;
  color: #fff;
  width:130px;
  flex: 1; /* Use flex to expand the button to fill available space */
  height: 100%; /* Set button height to match navbar height */
  display: flex; /* Use flexbox for button content alignment */
  align-items: center; /* Vertically center button content */
  justify-content: center; /* Horizontally center button content */
  border-radius: 0; /* Remove border radius to make it a rectangle */
  transition: background-color 0.3s ease;
}

/* Hover effect for the navbar button */
.navbar-nav li.nav-item a.btn-primary:hover {
  background-color: #b30000; /* Change the background color on hover */
  color: #fff;
}

/* Sticky navbar */
/* Uncomment the following lines if you want the navbar to stick to the top on scroll */
/*
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
}
*/

/* Button styles for the primary button */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
  /* Add other button styles here */
}
  

.btn-primary:hover {
  background-color: #b30000; /* Add a darker shade of red for the hover effect if desired */
  border-color: #b30000;
}


/* Button styles for the primary button */
.btn-custom {
  background-color: white;
  border-color: white;
  color: var(--primary);
  border-radius: 0;
  height: 100%;
  text-align: center; /* Center-align the text */
  line-height: 35px; /* Set line-height equal to the button height for vertical alignment */
  /* Add other button styles here */
}

.btn-custom:hover {
 
  background-color: #b30000; /* Add a darker shade of red for the hover effect if desired */
  border-color: #b30000;
  color: white;
}




.rectangle {
    width: 150px; /* Adjust the width of the rectangle as needed */
    height: 50px; /* Adjust the height of the rectangle as needed */
    line-height: 1; /* Make sure the line height doesn't affect the height */
    background-color: var(--primary); /* Use the primary color defined in your custom CSS */
    display: flex; /* Use flexbox to center the content */
    align-items: center; /* Center content vertically */
  }

.rectangle a {
    color: #fff; /* Set the text color to white */
  }
  
  
  /* Set Quicksand as the font for the entire website */
body {
  font-family: 'Quicksand', sans-serif;
}

/* Style the button as needed */
.nav-item .btn {
  /* Add your custom button styles here, if desired */
}

/* Style the landing section */
.landing-section {
  background-color: #fff; /* Set the background color to white */
  padding: 90px 0; /* Add padding as needed for spacing */
  margin-top: 30px;
}


/* Style the large text inside the landing section */
.landing-section h1 {
  font-size: 4.5rem; /* Adjust the font size as needed */
  color: #000 !important; /* Set the text color to black */
  text-align: left; /* Align the text to the left */
}

/* Use the primary color for specific words in the h1 element */
.landing-section h1 .text-primary {
  color: #FE2020 !important;
}

/* Styles for smaller screens (e.g., mobile view) */
@media (max-width: 767px) {
  .landing-section {
    padding: 50px 0; /* Adjust the padding to reduce the gap on top and bottom */
  }
  .landing-section h1 {
    font-size: 30px; /* Adjust the font size to your desired value for mobile view */
    line-height: 1; /* Increase the line height to add space between lines */
    text-align: left; /* Center the text in mobile view */
  }
}


/* General styles */
.about {
  background-color: #f2efef;
  padding: 0;
}

.about h2 .text-primary {
  color: var(--primary) !important;
  font-weight: normal;
}


/* Default styles for the about section */
.about h2 {
  font-size: 30px;
  font-weight: normal;
}


@media (max-width: 767px) {
  .about {
    padding: 20px 0 !important; /* Adjust the padding to reduce the gap on top and bottom */
  }
}

/* Styles for smaller screens (e.g., mobile view) */
@media (max-width: 767px) {
  .about h2 {
    
    padding: 0 0 !important; /* Adjust the padding to reduce the gap on top and bottom */
    font-size: 16px !important; /* Adjust the font size to your desired value for mobile view */
    line-height: 1.6;
  }

}

/* Increase the height of the image in mobile view */
@media (max-width: 767px) {
  .mobile-image {
    height: 900px; /* Set the desired height for the image */
  }
}


.custom-button {
  background-color: var(--primary);
  color: #FE2020;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-button:hover {
  background-color: #b30000; /* Add a darker shade of red for the hover effect if desired */
}

.custom-button {
  /* Default styles for larger screens */
  transform: rotate(-270deg);
  width: 150px;
  height: 60px;
}

/* Mobile view styles */
@media (max-width: 767px) {
  .custom-button {
    display: none; /* Hide the button in mobile view */
  }
}

.services {
  background-color: #f2efef; /* Set the new background color as desired */
}

/* Custom CSS for maintaining consistent card sizes */
.services .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.services .card-body {
  flex-grow: 1;
}

/* Style the card footer */
.card-footer {
  background-color: #fff; /* Set the background color of the card footer */
  text-align: center; /* Center the icon horizontally */
  border: none;
  display: flex;
  align-items: center;
}

/* Style the icon */
.card-footer i {
  font-size: 30px; /* Adjust the font size as needed */
  color: #FE2020; /* Set the color of the icon */
  margin-left: 8px;
}

/* Custom primary color (adjust the value as needed) */
:root {
  --primary: #FE2020;
}

/* Add hover effect for the card on hover */
.card:hover {
  background-color: var(--primary);
  color: #fff; /* Set the text color to white on hover */
  transition: background-color 2s ease; /* Add a smooth transition for background color */
    cursor: pointer;
}

/* Set the color of the icon on hover */
.card:hover .icon i {
  color: #fff;
}

/* Set card footer background color and text color on hover */
.card:hover .card-footer {
  background-color: var(--primary);
  color: #fff;
  
  transition: background-color 2s ease; /* Add a smooth transition for background color */
    cursor: pointer;
}

/* Set icon color on card footer to white on hover */
.card-footer .icon i:hover {
  color: #fff;
}

/* Styles for smaller screens (e.g., mobile view) */
@media (max-width: 767px) {
  .col-md-3 {
    margin-bottom: 20px; /* Add margin to create space between cards */
  }
}

/* Styles for smaller screens (e.g., mobile view) */
@media (max-width: 767px) {
  .col-md-4 {
    margin-bottom: 20px; /* Add margin to create space between cards */
  }
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

/* Custom CSS for the title section */
.title-section {
  background-color: #f9f9f9;
}

.title-section h1 {
  font-size: 4rem; /* Adjust the font size as needed */
  color: #000;
  text-align: left;
  font-weight: normal; /* Set the font weight to normal (regular) */
  padding: 10px 0;
}


/* Add custom styles for the divider line */
.divider-line {
  border: 0;
  height: 1.5px;
  background-color: #000;
  margin-top: 25px;
}

/* Hide the divider line in mobile view */
@media (max-width: 767px) {
  .divider-line {
    display: none;
  }
}


.title-section {
    background-color: #fff; /* Set the background color to white */
    padding: 100px 0; /* Add padding to the top and bottom of the title section */
    text-align: left; /* Center the text horizontally */
}

.title-section h2 {
    font-size: 32px; /* Adjust the font size of the title */
    text-align: left; /* Center the text horizontally */
}

 /* Mobile view styles */
 @media (max-width: 767px) {
  .title-section {
    padding: 20px 0; /* Adjust the padding to reduce the gap on top and bottom */
  }

  .title-section h1 {
    font-size: 24px; /* Adjust the font size to your desired value for mobile view */
    line-height: 1; /* Increase the line height to add space between lines */
    text-align: left !important; /* Center the text in mobile view */
  }
}

.our-projects {
  
  padding: 50px 0; /* Add padding to the top and bottom of the title section */
}
/* Custom CSS for the accordion */

 /* Custom styles to remove the square icon from the accordion button */
 .accordion-button::before {
  display: none; /* Hide the default square icon */
}

.custom-accordion .accordion-item {
  border: none; /* Remove default border */
  border-bottom: 1px solid #DFDFDF; /* Add border at the bottom */
}

.custom-accordion .accordion-item:last-child {
  border-bottom: none; /* Remove border at the bottom for the last item */
}

.custom-accordion .accordion-button {
  background-color: #FFF; /* Set the background color of the accordion buttons */
  color: #000; /* Set the text color of the accordion buttons */
  font-weight: 400; /* Adjust font weight as needed */
  text-align: left; /* Align text to the left */
}

.custom-accordion .accordion-header {
  background-color: transparent; /* Set the background color of the accordion headers */
  border: none; /* Remove default border */
}

.custom-accordion .accordion-body {
  border-bottom: 1px solid #DFDFDF; /* Add border at the bottom of the accordion body */
}

.custom-accordion .accordion-body p {
  margin-bottom: 0; /* Remove default margin from paragraphs inside accordion body */
}

/* Style the accordion collapse and expand icons */
.custom-accordion .accordion-button::before {
  content: "\f078"; /* Use the appropriate Unicode for the expand icon (check Bootstrap icons documentation) */
  font-family: "BootstrapIcons"; /* Use the Bootstrap Icons font-family */
  float: left;
  margin-right: 10px;
}

.custom-accordion .accordion-button[aria-expanded="true"]::before {
  content: "\f077"; /* Use the appropriate Unicode for the collapse icon (check Bootstrap icons documentation) */
}

/* Remove the default box-shadow on focus */
.custom-accordion .accordion-button:focus {
  border-bottom-color: 2px solid var(--primary); /* Change the value to your primary color variable */
  box-shadow: none; /* Remove the default box-shadow */
}

/* Increase the height between accordions */
.custom-accordion .accordion-item {
  margin-bottom: 10px; /* Adjust the margin as needed */
}

/* Custom styles to add a bottom border to all accordion items */
.accordion-item {
  border-bottom: 1px solid #dee2e6; /* Add a bottom border to all accordion items */
  margin-bottom: 1px; /* Add a margin to create consistent spacing between accordion items */
}

/* Custom styles for the active (selected) accordion item */
.accordion-item.active {
  border-bottom: 1px solid #dee2e6; /* Add a bottom border to the active accordion item */
}

/* Remove borders from unselected accordions */
.custom-accordion .accordion-button:not(.collapsed) {
  border-color: transparent;
}

/* Add a bottom border to the selected accordion */
.custom-accordion .accordion-button:not(.collapsed)::after {
  border-bottom-color: var(--primary); /* Use the primary color defined in your custom CSS */
}

/* Style the selected accordion's header text color */
.custom-accordion .accordion-header .accordion-button:not(.collapsed) {
  color: var(--primary); /* Use the primary color defined in your custom CSS */
}

/* Increase the font size of the accordion title */
.custom-accordion .accordion-header .accordion-button {
  font-size: 1.5rem; /* Adjust the font size as needed */
}

/* Add this custom CSS to style the first column description */
.project-description {
  background-color: var(--primary); /* Use the primary color as the background color */
  color: #fff; /* Set the text color to white */
  padding: 30px; /* Add padding to create some space around the content */
  border-radius: 0; /* Set border-radius to 0 to remove rounded edges */
}

@media (max-width: 767px) {
  .accordion-button {
      font-size: 20px !important; /* Adjust the font size as needed */
  }
}

.gallery {
  background-color: #f2efef; /* Set the background color for the gallery section */
}

.gallery-card {
  height: 350px; /* Adjust the height of the card as needed */
  border-radius: 0; /* Remove the rounded edges for the entire card */
  overflow: hidden; /* Hide the content that goes beyond the card boundaries */
}

.gallery-card img {
  max-height: 250px; /* Adjust the image height as needed */
  object-fit: cover; /* Maintain the aspect ratio of the image */
  border-radius: 0; /* Remove the rounded edges from the image */
}

.gallery .card-img-top {
  height: 200px; /* Set the height of the card images */
  object-fit: cover; /* Ensure the images cover the entire card area */
}

.gallery .card-title {
  font-size: 18px; /* Adjust the font size of the card titles */
}

.gallery .card-text {
  font-size: 14px; /* Adjust the font size of the card descriptions */
}

.custom-icon {
  font-size: 24px; /* Adjust the font size to increase/decrease the icon size */
  color: var(--primary); /* Change the icon color to the primary color */
  transition: color 0.3s ease; /* Add a smooth transition for the color change */
}

/* Add hover effect to the custom-icon class */
.custom-icon:hover {
  color: #fff; /* Set the icon color to white on hover */
}

.contact {
  margin: 0;
}

.contact .col-md-6 {
  padding: 2rem; /* Adjust the padding as needed */
  min-height: 450px; /* Adjust the height as needed */
}


.bg-custom-primary {
  background-color: var(--primary);
}

/* Custom styles for the social media list */
.social-media-list {
  list-style: none; /* Remove bullet points */
}

.social-media-list li {
  margin-bottom: 10px; /* Add spacing between items */
}

.social-media-list li:last-child {
  margin-bottom: 0; /* Remove bottom margin from the last item */
}

.social-media-list a {
  text-decoration: none; /* Remove underline from links */
  color: #000; /* Set the default color for links */
}

/* Set primary color on hover */
.social-media-list a:hover {
  color: #FE2020; /* Replace with your primary color */
}

/* Custom CSS to remove rounded edges from form fields */
.form-control.no-rounded {
  border-radius: 0 !important;
}
/* Remove rounded edges from form fields */
.form-control {
  border-radius: 0 !important; /* Set border-radius to 0 to remove rounded edges */
}
section.contact {
  padding: 0;
}

section.contact .col-md-6 {
  height: 100%;
  padding: 0;
}

section.contact .bg-white {
  background-color: #f2efef; /* Change the background color of the first row */
  padding: 15px 15px;
}

section.contact .email-subscription {
  background-color: #f2efef; /* Change the background color of the second row */
  color: #000; /* Set the text color to black for better visibility */
  padding: 15px 15px;
  height: 100%;
}

.email-subscription-form {
  display: flex;
  align-items: center;
}

.email-subscription-form .input-group {
  height: 50px;
  width: 100%;
}

.email-subscription-form input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.email-subscription-form .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Remove blue border for input fields */
input[type="email"]:focus {
  outline: none;
  border-color: var(--primary) !important; /* Change to the desired border color */
}

/* Remove the default browser focus outline */
*:focus {
  outline: none !important;
}

.work-culture {
  background-color: #f9f9f9;
}

.work-culture-card {
  background-color: #fff;
 
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.work-culture-card i {
  font-size: 32px;
  color: #FE2020;
}

.work-culture-card h2 {
  font-size: 24px;
  color: #333;
  margin-top: 10px;
}

.work-culture-card p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}


.why-choose-us {
  padding: 80px 0;
  background-color: #f2f2f2;
}

.why-choose-us .feature {
  padding: 20px;
  background-color: #fff;
}

.why-choose-us h2 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 40px;
}

.feature {
  text-align: left;
  margin-bottom: 40px;
}

.feature i {
  font-size: 40px;
  color: #FE2020;
  margin-bottom: 20px;
}

.feature h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.feature p {
  font-size: 16px;
}

.title-and-culture {
  background-color: #f9f9f9;
}

.contact-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #dee2e6;
}

.contact-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.contact-table td:first-child {
  width: 20px;
}


.custom-padding {
        padding: 100px !important; /* You can adjust the padding value as per your requirement */
    }

.icon-large {
      font-size: 24px; /* You can adjust the font size as per your requirement */
      color: #FE2020;
  }
  
.contact-table tr:last-child td {
    border-bottom: none;
}

.custom-container {
  padding: 30px !important; /* Adjust the value as per your preference */
}

/* Replace 'your-image-url.jpg' with the URL of your desired background image */
.our-projects {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Add any additional styling as per your requirement */
}

/* Set the text color to white for better visibility */
.our-projects h1,
.our-projects p,
.our-projects .accordion-button {
  color: #000;
}

 /* Styles for career-landing-section */
 .career-landing-section {
  background-image: url('assets/brothertypewriter.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 70px; /* Adjust this value to create space below the navbar */
  height: 600px; /* Set the desired height for the section in desktop view */
}

/* Styles for mobile view (up to 767px) */
@media (max-width: 767px) {
  .career-landing-section {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding-top: 50px; /* Adjust this value to create space below the navbar */
      height: 300px; /* Set the desired height for the section in mobile view */
  }
}

/* Styles for the TELORIAN text */
.telorian-text {
  color: #FE2020; /* Replace #FF0000 with the desired text color (e.g., red) */
}

.career-landing-section h1 {
  font-size: 4.5rem; /* Adjust the font size as needed */
  color: #000 !important; /* Set the text color to black */
  text-align: left; /* Align the text to the left */
  padding-top: 150px ;
}

/* Styles for smaller screens (e.g., mobile view) */
@media (max-width: 767px) {
  .career-landing-section {
    padding-top: 85px; /* Adjust the padding to reduce the gap on top and bottom */
  }
  .career-landing-section h1 {
    font-size: 50px; /* Adjust the font size to your desired value for mobile view */
    line-height: 1; /* Increase the line height to add space between lines */
    text-align: left; /* Center the text in mobile view */
    padding: 0;
  }
  .lead{
    font-size: smaller;
  }
}

    /* Add any custom styles for the available-positions section */
    .available-positions {
        padding: 80px 0; /* Adjust the padding as needed */
    }

    .available-positions h2 {
        margin-bottom: 40px;
        padding: 10px 0; /* Adjust the padding as needed */
    }

    /* Styling for the position cards */
    .position-card {
        background-color: #f9f9f9;
        border-radius: 0px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 30px;
        transition: transform 0.2s ease-in-out;
    }

    .position-card h3 {
        margin-bottom: 20px;
        color: #FE2020; /* Blue color for position title */
    }

    .position-card p {
        margin-bottom: 15px;
    }

    .position-card h4 {
        margin-bottom: 10px;
    }

    .position-card ul {
        margin-left: 20px;
    }

    /* Hover effect on position cards */
    .position-card:hover {
        transform: translateY(-5px);
    }

    /* Add any custom styles for the internship-program section */
    .internship-program {
        padding: 80px 0; /* Adjust the padding as needed */
    }

    .internship-program h2 {
        margin-bottom: 40px;
    }

    .internship-program p {
        margin-bottom: 20px;
    }

    .internship-program img {
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .internship-program .btn-primary {
        border-radius: 0; /* Remove border radius for the button */
    }

    .bg-light{
      background-color: #dee2e6;
    }

    img:hover {
      cursor: crosshair; /* Change 'pointer' to the desired cursor type */
    }