:focus {
    outline: none;
    text-decoration: none;
}
:root{
    /* Primary colors */

    --light-red: hsl(356, 100%, 66%);
    --very-light-red:  hsl(355, 100%, 74%);
    --very-dark-blue: hsl(208, 49%, 24%);
    --white: (text): hsl(0, 0%, 100%);

    /* Neutral colors */

    --greyish-blue-ftr-txt: hsl(240, 2%, 79%);
    --very-dark-greyish-blue: hsl(207, 13%, 34%);
    --very-dark-black-blue: hsl(240, 10%, 16%);

        /* Gradient colors */

    --very-light-red-gnt: hsl(13, 100%, 72%);
    --light-red-gnt: hsl(353, 100%, 62%);
    --very-dark-blue-gnt: hsl(237, 17%, 21%);
    --Very-dark-desaturated-blue-gnt:hsl(237, 23%, 32%);

    --transition: all .3s ease;
}
*,
*::before,
*::after,
a{
    box-sizing: border-box;
    text-decoration: none;
}
img{
    display: block;
    max-width: 100%;
}
body{
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}
h1, h2, p{
    font-family: 'Overpass', sans-serif;
}
.head{
    background: url(../assets/images/bg-pattern-intro-mobile.svg) no-repeat, 
    linear-gradient(180deg, var(--very-light-red-gnt), var(--light-red-gnt));
    background-size: 400%;
    background-position: 36% 35%;
    color: white;
    text-align: center;
    height: 80vh;
    padding: 3em 1.5em;
    border-bottom-left-radius: 6em;
    margin-bottom: 6em;
}
.head-content{
    padding: .6em;
}
.head-txt{
    margin-bottom: 4em;
}
.head-txt h1{
    font-size: clamp(16px, 3rem, 8vw);
    font-weight: 700;
}
.head-txt p{
    font-size: clamp(1rem, 1.2rem, 2.5rem);
}
.logo{
    width: 100px;
}
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5em;
}
.nav ul{
    display: none;
}
/* hamburger */
.hamburger{
    cursor: pointer;
}
.bar{
   display: block; 
   width: 32px;
   height: 3px;
   background: white;
   margin-block: 5px;
}

/*    .hamburger-animation     */

.hamburger .active .bar:nth-child(2){
    opacity: 0;
}
.hamburger .active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
}
.hamburger .active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
}

.nav-list{
    text-align: center;
    transition: var(--transition);
}

.call-to-actn a{
    font-family: 'Ubuntu', sans-serif;
    border-radius: 2em;
    padding: 1em 1.4em;
    font-weight: 600;
}
.call-to-actn-1{
    color: var(--light-red);
    background-color: white;
    margin-right: 1vw;
    margin-bottom: 1em;
    transition: var(--transition);
}
.call-to-actn-1:hover{
    color: white;
    text-decoration: none;
    background-color: rgb(255, 255, 255, .2);
}

