*{
    padding: 0px;
    margin: 0px;
}
body{
    background-color: #1e1e1e;
}
.navabr{
    height: 85px;
    width: 100%;
    background-color:#0e0e0ef3;
    padding-left: 50px;
}
.a{
    color:#C3D0E5;
    font-size: 28px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin-top: 18px;
    width: 300px;
    height: 30px;
    margin-left: 12px;
}
.logo{
    background-image: url("images/Logo.png");
    height:32px ;
    width: 35px;
    background-size: cover;
    margin-top: 20px;
    
   
}
.navbarlogo{
    height: 60px;
    display: flex;
    padding-left: 36px;
}
.nava,a{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: #9ba3B4;
    text-decoration: none;
    font-size: 20px;
    margin-top: 10px;
    margin-right: 35px;
    
}
.nava{
    width: 600px;
    color: #9ba3B4;
}
.nava:hover{
    color: #ffffff;
}
#theme-toggle{
    background-color: #0D1117;
    color:#9ba3B4;
    font-size: 24px;
    border: none;
    cursor:pointer;

}
#theme-toggle .fas{
    font-size: 24px;
}
#theme-toggle:hover{
    color: white;
}
.topbar{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-left: 150px;
    margin-top: 10PX;
    justify-content: space-between;
}
.search{
     background-color: #0D1117;
     color:#9ba3B4;
     margin-left: 1px;
     width: 250px;
     height: 32px;
     padding: 5px 12px 5px 20px ;
     display: flex;
     transition: opacity 0.4s ease-in;
     border: 1px solid transparent;
     border-radius: 4px;
     align-items: center;

}
.bu{
     background-color: #0D1117;
     color:#9ba3B4;
     border: none;
     margin-left: 5px;
     
}
.fa-solid{
    margin-top: 6px;
    
}
.ctrl{
    padding-right:5px ;
}
.btn{
    width: 75px;
    height: 25px;
    color:white ;
    background-color: rgb(7, 131, 220);
    border:none;
    border-radius: 5px;
    font-weight:bold ;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    cursor: pointer;

}
h1{
 color: #f6eefa;
 font-size:74px ;
 height: 177px;
 width: 550px;
 margin: 40px 0px 25px;
 font-size: 74px; 
}
.v{
    margin-left: 20px;
}
.hero-section {
  display: flex;
  justify-content: center;
  align-items: center; /* optional, vertical centering */
  
}
.download-content{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: black;
    width: 320px;
    height: 52px;
    margin-left: 38%;
    border: white;
    border-radius: 10px;

}
i{
    font-size: 21px;
    margin-right: 8px;
}
.windows{
 border: none;

}
.lab,a{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    font-size: 12px;
    margin: 16px 0px 0px;
    font-weight: bold;
    color:#f6eefa;
    text-decoration: underline;
    
}
.lab{
    margin-right: 120px;
    margin-top: 10px;
}
.terms{
    height: 18px;
    width: 320px;
    color:#f6eefa;
    font-size: 12px;
    
}
.term{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0px 0px ;
    margin-right: 110px;

}
.content-wrapper{
    height: 200px;
    width:100%;

}
.terms span {
    font-weight: bold;
    text-decoration: underline;
}
.hero-video-container {
  width: 1000px;
  height: 740px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem; /* some spacing */
  margin:auto
}
.hero-video {
  width: 100%;
  max-width: 1000px; /* prevent video from stretching too much */
  border-radius: 12px; /* smooth corners */
  object-fit: cover; /* ensures the video fills container */
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
@media(min-width:768px){
    .hero-video{
        border-radius: 8px;
    }
}
@media(min-width:992px){
    .hero-video{
        border-radius: 12px;
    }
}
.replay-btn{
    margin-top: 20px;
    background-color:#1e1e1e;
    color: #9ba3B4;
    height: 45px;
    width: 145px;
    border: none;
    
}
.replay{
    width: 1240px;
    height: 44px;
    margin: 12px 0px 0px ;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 250px;
    text-align: center;
    position: relative;
    top: -80px;
}
.replay-btn:hover{
    border: 2px solid white;
    border-radius: 5px;
}
.card{
    width: 1320px;
    height: 380px;
    padding: 92px 0px 0px ;
    color: #9ba3B4;
    background-color: #1e1e1e;
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 40px;
    margin-left: 300px;
}
.boximage{
 background-size: cover;
 width: 335px;
 height: 187px;
 background-position: center;
 border-radius:8px ;
}
.box1 ,.box{
    width: 370px;
    height: 374px;
    font: 14px;
    background-color: #ffffff0a;
    border: 0.2px solid rgb(66, 57, 57);
    border-radius: 3px;

}
.w{
    height: 30px;
    width: 335px;
    color: #C3D0E5;
    margin: 0px 0px 10px ;
    font-size: 24px;
    font-weight: 700;

}
.p1{
    font: 16px;
    height: 102px;
    width: 335px;
    color: #9fb1d1;
    margin: 0px 0px 10px;
}
.ai{
    background: linear-gradient(90deg, 
  #0c0c0c 0%,    /* dark grey/black left */
  #2a3cff 30%,   /* bright blue */
  #6c2cff 60%,   
  #00c6a7 100% ); 
  width: 1240px;
  height: 168px;
  margin: 0px 40px;
  padding: 40px 0px;
  display: flex;
  flex-direction: row;
  border: 0.19px solid rgb(175, 174, 174);
  border-radius: 5px;
}
.features{
    height: 263px ;
    width: 1320px ;
    padding:  48px;
    margin-left: 230px;
}
.h1{
    width: 539px;
    height: 45px;
    color: #e6eefa;
    font-size: 30px;
    margin-left: 60px;

}
.p2{
    width: 539px;
    height: 25px;
    font-size: 16px;
    margin: 0px 0px 10px;
    color: #e6eefa;
    margin-top: 10px;
}
.b1{
    width: 80px;
    height: 35px;
    padding:5px 12px;
    background-color: #25292e;
    color: #C3D0E5;
    position: relative;
    top: 36px;
    left: -540px;
    border: 0.19px solid rgb(175, 174, 174);
    border-radius: 5px;

}
.agent{
    width: 440px;
    height: 291px;
    color: #9ba3B4;
    padding: 0px 40px;
    margin-left: 280px;
    margin-top: 40px;
    
}
.h3{
    width: 360px;
    height: 45px;
    color: #C3D0E5;
    margin: 0px 0px 10px;
}
.p3{
    width:360px ;
    color:#9fb1d1 ;
    margin:0px 0px 10px  ;
}
.a1{
    color: #4daafc;
    text-decoration: underline;
    width: 165px;
    height: 21px;
    font-size: 16px;
    margin-bottom: 50px;
}

.image-swimlane{
    background-size: cover;
    width: 800px;
    height: 580px;
    position:relative;
    left: 450px;
    bottom: 250px;
}
.agent2{
    color: #9ba3B4;
    font-size: 14px;
    width: 440px;
    height: 255px;
    padding: 70px 40px;

}
.cards{
    flex: 0 0 calc(33.33% - 20px);  /* exactly 3 per row */
    box-sizing: border-box;
    transition:0.3s ease ;
}
.cards:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  border: 1px solid rgb(77, 76, 76);
}
.p7{
    white-space: normal;
}
.caption{
    width: 800px;
    height: 30px;
    color: #9ba3B4;
    margin: 13px 0px 0px;
    text-align: center;
    white-space: normal;
}
.language {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  grid-template-rows: repeat(4, auto);   /* 4 rows */
  gap: 30px;                             /* space between items */
  max-width: 1000px;
  margin: 0 auto; /* center block */
  padding: 40px 20px;
  position: relative;
  top: -48px;
}

.language .lg {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #9ba3b4;
  width: 233px;
  height: 40px;
}

.language .lg img {
  width: 32px;
  height: 32px;
}
.feature {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 30px;
  margin: 50px auto;
  max-width: 1200px;
  padding: 20px;
}

.card {
  background: #1e1e1e;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  color: #c5c5c5;
}

.card h2 {
  margin: 10px 0;
  font-size: 18px;
  color: #9fdbff;
}

.card p {
  font-size: 14px;
  color: #bbb;
}

.card img.icon {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}