html {
    scroll-behavior: smooth;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white ;
  
}
body{
    margin: 0;
    font-family: Arial, sans-serif;
    background: black !important;
   
 
}
/*  header section  */

header {
    /* overflow-x: hidden ; */
.navbar .navbar-brand .logo{
    width: 120px;
    height: auto;
    border-radius: 15px;
}

#navbarNav .nav-item .nav-each-item{
    font-family: "Roboto",sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px;
    color: white !important;
}
#navbarNav .nav-item .nav-each-item:hover{
    color: rgb(240, 240, 99) !important;
    
  
}

}
/* video section */
 .video-section {
    /* margin-top: 20px; */
    width: 100%;
    height: 400px;
    overflow-x: hidden ;
    .video-block{
        position: relative;
        width: 1005;
        height: 100%;
    }    
    .video-block .background-video  {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the video covers the section */
    }
    .video-block .content{
        width: 100%;
        position: absolute;
       top: 30%;
    }
    .video-block .content .main-title{
        width: 100%;
       text-align: center;
    }
    .video-block .content .sub-title{
        width: 100%;
       text-align: center;
       margin-top: 12px;
    }
    .video-block .content  .social-media{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 30px;
    }
    .video-block .content  .social-media a{
       text-decoration: none;
       width: 35px;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 10px;
       border-radius: 50%;
       background-color: #3f3d3d;
    }
    .video-block .content  .social-media a:hover{
        background-color: #282626;
     }
} 


/* image slider scrolling  section */

