:root {
    --primary-color: #0a0a0a;
    --secondary-color: #fff;
    --third-color: #141414;
    --accent-color: #d4ff3f;
    --dim-color: #626262;
    --font-family: "Montserrat", sans-serif;
}



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background: var(--primary-color);
    color: var(--secondary-color);
}

.section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em 5%;
}

/* Initial hidden state */
.section-hidden {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* Visible state */
.section-visible {
    opacity: 1;
}



/*********** NAV BAR **********/

.nav{
   
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 2em 1em 2em 2em;
    font-family: "Montserrat";
}



.logo img{
    height: 20px;
    cursor: pointer;
}

.nav > * {
    position: relative;
}

.nav-logo img {
    height: 30px; /* Adjust as needed */
    position: absolute;
    width: auto;
    padding: 40px;
    cursor: pointer;
}

.nav-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #161616; /* Background color for visibility */
    position: fixed; /* Stay at the top */
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 40px; /* Optional padding */
    z-index: 999;
}


.menu-open{
    color: #fff;
    position: relative; /* Needed to position the pseudo-element */
    font-size: 20px;
    cursor: pointer;
    display: flex;
   

}

.nav-container{
    position: absolute;
    top: 0;
    left: -200%;
    width: 100%;
    height: 100vh;
    background: #fff;
    display: block;
    z-index: 1000; /* Change this to 'block' or another suitable display value */
   
}

 .menu-close{
    
    color: #000;
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
 
  
}

.menu-open::after {
    content: "";
    position: absolute;
    bottom: -10px; /* Adjust as needed */
    left: 0;
    width: 0;
    height: 3px;
    background-color: #d4ff3f; /* Change this to your desired color */
    transition: width 0.3s ease-in-out; /* Adjust the transition duration as needed */
    border-radius: 20px;
}

.menu-close::after {
    content: "";
    position: absolute;
    bottom: -10px; /* Adjust as needed */
    left: 0;
    width: 0;
    height: 3px;
    background-color: #000000; /* Change this to your desired color */
    transition: width 0.3s ease-in-out; /* Adjust the transition duration as needed */
}

.menu-open:hover::after {
    width: 100%;
}

.menu-close:hover::after {
    width: 100%;
}

.menu-icon, .close-icon {
    display: inline-block;
    width: 25px; /* Adjust according to your image size */
    height: 25px; /* Adjust according to your image size */
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 5px; /* Adjust spacing between icon and text */
    
}

.menu-icon {
    background-image: url('Assets/Images/hero/menu-icon-new.svg'); /* Replace with your menu icon image */
}

.close-icon {
    background-image: url('Assets/Images/hero/close_icon.svg'); /* Replace with your close icon image */
}


.socials {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 40px 100px;
}

.socials span{
    text-transform: uppercase;
    margin: 0 20px;
}

.menu__item{
    position: relative;
    padding: 0 6vw;
}

.menu__item-link{
    display: inline-block;
    cursor: pointer;
    position: relative;
    transition: opacity 0.4s;
    color: #000;
    text-decoration: none;
}

.menu__item-link::before {
    all: initial;
    position: absolute;
    bottom: 60%;
    left: 0;
    pointer-events: none;
}

.menu__item-link:hover{
    transition-duration: 0.1s;
    opacity: 0;
}

.menu__item-img{
    z-index: 2;
    pointer-events: none;
    position: absolute;
    height: 12vh;
    max-height: 600px;
    opacity: 0;
    left: 8%;
    top: 10%;
    transform: scale(0);
}

.menu__item-link:hover + .menu__item-img{
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s;
}

.menu{
    padding: 10vh 0 25vh;
    --offset: 20vw;
    --move--initial: calc(-25% + var(--offset));
    --move--final: calc(50% + var(--offset));
    font-size: 7vw;
}

.marquee{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: rgba(175, 175, 175, 0.2);
    pointer-events: none;
}

.marquee__inner{
    width: fit-content;
    display: flex;
    position: relative;
    opacity: 0;
    transition: all 0.1s;
    transform: translateX(60px);

}

.menu__item-link:hover ~ .marquee .marquee__inner{
    opacity: 1;
    transform: translateX(0px);
    transition-duration: 0.4s;

}

