/*======================CSS RESET START============================*/
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
    margin: 0;
}

/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
    font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/*
    8. Create a root stacking context
  */
#root,
#__next {
    isolation: isolate;
}

html {
    scroll-behavior: smooth;
}



/*======================CSS RESET END============================*/

/*====================== Variables Start ============================*/

:root {

    --clr-primary-500: #11A4FF;
    --clr-primary-900: #0048B0;
    --clr-primary-300: #92C8EA;
    --clr-primary-100: #A4DCFF;

    --clr-secondary-500: #EF3F47;
    --clr-secondary-900: #B4212A;

    --clr-neutral-900: #000001;
    --clr-neutral-800: #060B10;
    --clr-neutral-700: #0B1218;
    --clr-neutral-200: #CCE3EB;
    --clr-neutral-100: #E8F9FF;
    --clr-neutral-50: #fbfeff;


    --clr-bg: var(--clr-primary-100);
    --clr-bg-medium: var(--clr-primary-300);
    --clr-bg-dark: var(--clr-neutral-800);
    --clr-bg-very-dark: var(--clr-neutral-900);

    --clr-bg-dark-opacity-1: hsla(0, 0%, 0%, .25);
    --clr-bg-dark-opacity-2: hsla(0, 0%, 0%, .45);

    --clr-text: var(--clr-neutral-700);
    --clr-text-headlines: var(--clr-primary-500);
    --clr-text-inverted: var(--clr-neutral-100);

    --clr-cta-primary-default: var(--clr-secondary-500);
    --clr-cta-primary-hover: var(--clr-secondary-900);
    --clr-cta-text: var(--clr-neutral-50);

    --clr-cta-secondary-default: var(--clr-primary-500);
    --clr-cta-secondary-hover: var(--clr-primary-900);

    --ff-title: "Lexend Deca", sans-serif, system-ui;
    --ff-para: "PT Sans", sans-serif, system-ui;

    --bg-element-header: url(/images/Images/bg_header.svg);
    --bg-element-header-m: url(/images/Images/bg_header_mirrored.svg);
    --bg-element-services: url(/images/Images/bg_services.svg);
    --bg-element-contact: url(/images/Images/bg_contact.svg);



    --max-width: 1440px;
    --gradient: linear-gradient(to top right, #11A4FF, #0048B0);


}




/*====================== Variables End ============================*/




/*============== Utility =========*/
.highlight_blue {
    color: var(--clr-primary-500);
}

.highlight_red {
    color: var(--clr-secondary-500);
}

/*============== Utility =========*/

body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--ff-para);

    width: 100%;

    background-image: var(--bg-element-header-m);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;

}

h1,
h2,
h3 {
    font-family: var(--ff-title);
    font-weight: 700;
    font-size: 2.5rem;
}

button,
input[type="submit"] {
    all: unset;

    font-weight: 600;
    font-size: 1.25rem;
    color: var(--clr-cta-text);

    padding: 1rem 2.5rem;
    border-radius: 8px;

    align-self: flex-start;
}

.cta_primary {
    background-color: var(--clr-cta-primary-default);
    color: var(--clr-cta-text);

}

.cta_primary:hover,
.cta_primary:focus {
    background-color: var(--clr-cta-primary-hover);
    cursor: pointer;
}


.cta_secondary {
    background-color: var(--clr-cta-secondary-default);
    color: var(--clr-cta-text);

}

.cta_secondary:hover,
.cta_secondary:focus {
    background-color: var(--clr-cta-secondary-hover);
    cursor: pointer;
}


.title {
    font-family: var(--ff-title);
    line-height: 1.125;
    font-weight: 600;
    font-size: 2.5rem;
}

.subtitle {
    font-family: var(--ff-para);
    line-height: 1.5;
    font-weight: 500;
    font-size: 1.5rem;
}




/*==============nav start ===================*/


.nav__wrapper {
    padding-inline: 10%;
    display: block;
    width: 100%;
    background-color: var(--clr-bg-very-dark);
    border-bottom: 2px solid var(--clr-primary-500);
}

.nav {

    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-block: 16px;


}

.menu {
    display: none;
}

.nav__links__list {
    align-items: center;
    list-style: none;
    display: flex;
    gap: 32px;
}

.nav_link>a {
    all: unset;

    cursor: pointer;
    color: var(--clr-text-inverted);
    font-size: 1.5rem;

    position: relative;

}

.nav_link>a:hover {
    color: var(--clr-primary-500);
}

/*============== nav end ===================*/

/*============== hero start ===================*/


/* wrappers present only on sections with bg-color*/

.hero__wrapper {
    padding-inline: 10%;
}



