@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    font-family: "Roboto", sans-serif;
    background-color: #0c0c0c;
    overflow-x: hidden;
}

.heading-one {
    color: #fff;
    font-size: 50px;
    font-weight: 500;
    max-width: 750px;
}

.heading-one span {
    color: #617187;
}




.service-heading {
    font-size: 111px;
    font-weight: 500;
    color: #fff;
}

.primary-button {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    padding: 12px 18px;
    display: inline-block;
    border: 2px solid #1E90FF;
    border-radius: 60px;
    position: relative;
    transition: all .3s ease;
    background-color: transparent;
}

.primary-button:hover{
    background-color: #1E90FF;
    color: #fff!important;
}

.header-button {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 18px;
    display: inline-block;
    border: 2px solid #1E90FF;
    border-radius: 60px;
    transition: all .3s ease;

}

.primary-button img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -40px;
}

/* Header styling */
header {
    width: 100%;
    height: 120px; /* Initial height */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 80px;
    top: 0;
    position: sticky;
    z-index: 9999;
    background: transparent; /* Default background */
    transition: all .8s ease-in; /* Transition includes height */
}

header.sticky {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 0) 80%);
}

header.fixed{
    position: fixed!important;
    top: 0;
    
}



header img {
    height: 55px;
    width: auto;
    object-fit: cover;
}

.right-wrapper {
    display: flex;
    align-items: center;
    color: #fff;

}

.right-wrapper nav ul {
    display: flex;
    gap: 25px;
    margin: 0px 25px;
    z-index: 99;
}

.right-wrapper nav ul li a {
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
}

nav ul li a.active{
    color: #1E90FF!important;
}

nav ul li a:hover{
    color: #1E90FF!important;
}

.container.banner {
    min-height: calc(100vh - 120px);
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 20px;

}

/* .banner-section{
    background: url('../../images/Mask\ group.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -800px 50px;
    
} */

#particles-js {
    position: absolute;
    width: 100%;
    height: 100vh;
    /* Fullscreen background */
    background-color: #000;
    /* Optional: Background color */
    z-index: -3;
    top: 0;
    pointer-events: none;
}

.banner-content {
    padding: 0px 30px;
}

.banner-content .primary-button {
    margin-top: 40px;
}

.banner-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;

}

.banner-image {
    max-width: 560px;
}

.banner-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
}




.content-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
}



.quate h3 {
    font-size: 58px;
    line-height: 90px;
    text-align: left;
    font-weight: 400;
    color: #617187;
}

.quate svg {
    margin-left: -40px;
    margin-bottom: 8px;
}

.quate-section {
    position: relative;
    margin-bottom: 60px;
    padding: 0px 60px;
}

.background-bars {
    position: absolute;
    right: -30px;
    bottom: -150px;
}

.container-custom {
    width: 75%;
    margin: 0 auto;
}

.service {
    min-height: 100vh;

}

.service h2 {
    margin-top: 35px;
    font-size: 50px;
    color: #fff;
    font-weight: 500;
}

.service p {
    font-size: 20px;
    line-height: 40px;
    color: #fff;
    font-weight: 400;
    margin: 20px 0;
}

