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

body {
    background-color: #080808;
    font-family: "IBM Plex Mono", monospace;
}

h1 {
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FFFFFF;
}

h2 {
    font-family: "Raleway", sans-serif;
    font-size: 34px;
    line-height: 100%;
    height: 40px;
    font-weight: 800;
}

h3 {
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    height: 28px;
    color: #080808;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    justify-self: center;
    width: 1110px;
    height: 70px;
    padding: 0 85px;
    gap: 95px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #1B1B1B;
}

nav .links {
    display: flex;
    gap: 70px;
}

nav .socials {
    display: flex;
    width: 107.54px;
    height: 17px;
    gap: 25px;
}

nav .links a {
    font-weight: 400;
    color: #9C9C9C;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1%;
    line-height: 100%;
}

a img {
    width: 5.89px;
    height: 10px;
}

.page {
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.testimonials,
.recentWork {
    height: 804px;
}

.testimonials h2,
.contact h2 {
    color: #FFFFFF;
}

.pageIntro {
    text-align: center;
}

.pageIntro p {
    color: #9C9C9C;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1%;
    font-weight: 400;
    margin: auto;
    width: 570px;
}

.btnCont a {
    text-decoration: none;
    display: flex;
    color: #FFFFFF;
    width: 307.89px;
    height: 63px;
    border-radius: 4px;
    background-color: #3F8E00;
    border: 1px solid #62BA1B;
    box-shadow: 0px 8px 30px 0px #3F8E0080;
    padding: 21px 64px 21px 64px;
    align-items: center;
    justify-content: space-between;
}

.btnCont {
    gap: 10px;
}

/* Hero */

.hero {
    height: 630px;
}

.heroCol {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}

.heroCol section {
    width: 50%;
    display: flex;
    justify-content: center;
}

.heroCol .textCol {
    display: flex;
    flex-direction: column;
    width: 538px;
    height: 247px;
    gap: 30px;
    margin-right: 32px;
    margin-top: 51px;
}

.heroCol p {
    color: #9C9C9C;
    font-weight: 400;
    font-size: 14px;
    width: 492px;
    line-height: 24px;
    gap: 10px;
    letter-spacing: 1%;
}

.heroCol .imgCol {
    width: 350px;
    height: 350px;
    border-radius: 100%;
    overflow: hidden;
}

.heroCol .imgCol img {
    object-fit: cover;
    width: 350px;
    height: 350px;
}

.heroBrands {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.brands {
    width: 920px;
    height: 60px;
    margin-top: 147px;
}

.brands .brandsCont {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.brands h5 {
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 100%;
    letter-spacing: 0%;
    display: block;
    margin-bottom: 20px;
}

.brands .brandBx {
    display: flex;
    width: 160px;
    height: 60px;
    border-radius: 6px;
    border: 1px solid #1B1B1B;
    align-items: center;
    justify-content: center;
}


/* Case Studies */

.caseStudies {
    background-color: #FFFFFF;
    flex-direction: column;
}

.columns {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin: 60px 0 80px 0;
}

.col50 {
    width: 892px;
    display: flex;
    flex-direction: column;
}

.textSide,
.imgSide {
    width: 50%;
}

.textSide {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.normal {
    flex-direction: row;
}

.normal .textSide {
    margin-right: 26px;
}

.reversed {
    flex-direction: row-reverse;
}

.reversed .textSide {
    margin-left: 31px;
}

.textSide p {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1%;
    color: #9C9C9C;
}

.col50 .imgSide img {
    width: 445px;
    height: 300px;
    object-fit: cover;
}

.companyName {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    padding: 0 10px 0 10px;
    font-size: 12px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 1%;
    margin-bottom: 10px;
}

.one {
   background: #FFF6E9;
   width: 72px;
   height: 24px;
   color: #FFA217;
}

.two {
    width: 64px;
    height: 24px;
    background: #D0E6FF;
    color: #000AFF;
}

.three {
    width: 64px;
    height: 24px;
    background: #E0FFF8;
    color: #2AB090;
}

.button {
    width: 190px;
    height: 38px;
    margin-top: 24px;
    gap: 10px;
    border-radius: 4px;
    padding: 10px 24px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 14px;
}

.btnOne {
    background:#FFA217;
}

.btnTwo {   
    background: #000AFF;
}

.btnThree {
    background: #2AB090;
}


/* Testimonials */

.testimonials {
    background-color: #080808;
}

.testimonialCards {
    display: flex;
    flex-wrap: wrap;
    margin: 0px 180px;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 80px;
}

.testCard {
    position: relative;
}

.testCard .textDivider {
    width: 445px;
    padding: 30px;
    height: 212px;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, #484848, transparent) 1;
    border-image-slice: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote {
    font-weight: 400;
    font-size: 100px;
    color: #FFFFFF;
    position: absolute;
    top: -30px;
    left: 7px;
    z-index: 600;
    font-family: "Raleway", sans-serif;
}

.testCard .testimonialText {
    color: #9C9C9C;
    font-size: 14px;
    width: 409px;
    height: 72px;
}

.testCard img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    object-fit: cover;
}

.testCard h3 {
    font-weight: 700;
    color: #FFFFFF;
    size: 18px;
}

.testCard .clients {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 45px;
}

/* Recent Work */

.recentWork {
    background-color: #FFFFFF;
    height: 835px;
}

.cardImg {
    object-fit: cover;
}

.cardCont {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-top: 30px;
}

.card {
    width: 445px;
    height: 575px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cardImg {
    width: 445px;
    height: 300px;
    border-radius: 6px;
}

.card h3 {
    margin-top: 20px;
}

.card p {
    color: #9C9C9C;
}

.carousel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.carousel button {
    display: flex;
    width: 30px;
    height: 30px;
    gap: 10px;
    border-radius: 54px;
    border: 1px solid #9C9C9C;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
    margin: 0 65px 0 65px;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
}

.knowMore {
    margin-top: 20px;
}

.knowMore a {
    width: 140px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid #62BA1B;
    background-color: #3F8E00;
    box-shadow: 0px 8px 30px 0px #3F8E004D;
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    padding-top: 10px;
    padding-right: 24px;
    padding-bottom: 10px;
    padding-left: 24px;
}

/* Get In Touch */

.contact {
    background-color: #080808;
    height: 672px;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 40px 0 80px 0;
}

.input {
    width: 350px;
    height: 61px;
}

label {
    font-weight: 600;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin-bottom: 5px;
}

input,
textarea {
    display: flex;
    justify-content: center;
    padding: 0 12px;
    width: 350px;
    border-radius: 4px;
    background: #F8F8F8;
    border: 1px solid #D8D8D8;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-size: 12px;
    height: 36px;
    line-height: 21px;
    letter-spacing: 0%;
}

input {
    height: 40px;
}

textarea {
    resize: none;
    height: 120px;
    
}

.formCont .btnCont,
.btnCont input {
    text-decoration: none;
    display: flex;
    color: #FFFFFF;
    height: 63px;
    width: auto;
    border: none;
    font-family: "IBM Plex Mono", monospace;
    background-color: #3F8E00;
    border-top: 1px solid #62BA1B;
    border-bottom: 1px solid #62BA1B;
    border-radius: 0;
    font-size: 14px;
    font-weight:  700;
}

.formCont .btnCont {
    border-radius: 4px;
    background-color: #3F8E00;
    border: 1px solid #62BA1B;
    box-shadow: 0px 8px 30px 0px #3F8E0080;
    padding: 21px 64px 21px 64px;
    width: 350px;
    align-items: center;
    justify-content: center;
}

.btnCont input {
    padding: 0;
    margin-top: 0;
}


/* Footer */

footer {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    align-items: center;
    color: #9C9C9C;
    background: #1B1B1B;
    height: 70px;
}

@media screen and (max-width: 800px) {
    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 14px;
    }

    p {
        font-size: 12px;
    }

    nav {
        width: 90%;
        padding: 10px;
        margin: 0;
        flex-direction: column;
    }

    nav .links a {
        gap: 10px;
        padding: 0;
        margin: 0;
        font-size: 10px;
    }

    nav .links {
        gap: 20px;
    }

    nav .socials {
        height: 20px;
    }

    .hero {
        height: 800px;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .heroCol {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .heroCol .textCol {
        align-items: center;
        justify-content: center;
    }

    .heroCol .imgCol {
        width: 250px;
        height: 250px;
        
    }

    .heroCol .imgCol img {
        object-fit: cover;
        width: 250px;
        height: 250px;
    }

    .btnCont a {
        width: 200px;
        height: 33px;
        padding: 15px 44px 15px 44px;
        align-items: center;
        justify-content: space-between;
        font-size: 10px;
    }

    .brands {
        width: 250px;
        height: 20px;
        margin-top: 47px;
        padding-left: 25px;
        margin-right: auto;
        margin-left: 0;
    }

    .brands .brandBx {
        display: flex;
        width: 160px;
        height: 40px;
    }

    .columns {
       width: 100%;
       padding-left: 30px;
    }

    .col50 {
        width: 100%;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: left;
        gap: 20px;
    }
    
    .col50 .imgSide img {
        width: 100%;
    }

    .normal, 
    .reversed {
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .testimonials {
        background-color: #080808;
        height: auto;
    }

    .recentWork {
        height: auto;
    }

    .cardCont {
        flex-direction: column;
    }

    .carousel button {
        display: none;
    }
}