@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

:root {
--brand: #0c00ad;
--dark: #092032;
--body: #516171;
--border: rgba(0,0,0,0.08);
--shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);

}

body {
font-family: 'Poppins', sans-serif  !important;
color: var(--body);
line-height: 1.7;
}

#preloader{
position: fixed;
width: 100%;
height: 100vh;
background: #fff 
url(/img/preloader.gif) no-repeat center;
z-index: 99999;
background-size: 10%;

}

h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4 {
font-weight: 700;
color: var(--dark);
}

.nav-link{
font-family: Poppins, sans-serif ;
font-size: 20px;
}
.bg-cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}


img {
width: 100%;
}

a {
color: var(--dark);
transition: all 0.4s ease;
font-weight: 500;
}

a:hover {
color: var(--brand);
}

section {
padding-top: 10px;
padding-bottom: 10px;
}

.text-brand {
color: var(--brand) !important;
}



h1, h2, h3, h4, h5, h6, p, a {
font-family: 'Poppins', sans-serif !important;
}


.top-nav {
background-color: var(--brand);
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
}

.top-nav p {
display: inline-block;
margin-bottom: 0;
margin-right: 10px;


}

.top-nav span,
.top-nav i {
vertical-align: middle;
}

.navbar {
box-shadow: var(--shadow);
}

.social-icons a {
width: 28px;
height: 28px;
display: inline-flex;
color: #fff;
background-color: rgba(255, 255, 255, 0.25);
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 100px;
}

.social-icons a:hover {
background-color: #fff;
color: var(--brand);
}
.navbar a{
font-size: 16px;
}
.navbar .navbar-nav .nav-link {
color: var(--dark);
}

.navbar .navbar-nav .nav-link:hover {
color: var(--brand);
}

.navbar .navbar-nav .nav-link.active {
color: var(--brand);
}

.navbar-brand {
font-size: 28px;
font-weight: 700;
}

.navbar-brand .dot {
color: var(--brand);
}

.btn {
padding: 8px 26px;
}

.btn-brand {
border-color: var(--brand);
background-color: var(--brand);
color: #fff;
}

.btn-brand:hover {
background-color: #d64022;
border-color: #d64022;
color:black;
}

.intro {margin-bottom: 36px;
text-align: center;}

.intro p {
max-width: 500px;
}
.intro h6{
color: #0d1b5d;
font-weight: 400;
text-transform: uppercase;
}

.intro h1 {
margin-top: 15px;
margin-bottom: 15px;
}

#about{
padding: 0;
margin: 0;
font-family: 'poppins', sans-sarif;
}

.mvv-container{
max-width: 90%;
margin: 50px auto 0;
}