.call-to-actn-2{
    border: 1px solid white;
    color: white;
    margin-left: 1vw;
    transition: var(--transition);
}
.call-to-actn-2:hover{
    color: var(--light-red);
    background-color: white;
}
.section{
    margin-block: 5em;
}
.section-2{
    background: url(../assets/images/bg-pattern-circles.svg) no-repeat, linear-gradient(var(--very-dark-blue-gnt),
     var(--Very-dark-desaturated-blue-gnt)) no-repeat ;
     background-position: 50% -350%;
     background-size: 160%;
     padding-block: 4em;
     border-radius: 0 6em 0 6em;
     margin-top: 16em;
     color: white;
}
#section-2-head{
    font-size: 2.5rem;
    color: white;
}
#section-2-paragraph{
    color: var(--greyish-blue-ftr-txt);
}
.phones{
    margin-block-start: -15.5em;
}
.main{
    margin-bottom: 6em;
    font-family: 'ubuntu' sans-serif;
}
.main 
h2, 
p{
    padding-inline: 6vw;  
}
.main h2{
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--very-dark-blue);
    margin-top: 1.8em;
    padding-inline: em;
}
.main p{
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--very-dark-greyish-blue);
}
footer{
    background: var(--very-dark-black-blue);
    border-top-right-radius: 6em;
    padding: 5em;
    line-height: 1.7;
    font-family: 'ubuntu', sans-serif;
}
footer img{
    margin: 0 auto;
    margin-bottom: 4.7em;
}
footer a{
    color: var(--greyish-blue-ftr-txt);
    font-family: 'Overpass', sans-serif;
    font-size: 1.14rem;
    font-weight: 500;
    line-height: 2;
}
footer a:hover, 
footer a:active{
    text-decoration: underline;
}
footer li{
    list-style-type: none;
}
.main-footer__list{
    margin-bottom: 1em;
}
.main-footer__link{
    font-family: 'Ubuntu', sans-serif;
    color: white;
}
.product-link,
.company-link{
    margin-bottom: 2.8em;
}
@media (min-width:786px){
    body{
        font-size: 19px;
    }
    .head-content{
        padding-top: 3em;
    }
    .head{
        height: 100vh;
    }
    .hamburger{
        display: none;
    }

    /* nav styling starts here */
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5em;
        width: 80%;
        margin-inline: auto;
    }
    .nav ul{
        display: block;
        list-style-type: none;
    }
    .nav-links{
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .nav-links .nav-item{
        font-weight: 600;
        color: hsl(240, 28%, 95%); 
        position: relative;
        padding: 1.4em;
        transition: var(--transition);
    }
    .nav-links ul{
        display: flex;
        gap: 45px;
    }
    .nav-links li { 
        position: relative;
        font-size: 1rem;
    }
    .nav-links .nav-item:hover{
        text-decoration: underline;
    }
    .nav-links i{
        padding-left: .5em;
    }
    .nav-links svg{
        transition: var(--transition);
    }
    .nav-links li:hover svg{
        transform: rotate(180deg);
    }

    /* nav dropdown effects */

    .dropdown{
        display: none;
    }
    .dropdown a{
        font-weight: 200;
    }
    .nav-links li:hover .dropdown{
        display: inline-block;
        position: absolute;
        top: 40px;
        left: -20px;
        background: whitesmoke;
        border-radius: .3em;
        padding: 1.5em 2.4em 1.5em .8em;
        box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
        width: 190px;
    }
    .nav-links li:hover .dropdown ul{
        display: block;
        padding: 0em 1.1em;
        text-align: left;
    }
    .nav-links ul li:hover .dropdown a{
        line-height: 2.5;
        padding: .68em;
        color: var(--Very-dark-desaturated-blue-gnt);
        transition: var(--transition);
    }
    .dropdown a:hover{
        font-weight: 600;
    }
    #btn-home{
        font-size: 1rem;
        border-radius: 2em;
        padding: 1.1em 2.2em;
        color: var(--light-red);
        background-color: white;
        transition: var(--transition);
    }
    .nav-links__cta #btn-home:hover{
        color: white;
        text-decoration: none;
        background-color: rgb(255, 255, 255, .4);
    }
    .head{
        background: url(../assets/images/bg-pattern-intro-desktop.svg) no-repeat, 
        linear-gradient(90deg, var(--very-light-red-gnt), var(--light-red-gnt));
        background-position: 25% center;
    }
    .main{
        text-align: left;
        padding-top: 4em;
        overflow: hidden;
    }
    .main .main-first-child{
        font-size: 2.5rem; 
    }
    .main-first-child{
        text-align: center;
    }
    .section{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: space-between;
        grid-template-areas: 
         "item1 item2";
    }
    .section-1{
        margin-right: -15em;
        margin-top: -8em;
        height: 100vh;
    }
    .img{
        grid-area: item2;
    }

    .main h2 p{
        padding-inline: 0;
    }
    .section-2 {
        background: url(../assets/images/bg-pattern-circles.svg)
         no-repeat, linear-gradient(var(--very-dark-blue-gnt), 
        var(--Very-dark-desaturated-blue-gnt)) no-repeat;
        background-position: -20% 90%;
        border-radius: 0 6em 0 6em;
        color: white;
        height: 100vh;
      }
    .phones{
        margin-block-start: -8em;
        width: 100%;
    }
    .article-3{
        align-self: center;
    }
    .section-3{
        margin-left: -14em;
        height: 100vh;
    }
    footer{
        display: grid;
        grid-template-columns: repeat(2,400px 1fr);
        text-align: left;
        width: auto;
    }
    footer ul{
        width: 100%;
        line-height: 2.3;
    }
    .footer-links{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10em;
        align-items: flex-start;
        margin-top: -3.2em;
    }
    .main-footer-link{
        line-height: 6.4;
    }
}
.attribution{
    color: var(--dark-greyish-blue);
    font-size: 1.1rem;
    text-align: center;
    margin-top: 1em;
    padding-block: 1.5em;
}