.row-0{

    width: 90%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    margin: auto;
    justify-content: space-between;
    text-align: center;
     background: #eae9e8;

  position: relative;
  /* align-items: center; */
  justify-content: space-between;
  overflow: hidden;
  min-height: 100vh; /* full viewport height */
  color: white;

      }


/* Full background video */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark overlay for better contrast */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
}

.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/*     .row-0 {
         background: linear-gradient(300deg,deepskyblue,darkviolet,blue);
         background-size: 180% 180%;
         animation: gradient-animation 12s ease infinite;
       }
       
       @keyframes gradient-animation {
         0% {
           background-position: 0% 50%;
         }
         50% {
           background-position: 100% 50%;
         }
         100% {
           background-position: 0% 50%;
         }
       }

*/
     .col-1{

      flex-basis: 55%;
      min-width: 90%;
      padding-top: 20px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      height: fit-content;
      align-items: center;
      min-width: 300px;
      z-index: 1; /* ensures content is above the video */
        
         }
        
         .col-1 h1{
            text-align: left;
            font-size: 68px;
            font-family: 'poppins';
            padding-left: 10px;
            margin: 20px 0;
           color: rgb(238, 129, 5);
            /* color: #041e49ff; */
            font-weight: 600;
            line-height: 1.05;
         }
        
         
         
        .col-1 h2{
         text-align: left;
         font-size: 40px;
         line-height: 60px;
         padding-top: 10px;
         padding-left: 20px;
         font-family: 'poppins';
         margin: 0px 0px;
         color: #555;
         font-weight: 500;
         line-height: 1.4;
      }


        .col-1 p{
            text-align: left;
            font-size: 19px;
            line-height: 60px;
            padding-left: 10px;
            font-family: 'poppins';
            margin: 0px 0px;
            color: #555;
            line-height: 1.4;
         }
        
            
       .col-1 a{
         
         text-decoration: none;
   
               }

        
         .col-2{
            flex-basis: 45%;
            min-width: 300px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 50px;
              background: #eae9e8;
         }
        .col-2 img{
  
         max-width: 80%;
         max-height: 80%;
         padding: 0px 0px;
         /*border: solid;
         
         border-color: #060c27;
         border-radius: 25px;
         border-width: 0.5px;*/
         /* z-index: 2; */

        }
        
         
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1; /* ensures content is above the video */
  text-align: center;
}

.hero::after {
  /* optional overlay for better contrast */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0.5;
}


/* Make hero content fade in softly */
.hero-content, .col-1 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.2s; /* slight delay for smooth effect */
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



        .Button{
            display:flex;
            justify-content: right;
            border-style: none;
        
        }
        
        
         .btn{
             text-align: center;
             text-decoration: none;
             background: #ff523b;
             color: #fff;
             padding: 8px 40px;
             margin-top: 50px;
             margin-left: 120px;
             border-radius: 5px;
             font-size: 22px;
             transition: 0.3s;
             border-color:#ff523b;
            }
        
        .btn:hover{
        background: #563434;
        border-color: #563434;
        }



/* Transition Button */

/* .btn {
  text-align: center;
  text-decoration: none;
  background: #ff523b;
  color: #fff;
  padding: 10px 30px;
  border-radius: 6px;
  font-size: 20px;
  margin: 20px auto;
  display: inline-block;
  transition: all 0.3s ease; 
  border: 2px solid #ff523b;
}

.btn:hover,
.btn:focus,
.btn:active {
  background: #563434;
  border-color: #563434;
  transform: scale(1.05);
} */








        

@media(max-width:1700px){
         
     .col-1 h1{
               font-size: 63px;       
            }
   
     .col-1 h2{
               font-size: 40px;
           }
    
           
     .col-1 p{
               font-size: 17px;
            }             
          
       }


@media(max-width:1600px){
         
     .col-1 h1{
               font-size: 60px;       
            }
   
     .col-1 h2{
               font-size: 35px;
           }
              
     .col-1 p{
               font-size: 17px;
            }                   
       }


@media(max-width:1500px){
         
         .col-1 h1{
                   font-size: 55px;       
                }
       
         .col-1 h2{
                   font-size: 35px;
               }
                  
         .col-1 p{
                   font-size: 17px;
                }                   
           }

@media(max-width:1400px){


         
   .col-1 h1{
      font-size: 42px;       
   }

.col-1 h2{
      font-size: 32px;
  }
     
.col-1 p{
      font-size: 17px;
   }                   

    
        }


@media(max-width:1200px){

   
      .col-1 h1{
            font-size: 38px;       
              }

      .col-1 h2{
            font-size: 28px;
               }
     
      .col-1 p{
            font-size: 17px;
               }           
                                  
        .btn{
            font-size: 17px;
               }
                  
     }
        
        
@media(max-width:992px){
    
         .col-1{
               flex-basis: 54%;
            
             }
            
             .col-1 h1{
                font-size: 26px;
                            }

             
       .col-1 h2{
         font-size: 22px;
               }
 
      .col-1 p{
                font-size: 12px;
             }
            
            
           .col-2{
                flex-basis: 46%;
             }
            .col-2 img{
               max-width: 70%;;
               padding: 0px 0px;
            }
            
            
             .btn{
                 font-size: 15px; 
                }
            
    
    
        }

        @media(max-width:768px){

         
         .col-1{
            flex-basis: 50%;
         
          }
                    
         .col-1{
                    /*    background-image: url("../Images/campus1.jpg");*/
                        flex-basis: 54%;
                        min-width: 250px;
                        padding-top: 30px;
                        padding-left: 20px;
                        padding-right: 10px;
                        padding-bottom: 20px;
                        /*background: #f44336;*/
                    
                     }
                    
         .col-1 h1{
                        font-size: 20px;
                                    }
           
                     
         .col-1 h2{
                 font-size: 18px;
                       }
           
              .col-1 p{
                        font-size: 12px;
                     }
                    
                    
                   .col-2{
                        flex-basis: 46%;
                     }
                    .col-2 img{
                       max-width: 70%;;
                       padding: 0px 0px;
                    }
                    
                    
                               
                    
                     .col-2{
                        flex-basis: 46%;
                        min-width: 250px;
                        padding-top: 20px;
                        padding-left: 20px;
                        padding-right: 20px;
                        padding-bottom: 50px;
                        /*background: #f44336;*/
                     }
                    .col-2 img{
                       max-width: 60%;;
                       padding: 0px 0px;
                       /*border: solid;
                       border-color: #060c27;
                       border-radius: 25px;
                       border-width: 0.5px;*/
                    }
                    
                     
                    .Button{
                        display:flex;
                        justify-content: right;
                        border-style: none;
                    
                    }
                    
                    
                     .btn{
                         padding: 6px 20px;
                         margin-top: 20px;
                         font-size: 14px; 
                        }
                    
            
            
                }

                


@media (max-width: 650px) {
  .row-0 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    min-height: auto;
    text-align: center;
    z-index: -1;
  }

  .col-1 {
    flex-basis: 100%;
    padding: 15px;
  }

  .col-1 h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .col-1 h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  .col-1 p {
    font-size: 16px;
    line-height: 1.4;
  }

  .btn {
    margin: 20px auto;
    padding: 10px 25px;
    font-size: 18px;
  }

  .hero-video {
    height: 50vh;
  }

  .hero-overlay {
    background: rgba(0, 0, 0, 0.7);
  }
}