:root {
    --black: #171321;
    --dkblue: #0d314b;
    --plum: #4b0d49;
    --hotmag: #ff17e4;
    --magenta: #e310cb;
    --aqua: #86fbfb;
    --white: #f7f8fa;
    --font-size: 1.3rem;
    --momo: "oxygen mono", monospace;
    --sans: times, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
}

body {
    font-family: var(--sans);
    background-color: var(--black);
    color: var(--white);
    font-size: var(--font-size);
}

h1,
h2,
h3 {
    margin: 0;
}

a {
    color: var(--magenta);
}

a:hover {
    color: var(--hotmag);
    text-decoration: none;
}

.container {
    gap: 8rem;
    display: flex;
    padding-top: 4rem;
    flex-direction: column;
}

/* intro style */
#intro {
    font-size: 1rem;
    line-height: 1.5;
}

#inro.name {
    font-family: var(--momo);
}

.name span {
    font-family: var(--sans);
    font-size: 4rem;
    color: var(--aqua);
    display: block;
}

#intro h2 {
    font-size: 4rem;
    font-weight: normal;
}

#contact {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 3rem 0;
    display: block;
    background: var(--plum);

}

#contact p :last-child {
    margin-top: 3rem;

}

nav {
    font-family: var(--momo);
    font-size: 80%;
    padding: 1rem 0;
}

.nav-logo {
    padding-bottom: 20px;
}

.hamburger {
    display: none;
}

nav h1 a {
    font-family: var(--sans);
}

nav .main {
    flex-basis: 100%;
    text-align: center;
}

nav a {
    color: var(--white);
    text-decoration: none;
    display: block;
}

nav a :hover {
    color: var(--magenta);
}

.nav-link {
    display: flex;
    justify-content: space-between;
}

.button {
    background-color: var(--magenta);
    padding: 0.5rem;
    border-radius: 5px;
}

.button :hover {
    /* color: var(--white); */
    background-color: var(--hotmag);
}

.fa-behance {
    margin-right: 10px;
}

.about {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    /* width: 90%; */
}

.index {
    width: 80%;
    margin: auto;
}

.about-me {
    color: var(--white);
}

.about-me h2 {
    text-align: left;
    margin-bottom: 2rem;
}

img {
    border-radius: 10px;
}

.view {
    background-color: var(--magenta);
    color: var(--white);
    border: none;
    padding: 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 2rem;
}

.view :hover {
    background-color: var(--hotmag);
    color: var(--white);
}

.winnie {
    color: var(--aqua);
}

.watch {
    justify-content: left;
    padding: 2%;
    padding-left: 6rem;
}

footer {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
    font-size: small;
    padding-top: 1rem;
}

.Screenshot {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.Screenshot p {
    margin-bottom: .5rem;
}

.new-project {
    margin-top: 4rem;
}

.admin {
    gap: 7rem;
    display: flex;
    margin-bottom: 2rem;
    justify-content: space-between;
}

.visual {
    gap: 7rem;
    display: flex;
    margin-bottom: 2rem;
    justify-content: space-between;
}

.visual div {
    width: 50%;
}

.admin div {
    width: 50%;
}

#services h2 {
    text-align: center;
    margin-bottom: 2rem;
}

#services h5 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.pm {
    /* text-align: center; */
    gap: 7rem;
    display: flex;
    margin-bottom: 2rem;
    justify-content: space-between;
}

.pm div {
    width: 50%;
}

.gallery {
    text-align: center;
    margin-bottom: 2rem;
}

.contact {
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
}

#logo img {
    background: white;
    padding: 5px;
}

.logo-one {
    display: flex;
    gap: 4rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.logo-two {
    display: flex;
    gap: 4rem;
    padding-top: 30px;
}

#logo h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.show-nav {
    display: flex !important;
}

.footer-one {
    display: flex;
    justify-content: space-between;
    margin: 2rem;
    margin-top: 0;
    margin-bottom: 0;

}

.links {
    color: var(--white);
    text-decoration: none;
    font-size: medium;
}

