/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gilroy', sans-serif;
}

body {
    line-height: 1.6;
    background-color: #FFFFFF;
    color: #333;
}

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}
.slider-heading{
    position: relative;
    color: white; /* Text color */
    text-shadow:
            0 0 5px rgba(84, 0, 115, 0.8), /* Purple shadow */
            0 0 10px rgba(84, 0, 115, 0.6), /* Outer shadow */
            0 0 15px rgba(84, 0, 115, 0.4); /* Faded shadow */
    
}

/*defining here the website colors*/
.portfolio-color-grey{
    background-color: #F4EDFA;

}
.portfolio-color-white{
    background-color: #FFFFFF;

}
.section-color-purple{
    background-color: #1A0730;
}
.section-color-gradient{
    background: linear-gradient(to bottom, #1A0730, #55258B); /* Gradient from purple to light purple */

}
.gradient-purple{
    background: linear-gradient(to right, #3D136C, #8E4ED3); /* Gradient from purple to light purple
/*    background: radial-gradient(ellipse, purple, blueviolet); /* Gradient from purple to light purple */

    -webkit-background-clip: text; /* Ensures the gradient clips to the text */
    -webkit-text-fill-color: transparent; /* Makes the inside of the text transparent, so the background shows */
}
h1, h2 {
    text-align: center;
    font-size: 380%;
/*    padding-top:20px;*/
    padding-bottom:20px;
    font-weight: 1000;
}
h3{
    text-align: center;
    font-size: 190%;
    padding-top:20px;
/*    padding-bottom:20px;*/
    font-weight: 1000;
}

section {
    padding: 80px 0;
}
.section-contact {
    padding: 150px 0;
}
.styled-section {
    height: 20%; /* Adjust as needed */
/*    clip-path: polygon(0 0, 60% 0, 70% 10%, 90% 20%, 100% 0, 100% 100%, 0 100%);*/
position: relative;
}
.curve {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Adjust the height of the curve */
}

/* Navigation Menu */
nav {
/*    background: #333;*/
    color: #fff;
/*    padding: 12px 0;*/
    position: sticky;
    top: 0;
    z-index: 1000;
    
        overflow: visible; /* Ensure the logo can overflow out of the nav bar */
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo {
    width: 80px; /* Adjust width as needed */
       position: relative;
       margin-bottom: -35px; /* Negative margin to make the logo overflow */
       filter: drop-shadow(0 0 1px rgba(84, 0, 115, 0.8)) /* Purple shadow */
                   drop-shadow(0 0 5px rgba(84, 0, 115, 0.6)) /* Outer shadow */
                   drop-shadow(0 0 7px rgba(84, 0, 115, 0.4)); /* Faded shadow */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    transition: background 0.3s;
    border-radius: 8px;
}

nav ul li a:hover {
    background: #BB85FF;
    border-radius: 8px;
    color: #1A0730 !important;
    font-weight: 1000 !important;
}

/* Header Section with Video Background */
header {
    position: relative;
    height: 70vh; /* Allow header height to be auto based on video content */
    overflow: hidden;
}

.header-video-frame {
    border-radius: inherit; /* To match the portfolio item border */
    object-fit: cover; /* Optional: maintain aspect ratio */
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: 100%; /* Initially set to 100% */
    z-index: -1;
}

/* Adjust the header text positioning if needed */
.header-text {
    position: absolute;
    font-size: 75%;
    top: 45%;
    left: 40%;
    transform: translate(-50%, -50%); /* Centering adjustment */
    text-align: center; /* Align text to center */
    color: #fff;
    padding: 35px;
    width: 40%;
}
#home .btn {
    display: inline-block;
    padding: 15px 20px;
    background: #55258B;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
/*    margin-top: 20px;*/
}
#home .offer-form-group input {
    width: 320px; /* Ensures the input takes full width of the parent */
/*    padding-left:100px;*/
    font-size: 1.2rem; /* Optional: Adjust font size if needed */
    border: 1px solid #ccc; /* Optional: Add border */
    border-radius: 8px; /* Optional: Rounded corners */
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
}

/* Services Section */
#services .services {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 35px; /* Small distance between items */
}

