@media (min-width: 768px) {
    .main-nav {
        z-index: 10;
        position: absolute;
        top: 0vw;
        left: 3.33vw;
        width: 30vw;
        transform-origin: left top;
        transform:rotate(-90deg) translateX(-100%);

    }

   .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;
    }
    
    .curtain{
        position: absolute;
        right:0;
        top:0;
        max-width:38.95vw;
        z-index: -4;
    }

    .main-text-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 4.5vw;
        margin-left: 13.89vw;
        text-align: left;
        max-width: 65.25vw;
        gap: 0vw;
    }
    .main-text-container p{
        margin-bottom: 0.55vw;
        line-height: 1.2;
    }

    .title{
        margin-bottom:0vw;
        white-space: nowrap;
    }


    .goal-container{
        display: flex;
        gap: 0;
        flex-direction: row;
        height: 7.43vw;
        width: 65vw;
        margin-top: 2vw;
        margin-bottom: 2vw;
    }


    .goal, .goal-text{
        display: flex;
        align-items: center;
        height: 100%;
        padding: 2.5vw;
        justify-content: center;
        box-sizing: border-box;
    }

    .goal {
        background-color: #941B2D;
        border-radius: 32px 0 0 32px;

    }

    .goal-text{
        background-color: #F1EBDC;
        border-radius: 0 32px 32px 0;
    }

    p.goal-text{
        line-height: 1;
    }
   
    .skills{
        display: flex;
        flex-direction: row;
        gap: 2.77vw;
        flex-wrap: nowrap; 
        width: auto;       
    }

    .skills-text-logo{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5vw;
    }

    .kickoff{
        display: flex;
        flex-direction: column;
        width: 90.55vw;
        max-width: 90.55vw;
        align-items: flex-start;
        margin-left: 4.375vw;
        margin-top: 5vw;
    }

    .kickoff p{
        line-height: 1.2;
        margin:0.2vw;
    }

    .kickoff-title{
        margin-bottom: 2.22vw;
    }

    .kickoff-pictures-flex{
        margin-top: 2.22vw;
        display:flex;
        flex-direction: row;
        gap: 2.77vw;
        width: 90.55vw;
    }
    .kickoff-pictures-flex img{
        width: 100%;
        height: auto;
    }

    .kickoff-pictures-grid{
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;  
        grid-template-rows: 1fr 1fr;     
        height: 27.77vw;
        width: 90.55vw;
        margin-top: 2vw;
    }

    .kickoff-quickly{
        width: 90.55vw;
        height:auto;
    }

    .kickoff-paw{
        width: 43.88vw;
        height: auto;
    }
   
    .bacio-kickoff1{
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        margin-right: 3.33vw;
        width: 52.22vw;

    }

     .bacio-kickoff2{
        grid-column: 2 / 4;
        grid-row: 1;
        margin-bottom: 2.778vw;
        width: 35vw;

    }
     .bacio-kickoff3{
        grid-column: 2 / 4;
        grid-row: 2  ;
        width: 35vw;

    }


    .pic1 {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        margin-right: 2.22vw;
        width: 44.44vw;
    }

    .pic2 {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        margin-bottom: 2.778vw;
        width: 43.88vw;
    }

    .pic3 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        margin-right: 2.5vw;
        width: 20.35vw;
    }

    .pic4 {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        width: 20.35vw;

    }
    
    .double-diamond-container{
        margin-top: 5vw;
        margin-left: 4.375vw;
    }

    .double-diamond-flex{
        margin-top: 1.22vw;
        display: flex;
        flex-direction: row;
        gap: 2.77vw;
        justify-content: flex-start;
        flex-wrap: wrap;
    }


    .double-diamond-cards{
        line-height: 1.1;
        display: flex;
        flex-direction: column;
        gap: 1.11vw;
        word-break: break-word;
    }

    .double-diamond-oneline{
        width: 20.55vw;
    }

    .double-diamond-cards img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .double-diamond-cards p{
        margin: 0;
    }


    .double-diamond-cards-multiple{
        display: flex;
        flex-direction: row;
        gap: 1.11vw;
        flex-wrap: wrap;
    }
    
    .double-diamond-cards-multiple img {
        flex: 1 1 auto;     
        min-width: 0;        
        max-width: 100%;
        height: auto;
    }

    .double-diamond-cards-header{
        display: flex;
        flex-direction: column;
    }

    .double-diamond-cards-header p {
        margin: 0;
    }

    .double-diamond-cards em {
        display: block;
        margin-bottom:-0.8vw;
    }

    .double-diamond-cards ul{
        margin:0;
    }

    .double-diamond-cards li{
        margin-bottom: 0.55vw;
        
    }

    .arc-width{
        width: 90.5vw;
        margin: -0.55vw;
    }

    .emphatize-quickly {
        width: 42.01vw;
    }

    .define-quickly{
        width: 46.52vw;
    }
    .ideation-quickly{
        width: 68.61vw;
    }
    .prototype-quickly{
        width: 19.93vw;
    }

    .think-re{
        width: 33.54vw;
    }
    
    .make-check-re{
        width: 53.96vw;
    }

    .benchmark-sercan{
        width: 29.51vw;
    }
    
    .identity-sercan{
        width: 25.625vw;
    }

    .ideation-sercan{
        width: 28.54vw;
    }

    .backlog-smartfit{
        width: 14.44vw;
    }
    .backlog{
        white-space: nowrap;
    }

    .ideate-smartfit{
        width: 24.02vw;
    }

    .iterate-smartfit{
        width: 15.27vw;
    }

    .implement-smartfit{
        width: 28.47vw;
    }


    .arc-process-text{
        margin-bottom: 0.5vw !important;
    }


    .deliverables {
        margin-top: 15vw;
        margin-left: 4.375vw;
        margin-right: auto;
        max-width: 90.555vw;
    }

    .leoo-deliverables{
        margin-top: 10vw;
    }
    
    .deliverables-pictures{
        margin-top: 2.77vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2.77vw;
        row-gap: 2.77vw;
        column-gap: 2.77vw;

    }


    .re-deliverables{
        gap: 3.61vw;
        row-gap: 3.61vw;
        column-gap: 3.61vw;
    }

    

    .img1 {
        width: 51.11vw;
        height: auto;
    }

    .img2 {
        width: 36.60vw;
        height: auto;
    }


    .img3{
        width: 33.056vw;
        height: auto;
    }

    .img4{
        width: 54.51vw;
        height: auto;
    }

    .img5{
        width: 22.01vw;
        height: auto;
    }

    .img6{
        width: 20.07vw;
        height: auto;
    }

    .img7{
        width: 42.64vw;
        height: auto;
    }
    
    .paw-deliverables-pictures {
        margin-top: 2.77vw;
        display: grid;
        grid-template-columns: 45.42vw 42.29vw; 
        grid-template-rows: auto auto;           
        gap: 2.22vw;
        width: 90.55vw;
    }

    .paw-img1 {
        grid-column: 1; 
        grid-row: 1 / span 2; 
        width: 45.42vw;
    }

    .paw-img2 {
        grid-column: 2; 
        grid-row: 1;  
        width: 42.29vw;
    }

    .paw-img3 {
        grid-column: 2;
        grid-row: 2; 
        width: 42.29vw; 
    }

    .quickly-deliverables-pictures {
        margin-top: 2.77vw;
        display: grid;
        grid-template-columns: 40.625vw 47.91vw; 
        grid-template-rows: 34.79vw 84.65vw;           
        gap: 2.77vw;
    }

    .quickly-img1 {
        grid-column: 1; 
        grid-row: 1; 
        width: 40.625vw;
    }

    .quickly-img2 {
        grid-column: 2; 
        grid-row: 1;  
        width: 47.91vw;
    }

    .quickly-img3 {
        grid-column: 1/2;
        grid-row: 2;  
        width: 91.32vw;
    }
    
    .prototype-sercan1{
        width: 68.43vw;
    }

    .prototype-sercan2{
        width: 18.14vw;
    }

    .bacio-delivarble1{
        width: 46.667vw;
    }

    .bacio-delivarble2{
        width: 40.90vw;
    }

    .bacio-delivarble3{
        width: 34.79vw;
    }
    
    .bacio-delivarble4{
        width: 52.43vw;
    }

    .smartfit-deliverable1{
        width: 60.97vw;
    }
    .smartfit-deliverable2{
        width: 26.8vw;
    }
    .smartfit-deliverable3{
        width: 50.625vw;
    }
    .smartfit-deliverable4{
        width: 37.08vw;
    }
    .smartfit-deliverable5{
        width: 34.51vw;
    }
    .smartfit-deliverable6{
        width: 53.056vw;
    }


    .arc-deliverable1{
        width: 27.5vw;
    }

    .arc-deliverable2{
        width: 59.86vw;
    }

    .arc-deliverable3{
        width: 56.31vw;
    }

    .arc-deliverable4{
        width: 31.46vw;
    }
    
    .link-figma{
        margin-top: 4.44vw;
        display: flex;
        align-items: center;
        justify-self: center;
    }

    .link-website{
        margin-top: 1vw;
        display: flex;
        align-items: center;
        justify-self: center;
        text-decoration: underline;
        text-decoration-color: #FAF6EB;
    }

    .open-button-light{
        width: 13.47vw;
        height: 3.33vw;
        display: flex;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        background-color: #F1EBDC;
        border-style:solid;
        border-color:#150903;
        border-radius: 16px;
    }


    .open-button-light:hover{
        background-color: #150903;
        color: #F1EBDC;
        border-color: #F1EBDC;
        cursor: pointer;
    }

    .similar {
        margin-top: 5.55vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.77vw;
}
    
    
    .swiper {
        width: 100%;
        overflow: visible;
    }

    
    .swiper-slide { 
        display: flex;
        justify-content: center;
        align-items: center;
        
        
    }
    
    .swiper-slide a {
        pointer-events: none;
        }

    .swiper-slide.swiper-slide-active a {
        pointer-events: auto;
    }
    
    
    .project-frame img{
        width: 66.53vw;
    }
   


    .footer{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        margin-top: 5.55vw;
        gap: 2.77vw;
    }

    .back-to-top{
        background-color: #F1EBDC;
        border-color:#150903;
        border-width: 1px;
        border-style: solid;
        border-radius: 16px;
        width: 19.86vw;
        height: 3.33vw;
        white-space: nowrap;
        padding: 0.55vw 2.77vw;
    }

    .contact-logos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2.22vw
    }


}

