/* !!! Make response for width 1440,1920, 2560,1920 (check i blisk browser with neew devise set -> desktop) 
for safari need to use .safari-browser */

body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    color: white;
    font-family: "Inter", sans-serif;
}
.header {
    background-image: url('images/home.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
  }

.call-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: #184C7E;
    border-radius: 50%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    
    /*transition: width 0.0001s;
    white-space: nowrap;
    overflow: hidden;*/

}

.language-switch2
{
    display: none;
}
.call-button:hover {
    width: 170px;
    height: auto;
    border-radius: 0;
}

.safari-browser .call-button:hover {
    width: 175px;
}

.call-button:hover a {
    width: 100%;
    height: 100%;
    padding-left: 1.875vw; 
    padding-right: 1.875vw; 
    padding-top: 0.972vw; 
    padding-bottom: 0.972vw;
    text-decoration: none;
}
.call-button:hover a img {
    display: none;
}

.call-button:hover a p {
    display: block;
    text-align: center; 
    margin: 0;
    color: white; 
    font-size: 0.875rem; 
    z-index: 2; 
    font-family: Inter; 
    font-weight: 400; 
    text-decoration: none; 
    letter-spacing: 0.14px; 
    word-wrap: break-word;
}

.nav-link {
    text-align: center;
}

.nav-link-call {
    display: inline-block;
    height: 15px;
}

.nav-link-call p {
    display: none
}
/*color: white !important;
transform: scale(1.05);
transition: transform 0.2s ease-in-out; /* Smooth transition */

.second-section {
    background-image: url('images/some-facts01.png');
    background-size: cover;
    background-position: center;
    height: 60vh;
    margin: 0;
    padding: 0;
    max-width: 100%;
}
.third-section 
{
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
}
.forth-section {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
}
.five-section {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
}
.six-section {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
}
.conect 
{
    max-width: 100%;/* Make sure the header is full width */
    height: 80vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
}
.last 
{
    max-width: 100%;/* Make sure the header is full width */
    height: 70vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: #1B1B1B;
    position: relative;
}
.seven {
    background-image: url('images/Fifth.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    height: 60vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-position: 30% 35%;
    max-width: 100%;
}
.eight {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
}

.exploitation {
    color: black;
    font-family: Inter; 
    font-size: 10px ;
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.30px; 
    word-wrap: break-word;
}

.bold-words {
    color: black !important; 
    font-family: Inter; 
    font-size: 14px;
    font-weight: 900; 
    letter-spacing: 0.42px; 
    word-wrap: break-word;
}

.project-description {
    width: 461px; 
    color: black;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400; 
    line-height: 19.60px; 
    letter-spacing: 0.42px; 
    word-wrap: break-word;
}

.text-overlay,.text-overlay1,.text-overlay2,.text-overlay3 {
    transition: transform 0.5s ease; /* Smooth transition for the text movement */
    position: absolute;
    z-index: 3; /* Above the gradient and image */
    top: 72% ;
    left: 20%;
    transform: translateY(-50%) translateX(0); /* Initial position */
    width: 80%;
    color: #03031D;
    font-size: 48px;
    font-family: Inter;
    font-weight: 700;
    line-height: 67.20px;
    letter-spacing: 1.44px;
    word-wrap: break-word;
}

.image-container:hover + .text-overlay,
.image-container:hover + .text-overlay1,
.image-container:hover + .text-overlay2,
.image-container:hover + .text-overlay3 {
    transform: translateY(-50%) translateX(50%); /* Moves the text to the right */
}

.words {
    color: black;
    font-family: Inter; 
    font-size: 14px;
    font-weight: 500; 
    letter-spacing: 0.42px; 
    word-wrap: break-word;
}

.details-link {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 14px 27px; 
    border: 1px solid #184C7E; 
    color: #184C7E; 
    font-size: 14px; 
    font-family: Inter; 
    font-weight: 700; 
    letter-spacing: 0.14px; 
    text-decoration: none; 
    gap: 10px; 
}

.index-input {
    width: 250px; 
    height: 45px; 
    position: relative
}

.index-button {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 14px 27px; 
    border: 1px solid #184C7E; 
    background-color: transparent; 
    color: #184C7E; font-size: 14px; 
    font-family: Inter; 
    font-weight: 700; 
    letter-spacing: 0.14px; 
    line-height: 19.60px; 
    text-decoration: none; 
    gap: 10px; 
    transition: background-color 0.3s, color 0.3s; 
    cursor: pointer;
}

.safari-specific {
    margin-left: 35.2%; 
    margin-top: 2%; 
    width: 100%; 
    height: 80%;
    position: absolute; 
    top: 100%; 
    left: 0; 
    padding-top: 20px;
}

.last-logo {
    width: 20%;
}

.last-buttons {
    display: flex;
    padding-top: 7%;
    margin: 0px 10%;
    justify-content: space-between;
    padding-top: 6%;
}

.last-buttons {
    display: flex;
    padding-top: 7%;
    margin: 0px 10%;
    justify-content: space-between;
    padding-top: 6%;
}

.last-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 55%;
}

.general {
    text-align: center;
    font-size: 10px;
    font-weight: 500;
}

.general a {
    text-decoration: none; /* Видалення підкреслення */
    color: #CCCCCC; /* Зміна кольору тексту */
}

.general a:hover {
    text-decoration: underline; /* Додавання підкреслення при наведенні, якщо потрібно */
}

.ava-group {
    width: 18%;
    margin-left: 10%;
}

.ava-group p{
    width: 100%;
    font-size: 10px;
    font-weight: 500;
    margin: 35px 0;
}

