@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css");
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css");


body {
    font-family: Arial, sans-serif;
  background-color: #033067;
  color: white;
  /* margin-top: 10%; */
}
/* sample */
/* General styling for the dropdown menu */

  .service-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.service-icon {
    font-size: 2rem;
    color: #d00000;
    margin-bottom: 15px;
}
.breadcrumb-nav {
    /* background-color:  */
    padding: 10px 20px;
    margin-top: 5%; /* Space below breadcrumb */
    border-radius: 5px; /* Optional rounded corners */
  }
  
  .breadcrumb {
    list-style: none; /* No default list style */
    padding: 0;
    margin: 0;
    display: flex; /* Align items in a row */
  }
  
  .breadcrumb-item {
    margin-right: 10px; /* Space between items */
  }
  
  .breadcrumb-item + .breadcrumb-item:before {
    content: ">";
    margin-right: 10px; /* Space before separator */
  }
  
  .breadcrumb-item a {
    text-decoration: none;
    color: white; /* Bootstrap primary link color */
  }
  
  .breadcrumb-item a:hover {
    text-decoration: underline; /* Underline on hover */
  }
  
  .breadcrumb-item.active {
    color: #6c757d;
  }

.breadcrumb{
    background-color: transparent
  }

.service-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
}

.service-icon {
    font-size: 2rem;
    color: #d00000;
    margin-bottom: 15px;
}

.service-title {
    font-size: 1.5em;
    margin: 10px 0;
    font-weight: bold;
}

.service-description {
    font-size: 1em;
    color: #555;
}
.star{
    width: 10%;
}

.service-title {
    font-size: 1.5em;
    margin: 10px 0;
    font-weight: bold;
    color: black;
}

.img {
    vertical-align: middle;
    border-style: none;
    width: 10%;}

