/* Add custom CSS for the "about" section */

#about {
    background-color: rgba(255, 255, 255, 0.8);
    /* Set the background with transparency (adjust the alpha value as needed) */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  #about h1 {
    color: black;
    font-size: 35px;
    font-weight: 900;
    text-align: left;
    /* Align the heading to the left */
    margin-bottom: 30px;
  }

  /* Style for "Our Visionaries" within the h1 heading */
  #about h1 .visionaries {
    position: relative;
    /* Set position to relative for pseudo-element positioning */
  }

  #about h1 .visionaries::after {
    content: '';
    /* Add a pseudo-element for the underline */
    position: absolute;
    bottom: -4px;
    /* Adjust the distance of the underline from the text */
    left: 0;
    width: 100%;
    border-bottom: 4px solid #d69316ea;
    /* Blue underline */
    transform: scaleX(0);
    /* Initial underline width to 0, it will grow on hover */
    transition: transform 0.3s ease;
  }

  #about h1 .visionaries:hover::after {
    transform: scaleX(1);
    /* Grow the underline to full width on hover */
  }


  #about h2 {
    color: #222;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  #about p {
    color: #555;
    /* Use black or grey text color */
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 2px;
  }

  #about .row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  #about .col-lg-4 {
    flex: 1;
  }

  .infographic {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.522);
    text-align: center;
  }