.hero {

    max-width: var(--max-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 24px;
    grid-template-areas:
        "content content content content content content image image image image";
    align-items: center;
}



.hero__img {
    grid-area: image;
    width: clamp(25vw, 25rem, 32rem);
    align-self: end;
}

.hero__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-grow: 1;
    padding-block-start: 2rem;
    padding-block-end: 4rem;

}

.hero__text__header {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-block-end: 1.5rem;
}

.hero__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.125;
    margin-block-start: 1.5rem;
    max-width: 25ch;
}


.hero__title__caption {
    color: var(--clr-neutral-700);
    margin-block-end: 24px;
    line-height: 1.125;
    font-size: 1.75rem;
    font-weight: 500;
}

.emphasis {
    font-weight: 600;
}

.hero__subtitle {
    font-size: 1.25rem;
    line-height: 1.5;
    margin-block-end: 24px;
    max-width: 65ch;
}

button>a {
    text-decoration: none;
    color: inherit;
}

/*============================Services===============*/
/*added wrapper for max-width*/

.services__wrapper {
    padding-inline: 10%;
    padding-block: 2rem;
    background-color: var(--clr-bg-dark);
    background-image: var(--bg-element-services);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top right;

}

.services {
    margin-inline: auto;
    max-width: var(--max-width);
    display: flex;
    flex-direction: column;
    gap: 64px;
    overflow: hidden;

    padding-block-end: 160px;

    color: var(--clr-text-inverted);

}



.intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 6rem 4rem;
}


.intro>.title {
    display: block;
}

.intro>.subtitle {
    max-width: 75ch;
    display: block;
    color: var(--clr-text-inverted);
}


.services__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 128px;

    grid-template-areas:
        "card_one card_two"
        "card_three card_four";
}

.services__cards:nth-child(1) {
    grid-area: card_one;
}

.services__cards:nth-child(2) {
    grid-area: card_two;
}

.services__cards:nth-child(3) {
    grid-area: card_three;
}

.services__cards:nth-child(4) {
    grid-area: card_four;
}

.card {
    box-sizing: border-box;

    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 1rem;
    background-color: var(--clr-bg-dark-opacity-1);
    transition: ease-in-out all 250ms;
    border: transparent 1px solid;
}

.card:hover {
    transform-origin: center;
    background-color: var(--clr-bg-dark-opacity-2);
    border: var(--clr-primary-300) 1px solid;
}

.card__title {
    color: var(--clr-text-headlines);
    font-size: 2rem;
    font-weight: 600;
}

.card__description {
    font-size: 1.25rem;
}

hr {
    color: var(--clr-secondary-500);
    display: block;
    margin-block-end: 1rem;
}

/* List in cards - benefits

.card > ul{
  color:var(--clr-cta-secondary-default);
  line-height: 2;
  font-size: 1.5rem;
  font-weight: 600;

}

.card > ul > li{
  color:var(--clr-text-inverted);
  font-size: 1.25rem;
  font-weight: 500;
}

*/



/*===================== form ========================*/


.contact__wrapper {
    padding-block: 2rem 0;
    padding-inline: 10%;
    background-color: var(--clr-bg-medium);
    background-image: var(--bg-element-contact);
    background-repeat: no-repeat;
    background-position: top right;
}