.menu__item-link, .marquee span{
    white-space: nowrap;
    font-size: 7vw;
    padding: 0.1vw;
    line-height: 1.15;
    
}

.marquee span {
    font-style: italic;
}

.menu__item.projects-menu-item .menu__item-link {
    color: #d3d3d3; /* Lighter grey color */
    cursor: default; /* Change cursor to default */
}

.menu__item.projects-menu-item .updating-text {
    font-size: 1.5vw; /* Adjust size as needed */
    color: #d3d3d3; /* Lighter grey color */
    text-align: center;
    margin-top: 1vh; /* Space between the link and the updating text */
}


/************** STORY ************/
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* General styling for the section */
.our-story {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    text-align: center; /* Center-align text */
    position: relative;
    overflow: hidden;
    background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)), url('Assets/Images/body/group-img.jpg') no-repeat center center / cover;
}

.story-content {
    z-index: 1; /* Ensure the content is above the background */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white; /* Make text white for better contrast */
}

/* Styling for the text container */
.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styling for the large text container */
.large-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styling for the large text spans */
.large-text {
    font-size: 12rem; /* Very large font size */
    margin: 0 50px; /* Horizontal spacing between words */
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Adding shadow behind the text */
}

/* Styling for the button container */
.button-container {
    margin-top: 40px; /* Space between the text and the button */
    display: flex;
    justify-content: center;
    width: 100%; /* Ensure the container spans the full width for centering */
}