.container-medium {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.service-image {
    display: flex;
    justify-content: center;

}

.service-image img {
    height: 100%;
    width: auto;
    max-width: 450px;
}




.white-section {
    background: #fff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px 0;

}

.white-section h2 {
    font-size: 56px;
    color: #000;
    font-weight: 500;
}

.white-section h2 span {
    color: #617187;
}

.white-section p {
    font-size: 20px;
    color: #000;
    margin-top: 30px;
}

footer {
    padding-top: 120px;
    padding-left: 60px;
    padding-bottom: 60px;
    padding-right: 60px;
    position: relative;
    overflow-x: hidden;
}

.gradient-footer {
    position: absolute;
    left: -60px;
    bottom: 0;
    width: 100%;
    pointer-events: none;

}

.contact-heading {
    color: #1E90FF;
    font-weight: 500;
    margin-bottom: 60px;
    font-size: 64px;
    text-align: center;

}

.contact-heading h2{
    font-size: 55px;
}


.contact-ico {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
}

.contact-ico .icon-pill {
    width: 55px;
    height: 55px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease;
    cursor: pointer;
}

.icon-pill svg {
    width: 30px;
    height: 30px;
}

.contact-ico small {
    font-size: 18px;
    color: #1E90FF;
}

.contact-ico p {
    font-size: 22px;
    color: #fff;
}

.footer-menu {
    margin-top: 200px;
    font-size: 20px;
    font-weight: 400;
}

.footer-menu li {
    margin-bottom: 15px;
}

.footer-icon-section {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.footer-icon-section .icon-pill {
    width: 50px;
    height: 50px;
}

.devider {
    width: 100%;
    height: 1px;
    background-color: #fff;
    margin-top: 40px;
    margin-bottom: 20px;
}

.end-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.end-footer h2 {
    font-size: 18px;
    font-weight: 500;
}

.end-footer p {
    font-size: 16px;
    font-weight: 400;
}

.gradient-body {
    position: absolute;
    right: 0;
    top: 30px;
}

footer {
    background: url('../../images/Mask\ group.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: -20px bottom;
}



.horizontal-wrapper {
    height: 100vh;
    overflow: hidden;

    position: relative;
}

.content-section.service {
    height: 100vh;
    position: absolute;
    width: 100%;

}

.first {
    transform: translateX(0%);
}




.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
    background: transparent;
    border: none;
    z-index: 999;
    position: relative;

}


.hamburger .line {
    height: 4px;
    width: 100%;
    background-color: #fff;
    transition: transform 0.7s, opacity 0.3s;
}


.hamburger.active .line:nth-child(1) {
    transform: rotate(45deg);
    position: relative;
    top: 7px;
}

.hamburger.active .line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .line:nth-child(3) {
    transform: rotate(-45deg);
    position: relative;
    top: -7px;
}





body::before {
    content: "";
    position: fixed;
    top: var(--mouse-y, 0);
    /* Dynamically set by JavaScript */
    left: var(--mouse-x, 0);
    /* Dynamically set by JavaScript */
    width: 700px;
    /* Fixed size of the circle (you can adjust the size) */
    height: 700px;
    /* Fixed size of the circle */
    pointer-events: none;
    /* Makes sure the background doesn't block other interactions */
    background-image: url('../../images/gradient.svg');
    /* Replace with your image path */
    background-size: cover;
    /* Ensures the image covers the area */
    background-position: center;
    /* Centers the image */
    opacity: .9;
    /* Optional: Adjust opacity to control the effect intensity */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Center the image circle */
    transition: all 0.1s ease-out;
    filter: blur(15px);
    /* Apply blur to make the image soft (optional) */
    z-index: 9999;
}

/*about page*/

.about-banner {
    width: 100%;
    height: 50vh;
   
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.about-banner .banner-content {
    text-align: center;
    max-width: 900px;
    color: #fff;
}

.about-banner .banner-content .primary-heading {
    font-size: 60px;
    margin-bottom: 16px;
    font-weight: bold;
}

.about-description {
    font-size: 22px;
    line-height: 40px;

}

.about-sub-banner {
    width: 100%;

    background: #D9D9D9;
    text-align: center;
    color: #000;


    position: sticky;
    top: 0; /* Sticks the element to the top of the viewport */
  
    z-index: 99; /* Ensures it's above other elements */

    transition: opacity 0.3s ease; /* Smooth fade-in/out effect */

    transition: all 1s ease, top 0.3s ease;

}


.about-sub-banner.active-banner {
    position: sticky;
    top: 100px;
}

.about-sub-banner:not(.active-banner) {
    position: relative;
}


.about-sub-banner.last.sticky {
    position: relative;
    top: -70px; /* Move earlier by 70px, adjust this value */
}

.about-sub-banner h2 {
    font-size: 45px;
    padding: 50px 0px;
}

.pricing-table {
    background-color: #fff;
    padding: 80px 10px;
}

.pricing-table .choose-pricing-heading {
    font-size: 58px;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.pricing-table .choose-pricing-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    max-width: 700px;
}


.table-section {
    margin-top: 100px;
    margin-bottom: 30px;
}

.pricing-table {
    width: 100%;
    /* Table width */
    table-layout: fixed;
    /* Ensures fixed column widths */
}

.pricing-table th,
td {
    width: 200px;
    /* Fixed width for feature column */
}

.pricing-table th {
    font-weight: normal;
    /* No bold text */
    border-top: none;
    /* Remove top border */
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 500;

}

.pricing-table td {
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    font-size: 17px;
    padding: 10px 0px;
}

.table {
    border-width: 0;
}

.text-danger {
    color: red;
}

.text-success {
    color: green;
}



.price td.text-center {
    font-size: 28px;
    font-weight: 500;
}

.pricing-table .primary-button {
    color: #1E90FF !important;
}

.pricing-table .primary-button:hover {
    color: #fff !important;
}




/* end about page*/

.container-about{
    max-width: 75%!important;
    margin: 0 auto;
}

.table-responsive {
    overflow-x: scroll!important; /* Allows horizontal scrolling if the table is wide */
    scrollbar-width: thin; /* For Firefox: Ensures scrollbar is always visible */
    scrollbar-color: #ccc #f8f8f8;
   
}

.table-responsive::-webkit-scrollbar {
    width: 12px; 
    height: 12px; 

}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #ccc; 
    border-radius: 6px; 
}

.table-responsive::-webkit-scrollbar-track {
    background-color: #f8f8f8;
}
 


.header-button:hover{
    background-color: #1E90FF;
    color: #fff;
}


.table-section {
    position: relative; /* For button positioning */
  }




.scroll-button {
    display: none;
}


/* services css */

.services-banner{
    width: 100%;
    height: 60vh;
    background-color: #000;
    background: url('../../images/banner/c348f25191e255b4b98edc7e6ac69e87.png');
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
}

.services-banner .banner-content{
    margin-left: 90px;
    color: #fff;
}

.services-banner .primary-heading{
    font-size: 60px;
    font-weight: 600;
    line-height: 80px;
}

.contact-page-banner .primary-heading{
    font-size: 45px!important;
}

.contact-page-banner{
height: 40vh;
}

.single-service{
    padding: 90px 0px;
    color: #fff;
    transition: all .3s ease;
}
.single-service .service-heading{
font-size: 52px;
font-weight: 500;
}

.single-service .service-description{
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}

.service-point-block{
    margin-top: 30px;
    font-size: 22px;
    line-height: 40px;
    font-weight: 500;
  
}

.service-point{
    display: flex;
    gap: 10px;
    align-items: flex-start;
   
}

.point{
    flex-shrink: 0;
    margin-top: 12px;
}

.service-point-block .point{
    width: 10px;
    height: 10px;
    background-color: #1E90FF;
}

.service-section{
    border-bottom: 2px solid #fff;
    cursor: pointer;
}

.philosophy-section{
  
    padding: 140px 0px;
    color: #fff;
    background-color: #fff;
    color: #000;
}

.philosaphy-contend{
    max-width: 520px;
}

.philosaphy-contend h2{
    font-size: 45px;
    line-height: 50px;
    font-weight: 500;
}

.philosaphy-contend h2 span{
    color: #1E90FF;
}

.philosaphy-contend p{
    font-size: 20px;
    margin-top: 30px;
    line-height: 30px;
    font-weight: 400;
    text-align: justify;
}

.philosophy-points{
    display: flex;
    gap: 20px;
    margin-left: 40px;
    margin-bottom: 20px;
    align-items: start;
  

}

.philosophy-points .image-wrapper{
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background-color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 1px 0px 19px -3px rgba(82, 82, 82, 0.29);
-moz-box-shadow: 1px 0px 19px -3px rgba(82, 82, 82, 0.29);
box-shadow: 1px 0px 19px -3px rgba(82, 82, 82, 0.29);
}
.philosophy-points .image-wrapper img{
    width: 45px;
    height: auto;
    object-fit: contain;
    scale: .8;

}

.philosophy-points h4{
    font-size: 20px;
    font-weight: 500;
   
}
.philosophy-points p{
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 5px;
}

.active-section{
    background-color: #fff;

}
.active-section .single-service{

    color: #000!important;
}
.active-section .service-heading{

    color: #000!important;
}

.service-section:hover{
background-color: #fff;
}

.service-section:hover .service-heading{
    color: #000!important;
}

.service-section:hover .single-service{
    color: #000!important;
}



/*blog section*/
.blog-container{
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 10px;
}

.blog-box{
    margin: 20px auto;
    background: #232528;
    height: auto;
    
   
}

.blog-image{
    height: 300px;
    width: 100%;
    overflow: hidden;
}

.blog-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-contend{
    padding: 30px;

}

.blog-contend h2{
    font-size: 32px;
    color: #1E90FF;
    font-weight: 500;
    margin-bottom: 10px;
}

.blog-contend p{
    color: #fff;
    font-size: 20px;
    line-height: 32px;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: left;
}
.button-box{
text-align: right;
}
.blog-contend a {
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    transition: color .3s ease;
}

.blog-contend a svg{
    width: 40px;
   height: 30px;
}
.blog-contend a:hover{
    color: #1E90FF!important;
}



.primary-heading span{
    color: #1E90FF;
}


/*contact section*/
.contact-section{
    background-color: #232528;
    height: 900px;
    margin-top: 70px;
    padding: 130px 20px;
}

.map-container{
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 999;
    margin-top: 80px;
}

.contact-footer{
    margin-top: 350px;
}

/*end contact page*/


/*Service details page*/

.service-details-first-section{
    color: #fff;
    padding: 50px 0px;
    margin-top: 2rem;
   
}

.service-details-first-section p{
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
}

.service-details-first-section img{
    max-height: 400px;
    width: auto;
}


.service-details{
    margin-top: 100px;
}

.service-details h2{
font-size: 50px;
color: #1E90FF;
margin-bottom: 20px;

}

.service-details p{
    color: #fff;
    font-weight: 400;
    line-height: 30px;
}

.service-details a{
    padding-left:30px;
    padding-right: 30px;
}

.service-details-block{
    margin: 130px 0px;
}

.service-details-block h2{
    font-size: 30px;
    color: #1E90FF;
    font-weight: 500;
    margin-bottom: 10px;
}

.service-details-block p{
    color: #fff;
    font-weight: 400;
    line-height: 32px;
}
.blck{
    padding: 0 35px;
}

.blck.right-border{
    border-right: 2px solid #fff;
}

.service-why-choose{
    margin: 100px 0;
    color: #fff;
}

.service-why-choose h2{
color: #1E90FF;
font-size: 48px;
font-weight: 500;
text-align: center;
margin-bottom: 20px;
}

.service-why-choose-p{
    color: #fff;
    font-size: 20px;
    line-height: 34px;
    margin-top: 30px;
}

.faq-section{
    margin: 100px 0;
    text-align: center;
   
   
}

.faq-heading{
    color: #1E90FF;
    font-size: 48px;
    margin-bottom: 20px;
    margin-bottom: 50px;
}
/* FAQ Heading - Accordion Button */
.accordion{
    border: none!important;
    outline:none!important;
}

.accordion-item{
    border: none;
    border-bottom: 1px solid #fff;

}
.accordion-button {
    background: black;
    color: white!important;
    font-weight: 400;
    font-size: 22px;
    border: none!important;
    padding: 30px 30px!important; /* Adds padding to the heading */
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    width: 30px;
    height: 30px;
    background-image: url('https://img.icons8.com/ios-filled/50/ffffff/minus.png'); /* Minus icon for expanded state */
    background-repeat: no-repeat;
    background-size: contain;
}

.accordion-button::after {
    width: 30px;
    height: 30px;
    background-image: url('https://img.icons8.com/ios-filled/50/ffffff/plus.png'); /* Plus icon for collapsed state */
    background-repeat: no-repeat;
    background-size: contain;
}

/* FAQ Body - Accordion Body */
.accordion-body {
    background: black !important; /* Keeps the body background black */
    color: white !important; /* Ensures text remains white */
    padding: 20px; /* Adds padding to the body */
    text-align: left;
}

/* Ensures the body remains black even when expanded */
.accordion-button {
    background: black !important; /* Ensures the background remains black when expanded */
}


.icon-pill:hover{
    background-color: transparent;
    border: 2px solid #1E90FF;
}

/*blog view page*/

.blog-container{
    width: 85%;
    margin: 0 auto;
    margin-bottom: 100px;
}
.image-wrapper-blog{
    width: 100%;
    max-height: 500px;
    overflow: hidden;

}

.image-wrapper-blog img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-position: center center;
}

.blog-content h1{
    font-size: 38px;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: 600;
}

.blog-category{
    font-size: 18px;
    font-weight: 400;
    color: #9d9d9d;
    
}

.blog-description{
    margin-top: 20px;
    color: #fff;
}

.blog-description p{
    font-size: 18px;
    line-height: 33px;
}