@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Tektur:wght@400..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    color: #ffffff;
}

/* 
font-family: "DM Sans", sans-serif;
font-family: "Tektur", sans-serif;
*/

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(90deg, rgba(45,34,67,1) 0%, rgba(45,34,67,1) 43%, rgba(0,31,77,1) 100%);
}



/* Base Navbar Styles */
nav {
    position: fixed;
    z-index: 1000;
    width: 100%;
    background-color: #000000;
    height: 100px;
    font-family: "Tektur", sans-serif;
    padding: 0 40px;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styles */

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo_text {
    color: #ffffff;
    font-size: 18px;
}

.logo_img {
    width: 80px;
    height: 100%;
    margin-left: 4px;
    
}

.logo_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* Nav Items Container */
.all_headeritems {
    display: flex;
    gap: 25px;
    align-items: center;
}

.all_headeritems span {
    position: relative;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.3s ease;
}

.all_headeritems span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: #ff6347;
    transition: width 0.3s ease;
}

.all_headeritems span:hover::after {
    width: 100%;
}

/* Hamburger Menu (Hidden by Default) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Responsive Styles */
@media (max-width: 999px) {
    .all_headeritems {
        position: fixed;
        top: 100px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 100px);
        background-color: #000000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transition: right 0.5s ease;
    }

    .all_headeritems.active {
        right: 0;
    }

    .hamburger {
        display: flex;
    }

    /* Transform hamburger into cross icon */
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}



@media (max-width:480px) {
    nav {
        padding: 0px 20px;
    }

    .logo_text {
        font-size: 14px;
    }
    
}

/* Home section */
.home_section {
    position: relative; /* Add position relative for video positioning */
    width: 100%;
    height: 90vh; /* Full viewport height */
    overflow: hidden; /* Hide any overflow from video */
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers the area */
    transform: translate(-50%, -50%);
    z-index: 1; /* Place video behind content */
    /* Add the mask image */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 0%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    
    
}

.home_text {
    position: relative; /* Bring text above video */
    z-index: 2; /* Ensure text is above video */
    width: 100%;
    height: 200px;
    color: white; /* Ensure text is visible on video */
    display: flex;
    flex-direction: column;
    margin: 0 5%; /* Default margin for larger screens */
    padding: 7% 7% 5% 0%;
    
   
}

.home_tittle {
    padding: 3% 0;
    letter-spacing: 4px;
    font-family: "Tektur", sans-serif;
    font-weight: 500;
    font-size: 2rem;
}

/* Optional: Add a semi-transparent overlay for better text readability */
.home_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
    z-index: 1;
}

.home_text p {
    font-family: "DM Sans", sans-serif;
    font-size: 1.2rem;
    line-height: 22px;
    width: 50%;
    text-align: justify;
}

/* Responsive Styles for Tablets */
@media (max-width: 768px) {
    .home_section {
        height: 85vh;
    }
    .home_text {
        margin: 0 5%;
    }

    .home_tittle {
        font-size: 1.8rem;
        padding: 5% 0;
        line-height: 45px;
    }

    .home_text p {
        font-size: 0.85rem;
        line-height: 20px;
        width: 75%;
    }
}

/* Responsive Styles for Phones */
@media (max-width: 480px) {
    .home_text {
        margin: 0 5%;
    }

    .home_tittle {
        font-size: 1.4rem;
        padding: 10% 0;
        line-height: 30px;
        letter-spacing: 2px;
    }

    .home_text p {
        font-size: 0.8rem;
        line-height: 18px;
        width: 85%;
    }

    .home_section {
        height: 42vh;
    }
}

