@media (min-width: 768px) {
    
    .main-nav {
        z-index: 10;
        position: absolute;
        top: 9vw;
        right: 11.5vw;
        width: 30vw;
    }

   .navbar-nav {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
    }

    .nav-item {
        margin: 1.5vw;
    }

    .nav-item:hover{
        color: #FAF6EB;
    }

    .nav-link {
        text-decoration: none;
        font-weight: 500;
    }


    .background-top,
    .background-middle,
    .background-bottom{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        position: relative;
        width: 100;
    }

    .background-top,
    .background-bottom{
        background-image: url('../images/bigscreen/dark-bg.png');
        background-color: #150903;
        z-index: 1;
        padding-bottom: 8vw;
    }

    .background-top{
        border-radius: 0 0 0 22.5vw;
    }

    .background-middle{
        background-image: url('../images/bigscreen/light-bg.png');
        background-color: #F1EBDC;
        z-index: 0;
        padding-top: 22.5vw;
        padding-bottom: 28.5vw;
        margin-top: -22.5vw;
        margin-bottom: -22.5vw;
    }

    .background-bottom{
        border-radius: 0 22.5vw 0 0;
    }
    

    .main-text-container{
        margin-top: 2vw;
        z-index: 10;
        display: flex;
        flex-direction: column;
        text-align: flex-start;
        gap: 5vw;
    }

    .projects-texts-container-start,
    .projects-texts-container-end{
        display: flex;
        flex-direction: column;
        gap: 1.667vw;
    }
    
    .projects-texts-container-start{
        align-items: flex-start;
        justify-content: flex-start; 
    }

    .projects-texts-container-end{
        align-items: flex-end;
        justify-content: flex-end; 
    }

    .project-card-dark,
    .project-card-light{
        border-radius: 8px;
    }


    .project-card-dark,
    .project-card-light:hover{
        background-color: #241A15;
    }

    .project-card-dark:hover,
    .project-card-light{
        background-color: #F1EBDC;
    }

    .project-card-light:hover .browndrapes{
        color: #F1EBDC;
    }

    .project-card-dark:hover .stonebeige {
        color: #5F3413;
    }

    .open-button-dark,
    .open-button-light{
        width: 9.44vw;
        height: 3.33vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
    }

    .open-button-dark{
        background-color: #F1EBDC;
    }
    .open-button-light{
        background-color: #150903;
    }

    .widt{
        padding-left: 4.44vw;
        padding-right: 7.57vw;
        width: 100%;
    }

    .leoo,
    .paw,
    .quickly,
    .arc,
    .re,
    .sercan,
    .smartfit,
    .bacio {
        width: fit-content;
        display: flex;
        gap: 1.67vw;
        align-items: flex-end;
    }

    .leoo,
    .quickly,
    .smartfit,
    .bacio,
    .re {
        margin-left: 0;
        margin-right: auto;
    }

    .paw,
    .arc,
    .sercan {
        margin-right: 0;
        margin-left: auto;
    }

    .leoo,
    .re {
        margin-top: 3vw;
    }

    .paw,
    .quickly,
    .bacio{
        margin-top: 5vw;
    }

    .quickly,
    .sercan{
        flex-direction: column-reverse;
    }

    .quickly{
        align-items: flex-start;
    }

    .re,
    .smartfit{
        flex-direction: row-reverse;
    }

    .arc,
    .smartfit{
        margin-top: -33vw;
    }

    .sercan{
        margin-top: 4vw;
    }

    .leoo-img,
    .re-img,
    .bacio-img {
        width: 66.53vw;
    }

    .paw-img,
    .quickly-img,
    .sercan-img {
        width: 30.56vw;
        height: 30.56vw;
    }

    .arc-img, 
    .smartfit-img {
        width: 33.3333vw;
    }

    .leoo-img img,
    .paw-img img,
    .quickly-img img,
    .arc-img img,
    .re-img img,
    .sercan-img img,
    .smartfit-img img,
    .bacio-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    .leoo-texts,
    .paw-texts,
    .quickly-texts,
    .arc-texts,
    .re-texts,
    .sercan-texts,
    .smartfit-texts,
    .bacio-texts {
        width: 19.79vw;
        height: 9.79vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        gap: 1.25vw;
        border-radius: 8px;
        padding: 0 1.667vw;
    }


    .leoo-texts{
        height: 12.85vw;   
    }

    .paw-texts,
    .quickly-texts,
    .arc-texts,
    .sercan-texts{
        height: 10.35vw;    
    }

    .smartfit-texts,
    .bacio-texts{
        height: 11.67vw;    
    }

    .mobile-exhibition,
    .digital-exhibition{
        margin-top: 6vw;
    }

    .contact-logos{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 2.222vw;
    }

    .logos img{
        width: 4.44vw;
        height: 4.44vw;
    }

    .footer{
        display: flex;
        justify-content: space-between; 
        align-items: center;
        margin-top: 5vw;
        width: 100%;
    }

    .back-to-top{
        background-color: #F1EBDC;
        border-radius: 16px;
        width: 19.86vw;
        height: 3.33vw;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

@media (max-width: 767px) {
    

    .main-nav {
        width: 100%;
        padding-top: 6vw;
        position: relative;
        z-index: 10;
    }

   .navbar-nav {
        list-style: none;
        display: flex;
        flex-direction: row; 
        justify-content: center;
        align-items: center;
        gap: 14.1vw;

    }

    .nav-item:hover{
        color: #FAF6EB;
    }
    

    .background-top,
    .background-middle,
    .background-bottom{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .background-top,
    .background-bottom{
        background-image: url('../images/bigscreen/dark-bg.png');
        background-color: #150903;
        z-index: 1;
        padding-bottom: 15vw;
    }

    .background-top{
        border-radius: 0 0 0 22.5vw;
    }

    .background-middle{
        background-image: url('../images/bigscreen/light-bg.png');
        background-color: #F1EBDC;
        z-index: 0;
        padding-top: 22.5vw;
        padding-bottom: 38.5vw;
        margin-top: -22.5vw;
        margin-bottom: -22.5vw;
    }

    .background-bottom{
        border-radius: 0 22.5vw 0 0;
    }
    
    .background-top::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 18.18vw;
        background-color: #1509037A;
        z-index: 2;
    }

    .main-text-container{
        margin-top: 2vw;
        z-index: 10;
        display: flex;
        flex-direction: column;
        text-align: flex-start;
        gap: 5vw;
    }

    .projects-texts-container-start,
    .projects-texts-container-end{
        display: flex;
        flex-direction: column;
        gap: 3.636vw;
    }
    
    .projects-texts-container-start{
        align-items: flex-start;
        justify-content: flex-start; 
    }

    .projects-texts-container-end{
        align-items: flex-end;
        justify-content: flex-end; 
    }

    .project-card-dark,
    .project-card-light{
        border-radius: 8px;
    }


    .project-card-dark,
    .project-card-light:hover{
        background-color: #241A15;
    }

    .project-card-dark:hover,
    .project-card-light{
        background-color: #F1EBDC;
    }

    .project-card-light:hover .browndrapes{
        color: #F1EBDC;
    }

    .project-card-dark:hover .stonebeige {
        color: #5F3413;
    }

    .open-button-dark,
    .open-button-light{
        width: 25.23vw;
        height: 10.91vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
    }

    .open-button-dark{
        background-color: #F1EBDC;
    }
    .open-button-light{
        background-color: #150903;
    }

    .widt{
        padding-left: 6.82vw;
        padding-right: 6.82vw;
        width: 100%;
    }

    .leoo,
    .paw,
    .quickly,
    .arc,
    .re,
    .sercan,
    .smartfit,
    .bacio {
        width: fit-content;
        display: flex;
        gap: 3.636vw;
        align-items: flex-start;
    }

    .leoo,
    .paw,
    .quickly,
    .re,
    .sercan,
    .bacio{
        flex-direction: column-reverse;
    }

    .arc{
        flex-direction: row;
    }

    .smartfit{
        flex-direction: row-reverse;
    }

    .arc,
    .smartfit{
        align-items: flex-end;
    }

    .leoo,
    .re,
    .bacio{
        width: 86.36vw;
    }

    .paw,
    .quickly,
    .sercan{
        width: 73.64vw;
    }

    .leoo,
    .quickly,
    .smartfit,
    .bacio,
    .re {
        margin-left: 0;
        margin-right: auto;
    }

    .paw,
    .arc,
    .sercan {
        margin-right: 0;
        margin-left: auto;
    }

    .leoo,
    .paw,
    .quickly,
    .arc,
    .re,
    .sercan,
    .smartfit,
    .bacio{
        margin-top: 14.54vw;
    }


    .leoo-img img,
    .paw-img img,
    .quickly-img img,
    .arc-img img,
    .re-img img,
    .sercan-img img,
    .smartfit-img img,
    .bacio-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    .leoo-texts,
    .paw-texts,
    .quickly-texts,
    .arc-texts,
    .re-texts,
    .sercan-texts,
    .smartfit-texts,
    .bacio-texts {
        width: 100%;
        height: 15.71vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        gap: 1.25vw;
        border-radius: 8px;
        padding: 1.8vw;
    }

    

    .arc-texts,
    .smartfit-texts{
        width: 30vw;
        height: 35vw;
    }

    .smartfit-texts{
        height: 39.9vw;
    }
    
    .mobile-exhibition,
    .digital-exhibition{
        margin-top: 6vw;
    }

    .contact-logos{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 7.27vw;
    }

    .logos img{
        width: 14.54vw;
        height: 14.54vw;
    }

    .footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20vw;
        gap: 8.18vw;
        width: 100%;
        margin-bottom: 10vw;;
    }

    .back-to-top{
        background-color: #F1EBDC;
        border-radius: 16px;
        width: 43.18vw;
        height: 10.91vw;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer{
        margin-left: -6.82vw;
        margin-right: -6.82vw;
    }

    
}