/* Reset some basic elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: raleway;
   
}

/* Basic structure */
header {
    background-color: #001659;
    
    height:100px;
}
.navbar-toggler{
    background-color: #fff!important;
}
.navbar{
    background-color: #001659;
}
/* Style for the scrolled navbar */
.navbar.scrolled {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled #navbar-logo {
    max-height: 40px;
    transition: max-height 0.3s ease;
}

#navbar-logo {
    max-height: 50px;
    transition: max-height 0.3s ease;
}
/* .scrolled {
    background-color: #fff; /* Change background when scrolled 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow
  
} */
.scrolled .nav-link{
    color:#000;
}
.scrolled .navbar-nav .nav-link.active, .scrolled .navbar-nav .nav-link.show{
    color: #001659!important;
}

.hero{
    background-color: #001659;
    height:750px;
}
.heroheading{
    font-size:60px;
    color: #fff;
    text-align: left;
    line-height: 1.2;
    font-family: raleway;
    font-weight: 800;
}
.herop{
    font-size:16px;
    color: #fff;
    text-align: left;
    line-height: 24px;
    font-family: raleway;
    padding: 0 100px 0 0;
  
}
.hero .btn-primary{
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 1.3px;
    font-family: raleway!important;
    font-weight: 600;
    padding: 14px 24px;
    border: 0 solid;
    background: #5153ff;
    color: #fff;
    border-radius: 5px;
}
.hero-bottom{
    background-color: #e6e6fb;
    border-radius:30px;
    padding:0 100px 0 100px;
    position: relative;
    top:-130px;
}
.hero-bottom h3{
    font-size: 32px;
    line-height: 1.33;
    font-family: raleway;
    font-weight: 800;
    color: #0c0c54;
    font-style: normal;
    padding: 80px 0 80px 0;
    text-align: center;
}
.client-logos {
    display: flex;
    justify-content: center; /* Center the images horizontally */
    gap: 1px; /* Optional: adds space between images */
   
}

.client-logos img {
    width: 220px; /* Adjust image size */
    height: auto;
    display: inline-block;
    filter: brightness(0) saturate(100%); /* Makes the image black and white */
    transition: filter 0.3s ease; /* Smooth transition */
}

.client-logos img:hover {
    filter: brightness(1) saturate(100%); /* Restores the original color on hover */
}
.box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center; /* Center text */
    padding: 20px;
   
   
    border-radius: 8px; /* Optional: Rounds the box corners */
    height: 100%; /* Makes sure all boxes are of equal height */
}

.box-container img {
    max-width: 100px; /* Adjust image size */
    margin-bottom: 15px; /* Space between image and heading */
}

.box-container h5 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.3;
    font-family: raleway;
    font-weight: 800;
    color: #0c0c54;
    font-style: normal;
}

.box-container p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight:500;
    color:#000;
}
.productivity{
    background: #0e0f52;
    border-radius:15px;
   
}
#productivity1 .productivity{
    background: #686ae5;
    border-radius:15px;
   
}
#productivity2 .productivity{
    background: #e6e6fb;
    border-radius:15px;
   
}

.list-inline ul {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
  
  }
  
 .list-inline li {
    display: inline-block;
    margin-right: 40px; /* Add spacing between the list items */
    color:#fff;
    font-weight:800;
    
  }
  .white-list li {
    color: white;
    line-height: 50px;
    font-weight:800;
    font-size:18px;
  }
.container {
    width: 100%;
    max-width: 1140px!important;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}
.nav-item a {
    color:#fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1.5px;
}
.nav-item a:hover {
    color:#fff;
    text-decoration: none;;
}
.dropdown-item{
    padding:20px;
}
.dropdown-menu a{
    color:#000;
    text-decoration: none;
    letter-spacing: 0px;
    
}
.dropdown-menu a:hover{
    color:#000;
    text-decoration: none;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: #fff!important;
}
main {
    padding: 20px;
}

/* Links */
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #555;
    text-decoration: underline;
}

/* Buttons */
button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

/* Forms */
input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
}

input[type="submit"] {
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #555;
}


