*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root{
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg-rgb: 255,255,255;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    }
    

    body{
        font-family: var(--bs-body-font-family);
        font-size: var(--bs-body-font-size);
        font-weight: var(--bs-body-font-weight);
        line-height: var(--bs-body-line-height);
        color: var(--bs-body-color);
        text-align: var(--bs-body-text-align);
        background-color: var(--bs-body-bg);
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0;
        padding: 0;
        background: #15164b;
        color: white;
        width: 100%;
    }

    nav{ 
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 10px 5px;
        align-items: center;
        height: 60px;
        background-position: fixed;
    }


    .logo{ 
        display: flex;
        align-items: center;
        
    }


    .logo svg{ 
        width: 35px;
        height: 35px;
    }

    .logo h1{ 
        font-size: x-large;
    }

    .last-nav svg{ 
        width: 30px;
        height: 30px;
        cursor: pointer;
        animation: 500ms ea alternate;
        transition: 500ms ease-in-out;
        opacity: 1;
        transform: rotate(0deg);
    }

    @keyframes ea {
        from{
            opacity: 1;
            transform: rotate(90deg);
        }
    }

    .nav-for-mobile{
        display: flex;
        width: 200px;
        height: 250px;
        padding: 10px 15px;
        position: absolute;
        right: 0%;
        transform: translateY(50px);
        margin-right: 10px;
        border: 1px solid silver;
        background-color: #fff;
        border-radius: 10px;
        transition: 1s ease-out;
        animation: 1s shows;
    }

    @keyframes shows {
       from {
            transform: translateX(190px) translateY(20px);
            opacity: 0.5;
        }
    }

    .nav-for-mobile ul{
       display: flex;
       flex-direction: column;
       width: 100%;
       height: 100%;
       justify-content: space-around;
       gap: 5px;
    }

    .nav-for-mobile ul li{
        display: flex;
        width: 100%;
        height: 62.5px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        list-style: none;
        cursor: pointer;

     }

     .nav-for-mobile ul li a{
        text-decoration: none;
        color: #212529;
        font-size: large;
        font-weight: 600;

     }

     .nav-for-mobile ul li img{
       width: 25px;
       height: 25px;
       object-fit: contain;
     }


     .linea{
        width: 100%;
        height: 1px;
        background: silver;
        opacity: 0.5;
    }

    main{
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 100%;
        padding: 0px 10px;
        margin-top: 20px;
    }

    .top-page{
        display: flex;
        width: 100%;
        height: 200px;
        gap: 5px;
        justify-content: space-between;
    }

    
    .top-page .description{
        width: 50%;
        height: 100%;
    }


    .second-page{
        display: flex;
        width: 100%;
        max-height: 100%;
        gap: 5px;
        margin-top: 10px;
    }

    .item-1{
        display: flex;
        flex-direction: column;
        background: #ffffff;
        width: 50%;
        max-height: 100%;
        gap: 5px;
        color: black;
        height: 250px;
        padding: 10px;
        border-radius: 15px;
        align-items: center;
        gap: 5px;
    }

    .item-1 img{
        width: 100%;
        height: 150px;
        object-fit: contain;
    }
    
    
    .colors{
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 5px;
        gap: 5px;
    }

    .third-page{
        display: flex;
        width: 100%;
        height: 200px;
        margin-top: 20px;
        background-color: #524570;
        border-radius: 15px;
    }

    .third-page .description{
        width: 50%;
        margin: 5px 0 0 10px;
    }

    .third-page img{
        width: 50%;
        object-fit: fill;
        border-radius: 15px;
    }

    .fouth-page{
        display: flex;
        margin-top: 20px;
        width: 100%;
        gap: 10px;
    }

    .ipad{
        width: 50%;
        height: 100%;
        background: #ffffff;
    }

    .ipad-show{
        width: 50%;
        max-height: 100%;
        background: #3b4582;
        border-radius: 15px;
    }

    .ipad-show img{
        width: 100%;
        height: 42%;
        object-fit: cover;
        border-radius: 15px;
    }

    .fifth-page{
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 20px;

    }

    .mac-book-show{
        color: #ecefff;
        background: none;
        justify-content: space-between;
        width: 100%;
    }


    .mac{
        width: 100%;
     }

     footer{
       margin-top: 30px;
       padding: 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       font-size: small;
       gap: 15px;
       background-color: white;
       color: black;
     }


    footer p{
      font-weight: 600;
      color: gray;
    }

    .icons svg{
        width: 20px;
        height: 20px;
        color: gray;
        transition: 200ms ease-in-out;
      }

      .icons svg:hover{
        color: black;
      }

      @media screen and (min-width: 800px) {

        body{
            font-family: var(--bs-body-font-family);
            font-size: var(--bs-body-font-size);
            font-weight: var(--bs-body-font-weight);
            line-height: var(--bs-body-line-height);
            color: var(--bs-body-color);
            text-align: var(--bs-body-text-align);
            background-color: var(--bs-body-bg);
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
            display: flex;
            flex-direction: column;
            height: 100%;
            margin: 0;
            padding: 0;
            background-image: url(./img/background-desktop.png);
            color: white;
            width: 100%;
           align-items: center;
        }

        main{
            display: flex;
            flex-direction: column;
            width: 700px;
            max-height: 100%;
            padding: 0px 10px;
            margin-top: 20px;
        }

        footer{
            width: 100%;
        }

        nav{ 
            display: flex;
            width: 700px;
            justify-content: space-between;
            padding: 10px 5px;
            align-items: center;
            height: 60px;
            background-position: fixed;
        }
      }