@import url('https://fonts.cdnfonts.com/css/montserrat');
body{
    font-family: 'Montserrat', sans-serif;
                                                
}
.section_top{
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
    background-image: url(images/003.jpg);
    background-position: center;
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    justify-content: center;
    animation: change 20s infinite;
    margin-top: 100px;
    
    transition: 3s ease-in-out;
}
.section_top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 2, 31, 0.856); /* Adjust the opacity as needed */
    z-index: 1;
}

.continen h3{
    font-size: 35px;
    color: #f5f5f5;
    text-align: left;
    font-weight: 700;
}
.continen p{
    font-size: 18px;
    color: #fbb43c;
    font-weight: 500;
    text-align: left;
}
.continen{
    width: 30%;
    position: absolute;
    z-index: 2;
    top: 80%;
    left: 20%;
    transform: translate(-50%, -50%);
    
}
@media screen and (max-width: 768px) {
    .section_top{
        width: 100%;
        height: 70vh;
        overflow: hidden;
        position: relative;
        background-image: url(images/003.jpg);
        background-position: center;
        max-width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        justify-content: center;
        margin-top: 60px;
}
.continen{
    width: 60%;
    position: absolute;
    z-index: 2;
    top: 80%;
    left:40%;
    transform: translate(-50%, -50%);
    
}
.continen h3{
    font-size: 20px;
    color: #f5f5f5;
    text-align: left;
    font-weight: 500;
}
.continen p{
    font-size: 16px;
    color: #fbb43c;
    font-weight: 300;
    text-align: left;
}
}
@keyframes change{
    0%
    {
        background-image: url(image/001.jpg);
    }
    20%
    {
        background-image: url(image/002.jpg);
    }
    40%
    {
        background-image: url(image/003.jpg);
    }
    60%
    {
        background-image: url(image/004.jpg);
    }
    80%
    {
        background-image: url(image/005.jpg);
    }
    100%
    {
        background-image: url(image/006.jpg);
    }
}
        /* Carousel container */
        .carousel1 {
            width: 100%;
            overflow: hidden;
            margin: 50px auto;
            position: relative;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
          }
          
          /* Carousel track */
          .carousel-track {
            display: flex;
            animation: scroll 40s linear infinite;
          }
          
          /* Individual card styles */
          .card {
            min-width: 300px;
            height: auto;
            margin: 10px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            transition: transform 0.3s ease;
          }
          
          .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-bottom: 1px solid #ddd;
          }
          
          .card p {
            padding: 15px;
            font-size: 18px;
            text-align: center;
          }
          .card button{
            color: #fbb43c;
            background-color: #1a283a;
            transition: background-color 0.3s, color 0.3s;
          }
          
          .carousel1:hover .carousel-track {
            animation-play-state: paused;
          }
          
          /* Pause on hover */
          .carousel1:hover .carousel-track button {
            animation-play-state: paused;
            color: #1a283a;
            background-color: #fbb43c;
          }
          
          /* Keyframes for scrolling */
          @keyframes scroll {
            0% {
              transform: translateX(0);
            }
            100% {
              transform: translateX(calc(-300px * 6)); /* Moves the whole track left */
            }
          }
          
          /* Responsive adjustments */
          @media screen and (max-width: 768px) {
            .card {
              min-width: 200px;
            }
          
            .card img {
              height: 150px;
            }
            
          .carousel-track {
            display: flex;
            animation: scroll 50s linear infinite;
          }
          }


@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}


.logo{
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.logo::before,
.logo::after{  
    position: absolute;
    top: 0;
    width: 250px;
    height: 90%;
    content: "";
    z-index: 2;


}
.logo::before{
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255, 0));
}
.logo::after{
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255, 0));
}
.logo:hover .logo-slide{
    animation-play-state: paused;
}
.logo-slide{
    display: inline-block;
    animation: 40s slide infinite linear;
}
.logo-slide img{
    height: 250px;
    margin: 0 0;
  
}
@media screen and (max-width: 768px) {
    
.logo-slide img{
    height: 120px;
    margin: 0 0;
  
}
}








@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}


.load{
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.load::before,
.load::after{  
    position: absolute;
    top: 0;
    width: 450px;
    height: 100%;
    content: "";
    z-index: 2;


}
.load::before{
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255, 0));
}
.load::after{
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255, 0));
}
.load:hover .load-slide{
    animation-play-state: paused;
}
.load-slide{
    display: inline-block;
    animation: 15s slide infinite linear;
}
.load-slide img{
    height: 250px;
    margin: 0 10px;
}