.mvv-container .mvv-block{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}.mvv-container .mvv-block{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

#milestone {
background: linear-gradient(rgba(255, 77, 41, 0.85), rgba(255, 77, 41, 0.85)), url(../img/bg_banner1.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#milestone h1,
#milestone p {
color: #fff;
}



/* our credentials*/
.intro{
margin-top: 32px;
margin-bottom: 32px;
}

.col-4 crede{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.crede img{
max-width: 50%;
height: auto; 
width: auto;
border-radius: 5px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: transform 0.3s;
}
.crede img:hover {
transform: scale(1.05);
}



.service {
padding: 32px;
background-color: #fff;
box-shadow: var(--shadow);

border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: transform 0.3s;
}
.service:hover {
transform: scale(1.05);
}


.service h5 {
margin-top: 14px;
margin-bottom: 14px;
}

.service img {
width: 90px;
}
.project {
position: relative;
overflow: hidden;
z-index: 2;}
.project h6 {
font-weight: 400;
}
.project h6::before {
content: "";
height: 2px;
width: 30px;
display: inline-block;
background: var(--brand);
vertical-align: middle;
margin-right: 10px;
}
.project .overlay {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(255, 76, 41, 0) 0%, var(--dark) 100%);
}
.project .content {
position: absolute;
left: 10%;
bottom: 10%
}
.project h2,
.project h6 {
color: #fff;
}
.team-member {
text-align: center;
}
.team-member .image{
position: relative;
z-index: 2;
overflow: hidden;
}
.team-member .overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: -10%;
background-color: rgba(255, 77, 41, 0.7);
opacity: 0;
transition: all 0.4s ease;
}
.team-member h5 {
margin-top: 16px;
margin-bottom: 4px;
}
.team-member .social-icons {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
transition: all 0.4s ease;
}
.team-member .social-icons a {
width: 40px;
height: 40px;
}
.team-member:hover .social-icons {
top: 50%;
opacity: 1;
}
.team-member:hover .overlay {
top: 0%;
opacity: 1;
}
/*----------------------------------------------------------*/
#reviews {
background: linear-gradient(-90deg, rgba(8, 32, 50, 0.8), rgba(8, 32, 50, 0.8)), url(../img/office.jpg), #082032;;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.review {
text-align: center;
z-index: 2;
position: relative;
margin: 15px;
max-width: 768px;
margin: auto;
}
.review .bxs-quote-alt-left {
font-size: 120px;
position: absolute;
opacity: 0.1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.review img {
width: 80px !important;
height: 80px;
border-radius: 100px;
margin: auto;
}
.review h5 {
margin-top: 16px;
margin-bottom: 4px;
color: #fff;
}
.review h3 {
margin-top: 26px;
margin-bottom: 26px;
font-size: 22px;
color: #fff;
font-weight: 400;
line-height: 1.7;
}
.review small {
color: var(--brand);
}
.review .stars {
color: var(--brand);
}
/*======================clients============================*/
.logo-img {
width: 850px !important; /* Adjust the width as needed */
height: auto; /* This maintains the aspect ratio */
}
.blog-post {
position: relative;
background-color: #fff;
box-shadow: var(--shadow);
}
.blog-post .content {
padding: 32px;
}

.blog-post a {
position: absolute;
top: 20px;
left: 20px;
background-color: var(--brand);
padding: 2px 12px;
border-radius: 100px;
text-decoration: none;
color: #fff;
}
.blog-post h5 {
margin-top: 12px;
margin-bottom: 12px;
}
.blog-post small {
text-transform: uppercase;
color: var(--brand);
text-decoration: underline;
}
.footer {
background: linear-gradient(0deg, rgba(8, 32, 50, 0.9), rgba(8, 32, 50, 0.9)), url(/img/c2\ img\ carousal.png), #025697;;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.f1 {
height: 65vh;
width: 100%;
}

footer .footer-top {
padding-top: 0px;
padding-bottom: 0px;
}




.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0px;
padding-top: 0px;
}

footer .navbar-brand {
color: #fff;
}

footer p {
color: #ADB3B9;
}

footer .social-icons a {
width: 50px;
height: 50px;
font-size: 20px;
margin-left: 4px;
margin-right: 4px;
}

.loader {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #e1ff00;
z-index: 99999;
position: fixed;
left: 0;
right: 0;
}


input.form-control {
border-color: transparent;
height: 44px;
}

.form-control {
background-color: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.04);;
}

.form-control:focus {
box-shadow: none;
border-color: var(--brand);
}


.customer-logos slider{
display: flex;
margine: 10px;
padding: 10px;
align-items: space-between;
}
/* our Partner */
.logo-img {
max-width: 100px; /* Adjust the width as per your requirement */
height: 75px; /* This maintains the aspect ratio */
}


section {
margin-top: 10px;
padding-top: 5px;
}

/* vision                */


/*text animation*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.t-a-m {
font-family: "Montserrat", sans-serif;
font-size: 16px;
}
.am{
padding-top: 0px;
padding-bottom:0px !important;
}


.t-a-m {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 70vh;
font-size: 1.5em;
background: white;
color: #200ec2;
text-transform: uppercase;
gap: 10px;
padding-top: 0px;
}
.t-a-m  h2{
font-size: 35px !important;
}


h1 {
font-size:35px;
text-decoration: underline;

@media (max-width: 768px) {
font-size: 1.3em;
}
}

.text-shadow {
font-style: italic;
/* font-size: 50px; */
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: #dfc70d;
-webkit-text-stroke-width: 1px;
text-shadow: 2px 2px 10px rgb(234, 60, 217);
transition: all 0.5s ease-in-out;

