/* Global Variables */
:root {
    --Pink: rgb(255, 82, 191);
    --VeryPaleCyan: rgb(235, 251, 255);
    --VeryDarkCyan: rgb(0, 37, 46);
    --GrayishBlue: rgb(128, 141, 153);
    --White: #fff;
    --Black: #000;
}


/* Global Styles */
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.container-fluid {
    padding: 0;
    margin: 0;
}


/* Top Call-To-Action */

.top-cta {
    background-color: var(--VeryPaleCyan);
    background-image: url('../img/bg-hero-mobile.svg');
    background-size: stretch;
    background-repeat: no-repeat;     
 }
 
nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.huddleLogo {
    max-width: 60%;
}

 .cta-btn {
    font-weight: 700;
    background-color: var(--Pink);
    color: var(--White);
    border-radius: 25px;
    padding: 8px;
 }

 .heading p {
     font-size: 22px;
 }

 .heading img {
     max-width: 100%;
     margin-top: 4rem;
 }

 /* 1200px+ Viewpoint */
@media (min-width: 1200px){

   .cta-btn {
       padding: 1rem 2.5rem;
       font-size: 20px;
       border-radius: 25px;
   }
   
    .top-cta {
        padding: 2rem 1rem 8rem 1rem;
        margin-bottom: 10rem;
    }
    
    #mockups {
        margin-top: 0;
        min-width: 115%;
        padding-right: 3rem;
    }

}
 

 /* Features */
 .feature-group {
     text-align: center;
     border-radius: 25px;
     box-shadow: 2px 2px 10px 0px rgba(87, 112, 136, 0.35);
     margin: 2rem 1rem 4rem 1rem; 
 }

.feature-group p {
     color: var(--GrayishBlue);
     padding-top: .5rem;
 }

 .feature-group img {
     max-width: 100%;
     padding-top: 5rem;
 }

 /* 1200px+ Viewpoint */
 @media (min-width: 1200px){
     .feature-group {
         max-width: 90%;
         margin: 2.5rem auto;
     }

     .feature-group h2,
     .feature-group p {
         padding-left: 5rem;
     }

     .feature-group img {
         padding: 5rem;
     }
 }



 /* Bottom Call-To-Action */
 .bottom-cta {
     width: 90%;
     padding: 2rem;
     margin-top: 10rem;
     margin-bottom: -5rem;
     position: relative;
     z-index: 1;
     background-color: var(--White);
     border-radius: 25px;
     box-shadow: 2px 2px 10px 0px rgba(87, 112, 136, 0.35);
 }

 /* 1200px+ Viewpoint */
 @media (min-width: 1200px) {
    .bottom-cta {
        width: 60%;
     }
 }


 /* Footer */
.contact {
    background-color: var(--VeryDarkCyan);
    color: var(--White);
    padding: 10rem 0 1rem 0;
}

.contact a {
    text-decoration: none;
    color: var(--White);
    font-size: 22px;
}

.contact .row {
    padding-left: 1rem;
}

.logo-footer {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(4deg) brightness(103%) contrast(103%);
}

.contact-links li {
    list-style: none;
    padding: .5rem 0;
}


.social-links {
    margin: 0 auto;
    text-align: center;
    padding: .5rem;
}


.social-links i {
    color: var(--White);
    border: 1px solid var(--White);
    padding: 25px;
    border-radius: 40px;
}

.social-links i:hover {
    color: var(--Pink);
}

.copy {
    margin-top: 40px;
}

.attribution {
    font-size: 11px; 
    text-align: center;
    margin-left: 0;
}
    
.attribution a {
    font-size: 11px;
    color: hsl(228, 45%, 44%); 
}

.attribution a:hover {
    color: var(--Pink);
}

/* 1200px+ Viewpoint */
@media (min-width: 1200px) {
    
    .contact {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .social-links {
        margin-top: 5rem;
    }
    
}