@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --font-poppins: 'Poppins', sans-serif;/*for headings*/
    --font-weight-poppins-600: 600;/*for headings*/

    --font-open-sans: 'Open Sans', sans-serif;/*for body*/
    --font-weight-open-sans-400: 400;/*for body*/
    --font-weight-open-sans-700: 700;/*for body*/

    --color-primary: hsl(322, 100%, 66%);

    --color-neutral-very-pale-cyan: hsl(193, 100%, 96%);
    --color-neutral-very-dark-cyan: hsl(192, 100%, 9%);
    --color-neutral-grayish-blue: hsl(208, 11%, 55%);
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-poppins);
    font-weight: var(--font-weight-poppins-600);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.8rem;
    font-family: var(--font-poppins);
    font-weight: var(--font-weight-poppins-400);
    color: var(--color-neutral-very-dark-cyan);
    line-height: 1.5;
}

header {
    background-image: url(../images/bg-hero-desktop.svg);
    background-color: var(--color-neutral-very-pale-cyan);
    display: flex;
    flex-direction: column;
   
    padding:  4.2rem 6.4rem 4.2rem 6.4rem;
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5.2rem;
    height:2.4rem;

}
.header-top img {
    height:2.4rem;
}

.header-btn-top {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.4rem;
    border: none;
    background-color: white;
    padding:  2.4rem 6.4rem;
    border-radius: 24px;
    font-weight: 600;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
}

.header-btn-top a {
    text-decoration: none;

}
.header-btn-top:hover {
    opacity: 0.6;
    cursor: pointer;
}
.header-bottom {
    display: grid;
    grid-template-columns: 42fr 58fr;
    align-items: center;
    justify-content: space-between;
    
    gap: 6.4rem;
}

.header-title{
    margin-bottom: 2.4rem;
    margin-right: 9.4rem;
    

}

.header-description {
    margin-bottom: 2.4rem;

}

.header-bottom img {
    width: 100%;
}

.header-btn-bottom {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.4rem;
    border: none;
    background-color: var(--color-primary);
    color: white;
    padding:  2.4rem 6.4rem;
    border-radius: 24px;
    font-weight: 600;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
}

.header-btn-bottom:hover {
    opacity: 0.5;
    cursor: pointer;

}
.header-btn-bottom a {
    text-decoration: none;
    color: white;
    opacity: 0.9;

}
main {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 16rem 0 36rem 0;
}

.hero {
    width: 85%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 3.2rem;
    

}
.container {
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 9px;
    height: 42rem;
   
}

.container img {
    width: 100%;
}
.hero-left {
    margin: 12rem;
    padding-right: 6.4rem;
}
.hero-right {
    padding: 2.4rem;
}

.cta {
    background-color: white ;
    padding: 6.4rem;
    border-radius: 11px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom:3%;
    left: 50%;
    transform: translate(-50%, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    

}

.cta-title {
    margin-bottom: 4.2rem;
}
.cta-btn {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.4rem;
    border: none;
    background-color: var(--color-primary);
    color: white;
    padding:  2.6rem 6.8rem;
    border-radius: 24px;
    font-weight: 500;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
    text-decoration: none;

}
.cta-btn:hover {
    opacity: 0.5;
    cursor: pointer;

}

footer {
    color: white;
    background-color: var(--color-neutral-very-dark-cyan);
    display: grid;
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-columns: 2fr 2fr 1fr;
    align-items: flex-start;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: var(--font-weight-open-sans-400);
    padding: 9.6rem 3.2rem 2.4rem 6.4rem;
    column-gap: 7.2rem;
}

.footer-logo {
    width: 14rem;
    filter: brightness(0) invert(1);
    grid-row: 1/2;
    grid-column: 1/-1;
}

.contact {
    grid-row: 2/-2;
    grid-column: 1/2;
    
    
}
.contact div {
    margin-bottom: 2.4rem;
}

.footer-block__location-details{
    display: grid;
    grid-template-columns: 5fr 95fr;
    margin-right: 6.8rem;
   
}
.footer-block__phone-details {
    display: grid;
    grid-template-columns: 5fr 95fr;
}
.footer-block__email-details{
    display: grid;
    grid-template-columns: 5fr 95fr;
}
.footer-nav{
    grid-row: 2/-2;
    grid-column: 2/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "about career"
                         "what blog"
                         "faq contact";

    row-gap: 2.4rem;
    column-gap: 2.4rem;

}

.footer-nav p:hover {
    opacity: 0.5;
    cursor: pointer;
    text-decoration: underline;
    
}

.footer-block__about-us {
    grid-area: about;
}
.footer-block__what-we-do {
    grid-area: what;
}
.footer-block__faq {
    grid-area: faq;
}
.footer-block__career {
    grid-area: career;
}
.footer-block__blog {
    grid-area: blog;
}
.footer-block__contact-us {
    grid-area: contact;
}



.footer-block-social-component{
    grid-row: 2/-2;
    grid-column: 3/4;
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
   
    
}

.footer-block-social-component i{
    color: white;
    font-size: 1.2rem;
    border: 1px solid white;
    border-radius: 50%;
    padding: 0.8rem;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.footer-block-social-component i:hover{
    color: var(--color-primary);
    cursor: pointer;
    border: 1px solid var(--color-primary);
    transition: 0.3s ease-in-out;
}
.footer-block__copyright{
    grid-row: -1/-2;
    grid-column: 3/4;
    text-align: left;
    font-size: 1rem;
}

.attribution {
    grid-row: -1/-2;
    grid-column: 2/3;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;

}

.attribution a {
    color: white;
    text-decoration: none;
}

@media (max-width: 1200px) {
    html {
        font-size: 56.25%;
    }
    
}

@media (max-width: 1080px) {
    html {
        font-size: 50%;
    }
    
}

@media (max-width: 975px) {
    html {
        font-size: 45%;
    }
    
}

@media (max-width: 845px) {
    html {
        font-size: 62.5%;
    }

    header {
        padding: 3.2rem 3.2rem 0 3.2rem;
    }
    .header-top {
        margin-bottom: 6.4rem;
       
    }
    
    .header-btn-top {
        padding: 1.6rem 3.2rem;
    }

    .header-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    


        padding: 0 3.2rem;
    }

    .bottom-left {
        margin-bottom: 2.4rem;
        
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .header-title {
        margin-right: 0rem;
    }
    
    .container {
       flex-direction: column-reverse;
      
       
        height: 72rem;
       
    }
    .container:nth-child(2) {
        flex-direction: column;
    }
    .hero-left {
        margin: 6rem;
    }
    .hero-right {
        padding: 6.4rem;
    }

    footer{
        padding: 6.4rem 3.2rem;
        grid-template-columns: 1fr;
        grid-template-rows:1fr 5fr  5fr 1fr 1fr 1fr;
        column-gap: 0;
        row-gap: 2.4rem;
     
     
    }

    .footer-logo {
        grid-row: 1/2;
        grid-column: 1/-1;
    }

    .contact {
        grid-row: 2/3;
        grid-column: 1/-1;
    }

    .footer-nav {
        grid-row: 3/4;
        grid-column: 1/-1;
    }

    .footer-block-social-component {
        grid-row: 4/5;
        grid-column: 1/-1;
        
    }

    .footer-block__copyright {
        grid-row: 5/6;
        grid-column: 1/-1;
    }

    .attribution {
        grid-row: 6/7;
        grid-column: 1/-1;
    }








    .footer-nav {
        grid-area: "footer-nav";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: "about"
                             "what"
                             "faq"
                             "career"
                             "blog"
                             "contact";
    }

  


    .footer-block-social-component {
        width: 100%;
    }



}