@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.intro {
    width: 100%;
    height: 300vh;
}
.nav {
    background: #192338;
    width: 100%;
    height: 6.5%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    
    .logo {
        position: absolute;
        left: 0;
        top: 0px;
        background-image: linear-gradient(
            135deg,
            #083879,
            #0966c4 35%,
            #0966c4 65%,
            #083879
        );
        width: 10%;
        height: 100%;
        img {
            width: 35%;
            position: absolute;
            left: 50%;
            filter: brightness(10);
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    ul {
        display: flex;
        gap: 10px;
        position: absolute;
        left: 15%;
        top: 50%;
        transform: translateY(-50%);
        li {
            list-style: none;
            display: flex;
            gap: 10px;
            p {
                font-size: 11px;
                color: white;
                font-family: 'Poppins';
                font-weight: 300;
            }
        }
    }
    .btn {
        width: 100px;
        height: 100%;
        background-image: linear-gradient(
            135deg,
            #083879,
            #0966c4 35%,
            #0966c4 65%,
            #083879
        );
        border: none;
        position: absolute;
        left: 90%;
        color: whitesmoke;
        font-size: 14px;
        font-weight: 400;
        font-family: 'Poppins';
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    main {
        position: absolute;
        left: 70%;
        top: 50%;
        transform: translateY(-50%);
        p {
            color: whitesmoke;
            font-size: 12px;
            font-family: 'Poppins';
            font-weight: 300;
            text-transform: capitalize;
        }
        ul {
            display: flex;
            gap: 10px;
            position: absolute;
            left: 110%;
            svg {
                fill: whitesmoke;
            }
        }
    }
}
.introduction {
    width: 100%;
    height: 65vh;
    background: linear-gradient(
        125deg,
        rgba(240, 161, 161, 0.418),
        rgba(183, 228, 235, 0.562),
        rgba(245, 245, 245, 0)
    );
    h1 {
        position: absolute;
        top: 11%;
        left: 5%;
        font-weight: 700;
        font-family: 'Poppins', 'Segoe UI';
        font-size: 5vw;
    }
    .items {
        width: 90%;
        height: 60%;
        position: absolute;
        left: 5%;
        top: 40%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border: none;
        gap: 5%;
        .item, .itemi, .itemis {
            width: 25%;
            height: 30%;
            box-shadow: 1.5px 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.26);
            border: none;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            p {
                position: relative;
                right: 10px;
                display: flex;
                justify-content: flex-end;
                width: 70%;
                font-size: 12px;
                font-family: 'Montserrat', 'Segoe UI';
                font-weight: 400;
            }
        }
        .item, .itemi, .itemis {
            .ban, .bani, .banis {
                width: 40px;
                height: 40px;
                background-color: #6eb3f749;
                border-radius: 5px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%) translateX(-400%);
                display: flex;
                align-items: center;
                justify-content: center;
            }  
        }
        .item:hover, .itemi:hover, .itemis:hover {
            box-shadow: 0.2px 0.2px 0.5px 0.5px rgba(0, 0, 0, 0.26);
        }
    }
    .banner {
        width: 90%;
        height: 10%;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        border: none;
        border-radius: 15px;
        background-image: linear-gradient(
            125deg,
            #083879,
            #0966c4 35%,
            #0966c4 65%,
            #083879
        );
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-family: 'Montserrat';
            font-weight: 400;
            font-size: 16px;
            color: whitesmoke;
        }
    }
}
.list {
    width: 100%;
    position: relative;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    justify-content: center;
    align-items: center;

    gap: 40px;
    .card {
        width: 370px;
        height: 650px;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        background: rgba(187, 238, 245, 0.5);
        .image {
            width: 97%;
            height: 70%;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 5px;
            overflow: hidden;
            border-radius: 20px;
            z-index: 1;
            .img {
                width: 100%;
                height: 100%;
                border-radius: 20px;
                overflow: hidden;
                z-index: -1;
                transition: all 500ms ease;
            }
            .anglofranco {
                display: flex;
                flex-direction: row;
                gap: 5px;
                position: absolute;
                top: 2%;
                left: 10px;
                z-index: 1;
                background-color: rgb(233, 183, 18);
                padding: .3em .5em;
                border-radius: 50px;
                p {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    font-weight: 400;
                    font-family: sans-serif;
                }
                svg {
                    fill: #383737;
                    stroke: #383737;
                }
            }
            .like {
                width: 40px;
                height: 40px;
                position: absolute;
                top: 2%;
                right: 30px; 
                border-radius: 50%;
                border: none;
                background: #00000070;
                backdrop-filter: blur(10px);
                svg {
                    fill: whitesmoke;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translateX(-50%) translateY(-50%);
                }
            }
            figure {
                position: absolute;
                top: 85%;
                left: 10px;
                display: flex;
                flex-direction: row;
                gap: 10px;
                figcaption {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 20px;
                    font-family: sans-serif;
                    font-size: 2em;
                    font-weight: 700;
                    text-transform: capitalize;
                    color: whitesmoke;
                    z-index: 1;
                    -webkit-text-stroke-width: 0.5px;
                    -webkit-text-stroke-color: rgba(126, 122, 122, 0.658);
                    img {
                        height: 54px;
                        width: 54px;
                    }
                }
            }
        }
        .img:hover {
            transform: scale(1.8) rotate(-5deg);
            transition: transform 500ms ease;
        }
        .content {
            width: 100%;
            height: 30%;
            position: relative;
            .location {
                .intro {
                    display: flex;
                    gap: 15px;
                    position: relative;
                    top: 5px;
                    font-family: 'Segoe UI';

                    font-weight: 400;
                    font-size: 12px;
                    p {
                        span {
                            font-size: 13px;
                            text-transform: capitalize;
                            font-weight: bolder;
                        }
                    }
                    svg {
                        position: relative;
                        left: 5px;
                    }
                }
                .ratings {
                    display: flex;
                    gap: 10px;
                    position: absolute;
                    right: 10px;
                    top: 5px;
                    img {
                        width: 20px;
                        height: 20px;
                    }
                    p {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-family: 'Poppins';
                    }
                }
            }
        }
        .matiere {
            position: absolute;
            top: 22.5px;
            left: 5px;
            font-family: 'Segoe UI';
            font-size: 12px;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            span {
                font-size: 13px;
                font-weight: bolder;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                text-transform: capitalize;
            }
            img {
                width: 20px;
                height: 20px;
            }
        }
        .university {
            position: absolute;
            top: 45px;
            left: 5px;
            font-size: 0.9em;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-weight: 700;
            img {
                width: 20px;
                height: 20px;
            }
        }
        .description {
            position: absolute;
            font-family: 'Segoe UI';
            font-size: 12px;
            top: 45%;
            left: 10px;
            transform: translateY(-50%);
        }
        .btn  {
            position: absolute;
            top: 62%;
            display: flex;
            justify-content: space-around;
            width: 100%;
            gap: 50%;
            .disponible {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 12px;
                width: 90px;
                height: 30px;
                border-radius: 50px;
                background-color: rgba(0, 128, 0, 0.644);
                color: whitesmoke;
                display: flex;
                justify-content: center;
                align-items: center;
                text-transform: capitalize;
                p {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            .indisponible {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 12px;
                width: 90px;
                height: 30px;
                border-radius: 50px;
                background-color: rgba(219, 19, 19, 0.703);
                color: whitesmoke;
                display: flex;
                justify-content: center;
                align-items: center;
                text-transform: capitalize;
                padding: 5px;
                p {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            #btn {
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 14px;
                font-weight: 400;
                color: white;
                border-radius: 10px;
                width: 120px;
                height: 30px;
                background-image: linear-gradient(         
                    125deg,
                    #083879,
                    #0966c4 35%,
                    #0966c4 65%,
                    #083879
                );
                border: 1px solid #0966c4;
                transition: all 500ms cubic-bezier(0.6, -1.28, 0.735, 0.145);
            }
            #btn:hover {
                background-image: none;
                color: #0966c4;
                scale: 1.1;
                transition: all 500ms cubic-bezier(0.6, -1.28, 0.735, 0.145);
            }

        }
        .price {
            position: absolute;
            top: 85%;
            left: 10%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 400;
            span {
                transform: translateX(10px);
                font-size: 12px;
                text-decoration: line-through;
                color: gray;
            }
        }
    }
}
@media screen and (min-height: 480px) and (max-width: 650px) {
    .introduction {
        .items {
            .item, .itemi, .itemis {
                height: 100%;
            }
        }
    }
}
@media screen and (max-width: 1024px) and (min-width: 650px) {
    .introduction {
        height: 45vh;
        .items {
            margin-top: -15%;
            .item, .itemi, .itemis {
                width: 30%;
                height: 20%;
            }
        }
        .banner {
            top: 45%;
            height: 8%;
        }
    }
    .list {
        width: 98%;
        display: grid;
        place-items: center;
    }
}
@media screen and (min-height: 1200px) and (max-width: 1024px) {
    .introduction {
        .items {
            margin-top: -20%;
        }
    }
}
@media screen and (max-width: 650px) {
    .nav {
        ul {
            li.none{
                display: none;
            }
        }
        main {
            position: absolute;
            left: 40%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        li {
            left: 5%;
        }
        .btn {
            position: absolute;
            left: 75%;
        }
    }
    .introduction {
        .items {
            display: flex;
            flex-direction: column;
            position: relative;
            left: -10px;
            position: absolute;
            top: 55%;
            transform: translateY(-50%);
            width: 100%;
            .item, .itemi, .itemis {
                width: 70%;
                height: 62px;
                p {
                    font-size: 11px;
                }
            }
            .item {
                position: relative;
                width: 70%;
                height: 60px;
                .ban {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
            }
            .itemi {
                position: relative;
                width: 70%;
                height: 62px;
                .bani {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
            }
            .itemis {
                position: relative;
                width: 70%;
                height: 62px;
                .banis {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
            }
        }
        .banner {
            top: 60%;
            font-size: 10px;
            width: 90%;
            height: 60px;
            p {
                width: 90%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .list {
        width: 90%;
        .left {
            .heads {
                font-size: 1em;
            }
        }
        .card {
            width: 98%;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
@media screen and (max-width: 360px) {
    .introduction {
        .items {
            margin-top: -10%;
        }
        width: 100%;
        .banner {
            p {
                font-size: 12px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                top: 50%;
                width: 85%;
            }
        }
    }
}
@media screen and (max-width: 320px) {
    .introduction {
        width: 100%;
        .items {
            margin-top: -10%;
            .item, .itemi, .itemis {
                position: relative;
                p {
                    font-size: 11px;
                }
            }
        }
    }
} 
@media screen and (max-height: 533px) and (max-width: 320px) {
    .introduction {
        .items {

            .item, .itemi, .itemis {
                position: relative;
                left: -10px;
            }
        }
        .banner {
            position: absolute;
            top: 62.5%;
        }
    }
} 

@media screen and (min-width: 1024px) {
    .nav {
        .btn {
            margin-left: 1%;
        }
    }
    .introduction {
        h1 {
            font-size: 2.85em;
        }
        .items {
            .item, .itemi, .itemis {
                width: 30%;
                height: 20%;
            }
            .item {
                position: relative;
                .ban {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
            }
            .itemi {
                position: relative;
                .bani {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
            }
            .itemis {
                position: relative;
                .banis {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
            }
        }
        .banner {
            height: 60px;
            p {
                font-size: 1em;
            }
        }
        
    }
    .list {
        width: 100%;
        display: grid;
        place-items: center;
        .card {
            width: 350px;
        }
    }
}
@media screen and (max-height: 500px)   {
    .nav {
        height: 11.5%;
    }
    .introduction {
        .items {
            .item, .itemi, .itemis {
                width: 33%;
                height: 70px;
                position: relative;
                p {
                    font-size: 10.5px;
                    position: absolute;
                    left: 45%;
                }
            }
        }
        .banner {
            p {
                font-size: 13px;
            }
        }
    }
    .list {
        width: 95%;
    }
}
@media screen and (max-height: 800px) and (max-width: 650px) {
    .introduction {
        .banner {
            margin-top: 10%;
        }
    }
}
@media screen and (min-width: 651px) and (max-width: 756px) {
    .nav {
        .btn {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 1em;
        }
    }
    .introduction {
        .items {
            .item, .itemi, .itemis {
                position: relative;
                .ban, .bani, .banis {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 5%;
                }
            }
        }
        .banner {
            p {
                width: 90%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .list {
        width: 100%;
        display: grid;
        place-items: center;
        .card {
            width: 290px;
        }
    }
}
@media screen and (max-height: 600px){
    .nav {
        .btn {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 1.5em;
        }
    }
    .introduction {
        height: 75vh;
        h1 {
            margin-top: 1%;
            font-size: 4vw;
        }
        .items {
            top: 42.5%;
            margin-top: 0%;
            .item, .itemi, .itemis {
                height: 35%;
                position: relative;
                .ban, .bani, .banis {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
                p {
                    font-size: 1.5vw;
                }
            }
        }
        .banner {
            top: 70%;
            height: 13%;
        }
    }
    .list {
        display: grid;
        justify-content: center;
        place-items: center;
        width: 90%;
        .card {
            width: 300px;
        }
    }
} 
@media screen and (max-height: 399px) {
    .nav {
        .btn {
            margin-left: 10%;
        }
    }
    .introduction {
        .items {
            display: flex;
            flex-direction: row;
            gap: 20px;
            justify-content: center;
            margin-left: 2%;
            .item, .itemi, .itemis {
                width: 28%;
                height: 41%;
            }
        }
        .banner {
            top: 55%;
            p {
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                display: flex;
                justify-content: center;
            }
        }
    }
    .list {
        display: grid;
        justify-content: center;
        place-items: center;
        width: 10%;
        .card {
            width: 300px;
            margin-left: -5%;
        }
    }
}
@media screen and (max-height: 399px) and (max-width: 1024px) and (min-width: 650px) {
    .nav {
        .btn {
            margin-left: 0%;
        }
    }
    .introduction {
        .items {
            margin-top: 2%;
            margin-left: -4%;
        }
        .banner {
            top: 75%;
        }
    }
}
/* @media screen and (min-height: 981px) and (min-width: 651px) and (max-width: 1024px) {
    .introduction {
        height: 50vh;
        h2 {
            position: absolute;
            top: 5%;
        }
        .items {
            top: 50%;
            .item, .itemi, .itemis {
                height: 20%;
                .ban, .bani, .banis {
                    transform: translateX(-450%) translateY(-50%);
                }
            }
        }
        .banner {
            top: 50%;
            height: 7%;
        }
    }
    
}  */
@media screen and (min-width: 1300px) and (max-width: 1799px) {
    .nav {
        ul {
            li {
                p {font-size: 1.1vw;}
            }
        }
        .btn {
            margin-left: 2.5%;
            width: 22%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 2.5%;
            font-size: 1.1vw;
        }
        main {
            p {
                font-size: 1.1vw;
            }
        }
    }
    .introduction {
        .items {
            .item, .itemi, .itemis {
                .ban, .bani, .banis {
                    height: 5vh;
                    width: 5vh;
                }
                p {
                    font-size: 1.4vh;
                }
            }
        }
        .banner {
            height: 8%;
            p {
                font-size: 1.5vw;
            }
        }
    }
}
@media screen and (min-width: 1800px) {
    .nav {
        ul {
            position: relative;
            top: 50%;
            display: flex;
            gap: 2%;
            li {
                display: flex;
                gap: 5%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                p {font-size: 1.2vw;}
                svg {scale: 2;}
            }
            li:nth-child(1) {
                margin-left: 30%;
            }
            li:nth-child(2) {
                margin-left: 10%;
            }
            li:nth-child(3) {
                margin-left: 20%;
            }
        }
        .btn {
            width: 25%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 2.5%;
            font-size: 1.5vw;
        }
        main {
            
            p {font-size: 1.2vw}
            ul {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                gap: 2%;
                li {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-150%);
                }
                li:nth-child(1) {
                    margin-left: 5%;
                }
                li:nth-child(2) {
                    margin-left: 40%;
                }li:nth-child(3) {
                    margin-left: 70%;
                }
            }
        }
    }
    .introduction {
        h1 {
            font-size: 4vw;
        }
        .items {
            .item, .itemi, .itemis {
                height: 30%;
                border-radius: 10%;
                p {
                    font-size: 1.1vw;
                }
                .ban, .bani, .banis {
                    height: 50%;
                    width: 20%;
                    font-size: 1.7vw;
                }
            }
        }
        .banner {
            border-radius: 10%;
            font-size: 1.3vw;
            height: 11%;
        }
    }
}
@media screen and (min-height: 1400px) and (max-width: 2000px) {
    .introduction {
        height: 40vh;
        position: relative;
        h1 {
            position: absolute;
            top: 25%;
        }
        .items {
            top: 60%;
            transform: translateY(-50%);
            .item, .itemi, .itemis {
                height: 30%;
            }
        }
        .banner {
            top: 100%;
            height: 10.5%;
        }
    }
}
@media screen and (min-width: 1150px) and (max-width: 1299px) {
    .nav {
        .btn {
            margin-left: 2.5%;
            font-size: 1.3vw;
        }
        ul {
            li {
                p {
                    font-size: 1.3vw;
                }
            }
        }
        main {
            p {
                font-size: 1.3vw;
            }
        }
    }
}
@media screen and (max-height: 599px) and (max-width: 450px) {
    .nav {
        height: 10%;
    }
    .introduction {
        position: relative;
        height: 85vh;
        h1 {
            position: absolute;
            top: 15%;
            font-size: 6vw;
        }
        .items {
            .item, .itemi, .itemis {
                height: 25%;
                width: 70%;
                top: 50%;
                transform: translateY(-50%);
                p {
                    font-size: 3vw;
                }
            }
        }
        .banner {
            top: 92.5%;
            p {
                width: 100%;
                font-size: 4vw;
            }
        }
    } 
    .list {
        width: 50%;
        display: grid;
        place-items: center;
        .card {
            margin-left: -12.5%;
        }
    }   
}
@media screen and (min-height: 601px) and (max-height: 980px) and (min-width: 651px) and (max-width: 1024px) {
    .introduction {
        height: 65vh;
        position: relative;
        h1 {
            position: absolute;
            top: 15%;
        }
        .items {
            position: absolute;
            top: 80%;
            transform: translateY(-50%);
            .item, .itemi, .itemis {
                top: 30%;
                transform: translateY(-50%);

                height: 35%;
            }
        }
        .banner {
            top: 95%;
        }
    }
}
@media screen and (min-width: 651px) and (max-width: 1023px) and (min-height: 601px) and (max-height: 800px) {
    .introduction {
        .items {
            position: absolute;
            top: 100%;
            .item, .itemi, .itemis {
                .ban, .bani, .banis {
                    transform: translateX(-450%) translateY(-50%);
                }
            }
        }
        .banner {
            height: 15%;
        }
    }
    
}
@media screen and (min-width: 651px) and (max-width: 1023px) and (min-height: 801px) and (max-height: 980px) {
    .introduction {
        .items {
            position: absolute;
            margin-top: -10%;
            .item, .itemi, .itemis {
                .ban, .bani, .banis {
                    transform: translateX(-450%) translateY(-50%);
                }
            }
        }
        .banner {
            height: 15%;
        }
    }
    
}
@media screen and (min-width: 415px) and (max-width: 480px) {
    .nav {
        .btn {
            margin-left: 3.5%;
        }
    }
}
@media screen and (min-width: 480px) and (max-width: 530px) {
    .nav {
        .btn {
            margin-left: 5%;
        }
    }
}
@media screen and (min-width: 531px) and (max-width: 650px) {
    .nav {
        .btn {
            margin-left: 8%;
        }
    }
    .list {
        .card {
            width: 80%;
        }
    }
}
@media screen and (min-width: 650px) and (max-width: 756px) and (min-height: 601px) and (max-height: 980px) {
    .introduction {
        height: 50vh;
        .items {
            top: 60%;
            .item, .itemi, .itemis {
                position: relative;
                .ban, .bani, .banis {
                    position: absolute;
                    left: 5%;
                    transform: translateY(-50%) translateX(0%);
                }
            }            
        }
    }
}
@media screen and (min-width: 650px) and (max-width: 756px) and (min-height: 601px) and (max-height: 800px) {
    .introduction {
        .items {
            top: 80%;
            .item, .itemi, .itemis {
                position: relative;
                p {
                    font-size: 10px;
                }
                .ban, .bani, .banis {
                    position: absolute;
                    left: 5%;
                    transform: translateY(-50%) translateX(0%);
                }
            }            
        }
    }
}