*{
    padding: 0px;
    margin: 0px;
}

.text-16{
    font-size: 16px;
}
/* home hero page  */
.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bg-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ensures video fills the container */
}

@media (max-width: 375px) {
    .bg-video {
        height: 800px; /* Adjust height as needed for smaller screens */
        object-fit: cover; /* Maintain aspect ratio and fill */
    }
    .custom-overlay{
        width: 100% !important;
    }
    .custom-text h1{
        padding-top: 35%;
    }
}

@media (max-width: 1024px) {
    .bg-video {
        height: 800px; /* Adjust height as needed for smaller screens */
        object-fit: cover; /* Maintain aspect ratio and fill */
    }
    .custom-overlay{
        width: 100% !important;
    }
    .custom-text h1{
        padding-top: 35%;
    }
}


.custom-overlay {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    text-align: center;
    z-index: 10;
}

.custom-text h1 {
    font-size: 84px; /* Adjust as needed */
    margin-bottom: 10px;
    color: rgba(0, 71, 130, 1);
    text-shadow: 1px 1px 0 white, -1px -1px 0 white, 
                 1px -1px 0 white, -1px 1px 0 white; /* Black outline */
    font-weight: bold;
}

.custom-text p {
    font-size: 1rem; /* Adjust as needed */
    margin-bottom: 20px;
}

.custom-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.custom-quote, .custom-learn {
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color: #007bff; /* Customize button color */
    border-radius: 5px;
    transition: background-color 0.3s;
}

.custom-quote:hover, .custom-learn:hover {
    background-color: #0056b3; /* Darken button color on hover */
}


.queries2 h1,
.queries3 h1,
.super,
.super2 {
    -webkit-text-fill-color: transparent;
}

.queries h1 {
    line-height: 1;
    font-weight: 500;
}

.nav-link:active {
    color: red;
    font-weight: bold;
}

.nav-link:hover {
    color: red;
}

.btn {
    cursor: pointer;
}

.left-red {
    left: 0;
    top: 0;
    margin-left: -10.9px;
}

.btn,
.buttons a {
    text-decoration: none
}

*,
.box1 h3,
.box1 p,
.text-box h2 {
    margin: 0
}

.accordion-header,
.bt,
.dot,
.next,
.prev,
.submit-btn {
    cursor: pointer
}

.dots,
.feature-box,
.features-section,
.hero-section,
.owl-carousel .owl-nav {
    text-align: center
}

.bg-blue,
.btn,
.btn1 {
    background-color: #004782;
}
.blue-color{
    color: #004782;
}
.top {
    padding-top: 80px
}