/* Styling for the explore button */
.explore-button {
    font-size: 1.5rem;
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: var(--primary-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explore-button ion-icon {
    margin-left: 10px; /* Space between text and icon */
    font-size: 1.5rem;
}

/* Keyframes for the bounce animation */
@keyframes bounce-vertical {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Hover effect to trigger the bounce animation */
.explore-button:hover ion-icon {
    animation: bounce-vertical 1s infinite;
}


/************************* Description *********************************/

/* Brief Description Section */
.brief-description {
    color: var(--secondary-color);
    background: var(--primary-color);
    min-height: 120vh; /* Minimum full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
    text-align: center;
    overflow: hidden; /* Hide overflow content */
}

.brief-description .content {
    max-width: 80%;
    width: 100%; /* Ensure full width responsiveness */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;
}

.brief-description .about {
    text-align: center;
    margin-bottom: 1em; /* Add space between about and text */
}

.brief-description .about h1 {
    font-size: 8em; /* Increase font size */
    margin-bottom: 0.5em; /* Add space between h1 and paragraphs */
    text-transform: uppercase;
    color: transparent; /* Transparent text */
    -webkit-text-stroke: 3px var(--dim-color); /* Outline with dim color */
    transition: color 0.3s ease, -webkit-text-stroke 0.3s ease, text-stroke 0.3s ease;
}


.brief-description .text {
    text-align: left;
    width: 100%; /* Full width to stack horizontally */
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

.brief-description .text .paragraph-1,
.brief-description .text .paragraph-2 {
    width: 100%; /* Full width */
    margin-bottom: 1em; /* Add space between paragraphs */
}

.brief-description .text p {
    font-size: 2.0em; /* Increase paragraph text size */
    line-height: 1.8; /* Increase line height for better readability */
}

.brief-description .buttons {
    width: 100%; /* Full width */
    text-align: left; /* Align buttons to the left */
    margin-top: 2em; /* Adjust top margin as needed */
}

.brief-description .buttons .btn {
    display: inline-flex;
    align-items: center; /* Center items horizontally */
    padding: 1em 2em;
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    margin: 0 0.5em 0.5em 0; /* Adjust margin between buttons */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.brief-description .buttons .btn ion-icon {
    margin-left: 0.5em; /* Add space between text and icon */
    font-size: 1.2em; /* Adjust icon size */
}

.brief-description .buttons .btn.btn-primary {
    background-color: yellow; /* Yellow background for primary button */
    color: black; /* Black text color for primary button */
}

.brief-description .buttons .btn.btn-secondary {
    border: 1px solid #ffffff; /* White border for secondary button */
    background-color: transparent; /* Transparent background for secondary button */
    color: #ffffff; /* White text color for secondary button */
}

.brief-description .buttons .btn:hover {
    background-color: var(--accent-color); /* Change background on hover */
}

.brief-description .buttons .btn.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Adjust background opacity on hover */
}

/* About Us Heading Color Change */
.color-filled {
    color: white !important; /* Filled white color */
    -webkit-text-stroke: 0 !important; /* Remove outline */
}

/* Hover effect to trigger the bounce animation */
.btn.btn-primary:hover ion-icon {
    animation: bounce-vertical 1s infinite;
}

/* Keyframes for the horizontal bounce animation */
@keyframes bounce-horizontal {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(-10px);
    }
    60% {
        transform: translateX(-5px);
    }
}

/* Hover effect to trigger the horizontal bounce animation */
.btn.btn-secondary:hover ion-icon {
    animation: bounce-horizontal 1s infinite;
}

/*************** TEAM *****************/


.team {
    background: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 4em 0; /* Increased top and bottom padding */
}

.team h1 {
    font-size: 8em; /* Increase font size */
    margin-bottom: 0.5em; /* Add space between h1 and paragraphs */
    text-transform: uppercase;
    color: transparent; /* Transparent text */
    -webkit-text-stroke: 3px var(--dim-color); /* Outline with dim color */
    transition: color 0.3s ease, -webkit-text-stroke 0.3s ease, text-stroke 0.3s ease;
}

.color-filled {
    color: white; /* Filled white color */
    -webkit-text-stroke: 0; /* Remove outline */
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 1em; /* Small gap between images */
    max-width: 80%; /* Reduce maximum width */
    margin: 0 auto; /* Center the grid */
    padding: 0 1em; /* Add padding to the sides */
}

.team-member {
    flex-basis: 30%;
    position: relative; /* Needed for overlay */
    overflow: hidden;
}

.team-member img {
    width: 100%;
    height: auto;
    filter: grayscale(100%); /* Make images black and white */
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition */
}

.team-member .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); /* Darker gradient */
    transition: height 0.3s ease; /* Smooth gradient easing up */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; 
    padding: 1em;
}

.team-member .overlay h3 {
    color: white;
    opacity: 0;
    margin: 0.5em 0; /* Reduced margin for tighter spacing */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Text fade-up effect */
    transform: translateY(20px);
    text-transform: uppercase;
}

.team-member .overlay p {
    color: white;
    opacity: 0;
    margin: 0;
    font-size: 0.8em; /* Smaller text for position */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Text fade-up effect */
    transform: translateY(20px);
}

.team-member:hover img {
    filter: grayscale(0%); /* Remove grayscale on hover */
    transform: scale(1.05); /* Slight zoom on hover */
}

.team-member:hover .overlay {
    height: 30%; /* Reveal the overlay, covering the lower part */
}

.team-member:hover .overlay h3,
.team-member:hover .overlay p {
    opacity: 1;
    transform: translateY(0);
}


/*******************************************/

.quotes {
    background-color: var(--primary-color); /* Adjust to your theme */
    color: var(--secondary-color); /* Adjust to your theme */
    min-height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
}

.quote-content {
    display: flex;
    flex-direction: row; /* Row layout: text on left, image on right */
    justify-content: space-around; /* Space evenly between text and image */
    align-items: center; /* Center items vertically */
    max-width: 1200px; /* Maximum width of content */
    width: 100%; /* Full width */
    margin: 0 auto; /* Center align */
}

.quote-text {
    text-align: left; /* Align text left */
    max-width: 50%; /* Take up to half of the quote-content width */
    padding-right: 2em; /* Add space between text and image */
}

.quote-text p {
    font-size: 1.5em; /* Adjust font size */
    line-height: 1.6; /* Adjust line height */
    margin-bottom: 1em; /* Space between paragraphs */
}

.quote-image {
    max-width: 50%; /* Take up to half of the quote-content width */
}

.quote-image img {
    width: 100%; /* Make sure image fills its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    border-radius: 10px; /* Rounded corners */
}

.quote-author {
    display: flex;
    align-items: center; /* Center items vertically */
    margin-top: 1em; /* Space above author info */
}

.author-image {
    width: 50px; /* Adjust image width */
    height: 50px; /* Adjust image height */
    border-radius: 50%; /* Make image round */
    overflow: hidden; /* Hide overflow if image is larger */
    margin-right: 1em; /* Space between image and text */
}

.author-image img {
    width: 100%; /* Make sure image fills its container */
    height: 100%; /* Maintain aspect ratio */
    object-fit: cover; /* Cover image within its container */
}

.author-info {
    text-align: left; /* Align text left */
}

.author-info p {
    margin: 0; /* Remove default margin */
    font-size: 0.8em; /* Adjust font size */
    line-height: 1.4; /* Adjust line height */
}



/********************************************/


.connect {
    background-color: var(--primary-color); /* Adjust to your theme */
    color: var(--secondary-color); /* Adjust to your theme */
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.connect-content {
    max-width: 1200px; /* Adjust as needed */
}

.connect h1 {
    font-size: 7em; /* Increase font size */
    margin-bottom: 0.5em; /* Add space between h1 and paragraphs */
    text-transform: uppercase;
    color: transparent; /* Transparent text */
    -webkit-text-stroke: 3px var(--dim-color); /* Outline with dim color */
    transition: color 0.3s ease, -webkit-text-stroke 0.3s ease, text-stroke 0.3s ease;
    line-height: 1; /* Ensure single line height */
}

.lets-talk {
    display: block; /* Display as block to occupy full width */
    font-size: 7em; /* Double the font size for a tag */
    text-decoration: none;
    text-transform: uppercase;
    color: var(--accent-color); /* Adjust to your theme */
    position: relative; /* Relative positioning for arrow */
    margin-top: 0.5em; /* Adjust top margin as needed */
}

.lets-talk ion-icon {
    margin-left: 0.3em; /* Space between text and arrow */
    font-size: 2em; /* Adjust icon size */
    vertical-align: middle; /* Align icon vertically */
}

.lets-talk:hover ion-icon {
    animation: bounce-horizontal 1s infinite;
}


.lets-talk::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    background-color: var(--accent-color); /* Underline color */
    transition: width 0.3s ease; /* Smooth transition for underline */
}

.lets-talk:hover::after {
    width: 100%; /* Full width on hover */
}

.color-filled {
    color: white; /* Filled white color */
    -webkit-text-stroke: 0; /* Remove outline */
}


/********************** FOOTER ******************************/

footer{
    width: 100%;
    position: relative;
    color: #ffffff;
    padding: 100px 0 30px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    font-size: 16px;
    line-height: 20px;
    background-color: #000000;
    font-family: "Montserrat";
    
}

.footer-row{
    width: 85%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-col{
    flex-basis: 25%;
    padding: 10PX;
}

.footer-col:nth-child(2), .col:nth-child(3){
    flex-basis: 15%;
}

.footer-logo{
    width: 150px;
    margin-bottom: 30px;
}

.footer-col h3{
    width: fit-content;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 10px; 
    color: #ffffff;
    font-weight: 700;
}

.footer-col h3::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px; /* Adjust the thickness of the line */
    background-color: #ffffff;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 1.5px;
}

.email-id{
    width: fit-content;
    border-bottom: 1px solid #ccc;
    margin: 20px 0;
}

ul li{
    list-style: none;
    margin-bottom: 12px;
}

ul li a{
    text-decoration: none;
    color: #fff;
}

form{
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
}
/* icon*/

form ion-icon{
    font-size: 20px;
    margin-right: 10px;
}

form input{
    width: 100%;
    background: transparent;
    color: #ccc;
    border: 0;
    outline: none;
}

form button{
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}

form button ion-icon{
    font-size: 20px;
    color: #ccc;
}

.social-icons ion-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #000;
    background: #fff;
    margin-right: 15px;
    cursor: pointer;
}

