* {
      box-sizing: border-box;
    }
    html, body {
      background-color:#fff;
      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);
  
       }

/* --- Card Container --- */
.preview-card {
    width: 360px; /* Standard mobile/web card width */
    background: white;
    border-radius:20px;
    margin:0 auto;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Dynamic shadow effect */
    transition: transform 0.3s ease;
}

.preview-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

/* --- Title --- */
.card-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-color);
    //text-align: cente;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Image Grid Layout --- */
.image-grid {
    display: grid;
    /* Two columns: Left is wider (2 parts), Right is narrower (1 part) */
    grid-template-columns: 3fr 2fr 1fr;
    /* Two rows of equal height */
    grid-template-rows: repeat(3,2,1fr); 
    gap: 8px; /* Spacing between photos */
    margin-bottom: 20px;
    height: 250px; /* Fixed height for the grid */
    overflow: hidden; /* Ensures rounded corners are respected */
}

/* --- Image Item Styling --- */
.image-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px; /* Rounded corners for individual photos */
    line-height: 0; /* Fixes layout issues with inline images */
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the space without distortion */
    transition: transform 0.5s ease;
}

.image-item:hover img {
    transform: scale(1.05); /* Subtle zoom effect on hover */
}

/* --- Large Image spanning two rows --- */
.main-image {
    grid-row: 1 / 3; /* Starts at row 1, ends before row 3 (spans both rows) */
}

/* --- Photo Count Overlay --- */
.photo-count {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.photo-count svg {
    margin-right: 4px;
}

/* --- See More Button --- */
.see-more-button {
    width: 100%;
    padding: 14px 20px;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 1px;
    background-color:#8a3ffc;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.see-more-button:hover {
    background-color: #143e6b; /* Slightly darker shade on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


        .bb-header {
            margin-bottom: 40px;
           text-align: center;
        }

        .bb-header h3 {
            font-size: 1.2rem;
            font-weight: 500;
            color: #a0a4b8;
            margin-bottom: 10px;
        }

        .bb-header h1 {
            font-size: 1.5rem;
            font-weight: 1000;
            color:#444;
            line-height: 1.2;
            margin: 0;
        }              
       
.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;
     
}

.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);
    }
  }     
.investment-card {
    display: flex;             /* 1. Activates flexbox */
    flex-direction: column;    /* 2. Stacks flex items vertically */
    align-items: center;       /* 3. Centers items horizontally 
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.10); */
       
    text-align: center;
    background-color: #F7F7FD;
    max-width:100%;
    padding: 40px 16px;
   
}

/* Icon styling */
.icon-wrapper {
    width: 130px;
    height: 130px;
    background-color:#6d89f7;// #FDEFE6; /* Peachy circle background */
    border-radius: 50%;
    display: flex;
    margin:0 Auto;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
}

.icon-wrapper img {
    width: 80px;
}

/* Text styling */
.investment-card h1 {
    font-size: 30px;
    font-weight: 1000;
    color: #190F4F; /* Dark navy blue for heading */
    margin: 0 0 20px 0;
}

.investment-card p {
    font-size: 17px;
    color: #505072; /* Grayish-blue for body text */
    line-height: 1.5;
    margin: 0 0 32px 0;
    max-width: ;
}

/* Button styling */
.cta-button {
    background-color: #0A00FF; /* Vibrant blue */
    color: #FFFFFF;
    border: none;
    border-radius: 50px; /* Creates the pill shape */
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    margin-bottom: ;
}

.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%;
}


/* 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;
  }