/* ############ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,500;1,800;1,900&display=swap');
                                                                                                                                                                                                                    

/*utility class*/

.small-bold-text{
    font-size: 1rem;
    font-weight: 700;
}
.container{
    width: 1180px;
    margin-inline: auto;
  
  padding-inline: var(--padding-inline-section);
}

.flex{
    display: flex;
    align-items: center;
}
.hover-link{
    color: var(--primary-text-color);
    transition: 0.2sec ease-in-out;
}
.hover-link:hover{
    color:var(--accent-colour)
   
}
/*tob part*/
.top-banner{
    
    background-color: #f4f4f4;
    background-size: 300px;
    text-size-adjust: 500px ;
}
.banner-text{
    color: aliceblue;
    padding: 15px 30px ;
    text-align: center;

}
body {
    font-family: 'Inter', sans-serif;
    /* background-color: #00022a; */
     background: radial-gradient(circle at top,  #29036f, #631258);
    color: white;
    line-height: 1.6;
}

/* Header & Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
     background: radial-gradient(circle at top,  #29036f, #631258);
}

.logo {
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo .icon {
    border: 2px solid white;
    border-radius: 50%;
    padding: 2px 8px;
}

nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
}
.primary-button{
    background: var(--accent-color-dark);
    border-radius: 6px;
    font-weight:700;
    color: white !important;
    padding: 12px 24px;
    box-shadow: 0 0 2px var(--secondary-text-color);
    transition: 0.2sec ease-out;
}

.primary-button:hover{
    background-color: var(--accent-color-dark);
}

.secondary-button{
    border: 0.5px solid var(--secondary-text-color);
     border-radius: 6px;
    font-weight:700;
    color: rgb(135, 80, 80) !important;
    padding: 10px 22px;
    box-shadow: 0 0 2px var(--secondary-text-color);
    transition: 0.2sec ease-out;

}
/*header section*/

header{
    padding: 50px var(--padding-inline-section);
}
.header-section{
    justify-content: center;
    gap: 50px;
}
.header-left{
    max-width: 40vw;
}
.header-left h1{
    margin-top: 20px;
}
.get-started-btn{
    margin-top: 20px;
}
.header-right img{
    width: 600px;

}
.companies-header{
    text-align: center;
    margin-block: 30px;
    color: var(--primary-text-color);
}
.logos{
    justify-content: space-between;
}

.features-section{
    padding: 80px var(--padding-inline-section)0;
}

.features-header {
    text-align: center;

}

.features-heading-text{
    margin-bottom: 20px;
}



##################
#seach{
    padding: 5px;
    font-size: 16px;
    border: 2px solid rgb(142, 80, 228);
    border-radius: 15px;
}

.background{
    background: rgba(0, 0, 0, 0.8 )url(img/High_resolution_wallpaper_background_ID_77701699264.webp);
    background-size: cover;
    background-blend-mode: darken;
    display: flex;
 
    width: 10px 40px;

}
.background2{
    background: rgba(27, 8, 152, 0.8)url(img/39879.gif);
    background-size: cover;
    background-blend-mode: darken;
    display: flex;
 
    width: 10px 40px;

}

/**body part**/

.firstSection{
  height: 100vh;
  color: hsl(0, 0%, 100%);
  display: flex;
justify-content:first baseline;
    /* justify-content: center; */
    /* align-items: center; */
    color: aliceblue;
    font-family: monospace;

}



.box-main{
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif,itally ;
 flex-direction: column;


}
.firstHalf{
    width: 70%;
    display: flex;
    justify-content: center;
     flex-direction: column;

    
 
}
.firstHalf text-big{

     display: flex;
     width: 80%;
     flex-direction: column;
     justify-content: center;
    
}
.scroll-container {
  overflow: hidden; /* Hide the images outside the box */
  width: 100%;
  background: transparent;
}

.scroll-track {
  display: flex;
  width: calc(250px * 20); /* Adjust based on (image width * total images) */
  animation: scroll 20s linear infinite; /* Adjust time for speed */
}

.scroll-track img {
  width: 350px; /* Set fixed width for consistency */
  height: auto;
  padding: 10px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(250px * 1)); } 
  100% { transform: translateX(calc(-250px * 7)); }/* Move by half the track (one set of images) */
}

/* Optional: Pause on hover so users can see details */
.scroll-container:hover .scroll-track {
  animation-play-state: paused;
}
.buttons{
    display: flex;
    justify-content:space-between; 
    justify-content: center;
  flex-direction: row-reverse; 
padding: 130px;
  height: 7%;
border: #fd0076;
border-radius: 15px;
   text-align: center;
    justify-content: center;
}
buttons btn{
  
}
.secondHalf{
 width: 100%;
 height: 100%;
}
.secondHalf img{
 width: 100%;
 border: 4px solid white;
 border-radius: 10px;
 display: block;
 margin: auto;

}


.main-footer {
     background: radial-gradient(circle at top, #07045e, #e6538e); /* Darker background for contrast */
    padding: 80px 50px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e0;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand gets more space */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Brand Section */
.footer-brand .logo {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.footer-brand .address {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #4361ee; /* Cute blue accent */
}

/* Menu Titles */
.footer-links h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
}

/* Underline decoration for titles */
.footer-links h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 30px;
    height: 2px;
    background-color: #4361ee;
}

/* Menu Lists */
.footer-links ul {
    list-style: none;
}


/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    background-color: rgba(0,0,0,0.5);
}

.next { right: 0; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Fade animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

/* Footer Main Styling */
.main-footer {
     background: radial-gradient(circle at top, #07045e, #e6538e); /* Darker background for contrast */
    padding: 80px 50px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e0;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand gets more space */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Brand Section */
.footer-brand .logo {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.footer-brand .address {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #4361ee; /* Cute blue accent */
}

/* Menu Titles */
.footer-links h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
}

/* Underline decoration for titles */
.footer-links h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 30px;
    height: 2px;
    background-color: #4361ee;
}

/* Menu Lists */
.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: #a0aec0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

/* Hover Effect: Links move slightly right and change color */
.footer-links ul li a:hover {
    color: #00f5d4; /* Teal color on hover */
    padding-left: 5px;
}

/* Bottom Bar */
.footer-bottom {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    font-size: 0.8rem;
    color: #718096;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
} 



body {
    background-color: #1a1a1a; 
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 40px;
}

header h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.services {
    flex: 2;
}

.services h3 {
    color: #4db8ff; /* ବ୍ଲୁ କଲର୍ ହେଡିଙ୍ଗ */
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.services ul {
    list-style: square;
    line-height: 1.8;
}

.contact-section {
    flex: 1;
}

.contact-form {
    background-color: #262626;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.contact-form h3 {
    margin-top: 0;
}

.contact-form label {
    display: block;
    margin: 10px 0 5px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background: #faf9fb;
    border: 1px solid #2a037e;
    color: white;
    border-radius: 4px;
}

.contact-form button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
}

.other-services {
    background-color: #260578;
    padding: 15px;
    border-radius: 8px;
}

.other-services h4 {
    margin-top: 0;
    color: #4db8ff;
}

.other-services ul {
    list-style: none;
    padding: 0;
}

.other-services li {
    padding: 5px 0;
    border-bottom: 1px solid #333;
}