.footer-hr{
    width: 90%;
    border: 0;
    border-bottom: 1px solid #ccc;
    margin: 20px auto;
}

.copyright{
    text-align: center;
}

/************************************************************/

@media (max-width: 1200px){
    .large-text {
        font-size: 7rem; /* Adjust font size for tablet */
        margin: 0 30px; /* Adjust spacing for tablet */
    }

    .quote-text {
        max-width: 60%; /* Increase text width */
        padding-right: 1em; /* Reduce padding */
    }
    .quote-image {
        max-width: 40%; /* Adjust image width */
    }
}

@media (max-width: 1024px){
    .menu-open::before,
    .menu-close::before {
        content: '';
        display: none;
    }

    .socials span {
        font-size: 14px;
        margin: 0 10px;
    }

    .menu__item {
        text-align: center;
        padding: 0 4vw;
    }

    .menu__item-link {
        font-size: 5vw;
    }

    .menu__item-img {
        height: 8vh;
    }

    .marquee__inner {
        font-size: 5vw;
    }

    .menu__item-link {
        font-size: 70px; /* Increase font size as needed */
        margin-bottom: 20px; /* Add space between each text */
    }
    
    .menu__item {
        margin-bottom: 60px; /* Add space between each menu item */
    }

    .large-text {
        font-size: 4.5rem; /* Adjust font size for tablet */
        margin: 0 30px; /* Adjust spacing for tablet */
    }
    

}