text-align: center;
letter-spacing: 0.2em;
animation: flicker 0.5s ease-in-out infinite alternate;

&:hover {
color: #48720d;
}
}



@keyframes flicker {
0% {
opacity: 0.5;
text-shadow: 2px 2px 10px rgb(4, 116, 23);
}
100% {
opacity: 1;
text-shadow: 2px 2px 20px rgb(81, 3, 22);
}
}

.t-x {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
background-color: white;

}




.t-x-t {
text-align: center;
position: relative;
font-family: "Poppins", sans-serif;
text-transform: lowercase;
font-size: 16px !important;
letter-spacing: 2px;
overflow: hidden;
background: linear-gradient(90deg, #2abb39, #5539d0, #dd6464);
background-repeat: iteration-count-infanite;
background-size: 80%;
animation: animate 5s;
-webkit-background-clip: text;
margin-top: 0;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
.c-i-t{
height: 300px;
}

.mservice {
background-color: white;
margin-bottom: 0;
}

/* section header//////////////////////about////// */

.section-header {

position: relative;
max-width: 700px;
margin: 0 auto 60px auto;
padding-bottom: 25px;
padding-top: 35px;
margin-bottom: 0px;
}

.section-header h2 {
font-family: "Montserrat", sans-serif;
color: #0d1b5d;
font-size: 35px;
font-weight: 700;

text-transform: uppercase;
letter-spacing: 6px;
text-align: center;
}

.section-header::after {
content: '';
position: absolute;
display: inline-block;
width: 100px;
height: 5px;
background: #cccccc;
border-radius: 0 0 5px 5px;
bottom: 0;
left: calc(50% - 50px);
}

.section-header p {
font-size: 16px;
font-weight: 300;
text-align: center;
margin: 0;
}


/* button style//////////////////////button styel  /////////////////////////////// */
/* .effect-code {
width: 50%;
margin: auto;
text-align: center;
font-size: 32px;
padding: 30px;
} */

.effect-code {
width: 50%; /* You can adjust this percentage as needed */
margin: auto;
text-align: center;
font-size: 32px;
padding: 30px;
}


.effect-code>a {
color: white;
}


.effect-code>a:hover {
color: #516171;

}

.icons {
width: fit-content;
display: flex;
margin: auto;
gap: 0.4rem;
}

.icons a:hover {
transform: scale(1.2);
}

.icons a {
transition: transform 0.2s ease-out;
margin: 2px;
}

.icons img {
width: 60px;
height: 60px;
}



.cta {
position: relative;
margin: auto;
padding: 7px 10px;
transition: all 0.3s ease;
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
}

.cta:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 50px;
background: #fff;
width: 50px;
height: 45px;
transition: all 0.3s ease;
}

.cta span {
position: relative;
font-family: "Ubuntu", sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.05em;
color: rgb(48, 45, 45);
}


.cta svg {
position: relative;
top: 0;
margin-left: 10px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #234567;
stroke-width: 2;
transform: translateX(-5px);
transition: all 0.3s ease;
}

.cta:hover:before {
width: 100%;
background:#516171;
}

.cta:hover svg {
transform: translateX(0);
}

.cta:active {
transform: scale(0.95);
}

.cta > span {
color:#423189;
}




/* ------------------------------ranu----------------------------------------- */



.heading {
text-align: center;
margin-bottom: 0px; /* Remove the margin at the bottom of the section-header */
}

.img-box img {
max-width: 60%;
height: 70vh;
width: 90vw;
border-radius: 90%;
}


/* ------------------------card------------------- */
.who_section {
background-color: #f0f0f0;
padding: 30px 0;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

/* Style the image box 
.img-box1 {
text-align: center;
}*/

.img-box1 img {
max-width: 100%;
height: 30vh;
width: 40vw;
}
.img-box2 img {
max-width: 100%;
height: 25vh;
width: 40vw;
}
.img-box3 img {
max-width: 100%;
height: 25vh;
width: 40vw;
}
.img-box4 img {
max-width: 100%;
height: 30vh;
width: 40vw;
}


.img-box5 img {
max-width: 100%;
height: 60vh;
width: 60vw;
}





/* Style the heading */
.heading_container h2 {
font-size: 24px;
margin-top: 20px;
}

/* Style the detail box */
.detail-box {
padding: 20px;
}

.detail-box p {
margin-bottom: 15px;
}

/* Set the layout to display text beside the image */
.row {
display: flex;
flex-direction: row;
}

.col-md-5 {
order: 2; /* Order image column to the right */
}

.col-md-7 {
order: 1; /* Order text column to the left */
}

.heading ,h2{
color: #0d1b5d ;
}

  /* Style the button */
  #scrollBtn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}

#scrollBtn:hover {
    background-color: #777;
}

@media screen and (max-width: 720px) {


.section-header h2 {

font-size: 30px;

}


.section-header p {
font-size: 16px;
font-weight: 300;
text-align: center;
margin: 0;
}


/****clinet logo********/
/* Add your CSS rules for phones here */
.customer-logos .slide img {
width: 80px; /* Reduce the width of logos for smaller screens */
height: 80px; /* Adjust the height accordingly */
}



/* Adjust the font size for the heading */
.customer-logos h6 {
font-size: 18px; /* Decrease the font size for smaller screens */
}

footer .col-lg-4 {
width: 100%; /* Occupy full width for tablets */
text-align: center;
padding: 20px; /* Add padding for better spacing */
box-sizing: border-box; /* Include padding in the width */
}

footer .footer-bottom {
text-align: center; /* Center-align copyright text */
padding: 20px; /* Add padding for better spacing */
}

footer .navbar-brand img {
max-width: 30%; /* Adjust image size for tablets */
height: auto;
}

footer p {
margin-bottom: 20px; /* Add some space between paragraphs */
}

footer .social-icons a {
margin: 0 5px; /* Adjust spacing between social icons */
}

.f1 {
height: 100%;
width: 100%;
}


}


@media screen and (min-width: 721px) and (max-width: 1025px) {


.t-x-t{
padding-top: 0px;
}

/****clinet logo********/
/* Add your CSS rules for phones here */
.customer-logos .slide img {
width: 80px; /* Reduce the width of logos for smaller screens */
height: 80px; /* Adjust the height accordingly */
}



/* Adjust the font size for the heading */
.customer-logos h6 {
font-size: 18px; /* Decrease the font size for smaller screens */
}


footer .col-lg-4 {
width: 100%; /* Occupy full width for tablets */
text-align: center;
padding: 20px; /* Add padding for better spacing */
box-sizing: border-box; /* Include padding in the width */
}

footer .footer-bottom {
text-align: center; /* Center-align copyright text */
padding: 20px; /* Add padding for better spacing */
}

footer .navbar-brand img {
max-width: 20%; /* Adjust image size for tablets */
height: auto;
}

footer p {
margin-bottom: 20px; /* Add some space between paragraphs */
}

footer .social-icons a {
margin: 0 5px; /* Adjust spacing between social icons */
}

.f1 {
height: 100%;
width: 100%;
}}








@media screen and (min-width: 1024px) and (max-width: 1600px) {




footer .col-lg-4 {
width: 100%; /* Occupy full width for tablets */
text-align: center;
padding: 20px; /* Add padding for better spacing */
box-sizing: border-box; /* Include padding in the width */
}

footer .footer-bottom {
text-align: center; /* Center-align copyright text */
padding: 20px; /* Add padding for better spacing */
}

footer .navbar-brand img {
max-width: 20%; 
height: auto;
}

footer p {
margin-bottom: 20px; /* Add some space between paragraphs */
}

footer .social-icons a {
margin: 0 5px; /* Adjust spacing between social icons */
}

.f1 {
height: 100%;
width: 100%;
}}