* {
      box-sizing: border-box;
    }
    html, body {
      background-color:#f9f9f9;
      margin: 0;
      padding:0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
.header{
    position:fixed;
    width:100%;
    display:flex;
    z-index:1;
       }
       
.menu-icon{
      color:#ffffff;
      position: absolute;
      right:0;
      margin-top:4vh;
      font-size:160%;
      border:4px solid #fffffc;  
      background-imge: linear-gradient(to right, blue, red);      background-imge:linear-gradient(to bottom left, red, #6A8BA1, blue);
      background: #6A8BA1;
      margin-right:6%;
      padding-right:1.5%;
      padding-left:1.5%;
      box-shadow:0.2px 0.3px 1px 1px #6A8BA1;
      border-radius:10px;
      
}       

.menu{
    top:0;
    left:0;
    z-index:-1;
    opacity:0; 
    display: table; 
    position:fixed;
    width:100%;
    height:100%;
    background:rgb(0,0,0,0.9);

}       
        
.menu:target{
        z-index:1;
        opacity:1;
}

.menu-content{
       display: table-cell;
       vertical-align: middle;
       text-align:center;
}

.menu-content > a > button{
    width: 90%;
    margin:5%;
    padding:3.5%;
    font-family: times new Roman;
    font-weight:1000;
    border:2px solid #0076ff;
    color:#ffffff;
    background:#0076ff;
    border-radius:3em;
    
}

.connect{
    width: 90%;
    margin:5%;
    padding:3.5%;
    font-family: times new Roman;
    border:2px solid #ffffff;
    color:#00000;
    background:#ffffff;
    border-radius:2em;
      
}
.connectp{
    line-height: 150%;
    font-size:70%;
    font-family:times new Roman;
}
   
   .sbox{                             
        width:100%;
        padding:px;        
        margin-top:-2%;
        border-radius:5px;
        font-family:times new Roman;
        color: rgb(20,20,20);
        background-color: white;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 21px 0 rgba(0, 0, 0, 0.20); 
    
       }
       
 
              
.sbox-1{
       width:80%;
       background:;
       color:#222;
       padding:10px;
       display: block;
    
}       
         
.sbox-2{
       width:20%;
       color:#fff;
       padding:8px;
       position:absolute;
       background:#6A8BA1;
       margin-top:1.6vh;
       right:0;
       text-align:center;
       border-bottom-left-radius:10px ;
       border-top-left-radius:10px ;
    
}       
        
  
.box{       
        background-color:#f0f0fc;
        border-radius:20px;
        margin:5%;                      
        width:90%;
        box-shadow:0.2px 0.3px 1px 1px #fFFFF;
       }
.box2{
       background-image:url("img/johnnydepbg.jpg");
       background-repeat:no-repeat;
       background-position: auto;
       background-size: 100%;
       border-radius:20px;
       margin:2.5%;                      
       width:95%;
       box-shadow:0.2px 0.3px 1px 1px #fFFFF;
}  


.box2 > table {
        background-color:rgb(0,0,0, 0.5);
        color:rgb(250,250,250); 
        border-radius:20px;
        width: 100%;
        padding:10px;
        line-height: 150%;
    font-size:80%;
    font-family:times new Roman;
}

th{
        padding:10px;
}
    

 .imagebox{
      width:100%;
     
       }
       
.imagebox > img{
         width:100%;      
}
   
            
.paragraph{ 
    padding:10px;
    line-height: 150%;
    font-size:80%;
    font-family:times new Roman;
    
}
.jdc {
    width:100%;
    border-radius:10px;
    margin-top:5vh;
}

li{ 
    line-height: 150%;
    font-size:80%;
    font-family:times new Roman;  
}  
.headtext{
         font-family: time new Roman;
         font-weight:;
         padding:5px;
         display: inline-block;
       border-bottom-right-radius:5px;
       border-top-right-radius:5px;
       text-align:left;
       color:#fff;      
       font-size:70%;
       background-color:sienna;
       
}
.top-movie-box{
    padding-top:;
}

.top-movie-box > a{
    outline:none;
    text-decoration:none;
    text-align: cente;
    margin:1.2%;
    line-height: 10vh;
    padding-top:;
}

.top-movie-box > a > img{
       width:30%;
       height:25vh;
       border-radius:1em; 
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.10);
  
       }

              
       
.upcoming-movie{
    width:95%;
    height:18vh;
    margin: auto;
    display: block;
    margin-top:5vh;
    text-align: center;
    position: relatives;
    border-radius:10px;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.10);
    
}

.upcoming-movie > img{
    width:25%;
    height:18vh;
    border-bottom-left-radius:10px;
    border-top-left-radius: 10px;
}  
 
.upcoming-movie > div{
    color :black;
    float:right;
    height:18vh;
    font-size:90%;    
    padding-top:3vh;
    font-family: times new Roman;
}
.upcoming-movie > div > span{
    display: block;
    margin-top:4vh;
    font-size:50%;
    font-family: times new Roman;
}
.upcoming-movie > div > b{
    display:block;
    padding-top:4vh;
    font-size:50%;
    color:green;
    position:relative;
    font-family: times new Roman;
}
.um1{
    width:30%;
    background:;
    
}    

.um2{
    width:25%;
    background:;
    
}   
.um3{
    width:20%;
    background:;
    
}     
       
.space{
      min-height:10vh;   
}

.space2{
      min-height:7vh;   
}