/* About Section */
.about_section {
    font-family: "Tektur", sans-serif;
    letter-spacing: 2px;
    background: linear-gradient(90deg, rgba(45,34,67,1) 0%, rgba(45,34,67,1) 43%, rgba(0,31,77,1) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    
}

.about_tittle {
    padding: 5% 0;
    letter-spacing: 4px;
    text-align: center;
    
}
.about_tittle h1 {
    font-family: "Tektur", sans-serif;
    font-weight: 500;
}

.about_services {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    justify-content: center;
    width: 100%;
    max-width: auto;
    margin: 0 auto;
}

.services_container1 {
    border-radius: 10px;
    background: rgba(242, 242, 242, 0.4);
    width: 260px;
    margin-bottom: 5%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Smooth transitions */
    cursor: pointer; /* Indicates the box is clickable */
}

/* Hover Effect */
.services_container1:hover {
    transform: translateY(-10px); /* Move the box up slightly */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    background: rgba(242, 242, 242, 0.3); /* Slightly lighten the background */
}

/* Click Effect (Active State) */
.services_container1:active {
    transform: translateY(-5px); /* Slightly move the box up */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Reduce shadow intensity */
    background: rgba(242, 242, 242, 0.4); /* Further lighten the background */
}

.services_img {
    border-radius: 8px;
    width: 100%;
    height: 200px;
    max-width: auto;
    margin-bottom: 20px;
}

.services_text1 {
    font-family: "DM Sans", sans-serif;
    text-align: center;
    font-size: 2rem;
}

.services_text1 h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.services_text1 p {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .about_tittle {
        padding: 10% 0;
        line-height: 45px;
    }

    .about_services {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .about_tittle {
        padding: 15% 0;
        font-size: 0.7rem;
        line-height: 30px;
    }

    .about_services {
        gap: 10px;
    }

    .services_text1 h3 {
        font-size: 1rem;
    }

    .services_text1 p {
        font-size: 0.8rem;
    }
}

.service_section {
    background: linear-gradient(90deg, rgba(45,34,67,1) 0%, rgba(45,34,67,1) 43%, rgba(0,31,77,1) 100%);
    min-height: 100%;
    padding-top: 40px;
    text-align: center;
}

.service_tittle {
    margin: 0 5%; 
}

.service_tittle h1 {
    font-family: "Tektur", sans-serif;
    letter-spacing: 4px;
    padding: 5% 0;
    font-size: 2rem;
    font-weight: 500;
    text-align: center; 
}

.services_img {
    width: 100%;
    max-height: 150px;
    border-radius: 8px;
}
.services_img img {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service_section p {
    font-family: "DM Sans", sans-serif;
    max-width: 900px;
    height: 188px;
    margin: auto;
    font-size: 1.2rem;
    line-height: 24.8px;
    text-align: center;
    padding: 0% 5% 5% 5%; /* Add padding for better spacing */
}

/* Responsive Styles for Tablets */
@media (max-width: 768px) {
    .service_tittle {
        margin: 0 10%; /* Increase margin for tablets */
        line-height: 45px;
        padding: 0% 5% 5% 5%;
    }

    .service_tittle h1 {
        font-size: 2rem; /* Slightly smaller font size for tablets */
        padding: 8% 0; /* Increase padding for better spacing */
    }

    .service_section p {
        font-size: 0.85rem; /* Slightly smaller font size for tablets */
        line-height: 20px; /* Adjust line height for better readability */
        padding: 0 10%; /* Increase padding for better spacing */
        padding: 0% 5% 5% 5%;
    }
}

/* Responsive Styles for Phones */
@media (max-width: 480px) {
    .service_tittle {
        margin: 0 5%; /* Adjust margin for phones */
        line-height: 30px;
    }

    .service_tittle h1 {
        font-size: 1.8rem; /* Smaller font size for phones */
        padding: 10% 0; /* Increase padding for better spacing */
        letter-spacing: 2px; /* Reduce letter spacing for phones */
    }

    .service_section p {
        font-size: 0.8rem; /* Smaller font size for phones */
        line-height: 22px; /* Adjust line height for better readability */
        padding: 0% 5% 5% 5%;
    }
}




/* Slider Container */
.slide-container{
    max-width: 1120px;
    width: 100%;
    padding: 20px;
    

  }
  .slide-content{
    margin: 0 40px;
    overflow: hidden;
  }
  .card{
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
  }
  .card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px;
    
  }
  .card-image{
    position: relative;
    height: 150px;
    width: 200px;
    
  }
  .card-image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .card-content h6 {
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 20px;
  }
  
  
  .swiper-navBtn{
    color: #fff;
    transition: color 0.3s ease;
  }
  .swiper-navBtn:hover{
    color: #ff6347;
  }
  .swiper-navBtn::before,
  .swiper-navBtn::after{
    font-size: 30px;
  }
  .swiper-button-next{
    right: 10px;
  }
  .swiper-button-prev{
    left: 10px;
  }
  .swiper-pagination-bullet{
    background-color: #8f8f8f;
    opacity: 1;
  }
  .swiper-pagination-bullet-active{
    background-color: #ffffff;
  }
  
  @media screen and (max-width: 768px) {
    .slide-content{
      margin: 0 10px;
    }
    .swiper-navBtn{
      display: none;
    }
  }
/* slider ends here */


/* crew */
.our_crew {
    background: linear-gradient(90deg, rgba(45,34,67,1) 0%, rgba(45,34,67,1) 43%, rgba(0,31,77,1) 100%);
    margin: 10% 5%;
    min-height: 100%;
    padding-top: 5%;
}
.crew_tittle h1 {
    font-size: 2rem;
    font-weight: 500;
    max-width: 1120px;
    color: #ffffff;
    font-family: "Tektur", sans-serif;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 0 0 5% 6%;
}

.crew-name {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.insta-img {
    width: 18px;
    height: 18px;
    margin: 0px 0px 2.5px 8px;
}

.insta-img img {
    height: 100%;
    width: 100%;
    
}
/* Responsive Styles for Tablets */
@media (max-width: 768px) {
    .our_crew {
        margin: 10% 10%; /* Increase margin for tablets */
    }

    .crew_tittle {
        font-size: 1.8rem; /* Slightly smaller font size for tablets */
        padding: 5% 0; /* Increase padding for better spacing */
        line-height: 45px;
    }
}

/* Responsive Styles for Phones */
@media (max-width: 480px) {
    .our_crew {
        margin: 10% 5%; /* Adjust margin for phones */
    }

    .crew_tittle {
        font-size: 1.4rem; /* Smaller font size for phones */
        padding: 10% 0;/* Increase padding for better spacing */
        line-height: 30px;
        letter-spacing: 2px;
        text-align: center;
    }

}

/* our crew */

.crew{
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    border-radius: 10px;
    padding: 0 30px;
    height: 400px;
  }
  .crew-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0px;
    
  }
  .crew-image{
    position: relative;
    height: 150px;
    width: 200px;
    margin: 20px;
    
  }
  .crew-image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  .crew-content h3 {
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .crew-content p {
    font-family: "DM Sans", sans-serif;
    text-transform: capitalize;
    text-align: center;
    line-height: 16px;
    font-size: 0.8rem;
   
  }
/* crew end */


/* Testimonials Section */
.testimonials {
    background: linear-gradient(90deg, rgba(45,34,67,1) 0%, rgba(45,34,67,1) 43%, rgba(0,31,77,1) 100%);
    margin: 10% 5%;
    min-height: 100%;
    padding-top: 5%;
}

.testimonials_tittle h1 {
    font-size: 2rem;
    font-weight: 500;
    color: #ffffff;
    font-family: "Tektur", sans-serif;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 0 0 5% 6%;
}

/* Testimonials Container */
.testimonials-container {
    width: 100%;
    padding: 20px;
    overflow: hidden;
    position: relative;
    border-radius: 15px; /* Added border radius */
    /* Increased mask effect for left and right sides */
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 10%,   /* Increased from 5% to 10% for left fade-in */
        rgba(0,0,0,1) 90%,   /* Decreased from 95% to 90% for right fade-out */
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 10%,
        rgba(0,0,0,1) 90%,
        rgba(0,0,0,0) 100%
    );
}

.testimonials-content {
    width: 100%;
    overflow: hidden;
}

.testimonials-wrapper {
    display: flex;
    animation: scroll 20s linear infinite;
    width: max-content; /* Allows content to extend beyond container */
}

.testimonials-container:hover .testimonials-wrapper {
    animation-play-state: paused; /* Stops animation on hover */
}

.testimonial-item {
    height: 400px; /* Fixed height consistent across all devices */
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px; /* Added border radius to individual items */
}

.testimonial-video {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    border-radius: 10px; /* Ensure video container matches item radius */
}

.testimonial-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* Added border radius to iframe */
}




/* Responsive Design */
@media screen and (min-width: 1024px) {
    .testimonial-item {
        width: 25vw; /* 4 items per viewport width */
        height: 400px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .testimonial-item {
        width: 50vw; /* 2 items per viewport width */
    }
}

@media screen and (max-width: 767px) {
    .testimonial-item {
        width: 100vw; /* 1 item per viewport width */
    }
}

/* Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive Styles for Tablets */
@media (max-width: 768px) {
    .testimonials {
        margin: 10% 10%;
    }

    .testimonials_tittle h1 {
        font-size: 1.8rem;
        padding: 5% 0;
        line-height: 45px;
    }
}

/* Responsive Styles for Phones */
@media (max-width: 480px) {
    .testimonials {
        margin: 10% 5%;
    }

    .testimonials_tittle h1 {
        font-size: 1.4rem;
        padding: 10% 0;
        line-height: 30px;
        letter-spacing: 2px;
        text-align: center;
    }
}

/* Contact Us! */
.contact_us {
    background: linear-gradient(90deg, rgba(45,34,67,1) 0%, rgba(45,34,67,1) 43%, rgba(0,31,77,1) 100%);
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    align-items: center;
    justify-content: space-between;
    padding: 6% 5% 4% 5%;
    position: relative;
}

.contact_text {
    flex: 1; /* Take up available space */
    margin: 0% 5%;
}

.contact_text h1 {
    letter-spacing: 4px;
    font-family: "Tektur", sans-serif;
    font-weight: 500;
    font-size: 2rem; /* Default font size for larger screens */
    margin-bottom: 40px;
}

.contact_phone, .contact_email {
    margin: 0px 0px 20px 20px;
}

.contact_phone h2, .contact_email h2 {
    letter-spacing: 3px;
    font-family: "Tektur", sans-serif;
    margin-bottom: 10px;
    font-weight: 400;
}

.social_handle {
    padding: 20px;
    width: 40%;
    margin-top: 80px;
    width: 350px;
    display: flex;
    align-items: center;
    border: 1px solid #ffffff;
}

.social_handle h2 {
    letter-spacing: 3px;
    font-family: "Tektur", sans-serif;
    margin-right: 15%;
    font-weight: 500;
}

.social_handle a {
    margin-right: 10px;
}

/* Video Styling */
.contact_us video {
    position: absolute;
    right: 0%;
    width: 40%; /* Adjust video width */
    max-width: 500px; /* Limit maximum width */
   
}


/* Reset default styles and ensure smooth transitions */
.whats, .face, .linkdin, .insta {
    display: inline-block;
    transition: all 0.3s ease;
}

/* WhatsApp hover effect */
.whats:hover svg path {
    fill: #25D366;
}
.whats:hover svg {
    transform: scale(1.2);
}

/* Facebook hover effect */
.face:hover svg path {
    fill: #1877F2;
}
.face:hover svg {
    transform: scale(1.2);
}

/* LinkedIn hover effect */
.linkdin:hover svg path {
    fill: #0A66C2;
}
.linkdin:hover svg {
    transform: scale(1.2);
}

/* Instagram hover effect */
.insta:hover svg path {
    fill: #E4405F;
}
.insta:hover svg {
    transform: scale(1.2);
}

/* Optional: Set default fill color */
.whats svg path,
.face svg path,
.linkdin svg path,
.insta svg path {
    transition: fill 0.3s ease;
}

/* Optional: Dark mode compatibility */
@media (prefers-color-scheme: dark) {
    .whats svg path,
    .face svg path,
    .linkdin svg path,
    .insta svg path {
        fill: #ffffff; /* Default white in dark mode */
    }
}



/* Responsive Design */
@media (max-width: 768px) {

    .contact_text h1 {
        font-size: 1.8rem; /* Smaller font size for tablets */
    }
}

@media (max-width: 480px) {
    .contact_text h1 {
        font-size: 1.4rem; /* Smaller font size for mobile */
        line-height: 32px;
    }

    .contact_text h2 {
        font-size: 1rem; /* Smaller font size for mobile */
    }
    .social_handle {
        width: 210px;
        padding: 10px;

    }
    
    .contact_phone,.contact_email {
        margin-left: 0;
    }

    .contact_email p, .contact_phone p {
        font-size: 12px;
    }

    .social_handle .w-6 {
        height: 15px;
        width: 15px;
    }
    .social_handle h2 {
       font-size: 0.8rem;
       margin-right: 8%;
    }

    .contact_us video {
        width: 50%;
    }
}



/* footer */

footer {
    background-color: #000000;
    height: 80px;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Sans", sans-serif;

}

footer div {
    display: flex;
    align-items: center;
    justify-content: center;

}

/* Animation for left-to-right transition */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-50px); /* Start slightly off-screen */
        opacity: 0;
        visibility: hidden;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
}