/* Service Item Styles */
#services .service {
/*    background: #F6F0FF; /* Grey color for each item */
    padding: 20px;
    border-radius: 15px;
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}
.service img {
    width: 50px;
    height: auto;
}

.extra-bold {
    font-weight: 1000; /* Adjust as needed, 900 is the boldest */
    font-size: 120%;
}

/* Portfolio Section */
/* Portfolio Section Outer Container */
.portfolio-container {
/*    background-color: white; /* Outer container is white */*/
    padding: 50px 0; /* Padding for spacing */
    text-align: center; /* Center align the text */
}

.portfolio-container h2, .portfolio-container p {
/*    color: #333; /* Darker text color for better contrast */*/
}

/* Light Grey Box for Portfolio Items */
.portfolio-box {
/*    background-color: #F4EDFA; /* Light grey background */*/
    padding: 50px 20px; /* Padding inside the grey box */
    border-radius: 35px; /* Smooth rounded corners */
    position: relative; /* Keep it centered */
    margin: 0 auto; /* Center the grey box */
    max-width: 80%; /* Optional: Limit max width of the grey box */
}

/* Wrapper to allow the grid to extend full width */
.portfolio-grid-wrapper {
    
    
    position: relative;
    width: 100vw; /* Full viewport width */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
/*    background-color: #f6f9f9; /* Same background to match the box */*/
    max-width: 1200;
    
    padding-left: 16%;
    padding-right: 16%;
/*    padding: 0px 150px;/* adding this padding resolve my solution with a max-width, but can you guide a better approach? like centered this dev*/*/
 
}


/* Portfolio Grid Full Width */
.portfolio-grid {
/*    background-color: #F4EDFA;*/
    display: flex;
    justify-content: space-around;
    gap: 15px;
    flex-wrap: wrap;
    border-radius: 35px;
    padding-top: 20px;
    padding-bottom: 20px;
    
    /*padding: 0 50px; /* Extra padding to control overflow */
/*    background-color: transparent; /* Fully transparent ITS NOT EFFECTING THE TRANSPARENCY CAN YOU PLEASE FIX IT?*/*/

}

