/* Shared global styles */
body{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
    background: linear-gradient(90deg, hsl(0, 0%, 0%), #051C27); 
	font-family: "Manrope", sans-serif !important;	 
    height: 100vh;
}

html{
    height: 100vh;
}

:root {
	--primaryColor:#049DE8;
	--secondaryColor:#3edbf0;
	--textColor:  #049DE8;	
	--textfonts: "Manrope", sans-serif !important;	
	--transition: all 0.3s ease-out;
	
}
/* Global classes */
hr{
    opacity: 1 !important;
    height: 2px;
    background: white;
}
h1 {
    font-size: 55px!important;
    line-height: 65px !important;
    color: #fff !important;
    margin-bottom: 30px !important;
}
h1 span{
	color: var(--primaryColor);
}


h2 {
    font-size: 36px !important;
    line-height: 100%;
    color: #fff !important;
}

h3 {
    font-size: 28px !important;;
    line-height: 38px !important;;
    color: #fff !important;;
}
h5 {
    font-size: 20px !important;
    line-height: 100% !important;
    color: #049de8 !important;
}

h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    margin: 0px;
}
a {
    color: white !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}
.blue-text {
    color: var(--primaryColor)  !important;;
}
.nav-link{
    cursor: pointer;
}

.side-img{
    max-height: 550px;
}
header{
    z-index: 99;
    position: relative;
}
.navbar {
    background-color: transparent !important;
}

.navbar img{
    width: 300px;
}

.navbar-nav{
    display: flex;
    gap: 25px;
}

.navbar .nav-link {
    color: white;
    transition: var(--transition);
    padding: 0px 20px;
}

.about-contact-us{
    padding-bottom: 0 !important;
}

.login-btn {
   
    border-radius: 25px;
    color: #fff;
    padding: 10px 20px;
    border: solid 1px var(--primaryColor);
    transition: var(--transition);
    text-decoration: none;  
    max-width: 200px;
    min-width: 180px;
    display: flex;
    justify-content: center;  
}
.g-5{
    gap: 20px;
}
.meeting-btn{
    border: solid 1px var(--primaryColor) !important;
    padding: 10px 20px !important;
    background: transparent !important;
}
p {
    font-size: 20px;
    line-height: 25px;
    text-align: justify;
    color: #fff;
}