.img-slider{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    /* overflow-x:visible !important; */

    .slider {
        overflow-x: hidden ;
        width: 95%;
    }
    .slides {
        max-width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        animation: scroll 10s linear infinite; /* Adjust speed here */
    }
    
    
    .slides img {
        width: 16.66%; /* 100% / 6 images */
        height: 140px;
        flex-shrink: 0;
    }
 
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
@media (max-width:800px){
    .img-slider  .slides img {
        width: 26.66%; /* 100% / 6 images */
        height: auto;
        flex-shrink: 0;
    }
}


/* our services and work section  */

.our-services-and-work {
    margin-top: 80px;
    .container-fluid .main-title h2{
        text-align: center;
        font-weight: 600;
        font-size: 40px;
    }
    .container-fluid  .sub-title{
        text-align: center;
        color: #8d8b8b;
        margin-top:10px ;
        margin-bottom: 50px;
        
    }
    .container-fluid  .images{
        width: 100%;
    }
    .container-fluid  .images  img{
        width: 100%;
       
    }
    .container-fluid .images h4 {
        text-align: center;
        margin-top: 10px;
    }
}



/* latest project section */

.latest-projects {
    margin-top: 80px;
    overflow-x: hidden ;
    .container .latest-projects-title{
        text-align: center;
        font-size: 20px;
        font-weight: 600;
    }
    .container .latest-projects-title h2{
        font-size: 40px;
        font-weight: 600;
    
    }

    .container .latest-projects-sub-title{
        font-size: 20px;
        font-weight: 600;
        color: #878585;
        text-align: center;
    }
    .container .recent-procect{
        width: 100%;
       display: flex;
       justify-content: center;
    }
    .container .recent-procect video{
        width: 500px;
        height: 550px;

    }
}

@media (max-width: 480px) {
    .latest-projects .container .recent-procect video {
        width: 330px;
        height: 470px ; /* Stack columns on smaller screens */
    }
}


/* photos section */
.photos{ 
 margin-top: 50px;
 overflow-x: hidden ;
 .container{
    /* display: flex; */
    gap: 50px;
    margin-top: 50px;
}
  h2{
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 40px;
    font-weight: 600;

}
.container img{
    width: 100%;
    height:  220px;  
}
 .container .img1{
    box-sizing: border-box;
    border: 5px solid white;
    width: 100%;
}
 .container .img2{
    box-sizing: border-box;
    border: 5px solid white;
    width: 100%;
    margin-top: 25px;  
 }
 .container  .img3{
    box-sizing: border-box;
    border: 5px solid white;
    width: 100%;
    margin-top: 25px;
  }
}

@media (max-width:1000px){
   .photos .container img{
        width: 100%;
        height:  140px;  
    }
}
@media (max-width:400px){
    .photos .container img{
         width: 100%;
         height:  120px;  
     }
 }
/* video section */
.videos{
    width: 100%;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    /* overflow-x: hidden ; */
    .container{
        margin-top: 50px;
        /* display: flex; */
       /* column-gap:  50px; */
     }
      .container .row{
         margin-top: 50px;
      }
      .container .row .video-frame{
        display: flex;
        justify-content: center;
        align-items: center;
     }
     .container .section-heading{
         text-transform: uppercase !important;
         text-align: center;
         padding: 20px;
         font-size: 40px;
         font-weight: 600;
     }
     
     .frame{
         width: 200px;
         height: auto;
     }
}
@media (max-width : 720px){

    .videos  .container .frame{
        width: 160px;
        height: auto;
      
    }
}
@media (max-width : 550px){

    .videos  .container .frame{
        width: 180px;
        height: auto;
      
    }
}
@media (max-width : 350px){

    .videos  .container .frame{
        width: 140px;
        height: auto;
      
    }
}





/* studio details */

.studio-details{
    background-color:#000000;
    box-sizing: border-box;
    margin-top: 0px;
    overflow-x: hidden ;

    .container .row{
        margin-top:50px;
    }
    
    .container #studio{
        color:azure;
        text-align:center;
        /* font-family: montserrat; */
        font-size: 40px;
        font-weight: 600;
  
    }
     #img{
        height: 100 vh;
        width:100%;
    }
    .container .about-studio #about{
        color:azure;
        font-family: montserrat;
        font-size: 40px;
        font-weight: 500;
    
    }
    .container .about-studio #para1{
        color:azure;
        font-family: montserrat;
        font-size: 20px;
        font-weight: 500;
    }
    
    
    .container .about-studio #studiofeatuters{
        color:azure;
        font-family: montserrat;
        font-size: 38px;
        font-weight: 500;
    }
    .container .about-studio #editting{
            color:azure;
            font-family: montserrat;
            font-size: 20px;
            font-weight: 500;
    }
    .container .about-studio #wifi{
            color:azure;
            font-family: montserrat;
            font-size: 20px;
            font-weight: 500; 
    }  
    .container .about-studio #dubbing{
            color:azure;
            font-family: montserrat;
            font-size: 20px;
            font-weight: 500; 
        }
        
    .container .about-studio #small{
            color:azure;
            font-family: montserrat;
            font-size: 20px;
            font-weight: 500; 
        }
    
}
@media (max-width:1000px){
    .container .about-studio{
        margin-top: 50px;
    }
}

/* studio image section    */
.studio-photos-container{
    margin-top:50px ;
    padding: 0;
    width: 100%;
    overflow-x: hidden ;

    .studio-photos-title{
        font-size: 40px;
        font-weight: 600;
        color: white;
        margin-left: 30px;
    
    }
     .container-fluid{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        flex-wrap: wrap;
    }
 
     .container-fluid .image-block{
       width: 100%;
       height:100%;
    }
    .container-fluid .image-block img{
        width:100%;
        height: auto;
        /* height:22.22%; */
     }
     
    
}

/* services  section */

.services-block{
    margin-top: 50px;
    margin-bottom: 30px;
    color: white;
    overflow-x: hidden ;

     .container-fluid .affordble-services-block{
        width: 100%;
        height: auto;
        padding: 20px;
        background-color:#002f3f ;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
       
    }
     .container-fluid .affordble-services-block:hover{
        background-color: #174656;
        color:white;
    }
     .affordble-icon {
       
       margin: auto;
    }
     .affordble-icon i{
        font-size: 60px;
    }
}
@media (max-width:1000px){
    .services-block .container-fluid{
        display: flex;
        flex-direction: column !important;
    }
}