/* Class to apply the animation */
.slide-in {
    animation: slideInFromLeft 1s ease-out forwards;
}

/* Initially hide elements that will slide in */
.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px); /* Start slightly off-screen */
    transition: opacity 1.3s ease-out, transform 1s ease-out;
}


/*Loader*/
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #b7b7b7;
    animation: l15 1s infinite linear;
    position: fixed; /* Fix it to the viewport */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    z-index: 9999; /* Ensure it stays on top */

}
  .loader::before,
  .loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
}
  .loader::after {
    margin: 8px;
    animation-duration: 3s;
}
  @keyframes l15{ 
    100%{transform: rotate(1turn)}
}


/* Mixing and Mastering */
.mixAndmaster {
    background-color: #2c1e4a;
    width: 100%;
    height: 100%;
    color: #fff;
}
.head {
    margin-bottom: 20px;
    background-color: black;
    height: 100px;
    padding: 0px 40px;
    display: flex;
    align-items: center;
    font-family: "Tektur", sans-serif;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.head h1 {
    font-size: 2.4rem;
    letter-spacing: 4.2px;
    font-weight: 400;
}

.describe_text {
    padding: 0px 80px 0px 40px;
    margin-bottom: 40px;
}

.describe_text p {
    font-size: 1.2rem;
    font-family: "DM Sans", sans-serif;
    letter-spacing: 1.2px;
    line-height: 24px;
    text-align: justify;
}

.sevices {
    display: flex;
}
/* Responsive Design */
@media (max-width: 768px) {
    .head {
        height : 80px;
    }
    .head h1 {
        font-size: 1.7rem;
        letter-spacing: 3px;
    }

    .describe_text p {
        font-size : 1rem;
        line-height: 24px;
    }
    .describe_text {
       padding: 0px 40px;
    }
}

@media (max-width: 480px) {
    .head {
        height : 60px;
        padding: 0px 20px;
    }
    .head h1 {
        font-size: 1rem;
        letter-spacing: 2.2px;
    }
    .describe_text p {
        font-size : 1rem;
        line-height: 24px;
        text-align: Start;
    }
    .describe_text {
        padding: 0px 20px;
    } 

    
}


/* mixing and mastering */

.mixing-mastering {
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
  }
  .mixing-mastering-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px;
    
  }
  .mixing-mastering-image {
    position: relative;
    height: 150px;
    width: 200px;
    
  }
  .mixing-mastering-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .mixing-mastering-content h6  {
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 20px;
  }

/* mixing-mastering end */
.social {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0px;
    background: #2c1e4a;
}
.work_with_us {
    font-family: "Tektur", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    width: 280px;
    padding: 10px;
}

.work_with_us h3 {
    margin-right: 10px;
    letter-spacing: 2.5px;
    font-weight: 500;

}

.our_creations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0px;
}

.our_creations h1 {
    font-size: 2.2rem;
    font-family: "Tektur", sans-serif;
    letter-spacing: 4px;
    font-weight: 500;
}


.iframe_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25px 0px;
    
    
}

.iframe_box iframe {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border: 1.5px solid rgba(242, 242, 242, 0.3);
    width: 368px;
    height: 208px;
}


@media (max-width: 480px) {
    
    
    .our_creations h1 {
        font-size: 1.2rem;
    }


    .iframe_box iframe {
        width: 218px;
        height: 124px;
    }
}