/* Media Query for Tablets */
@media (max-width: 768px) {

    /******************** STORY *************************/
    .large-text {
        font-size: 3rem; /* Adjust font size for tablet */
        margin: 0 30px; /* Adjust spacing for tablet */
    }
    
    .explore-button {
        font-size: 1.25rem;
        padding: 8px 16px;
    }

    /******************** DESCRIPTION *********************/

    .brief-description {
        padding: 1.5em; /* Adjust padding for smaller screens */
    }

    .brief-description .about h1 {
        font-size: 5em; /* Adjust heading font size */
    }

    .brief-description .text p {
        font-size: 1.5em; /* Adjust paragraph text size */
    }

    .brief-description .buttons {
        text-align: center; /* Center align buttons */
        margin-top: 1.5em; /* Adjust top margin */
    }

    .brief-description .buttons .btn {
        width: 100%; /* Full width buttons */
        padding: 0.8em 1.5em; /* Adjust padding */
        font-size: 1em; /* Adjust button font size */
        margin: 0.5em 0; /* Adjust margin between buttons */
        justify-content: center;
    }

    .brief-description .buttons .btn ion-icon {
        font-size: 1em; /* Adjust icon size */
    }
    /******************* TEAM ***************************/

    .team {
        padding: 3em 0; /* Adjust top and bottom padding */
    }

    .team h1 {
        font-size: 5em; /* Adjust font size for tablets */
    }

    .team-grid {
        gap: 0.5em; /* Adjust gap between images */
        padding: 0 0.5em; /* Adjust padding to the sides */
    }

    .team-member {
        flex-basis: 45%; /* Adjust flex-basis for tablets */
    }

    .team-member .overlay h3 {
        font-size: 1.5em; /* Adjust text size for tablets */
    }

    .team-member .overlay p {
        font-size: 0.7em; /* Adjust text size for tablets */
    }
 
    /******************* QUOTE *************************/

    .quotes {
        padding: 1.5em;
    }

    .quote-content {
        flex-direction: column; /* Stack text and image vertically */
        align-items: center; /* Center align items */
        padding-top: 200px;
    }

    .quote-text {
        max-width: 100%; /* Full width */
        padding-right: 0; /* Remove right padding */
        margin-bottom: 2em; /* Space below text */
    }

    .quote-text p {
        font-size: 1.2em; /* Adjust font size for tablets */
    }

    .quote-image {
        max-width: 80%; /* Full width */
    }
    
    /******************** CONNECT **************************/
    
    .connect {
        padding: 1.5em;
    }

    .connect h1 {
        font-size: 4em; /* Adjust font size for tablets */
    }

    .lets-talk {
        font-size: 4em; /* Adjust font size for tablets */
    }

    .lets-talk ion-icon {
        font-size: 1.5em; /* Adjust icon size for tablets */
    }

    /********************* FOOTER ************************/

    footer{
        bottom: unset;
    }

    .footer-logo{
        width: 90px;
        margin-bottom: 30px;
    }

    .footer-col{
        flex-basis: 100%;
       
    }
    
    .footer-col:nth-child(2), .col:nth-child(3){
        flex-basis: 100%;
    }
}

