@import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap');


* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
  
}

nav {
    color: white;

    margin: auto;
    display: flex;
    align-items: center;

    justify-content: space-between;
    max-width: 75vw;
    height: 60px;


}

svg {
    fill: rgb(218, 2, 2);
    width: 200px;
    height: 60px;
    position: relative;
    z-index: 10;
    margin-top: 25px;
}

nav button {
    position: relative;
    z-index: 10;

}

.main {
    background-image: url(assets/images/IN-en-20250908-TRIFECTA-perspective_0647b106-80e1-4d25-9649-63099752b49a_large.jpg);
    height: 700px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: max(1300px, 100vw);
}

.main .box {
    background-color: black;
    opacity: 0.7;
    height: 700px;
    position: absolute;
    top: 0;
    width: 100%;


}

.content {
    width: 50%;
    height: 530px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    color: white;
    position: relative;
    justify-self: center;
}

.content> :nth-child(1) {
    font-family: "Martel Sans", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: xxx-large;
    text-align: center;


}

.content> :nth-child(2) {
    font-family: "Martel Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: large;
    text-align: center;
}

.content> :nth-child(3) {
    font-family: "Martel Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: medium;
    text-align: center;

}

.separation {
    margin-top: 110px;
    height: 5px;
    background: radial-gradient(circle at top center, rgb(255 0 0) -6%, rgb(255 0 0) -3%, rgb(126 1 1 / 81%) 12%, #000000 100%);
    position: relative;
    top: 0;
}



.btn {
    padding: 10px 50px;
    background-color: rgba(0, 0, 0, 0.217);
    font-weight: 550;
    border: 1px solid white;
    color: white;
    margin-top: 20px;
    font-size: 15px;
    border-radius: 4px;
    cursor: context-menu;



}

.btn-red {
    background-color: rgb(218, 2, 2);
    color: white;
    border: 1px solid rgb(218, 2, 2);
    border-radius: 4px;
    padding: 14px 40px 20px;
    font-size: 23px;
    margin-top: 0;
    cursor: pointer;


}

.btn-red:hover{
      background-color: rgb(169, 0, 0);
}

.btn-red-sm {
    background-color: rgb(218, 2, 2);
    color: white;
    border: 1px solid rgb(218, 2, 2);

    border-radius: 4px;
    padding: 10px 25px;
    font-size: 15px;
    cursor: pointer;




}

.btn-red-sm:hover{
    background-color: rgb(169, 0, 0);
}



.hero-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

}


.main input {
    background-color: rgba(0, 0, 0, 0.137);
    font-weight: bold;
    border: 1px solid white;
    color: white;
    border-radius: 4px;
    padding: 20px 180px 20px 0px;
    font-size: 16px;
    margin-top: 0;

}

.trendbox{
      
        width: 100%;
    background: radial-gradient(circle at top center, rgb(0 0 255 / 29%) -6%, rgb(16 26 173 / 86%) -3%, rgb(0, 0, 0) 12%, #000000 100%);
    height: 500px;
        padding-top: 35px;
 
   

}

.more3{
     padding-top: 50px;
    background:  linear-gradient(0deg, black, #00000000);;
    color: white;
    padding-left: 140px;
}
.trending {
    
       display: flex;
    gap: 50px;
    width: 80%;
    overflow-x: scroll;
    justify-self: center;
    background: linear-gradient(0deg, black, #00000000);
   
}

.top {
    
   
       height: 275px;
    width: 208px;
    border: 2px solid black;
   margin-top: 50px;
   margin-bottom: 50px;
   position: relative;
   margin-left: 30px;
   cursor: pointer;


}

.top>.image{
      width: 100%;
  height: 100%;

     transition: transform 0.4s ease;
  
}


.top > .number{
      font-size: 100px;
    position: absolute;
    bottom: -14px;
    font-weight: 900;
    z-index: 10;
    color: black;
    -webkit-text-stroke: 2px rgb(225, 225, 225);
    left: -30px;
     text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.856);
      transition: transform 0.4s ease;
     

}


.top:hover > .image {
  transform: scale(1.2);
}

.top:hover > .number {
  transform: scale(1.3);
}


/* Whole scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px; /* for horizontal */
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: #111; /* dark background */
}

/* Thumb (the moving part) */
::-webkit-scrollbar-thumb {
  background: #292929;
  border-radius: 10px;
}

/* Thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.more{
      background-color: #000000;
    width: 100%;
    height: 500px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    gap: 25px;
    padding-top: 15px;
    
}

.more2{

    padding-top: 50px;
    background-color: #000000;
    color: white;
    padding-left: 140px;
}




.morebox{
  height: 350px;
    border: 2px solid black;
    width: 16%;
    background: linear-gradient(314deg, #24010d, #200138, #001a36);
    border-radius: 20px;
    color: white;
    padding: 25px 20px 10px 20px;
    
}

.morebox>h2{
    font-weight: 600;
   
    font-size: x-large;
}

.morebox>p{
    color: rgb(172, 172, 172);
    margin-top: 15px;
    font-size: large;
    font-weight: 400;

}

.FAQH{
        
    background-color: #000000;
    color: white;
    padding-left: 140px;
    padding-bottom: 20px;

}


.faqbox{
    background-color: black;
    width: 100%;
    
    height: 800px;

}

.faq{
    color: white;
    width: 70%;
    justify-self: center;
    padding: 10px;
    background-color: rgb(59, 59, 59);
    margin-bottom: 10px;
    height: 75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    padding-left: 25px;
    
}

.faqsvg{
    margin-top: 5px;
}

.faq:hover{
    background-color: rgb(83, 83, 83);
}


.endcontent>span{
        justify-self: center;
    font-size: x-large;
   
   
    margin-left: 310px;
    
    color: white;
}

.endcontent>.hero-btns>input{
    width: 40%;
    
     
}

.endcontent>.hero-btns{
    margin-top: 20px;
   


}



.endcontent{
    background-color: #000000;
    width: 100%;
}

.footer{
    color: rgb(181, 181, 181);
    background-color: #000000;
    height: 500px;
    width: 100%;

}


.footer > .contact{
      margin-left: 130px;
    font-size: large;
    padding: 40px;
}

.footer>.links{

        margin-left: 130px;
    font-size: large;
    padding: 40px;

    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    grid-template-rows: repeat(4 , auto);
    gap: 10px;
    

}
.footer>.links div{
    cursor: pointer;
}


.footer>.lang{
        margin-left: 130px;
    font-size: large;
    padding: 40px;
}

.footer>.copyr{
        margin-left: 130px;
    font-size: large;
    padding: 40px 40px 0 40px;
}