.contact {
    max-width: var(--max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;

}


.contact>.intro {
    max-width: 50%;
}

.contact>.intro>.title {
    color: var(--clr-text);
}

.contact>.intro>.subtitle {
    color: var(--clr-text);
    max-width: 50ch;
}

.contact>.content {
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 6rem;

    grid-template-areas:
        "form contact_image"
        "form contact_image";

}



form {
    grid-area: form;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
}

.contact__image {
    min-width: 20rem;
    margin-block-start: -15%;
    grid-area: contact_image;
    display: block;
}

.contact__image>img,
.contact__image>* {
    width: 100%;
}


form>div>input,
form>div>textarea {
    width: 100%;
}

textarea {
    resize: vertical;
    height: 4rem;
    max-height: 20rem;

}

label {
    padding-inline-start: .25rem;
    font-size: 1.25rem;
    color: var(--clr-text);
    font-family: var(--ff-para);
    font-weight: 600;
    margin-block-end: .25rem;
}

input:not([type="submit"]),
textarea {
    padding: .5rem;
    font-size: 1.5rem;
    border-radius: 8px;
    outline: none;
    border: 2px solid var(--clr-neutral-200);
}

input:not([type="submit"]):hover,
input:not([type="submit"]):focus,
textarea:hover,
textarea:focus {
    outline: 2px solid var(--clr-primary-500);
    cursor: pointer;
}


input[type="submit"] {
    margin-block-start: 64px;
    background-color: var(--clr-cta-primary-default);
    color: var(--clr-cta-text);
    align-self: flex-start;
}

/* ==================== About ======================= */


.about_me__wrapper {
    padding-block: 6rem;
    padding-inline: 10%;
    background-color: var(--clr-neutral-200);
}

.about_me {
    margin-inline: auto;
    max-width: var(--max-width);

    display: grid;
    display: grid;
    grid-template-columns: 55%, 1fr;
    grid-template-rows: auto;
    gap: 128px;

    grid-template-areas:
        "content image"
        "content image";

}


.about_me__right {
    grid-area: image;
    min-width: 20rem;
    margin-block-start: -15%;
    display: block;
}

.about_me__right>img {
    width: 100%;
}


.about_me__left {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 75%;
}

.about_me__left>.title {
    display: block;
    color: var(--clr-text);
}

.about_me__left>.subtitle {
    color: var(--clr-text);
    max-width: 75ch;
    display: block;
}






/*============banner============*/

.banner__wrapper {
    padding-inline: 10%;
    background-color: var(--clr-primary-900);
    background-image: var(--gradient);
    background-size: cover;
    background-repeat: no-repeat;
}



.banner {
    margin-inline: auto;
    max-width: var(--max-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 3rem;
}

.banner__left>p:first-of-type {
    font-size: 2rem;
    font-weight: 600;
    color: var(--clr-neutral-50);
    max-width: 30rem;
}






/*===========footer===============*/


footer {
    border-top: 2px solid var(--clr-secondary-500);
    color: var(--clr-cta-text);
    padding-block: 1.5rem;
    padding-inline: 10%;
    background-color: var(--clr-bg-very-dark);
}

.footer {
    margin-inline: auto;
    max-width: var(--max-width);
    padding-block: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
}


.footer__top {

    display: flex;
    justify-content: space-between;
    align-items: center;

}


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

.footer_left>img:first-of-type {
    height: 50px;
}

.footer__bottom {
    display: flex;
    width: 100%;
    justify-content: center;
    opacity: .5;
}


.footer_right {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 50ch;
    opacity: .9;
}

.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.socials>a {
    display: block;
    height: 35px;
}

.socials>a>img {
    height: 100%;
}

.socials>a {
    display: block;
    height: 35px;
}

.socials>a>img {
    height: 100%;
    opacity: .75;
    transition: opacity 250ms ease;
}

.socials>a>img:hover {
    opacity: 1;
}

/*=======================animation================*/

@keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@media (prefers-reduced-motion: no-preference) {
    .enter-animation {
        animation: enter 500ms 1 ease-in;
    }
}



@media only screen and (max-width: 970px) {


    .nav {
        position: relative;
    }

    .menu {
        display: block;
        width: 32px;
        height: 32px;
        cursor: pointer;
    }

    .menu:hover {
        opacity: .8;
    }



    .nav__links__list {
        display: none;
        position: absolute;
        right: 0;
        flex-direction: column;
        background-color: var(--clr-bg-dark);
        border: 1px solid var(--clr-cta-secondary-default);
        border-radius: .5rem;
        padding: 2rem;

        -webkit-box-shadow: 0px 10px 20px -3px var(--clr-bg-dark);
        box-shadow: 0px 10px 20px -3px var(--clr-bg-dark);

    }


    .open {
        margin-top: .5rem;
        display: flex;
    }



    .hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content";
    }



    .hero__img {
        display: none;
    }


    .services__cards {

        grid-template-columns: 1fr;
        grid-template-areas:
            "card_one"
            "card_two"
            "card_three"
            "card_four";
    }



    .contact__wrapper {
        padding-block-end: 4rem;
    }

    .contact>.intro {
        max-width: 100%;
    }

    .contact>.content {

        grid-template-columns: 1fr;
        grid-template-areas:
            "form";

    }

    .contact__image {
        display: none;
    }

    .about_me {
        display: flex;
        flex-direction: column;
        gap: 3rem;

    }

    .about_me__left {
        max-width: 100%;
    }

    .about_me__right {
        display: none;
    }



    .footer__top {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .footer>* {
        align-items: center;
    }

}


@media only screen and (max-width: 750px) {

    .hero__title {
        line-height: 1.25;
    }

    .banner {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

}

@media only screen and (max-width: 500px) {

    body {
        min-width: 340px;
    }




    .cta_primary,
    .cta_secondary,
    input[type=submit] {
        align-self: unset;
        text-align: center;
    }


    .card {
        padding: 1rem;
        gap: 12px;

    }

}