/* Media Query for Mobile Phones */
@media (max-width: 480px) {
    /************ STORY **************/
    .large-text {
        font-size: 3rem; /* Adjust font size for mobile */
        margin: 0 10px; /* Adjust spacing for mobile */
    }
    
    .explore-button {
        font-size: 1rem;
        padding: 6px 12px;
    }

    /************* DESCRIPTION **************/
    .brief-description {
        padding: 1em; /* Adjust padding for smaller screens */
    }

    .brief-description .about h1 {
        font-size: 3.5em; /* Adjust heading font size */
    }

    .brief-description .text p {
        font-size: 1.2em; /* Adjust paragraph text size */
    }

    .brief-description .buttons {
        text-align: center; /* Center align buttons */
        margin-top: 1em; /* Adjust top margin */
    }

    .brief-description .buttons .btn {
        width: 100%; /* Full width buttons */
        padding: 0.6em 1em; /* Adjust padding */
        font-size: 0.9em; /* Adjust button font size */
        margin: 0.5em 0; /* Adjust margin between buttons */
    }

    .brief-description .buttons .btn ion-icon {
        font-size: 0.9em; /* Adjust icon size */
    }

    /******************* TEAM ***************************/

    .team {
        padding: 2em 0; /* Adjust top and bottom padding */
    }

    .team h1 {
        font-size: 3em; /* Adjust font size for mobile phones */
    }

    .team-grid {
        gap: 0.5em; /* Adjust gap between images */
        padding: 0 0.5em; /* Adjust padding to the sides */
    }

    .team-member {
        flex-basis: 100%; /* Adjust flex-basis for mobile phones */
    }

    .team-member .overlay h3 {
        font-size: 1.2em; /* Adjust text size for mobile phones */
    }

    .team-member .overlay p {
        font-size: 0.6em; /* Adjust text size for mobile phones */
    }
    
    /****************** QUOTE **********************/

    .quotes {
        padding: 1em;
    }

    .quote-text p {
        font-size: 1em; /* Adjust font size for mobile phones */
    }

    .quote-author {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
        margin-top: 1.5em; /* Space above author info */
    }

    .author-image {
        width: 40px; /* Adjust image width */
        height: 40px; /* Adjust image height */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 1em; /* Space below image */
    }

    .author-info p {
        font-size: 0.8em; /* Adjust font size for mobile phones */
    }

    /********************* CONNECT ********************/

    .connect {
        padding: 1em;
    }

    .connect h1 {
        font-size: 2.5em; /* Adjust font size for mobile phones */
    }

    .lets-talk {
        font-size: 2.5em; /* Adjust font size for mobile phones */
    }

    .lets-talk ion-icon {
        font-size: 1em; /* Adjust icon size for mobile phones */
    }

}

@media (max-width: 420px){
    .logo img {
        height: 12px; /* Adjusted height for smaller screens */
    }

    .menu-open,
    .menu-close {
        font-size: 0px; /* Hide menu open/close text */
    }

    .menu-icon,
    .close-icon {
        width: 30px; /* Smaller icon size */
        height: 30px; /* Smaller icon size */
    }

    .header {
        margin-top: 60px; /* Adjusted margin top */
    }

    .header-left,
    .header-right {
        width: 100%;
        margin-bottom: 0.5em; /* Reduced margin bottom */
    }

    .header .col {
        width: 80%; /* Adjusted width */
    }

    .header .col:nth-child(2) {
        width: 90%; /* Adjusted width */
    }

    .title-item h1 {
        font-size: 30px; /* Reduced font size */
    }

    .play-wrapper {
        height: 50px; /* Reduced height */
    }

    .text-container {
        font-size: 16px; /* Reduced font size */
    }

    .menu__item-link {
        font-size: 40px; /* Adjusted font size */
        margin-bottom: 15px; /* Reduced margin bottom */
    }

    .menu__item {
        margin-bottom: 40px; /* Reduced margin bottom */
    }

}

@media(max-width: 325px){
    .brief-description .about h1 {
        font-size: 1.8em; /* Adjust heading font size */
    }

    .team h1 {
        font-size: 1.8em; /* Adjust font size for mobile phones */
    }
}