@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
             :root {
                --green: #27ae60;
                --black: #192a56;
                --light-color: #666;
                --red: #FF725C;
                --box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
            }
            
            
            * {
                font-family: 'Nunito', sans-serif;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                text-decoration: none;
                outline: none;
                border: none;
                /* text-transform: capitalize; */
                transition: all .2s linear;
            }
            
            html {
                font-size: 92.5%;
                overflow-x: hidden;
                scroll-padding-top: 5.5rem;
                scroll-behavior: smooth;
            }
            
            body {
                /* background: url(images/pexels-soo-chul-park-18251167.jpg);
    background-color: rgba(0, 0, 0, .1);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    background-position: center; */
            }
            
            section {
                padding: 2rem;
                font-size: 62.5%;
                /* padding: 2rem 9%; */
            }
            
            section.navbar:nth-child(even) {
                background: #eee;
            }
            
            .sub-heading {
                text-align: center;
                color: var(--red);
                font-size: 2rem;
                padding-top: 1rem;
            }
            
            .heading {
                text-align: center;
                color: var(--red);
                font-size: 4rem;
                padding-bottom: 2rem;
                /* text-transform: uppercase */
            }
            
            .heading span {
                color: var(--red);
                font-weight: bold;
                font-family: monotype corsiva;
                margin: 0 3px;
            }
            
            .btnEnvoi {
                margin-top: 1rem;
                display: inline-block;
                font-size: 1.7rem;
                color: #fff;
                background: var(--black);
                border-radius: .5rem;
                cursor: pointer;
                padding: .8rem 3rem;
                transition: all .3s ease-in-out;
            }
            
            .btn:hover {
                /* background: var(--green); */
                background: var(--red);
                letter-spacing: .1rem;
            }
            
            header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: #fff;
                padding: 1rem;
                /* padding: 1rem 7%; */
                display: flex;
                align-items: center;
                justify-content: space-between;
                z-index: 1000;
                box-shadow: var(--box-shadow);
            }
            
            header .logo {
                color: var(--black);
                font-size: 2.5rem;
                font-weight: bolder;
                text-decoration: none;
                list-style: none;
                list-style-type: none !important;
            }
            
            header .logo i {
                color: var(--red);
            }
            
            header.navbar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                /* justify-items: center; */
            }
            
            header .navbar a {
                font-size: 1.7rem;
                border-radius: .5rem;
                padding: .5rem 1.5rem;
                text-decoration: none;
                list-style: none;
                list-style-type: none;
                /* color: var(--light-color); */
                color: black;
                /* background-color: var(--black); */
            }
            
            header .navbar a.active,
            header .navbar a:hover {
                color: #fff;
                /* background: var(--green); */
                background-color: var(--red);
            }
            
            header .icons i,
            header .icons a {
                cursor: pointer;
                margin-left: .5rem;
                height: 4.5rem;
                line-height: 4.5rem;
                width: 4.5rem;
                text-align: center;
                font-size: 1.7rem;
                color: var(--black);
                border-radius: 50%;
                background: #eee;
            }
            
            header .icons i:hover,
            header .icons a:hover {
                color: #fff;
                background: var(--red);
                transform: rotate(360deg);
            }
            
            header .icons #menu-bars {
                display: none;
            }
            /* orders starts */
            
            .order {
                margin-top: 2rem;
                /* font-size: 62.5%; */
            }
            
            .order form {
                max-width: 80rem;
                border-radius: .5rem;
                box-shadow: var(--box-shadow);
                border: .1rem solid rgba(0, 0, 0, .2);
                background: rgb(255, 255, 255);
                padding: 1.5rem;
                margin: 0 auto;
                width: 90rem;
            }
            
            .explication {
                height: 14rem;
                width: 100%;
                box-sizing: border-box;
                box-shadow: var(--box-shadow);
                margin-bottom: 2rem;
                padding: 0 1rem;
                background-image: url(../img/back_img.jpg);
                background-position: top;
                background-size: 100%;
                background-blend-mode: multiply;
                animation: bg-animation 15s infinite alternate;
                background-color: rgba(0, 0, 0, .2);
                position: relative;
                border-radius: 20px;
            }
            
            @keyframes bg-animation {
                0% {
                    background-position: top;
                    background-color: rgba(0, 0, 0, .4);
                }
                100% {
                    background-position: bottom;
                    background-color: rgba(0, 0, 0, .2);
                }
            }
            
            .explication img {
                position: absolute;
                width: 12rem;
                height: 12rem;
                border-radius: 50px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            
            .order form .inputBox {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            
            .order form .inputBox .input {
                width: 49%;
            }
            
            .order form .inputBox .input span,
            .order form .input span {
                display: block;
                padding: .5rem 0;
                font-size: 1.5rem;
                color: var(--black)
            }
            
            .order form .inputBox .input input,
            .order form .inputBox .input select,
            .order form textarea {
                background: #eee;
                border-radius: .5rem;
                padding: .5rem;
                font-size: 1.6rem;
                color: var(--black);
                text-transform: none;
                margin-bottom: 1rem;
                width: 100%;
            }
            
            .order form .inputBox .input input:focus,
            .order form .inputBox .input textarea:focus {
                border: .1rem solid var(--red);
            }
            
            .order form .inputBox .input textarea {
                height: 20rem;
                resize: none;
            }
            
            .order form .btn {
                margin-top: 0;
            }
            
            @media (max-width:450px) {
                .order form {
                    width: 100%;
                }
                html {
                    font-size: 50%;
                }
                .order form .inputBox .input {
                    width: 100%;
                }
                .heading {
                    font-size: 3rem;
                    color: white
                }
                .explication img {
                    position: absolute;
                    width: 12rem;
                    height: 12rem;
                    border-radius: 50px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                .photos {
                    display: flex;
                    /* justify-content: space-around; */
                    align-items: center;
                    flex-direction: column;
                }
                .photos img {
                    width: 100%;
                    /* height: 15rem; */
                    border-radius: 10px;
                    box-shadow: var(--box-shadow);
                    margin-top: 2rem;
                }
            }
            
            @media (max-width:903px) {
                .order form {
                    width: 100%;
                }
                html {
                    font-size: 60%;
                }
                .order form .inputBox .input {
                    width: 100%;
                }
                .heading {
                    font-size: 3rem;
                    color: white
                }
                .explication img {
                    position: absolute;
                    width: 17rem;
                    height: 17rem;
                    border-radius: 50px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            
            .photos {
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            
            .photos img {
                width: 40%;
                height: 15rem;
                border-radius: 10px;
                box-shadow: var(--box-shadow);
            }