@media only screen and (max-width: 780px)
{
    footer {
        padding-top: 150px;
        background-image: linear-gradient(to bottom, var(--main-gray), white 50%, white);
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
    }
}

@media only screen and (max-width: 780px) and (orientation: portrait)
{
    footer {
        padding-top: 100px;
        background-image: linear-gradient(to bottom, var(--main-gray), white 50%, white);
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
    }

    footer > div
    {
        padding: 15px;
        display: flex;
        justify-content: center;
    }

    .nav img{
        margin-left: -6px;
        margin-right: -4px;
        margin-top: -20px;
    }

    .icon-cc img
    {
        width: 20px;
        padding-left: 0;
    }

    .icon-sn
    {
        display: flex;
        flex-wrap: nowrap;
        order: 2;
        padding: 0;
    }

    .lang
    {
        padding-right: 0;
        margin-right: 0;
        margin-top: 0;
        flex-wrap: nowrap;
    }

    .license,
    .icon-cc
    {
        min-width: 100px;
        padding-left: 40px;
        max-width: 300px;
    }

    h1
    {
        padding-top: 30px;
        padding-left: 0;
        text-align: center;
    }

    #back {
        background-image: url('/img/backMobile.svg');
        left: 3.55vh;
        top: 85vh;
        height: 35px;
        width: 35px;
    }

    .text{
        display: flex;
        flex-direction: column;
        min-width: 280px;
        width: 200px;
        margin-right: 0;
    }
    #Phrases {
        display: flex;
        flex-direction: row;
        padding-right: 0;
        
    }
    #Phrases h3 {
        padding-right: 10px;
        padding-top: 0;
        font-size: small;
    }


    #raw1{
        display: flex;
        flex-direction: column;
    }
    .artist {
        flex-direction: column;
    }

    .artist-photo {
        width: 100%;
    }

    .artist-name {
        text-align: center;
    }
    .artist-bio {
        width: 100%;
    }
    h2{
        padding: 0;
        margin-top: -15px;
    }

    .box
    {
        margin-left: 0;
        border-radius: 0;
        flex-wrap: wrap;
    }

    .bottom img {
        max-width: 330px;
        clip-path: circle(140px at center);
        margin-left: 0;
    }
    
    .bottom1 img{
        clip-path: circle(150px at center);
        max-width: 450px;
        margin-left: 30px;
        width: 100%;
    } 

    #middle p{
        padding-top: 10px;
    }

    .theme-name{
        height: 500px;
        width: 280px;
        margin: 50px auto;
    }

    .bottom{
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 0;
        padding-right: 0;
    }
    #culture h3 {
        display: none;
        position: absolute;
        top: 50%; /* Position the text halfway from the top */
        left: 50%; /* Position the text halfway from the left */
        transform: translate(-50%, -170%); /* Center the text precisely */
        margin: 0; /* Remove default margin */
        color: black; /* Text color */
        padding: 50px; /* Add padding for better readability */

      }

    .image{
        float: top;
    }

    .image img{
        border-radius: 15px 15px 0 0;
        object-fit: cover;
        height: 230px;
        width: 280px;
    }

    .text-titles h2{
        padding-top: 0;
        margin: 3px 0 -6px 34px;
    }

    .text-insitu h3{
        max-width: 330px;
    }

    .text-titles h4{
        margin: 0 0 45px 37px;
    }

    .text-titles p{
        margin-top: -30px;
        width: 220px;
    }

    .read-date{
        margin-top: -100px;
        width: 260px;
    }

    .read-date button{
        margin: 0;
    }

    .read-date-yellow{
        margin-top: -100px;
        width: 260px;
    }

    .read-date-yellow button{
        margin: 0;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    ul:first-child{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        height: 100%;
        justify-content: center;
        background-color: white;
    }

    .title-theme{
        width: 235px;
    }

    ul:first-child > li{
        font-weight: 500;
        position: relative;
        text-transform: capitalize;
        background-position: 50% 50%;
        width: 100%;
        margin: 0% 0;
        display: flex;
        background-size: 270px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 140px;
        margin-top: -15px;
    }


    li.nav-transmission{
        background-image: url('/img/menu-azilal.svg');
        background-repeat: no-repeat;
    }

    li.nav-insitu{
        background-image: url('/img/menu-design.svg');
        background-repeat: no-repeat;
    }

    li.nav-habitat{
        background-image: url('/img/menu-habitat.svg');
        background-repeat: no-repeat;
    }

    a.nav-madrasat{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-twiza{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-agraw{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-igrem{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-artistes{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-habiter{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-souffle{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-ressources{
        font-size: 32px;
        font-weight: 600;
    }
    a.nav-contact{
        font-size: 32px;
        font-weight: 600;
    }
    #desc p {
        padding-left: 0;
        padding-right: 0;
    }
    #desc h2{
        padding-top: 20px;
    }
    #middle img{
        padding-top: 20px;
    }


    a.nav-transmission{
        font-size: 32px;
        font-weight: 600;
    }

    a.nav-insitu{
        font-size: 32px;
        font-weight: 600;
    }

    a.nav-habitat{
        font-size: 32px;
        font-weight: 600;
    }

    a.nav-madrasat-intention{
        font-size: 18px;
    }

    a.nav-madrasat-ressources{
        font-size: 18px;
    }

    a.nav-marrakech-events-themes{
        font-size: 15px;
        font-weight: 300;
    }

    a.nav-marrakech-events-schedule{
        font-size: 15px;
        font-weight: 300;
    }

    a.nav-azilal-madrassatelhayat{
        font-size: 18px;
    }

    a.nav-azilal-room{
        font-size: 18px;
    }

    a.nav-azilal-madrassatelhayat-modules{
        font-size: 15px;
        font-weight: 300;
    }

    a.nav-azilal-madrassatelhayat-schedules{
        font-size: 15px;
        font-weight: 300;
    }

    a.nav-design-marrakech{
        font-size: 18px;
    }

    a.nav-design-azilal{
        font-size: 18px;
    }

    a.nav-habitat-egg{
        font-size: 18px;
    }

    a.nav-habitat-services{
        font-size: 18px;
    }

    .text-titles h2.ar {
        margin: 0 0 -3px 123px;
    }

    .text-titles h4.ar{
        margin: 0 0 75px 167px;
    }

    .text-titles p.ar{
        margin-top: -70px;
        width: 220px;
        text-align: justify;
        margin-left: 25px;
    }

    .read-date-yellow button.ar{
        margin: 0 10px 0 16px;
    }

    .read-date-yellow h4.ar{
        margin: 0 0 0 25px;
    }
}

@media only screen and (max-width: 1200px){
    .box
    {
        flex-wrap: wrap;
    }
}