/* profile demo code */

.profile-section {
    text-align: center;
    color: white;
    overflow-x: hidden ;

    .profile-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .profile-container .title h2{
       text-align: center;
       margin-top: 50px;
       margin-bottom: 50px;
       font-size: 40px;
       font-weight: 600;
    }
    
    .profile-container .review-block{
        width: 95%;
        padding: 20px;
        background-color: rgb(21, 50, 57);
    }
    
    .profile-container .profile {
        display: none; /* Hide all profiles initially */
    }
    
    .profile-container .profile.active {
        display: block; /* Show active profile */
    }
    
    .profile-container .review-block .img img {
        width: 150px;
        height: 150px; /* Adjust as needed */
        border-radius: 50%;
        border: 3px solid white; /* Make images circular */
    }
    .profile-container .review-block h4{
       margin-top: 15px;
    }
    .profile-container .review-block .rating{
        margin-top: 10px;
     }
    
    .profile-container .navigation {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .profile-container .navigation button {
        /* margin: 0 10px; */
        padding: 7px 9px; 
        border: none;
        outline: none;
        background: transparent;
        cursor: pointer;
    }
    
    .profile-container .navigation button i{
        font-size: 18px;
        color: white;
    }
    .profile-container .navigation button:focus {
        border:2px solid white
    }
    .profile-container .more-review-btn{
        font-size: 18px;
        font-weight: 600;
        color:white;
        border: none;
        outline: none;
        background: rgb(13, 192, 212);
        padding: 8px 15px;
        border-radius: 5px;
    }
    .profile-container .more-review-btn:hover{
        
        border: 1px solid rgb(13, 192, 212);
        background: transparent;
        padding: 8px 15px;
    }
    
}

/* contact us section */

.contact-us{
    margin-top: 50px;
    overflow-x: hidden ;
    .container-fluid{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 80px;
        background-color: #002f3f;
    }
    .container-fluid h2{
        margin-top:30px;
        margin-bottom:30px;
        font-size: 40px;
        font-weight: 600;
    }
    .container-fluid a{
        text-decoration: none;
        background-color:rgb(59, 233, 252) ;
        box-shadow: 0px 0px 10px rgb(13, 192, 212) ;
        border-radius: 5px;
        padding:7px 20px;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
        color: rgb(56, 56, 56);
    }
    .container-fluid a i{
       
        color: rgb(56,56,56);
    }

}

/* footer */

footer{
    margin-top: 50px;
    margin-bottom: 50px;
    overflow-x: hidden ;

    .social-media{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    .social-media a{
        cursor: pointer;
        text-decoration: none;
        font-size: 18px;
        width: 51px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
        border-radius: 50%;
        border:1px solid white ;
        background-color: #002f3f;
        transition: background-color 0.5s ease-in-out;
     }
    .social-media i{
       font-size: 18px;
    }
    .social-media a:hover{
        background-color: #405c65;
     
    }
    .location{
        text-align: center;
        margin-top: 20px;
        font-size: 18px;
    }
    .copyright{
        text-align: center;
        margin-top: 20px;
        font-size: 18px;
    }
    .address{
        text-align: center;
        margin-top: 20px;
        font-size: 25px;
        font-weight: 500;
    }

}
@media (max-width:450px){
    footer{
        padding: 0 15px;
    }
    footer .social-media{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:8px;
    }
    .social-media a{
        cursor: pointer;
        text-decoration: none;
        font-size: 15px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-radius: 50%;
        border:1px solid white ;
        background-color: #002f3f;
        transition: background-color 0.5s ease-in-out;
     }
    .social-media i{
       font-size: 15px;
    }
    .location{
        text-align: center;
        margin-top: 20px;
        font-size: 15px;
    }
    .copyright{
        text-align: center;
        margin-top: 20px;
        font-size: 15px;
    }
    .address{
        text-align: center;
        margin-top: 20px;
        font-size: 20px;
        font-weight: 500;
    }
}