/* General Reset and Box Model */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* testing chnage on git */
  
  /* Page Section */
  .page-section {
    min-height: 100vh;
  }


  .strikethrough {
    position: relative;
    display: inline-block;
    color: #21A2D0; /* Adjust the color to match the text color */
    z-index: 2; /* Higher z-index means this will be on top */
  }
  
  .strikethrough::after {
    content: '';
    position: absolute;
    left: -200px;
    top: 50%;
    right: 100px;
    border-top: 15px solid #21A2D0; /* Adjust the color and thickness of the line here */
    opacity: 0.5; /* Adjust the opacity as needed */
    transform: translateY(-50%);
    z-index: -1; /* Lower z-index means this will be behind the parent element */
  }
  
  /* Navigation Bar */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    background-color: #151748;
    padding: 0 2em;
    height: 30vh;
  }
  
  .nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
  }
  
  .nav-logo {
    margin: 0 5em 0 4em;
    transform: translateY(10px);
  }
  
  .nav-item {
    margin-left: 2em;
  }
  
  .nav-item a {
    margin: 0 1em;
    font-size: 1rem;
    text-decoration: none;
    color: rgb(78, 167, 236);
    font-family: 'Roboto', sans-serif;
  }
  
  .message-btn {
    /* padding: 0.5em 1em; */
    background-color: #151748;
    color: rgb(78, 167, 236);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    /* transform: translateY(6px); */
    margin-bottom: 1rem;
    margin-top: 2.2rem;
  }
  
  /* Hero Section */
  .hero {
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    position: relative;
  }
  
  .hero h1, .hero h2 {
    margin: 0;
    padding: 0;
    position: absolute;
    color: #21A2D0; /* Adjust color in one place */
    font-family: 'Maven Pro', sans-serif;
    letter-spacing: 5px;
  }
  
  .hero h1 {
    top: -10%;
    left: 10%;
    font-size: 7rem;
  }
  
  .hero h2 {
    top: 10%;
    left: 10%;
    color: #ffffff;
    font-size: 7rem;
  }
  
  .hero h3 {
    font-size: 0.8rem;
    color: #f2f2f2;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .page-section, .hero {
      min-height: 80vh;
    }
  
    .navbar {
      flex-direction: column;
      align-items: center;
      height: 40vh;
      padding: 0;
       width: 100%; /* Ensure navbar takes full width */
  
    }
  
    .nav-menu, .nav-item {
      flex-direction: column;
    }

    .strikethrough::after {

      border-top: 7px solid #21A2D0; /* Adjust the color and thickness of the line here */
      right: 50px;
    }
  
    .nav-menu {
      width: 100%; /* Ensure nav-menu takes full width */
      padding-left: 0; /* Remove padding that could affect child width */
      padding-right: 0; /* Remove padding that could affect child width */
    }
  
    .nav-item {
      width: 100%; /* Ensure nav-item takes full width */
      margin: 0; /* Remove margins that could affect width */
    }
  
  
  
  
    .nav-item a {
      display: block;
      padding: 10px;
      border-top: 1px solid #ddd;
      box-sizing: border-box;
      /* width: 100%; */
    }
  
    .message-btn {
      display: none;
    }
  
    .hero {
      background-attachment: scroll;
      min-height: 60vh;
    }
  
    .hero h1, .hero h2 {
      font-size: 3.5rem;
      position: absolute;
      top: 0;
      left: 0;
    }
    .hero h1 {
      /* Adjust the position specifically for mobile devices */
      top: -6%; /* Example adjustment */
      left: 5%; /* Example adjustment */
      font-size: 4rem; /* Adjust font size for better readability on smaller screens */
    }
  
    .hero h2{
      top: 13%; /* Example adjustment */
      left: 5%; /* Example adjustment */
      font-size: 4rem; /* Adjust font size for better readability on smaller screens */
  
    }
  }
  
  /* Smaller Devices */
  @media (max-width: 600px) {
    .hero h1, .hero h2 {
      font-size: 3.7rem;
    }
  }
  
  @media (max-width: 400px) {
    .hero h1, .hero h2 {
      font-size: 3rem;
    }
  
    .navbar {
      height: 50vh;
    }
  }
  
  /* Responsive Images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  
  @media only screen and (min-width: 600px) and (max-width: 1200px) {
    /* General tablet styles */
    .page-section, .hero {
      min-height: 80vh;
    }
  
    .navbar {
      flex-direction: column;
      align-items: center;
      height: 40vh;
      padding: 0;
    }
  
    .nav-menu, .nav-item {
      flex-direction: column;
    }
  
    .nav-item a {
      display: block;
      padding: 10px;
      border-top: 1px solid #ddd;
    }
  
  
    .navbar {
      flex-direction: column;
      align-items: center;
      height: 40vh;
      padding: 0;
       width: 100%; /* Ensure navbar takes full width */
  
    }
  
    .nav-menu, .nav-item {
      flex-direction: column;
    }
  
    .nav-menu {
      width: 100%; /* Ensure nav-menu takes full width */
      padding-left: 0; /* Remove padding that could affect child width */
      padding-right: 0; /* Remove padding that could affect child width */
    }
  
    .nav-item {
      width: 100%; /* Ensure nav-item takes full width */
      margin: 0; /* Remove margins that could affect width */
    }
  
    .message-btn {
      display: none;
    }
  
    .hero {
      background-attachment: scroll;
      min-height: 60vh;
    }
  
    .hero h1, .hero h2 {
      font-size: 3.5rem;
      position: absolute;
      top: 0;
      left: 0;
    }


      .strikethrough::after {

    border-top: 15px solid #21A2D0; /* Adjust the color and thickness of the line here */
    right: 60px;
    left: -330px;
  }
    .hero h1 {
      /* Adjust the position specifically for mobile devices */
      top: -6%; /* Example adjustment */
      left: 25%; /* Example adjustment */
      font-size: 4rem; /* Adjust font size for better readability on smaller screens */
    }
  
    .hero h2{
      top: 5%; /* Example adjustment */
      left: 25%; /* Example adjustment */
      font-size: 4rem; /* Adjust font size for better readability on smaller screens */
  
    }
  
  
  
    /* Adjustments for smaller tablets or in-between sizes */
    @media (max-width: 768px) {
      .hero h1, .hero h2 {
        font-size: 4rem; /* Adjust font size for better readability on smaller screens */
      }
    }
  
    /* Further adjustments for smaller devices if needed */
    @media (max-width: 600px) {
      .hero h1, .hero h2 {
        font-size: 3.7rem;
      }
    }
  }
  
  
  /* Target Surface Duo in single-screen (portrait) */
  @media screen and (min-width: 540px) and (max-width: 540px) and (min-height: 720px) and (max-height: 720px) {
    .hero h1, .hero h2 {
      font-size: 3.7rem;
      margin-top: 5rem;
    }
    /* Styles for Surface Duo in portrait mode */
  }
  
  /* Target Surface Duo in single-screen (landscape) */
  @media screen and (min-height: 540px) and (max-height: 540px) and (min-width: 720px) and (max-width: 720px) {
    .hero h1, .hero h2 {
      font-size: 3.7rem;
      margin-top: 5rem;
    }
    /* Styles for Surface Duo in landscape mode */
  }
  
  /* Target Surface Duo when fully opened (landscape) */
  @media screen and (min-width: 1080px) and (max-width: 1080px) and (min-height: 720px) and (max-height: 720px) {
    .hero h1, .hero h2 {
      font-size: 3.7rem;
      margin-top: 5rem;
    }
    /* Styles for Surface Duo when fully opened in landscape orientation */
  }
  
  
  /* Target Galaxy Fold in folded state (portrait) */
  @media screen and (min-width: 280px) and (max-width: 280px) and (min-height: 653px) and (max-height: 653px) {
    /* Styles for Galaxy Fold in its folded portrait orientation */
    .hero h1, .hero h2 {
      font-size: 2.2rem;
      margin-top: 5rem;
    }
  }
  
  /* Considering the landscape orientation when folded might be less common,
   but it's good to be comprehensive. */
  @media screen and (min-height: 280px) and (max-height: 280px) and (min-width: 653px) and (max-width: 653px) {
    .hero h1, .hero h2 {
      font-size: 2.2rem;
      margin-top: 5rem;
    }
    /* Styles for Galaxy Fold in its folded landscape orientation */
  }

  
  .what-we-do {
    background: #ffffff;
    text-align: center;
    padding: 3em 0;
    min-height: 100vh;
    font-family: 'Arial', sans-serif; 
  }
  
  .title{
  font-size: large;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      color: #000000;
      font-size: 3em;
  }
  
  .service-card .icon {
    display: block;
    font-size: 4em; /* Adjust size as needed */
    color: #000; /* Adjust color as needed */
    margin: 0 auto 1em; /* Centers the icon and adds space below */
  }
  
  .service-card.blue .icon{
    display: block;
    font-size: em; /* Adjust size as needed */
    color: #000; /* Adjust color as needed */
    margin: 0 auto 1em; /* Centers the icon and adds space below */
  }
  
  .service-card.purple .icon,
  .service-card.black .icon {
    color: #ffffff; /* This sets the icon color to white */
  }
  
  
  
  
  
  
  .service-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .service-card {
    margin: 2em;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtler shadow */
    width: 20em;
    height: 20em; /* Adjusted dimensions for uniformity */
    transition: transform 0.3s ease; /* Smooth animation on hover */
  }
  
  .service-card:hover {
    transform: translateY(-10px); /* Subtle hover effect */
  }
  
  .service-card h3 {
    margin-top: 1em;
    color: #000000; /* Consistent text color */
  }
  
  .service-card p {
    margin-bottom: 1em;
    color: #000000; /* Subdued text color for minimalism */
  }
  
  .service-card.purple h3,
  .service-card.black h3 {
    color: white; /* Set the color of headings to white for these specific card colors */
  }
  
  .service-card.purple p,
  .service-card.black p{
    color: white; /* Set the color of headings to white for these specific card colors */
  }
  
  
  
  
  /* Simplified color classes for cards */
  .service-card.yellow { background-color: #FFCB03; }
  .service-card.blue { background-color: #21A2D0; }
  .service-card.green { background-color: #9BBF66; }
  .service-card.purple { background-color: #2C235A; }
  .service-card.black { background-color: #17182A; }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .service-card { width: calc(50% - 4em); }
  }
  
  @media (max-width: 480px) {
    .service-card { width: 100%; }
  }


  @media (min-width: 769px) {
    .service-card {
      margin: 2em;
      padding: 2em;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      width: 18em; /* Adjusted width to make cards narrower */
      height: 20em;
      transition: transform 0.3s ease;
      /* Adjust flex-basis to match the new width, keeping in mind margins and paddings */
      flex: 0 1 calc(28% - 4em); /* You might need to adjust this if the cards still appear too wide */
    }
  }
  
  .enterprise-software {
    padding: 50px 10%;
    background: #9BBF66; /* or any color you prefer */
}

.enterprise-heading {
    font-size: 60px;
    font-family:'Source Sans Pro', sans-serif;
    color: #000000d4;
    margin-bottom: 20px;
    text-transform: uppercase;
    margin-top: 0em;

    /* margin-left: 3em; */
}


.content-wrapper {
    margin-top: 4em;
    display: flex;
    justify-content: space-between; /* Adjusts the space between text and image */
    align-items: center;
    gap: 20px;
}

.text-content, .image-content {
    flex-basis: 50%;
}

.text-content {
    padding-right: 10px;
    /* margin-left: 20em; */
}

.image-content img {
    width: 80%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.page-section {
    
    padding: 50px 0; /* Adds padding to the top and bottom of the section */
    text-align: center; /* Centers all content in this container */
  }
  
  /* Heading styles */
  .content-headingt {
    font-size: 2.2rem; /* Adjust the size as needed */
    margin-bottom: 1rem; /* Adds some space below the heading */
    color: #000; /* Sets the text color */
  }

  .content-areass {
    padding-left: 100px; /* Adjust as needed */
    margin-left: 200px; 
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}





.content-descriptiont {
    line-height: 1.5;
    font-size: 1rem; /* Adjust the size as needed */
    margin-bottom: 2rem; /* Adds some space below the paragraph */
    color: #000000; /* Sets the text color to something lighter than the heading */
  }

.info-btn {
    padding: 10px 20px; /* Adds padding inside the button */
    font-size: 1rem; /* Sets the font size inside the button */
    color: #fff; /* Text color */
    background-color: #007bff; /* Background color */
    border: none; /* Removes the border */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes the cursor to a pointer on hover */

  }
  

  @media (max-width: 768px) {
    .enterprise-software {
        padding: 25px 10%; /* Reduce padding on smaller screens */
        /* text-align: center;  */
    }

    .enterprise-heading {
        font-size: 40px;   /* Reduce font size for better readability */
        margin-bottom: 10px;
        
    }

    .content-wrapper {
        flex-direction: column; /* Stack content vertically */
        gap: 15px;   /* More comfortable spacing between items */
    }

    .text-content, .image-content {
        flex-basis: auto;  /* Allow elements to take their natural size */
        max-width: 100%;   /* Prevent overflow beyond screen width */
        padding: 0;        /* Remove any unnecessary padding */
        margin: 0;         /* Remove margin for vertical stacking */
    }

    .image-content img {
        margin: 15px auto; /* Center image */
    }

     /* For the additional content elements */
    .page-section enterprise-software {
        padding: 30px 10%; /* Reduced padding for mobile */
    }


     .content-areass {
    padding-left: 100px; /* Adjust as needed */
    margin-left: 0px; 
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

    .content-headingt {
        font-size: 1.8rem;  /* Adjust as needed */
    }

    .content-descriptiont {
        font-size: 0.9rem;  /* Slightly smaller text size */
        text-align: left; /* Center heading and potentially other content */
    }

 
    
}


.page-section {
    text-align: center;
    padding: 4rem 0;

  }

  /* Blockchain Solutions Section Styling */
  .blockchain-solutions {
    background: url('../images/blockchain_development.png') no-repeat center center;
    background-size: cover;
  }

  .blockchain-heading {
    font-size: 10rem;
    color: #fff; /* Adjust the color based on your background */
    margin-bottom: 1rem;
    /* font-style: italic; */
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700; /* Bold */
  }

  .blockchain-subheading {
    font-size: 3rem;
    color: #ddd; /* Adjust the color for better contrast with the background */
    margin-bottom: 2rem;
    font-family: 'Roboto', sans-serif;

  }

  .blockchain-description {
    font-size: 1.5rem;
    color: #ccc; /* Adjust the color for readability */
    margin-bottom: 2.5rem;
    max-width: 600px; /* Keeps the text block contained for readability */
    margin-left: auto;
    margin-right: auto;
    font-family: 'Roboto', sans-serif;
  }

  /* .info-btn { */
    /* Style your button as needed */
  /* } */

  /* Responsive Design */
  @media (max-width: 768px) {
    .blockchain-heading {
      font-size: 2.5rem; /* Smaller font size for mobile */
    }

    .blockchain-subheading {
      font-size: 1.2rem;
    }

    .blockchain-description {
      padding: 0 20px; /* Add padding on smaller screens */
    }
  }


  @media only screen and (min-width: 600px) and (max-width: 1200px) {

    .blockchain-heading {
      font-size: 8rem;
      color: #fff; /* Adjust the color based on your background */
      margin-bottom: 1rem;
      /* font-style: italic; */
      /* font-family: 'Roboto', sans-serif; */
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 700; /* Bold */
    }

    .blockchain-subheading {
      font-size: 3rem;
      color: #ddd; /* Adjust the color for better contrast with the background */
      margin-top: 3rem;
      font-family: 'Roboto', sans-serif;

    }

  }


  .head-hunting {
    padding: 50px 10%;
    background: #ffffff; /* or any color you prefer */
}

.head-heading {
    font-size: 60px;
    font-family:'Source Sans Pro', sans-serif;
    color: #000000;
    margin-bottom: 20px;
    text-transform: uppercase;
    margin-top: 0em;

    /* margin-left: 3em; */
}


.contents-wrapper {
    margin-top: 4em;
    display: flex;
    justify-content: space-between; /* Adjusts the space between text and image */
    align-items: center;
    gap: 20px;
}

.text-contents, .image-contents {
    flex-basis: 50%;
}

.text-contents {
    padding-right: 10px;
    /* margin-left: 20em; */
}

.image-contents img {
    width: 80%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.page-section1 {
    
    padding: 50px 0; /* Adds padding to the top and bottom of the section */
    text-align: center; /* Centers all content in this container */
  }
  
  /* Heading styles */
  .contents-heading {
    font-size: 2.2rem; /* Adjust the size as needed */
    margin-bottom: 1rem; /* Adds some space below the heading */
    color: #000000; /* Sets the text color */
  }

  .contents-area {
    padding-left: 100px; /* Adjust as needed */
    margin-left: 200px; 
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/* .content-heading, .content-description ,.info-btn{

} */




.contents-description {
    line-height: 1.5;
    font-size: 1rem; /* Adjust the size as needed */
    margin-bottom: 2rem; /* Adds some space below the paragraph */
    color: #000000; /* Sets the text color to something lighter than the heading */
  }

.info-btn {
    padding: 10px 20px; /* Adds padding inside the button */
    font-size: 1rem; /* Sets the font size inside the button */
    color: #fff; /* Text color */
    background-color: #007bff; /* Background color */
    border: none; /* Removes the border */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes the cursor to a pointer on hover */

  }
  

  @media (max-width: 768px) {
    .head-hunting {
        padding: 25px 10%; /* Reduce padding on smaller screens */
        /* text-align: center;  */
    }

    .head-heading {
        font-size: 40px;   /* Reduce font size for better readability */
        margin-bottom: 10px;
        
    }

    .contents-wrapper {
        flex-direction: column; /* Stack content vertically */
        gap: 15px;   /* More comfortable spacing between items */
    }

    .text-contents, .image-contents {
        flex-basis: auto;  /* Allow elements to take their natural size */
        max-width: 100%;   /* Prevent overflow beyond screen width */
        padding: 0;        /* Remove any unnecessary padding */
        margin: 0;         /* Remove margin for vertical stacking */
    }

    .image-contents img {
        margin: 15px auto; /* Center image */
    }

     /* For the additional content elements */
    /* .page-section {
        padding: 30px 10%; 
    } */

    /* .content-area {
        padding-left: 0;  
        margin-left: 0; 
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: left;   
    } */
     .contents-area {
    padding-left: 100px; /* Adjust as needed */
    margin-left: 0px; 
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

    .contents-heading {
        font-size: 1.8rem;  /* Adjust as needed */
    }

    .contents-description {
        font-size: 0.9rem;  /* Slightly smaller text size */
        text-align: left; /* Center heading and potentially other content */
    }

 
    
}

#contact {
    background-color: #2e305b; /* Solid color for the contact section */
    color: #ffffff;
    padding: 50px 10%; /* Similar padding as in .enterprise-software */
    border-radius: 0; /* Removes border-radius */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centers the content horizontally */
    min-height: 80vh; /* Adjust this to change how much vertical space the section covers */
    
  }
  
  
  #contact h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 2em;
    margin-bottom: 10px;
  }
  
  #contact p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
  }
  
  .form-group {
    margin-bottom: 20px;
    position: relative; /* For line positioning */
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 10px;
    border: none; /* Removes border */
    border-radius: 0; /* Removes border-radius */
    font-size: 1em;
    background-color: transparent; /* Makes the background transparent */
    color: #ffffff;
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 10px;
    border: none; /* Removes border */
    border-radius: 0; /* Removes border-radius */
    font-size: 1em; /* Ensures consistent font size */
    background-color: transparent; /* Makes the background transparent */
    color: #ffffff;
    font-family: 'Roboto', sans-serif; /* Ensures consistent font family */
  }
  
  /* Placeholder styling for consistency */
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: #ccc; /* Placeholder text color */
    opacity: 1; /* Ensures the placeholder is fully visible */
    font-size: 1em; /* Matching font size with input text */
    font-family: 'Roboto', sans-serif; /* Ensuring the same font family */
  }
  
  .form-group input {
    border-bottom: 1px solid #ccc; /* Adds a bottom border to each input field */
  }
  
  .form-group:not(:last-child) input {
    margin-bottom: 20px; /* Adds spacing below the input field */
  }
  
  .form-group textarea {
    resize: vertical;
    border-bottom: 1px solid #ccc; /* Adds a bottom border to the textarea */
  }
  
  .send-btn {
    display: block;
    width: 100%;
    background-color: #ffffff; 
    color: #000000;
    padding: 10px 20px; 
    border: none;
    border-radius: 2px; 
    font-size: 1em;
    font-weight: 500; 
    cursor: pointer;
    transition: background-color 0.2s ease; 
  }
  
  .send-btn:hover, .send-btn:focus {
    background-color: #a1a0a080; 
  }
  
  
  
  
  
  
  
  #message {
    padding-left: 20px;
  }
  
  
  
  /* Responsive design adjustments */
  @media (max-width: 768px) {
    #contact {
      padding: 20px;
      /* margin: 20px; */
      
    }
  }
  
  @media (min-width: 768px) {
    .container {
      max-width: 600px; /* Keeping the form width to 600px on larger screens */
    }
  }

  
  .site-footer {
    width: 100%;
    padding: 20px 0; /* Adjust the padding to control the height of the footer */
    background-color: #f8f8f8; /* Adjust background color as needed */
    text-align: center; /* Center align the footer content */
    border-top: 1px solid #ddd; /* Optional top border */
  }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added line to keep content on a single line */
    border: 0;
  }
  
  
  .footer-content {
    max-width: 33.33%; /* Adjust width to 1/3 of the page */
    margin: 0 auto; /* Center the footer content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .footer-logo {
    margin-bottom: 10px; /* Space between the logo and the social links */
    width: 16em;
    height: auto;
  }
  
  .social-link {
    color: rgb(0, 0, 0); /* Sets the icon color to white */
    /* border: 1px solid rgb(0, 0, 0);  */
    border-radius: 50%; /* Makes the border rounded */
    display: inline-flex; /* Aligns the icon nicely */
    align-items: center;
    justify-content: center;
    width: 40px; /* Width of the circle */
    height: 40px; /* Height of the circle */
    margin: 0 5px; /* Space between the social link items */
    text-decoration: none; /* Removes underline from links */
    font-size: 20px; /* Size of the icons */
  }
  
  .social-link:hover,
  .social-link:focus {
    background: white; /* Background color on hover/focus */
    color: #333; /* Icon color on hover/focus */
  }
  
  .site-footer .copyright-text {
    color: black;
    margin-left: 0.1em;
    /* ... other styles ... */
}


  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .footer-content {
      max-width: 100%; /* Full width on smaller screens */
      padding: 20px; /* Adjust padding as needed */
    }
  }


  .custom-section {
    padding: 50px 10%;
    background: #21A2D0; /* or any color you prefer */
}

.section-heading {
    font-size: 60px;
    font-family: 'Source Sans Pro', sans-serif;
    color: #000000d4;
    margin-bottom: 20px;
    text-transform: uppercase;
    margin-top: 0;
    text-align: center; /* Centers the heading */
}

.content-wrapper {
    margin-top: 4em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.text-content, .image-content {
    flex-basis: 50%;
}

.text-content {
    padding-right: 10px;
}

.image-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}


.page-section {
   
    padding: 50px 0;
    text-align: center;
}

.content-headingf {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #000;
}

.contentx-area {
    padding-left: 100px; /* Adjust as needed */
    margin-left: 100px; 
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.content-descriptionh {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: #000000;
    line-height: 1.5;
}

.info-btn {
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .custom-section, .content-heading, .content-description {
        text-align: center; /* Center text for smaller screens */
    }

    .section-heading {
        font-size: 40px;   /* Reduce font size for better readability */
        margin-bottom: 10px;
    }

    .content-wrapper {
        flex-direction: column;
        gap: 15px;   /* More comfortable spacing between items */
    }
    .content-headingf {
        font-size: 1.8rem;  /* Adjust as needed */
    }

    .text-content, .image-content {
        flex-basis: auto;  /* Allow elements to take their natural size */
        max-width: 100%;   /* Prevent overflow beyond screen width */
        padding: 0;        /* Remove any unnecessary padding */
        margin: 0;         /* Remove margin for vertical stacking */
    }
    .content-descriptionh {
        font-size: 0.9rem;  /* Slightly smaller text size */
        text-align: left; /* Center heading and potentially other content */
    }

    .image-content img {
        margin: 20px auto;
        border-radius: 30px;
    }
    .contentx-area {
        padding-left: 100px; /* Adjust as needed */
        margin-left: 0px; 
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
    }

    .image-content img {
        margin: 15px auto; /* Center image */
    }
    
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* High z-index to be on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Scroll only vertically if needed */
    background-color: rgba(0,0,0,0.4); /* Dimmed background */
}

.modal-content h2, p {
    color: #ffffff; /* Replace with your desired color */
    font-family: 'Roboto', sans-serif;
}

.modal-content h2 {
    color: #ffffff; /* Replace with your desired color */
    font-weight: 100;
    font-family: 'Roboto', sans-serif;
    
}

/* Modal Content */
.modal-content {
    background-color: #2e305b; /* Semi-transparent white */
    margin: 5% auto; /* Responsive top margin */
    padding: 40px; /* Ample padding for content */
    border: none; /* No border for a modern look */
    border-radius: 0; /* Removes border-radius for a minimalistic look */
    width: 50%; /* Optimized width for desktop */
    box-shadow: none; /* Removes shadow for a flatter design */
    
}

/* Close Button */
.close {
    color: #ccc; /* Lighter shade for a minimalistic look */
    position: absolute; /* Absolute position to place it */
    top: 10px; /* Close to the top right corner */
    right: 15px; /* Maintain a little distance from the edge */
    font-size: 32px; /* Visible size */
    font-weight: bold;
}

.close:hover, .close:focus {
    color: #999; /* Lighter shade on hover/focus for subtlety */
    text-decoration: none;
    cursor: pointer;
}

/* Input Styles */
.form-group {
    margin-bottom: 16px; /* Space between form groups */
    color: white;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 12px 20px; /* Comfortable padding */
    margin-top: 8px; /* Space from label */
    border: none; /* Removes border for a minimalistic look */
    border-bottom: 1px solid #ddd; /* Adds a subtle bottom border */
    border-radius: 0; /* Removes border-radius */
    box-sizing: border-box; /* Box-sizing to include padding in width */
    background-color: transparent; /* Transparent background */
    color: #ffffff; /* Text color */
}


/* Media Query for Responsive Design */
@media screen and (max-width: 768px) {
    .modal-content {
        width: 90%; /* More width on smaller screens */
        margin: 10% auto; /* Increase margin on top */
    }
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px 2e305b inset !important; /* Match your background */
    -webkit-text-fill-color: #ffffff;  /* Your desired text color */
    transition: background-color 5000s ease-in-out 0s; /* Smooth transition */
}

.outsourcing {
    padding: 50px 10%;
    background: #17182A; /* or any color you prefer */
}

.outsourcing-heading {
    font-size: 60px;
    font-family:'Source Sans Pro', sans-serif;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
    margin-top: 0em;

    /* margin-left: 3em; */
}


.content-wrapper {
    margin-top: 4em;
    display: flex;
    justify-content: space-between; /* Adjusts the space between text and image */
    align-items: center;
    gap: 20px;
}

.text-content, .image-content {
    flex-basis: 50%;
}

.text-content {
    padding-right: 10px;
    /* margin-left: 20em; */
}

.image-content img {
    width: 80%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.page-section {
    
    padding: 50px 0; /* Adds padding to the top and bottom of the section */
    text-align: center; /* Centers all content in this container */
  }
  
  /* Heading styles */
  .content-heading {
    font-size: 2.2rem; /* Adjust the size as needed */
    margin-bottom: 1rem; /* Adds some space below the heading */
    color: #ffffff; /* Sets the text color */
  }

  .content-area {
    padding-left: 100px; /* Adjust as needed */
    margin-left: 200px; 
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/* .content-heading, .content-description ,.info-btn{

} */




.content-description {
    line-height: 1.5;
    font-size: 1rem; /* Adjust the size as needed */
    margin-bottom: 2rem; /* Adds some space below the paragraph */
    color: #ffffff; /* Sets the text color to something lighter than the heading */
  }

.info-btn {
    padding: 10px 20px; /* Adds padding inside the button */
    font-size: 1rem; /* Sets the font size inside the button */
    color: #fff; /* Text color */
    background-color: #007bff; /* Background color */
    border: none; /* Removes the border */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes the cursor to a pointer on hover */

  }
  

  @media (max-width: 768px) {
    .outsourcing {
        padding: 25px 10%; /* Reduce padding on smaller screens */
        /* text-align: center;  */
    }

    .outsourcing-heading {
        font-size: 40px;   /* Reduce font size for better readability */
        margin-bottom: 10px;
        
    }

    .content-wrapper {
        flex-direction: column; /* Stack content vertically */
        gap: 15px;   /* More comfortable spacing between items */
    }

    .text-content, .image-content {
        flex-basis: auto;  /* Allow elements to take their natural size */
        max-width: 100%;   /* Prevent overflow beyond screen width */
        padding: 0;        /* Remove any unnecessary padding */
        margin: 0;         /* Remove margin for vertical stacking */
    }

    .image-content img {
        margin: 15px auto; /* Center image */
    }


     .content-area {
    padding-left: 100px; /* Adjust as needed */
    margin-left: 0px; 
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

    .content-heading {
        font-size: 1.8rem;  /* Adjust as needed */
    }

    .content-description {
        font-size: 0.9rem;  /* Slightly smaller text size */
        text-align: left; /* Center heading and potentially other content */
        margin-left: 1rem;
        margin-right: 1rem;
    }

 
    
}