*{
     font-family: 'Poppins', sans-serif;
    
}

:root{--pirmary:#f7c042; 
--dblue:#002a66; --dred:#dc3545;}
body{ font-size: 16px;}

header{
    /* position: absolute; */
    width: 100%;
    /* top: 15px; */
    margin: 0 auto;
    z-index: 1;
    background: #002a66;
    padding: 4px 0px;
    position: sticky;
    top: 0;



}
header .logo,footer .logo{
    font-size: 34px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
}
header .logo span{
    color: #fff;
}
header img{ width: 80px; border-radius: 50%;}
header .btn{
    color: #fff;
    padding: 7px 14px;
    text-decoration: none;
    border-radius: 4px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600;
}
header .btn:hover{
    color: #dc3545;
    transition: all 0.3s ease;
}
header a i{
    color: #dc3545;
    font-size: 20px !important;
}

footer i.fa{
    color: var(--dred);
    margin-right: 5px;
}


.heading-section h2{font-size: 40px; text-transform: capitalize; font-weight: 500;position: relative; }

.heading-section span{position: absolute; bottom: 0;}

.banner {
background: linear-gradient(to right, rgb(0 0 0 / 70%), rgb(255 255 255 / 0%)), url(../images/banner.jpeg) no-repeat;
  background-size: cover;
  height: 580px;
}
.banner img{width: 100%;}
.banner-content{ color: #fff; display: flex; flex-direction: column; padding: 155px 0 40px 0;}
.banner-content h1{ font-size: 52px;font-weight: 600; color: #fff;}
.banner-content span.title{font-size: 16px; text-transform: capitalize;  background: #dc3545;  width: fit-content;
    padding: 2px 15px; border-radius: 5px; margin-bottom: 20px;}
.banner-content h1 span.orng{color: #dc3545;}
.banner-content h1 span.grn{color: #52b947;}
.banner-content p{ font-size: 16px; line-height: 25px; border-top: 1px dashed; text-align: justify; padding-top: 20px;}
.banner .carousel-caption{ position: absolute; top: 200px; color: #fff; width: 40%;  text-align: start;
    height: fit-content; background: #dddddd69; border-radius: 10px; padding: 20px;}
.banner .carousel-caption h1{ font-size: 60px; text-shadow: 4px 0px 0px #856752;}
.carousel-control-next span.carousel-control-next-icon ,.carousel-control-prev span.carousel-control-prev-icon
{ background-color: #000; border-radius: 100%; width: 40px; height: 40px;}

.about{ padding: 40px 0;}
.about .row{padding-top: 20px;}
._about-img img{width: 100%;}
.about p{font-size: 16px; line-height: 28px; text-align: center;  color: #555;}
.about h2{ text-transform: capitalize; font-size: 40px;}

.Expertise, .why-choose{padding: 40px 0;}
.services,.our-Specialties{ padding: 40px 0; background: #dddddd30;}
.services .row{padding-top: 20px;}
.service-card{ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; cursor: pointer; overflow: hidden;margin-bottom: 50px;}
.service-card:hover img{transform: scale(1.1);}
.service-card img{width: 100%; transition: ease all 0.3s;}
.service-content{ padding: 25px 10px 1px 15px; height: 355px;}
.service-content h3{font-size: 22px; margin-bottom: 15px; padding-bottom: 7px; position: relative; font-weight: 600;}
.service-content h3:before{ width: 100px; content: ''; background:var(--pirmary);  height: 2px; position: absolute; bottom: 0;}
.service-card p{
    color: #555;
}
.service-card p strong{
    display: block;
    color: #000;
    font-weight: 500;
    margin-top: 10px;
}
.our-Specialties{padding: 40px 0;}
.our-Specialties .row{ margin-bottom: 0px;flex-wrap: nowrap; padding: 0 0 0px 0px;}
.our-Specialties ul.Specialties-list{list-style: none; padding: 0; margin: 0; overflow: hidden;}
.our-Specialties ul.Specialties-list li{display: flex; align-items: start;padding: 10px 0;}
.our-Specialties ul.Specialties-list li figure{ margin: 0;
    border: 1px solid #ddd;
    border-radius: 100%;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.our-Specialties ul.Specialties-list li ._our-content h3{font-size: 22px;}
.our-Specialties ul.Specialties-list li ._our-content{ padding-left: 20px;}
.our-Specialties ul.Specialties-list li ._our-content p{ text-align: justify;}

.content_information {
    display: flex;
    margin-bottom: 0px;
    flex-wrap: nowrap;
    padding: 30px 0 0px 0px;
}.content_information figure.fig_pic {
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0;
    align-self: flex-end;
    width: 40%;
    justify-content: center;
    display: flex;
    overflow: hidden;
}.content_information .category_app { width: 55%;}

footer{background: linear-gradient(to bottom, #011c42,#002a66);
     color: #fff; padding: 30px 0;}
footer p{margin: 0; font-size: 14px; text-align: start;}
footer  ul{
    list-style: none;
    padding-left: 0;
}
footer  ul li{
    margin-top: 20px;
}
footer  ul a{text-decoration: none; color: #fff; transition: ease all 0.3s; }
footer  ul a:hover{
    color: #dc3545;
}
._whstpp-icon{ position: fixed; bottom: 58px; right: 50px;z-index:9999;}
._whstpp-icon .fa-whatsapp{ font-size: 30px; background: #25D366; color: #fff; border-radius: 100%; padding: 8px 10px;}

.common-banner {
    background: linear-gradient(to right, rgb(0 0 0 / 70%), rgb(255 255 255 / 0%)), url(../images/banner.jpeg) no-repeat;
  background-size: cover;
  height: 400px;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 40px;
}
.common-banner .common-content{ color: #fff; width: fit-content;}
.common-banner .common-content h1{ font-size: 50px;text-transform: uppercase; text-shadow: 2px 0px 0px #333; border-bottom: 5px solid;}
.common-page{padding: 40px 0;}
.common-heading h2{ text-transform: uppercase; font-weight: 500;font-size: 40px; margin-bottom: 10px; }
.common-heading{padding-bottom: 20px;}
.common-page-content h2{ font-size: 30px; font-weight: 600; padding: 10px 0;}
.common-page-content h3{ font-size: 22px; font-weight: 600;}
.common-page-content ul li strong{display: block;}
.common-page-content ul li{padding-bottom: 10px;}
._list-title{margin-bottom:10px; display:block;}


.fadein { opacity: 0; transition: all 1.5s; transform: translate(0, 100px); }
.fadein.visible { opacity: 1; transform: translate(0, 0);  }

.slide-left {
    opacity: 0; /* Start as invisible */
    transform: translateX(100%); /* Initially off to the right */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transition for opacity and sliding effect */
}

/* When the element becomes visible (the "visible" class is added) */
.slide-left.visible {
    opacity: 1; /* Make the element visible */
    transform: translateX(0); /* Slide it into its normal position */
}

.zoom-out {
    opacity: 0; /* Initially invisible */
    transform: scale(0); /* Initially scaled down (zoomed out) */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition for opacity and scaling */
    transform-origin: center center; /* Ensure it zooms from the center */
}

/* When the element becomes visible (the "visible" class is added) */
.zoom-out.visible {
    opacity: 1; /* Make the element fully visible */
    transform: scale(1); /* Zoom in to its normal size */
}


.rate-cards{
    margin-top: 40px;
}
.rate-cards .rate-card{
    border: 1px solid var(--background-color);
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0px 2px 30px #ededed;
    height: 100%;
    border: 1px solid var(--accent-color);
    background: #fff;
}

.rate-cards .rate-card h3{
    font-size: 20px;
    font-weight: 600;
    margin: 0px 0px 20px; 
    color: #000;
    text-align: left;
    position: relative;
    padding-bottom: 15px;
}
.rate-cards .rate-card  h3:before{ width: 100px; content: ''; background:var(--pirmary);  height: 2px; position: absolute; bottom: 0;}
.rate-cards .rate-card p{
    color: #555;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
}



    @media only screen and (max-width: 767px) {
        .content_information figure.fig_pic{display: none;}
        .category_app{width: 100% !important;}
        .heading-section h2{font-size: 38px;}
        .carousel-control-next span.carousel-control-next-icon, .carousel-control-prev span.carousel-control-prev-icon
        { width: 25px !important; height: 25px !important;}
        .ft_logo { width: 37%; }
        footer .ft-up ul{width: 45%;}
        footer p{font-size: 11px; text-align: center;}
        ._whstpp-icon{ bottom: 60px; right: 17px;}
        header img {width: 16%;}
        .banner-content h1 { font-size: 24px;}
        .common-banner .common-content h1{
            font-size: 24px;
        }
        .common-banner{
            height: auto;
        }
        header .logo, footer .logo {
    font-size: 14px;}
    .banner {
background: linear-gradient(to right, rgb(0 0 0 / 70%), rgb(255 255 255 / 0%)), url(../images/banner.jpeg) no-repeat;
  background-size: contain;
  height: auto
}
      }