body {
  font: 18px Roboto, sans-serif;
  line-height: 1.4;
  color: #f5f6f7;
}

p {
  font-size: 20px;
}

a {
  color: #0056b3;        /* Bold royal blue */
  font-weight: 500;      /* Semi-bold */
  font-size: 20px;
  text-decoration: none; /* Remove underline for a cleaner look */
}

a:hover {
  color: #003d80;         /* Darker blue on hover */
  text-decoration: underline;
}

/* 🔽 Responsive font sizes for mobile view */
@media screen and (max-width: 768px) {
  body {
    font-size:16px;
  }

  p {
    font-size: 16px;
  }

  a {
    font-size: 16px;
  }
}


  .margin {margin-bottom: 45px;}
  .bg-1 { 
    background-color: #1abc9c; /* Green */
    color: #ffffff;
  }
  .bg-2 { 
    background-color: #474e5d; /* Dark Blue */
    color: #ffffff;
  }
  .bg-3 { 
    background-color: #ffffff; /* White */
    color: #555555;
  }
  .bg-4 { 
    background-color: #2f2f2f; /* Black Gray */
    color: #fff;
  }
  .container-fluid {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  
  .container2{
      padding-left: 20px;
      padding-right: 20px;
  }
  
.navbar {
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 500; /* Bolder text */
    letter-spacing: 1px;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1000; /* Added z-index to ensure navbar stays on top */
}

/* Default link style */
.navbar-nav li a {
    color: #000000 !important; /* Black text */
    text-decoration: none;
}

.navbar-nav  li a:hover {
    color: #1abc9c !important;
  }


  .card-body {
   font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Default for mobile and smaller devices */
}

.group-heading {
  text-align: center;
  margin-bottom: 10px;
  margin-top: 30px;
}

.group-heading h1 {
  font-size: 3rem;
  margin: 0px;
  color: black;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 40px; /* Space for footer */
}

h2 {
  font-size: 22px;
}

@media screen and (max-width: 800px) {
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 2fr));
  gap: 10px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 40px; /* Space for footer */

}

h2 {
  font-size: 22px;
}
}

.card {
  padding: 20px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 20px 0; /* Default margin for mobile */
}

.card h2 {
  margin-top: 0;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Media Query for Desktop */


.card-red {
  background-color: #ff6b6b;
}

.card-blue {
  background-color: #4dabf7;
}

.card-green {
  background-color: #51cf66;
}


.card-purple {
  background-color: #9b59b6;
}

.card-orange {
  background-color: #f39c12;
}

/* New white card styles */
.white-cards-heading {
  text-align: center;
  margin-bottom: 20px;
}

.white-cards-heading h1 {
  font-size: 2rem;
  margin: 0;
  color: #333;
}

.white-cards-heading p {
  font-size: 1rem;
  color: #666;
}

/* White Card Container */
.white-card-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
   /* 3 cards per row */
  gap: 10px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  
}

@media (min-width: 768px) {
  
   .white-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 card per row on smaller screens */
    
  }
}

.white-card-container .card {
  background-color: #fff;
  color: #333; /* Dark text for contrast */
  box-shadow: 0 4px 6px rgba(26, 188, 156, 0.4); /* Shadow with color #1abc9c */
  
}

.card-white {
  background-color: #fff;
  color: #333; /* Dark text for contrast */
  box-shadow: 0 6px 6px rgba(26, 188, 156, 0.4); /* Shadow with color #1abc9c */
}

/* Remove hover effect */
.card-white:hover {
  transform: none;
  box-shadow: 0 6px 6px rgba(26, 188, 156, 0.4); /* Keep the same shadow color on hover */
}

/* Centering the search box */
.search-box-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 10vh;
  margin-bottom: 10px;
  width: 100%; /* Ensures full width for proper centering */
}

/* Wrapper to keep input and button together */
.search-box-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* Ensures inner content is centered */
  width: 100%;
  max-width: 600px;  /* Adjust width as needed */
  position: relative;
}

/* Styling for the search box */
.search-box {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  color: black;
  border: 2px solid #ccc;
  border-radius: 25px 0 0 25px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

/* Focus effect */
.search-box:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(26, 188, 156, 0.6);
}

/* Search button */
.search-button {
  padding: 12px 20px;
  border: 2px solid #ccc;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 0 25px 25px 0;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #0056b3;
}

/* Responsive adjustments */
@media screen and (max-width: 800px) {
  .search-box-wrapper {
    max-width: 90%;
  }
}
/* Job Posting Accuracy Assurance Section */
.job-posting-assurance {
  display: flex; /* Enables horizontal alignment */
  align-items: center; /* Centers content vertically */
  background: linear-gradient(135deg, #fff, #fff); 
  padding: 30px; 
  border-radius: 15px; 
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); 
  max-width: 80%; /* Set max width for better alignment */
  margin: 60px auto; 
  font-family: 'Roboto', sans-serif; 
  color: black;
  animation: fadeInUp 1s ease-out;
  gap: 30px; /* Creates space between image and text */
}