.news-box{
    width:100%;
    line-height: 155%;
    font-size:70%;
    height:auto;
    font-family: times new Roman;
    padding:3%;
    border-radius:1em;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 21px 0 rgba(0, 0, 0, 0.20);
 
   
}
.news-box > img {
     width:30%;
     height:16vh;
     padding-right:5px;
     border-radius:1em;
     float: left;
     
}
.image-gallery{
   // background:#f0f0fc;
}
.image-gallery > img{
    width:45%;
    height:18vh;
    margin:2%;
    border-radius:1em;
}

.see-more{
    text-align: right;
    padding:2%;
    width:0 auto;
    font-size:85% ;
    display : block;
    color:white;
    font-weight:1000;
    text-decoration:none;
    background:#6A8BA1;
    position:absolute;
       right:0;     
       border-bottom-left-radius:10px ;
       border-top-left-radius:10px ;
    
}


.photos{
    padding:3%;
    font-weight:1000;
    font-size:150%;
    font-family: times new Roman;
}
.photos > img{
    width: 96%;
    margin:1%;
    border-radius:5px;
}

.moret{
    display: inline-block;
    position:absolute;
    right:0;
    padding-right:15px;
    padding-top:10px;
}


/* slide image shows */
.slidebox{                             
        width:100%;
        text-align:center;
        border-radius:15px;
        border-top-left-radius:0px;
        font-family:times new Roman;
        color: rgb(20,20,20);
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 21px 0 rgba(0, 0, 0, 0.20); 
    
       }
.slidebox-name{
       padding:5px;
       border-bottom-right-radius:5px;
       border-top-right-radius:5px;
       text-align:left;
       color:#fff;
       width:22%;
       font-size:70%;
       background-color:sienna;
    
}       
      
.slidebox-child {   
      font-size:15px;     
      margin-top:4%;
      height:22vh;
    
}      
#slideshow {
    width: 95%;
    height: 20vh;     
    border-radius:15px;
    opacity: 0;
    transform: translateY(10px);
    animation-fill-mode: forwards;
  }

  @keyframes fadeInLeft {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }     

.footer{
    width:97%;
    heiht:;
    color:#fff;
    display: block;
    background: #6A8BA1;
    border-top-right-radius:2em;
    border-top-left-radius:2em;    
    margin-right:1.5% ;
    margin-left:1.5% ;
    bottom:0;
    
}
.footer-image{
         text-align: center;
         
         position:relative;
         border-bottom:0.2px solid #fff;
         border-bottom-right-radius:10px;
         border-bottom-left-radius:10px;
       }
 
       
.footer-image >img{
         width:30%;
         margin-top:-15%;
         border: 5px solid #f9f9f9;
         border-radius:100%;           
}
sub{
    font-weight:400;
    font-size:10%;
    position:abslute;
    width:1%;
    bottom:0;
    padding-right: em;
    text-align:center;
    color: rgb(255,255,255);
   }  
   
.partners{
       margin-bottom:5vh;
       margin-top:5vh;
       color:#f0f0f0;
       text-align: center;  
} 

.partners >a >img {
       width:32%;
       padding:3%;
}

.debox-child{
    width:95%;
    position:relative;
    padding:10px;
    color:white;
    margin-bottom:5vh; 
    margin-top:5vh; 
    margin-right:2.5%;
    margin-left:2.5% ;
    border-radius:10px;
    background:#6A8BA1;
    font-family: times new Roman;
}

.moreDetials > a{
    color:green;
    text-decoration:none;
    font-weight:100;
}
.debox-child > p{
    background-color:#fff;
    padding:10px;
    color:black;
    display:;
    border-radius:5px;
}
.moret{
    display: inline-block;
    position:absolute;
    right:0;
    padding-right:15px;
    padding-top:10px;
}

/* menu icon shake */
@keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    20%, 60% {
      transform: translateX(-3px);
    }
    40%, 80% {
      transform: translateX(3px);
    }
  }

  .shaking {
    animation: shake 0.3s ease-in-out;
  }
  /* menu icon shake end */

.reviews-section {
    max-width: 800px;
    margin: 0 auto;
    margin:10px;
}

.reviews-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.info-icon {
    font-size: 14px;
    cursor: help;
}

.reviews-container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 0;
    
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #ccc transparent;
}

.reviews-container::-webkit-scrollbar {
    height: 8px; /* For Chrome/Safari */
}

.reviews-container::-webkit-scrollbar-track {
    background: transparent;
}

.reviews-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.review-card {
    flex: 0 0 320px; /* Fixed width for cards, adjust as needed */
    background: white;
    margin-bottom:4vh;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px; /* Ensures consistent height */
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    background-color: #ff6b35; /* Orange for 'V' */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.reviewer-details h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.review-date {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.verified-badge {
    width: 32px;
    height: 32px;
    background-color: #e8f5e8; /* Light green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #4caf50;
    font-weight: bold;
}

.stars {
    display: flex;
    gap: 2px;
    color: #4caf50; /* Green stars */
    font-size: 16px;
}

.review-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    flex: 1;
}

.company-reply {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin: 0;
    padding-left: 8px;
    border-left: 2px solid #e0e0e0;
}

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.useful-btn, .share-btn, .like-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.useful-btn:hover, .share-btn:hover, .like-btn:hover {
    background-color: #f0f0f0;
}

.like-btn {
    font-size: 16px;
}

/* Responsive: Stack vertically on very small screens */
@media (max-width: 768px) {
    .reviews-container {
        flex-direction: column;
        overflow-x: visible;
    }
    
    .review-card {
        flex: none;
        width: 100%;
    }
}