.login-btn:hover {
    background: linear-gradient(90deg, #0082fc, #3edbf0); 
    color: #fff !important; 
    text-decoration: none;
}

.login-btn .nav-link:hover{
    color: #fff !important; 
    text-decoration: none;
}

.text-center{
    text-align-last: center !important;
}
.modal-btn::before{
content: none !important;
}

.modal-btn{
    min-width: 100px !important;
}
.navbar .nav-link:hover {
    color: var(--textColor);  
}
.main-content {
    margin: 0px;
}

.navbar-toggler{
    background: linear-gradient(90deg, #0082fc, #3edbf0);  
}
.newsletter-form .input-field button {
    background: linear-gradient(90deg, #0082fc, #3edbf0); 
    border: none;
    height: 44px;
    width: 115px;
    border-radius: 30px;
    color: #fff;
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    transition:var(--transition);
    z-index: 1; /* Ensure button stays above the background */
    cursor: pointer;
}

.newsletter-form .input-field button::before,
.header-btn ::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px; /* Adjust based on desired glow size */
    height: 300px; /* Adjust based on desired glow size */
    background: url('../images/hover.png') no-repeat center center;
    background-size: contain; /* Scale image to fit */
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0; /* Initially hidden */
    z-index: -1; /* Keeps it behind the button */
    border-radius: 50%; /* Optional: Makes the image appear more circular */
}

.newsletter-form .input-field button:hover::before,
.header-btn:hover::before  {
    opacity: 1; /* Shows the eclipse glow on hover */
}



.newsletter-form p{
	font-size: 12px;
	line-height: 100%;
	color: #fff;
	font-weight: 300;
}
.companies-logo h5{
	color: #fff;
	font-size: 15px;
	font-weight: 400;
}
.companies-logo .company-icons{
	display: flex;
	align-items: center;
	gap: 80px;
}
.compaies-logo .company-icons img{
	width: 140px;
}
.right-shape img {
    width: 74%;
}
.header-btn a {
    padding: 10px 48px;
    border-radius: 25px;
    border: 1px solid var(--primaryColor);
    color: #fff;
    text-decoration: none;
    transition: all 0.4s;
    position: relative;
    z-index: 1; /* Ensures the button stays above the glow */
    overflow: hidden; /* Ensures pseudo-element doesn't overflow */
}

.header-btn a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px; /* Adjust width to control glow size */
    height: 200px; /* Adjust height to control glow size */
    background: url('../images/hover.png') no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1; /* Ensures the glow is behind the button */
}

.header-btn a:hover::before {
    opacity: 1; /* Show the eclipse glow on hover */
}

.header-btn a:hover {
    background-color: var(--primaryColor);
    color: #fff;
}
.header-btn {
    display: flex;
    align-items: center;
    justify-content: end;
}

.mt20 {
    margin-top: 32px;
}
.container.h-100 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.btn {
    background: linear-gradient(90deg, #0082fc, #3edbf0); 
    border: none;
    height: 44px;
    width: 115px;
    border-radius: 30px;
    color: #fff;
    transition: all 0.3s ease;
    z-index: 1; /* Ensure button stays above the background */
    cursor: pointer;
    min-width: 250px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn {
    position: relative; 
     }

.btn:hover{
    color: white;
}

.btn:hover::before {
    opacity: 1; /* Shows the eclipse glow on hover */
}



.btn::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px; /* Adjust based on desired glow size */
    height: 300px; /* Adjust based on desired glow size */
    background: url('../images/hover.png') no-repeat center center;
    background-size: contain; /* Scale image to fit */
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0; /* Initially hidden */
    z-index: -1; /* Keeps it behind the button */
    border-radius: 50%; /* Optional: Makes the image appear more circular */
}


.section-padding {
    padding: 80px 0px;     
}

.gradient-div{
    background: linear-gradient(90deg, #0082fc, #3edbf0); 
}

.footer-li {
    display: inline-flex;
    gap: 20px;
}

.footer-li li{
    list-style: none;
    color: white
}
/* Media Query */
@media  (min-width: 992px) {
    .login-btn {       
        position: absolute;
        left: 95% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

@media  (max-width: 992px) {
    .navbar-nav{
        margin-top: 20px;
    }
}



@media  (max-width: 768px) {
    .md-hide 
     {
        display: none;
    }

    .compaies-logo .company-icons{
        flex-direction: column;
        justify-content: end;
    }

    .compaies-logo .company-icons img{
        margin-right: auto !important;
    }

}

@media  (max-width: 600px) {
    h1{
        font-size: 40px !important;
        line-height: 40px !important;
    }
    .navbar img{
        width: 200px;
    }
     
} 

@media  (max-width: 500px) {
.newsletter-form .input-field button::before, .header-btn ::before{
    width: 0;
}
.newsletter-form{
    display: flex;
}
.compaies-logo .company-icons{
    gap: 40px;
}
}



/* Continuous floating animation */
@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Keyframes for slide-in effect */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Applying the slide-in animation */
.col-lg-5 .img-fluid {
    animation: slideInRight 1s ease-out;
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

 
.col-lg-7 h1, 
.col-lg-7 h4, 
.newsletter-form {
    opacity: 0; /* Start hidden */
    animation: fadeDown 1s ease-out forwards;
}

/* Applying individual delays */
.col-lg-7 h1 {
    animation-delay: 0s; /* First element, no delay */
}

.col-lg-7 h4 {
    animation-delay: 0.3s; /* Slightly delayed */
}

.newsletter-form {
    animation-delay: 0.6s; /* Delayed further */
}