/* Image Styling */
.job-posting-assurance img {
  width: 350px; /* Adjust width as needed */
  height: auto; 
  border-radius: 10px; /* Slight rounding for a modern look */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Content Styling */
.job-posting-content {
  flex: 1; /* Allows content to take up remaining space */
}

/* Title */
.job-posting-assurance h2 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Paragraph */
.job-posting-assurance p {
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 15px;
}

/* Subtitle */
.job-posting-assurance h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
}

/* List */
.job-posting-assurance ul {
  margin: 15px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.job-posting-assurance ul li {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 10px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .job-posting-assurance {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .job-posting-assurance img {
    
    max-width: 300px;
  }

  .job-posting-content {
    text-align: left;
  }
}



.affiliate-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px; /* Space between images */
            flex-wrap: wrap; /* Ensures responsiveness */
            padding: 20px;
        }

        .image-container {
            width: 1200px; /* Fixed width for large screens */
            max-width: 100%; /* Ensures responsiveness */
        }

        .image-container img {
            width: 100%; /* Ensures images fill the container */
            height: auto; /* Maintains aspect ratio */
            display: block; /* Prevents inline spacing issues */
            border-radius: 8px; /* Optional styling */
        }

        @media (max-width: 1100px) {
            .image-container {
                max-width: 95%; /* Slightly reduce size for smaller screens */
            }
        }

        @media (max-width: 768px) {
            .affiliate-container {
                flex-direction: column; /* Stack images vertically */
            }

            .image-container {
                max-width: 100%; /* Full width on mobile */
            }
        }
        
        
        /* Books Slider */
        /* Import professional font */


/* Center the slider */
.slider-wrapper {
    position: relative;
    padding: 10px 0px;
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    background: white;
}

/* Slider container */
.slider-container {
    overflow: hidden;
    flex-grow: 1;
    padding-bottom: 20px;
    padding-top: 20px;
}

/* Slider track */
.slider {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease-in-out;
}

/* Individual slide (card) */
.slide {
    min-width: 250px;
    max-width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    text-align: center;
    font-family: 'Poppins', sans-serif; /* Professional Font */
}

/* Image inside the card */
.slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Title inside the card */
.card-title {
    font-size: 20px;
    font-weight: 600;
    padding: 15px;
    color: #333;
    background: #f8f8f8;
    font-family: 'Poppins', sans-serif;
}

/* Navigation buttons */
.prev, .next {
    background: #007bff;
    color: white;
    border: none;
    padding: 14px 22px;
    cursor: pointer;
    font-size: 22px;
    border-radius: 50%;
    transition: background 0.3s ease, opacity 0.3s ease, transform 0.2s;
    opacity: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.prev:hover, .next:hover {
    background: #0056b3;
    transform: scale(1.1);
}

/* Keep buttons outside */
.prev { margin-right: 12px; }
.next { margin-left: 12px; }

/* Disable button styling */
.prev.disabled, .next.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .slider-wrapper {
        width: 95%;
    }
    .slide {
        min-width: 180px;
        max-width: 200px;
    }
    .prev, .next {
        padding: 10px 14px;
        font-size: 18px;
    }
}

/* Social Media Icon */

  .social-icons-vertical {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .social-icons-vertical a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .social-icons-vertical a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  }

  .social-icons-vertical a.instagram {
    background: #E1306C;
  }

  .social-icons-vertical a.facebook {
    background: #1877F2;
  }

  .social-icons-vertical a.youtube {
    background: #FF0000;
  }

  @media (max-width: 600px) {
    .social-icons-vertical {
      bottom: 12px;
      left: 12px;
      gap: 12px;
    }

    .social-icons-vertical a {
      width: 42px;
      height: 42px;
      font-size: 18px;
    }
  }
  
 /*Other Services*/


 .services-section {
      text-align: center;
      padding: 80px 20px;
      max-width: 1200px;
      margin: auto;
    }

    .section-tag {
      color: #6cace4;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 1px;
      margin-bottom: 10px;
    }

    .services-section h1 {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 10px;
      color: #111;
    }

    .subtitle {
      font-size: 16px;
      color: #777;
      margin-bottom: 50px;
      text-decoration: none;
     
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 40px 30px;
      padding: 0 20px;
    }

    .service-item {
      text-align: center;
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-radius: 12px;
       text-decoration: none;
  color: inherit;
  
    }

    

   .icon-circle {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.service-item:hover .icon-circle {
  background: linear-gradient(135deg, #4ca1af 0%, #2c3e50 100%);
  transform: scale(1.1);
  /*transform: translateY(-5px);*/
  text-decoration: none;
  
}


    .icon-circle img {
      width: 28px;
      height: 28px;
      filter: brightness(0) invert(1); /* Makes icon white */
    }

    .service-title {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 10px;
      color: #111;
      text-decoration: none;
    }

    .service-desc {
      color: #666;
      font-size: 14px;
      line-height: 1.5;
      text-decoration: none;
    }