.more{
  text-align: justify;
}

  .infographic .icon:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    z-index: -1;
    transition: transform 0.2s ease;
    /* Add smooth transition for the 3D-like border */
  }

  .infographic .full-content {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, height 0.3s ease;
    margin-top: 5px;
    padding: 10px;
    text-align: justify;
  }

  .infographic .icon {
    font-size: 96px;
    color: #070429cd;
    margin-bottom: 15px;
    transition: transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    /* Add smooth transitions */
    position: relative;
    /* Position relative for pseudo-element positioning */
  }

  .infographic:hover .icon {
    transform: scale(1.1);
    /* Apply a slight zoom-in effect on hover */
    color: #e18d34;
    /* Change the icon color on hover (you can change it to your desired color) */
  }

  .infographic:hover .full-content {
    opacity: 1;
    height: auto;
  }

  /* Align the initial content to left on hover */
  .infographic .row:hover .col-lg-4 {
    flex: 1;
    /* Set flex to 1 to allow text to occupy the remaining space */
  }

  .infographic .row:hover .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .infographic .row:hover .col-lg-6 p {
    margin-top: 0;
  }

  /* Body ----- */

  /* Add your CSS styles here */
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  /* Styles for the navbar */
  .navbar {
    background-color: #fffefa;
    padding-top: 8px;
    /* Adjust the top padding for the Navbar */
    padding-bottom: 8px;
    /* Adjust the bottom padding for the Navbar */
  }
  
  .navbar-brand {
    font-size: 35px;
    font-weight: 900;
    font-family: 'Anton', sans-serif;
    color: #050532;
    display: flex;
    align-items: center;
    /* Center the logo and text vertically */
  }
  
  .navbar-brand img {
    width: 60px;
    /* Set a fixed width for the logo image */
    height: auto;
    /* Let the height adjust automatically to maintain aspect ratio */
    margin-right: 10px;
  }
  
  .navbar-nav .nav-link {
    color: #050532;
    font-weight: 700;
    transition: color 0.3s;
  }
  
  .navbar-nav .nav-link:hover {
    color: #ffc107;
  }
  /* Styles for the hero section */
  .hero {
    background-color: #f8f8f8;
    padding: 30px;
    text-align: center;
  }

  .hero h1 {
    font-size: 36px;
    font-weight: 700;
    color: #050532;
  }

  .hero h2 {
    font-size: 24px;
    font-weight: 500;
    color: #ffc107;
  }

  .hero .btn {
    font-size: 20px;
    font-weight: 700;
    padding: 20px;
    color: #fff;
    background-color: #ffc107;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .hero .btn:hover {
    background-color: #ffa000;
  }

  .hero-img {
    text-align: center;
  }

  .hero-img img {
    max-width: 100%;
  }


  /* Add other custom styles and media queries as needed */


  /* Shared styles for the headings */
  .heading {
    padding-bottom: 15px;
    text-align: center;
  }

  .heading h1 {
    color: black;
    font-size: 35px;
    font-weight: 900;
    font-family: 'Anton', sans-serif;
  }

  /* Rest of the CSS for the "Product and Services" section */
  #services {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  #services h1 {
    color: black;
    font-size: 35px;
    font-weight: 900;
    text-align: left;
    margin-bottom: 30px;
  }

  #services h4 {
    color: black;
    font-size: 20px;
  }

  #services p {
    color: rgba(19, 18, 18, 0.822);
    font-weight: normal;
  }

  #services .member {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  #services .member img {
    max-width: 100%;
    height: 200px;
    /* Adjust the height as needed */
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Add a box shadow */
    margin-bottom: 15px;
  }

  #services .myBtn {
    padding: 5px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    border-radius: 5px;
  }

  /* Add animations and transitions */
  #services .member {
    transform: translateY(0);
  }

  #services .member:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Add a slightly larger box shadow on hover */
  }

  #services .myBtn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* -----Footer ----*/

  /* Shared styles for the footer */
  footer {
    background-color: #f8f8f8;
    padding: 40px 0;
    text-align: center;
    border-radius: 40px;
    /* Adjust the value to control the amount of rounding */
  }

  /* Styles for the circular logo container */
  .logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }

  /* Styles for the logo image */
  .logo img {
    width: 25px;
    height: 25px;
    display: block;
  }

  /* Styles for the footer text */
  .footer-text {
    font-size: 16px;
    font-weight: 700;
    color: #050532;
    margin-left: 10px;
    vertical-align: middle;
    position: relative;
    align-items: center;
    /* Vertically center the content */
  }


  /* Styles for "OUR BROKING" */
  .footer-text .our-broking {
    font-size: 24px;
    /* Adjust the font size as needed */
    font-weight: 700;
  }

  .footer-text .services-llp {
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    /* Position the "Services LLP" text absolutely */
    top: 80%;
    /* Position it below the "OUR BROKING" text */
    left: 15%;
    /* Center it horizontally */
    visibility: hidden;
    /* Hide it by default */
    opacity: 0;
    /* Hide it by default (optional) */
    /* Optional background color for better visibility */
    padding: 5px 10px;
    /* Optional padding for better visibility */
    border-radius: 5px;
    /* Optional border radius for better appearance */
    transition: opacity 0.2s ease;
    /* Add a smooth transition for opacity */
  }

  .footer-text:hover .services-llp {
    visibility: visible;
    /* Show "Services LLP" on hover */
    opacity: 1;
    /* Show "Services LLP" on hover (optional) */
  }


  /* Styles for the container and rows in the footer */
  .container {
    padding-bottom: 15px;
  }

  .row {
    margin: 0 -15px;
  }

  /* Styles for the footer links */
  .footer-links {
    padding-top: 20px;
  }

  /* Styles for the left part (columns) of the footer */
  .footer-box {
    border-right: 1px solid #ccc;
    /* Thin grey line to separate columns */
    padding-right: 20px;
    /* Optional: Add some padding for spacing */
  }

  .footer-divider {
    border-right: 1px solid #ccc;
    /* Thin grey line to separate columns */
    padding-right: 20px;
    /* Optional: Add some padding for spacing */
  }

  /* Styles for the left part (columns) of the footer */
  .footer-left-col {
    text-align: center;
    /* Center align the content in the left part */
    border-right: 1px solid #ccc;
    /* Thin grey line to separate columns */
    padding-right: 20px;
    /* Optional: Add some padding for spacing */
  }

  /* Styles for the right part (links) of the footer */
  .footer-right-col {
    padding: 0 10px;
    /* Optional: Add some padding for spacing between columns */
    text-align: left;
  }

  /* Styles for the footer address and contact info */
  .footer-address {
    color: black;
    margin-bottom: 10px;
  }

  .footer-contact-info {
    color: black;
  }

  /* Styles for the footer links */
  footer h5 {
    color: black;
    font-size: 20px;
    margin-bottom: 10px;
  }

  footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  footer ul li {
    margin-bottom: 5px;
  }

  footer ul li a {
    color: black;
    text-decoration: none;
    /* Remove the default underline */
    display: inline-block;
    /* Make the link an inline block */
    position: relative;
    /* Add position relative for the zoom animation */
    transition: transform 0.2s ease;
    /* Add smooth transition for zoom effect */
  }

  footer ul li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    /* Adjust the distance of the underline from the link text */
    left: 0;
    background-color: #0a0a0b;
    /* Color of the underline */
    visibility: hidden;
    /* Hide the underline by default */
    transform: scaleX(0);
    /* Initial underline width to 0 */
    transition: transform 0.2s ease, visibility 0.2s ease;
    /* Add smooth transition */
  }

  footer ul li a:hover::before {
    visibility: visible;
    /* Show the underline on hover */
    transform: scaleX(1);
    /* Grow the underline to full width on hover */
  }

  /* Zoom effect on hover */
  footer ul li a:hover {
    transform: scale(1.1);
    /* Increase the size of the link on hover */
  }

  /* Styles for the disclaimer and attention investors sections */
.disclaimer-section,
.attention-investors-section {
  border: 1px solid #dddddd; /* Add a border */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a shadow effect */
  padding: 20px; /* Add some padding for better appearance */
  margin-bottom: 20px; /* Add some spacing between the sections */
  text-align: justify;
}
.modal-backdrop.show {
  opacity: 0 !important;
}