/* Project Images */
.project-cont {
    width: 100%;
}

.project-image {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-audit {
    width: 80%;
    margin: auto;
    display: flex;
    gap: 20px;
}

.page-audit h4 {
    text-align: left;
    margin-bottom: 1rem;
}

.analytic {
    width: 80%;
    margin: auto;
    display: flex;
    gap: 20px;
}

.analytic h4 {
    text-align: right;
    margin-bottom: 1rem;


}

.testimony {
    margin: auto;
    display: flex;
    gap: 2rem;
    justify-content: center;

    
}
.client {
    margin: auto;
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    gap: 2rem;
}

.optimize li {
    list-style: disc;
    margin-left: 1rem;
}

.design-img {
    background-image: url(images/Screenshot\ \(43\).png);
}

.info-img {
    background-image: url(images/Screenshot\ \(44\).png);
}

.graph-img {
    background-image: url(images/AI\ .jpg);
}

.sm1-img {
    background-image: url(images/Screenshot\ \(45\).png);
}

.sm2-img {
    background-image: url(images/Screenshot\ \(47\).png);
}

.sm3-img {
    background-image: url(images/skincare\ Routine2.png);
}

.ui-img {
    background-image: url(images/MacBook\ Air\ -\ 1.png);
}

.app-img {
    background-image: url(images/ski.png);
}

.dashboard-img {
    background-image: url(images/Instagram\ post\ -\ 15.png);
}

.smm1-img {
    background-image: url(images/Frame\ 32.png);
}

.smm2-img {
    background-image: url(images/Screenshot\ \(52\).png);
}

.smm-1 {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin: auto;
}

.click {
    font-style: italic;
    font-size: small;
}

.click-1 {
    font-size: small;
    font-style: italic;
    display: flex;
    text-align: center;
    width: 62%;
    margin: auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
.customize {
    background-color: #55114d;
    width: 15%;
    border-radius: 10px;
    text-align: center;
    color: #f3efef;
    font-weight: lighter;

}

.wrap {
    display: flex;
    justify-content: space-between;
    margin: auto;
}
.work {
    width: 80%;
    margin: auto;
}
.strat {
    background-color: #f7f8fa;
    border-radius: 4px;
}

.strat p {
    color: #000;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.market {
    margin-bottom: 0;
    margin-top: 2rem;
}

@media screen and (max-width: 600px) {
    .container {
        padding-top: 3rem;
    }

    .nav-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .hamburger {
        display: inline-block;
    }

    .nav-link {
        gap: 1rem;
        padding: 20px;
        display: none;
        align-items: end;
        flex-direction: column;
    }

    .fa fa-linkedin {
        gap: 1rem;
    }

    .name span,
    #intro h2 {
        font-size: 2rem;
    }

    .intro-text {
        text-align: justify;
    }

    .about {
        flex-direction: column-reverse;
    }

    .about-me h2 {
        text-align: center;
    }

    #services h2 {
        text-align: left;
    }

    .page-audit {
        flex-direction: column-reverse;
        align-items: center;
    }

    .analytic {
        flex-direction: column;
        align-items: center;
    }
    .analytic h4{
        text-align: left;
    }
    .admin {
        flex-direction: column;
        gap: 2rem;
    }

    .visual {
        flex-direction: column;
        gap: 2rem;
    }

    .visual div {
        width: 100%;
    }

    .admin div {
        width: 100%;
    }

    .pm {
        flex-direction: column;
        gap: 2rem;
    }

    .pm div {
        width: 100%;
    }

    .Screenshot {
        flex-direction: column;
    }

    .logo-one {
        justify-content: center;
    }

    .smm-1 {
        flex-direction: column-reverse;

    }
    .wrap {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    .work h4 {
        text-align: center;
    }
    .testimony {
        flex-direction: column;
        align-items: center;
        width: 80%;
    }
    .client {
        flex-direction: column;
        align-items: center;
        width: 80%;
    }
    .click-1 {
        margin: 0;
        margin-left: 2rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}