@media (max-width: 767px){

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

    .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-nav {
        width: 100%;
        margin-top: 6vw;
        position: relative; 
        z-index: 3; 
    }

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

    }

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

    .curtain{
        position: absolute;
        right:0;
        top:0;
        max-height: 81.81vw;
        z-index: -4;
    }

    .main-text-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 8.63vw;
        margin-left: 7.27vw;
        text-align: left;
        max-width: 74.54vw;
        gap: 0vw;
    }
    
    .main-text-container p{
        margin-bottom: 3vw;
        width: 68.18vw;
    }

    .title{
        margin-bottom: 5vw;
    }


    .goal-container{
        display: flex;
        gap: 0;
        flex-direction: column;
        width: 86.36vw;
        margin-top: 8vw;
        margin-bottom: 2vw;
    }


    .goal, .goal-text{
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .goal {
        background-color: #941B2D;
        border-radius: 32px 32px 0 0 ;
        height: 14.54vw;

    }

    .goal-text{
        background-color: #F1EBDC;
        border-radius: 0 0 32px 32px;
        padding: 10.45vw;
        padding-top: 5vw;
        padding-bottom: 7.5vw;
    }

    .goal-container p{
        width: 86.36vw;
    }

   
    .skills{
        display: flex;
        flex-direction: row;
        gap: 9.09vw;
        flex-wrap: nowrap; 
        width: auto;       
        margin-top: 3vw;
    }

    .skills-text-logo{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.81vw;
        width: 18.18vw;
    }

    .skills-text-logo p{
        width: auto;
    }

    .skills-text-logo img{
        width: 18.18vw;
    }

    
    .kickoff{
        display: flex;
        flex-direction: column;
        width: 90.55vw;
        max-width: 90.55vw;
        align-items: flex-start;
        padding-left: 8.18vw;
        margin-top: 15vw;
    }


    .kickoff-title{
        margin-bottom: 2.22vw;
    }

    .kickoff-pictures-flex{
        margin-top: 2.22vw;
        display:flex;
        flex-direction: row;
        gap: 9.09vw;
        width: 86.36vw;
        flex-wrap: wrap;
    }

    .kickoff-pictures-flex img{
        width: 100%;
        height: auto;
    }

    .kickoff-pictures-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;  
        gap: 9.09vw;
        width: 86.36vw;
        margin-top: 2vw;
    }

    .full-width {
        grid-column: 1 / 3;
    }
    .half-width {
        grid-column: span 1;
    }

    .kickoff-pictures-grid img{
        width: 100%;
        height: auto;
    }

    .leoo-kickoff-gap{
        gap:5.45vw
    }
    
    .double-diamond-container{
        margin-top: 18.18vw;
        padding-left: 8.18vw;
        
    }

    .double-diamond-flex{
        margin-top: 1.22vw;
        display: flex;
        flex-direction: row;
        gap: 9.09vw;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 86.36vw;
    }


    .double-diamond-cards{
        display: flex;
        flex-direction: column;
        gap: 3.636vw;
        word-break: break-word;
    }

    .double-diamond-oneline{
        width: 86.36vw;
    }

    .double-diamond-cards img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .double-diamond-cards p{
        margin: 0;
    }

    .double-diamond-cards-multiple{
        display: flex;
        flex-direction: row;
        gap: 3.636vw;
        flex-wrap: wrap;
        width: 86.36vw;
    }
    
    .double-diamond-cards-multiple img {
        flex: 1 1 auto;     
        min-width: 0;        
        max-width: 100%;
        height: auto;
    }

    .emphatize-quickly .double-diamond-cards-multiple{
        flex-wrap: nowrap;
    }

    .ideation-sercan .double-diamond-cards-multiple{
        flex-wrap: nowrap;
    }
    
    .ideation-quickly .double-diamond-cards-multiple {
        flex-wrap: wrap;
    }

    .full-width-multiple{
        width: 100%;
    }
    
    .half-width-multiple{
        width: 40.9vw;
    }

    .double-diamond-cards-header{
        display: flex;
        flex-direction: column;
    }

    .double-diamond-cards-header p {
        margin: 0;
    }


    .double-diamond-cards ul{
        margin:0;
    }

    .double-diamond-cards li{
        margin-bottom: 0
        
    }

    .deliverables {
        margin-top: 15vw;
        padding-left: 6.818vw;
        width: 93.18vw;
    }


    .deliverables-pictures{
        margin-top: 7.27vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 9.09vw;
        margin-bottom: 15vw;
    }

    .deliverables img{
        width: 100%;
    }

    .deliverables .img5{
        width: 43.86vw;
    }

    .deliverables .img6{
        width: 33.41vw;
    }

    .leoo-deliverables-gap{
        gap: 7.27vw;
    }

    .paw-deliverables-pictures,
    .quickly-deliverables-pictures{
        margin-top: 7.27vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 7.27vw;
        margin-bottom: 15vw;
    }

    figcaption{
        margin-top:1.81vw;
        margin-bottom: -5vw;
    }

    .open-button-light{
        width: 36.14vw;
        height: 10.91vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F1EBDC;
        border-radius: 16px;
    }
    
    .link-figma{
        margin-top: 4.44vw;
        display: flex;
        align-items: center;
        justify-self: center;
    }

    .link-website{
        margin-top: 5vw;
        display: flex;
        align-items: center;
        justify-self: center;
        text-decoration: underline;
        text-decoration-color: #FAF6EB;
    }

    .similar {
        margin-top: 5.55vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.77vw;
    }
    
    
    .swiper {
        width: 100vw;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 5.45vw;
    } 


    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1vw;
    }
    
    .swiper-slide a {
        pointer-events: none;
    }

    .swiper-slide.swiper-slide-active a {
        pointer-events: auto;
    }

    .project-frame img{
        width: 73.64vw;
    }

    .swiper-pagination {
        width: clamp(8px, 1.81vw, 14px);
        height: clamp(8px, 1.81vw, 14px);
        position: relative;
        display: flex;
        gap: 1.818vw;
        justify-content: center;
        align-items: center;
        
    }
    
    .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
        background-color: #5F3413;
    }

    .swiper-pagination-bullet-active {
        background-color: #F1EBDC;
    }
   
    .footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 5.55vw;
        gap: 8.18vw;
    }

    .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;
    }

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

    .contact-logos img{
        width: 14.55vw;
        height: 14.55vw;
    }


}