.last-socmedia {
    width: 33%;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.last-socmedia img {
    max-width: 100%;
}

.last-contact {
    display: flex; 
    justify-content: flex-end; 
    font-size: 14px;
}

.mentions {
    width: 100%; 
    text-align: center; 
    text-transform: uppercase; 
    color: #CCCCCC; 
    font-size: 10px; 
    font-weight: 500; 
    position: absolute; 
    bottom: 0; 
    margin: 2vh 0
}

.conect-title {
    width: 70%; 
    text-align: center; 
    color: #184C7E; 
    font-size: 64px; 
    font-family: KyivType Sans; 
    font-weight: 350; 
    text-transform: uppercase; 
    word-wrap: break-word;
}
.conect-title2 {
    display: none;
}

.index-input1 {
    height: 100% !important;
    width: 100% !important;
}

.index-input2 {
    height: 100% !important;
    width: 100% !important;
}
/*
.ava-development {
   color: #03031D; 
   font-size: 24px; 
   font-family: Inter; 
   font-weight: 400; 
   text-transform: uppercase; 
   line-height: 33.60px; 
   word-wrap: break-word; 
   margin-bottom: 4%;
}*/

.ava-100 {
    font-size: 19px;
}

.ava-dev-title {
    text-transform: uppercase;
    font-size: 24px;
}

.ava-dev-text {
    background-color: transparent;
    color: black;
    font-size: 18px;
}

.one {
    opacity: 0.50; 
    color: #F1EFEE; 
    font-size: 180px; 
    position: absolute; 
    margin-top: 18%; 
    margin-left: 70%;  
    font-family: Inter; 
    font-style: italic; 
    font-weight: 900; 
    text-transform: uppercase;
    letter-spacing: 1.80px; 
    word-wrap: break-word;
}

.about-years-line {
    width: 742.01px; 
    height: 0px; 
    left: 500px; 
    top: 479px; 
    position: absolute; 
    border: 1px #EEF0F1 solid;
}

.about-years-title {
    left: 500px; 
    top: 14px; 
    position: absolute; 
    color: #1B1B1B; 
    font-size: 14px; 
    font-family: Inter; 
    font-weight: 700; 
    text-transform: uppercase; 
    word-wrap: break-word;
}

.year {
    left: 46px;
    top: 14px;
    position: absolute;
    color: #1B1B1B;
    font-size: 20px;
    font-family: Inter;
    font-weight: 900;
    letter-spacing: 0.60px;
    word-wrap: break-word;
}

.get-in-touch-butt-container {
    position: absolute; 
    left: 55%; 
    top: 90%; 
    transform: translate(-50%, -50%);
}

.detail-project-description {
    color: black; 
    font-size: 14px; 
    font-family: Inter; 
    font-weight: 400; 
    line-height: 19.60px; 
    letter-spacing: 0.42px; 
    word-wrap: break-word; 
    margin-top: 4%;
}

.styled-link {
    color: #184C7E;
    font-size: 14px;
    font-family: Inter;
    font-weight: 700;
    letter-spacing: 0.14px;
    background-color: transparent; /* Ensure the background is transparent by default */
    width: 100%; /* Ensure the link covers the entire area of its parent */
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    padding-left: 27px; 
    padding-right: 27px; 
    padding-top: 14px; 
    padding-bottom: 14px; 
    border: 1px #184C7E solid; 
    justify-content: center; 
    align-items: center;
}

.styled-link:hover {
    background-color: #184C7E; /* Background color on hover */
    color: white; /* Text color on hover */
}

.building-name {
    color: #1B1B1B; 
    font-size: 20px; 
    font-family: Inter; 
    font-weight: 600; 
    text-transform: uppercase; 
    line-height: 28px; 
    letter-spacing: 0.20px; 
    word-wrap: break-word;
}

.ava-picture {
    width: 556px; 
    height: 203.50px; 
    position: relative; 
    align-self: center; 
    margin-top: 15%; 
    margin-right: 15%;
}

.trends-top {
    font-size: 10px;
    display: flex; 
    align-items:center; 
    font-weight: 600; 
    margin: 3% 6%;
}
.white-line {
    width: 1.75%; 
    height: 1px; 
    border-bottom: 1px white solid; 
    margin: 0 5px;
}
.trends-intro {
    color: black; 
    font-size: 18px; 
    font-weight: 400; 
    margin-bottom: 2%;
}
.trends-title {
    color: black; 
    font-size: 24px; 
    font-family: Inter; 
    font-weight: 700; 
    letter-spacing: 0.42px; 
    word-wrap:break-word;
}
.trends-description {
    color: black; 
    font-size: 14px; 
    font-weight: 300; 
    margin: 25px 0;
}
.show-on-mobile,.show-on-mobile-flex {
    display: none !important;
}
.search-container {
    display: flex; 
    justify-content: space-between;
    min-width: 0; 
    margin: 0 8.5%; 
    margin-top: 40px;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Base styles for Safari Browser */
.safari-browser body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    font-family: "Inter", sans-serif;
    color: white;
    max-width: 100vw; /* Ensures body doesn't exceed viewport width */
}

/* Sections */
.safari-browser .header,
.safari-browser .second-section,
.safari-browser .third-section,
.safari-browser .forth-section,
.safari-browser .five-section,
.safari-browser .six-section,
.safari-browser .conect,
.safari-browser .last,
.safari-browser .seven,
.safari-browser .eight {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents content from spilling out */
    width: 100%;
    max-width: 100vw; /* Full viewport width */
}

/* Navbar */
.safari-browser .navbar {
    width: 100%;
    height: 14%;
    padding: 20px calc(5vw); /* Responsive padding based on viewport width */
    background: rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4vw; /* Responsive gap based on viewport width */
    position: relative;
    z-index: 2;
}

/* Hover effects and transitions */
.safari-browser .nav-link:hover,
.safari-browser .nav-link:focus,
.safari-browser .button:hover,
.safari-browser .nav-link a:hover {
    color: #ffffff; /* Brighter on hover/focus */ 
    text-decoration: underline; /* Optional: add underline on hover/focus */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

/* Specific Section Styles */
.safari-browser .header {
    background-image: url('images/home.png');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.safari-browser .second-section,
.safari-browser .seven {
    background-size: cover;
    background-position: 30% 50%;
    height: 60vh;
}

/*.safari-browser .third-section .text-overlay {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 3;
    top: 68% !important;
    left: 20%;
    transform: translateY(-50%) translateX(0);
    width: 80%;
    color: #03031D;
    font-size: 48px;
    font-family: Inter;
    font-weight: 700;
    line-height: 67.20px;
    letter-spacing: 1.44px;
    word-wrap: break-word;
}*/

.safari-browser .third-section .image-container:hover + .text-overlay {
    transform: translateY(-50%) translateX(50%); /* Moves the text to the right */
}

.safari-browser .third-section,
.safari-browser .forth-section,
.safari-browser .five-section,
.safari-browser .six-section {
    background-color: white;
    height: 100vh;
}

.safari-browser .forth-section  img.safari-specific,
.safari-browser .five-section img.safari-specific,
.safari-browser .six-section  img.safari-specific {
    margin-left: 35.2%;
    margin-top: 7%;
}

.safari-browser .eight {
    background-color: white;
    height: 115vh;
}
.safari-browser .eight .image-container img {
    height: auto; /* Maintains aspect ratio */
    max-height: 600px; /* Example fixed height; adjust as needed */
    width: auto; /* Adjusts width while maintaining aspect ratio */
    max-width: 100%; /* Ensures the image is not wider than its container */
}
.safari-browser .eight .image-container  
{
    max-height: 600px;
}

.safari-browser .eight .top-structure {
    margin-top: 8% !important;
}
.safari-browser .eight .text-eight {
    top: 19% !important; 
}



.safari-browser .conect {
    background-color: white;
    height: 80vh;
}

.safari-browser .last {
    background-color: #1B1B1B;
    height: 64vh;
}

@media (min-width: 1440px) {
    .second-section,.seven,.fields{
        height: 50vh !important;
    }
    .two {
        margin-left: 65% !important;
    }
    .index-input1,.index-input2,.index-button {
        font-size: 16px !important;
    }
    .index-input {
        height: 50px;
    }
    .fields {
        background-position: 100% 50% !important;
    }
    .last{
        height: 60vh;
    }
}
@media (min-width: 1500px) {
    .header-contacts,.header-build,.header-projects,.header-trends,.header-news,.header-about {
        background-position: 30% 50% !important;
    }
    .nav-gap 
    {
        gap: 40px !important;
    }
    .safari-specific{
        margin-left: 39%;
    }
    .exploitation,.trends-top {
        font-size: 14px;
    }
    .bold-words,.words,.project-description,.details-link,.detail-project-description,.styled-link,.trends-description {
        font-size: 16px;
    }
    .two {
        margin-left: 70% !important;
    }
    .call-button:hover {
        width: 175px;
    }
    .fields {
        background-position: 66% 50% !important;
    }
}
@media (min-width: 1650px) {
    .search-input,.calendar-input {
        font-size: 16px !important;
        height: 60px !important;
    }
    .call-button:hover {
        width: 190px;
    }
    .call-button:hover a p{
        font-size: 0.875rem;
    }
    .nav-link-call {
        height: 15px;
    }
    .nav-gap 
    {
        gap: 80px !important;
    }
    .safari-specific {
        margin-left: 52%;
    }
    .two {
        margin-left: 80% !important;
    }
    .last {
        height: 65vh;
    }
    .building-name {
        font-size: 22px;
    }
    .row-img div img{
        width: 465px !important;
        height: 345px !important;
    }
}
@media (min-width: 1920px) {
    .search-input,.calendar-input {
        font-size: 18px !important;
        height: 80px !important;
    }
    .navbar{
        padding-left: 4.56% !important;
        padding-right: 4.56% !important;
    }
    .call-button {
        width: 40px;
        height: 40px;
    }
    .call-button:hover {
        width: 242px;
    }
    .call-button:hover a p{
        font-size: 1.2rem;
    }
    .second-section,.fields {
        height: 48vh !important;
        background-position: 70% 50% !important;
    }
    .exploitation,.trends-top{
        font-size: 14px;
    }
    .bold-words,.words,.details-link,.detail-project-description,.trends-description {
        font-size: 18px;
    }
    .project-description {
        font-size: 18px;
        width: 600px;
    }
    .two {
        margin-left: 75% !important;
    }
    .safari-specific {
        margin-left: 36%;
        height: 100%;
    }
    .index-input {
        width: 350px; 
        height: 60px;  
    }

    .index-button {
        font-size: 18px;   
    }

    .index-input1,.index-input2 {
        font-size: 18px !important;
        padding-left: 3% !important;
    }

    .seven {
        background-position: 30% 50%;
        height: 50vh;
    }
    .nav-link {
        font-size: 20px !important;
        height: auto;
        height: auto;
    }
    .last {
        height: 55vh;
    }  
    .last-contact {
        font-size: 18px;
    }
    .mentions {
        font-size: 12px;
    }
    .general, .ava-group p {
        font-size: 15px;
    } 
    .second-about {
        height: 60vh !important;
    }
    .about-years-title {
        font-size: 16px !important;
        left: 800px !important;;
    }
    .about-years {
        font-size: 18px !important;
        left: 800px !important;
    }
    .ava-dev-text,.trends-intro {
        font-size: 20px;
    }
    .ava-dev-title,.trends-title {
        font-size: 30px;
    }
    .ava-100 {
        font-size: 22px;
    }
    .get-in-touch-butt {
        padding: 18px 35px !important;
        font-size: 22px !important;
    }
    .one {
        font-size: 230px;
    }
    .about-years-line {
        left: 800px;
    }
    .styled-link {
        padding-top: 22px;
        padding-bottom: 22px;
        font-size: 18px;
    }
    .main-detail {
        height: 100vh;
    }
    .building-name {
        font-size: 24px;
    }
    .row-img div img{
        width: 515px !important;
        height: 435px !important;
    }
    .ava-picture {
        width: 650px;
        height: 205px
    }
}

@media (min-width: 2560px) {
    .search-input,.calendar-input {
        font-size: 24px !important;
        height: 100px !important;
    }
    .fields {
        background-position: 67% 50% !important;
        height: 46vh !important;
    }
    .nav-gap 
    {
        gap: 100px !important;
    }
    .nav-link {
        font-size: 22px !important;
    }
    .lang {
        gap: 30px !important;
    }
    .exploitation,.trends-top {
        font-size: 20px;
    }
    .bold-words,.words,.detail-project-description,.styled-link,.trends-description {
        font-size: 24px;
    }
    .project-description {
        width: 900px;
        line-height: 1.3;
        font-size: 24px;
    }
    .text-overlay,.text-overlay1,.text-overlay2,.text-overlay3 {
        font-size: 80px !important;
    }
    .safari-specific {
        height: 120%;
        margin-left: 22%;
    }
    .call-button {
        width: 50px;
        height: 50px;
    }
    .call-button:hover {
        width: 315px;
    }
    .call-button:hover a p {
        font-size: 1.5rem;
    }
    .details-link {
        font-size: 24px;
        padding: 23px 46px;
    }
    .conect {
        height: 60vh;
    }
    .conect-title {
        font-size: 100px;
    }
    .index-input {
        width: 500px;
        height: 80px;
    }
    .index-input1,.index-input2,.index-button {
        font-size: 28px !important;
    }
    .index-button {
        padding: 28px 46px;
    }
    .two {
        margin-left: 65% !important;
        font-size: 280px !important;
    }
    .general, .ava-group p {
        font-size: 18px;
    }
    .last-contact {
        font-size: 24px;
    }
    .mentions {
        font-size: 16px;
    }
    .about-years-title {
        font-size: 24px !important;
        left: 1000px !important;;
    }
    .about-years {
        width: 1000px !important;
        font-size: 26px !important;
        left: 1000px !important;
        line-height: 1.5 !important;
    }
    .ava-dev-text,.trends-intro {
        font-size: 28px;
    }
    .ava-dev-title,.trends-title {
        font-size: 38px;
    }
    .ava-100 {
        font-size: 30px;
    }
    .get-in-touch-butt {
        padding: 18px 35px !important;
        font-size: 22px !important;
    }
    .one {
        font-size: 300px;
    }
    .about-years-line {
        width: 1000px;
        left: 1000px;
        top: 750px;
    }
    .year {
        font-size: 30px;
    }
    .get-in-touch-butt {
        padding: 24px 44px !important;
        font-size: 28px !important;
    }
    .third-about,.fourth-about,.fifth-about,.six-about,.seven-about,.eight-about,.nine-about,.ten-about {
        height: 41vh !important;
    }
    .eleven-about {
        height: 65vh !important;
    }
    .call-button a img {
        width: 20px;
    }
    .nav-link-call {
        height: 21px;
    }
    .building-name {
        font-size: 30px;
    }
    .detail-project-description {
        line-height: 1.5;
    }
    .row-img div img{
        width: 725px !important;
        height: 655px !important;
    }
    .ava-picture {
        width: 1000px;
        height: 350px;
    }
    .header-contacts,.header-build,.header-projects,.header-trends,.header-news,.header-about {
        background-position: 20% 50% !important;
    }
}
/*Reolution iof screen: MacAir 15.3inch 2880width. MacBook Pro16: 3456, Make for 1920, and make for 2560 width */

/* Projects */
.header-projects {
    background-image: url('images/home-p2.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    max-width: 100%;/* Make sure the header is full width */
    height: 70vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
}
.projects-label {
    position: absolute; 
    border-bottom: 2px solid white; 
    top: 232px; left: 142px; 
    font-weight: 500; 
    font-size: 40px; 
    padding-bottom: 7px; 
    width: 15%; 
    user-select: none; 
    -webkit-user-select: none; 
    cursor: default;
}
.safari-browser .nav-link:hover,
.safari-browser .nav-link:focus,
.safari-browser .button:hover,
.safari-browser .nav-link a:hover {
    color: #ffffff; /* Brighter on hover/focus */ 
    text-decoration: underline; /* Optional: add underline on hover/focus */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

/* Specific Section Styles */
.safari-browser .header-projects {
    background-image: url('images/home-p2.png');
    background-size: cover;
    background-position: center;
    height: 70vh;
}

/* News */
.header-news {
    background-image: url('images/home-n.jpg'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    max-width: 100%;/* Make sure the header is full width */
    height: 70vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
}

.header-trends {
    background-image: url('images/home-tr.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    max-width: 100%;/* Make sure the header is full width */
    height: 70vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */    
}

.trends-container {
    margin: 2% 10%;
}

.search-input {
    width: 35%; 
    height: 45px; 
    border: 1px #EEF0F1 solid; 
    font-size: 14px; 
    font-family: Inter; 
    color: #1B1B1B; 
    opacity: 0.4; 
    box-sizing: border-box;
    background: url('images/search-icon.svg') no-repeat scroll 4% 45%;
    background-size: 4%;
    padding-left: 3.5%;
}

.calendar-input{
    width: 20%; 
    height:45px; 
    font-family: 'Roboto'; 
    font-weight: 400; 
    border: 1px #EEF0F1 solid; 
    opacity: 0.4; 
    padding-left: 4%;
    background: url(images/calendar-icon.png) no-repeat scroll 9% 48%;
    background-size: 5%;
}

.search-input::placeholder {
    color: #1B1B1B;
}

.header-contacts {
    background-image: url('images/home-c.png');
    background-size: cover;
    background-position: center;
    max-width: 100%;
    height: 74vh;
    margin: 0; 
    padding: 0; 
}

#blur.active {
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}

#blur1.active {
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}

#popup {
    position: fixed;
    width: 60%;
    heigth: 30%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 30px rgba(0,0,0,.30);
    background: #FFFFFF;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}

#popup.active {
    top: 40%;
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}

/* building now */
.header-build {
    background-image: url('images/home-b.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    max-width: 100%;/* Make sure the header is full width */
    height: 70vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
  }
.safari-browser .nav-link:hover,
.safari-browser .nav-link:focus,
.safari-browser .button:hover,
.safari-browser .nav-link a:hover {
    color: #ffffff; /* Brighter on hover/focus */ 
    text-decoration: underline; /* Optional: add underline on hover/focus */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

/* Specific Section Styles */
.safari-browser .header-build {
    background-image: url('images/home-b.png');
    background-size: cover;
    background-position: center;
    height: 70vh;
}


/* Abouts US page */
.header-about {
    background-image: url('images/home-about.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    max-width: 100%;/* Make sure the header is full width */
    height: 70vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
  }
  .safari-browser .nav-link:hover,
.safari-browser .nav-link:focus,
.safari-browser .button:hover,
.safari-browser .nav-link a:hover {
    color: #ffffff; /* Brighter on hover/focus */ 
    text-decoration: underline; /* Optional: add underline on hover/focus */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

/* Specific Section Styles */
.safari-browser .header-about {
    background-image: url('images/home-about.png');
    background-size: cover;
    background-position: center;
    height: 70vh;
}

.second-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .second-about {
    background-color: white;
    height: 100vh;
}
.third-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .third-about {
    background-color: white;
    height: 100vh;
}

.fourth-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .fourth-about {
    background-color: white;
    height: 100vh;
}

.fifth-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .fifth-about {
    background-color: white;
    height: 100vh;
}

.six-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .six-about {
    background-color: white;
    height: 100vh;
}

.seven-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .seven-about {
    background-color: white;
    height: 100vh;
}

.eight-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .eight-about {
    background-color: white;
    height: 100vh;
}

.nine-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .nine-about {
    background-color: white;
    height: 100vh;
}

.ten-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 100vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .ten-about {
    background-color: white;
    height: 100vh;
}

.eleven-about {
    max-width: 100%;/* Make sure the header is full width */
    height: 110vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 4% 8%;
}
.safari-browser .eleven-about {
    background-color: white;
    height: 110vh;
}
.fields 
{
    background-image: url('images/Fields\ Way.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    height: 60vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    max-width: 100%;
}

.safari-browser .fields {
    background-position: 63% 50% !important;
}



/* ADetail info page  */
.header-detail {
    background-image: url('office-build/3.png'); /* Path to your image */
    background-size: cover; /* Cover the entire area of the header */
    background-position: center; /* Center the background image */
    max-width: 100%;/* Make sure the header is full width */
    height: 70vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
  }
.safari-browser .nav-link:hover,
.safari-browser .nav-link:focus,
.safari-browser .button:hover,
.safari-browser .nav-link a:hover {
    color: #ffffff; /* Brighter on hover/focus */ 
    text-decoration: underline; /* Optional: add underline on hover/focus */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

/* Specific Section Styles */
.safari-browser .header-detail {
    background-image: url('office-build/3.png');
    background-size: cover;
    background-position: center;
    height: 70vh;
}

.main-detail {
    max-width: 100%;/* Make sure the header is full width */
    height: 110vh; /* Adjust the height to be full viewport height */
    margin: 0; /* Optional: remove margin */
    padding: 0; /* Optional: remove padding */
    background-color: white;
    display: flex; 
    justify-content: center; 
    flex-direction: column;
      margin: 5% 5%;
}
.safari-browser .main-detail {
    background-color: white;
    height: 110vh;
    margin: 5% 5%;
}
.last {
    display: block;
}
.mobile-last {
    display: none !important;
}


/*Responsive for Mobile Devices */
@media  (max-width: 480px) {
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0;
        padding: 0;
        color: white;
        font-family: "Inter", sans-serif;
    }
    /* Make header background white */
    .header {
        background-image: url('images/mobilehome.png') !important;
    }
    .big-logo 
    {
        display: none !important;
    }
    
    .navbar {
        background: white !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        justify-content: space-between !important;
    }
    .header-about .navbar,
    .header-projects .navbar,
    .header-build .navbar,
    .header-news .navbar,
    .header-contacts .navbar,
    .header-detail .navbar,
    .header-trends .navbar {
        height: 23% !important;
    }
    .nav-gap > div > div {
        padding: 5px 10px !important; /* Adjusted padding */
    }

    /* If you also want to adjust the space between these divs themselves */
    .nav-gap > div {
        margin-bottom: 5px !important; /* Reduced bottom margin */
    }
    .nav-gap > div:first-child {
        margin-top: 5% !important; /* Adjust this value as needed */
    }
    .nav-gap > div:last-child {
        margin-bottom: 5% !important; /* Removes extra space after the last item */
    }

    .nav-logo {
        width: 100% !important;
        margin-left: 2% !important;
    }

    .desktop-logo {
        display: none !important;  /* Hide desktop logo */
    }
    .mobile-logo {
        display: block !important; /* Show mobile logo */
    }

   /* Initial state hidden */
    .nav-gap {
        display: none !important;
        flex-direction: column;
        background-color: white;
        position: absolute;
        top: 60px; /* Adjust this based on your header size */
        right: 0;
        width: 100%;
    }

    /* Toggle state */
    .show-menu {
        display: flex !important; /* Show the menu */
    }


    /* Display hamburger menu on the right */
    #hamburger-icon {
        display: flex !important; /* Now visible */
        position: absolute !important;
        right: 4% !important; /* Adjust as needed */
/*        top: 20px !important;*/
        width: 30px;
        height: 25px;
    }

    /* Reposition language switch to be visible and on the left side of the menu */
    .lang {
        position: static; /* Reset any absolute positioning if present */
        display: flex;
        margin-right: auto; /* Push everything else to the right */
        display: none  !important;
    }

    /* Adjust logo size for mobile */
    .navbar a img {
        width: 50% !important; /* Adjust based on your design */
    }
    .nav-link {
        color: #184C7E !important;
    }

    
    /* Additional adjustments for the call button, if it's initially within the header */
    .navbar .call-button {
        display: none; /* Hide the original call button in the navbar */
    }

    .language-switch2
    {
        display: block !important;
        margin-left: -250% !important;
    }



    .second-section {
        background-image: url('images/Second\ block-mobile.png') !important;
        background-size: cover !important; /* Change from cover to contain */
        height: 50vh !important;
        margin: 0;
        padding: 0;
        max-width: 100% !important;
    }
    .safari-browser .second-section {
        height: 47vh !important;
    }

   /* Conect section in index.html*/


   .conect {
        max-width: 100%;/* Make sure the header is full width */
        height: 60vh !important; /* Adjust the height to be full viewport height */
        margin: 0; /* Optional: remove margin */
        margin-top: 20%;
        padding: 0; /* Optional: remove padding */
        background-color: white;
   }
    .conect-title 
    {
        display: none;
    }
    .conect-title2 {
        display: block;
        font-size: 18px;
        width: 70%; 
        text-align: center; 
        color: #184C7E; 
        font-family: KyivType Sans; 
        font-weight: 350; 
        text-transform: uppercase; 
        word-wrap: break-word;
    }
    .index-button {
        padding: 14px 75px !important;  
    }

    /* Seven section in index.html */
    
    .seven {
        background-image: url('images/seven-mobile.png')  !important; /* Path to your image */
        background-size: cover  !important; /* Cover the entire area of the header */
        height: 40vh  !important; /* Adjust the height to be full viewport height */
        margin: 0; /* Optional: remove margin */
        padding: 0; /* Optional: remove padding */
        max-width: 100%  !important;
    }
    .safari-browser .seven {
        height: 37vh !important;
    }

   /* Forth section */
   
   .forth-section {
    height: auto !important; /* Adjust height to fit content */
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: -12% !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .forth-section > div, .forth-section .image-container, .forth-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
      .forth-section {
        height: auto !important; /* Adjust height to fit content */
    }
    .hide-on-mobile {
        display: none !important;
    }
    .show-on-mobile {
        display: block !important;
    }
    .show-on-mobile-flex {
        display: flex !important;
    }
    .safari-specific {
        display: none !important;
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: 0 !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .forth-section > div, .forth-section .image-container, .forth-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
    .forth-section .image-container {
        width: 100% !important; /* Take full width of the screen */
        height: auto !important; /* Height is set to auto to maintain aspect ratio */
        max-height: 300px !important; /* Limit the height if necessary */
        display: flex !important; /* Use flex to center the image */
        justify-content: center !important; /* Center horizontally */
        align-items: center !important; /* Center vertically */
        border: 1px solid black !important; /* Your border */
        overflow: hidden !important; /* Hide overflow */
        margin-top: 20px !important; /* Adjust top margin */
        margin-bottom: 20px !important; /* Adjust bottom margin if needed */
    }

       .forth-section .image-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        margin-top: 20px !important;
        border: 1px solid black !important;
    }


    /* Adjust project description width */
    .forth-section .project-description {
        width: 100% !important;
        padding: 0 0% !important;
        box-sizing: border-box !important;
        margin: 10px auto !important;
        font-size: 14px !important;
    }
    /* Ensure the image itself is responsive */
    .forth-section .image-container img {
        width: auto !important; /* Allow width to be auto so height can dictate size */
        max-width: 100% !important; /* Image can be up to 100% of its container */
        height: 100% !important; /* Image height will fill the container */
        object-fit: contain !important; /* Image will try to fit within the container without cropping */
        position: relative !important; /* Reset positioning if needed */
    } 

    /* Adjust text and link elements for mobile */
    .forth-section .text-overlay1, .forth-section .project-description, .forth-section .bold-words, .forth-section .words, .forth-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
       
    }

    .project-description {
        width: 100% !important; /* Adjust width to be less than 100% of its container */
        margin: 0 auto !important; /* Center it within its container */
        padding: 0 0% !important; /* Add padding on the sides */
        box-sizing: border-box !important; /* Include padding in the width */
        font-size: 14px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .forth-section div[style*="flex-direction: column;"], .forth-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }

    /* Adjust text and link elements for mobile */
    .forth-section .project-description, .forth-section .bold-words, .forth-section .words, .forth-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .forth-section div[style*="flex-direction: column;"], .forth-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }



    /* Five Section !!!! */

       
     .five-section {
        height: auto !important; /* Adjust height to fit content */
    }


    .top-structure1 {
        display: flex !important;
        justify-content: flex-start !important;
        padding-left: 5% !important; /* Add some padding on the left */
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure1 > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: -12% !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .five-section > div, .five-section .image-container, .five-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
      .five-section {
        height: auto !important; /* Adjust height to fit content */
    }
    .hide-on-mobile {
        display: none !important;
    }
    .safari-specific {
        display: none !important;
    }

    .top-structure1 {
        display: flex !important;
        justify-content: flex-start !important;
        margin-left: -12% !important; /* Add some padding on the left */
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure1 > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: 0 !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .five-section > div, .five-section .image-container, .five-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
    .five-section .image-container {
        width: 100% !important; /* Take full width of the screen */
        height: auto !important; /* Height is set to auto to maintain aspect ratio */
        max-height: 300px !important; /* Limit the height if necessary */
        display: flex !important; /* Use flex to center the image */
        justify-content: center !important; /* Center horizontally */
        align-items: center !important; /* Center vertically */
        border: 1px solid black !important; /* Your border */
        overflow: hidden !important; /* Hide overflow */
        margin-top: 20px !important; /* Adjust top margin */
        margin-bottom: 20px !important; /* Adjust bottom margin if needed */
    }

       .five-section .image-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        margin-top: 20px !important;
        border: 1px solid black !important;
    }


    /* Adjust project description width */
    .five-section .project-description {
        width: 100% !important;
        padding: 0 0% !important;
        box-sizing: border-box !important;
        margin: 10px auto !important;
        font-size: 14px !important;
    }
    /* Ensure the image itself is responsive */
    .five-section .image-container img {
        width: auto !important; /* Allow width to be auto so height can dictate size */
        max-width: 100% !important; /* Image can be up to 100% of its container */
        height: 100% !important; /* Image height will fill the container */
        object-fit: contain !important; /* Image will try to fit within the container without cropping */
        position: relative !important; /* Reset positioning if needed */
    } 

    /* Adjust text and link elements for mobile */
    .five-section .project-description, .five-section .bold-words, .five-section .words, .five-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
       
    }

    .project-description {
        width: 100% !important; /* Adjust width to be less than 100% of its container */
        margin: 0 auto !important; /* Center it within its container */
        padding: 0 0% !important; /* Add padding on the sides */
        box-sizing: border-box !important; /* Include padding in the width */
        font-size: 14px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .five-section div[style*="flex-direction: column;"], .five-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }

    /* Adjust text and link elements for mobile */
    .five-section .project-description, .five-section .bold-words, .five-section .words, .five-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .five-section div[style*="flex-direction: column;"], .five-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }



    /* Six Section !!!! */

         
    .six-section {
        height: auto !important; /* Adjust height to fit content */
    }


    .top-structure2 {
        display: flex !important;
        justify-content: flex-start !important;
        padding-left: 5% !important; /* Add some padding on the left */
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure2 > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: -12% !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .six-section > div, .six-section .image-container, .six-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
      .six-section {
        height: 110vh !important; /* Adjust height to fit content */
    }
    .hide-on-mobile {
        display: none !important;
    }
    .safari-specific {
        display: none !important;
    }

    .top-structure2 {
        display: flex !important;
        justify-content: flex-start !important;
        margin-left: -12% !important; /* Add some padding on the left */
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure2 > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: 0 !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .six-section > div, .six-section .image-container, .six-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
    .six-section .image-container {
        width: 100% !important; /* Take full width of the screen */
        height: auto !important; /* Height is set to auto to maintain aspect ratio */
        max-height: 300px !important; /* Limit the height if necessary */
        display: flex !important; /* Use flex to center the image */
        justify-content: center !important; /* Center horizontally */
        align-items: center !important; /* Center vertically */
        border: 1px solid black !important; /* Your border */
        overflow: hidden !important; /* Hide overflow */
        margin-top: 20px !important; /* Adjust top margin */
        margin-bottom: 20px !important; /* Adjust bottom margin if needed */
    }

       .six-section .image-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        margin-top: 20px !important;
        border: 1px solid black !important;
    }


    /* Adjust project description width */
    .six-section .project-description {
        width: 100% !important;
        padding: 0 0% !important;
        box-sizing: border-box !important;
        margin: 10px auto !important;
        font-size: 14px !important;
    }
    /* Ensure the image itself is responsive */
    .six-section .image-container img {
        width: auto !important; /* Allow width to be auto so height can dictate size */
        max-width: 100% !important; /* Image can be up to 100% of its container */
        height: 100% !important; /* Image height will fill the container */
        object-fit: contain !important; /* Image will try to fit within the container without cropping */
        position: relative !important; /* Reset positioning if needed */
    } 

    /* Adjust text and link elements for mobile */
    .six-section .project-description, .six-section .bold-words, .six-section .words, .six-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
       
    }

    /*.six-section .text-overlay1, .six-section .text-overlay1, .six-section .text-overlay1, .eight .text-overlay1 {
        display: none !important;
    }*/

    .project-description {
        width: 100% !important; /* Adjust width to be less than 100% of its container */
        margin: 0 auto !important; /* Center it within its container */
        padding: 0 0% !important; /* Add padding on the sides */
        box-sizing: border-box !important; /* Include padding in the width */
        font-size: 14px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .six-section div[style*="flex-direction: column;"], .six-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }

    /* Adjust text and link elements for mobile */
    .six-section .project-description, .six-section .bold-words, .six-section .words, .six-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .six-section div[style*="flex-direction: column;"], .six-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }


     /* Third Section !!!! */
 
     .third-section {
        height: auto !important; /* Adjust height to fit content */
    }


    .top-structure3 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;/*
        padding-left: 5% !important; /* Add some padding on the left */
        margin-left: 0 !important;
        margin-bottom: 8px;
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure3 > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;/*
        margin-left: -12% !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .third-section > div, .third-section .image-container, .third-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    .hide-on-mobile,.safari-specific {
        display: none !important;
    }
    .exploitation-and-border {
        padding-left: 0 !important;
        padding-top: 0 !important;
    }
    .exploitation-and-border > div {
        align-items: stretch !important;
        flex-direction: column-reverse !important;
    }
    .exploitation-container {
        padding-top: 50px;
        margin-left: -8%;
    }
    .blue-border {
        border-top: 3px #184C7E solid !important;
        width: 35% !important;
    }

    .top-structure3 {
        display: flex !important;
        justify-content: flex-start !important;/*
        margin-left: -12% !important; /* Add some padding on the left */
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure3 > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: 0 !important; /* Remove negative margin to align properly */
    }

    /* Remove any specific positioning to allow natural stacking */
    .third-section > div, .third-section .image-container, .third-section div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
    .third-section .image-container {
        width: 100% !important; /* Take full width of the screen */
        height: auto !important; /* Height is set to auto to maintain aspect ratio */
        max-height: 300px !important; /* Limit the height if necessary */
        display: flex !important; /* Use flex to center the image */
        justify-content: center !important; /* Center horizontally */
        align-items: center !important; /* Center vertically */
        border: 1px solid black !important; /* Your border */
        overflow: hidden !important; /* Hide overflow */
        margin-top: 20px !important; /* Adjust top margin */
        margin-bottom: 20px !important; /* Adjust bottom margin if needed */
    }

       .third-section .image-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        margin-top: 20px !important;
        border: 1px solid black !important;
    }


    /* Adjust project description width */
    .third-section .project-description {
        width: 100% !important;
        padding: 0 0% !important;
        box-sizing: border-box !important;
        margin: 10px auto !important;
        font-size: 14px !important;
    }
    /* Ensure the image itself is responsive */
    .third-section .image-container img {
        width: auto !important; /* Allow width to be auto so height can dictate size */
        max-width: 100% !important; /* Image can be up to 100% of its container */
        height: 100% !important; /* Image height will fill the container */
        object-fit: contain !important; /* Image will try to fit within the container without cropping */
        position: relative !important; /* Reset positioning if needed */
    } 

    /* Adjust text and link elements for mobile */
    .third-section .project-description, .third-section .bold-words, .third-section .words, .third-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
       
    }

    .project-description {
        width: 100% !important; /* Adjust width to be less than 100% of its container */
        margin: 0 auto !important; /* Center it within its container */
        padding: 0 0% !important; /* Add padding on the sides */
        box-sizing: border-box !important; /* Include padding in the width */
        font-size: 14px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .third-section div[style*="flex-direction: column;"], .third-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }

    /* Adjust text and link elements for mobile */
    .third-section .project-description, .third-section .bold-words, .third-section .words, .third-section .details-link {
        text-align: left !important; /* Align text to the left */
        display: block !important;
        margin-top: 20px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .third-section div[style*="flex-direction: column;"], .third-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }

    .two {
        display: none !important;
    }

    .last {
        display: none !important;
    }
    .mobile-last {
        display: block !important;
        max-width: 100%;/* Make sure the header is full width */
        margin: 0; /* Optional: remove margin */
        padding: 0; /* Optional: remove padding */
        background-color: #1B1B1B;
        position: relative;
    }

    /* Eight Section !!!! */ 
    .eight {
        height: auto !important; /* Adjust height to fit content */
    }


    .top-structure {
        display: flex !important;
        justify-content: flex-start !important;
        flex-direction: column;
        margin-left: 0 !important;
        margin-bottom: 8px;
        padding-left: 0 !important;
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .second-blue-border {
        padding-top: 0 !important;
        padding-left: 0 !important;

    }

    .second-blue-border > div {
        justify-content: flex-start !important;
    }

    /* Remove any specific positioning to allow natural stacking */
    .eight > div, .eight .image-container, .eight div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
    .hide-on-mobile {
        display: none !important;
    }
    .safari-specific {
        display: none !important;
    }

    /* This targets the direct child divs within the top-structure div for alignment */
    .top-structure > div {
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding-right: 0 !important;
        margin-left: -7% !important;
    }

    /* Remove any specific positioning to allow natural stacking */
    .eight > div, .eight .image-container, .eight div[style*="left: 57%"] {
/*        position: static !important;*/
        width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-top: 5% !important;
    }

    /* Adjust the image container for mobile */
    .eight .image-container {
        width: 100% !important; /* Take full width of the screen */
        height: auto !important; /* Height is set to auto to maintain aspect ratio */
        max-height: 300px !important; /* Limit the height if necessary */
        display: flex !important; /* Use flex to center the image */
        justify-content: center !important; /* Center horizontally */
        align-items: center !important; /* Center vertically */
        border: 1px solid black !important; /* Your border */
        overflow: hidden !important; /* Hide overflow */
        margin-top: 20px !important; /* Adjust top margin */
        margin-bottom: 20px !important; /* Adjust bottom margin if needed */
    }

       .eight .image-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        margin-top: 20px !important;
        border: 1px solid black !important;
    }


    /* Adjust project description width */
    .eight .project-description {
        width: 100% !important;
        padding: 0 0% !important;
        box-sizing: border-box !important;
        margin: 10px auto !important;
        font-size: 14px !important;
    }
    /* Ensure the image itself is responsive */
    .eight .image-container img {
        width: auto !important; /* Allow width to be auto so height can dictate size */
        max-width: 100% !important; /* Image can be up to 100% of its container */
        height: 100% !important; /* Image height will fill the container */
        object-fit: contain !important; /* Image will try to fit within the container without cropping */
        position: relative !important; /* Reset positioning if needed */
    } 

    /* Adjust text and link elements for mobile */
    /*.eight .text-overlay1, .eight .project-description, .eight .bold-words, .eight .words, .eight .details-link {
        text-align: left !important;
        display: block !important;
        margin-top: 20px !important;
    }*/

    .project-description {
        width: 100% !important; /* Adjust width to be less than 100% of its container */
        margin: 0 auto !important; /* Center it within its container */
        padding: 0 0% !important; /* Add padding on the sides */
        box-sizing: border-box !important; /* Include padding in the width */
        font-size: 14px !important;
    }

    /* Specific adjustments for flex containers to stack elements */
    .third-section div[style*="flex-direction: column;"], .third-section > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }

    /* Specific adjustments for flex containers to stack elements */
    .eight div[style*="flex-direction: column;"], .eight > div[style*="display: flex;"] {
        flex-direction: column !important;
        align-items: flex-start !important; /* Align items to the start (left) */
    }
    .eight > div {
        margin: 8% auto !important;
    }
    .project,.text-eight {
        position: static !important;
    }
    .text-overlay,.text-overlay1,.text-overlay2,.text-overlay3 {
        font-size: 26px !important;
        left: 30% !important;
        width: auto !important;
        transform: none !important;
    }
    .text-overlay {
        top: 32% !important;
    }
    .text-overlay1 {
        top: 24% !important;
    }
    .text-overlay2 {
        top: 26% !important;
    }
    .text-overlay3 {
        top: 25% !important;
    }
    .text-overlay-build {
        top: 27% !important;
    }
    .text-overlay-projects {
        top: 22% !important;
        left: 23% !important;
    }
    .safari-browser .text-overlay3 {
        top: 21% !important;
    }
    .image-container:hover + .text-overlay,
    .image-container:hover + .text-overlay1,
    .image-container:hover + .text-overlay2,
    .image-container:hover + .text-overlay3 {
        transform: none !important;
    }
    .header-about {
        background-position: 16% 50% !important;
    }
    .second-about {
        height: auto !important;
    }
    .ava-dev-text {
        font-size: 14px;
        line-height: 1.3;
    }
    .ava-dev-title {
        font-size: 20px;
    }
    .ava-100 {
        font-size: 15px;
    }
    .one {
        display: none;
    }
    .safari-browser .header-about,
    .safari-browser .header-projects,
    .safari-browser .header-news,
    .safari-browser .header-build,
    .safari-browser .header-detail,
    .safari-browser .header-trends,
    .safari-browser .header-contacts,
    .header-about,.header-projects,.header-news,.header-build,.header-detail,.header-trends,.header-contacts {
        height: 45vh;
    }
    .fields {
        background-image: url('images/fields-mobile.png');
        height: 50vh !important;
    }
    .safari-browser .fields {
        height: 45vh !important;
    }
    .year {
        left: -15px;
        top: -7px;
        font-size: 18px;
        display: flex;
        flex-direction: column;
    }
    .seven-about > div > div.year,
    .eight-about > div > div.year,
    .nine-about > div > div.year {
        top: 14px;
    }
    .about-years {
        width: 95% !important;
        left: 80px !important;
        font-size: 14px !important;
    }
    .about-years-title {
        left: 80px !important;
        font-size: 16px !important;
    }
    .about-years-line {
        display: none;
    }
    .third-about > div > svg,
    .fourth-about > div > svg,
    .fifth-about > div > svg,
    .six-about > div > svg,
    .seven-about > div > svg,
    .eight-about > div > svg,
    .nine-about > div > svg,
    .ten-about > div > svg,
    .eleven-about > div > svg {
        left: -14px !important;
        top: 50px;
    }
    .get-in-touch-butt {
        padding: 18px 42px !important;
        font-size: 22px !important;
        white-space: nowrap;
    }
    .get-in-touch-butt-container {
        top: 96%;
    }
    .header-projects {
        background-position: 12% 50% !important;
    }
    .header-news {
        background-position: 16% 50% !important;
    }/*
    .header-projects .navbar,
    .header-about .navbar,
    .header-projects .navbar,
    .header-news .navbar,
    .header-detail .navbar,
    .header-trends .navbar,
    .header-contacts .navbar,
    .header-build .navbar {
        height: 20% !important;
    }*/
    .search-input {
        width: 100%;
        padding-left: 11.5%;
    }
    .calendar-input {
        width: 100%;
        text-align: center;
        background: url('images/calendar-icon.png') no-repeat scroll 4.5% 48%;
        background-size: 3%;
    }
    .calendar-input::placeholder {
        text-align: center;
    }
    .search-container {
        flex-direction: column;
    }
    .header-build {
        background-position: 16% 50% !important;
    }
    .header-detail {
        background-position: 16% 50% !important;
    }
    .main-detail {
        height: auto !important;
        flex-direction: column-reverse;
        margin-bottom: 20%;
    }
    .row-text {
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .row-main-title,.row-main-text {
        width: 100% !important;
    }
    .row-img {
        flex-direction: column;
        margin: 8% 0;
    }
    .row-img img {
        width: 57% !important;
        height: auto !important;
    }
    .anchor-right {
        display: flex;
        justify-content: flex-end;
    }
    .styled-link {
        font-size: 16px;
    }
    .row-main-title {
        margin-bottom: 5%;
    }
    .header-trends {
        background-position: 16% 50% !important;
    }
    .trends-top {
        margin: 6% 6%;
    }
    .white-line {
        width: 6.75%;
    }
    .trends-intro {
        margin: 7% 0;
        font-size: 16px;
    }
    .trends-paragraph {
        flex-direction: column;
        margin-bottom: 10% !important;
    }
    .trends-paragraph div {
        width: 100% !important;
    }
    .norm-width {
        width: auto !important;
    }
    .trends-pic1 {
        margin-top: 20px !important;
        width: 65% !important;
    }
    .trends-pic2 {
        width: 60% !important;
        margin-top: 2% !important;
    }
    .trends-line {
        margin-bottom: 10% !important;
    }
    .header-contacts {
        background-position: 16% 50%;
    }
    #popup {
        width: 90%;
    }
    #popup > div {
        padding: 30% 5% !important;
    }
    #popup > div > img {
        width: 60% !important;
    }
    .call-button {
        width: 40px;
        height: 40px;
    }
    .call-button a {
        height: 18px;
    }
    .call-button img {
        height: 18px;
    }
    .call-button:hover {
        width: 40px !important;
        height: 40px;
        border-radius: 50%;
    }
    .call-button:hover a {
        width: auto;
        height: 18px;
        padding: 0;
        text-decoration: none;
    }
    .call-button:hover img {
        display: block !important;
    }
    .call-button p {
        display: none !important;
    }
}
@media (max-width: 445px) {
    .safari-browser .second-section {
        height: 40vh !important;
    }
    .safari-browser .seven {
        height: 34vh !important;
    }
    .safari-browser .fields {
        height: 40vh !important;
    }
}
@media (max-width: 410px) {
    .about-years-title,.about-years {
        left: 65px !important;
    }
}
@media (max-width: 400px) {
    .about-years-title,.about-years {
        left: 50px !important;
    }
    .second-section {
        height: 45vh !important;
    }
    .seven{
        height: 35vh !important;
    }
    .fields {
        height: 45vh !important;
    }
}
@media (max-width: 397px) {
    .eleven-about {
        height: 120vh;
    }
    .get-in-touch-butt-container {
        left: 56%;
    }
    .safari-browser .second-section {
        height: 35vh !important;
    }
    .safari-browser .seven {
        height: 32vh !important;
    }
    .safari-browser .fields {
        height: 35vh !important;
    }
}
@media (max-width: 360px) {
    .eleven-about {
        height: 130vh;
    }
    .fields {
        height: 42vh !important;
    }
}
@media (max-width: 350px) {
    .second-section {
        height: 40vh !important;
    }
    .seven {
        height: 30vh !important;
    }
}