/* Portfolio Item Styles */
.portfolio-item {
    width: 220px; /* Portrait width */
    overflow: visible; /* Allow the item to overflow on hover */
    border-radius: 35px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.portfolio-item video {
    width: 100%;
    height: 270px; /* Portrait height */
    border-radius: inherit;
    object-fit: cover; /* Cover to maintain aspect ratio without distortion */
}

/* Hover Effect */
.portfolio-item:hover {
    transform: translateY(-30px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.portfolio-item:hover video {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
/*For Youtube video as portfolio*/
.video-frame {
/*    width: 100%;*/
    width: 220px;
    height: 275px;
    border-radius: inherit; /* To match the portfolio item border */
    object-fit: cover; /* Optional: maintain aspect ratio */
}

/*Portfolio playables area*/
/* For the portfolio item */
.playable-item {
    width: 220px; /* Define the size of the box */
    height: 280px; /* Adjust height to fit the button as well */
    overflow: hidden; /* Hide overflow from GIF */
    border-radius: 35px;
    position: relative; /* Required for positioning the button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* For the GIF inside the item */
.playable-item img {
    width: 100%;
    height: 76%; /* Leave space for the button */
    object-fit: cover;
    border-radius: inherit;
}

/* Button Styles */
.experience-btn {
    display: inline-block;
    padding: 10px 10px;
    background-color: #55258B;
    color: #fff;
    text-align: center;
    border-radius: 25px;
    position: absolute;
    bottom: 13px; /* Place it at the bottom */
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
    font-weight: bold;
    width: 95%;
}

/* Hover effect for the button */
.experience-btn:hover {
/*    background-color: #8E4ED3;*/
    color: white;
    background: #BB85FF;
    border-radius: 8px;
    color: #1A0730 !important;
    font-weight: 1000 !important;
    border-radius: 25px;
}
/* Clients Section with Auto-scroll */
.clients-container {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.clients-box {
    background-color: #FFFFFF;
    width: 80%;
    margin: 0 auto;
    height: 80%;
    border-radius: 35px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
}

.client-logos {
    display: flex;
    justify-content: flex-start;
    width: 100%; /* Set to 100% for container */
    position: relative; /* Relative positioning for animation */
    gap: 70px;
}

.logo-slide {
    min-width: 150px; /* Minimum width for logo slides */
    margin: 0 10px; /* Space between logos */
}

.client-logos img {
    width: 100%; /* Adjust logo size */
    height: auto;
}
/* Team Section */
.about{
/*    background-color: #f0f0f0;*/

}
.about-description{
    padding: 20px;
    text-align: center;
    color: #1A0730;
}

#about .team-members {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.team-members .member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
}

/* Contact Section */
#contact .btn {
    display: inline-block;
    padding: 15px 20px;
    background: #55258B;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    
    
/*    margin-top: 20px;*/
}
.contact-link-description{
    text-align: center;
    
    padding-bottom: 4%;
}
.contact-description{
    padding: 20px;
    text-align: center;
    color: #AAAAAA;
}
.link {
    text-decoration: underline; /* Underline the link */
    color: inherit; /* Makes the link color inherit from the parent */
    color: #55258B;
    font-weight: 1000;
    font-size: 120%;
}

.link:hover {
    color: blue; /* Change color on hover if desired */
    
}

/* Footer */
footer {
    background: #1A0730;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
}

/* Contact Form Styles */
form {
    margin-top: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"], input[type="email"] {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 250px; /* Set a consistent width for the input fields */
}

button.btn {
    padding: 12px 20px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

button.btn:hover {
    background-color: #555 !important;
    
    color: white ;
    background: #BB85FF !important;
    border-radius: 8px;
    color: #1A0730 !important;
    font-weight: 1000 !important;
    border-radius: 45px;
    
   
}

/* For smaller screens */
@media (max-width: 768px) {
    .header-text{
        transform: translate(-80%, -50%);
        width:50%;
    }
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .form-group input, .form-group button {
        width: 100%; /* Full width for smaller screens */
    }
    
    .offer-form-row{
        flex-direction: column;
        align-items: stretch;
    }
    .offer-form-group{
        width: 100%; /* Full width for smaller screens */

    }
    #services .service {
        grid-template-columns: 1fr; /* Stack items in one column for smaller screens */
    }
    h1, h2 {
        font-size: 280%;
    }
    h3{
        font-size: 140%;
    }
    .extra-bold {
        font-size: 100%;
    }
    p{
        font-size: 90%;

    }
    nav ul {
        gap: 0px;
    }
    .portfolio-item {
        width: 180px; /* Portrait width */
    }
    .video-frame {
        width: 180px;
        height: 225px;
    }
    .playable-item {
        width: 180px; /* Define the size of the box */
        height: 280px; /* Adjust height to fit the button as well */
    }
    .service img {
        width: 30px;
        height: auto;
    }
}
@media (max-width: 480px) {
    h1, h2, h3 {
        font-size: 220%; /* Further reduce size for mobile screens */
    }
    .header-text{
        transform: translate(-80%, -50%);
        width:70%;
    }
    
    h1, h2 {
        font-size: 220%;
    }
    h3{
        font-size: 110%;
    }
    .extra-bold {
        font-size: 90%;
    }
    p{
        font-size: 80%;

    }
    nav ul {
        gap: 0px;
    }
    .portfolio-item {
        width: 180px; /* Portrait width */
    }
    .video-frame {
        width: 180px;
        height: 225px;
    }
    .playable-item {
        width: 180px; /* Define the size of the box */
        height: 280px; /* Adjust height to fit the button as well */
    }
    .service img {
        width: 30px;
        height: auto;
    }
}