*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
    
}

.container{
    background-color: black;
    height: 100%;
    width: 100vw;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-top: 50px;
}
body{
    overflow-x: hidden;
}



  .video-camp{
     display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    justify-content: space-evenly;
    row-gap: 2rem;
  
}
.video-gradient{
    border: 3px solid;
    border-image-slice: 1;
    border-width: 2px;
   

  
     border-image-source:linear-gradient(to bottom, #ffde59 0%, #000000 44%, #000000 55%, #ffde59 100%);
   
   
   }
.video-wrapper {
    width: 300px;    /* set fixed width */
    height: 533px;   /* keep 9:16 ratio (height = width × 16/9) */
    margin: 0 auto;  /* center horizontally */
    overflow: hidden; /* avoid expansion */
  }
.second-para{
    font-size: 40px;
    line-height: 50px;
    /* color: white; */
    padding-left: 110px;
    padding-right: 110px;
    text-align: center;
    font-family: poppins, sans-serif;
    /* margin-top: 50px; */
    /* color: #00ff00; */
    background: linear-gradient(to bottom, #ffff 0%, rgba(255, 255, 255, 0.543) 100%); /* Gradient from top to bottom */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}



.results{
    
    /* margin-top: 100px; */
    /* color: white; */
   
    /* font-size: 60px; */
    text-align: center;
    /* display: flex;
    justify-content: center; */

}


.arrow{
    height: 80px;
    width: 150px;
    margin: auto;
}

.results-head{
    background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.607) 100%); /* Gradient from top to bottom */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
        /* color:white; */
        font-size: 55px;
        font-weight: bolder;
        font-family: poppins , sans-serif;
}
.result-img{
    width: 60px;
    height: 60px;
    position: relative;
    top: 0.5rem;
}



.results-main{
    margin-top: 50px;
    padding-left: 150px;
    padding-right: 150px;
    font-family: poppins , sans-serif;
}

.results-first{
    display: flex;
    justify-content: space-around;
}


.results-second, .results-third{
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}

.result1
{
    border: 3px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-radius: 2px;
    /*background: #00FF00;*/

    height: 500px;
    width: 300px;
     border-image-source:linear-gradient(to bottom, #ffde59 0%, #000000 44%, #000000 55%, #ffde59 100%);
   
    text-align: center;
    line-height: 180px; 
}

.video-container {

    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 videos per row */
    column-gap: 18rem; /* MORE horizontal gap */
    row-gap: 100px;    /* LESS vertical gap */
    max-width: 1000px;
    margin: 50px auto 0 auto;
}

.video-box {
    /* background: white; */
    /* padding: 10px; */
     border: 1px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-radius: 2px;
   
    /*background: #00FF00;*/

    
     border-image-source:linear-gradient(to bottom, #ffde59 0%, #000000 44%, #000000 55%, #ffde59 100%);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    max-width: 500px;
}


video {
    width: 100%;
    border-radius: 8px;
}



.viral{
    margin-top: 100px;
/* color: white; */

/* font-size: 60px; */
text-align: center;
}

.viral-head{
    background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.607) 100%); /* Gradient from top to bottom */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 55px;
    font-weight: bolder;
    font-family: poppins , sans-serif;

}

.viral-main{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    margin-bottom: 12rem;
    justify-content: space-evenly;
    row-gap: 2rem;
    font-family: poppins , sans-serif;
    /* column-gap: 1px; */
}
.viral1-img{
    height: 50px;
    width: 50px;
    position: relative;
    left: -1rem;
   
}

.viral2-img{
    height: 50px;
    width: 50px;
    position: relative;
    right: -1rem;
}


.viral-main img{
    width: 22%;
    min-width: 100px;
    border: 1px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-radius: 2px;
   
    /*background: #00FF00;*/

    
     border-image-source:linear-gradient(to bottom, #ffde59 0%, #000000 44%, #000000 55%, #ffde59 100%);
   
    text-align: center;
    line-height: 180px; 
}

.footer-main{
    display: flex;
    justify-content: space-around;
    color: white;
    font-family: poppins, sans-serif;
    margin-top: 200px;
    padding-left: 300px;
    padding-right: 300px;
    text-decoration: none;
}
.policy, .pricing{
    /* text-decoration: none; */
    color: white;
    font-size: 20px;
    text-decoration: underline;
}
.copyright{
    color: white;
    text-align: center;
    margin-top: 50px;
    font-family: poppins, sans-serif;
    font-size: 12px;
}
.footer{
    margin-top: 300px;
    display: flex;
    justify-content: space-around;
    padding-left: 250px;
    padding-right: 250px;
}

.footer-img{
    width: 40px;
}
.copyright{
    color: white;
    text-align: center;
    margin-top: 50px;
    font-family: poppins, sans-serif;
    font-size: 12px;
}

@media screen and (max-width: 1100px){
    
   
    .results-main{
        margin-top: 50px;
        padding-left: 10px;
        padding-right: 10px;
        font-family: poppins , sans-serif;
    }
    .result1{
        height: 350px;
        width: 200px;
        margin:0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
   
    .arrow{
        height: 30px;
        margin: auto;
        width: 80px;
    }
  
   
    
  }

  @media screen and (max-width: 1000px){
   
   
    .footer-main{
        padding-left: 100px;
        padding-right: 100px;
    }
  }
@media screen and (max-width: 850px){
    .results-main{
        margin-top: 50px;
        padding-left:0;
        padding-right: 0;
        font-family: poppins , sans-serif;
    }
    
    .result1{
        height: 300px;
        width: 150px;
        margin:0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .arrow{
        height: 20px;
        margin: auto;
        width: 60px;
    }
    
    .footer{
        /* margin-top: 300px; */
        display: flex;
        justify-content: space-around;
        padding-left: 0;
        padding-right: 0;
    }
  
      
      
     
    
  }

@media screen and (max-width: 800px){
   
 .second-head{
    width: 20%;
 }
 

 
.results-head{
    font-size: 40px;
    margin-top: -5rem;
}
.viral-head{
    font-size: 40px;
}
.expert-head{
    font-size: 30px;
}
.container{
    padding-left: 10px;
    padding-right: 10px;
}






}
@media (max-width: 768px) {
   .video-container {
        grid-template-columns: 1fr; /* 1 video per row */
        column-gap: 0;
        row-gap: 50px;
        justify-items: center; /* center videos horizontally */
    }

    .video-box {
        max-width: 60%; /* slightly smaller than full width */
    }
}

@media screen and (max-width: 640px){
  
   .second-para{
    font-size: 35px;
    line-height: 45px;
   }
  
}


@media screen and (max-width: 580px){
   
       
        .second-para{
         font-size: 35px;
         padding: 5px;
         line-height: 45px;
        }
        
    .result1{
        height: 200px;
        width: 100px;
        margin:0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .arrow{
        height: 20px;
        margin: auto;
        width: 60px;
    }
    .viral-main img{
        width: 40%;
    }
   
}
@media screen and (max-width: 496px){
    .copyright{
        font-size: 10px;
    }
}
@media screen and (max-width: 400px){
    .viral-main img{
        width: 60%;
    }
}