.container2{
    background: whitesmoke;
}
.deal{
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.container-7{
    display: flex;
    justify-content: center;
    align-items: center;

}
.nice
{
    position: relative;
    background-color: rgb(36, 33, 29);
    color: rgb(37, 25, 3);
    text-decoration: none;
   


    text-transform: uppercase;
    font-size: 0.7cm;
    letter-spacing: 0.08cm;
    font-weight: 400;
    padding: 10px 30px;
    transition: 0.5;
    align-items: center;
    justify-content: center;
}
.nice:hover{
    background: var(---clr);
    color: var(---clr);
    letter-spacing: 0.25em;
    box-shadow: 0 0 40px var(---clr);
}
.nice:before{
    content: '';
    position: absolute;
    inset: 4px;
    background: white;
}
.nice span{
    position: relative;
    z-index: 1;
    align-items: center;
}
.nice i{
    position: absolute;
    inset: 0;
    display: block;
    align-items: center;
}
.nice i::before{
    content: '';
    position: absolute;
    top: 0;
    left: 80%;
    width: 10px;
    height: 4px;
    background: white;
    transform: translateX(-50%) skew(325deg);
    transition: 0.5s;
}
.nice:hover i::before{
    width: 20px;
    left: 20%;
}

.nice i::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 10px;
    height: 4px;
    background: white;
    transform: translateX(-50%) skew(325deg);
    transition: 0.5s;
}
.nice:hover i::after{
    width: 20px;
    left: 80%;
}



.container1{
    width: 100%;
    padding: 30px;
    margin: 30px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    background-color: rgba(255, 252, 246, 0.945);
}
.box1{
    width: 950px;
    margin: 0 5px;
    box-shadow: 0 0 20px 2px rgb(0, 0, 0, .1);
    transition: 1s;
}
.box1 img{
    display: block;
    width: 235px;
    height: 200px;
    border-radius: 10px;
}
.box1:hover{
    transform: scale(1.3);
    z-index: 2;
}
@media screen and (max-width: 768px) {
    .box1{
        margin: 0 2px;

    }
    .box1 img{
        display: block;
        width: 130px;
        height: 115px;
        border-radius: 5px;
    }
    .box1:hover{
        transform: scale(0.5);
        z-index: 2;
    }
}




.mo{
    background-image: url(image/i01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    justify-content: center;
    color: rgb(235, 242, 248);

}
.bi{
    
    color: rgb(168, 168, 168);
}
.mo h1{
    font-size: 42px;
}
.mo p{
    font-size: 20px;
}
.mo h6{
    font-size: 17;
}

@media screen and (max-width: 768px) {
    .singler-box .col{
        display: inline-block;
    }
}

.bi{
    color: #fbb43c;
    line-height: 1.8;
}
.content{
    background-color: #1a283a;
    color: #fff;
}
.singler-box{
    margin-right: 20px;
}
.singler-box p{
    color: #fff;
    line-height: 2;
    margin-right: 15px;
}
.singler-box h2{
    font-size: 20px;
    font-weight: 700;
    color: #fbb43c;

}
.singler-box ul{
    padding: 0;
    list-style: none;
    color: #fff;
    font-weight: 400;
}
.singler-box ul li a{
    text-decoration: none;
    color: #fff;
    line-height: 2;
    font-weight: 400;
}
.basic-addon2{
    background: #d13758;
    color: #fbb43c;
}
.socials{
    margin-right: 15px;
    letter-spacing: 15px;
}

.bank{
    font-family: 'poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: 2s linear;
}
.common{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 15px 9%;
    padding-bottom: 100px;
}
.common .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 15px;
}
.common .box-container .box{
    box-shadow: 0 5px 10px rgb(228, 148, 0);
    border-radius: 5px;
    background: transparent;
    text-align: center;
    padding: 30px 20px;
    color: #000000;
}
.common .box-container .box img{
    border: rgb(241, 129, 0);
    background-size: contain;
}




.common .box-container .box h3{
    font-size: 22px;
    padding: 10px 0;
}
.common .box-container .box p{
    font-size: 16px;
    line-height: 1.5;
}
.common .box-container .box .btn{
    margin-top: 10px;
    display: inline-block;
    background: #1a283a;
    color: #fbb43c;
    font-size: 17px;
    border-radius: 5px;
    padding: 8px 25px;
}
.common .box-container .box .btn:hover{
    letter-spacing: 1px;
    background: #fbb43c;
    color: #1a283a;
}
.common .box-container .box:hover{
    box-shadow: 0 10px 15px rgb(0, 0, 0);
    transform: scale(1.06);
}

.box{
    width: 100%;
    text-align: center;
}
.box p{
    text-align: left;
    color: #1a283a; /* Adjust for readability */
    font-size: 15px;

}
.card-imagey{
    width: 100%;
    height: auto;
    object-fit: cover;
}
@media screen and (max-width: 768px) {
    
.box{
    width: 100%;
    text-align: center;
}
.box p{
    text-align: left;
    color: #1a283a; /* Adjust for readability */
    font-size: 14px;

}
}
.containe0{
    background: whitesmoke;
    overflow: hidden;
}
.containe0 h5{
    color: #000000a1;
}
.containe img{
    left: -70px;
}
.nav-link{
    color: #1a283a;
    transition: 0.3s ease;
}
.nav-link:hover{
    color: #fbb43c;
}
.dropdown:hover .dropdown-menu{
    display: block;
}
@media screen and (max-width: 768px) {
    .nav-link:hover{
        color: #fbb43c;
    }
    .dropdown:hover .dropdown-menu{
        display: none;
    }
    .dropdown.active .dropdown-menu{
        display: block;
    }
}