@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
--Soft-orange: hsl(35, 77%, 62%);
--Soft-red: hsl(5, 85%, 63%);
--Off-white: hsl(36, 100%, 99%);
--Grayish-blue: hsl(233, 8%, 79%);
--Dark-grayish-blue: hsl(236, 13%, 42%);
--Very-dark-blue: hsl(240, 100%, 5%);
}


/*css rest*/

*,*::before,  *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/*end of css rest*/

/*body & container*/

body {
    font-size: 0.938rem;
    font-family: "Inter", sans-serif;
}

.container {
    max-width: 23.438rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/*End of the body and container*/

/*navigation*/

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18rem;
    padding: 1.25rem 0 1.875rem 0;
}

.img-logo {
    width: 3.125rem;  
}

.hamburger-menu {
    margin-top: 0.625rem;
    cursor: pointer;
}


.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    background-color: var(--Off-white);
    height: 100%;
    width: 17.5rem;
    box-shadow: -60px 0 100px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease;
    z-index: 999;
}

.mobile-menu.active {
    right: 0;
    transition: right 0.3s ease;
}

.close-icon {
    display: block;
    margin-left: auto;
    padding: 2rem 2rem 6rem 0;
    cursor: pointer;
    width: 4.3rem;
}


ul {
    list-style-type: none;
    font-size: 23px;
}

li {
    margin-bottom: 28px;
}

a {
    text-decoration: none;
    color: var(--Very-dark-blue);
}

a:hover {
    color: var(--Soft-red);
}

/*End of the navigation*/

/*header*/

h1 {
    font-size: 2.742rem;
    font-weight: 800;
    color: var(--Very-dark-blue);
    margin: 0.938rem 0 0.625rem 0;
}

.header-paragraph {
   color: var(--Dark-grayish-blue);
   font-weight: 400;
   margin: 0 1.688rem 2rem 0;
   line-height: 1.6;
}

.btn-one {
   display: inline-block;
   background-color: var(--Soft-red);
   color: var(--Very-dark-blue);
   letter-spacing: 4px;
   text-transform: uppercase;
   text-decoration: none;
   padding: 0.813rem 1.813rem;
   font-weight: 700;
   margin: 0.063rem 0 1.875rem 0;
   cursor: pointer;
   transition: transform 250ms ease-in;
}

.btn-one:hover {
   background-color: var(--Very-dark-blue);
   color: var(--Off-white);
}

/*End of the header*/

/*aside*/

.new-section {
    background-color: var(--Very-dark-blue);
    color: aliceblue;
    margin: 2.5rem 0 4.5rem 0;
    padding: 1.25rem 1.625rem 1.620rem 1.375rem;
}

hr {
    height: 1px; 
    background-color: var(--Grayish-blue); 
    border: none;
    color: var(--Grayish-blue);
    opacity: 0.5;
    margin: 1.875rem 0rem;
}

h2 {
    color: var(--Soft-orange);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.563rem;
}

h3 {
    color: var(--Off-white);
    font-size: 1.412rem;
    margin-bottom: 0.563rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

h3:hover {
    color: var(--Soft-orange);
}

.paragraph {
    font-size: 1rem;
    color: var(--Grayish-blue);
    opacity: 0.8;
    padding-right: 1.188rem;
    line-height: 1.7;
}

/*end of the aside*/

/*main*/

.section-one {
    display: flex;
    margin-bottom: 1.875rem;
    gap: 1.438rem;
}

.img-responsive {
    width: 8.375rem;
    height: 8.375rem;
}

.number {
    color: var(--Soft-red);
    font-size: 1.938rem;
    font-weight: 700;
}

.title {
    color: var(--Very-dark-blue);
    font-size: 1.188rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.title:hover {
    color: var(--Soft-red);
}

.main-paragraph {
    color: var(--Dark-grayish-blue);
    font-size: 0.938rem;
    padding-right: 1.5rem;
    line-height: 1.7;
}

/*End of the main*/


@media only screen and (min-width: 80rem) {
    
    .container  {
        max-width: 80rem;
    }

    .navigation {
        gap: 21rem;
    }

    .img-logo {
        width: 4.5rem;
    }

    .hamburger-menu {
        display: none;
    }
     
    .mobile-menu {
        position: static;
        right: 0;
        height: auto;
        width: auto;
        box-shadow: none;
    }

    .close-icon {
        display: none;
    }

    ul {
        display: flex;
        flex-direction: row;
        gap: 2.938rem;
        font-size: 1.125rem;
        
    }

    li {
        margin-bottom: 0;
    }

    a {
        color: var(--Dark-grayish-blue);
    }

    .content-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1.563rem;
        margin: 1rem 0 3.55rem 0;
    }

    .header-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .header-inside {
       grid-column: 2;
    }

    .header-paragraph {
        margin: 2.4rem 2.688rem 2rem 0;
        font-size: 1.125rem;
    }


    h1 {
        font-size: 3.3rem;
        margin: 1rem 0 0.625rem 0;
    }

    .btn-one {
        padding: 0.813rem 2.513rem;
        font-size: 1rem;
    }


    .new-section {
        margin: 0;
    }

    h2 {
        font-size: 2.5rem;
    }

    .paragraph {
        font-size: 1.2rem;
    }

    main {
        display: flex;
    }

    .main-paragraph {
        font-size: 1rem;
        margin-right: 3rem;
    }

}