.service-description {
    font-size: 1em;
    color: #555;
}


    .logo-img {
        width: 50px;
        height: auto;
    }
   
    
    .container {
        position: relative;
    }
    
    .scroll-wrapper {
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    
    .scroll-container {
        display: flex;
        overflow: hidden;
        width: 103%; /* Adjust width as needed */
        position: relative;
        /* margin-left: 10%; */
    }
    
    .scroll-content {
        display: flex;
        flex-wrap: nowrap;
        width: 100%; /* Twice the width of the container for seamless effect */
        animation: scroll-left 20s linear infinite;
    }
    
    .scroll-row {
        display: flex;
    }
    
    .scroll-btn {
        flex: 0 0 auto;
        padding: 10px 20px;
        margin: 5px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .scroll-btn:hover {
        background-color: #0056b3;
    }
    
    
    .service-item {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 100%;
    }
    
    .service-icon {
        font-size: 2rem;
        color: #d00000;
        margin-bottom: 15px;
    }
    
    .service-title {
        font-size: 1.5em;
        margin: 10px 0;
        font-weight: bold;
    }
    
    .service-description {
        font-size: 1em;
        color: #555;
    }
    
    
    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    .content-form {
        width: 100%;
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
        color: #fff;
        text-align: center;
        font-family: Arial, sans-serif;
      }
      .content-form h6{
        color: #d8ff00;
      }
      
      /* Form Input Styles */
.strategy-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .strategy-form label {
    text-align: left;
    font-size: 14px;
    margin-bottom: -21px;
  }
  .strategy-form input {
    padding: 12px;
    border: 1px solid #444;
    border-radius: 5px;
    font-size: 16px;
    color: #000;
  }
  
  .strategy-form span {
    color: red;
  }
  /* Submit button */
.submit-button {
    background-color: #e60000;
    color: #fff;
    padding: 12px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .submit-button:hover {
    background-color: yellowgreen;
  }
  .content-form {
    width: 100%;
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    color: #fff;
    text-align: center;
    font-family: Arial, sans-serif;
  }
  .content-form h6{
    color: #d8ff00;
  }
  
    /* Scroll-down animation for sections */
.scroll-down {
    opacity: 0;
    transform: translateY(50px); /* Slide down effect */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-down.show {
    opacity: 1;
    transform: translateY(0);
}

/* Fade-left animation for paragraphs */
.fade-left {
    opacity: 0;
    transform: translateX(-50px); /* Slide left effect */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-left.show {
    opacity: 1;
    transform: translateX(0);
}
 

    
    

    .inquiry-btn {
        background-color: #033067;
        /* Red background */
        color: #fff;
        padding: 10px 15px;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }

    
  
    /* Hiding the nav links initially for mobile */
    

   

    /* Media queries for mobile responsiveness */
   
    .header-text h1 {
        font-size: 2.5rem;
        font-weight: bold;
        color: #dde901;
    }

    .col-1-md-6 {
        width: 50%;
        margin-left: 112px;
    }

    .sub-text {
        font-size: 1.1rem;
        margin-top: 1rem;
        color: #ccc;
    }

    .text-warning h1 {
        color: #dde901;
    }

    .sub-text {
        color: white;
        margin-left: 102px;
        margin-right: 54px;
    }

    .btn-custom {
        background-color: grey;
        color: #fff;
    }

    .btn-custom:hover {
        background-color: green;
    }

    .gallery img {
        margin: 10px 0;
    }

    

    .btn {
        background-color: grey;
        color: white;
    }

    .btn4:hover {
        background-color: none;

    }

    .btn4 {
        background-color: grey;
        color: white;
        width: 42%;
        border-radius: 8px;
        height: 35px;
        margin-left: -211px;
        text-align: center;
        text-decoration: none;
    }

    .btn4:hover {
        background-color: green;
        color: black;
    }

    .google {
        margin-left: -264px;
    }

    

    .text-warning {
        color: yellowgreen;

    }

    .data {
        color: #fff;
    }


    .data-1 {
        color: #DDF903;
        margin-left: 94px;
    }

    .data-2 {
        color: #DDF903;
        margin-left: 12px;
        margin-bottom: 34px;
        text-align: start;
    }
    
    
    .data-3 {
        color: #fff;
        margin-left: 4px;
        margin-right: -29px;
        text-align: start;
        margin-left: -2%;
    }
    

    .data-4 {
        color: #DDF903;
        margin-left: 73px;
        color: #DDF903;
        margin-left:-11px;
        margin-top: 255px;
        margin-right: 54px;
        text-align: start;
    }

    .data-5 {
        color: #DDF903;
    }

    .data-6 {
        color: #DDF903;
    }

    .data-7 {
        color: #DDF903;
    }

    .data-8 {
        color: #DDF903;
    }

    .data-9 {
        color: #DDF903;
    }

    .data-10 {
        color: #DDF903;
    }

    .data-11 {
        color: #DDF903;
    }

    .btn1 {
        background-color: grey;
        color: white;
        width: 155px;
        border-radius: 8px;
        height: 35px;
        margin-left: 101px;
        text-align: center;
    }

    .btn1:hover {
        background-color: green;
        color: black;

    }

    .btn3 {
        background-color: grey;
        color: white;
        width: 155px;
        border-radius: 8px;
        height: 35px;
        margin-left: 100px;
        margin-right: 100px;
    }

    .btn3:hover {
        background-color: greenyellow;
        color: black;
    }

    .img-fluid-1 {
        width: 30%;
    }
    .fixed-size {
        width: auto;
        height: 244px;
        object-fit: cover; /* Ensures the images are cropped without distortion */
    }
    

    #find-us h2 {
        font-size: 24px;
        font-weight: bold;
        color: #DDF903;
    }

    .find-us-wrapper {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
    }

    .contact-info {
        max-width: 300px;
    }

    .contact-info h3,
    .contact-info p {
        margin-bottom: 10px;
        color: white;
        /* Ensure text color is white */
    }

    .contact-info p1 {
        margin-bottom: 10px;
        color: white;
        /* Ensure text color is white */
        margin-right: -261px;
        margin-left: -263px;
    }



    .contact-info a {
        color: white;
        /* Link color white */
        text-decoration: none;
    }

    .contact-info a:hover {
        color: #ff0000;
        /* Hover color for links */
    }

    #find-us h2 {
        color: #fff200;
        font-size: 24px;
        font-weight: bold;
    }

    /* Default for larger screens */
    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -0px;
        margin-left: -15px;
    }

    .aboutus{
        text-align: center;
    color: #DDF903;
    margin-bottom: 2%;
    FONT-WEIGHT: BOLD;
    MARGIN-TOP: -3%;

    }
    .justify-content-center {
        margin-left: -42px;
    }

    /* General styling for the FIND US HERE section */
    .find-us-container {
        text-align: center;
        
        color: yellow;
        padding: 20px;
    }

    .find-us-container h2 {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #ffff00;
        /* Yellow color */
        margin-left: -73px;
    }

    .map-and-info {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px;
    }

    .map-container iframe {
        width: 500px;
        height: 400px;
        border: 0;
        margin-left: 120px;
    }

    /* Contact information styling */
    .contact-info {
        color: white;
        margin-right: 311px
    }

    /* Initial state - hidden */
    .hidden {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    /* When element is visible */
    .show {
        opacity: 1;
        transform: translateY(0);
    }
    .scroll-container {
        display: flex;
        /* LEFT: 36%; */
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: gray lightgray;
      }
      .scroll-container button{
        height: 60px;
        margin: 15px 10px;
        justify-content: center;
        align-items: center;
        width: 265px;
        background: gray;
        border: 1px solid white;
        color: white;
        border-radius: 10px;
        display: grid; 
      }

      
      .scroll-container::-webkit-scrollbar {
        height: 8px;}
        .scroll-container::-webkit-scrollbar-thumb {
            background-color: gray;
            border-radius: 4px;
          }
          
          .scroll-container::-webkit-scrollbar-track {
            background-color: lightgray;
            border-radius: 4px;
          }
          
          .scroll-container button {
            flex-shrink: 0;
            white-space: nowrap;
            /* margin-right: 10px; */
          }


















    @media screen and (max-width:798px) {
        .warning {
            color: #ff0077;
        }

        .aboutus{
            text-align: center;
        }    

        .data-1 {
            margin-left: 54px;
            margin-top: 8%;
        }

        .data-4 {
            font-size: 1.5rem;
            /* Smaller font size for mobile */
            margin-left: 25px;
            margin-top: 33px;
            margin-right: 12px;

        }
        .port-button-container {
            padding: 0px 0px; }

            .btn1 {
                background-color: grey;
                color: white;
                width: 155px;
                border-radius: 8px;
                height: 35px;
                margin-left: 51px;
                text-align: center;
            }
        .portfolio-btn_1 {
            height: 60px;
            margin: 15px 10px;
            /* display: flex; */
            justify-content: center;
            align-items: center;
            width: 144px;
            background: gray;
            border: 1px solid white;
            color: white;
            border-radius: 10px;
            display: grid;
            /* transform: rotateZ(45deg); */
        }

        .data-3 {
            font-size: 1rem;
            /* Smaller paragraph size for mobile */
            margin-left: 27px;
            margin-right: 12px;
        }

        .btn4 {
            padding: 10px 20px;
            font-size: 1rem;
            /* Adjust button size for mobile */
            margin-left: 124px;
        }

        
        .find-us-wrapper {
            flex-direction: column;
            align-items: center;
        }

        .contact-info {
            text-align: center;
            margin-left: 27px;
        }

        

        .sub-text {
            margin-left: 57px;
            /* Adjust the margins for smaller screens */
            margin-right: -17px;
            font-size: 14px;
            /* Adjust the font size if needed */
        }

        

        .map-container {
            margin-left: -139px;
        }

        .map-and-info {
            flex-direction: column;
            align-items: center;
            margin-left: 50PX;
        }

        .map-container iframe {
            width: 305px;
            height: 250px;
            margin-left: -147px;
        }

        .col-1-md-6 {
            width: 60%;
            width: 90%;
            margin-left: 22px;
        }

        .contact-info p1 {
            margin-left: 20px;
            margin-right: 12px;
        }  
            .scroll-container {
                width: 100%; /* Full width on mobile */
                margin-left: 0; /* No negative margin */
            }
        
            .scroll-container button {
                margin-right: 5px; /* Reduce margin on buttons for mobile */
            }
        
            .nav-links.mobile-menu {
                display: flex;
              }

        .inquiry-btn {
            display: none;
        }
    

    }