.one {
    background-image: radial-gradient(24% 100% at 50% 0, #ff7666 0, rgba(216, 23, 2, .2) 63.5%, rgba(255, 255, 255, 0) 100%);
    padding-top: 100px;
}

.one2 {
    background-image: radial-gradient(24% 100% at 50% 0, #ff7666 0, rgba(216, 23, 2, .2) 63.5%, rgba(255, 255, 255, 0) 100%);
    padding-top: 100px;
}

h1,
h2 {
    letter-spacing: -1px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 700;
}

.one1 {
    background-image: radial-gradient(24% 100% at 50% 0%, #004782 0, #00478233 63.5%, #fffFFF00 100%);
    padding-top: 100px;
}

footer,
section {
    background-color: #fff
}

.red-right {
    position: absolute;
    right: 0;
}

.red {
    background-color: #d81702;
    color: #fff
}

.btn2 {
    background: linear-gradient(90deg, #004782 -195.88%, rgba(255, 255, 255, 0) 364.12%, #2e2625 364.12%);
    border: 1px solid #cce8ff
}

.bg, .navbar-nav {
    background-color: rgba(255, 255, 255, 0.509); /* Semi-transparent background */
    backdrop-filter: blur(10px); 
     -webkit-backdrop-filter: blur(10px);
    border-radius: 10px; /* Optional: Add rounded corners for a smoother look */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Optional: Add a soft shadow for depth */
    
}


.btn3 .box1 {
    background: #96a7BC99;
    opacity: 2
}

.collapse li a,
.text-col {
    color: #004782
}
.text-red{
    color: #d81702;
}

.btn2,
.text-box,
.two {
    color: #fff;
}

/* .navbar-nav {
    opacity: .9;
} */

@media (max-width:991px) {
    .navbar-nav {
        padding: 20px;
    }
}

.service button {
    font-size: 15px;
}

.bg {
    border-radius: 20px;
    border: 1px solid #eff0f6;
    box-shadow: 0 0 64px 0 #0000000D;
}

.gradient {
    background-image: radial-gradient(24% 50% at 50% 50%, #ff8d81 0, rgba(216, 23, 2, .2) 30.5%, rgba(255, 255, 255, 0) 100%)
}

.queries h1 {
    background: linear-gradient(to right, #060645, red 50%, #060645 60%);
    background-clip: text;
    color: transparent
}

.accordion {
    width: 100%;
    margin: 20px auto
}

.acc {
    background: #f5f5f5;
    border: 1px solid #d9d9d9
}

.accordion-item {
    border-radius: 9px;
    transition: border-radius 0.3s;
}

.accordion-header {
    padding: 15px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    /* Ensure the header looks clickable */
}

.accordion-content {
    padding-left: 10px;
    background-color: #fff;
    max-height: 0;
    /* Initially collapsed */
    overflow: hidden;
    /* Hide overflowed content */
    transition: max-height 0.4s ease;
    /* Smooth open/close transition */
}

.active .accordion-content {
    max-height: 500px;
    /* Maximum height you expect the content to grow to */
}

.active.accordion-item {
    border-radius: 0;
}

.icon {
    font-size: 24px;
    transition: transform 0.3s;
}

.active .icon {
    transform: rotate(180deg)
}

.two {
    background-color: #004782;
    border-radius: 10px
}

.two span {
    background-color: red;
    border-radius: 50px
}

.bg-grey {
    background-color: #e9e9e9
}

.foot p {
    color: red;
    font-size: 20px
}

.b1,
.rela {
    position: relative
}

.box1 {
    position: absolute;
    top: 156%;
    left: 20px;
    background-color: rgba(0, 0, 0, .7);
    z-index: 1
}

.btn2 {
    background-color: #f90;
    border: none;
    margin-top: 15px
}

.queries2 h1 {
    font-size: 80px;
    font-weight: 700;
    line-height: 90px;
    margin: 0;
    background: linear-gradient(to right, red 0, #004782 30%);
    -webkit-background-clip: text;
    background-clip: text;
}

.queries3 h1 {
    background: linear-gradient(to right, red 0, #fff 30%);
    -webkit-background-clip: text;
    background-clip: text
}

.light-blue {
    background-color: #e8f3ff
}

.first {
    background: linear-gradient(232.12deg, #249e03 .58%, #006838 94.46%)
}

.second {
    background: linear-gradient(232.12deg, #f2a91d .58%, #ed1c24 94.46%)
}

.third {
    background: linear-gradient(232.12deg, #0795ff .58%, #0f68ea 94.46%)
}

.fourth {
    background: linear-gradient(232.12deg, #8638e5 27.34%, #af6eff 94.46%)
}

.k {
    position: relative;
    border-radius: 10px 10px 0
}

.text-box {
    position: absolute;
    top: 50%;
    left: 33.2%;
    padding: 20px;
    border-radius: 15px 0 15px 15px;
    max-width: 55%;
    background: #1D83F899;
    box-shadow: 2px 1px 44px 0px #00000014;
    backdrop-filter: blur(19px);
}

.text-box1,
.text-box2,
.text-box3,
.text-box4 {
    top: 84%;
    background-color: #004782;
    border-radius: 15px 0 15px 15px
}

@media (min-width:768px) and (max-width:992px) {
    .k {
        width: 50%
    }

    .text-box {
        position: static;
        max-width: 100%
    }
}

@media (min-width:992px) and (max-width:1400px) {
    .k {
        width: 50%
    }


}

@media(min-width:300px) and (max-width:411px) {
    .text-box {
        max-width: 100%;
        position: static
    }
}

@media(min-width:411px) and (max-width:1198px) {
    .text-box {
        max-width: 100%;
        position: static;
    }
}

@media (min-width:1200px) and (max-width:1400px) {
    .text-box {
        height: 140px;
    }
}

.text-box1,
.text-box2,
.text-box3,
.text-box4 {
    position: absolute
}

.text-box1 {
    left: 45.4%
}

.text-box2 {
    left: 47.5%
}

.text-box3 {
    left: 51.8%
}

.text-box4 {
    left: 65.6%
}

.carousel,
.image-carousel,
.image-carousel2 {
    position: relative;
    overflow: hidden;
}

.text-box h2 {
    font-size: 22px
}

.text-box p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5
}

.features-section {
    padding: 50px 20px
}

.navbar-brand {
    backdrop-filter: blur(32px)
}

.features-section h1 {
    font-size: 32px;
    color: #004f9f
}

.features {
    margin-bottom: -10%;
    z-index: 1
}

.feature-box {
    background: linear-gradient(0deg, #fff, #fff), radial-gradient(96.67% 83.83% at 44.58% 20.77%, rgba(0, 71, 130, .1) 0, rgba(0, 71, 130, .024) 66.6%, rgba(0, 71, 130, .024) 99%);
    box-shadow: 2px 1px 38px 1px #00000014;
    border-image-source: linear-gradient(177.95deg, rgba(0, 71, 130, 0.4) 1.92%, #FFFFFF 89.9%)
}

.l {
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f1f1f1
}

.l h1 {
    color: #000;
    font-size: 2rem
}

.l h1 span {
    color: #0056b3
}

.l p {
    font-size: 1.1rem;
    color: #555
}

.btn {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    margin-right: 10px
}

.red-gradient {
    background: linear-gradient(90deg, #d81702 -195.88%, rgba(255, 255, 255, 0) 364.12%, #2e2625 364.12%);
    color: #d40b0b
}

.challenges-list,
.info p {
    color: #8b857f
}

.info p {
    margin-bottom: 0;
    font-size: 19px
}

.white-box {
    background-color: #fff;
    box-shadow: 0 0 64px 0 #00478212
}

.index {
    z-index: 1;
    margin-top: -10px
}

.super {
    background: linear-gradient(90deg, #d81702 0, #004782 50%, #004782 100%);
    -webkit-background-clip: text;
    background-clip: text
}

.super2 {
    background: linear-gradient(90deg, #a51100 40%, #960000 50%);
    -webkit-background-clip: text;
    background-clip: text
}

.co-1 {
    color: #7a7d9c
}

.right-border {
    border-right: 1px solid #edf0ee
}

.caropadd {
    padding: 10px
}

.custom-nav-buttons {
    display: flex;
    gap: 10px;
}

.custom-nav-btn {
    background-color: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.custom-nav-btn:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

.custom-nav-btn i {
    font-size: 18px;
    color: #333;
}

.owl-carousel .item img {
    width: 100%;
    height: 500px;
}

.learn-more svg {
    width: 20px;
    height: 20px;
    margin-bottom: 9px;
    fill: #e60023;
    rotate: 45deg
}

.image-carousel {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto
}

.image-carousel2 {
    width: 100%
}

.image-carousel .carousel-track,
.image-carousel2 .carousel-track {
    display: flex;
    animation: 10s linear infinite scrollImages
}

.image-carousel img,
.image-carousel2 img {
    width: 150px;
    height: 200px;
    margin: 0 10px;
    border-radius: 10px
}

.image-carousel2::after,
.image-carousel2::before,
.image-carousel::after,
.image-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    z-index: 2
}

.image-carousel2::after,
.image-carousel::after {
    right: 0;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0))
}

.image-carousel2::before,
.image-carousel::before {
    left: 0
}

@keyframes scrollImages {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.text-section {
    margin-top: 30px
}

.text-section h2 {
    font-size: 24px;
    color: #e60023;
    font-weight: 700;
    margin-bottom: 15px
}

.text-section p {
    font-size: 16px;
    color: #333;
    max-width: 800px;
    margin: 0 auto
}

.buttons a,
.form-group.terms input,
.social-icons img {
    margin-right: 10px
}

.highlight {
    color: red
}

.gradient-blue {
    background: linear-gradient(96.06deg, #01335d 100%, #004782 100%, #002341 100%),
        linear-gradient(0deg, rgba(5, 1, 13, 0.4), rgba(5, 1, 13, 0.4));
    backdrop-filter: blur(48px);
}

.gradient-red {
    background: linear-gradient(96.06deg, #900f01 12.48%, #d81702 40.34%, #530800 87.81%), linear-gradient(0deg, rgba(5, 1, 13, .4), rgba(5, 1, 13, .4));
    backdrop-filter: blur(48px);
}

.gra-1,
.gra-2,
.gra-3,
.gra-4,
.gra-5 {
    margin-top: 10%;
    backdrop-filter: blur(20px);
    box-shadow: 2px 1px 44px 0 #00000014
}

.buttons {
    margin: 20px 0
}

p {
    font-family: Barlow, sans-serif;
    font-weight: 400;
    font-style: normal
}

.buttons a {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px
}

.buttons a.quote {
    background-color: #ff3b3b
}

.buttons a.learn {
    border: 1px solid #004782;
    color: #004782
}

.carousel {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 10px
}

.slides {
    display: flex;
    transition: transform .5s ease-in-out;
    width: 400%
}

.carousel img {
    width: 100%;
    height: 400px;
    object-fit: cover
}

.next,
.prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 50%
}

.prev {
    left: 10px
}

.next {
    right: 10px
}

.dots {
    margin-top: 15px
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block
}

.gra-1 {
    background: #60260199
}

.gra-2 {
    background: #b6400199
}

.gra-3 {
    background: #30383B99
}

.gra-4 {
    background: #d6aA6D99
}

.gra-5 {
    background: #b0aEA299
}

.gra-6 {
    background: #ab022899;
    box-shadow: 2px 1px 44px 0 #00000014;
    backdrop-filter: blur(40px)
}

.gr {
    background: linear-gradient(90deg, #d81702 0, #004782 50%, #004782 100%)
}

.hero-section {
    background: url(assets/homeblack.png) 0 0/cover no-repeat;
    color: #fff;
    height: 500px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 30px
}

.contact-info h1,
.form-group,
.form-row {
    margin-bottom: 20px
}

* {
    padding: 0;
    box-sizing: border-box
}

.contact-section {
    display: flex;
    height: 100vh
}

.contact-info {
    background-color: #e31d1d;
    color: #fff;
    padding: 50px;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.contact-info p {
    margin-bottom: 10px
}

.social-icons img {
    width: 30px
}

.contact-form {
    background-color: #fff;
    width: 60%;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.contact-form form {
    width: 100%
}

.form-group.terms {
    display: flex;
    align-items: center
}

.bt {
    background-color: #e31d1d;
    color: #fff;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px
}

.bg-red {
    background-color: red;
}

.form1 {
    position: absolute;
    left: 50%;
    top: 0;
}

.back {
    /* position: relative; */
    background-image: url('./assets/home_from.png');
    height: 555px;
}

@media (max-width:1301px) {
    .form1 {
        position: static;
        width: 100%;
    }
}

.form-row {
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.form-group {
    flex: 1
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px
}

.form-group textarea {
    height: 100px
}

.submit-btn {
    display: block;
    width: 100%;
    padding: 15px;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color .3s;
    margin-top: 10px;
    background: linear-gradient(to right, #e31d1d, #143d87);
    display: flex;
    justify-content: center;
    align-items: center
}

.acoustic-insulation {
    padding: 50px 0;
}

.content-overlay {
    background: rgba(34, 43, 54, 0.8);
    padding: 30px;
    color: #fff;

}

.acoustic-insulation img {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

.content-overlay h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(90deg, #004782 -195.88%, rgba(255, 255, 255, 0) 364.12%, #2E2625 364.12%);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin-top: 50px;
    border: 1px solid #CCE8FF;

    &:hover{
        background: white;
        color : linear-gradient(90deg, #004782 -195.88%, rgba(255, 255, 255, 0) 364.12%, #2E2625 364.12%);
        text-decoration: none;
        border : 1px solid linear-gradient(90deg, #004782 -195.88%, rgba(255, 255, 255, 0) 364.12%, #2E2625 364.12%);
    }
}

.thermal-col {
    position: absolute;
    margin-left: -8.4%;
    bottom: 0;
    left: 0;
}

.thermal-col2 {
    position: absolute;
    right: 0;
    bottom: 0;
}

.thermal {
    background-image: url(assets/Background.png);
    padding-top: 100px;
    position: relative;
    height: 600px;
    background-size: cover;
}

.thermal .content-overlay {
    background: #96A7BC99;
    backdrop-filter: blur(64px);
    padding-left: 180px;
    padding-top: 50px;
    padding-bottom: 80px;
    border-top-right-radius: 10px;
}

@media(min-width:1068px) and (max-width:1200px) {
    .thermal .content-overlay {
        background: #96A7BC99;
        backdrop-filter: blur(64px);
        padding-left: 90px;
        margin-left: -45px;
        padding-top: 50px;
        padding-bottom: 80px;
        border-top-right-radius: 10px;
    }

}

@media(min-width:992px) and (max-width:1068px) {
    .thermal .content-overlay {
        background: #96A7BC99;
        backdrop-filter: blur(64px);
        padding-left: 100px;
        margin-left: 0px;
        padding-top: 50px;
        /* width: 100%; */
        padding-bottom: 80px;
        border-top-right-radius: 10px;
    }

}

@media(min-width:800px) and (max-width:992px) {
    .thermal .content-overlay {
        background: #96A7BC99;
        backdrop-filter: blur(64px);
        padding-left: 20px;
        margin-left: 0px;
        /* padding-top: 50px; */
        /* width: 100%; */
        padding-bottom: 80px;
        border-top-right-radius: 10px;
    }

}

@media(max-width:800px) {
    .thermal .content-overlay {
        position: static;
        margin-left: 0;
        padding: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 100%;
    }

}

.thermal1 {
    background-image: url(assets/Background\ \(1\).png);
    padding-top: 100px;
    position: relative;
    height: 600px;
    background-size: cover;
}

.thermal1 .content-overlay {
    background: #1C1C1C99;
    backdrop-filter: blur(64px);
    margin-right: -110px;
    padding-bottom: 90px;
    padding-left: 50px;
    padding-top: 50px;
    border-top-left-radius: 10px;
}

.thermal2 {
    background-image: url(assets/Background\ \(2\).png);
    padding-top: 100px;
    position: relative;
    height: 600px;
    background-size: cover;
}

.thermal2 .content-overlay {
    background: #253D3799;
    backdrop-filter: blur(64px);
    padding-left: 180px;
    padding-top: 50px;
    padding-bottom: 80px;
    border-top-right-radius: 10px;
}

.thermal3 {
    background-image: url(assets/Background\ \(3\).png);
    padding-top: 100px;
    position: relative;
    height: 600px;
    background-size: cover;
}

.thermal3 .content-overlay {
    background: #CE9E6099;
    backdrop-filter: blur(64px);
    margin-right: -110px;
    padding-bottom: 90px;
    padding-left: 50px;
    padding-top: 50px;
    border-top-left-radius: 10px;
}

.thermal4 {
    background-image: url(assets/Background\ \(4\).png);
    padding-top: 100px;
    position: relative;
    height: 600px;
    background-size: cover;
}

.thermal4 .content-overlay {
    background: #0A651B99;
    backdrop-filter: blur(64px);
    padding-left: 180px;
    padding-top: 50px;
    padding-bottom: 80px;
    border-top-right-radius: 10px;
}

.thermal5 {
    background-image: url(assets/Background\ \(5\).png);
    padding-top: 100px;
    position: relative;
    height: 650px;
    background-size: cover;
}

.thermal5 .content-overlay {
    background: #CC7D7899;
    backdrop-filter: blur(64px);
    margin-right: -110px;
    padding-bottom: 90px;
    padding-left: 50px;
    padding-top: 50px;
    border-top-left-radius: 10px;
}

@media(max-width:800px) {
    .thermal-col {
        position: static;

    }

    .thermal-col2 {
        position: static;
    }

    .thermal {
        position: static;
    }
}

/* .eco .card {
    width: 48%
} */

@media (max-width:768px) {
    .feature-container {
        display: none
    }

    .eco .card {
        width: 100%
    }
}

@media (min-width:768px) and (max-width:1199px) {
    .blue-box {
        width: 100%
    }
}

.owl-carousel .item {
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 10px;
    margin: 10px
}

.owl-carousel .item h4 {
    margin-top: 10px;
    font-size: 18px
}

.owl-carousel .owl-next,
.owl-carousel .owl-prev {
    background-color: #000;
    color: #fff;
    padding: 5px 15px;
    margin: 5px;
    border-radius: 50%
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    visibility: visible;
    position: absolute;
    background-color: #fff;
    opacity: 100%;
}
.dropdown-menu{
    margin-left: -20%;
}
@media (max-width: 1024px) {
    .nav-item .dropdown-menu {
        left: 10%;
        width: 100%; /* Use percentage to make it more responsive */
        height: auto; /* Keep the height auto to adjust based on content */
        margin: 0px; /* Center the dropdown menu */
        Overflow-y: scroll ;
    }
}


.dropdown .dropdown-menu .three {
    border-bottom: 1px solid #000
}

/* slider-section  */
@media(max-width:1024px){
    .slider-section{
        display: none;
    }
}
.carousel-container {
    overflow: hidden; /* Prevents overflow */
    width: 100%; /* Full width of the container */
    position: relative; /* For positioning of child elements */
}

.carousel-track2, .carousel-track3 {
    display: flex; /* Flexbox for horizontal alignment */
    animation: scroll 50s linear infinite; /* Continuous scroll animation */
}

.carousel-item2, .carousel-item3 {
    flex: 0 0 auto; /* Prevents flex items from growing */
    margin-right: 10px; /* Spacing for carousel 1 */
}

.carousel-item3 {
    margin-right: 30px; /* Spacing for carousel 2 */
}

.carousel-item2 img,
.carousel-item3 img {
    height: 150px; /* Fixed height */
    width: 100%; /* Full width of the container */
    object-fit: cover; /* Ensures the image covers the entire space */
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Adjust for seamless scroll */
    }
}

/* Remove margin from the last item */
.carousel-item2:last-child,
.carousel-item3:last-child {
    margin-right: 0; /* No extra margin after the last item */
}




.carousel-track3 {
    display: flex;
    animation: scroll right 8s linear infinite;
}

/* .carousel-item2 {
    min-width: 18%;
    margin-right: 10px;
    text-align: center;
} */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.owl-carousel .item {
    padding: 10px;
    text-align: center;
}

.owl-carousel .item img {
    border-radius: 15px;
    /* Rounded corners for images */
    width: 100%;
    /* Make sure the image fits within the container */
    height: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow */
}

.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.owl-nav button {
    background: transparent;
    border: none;
    font-size: 30px;
    color: #000;
    cursor: pointer;
}

.owl-nav button:hover {
    color: #333;
}

.end {
    border: 1px solid #EFF0F6;
    box-shadow: 0px 0px 64px 0px #00000012;
    background: #FFFFFF;
}

/* service page */
.btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.img-fluid {
    border-radius: 8px;
}

.text-right {
    text-align: right;
}

/* .image{
    position: relative;
    /* background-color: #007bff; */

.text-bo {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: -109px;
    padding-left: 10px;
}

.content-box {
    padding-left: 260px;
    padding:40px 40px 40px 120px;
    background: #96A7BC99;
    backdrop-filter: blur(64px);
    color:white;
}

.image .k {
    position: relative;
    background-image: url(assets/Background.png);
    height: 600px;
    width: 100%;
    background-size: cover;
    /* background-color: #007bff; */
}
@media (min-width:992px) and (max-width:1200px) {
    .text-bo {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: -10px;
    }
    
    .content-box {
        padding-left: 30px;
        
    }
    
    .k {
        width: 100%;
        background-size: cover;
    }
}

@media (min-width:768px) and (max-width:992px) {
    .text-bo {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: -20px;
    }

    .content-box {
        padding-left: 30px;

    }
}
@media(min-width:500px) and (max-width:768px){
    .text-bo {
            position: absolute;
            padding: 0px 0px 0px 0px;
            left: 160px;
            bottom: -190px;
            /* background-color: #000; */
            width: 92%;
        }
        
        .content-box {
            margin-right: -10px;
            border-top-left-radius: 10px;
            padding: 9px;
        }
    
        .k {
            width: 100%;
        }
}
@media (max-width:768px) {
    .text-bo {
        position: absolute;
        padding: 0px 0px 0px 0px;
       left: 140px;
        bottom: -190px;
        margin-right: -10px;
        border-top-left-radius: 10px;
        width: 92%;
   }

    .content-box {
        padding: 9px;
    }
    .k{
        width: 100%;
    }
}

/* two */

.text-bo3 {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: -109px;
    padding-left: 10px;
}

.content-box3 {
    padding-left: 260px;
    padding:40px 40px 40px 120px;
    background: #253D3799;
    backdrop-filter: blur(64px);
    color:white;
}

.image3 .k3 {
    position: relative;
    background-image: url(assets/Background\ \(2\).png);
    height: 600px;
    background-size: cover;
    /* background-color: #007bff; */
}

@media (min-width:992px) and (max-width:1200px) {
    .text-bo3 {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: -10px;
    }

    .content-box3 {
        padding-left: 30px;
    }
}

@media (min-width:768px) and (max-width:992px) {
    .text-bo3 {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: -20px;
    }

    .content-box3 {
        padding-left: 30px;
    }
}
@media(min-width:500px) and (max-width:768px) {
    .text-bo3 {
        position: absolute;
        padding: 0px 0px 0px 0px;
        left: 160px;
        bottom: -190px;
        /* background-color: #000; */
        width: 92%;
        
    }

    .content-box3 {
        margin-right: -10px;
        border-top-left-radius: 10px;
        padding: 9px;
    }

    .k3{
        width: 100%;
    }
}
@media (max-width:768px) {
    .text-bo3 {
            position: absolute;
            padding: 0px 0px 0px 0px;
            left: 123px;
            bottom: -700px;
            border-top-left-radius: 10px;
            width: 94%;
        }
        
        .content-box3 {
            margin-right: -8px;
            padding: 9px;
        }
    
        .k3 {
            top: 580px;
            width: 100%;
        }
}

/*  */
.text-bo5 {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: -109px;
    padding-left: 10px;
}

.content-box5 {
    padding-left: 260px;
    padding:40px 40px 40px 120px;
    background: #0A651B99;
    backdrop-filter: blur(64px);
    color:white;
}

.image5 .k5 {
    position: relative;
    background-image: url(assets/Background\ \(4\).png);
    height: 600px;
    background-size: cover;
    /* background-color: #007bff; */
}

@media (min-width:992px) and (max-width:1200px) {
    .text-bo5 {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: -10px;
    }

    .content-box5 {
        padding-left: 30px;
    }
}

@media (min-width:768px) and (max-width:992px) {
    .text-bo5 {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: -20px;
    }

    .content-box5 {
        padding-left: 30px;

    }
}
@media(min-width:500px) and (max-width:768px) {
    .text-bo5 {
        position: absolute;
        padding: 0px 0px 0px 0px;
        left: 169px;
        bottom: -190px;
        /* background-color: #000; */
        width: 92%;
    }

    .content-box5 {
        margin-right: -10px;
        border-top-left-radius: 10px;
        padding: 9px;
    }

    .k5 {
        width: 100%;
    }
}
@media (max-width:768px) {
.text-bo5 {
        position: absolute;
        padding: 0px 0px 0px 0px;
        left: 139px;
        bottom: -430px;
        margin-right: -10px;
        border-top-left-radius: 10px;
        width: 92%;
    }

    .content-box5 {
        padding: 9px;
    }

    .k5 {
        top: 250px;
        width: 100%;
    }
}

/* 2 */
.text-bo2 {
    right: 0;
    bottom: 0;
    position: absolute;
}

.content-box2 {
    padding: 40px 140px 40px 40px;
    margin-right: -109px;
    border-top-left-radius: 10px;
    background: #1C1C1C99;
    backdrop-filter: blur(64px);
    color:white;
}

.k2 {
    background-image: url(assets/Background\ \(1\).png);
    height: 600px;
    background-size: cover;
    position: relative;
}

@media (min-width:992px) and (max-width:1200px) {
    .text-bo2 {
        position: absolute;
        right:95px;
        bottom: 0;
        margin-right: 0px;
    }

    .content-box2 {
        padding-right: 0px;

    }
}

@media (min-width:768px) and (max-width:992px) {
    .text-bo2 {
        position: absolute;
        right: 92px;
        bottom: 0;
        margin-right: 0px;
    }

    .content-box2 {
        padding: 30px;
    }
}
@media(min-width:500px) and (max-width:768px) {
    .text-bo2 {
        position: absolute;
        padding: 0px 0px 0px 0px;
        bottom: -190px;
        /* background-color: #000; */
        width: 92%;
        border-top-left-radius: 10px;
        left: 209px;
        right: 0;
        margin-right:0px;
    }
    
    .content-box2 {
        padding: 9px;
    }

    .k2 {
        width: 100%;
    }
}

@media (max-width:768px) {
.text-bo2 {
        position: absolute;
        padding: 0px 0px 0px 0px;
        left: 34px;
        bottom: -290px;
        margin-right: -10px;
        border-top-left-radius: 10px;
        width: 62%;
    }

    .content-box2 {
        padding: 9px;
    }

    .k2 {
        top: 150px;
        width: 100%;
    }

}

/* 4 */
.text-bo4 {
    right: 0;
    bottom: 0;
    position: absolute;
}

.content-box4 {
    padding: 40px 120px 40px 40px;
    padding-right: 140px;
    margin-right: -109px;
    border-top-left-radius: 10px;
    background: #CE9E6099;
    backdrop-filter: blur(64px);
    color:white;
}

.k4 {
    background-image: url(assets/Background\ \(3\).png);
    height: 600px;
    background-size: cover;
    position: relative;
}

@media (min-width:992px) and (max-width:1200px) {
    .text-bo4 {
        position: absolute;
        right: 95px;
        bottom: 0;
        margin-right: 0px;
    }

    .content-box4 {
        padding-right: 0px;

    }
}

@media (min-width:768px) and (max-width:992px) {
    .text-bo4 {
        position: absolute;
        right: 93px;
        bottom: 0;
        margin-right: 0px;
    }

    .content-box4 {
        padding: 30px;
    }
}

@media (max-width:768px) {
    .text-bo4 {
            position: absolute;
            padding: 0px 0px 0px 0px;
            bottom: -600px;
            /* left: 0; */
            border-top-left-radius: 10px;
            width: 68%;
            right: 108px;
        }
    
        .content-box4 {
            padding: 10px;
            height: 450px;
        }
        .k4{
            top: 400px;
        }
}

/* 6 */
.text-bo6 {
    right: 0;
    bottom: 0;
    position: absolute;
    /* padding-right: 60px; */
}

.content-box6 {
    padding: 40px 120px 40px 40px;
    padding-right: 140px;
    margin-right: -109px;
    border-top-left-radius: 10px;
    background: #CC7D7899;
    backdrop-filter: blur(64px);
    color:white;
}

.k6 {
    background-image: url(assets/Background\ \(5\).png);
    height: 600px;
    background-size: cover;
    position: relative;
}

/* contact page  */

.form-div{
    background-color: #ffffff;
}
.con-table{
    border: 1px solid rgba(0, 71, 130, 1);
}
.head-bg{
    background-color: rgba(0, 71, 130, 1);
}





@media (min-width:992px) and (max-width:1200px) {
    .text-bo6 {
        position: absolute;
        right: 95px;
        bottom: 0;
        margin-right: 0px;
    }

    .content-box6 {
        padding-right: 0px;

    }
}

@media (min-width:768px) and (max-width:992px) {
    .text-bo6 {
        position: absolute;
        right: 93px;
        bottom: 0;
        margin-right: 0px;
    }

    .content-box6 {
        padding: 30px;
    }
}

@media (max-width:768px) {
    .text-bo6 {
            position: absolute;
            padding: 0px 0px 0px 0px;
            bottom: -480px;
            /* left: 0; */
            border-top-left-radius: 10px;
            width: 68%;
            right: 110px;
        }
    
        .content-box6 {
            padding: 10px;
            height: 450px;
        }
    
        .k6 {
            top: 660px;
            margin-bottom: 350px;
        }
        .why{
            margin-top: 500px;
        }
}
@media (max-width:400px) {
    .carousel-item2{
        min-width: 50%;
    }
    
}
.what{
    background-color: #F0F1F5;
}
.navbar-nav .nav-link.active {
    color: red !important;
}


/* owl carousel  */
/* Basic styling for Owl Carousel items */
/* Styling the Owl Carousel items */
.owl-carousel .item {
    text-align: center;
    color: red;
    font-size: 20px;
  }
  
  /* Custom styling for the navigation buttons */
/* Styling the Owl Carousel items */
.owl-carousel .item {
    text-align: center;
    color: red;
    font-size: 20px;
  }
  .owl-carousel .item img {
    max-width: 60%; /* Adjust the value to your preference */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the image */
}

  /* Custom styling for the navigation buttons */
  .owl-carousel .nav-btn {
    color: #004782;
    height: 43px;
    width: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* mix-blend-mode:; */
    font-size: 50px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
  }
  
  .prev-slide {
    left: -30px; /* Position to the left corner */
  }
  
  .next-slide {
    right: -30px; /* Position to the right corner */
  }
  
  /* Styling for Font Awesome icons */
  .owl-carousel .nav-btn i {
    font-size: 50px; /* Adjust icon size */
  }