.dropdown-menu ::after{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 30px;
    top: -8px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff;
    /* border-style: solid; */
    border-width: 1px;
    /* border-color: rgba(var(--ca-dark), .1) transparent transparent rgba(var(--ca-dark), .1);*/
} 
/* Show dropdown on hover */
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Adjust to prevent slight jump */
}



.navbar-nav .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg); /* Rotates arrow when hovered */
}

/* Optional: Add smoothness when hovering over dropdown items */
.dropdown-menu {
    transition: all 0.3s ease;
}

@keyframes flyUp {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .hero-bottom {
    animation: flyUp 1s ease-in-out;
    opacity: 0;
    animation-fill-mode: forwards;
  }
  .trial {
    position: relative; /* Ensures the overlay is positioned relative to the .trial container */
    background-color: #0e0f52;
    height:400px; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
   
   
}
.trial1 {
    position: relative; /* Ensures the overlay is positioned relative to the .trial container */
    background-color: #0e0f52;
    height:auto; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
   
   
}
#trial{
    margin-bottom:50px;
}

.trial-overlay {
    background-image: url(../images/trial.png);
    background-position: bottom center;
    background-size: cover;
    opacity: .95;
    transition: background .3s, border-radius .3s, opacity .3s;
    height: 100%; /* Fill the height of the .trial section */
    width: 100%; /* Fill the width of the .trial section */
    position: absolute; /* Overlay will position absolutely within .trial */
    top: 0;
    left: 0;
    z-index: 1; /* Ensure it stays behind the content */
}

.trial .container {
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}
.trial h2{
    font-size: 48px;
    line-height: 1.2;
    font-family: raleway;
    font-weight: 800;
   
    font-style: normal;
}

.trial1 h2{
    font-size: 48px;
    line-height: 1.2;
    font-family: raleway;
    font-weight: 800;
   
    font-style: normal;
}
.team-box{
    padding:40px;
    background-color: #fff;
    border-radius:15px;
    color:#000;
}
.team-member {
    display: flex;
    /* align-items: center; */
}

.team-member img {
    margin-right: 15px; /* Adjust spacing between image and text */
    width: 58px; /* Adjust size as needed */
    height: 58px;
}

.team-info {
    display: flex;
    flex-direction: column;
    
}
.team-info h6{
    font-weight:600;
}
.team-info p{
    color: #707f8f;
}
#workforu h2{
        font-size: 48px;
        line-height: 1.2;
        font-family: raleway;
        font-weight: 800;
        font-style: normal;
        text-align: center;
}
#workforu{
    margin-bottom:100px;
    font-size:20px;
    font-weight: 600;
}
#workforu h4{
    font-size: 24px;
    line-height: 1.25;
    font-family: raleway;
    font-weight: 800;
   
    font-style: normal;
    padding-bottom: 30px;
}
#workforu p{
    text-align: center;
}
#workforu li{
    padding-bottom:30px;
}
#workforu li img{
    margin-right:2rem;
}
#last{
    background-color: #001659;
    color:#fff;
    padding:80px;
}
#last h2{
    font-size: 48px;
    line-height: 1.2;
    font-family: raleway;
    font-weight: 800;
    font-style: normal;
}
/* Footer */
footer {
    background-color: #001659;
    color: #fff;
    text-align: center;
    padding: 50px 0;
    /* position: sticky; */
    bottom: 0;
    width: 100%;
}
footer .social-icons i {
    
    color: white; /* Icon color */
    transition: color 0.3s; /* Smooth transition for hover effect */
    padding-bottom: 20px;
}

footer .social-icons i:hover {
    color: #007bff; /* Change color on hover */
}

footer h4 {
    font-size: 20px;
    line-height: 1.3;
    font-family: raleway;
    font-weight: 800;
    padding-bottom:30px;
    text-align: left;
}

footer ul {
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

footer ul li {
    list-style: none; /* Remove bullet points */
    color: white; /* List item color */
    padding-bottom: 15px;
    text-align: left;
}
footer ul li a{
    text-decoration: none;
    color:#fff;
}
footer ul li a:hover{
    text-decoration: none;
    color:#fff;
}
footer .contact-info i {
    margin-right: 5px; /* Space between icon and text */
    padding-bottom: 20px;
}
@media (max-width:800px){
.dropdown-menu ::after{
    display: none;
}
}