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


/* Font and Text Formatting */
body {
  font-family: 'Public Sans', sans-serif;
  font-weight: 400;
}

h1, h2 {
  font-weight: 700;
}

p {
  font-weight: 300;
}

button {
  font-weight: 600;
}

.section1 h1{
    font-weight: 300;
}

#grid2 div h6{
    color: hsl(233, 8%, 62%);
    font-size: small;
    font-weight: 300;
}

.section2 p, .section1 p, nav a{
    color:  hsl(233, 8%, 62%);
}

#grid2 div p{
    color: hsl(233, 8%, 62%);
}

.section4 div ul li a, .section4{
    color: hsl(0, 100%, 100%);
}

.section4 h6{
    color: hsl(233, 8%, 62%);
    font-weight: 300;
    margin-top: 25px;
}

a{
    text-decoration: none;
}

.section2 h1, .section2 h3{
    font-weight: 300;
}



.section2 > *, .section2 h1, .section1 h1{
    margin-bottom: 2px;
}

.section1 h1{
    margin-bottom: 25px;
}

/* Navbar */
nav {
    display: flex;
    padding: 30px 25px;
    background-color: white;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.nav_options{
    display:none;
}

nav picture img{
    display: inline-block;
}

nav li, nav button{
    display: inline-block;
    margin-top: 0px;
    padding-top: 0px;
}

nav button{
    display: none;
}





/* Section 1 */
.section1 button{
    margin-top: 25px;
}

.section1-grid1{
    display: grid;
}

.section1-grid1 picture{
    grid-area: 1 / 1; 
}

.section1 button{
    align-self: center;
}

.section1-grid2{
    justify-content: center;
    align-items: center;
}

.section1-grid1 {
    width: 100%;
    height: auto;
}



/* Section 2 */
.section2 :nth-child(1), #grid1 div h3{
    margin-bottom: 30px;
}

#grid1 div picture img{
    justify-content: center;
    align-items: center;
    
}

.section2{
    background-color: hsl(220, 16%, 96%);
}

/* Section 3 */

#grid2 picture img{
    width: 100%;
    border-radius: 7px;
    
}

#grid2 div{
    border-radius: 10px;

}

#grid2{
    padding:20px;
    gap:1rem;
    height: 100%;
    box-sizing: border-box;
}

#grid2 div{
    background-color:hsl(0, 100%, 100%); ;
}
.section3{
    background-color: hsl(0, 0%, 98%);
}



/* Section 4 */
.section4{
    background-color:  hsl(233, 26%, 24%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 78px;
}

.social_media_icons{
    display: flex;
    gap: 1rem;
    margin: 40px auto;  
}

.section4 li{
    margin-bottom: 15px;
}



#grid2 div h4:active, .section4 a:active
, #grid2 div h4:hover, .section4 a:hover
{
    cursor: pointer;
    color: hsl(192, 69%, 51%);
}




#section ul{
    list-style: none;
}

#section{
    padding: 60px 40px;
}



/* Hamburger Menu */
.hamburger-menu-div.menu-active{
    right: 0;
}

.hamburger-menu {
  z-index: 1000;
  overflow: hidden;
}

.hamburger-menu.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);}



/* Buttons */

button:hover{
    cursor: pointer;
}

button{
    border:none;
    background: linear-gradient(45deg,  hsl(192, 69%, 51%), hsl(136, 64%, 51%)) ;
    color: hsl(0, 100%, 100%);
    width: 150px;
    height: 40px;
    border-radius: 25px;
}


/* Desktop Layout */
@media (min-width:820px){
    .grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap:1.5rem
    }

    #section{
        padding: 40px 78px;
    }

    body{
        overflow-x: hidden;
    }

    /* Hamburger Menu */
    .hamburger-menu{
        display: none;
    }

    .hamburger-menu-image{
        display: none;
    }

    /* Section 1 */
    .section1{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "left right";
        gap: 1.5rem;
    }

    .section1 > *{
        min-width: 0;
    }

    .section1-grid1{
        grid-area: right;
    }

    .section1-grid2{
        grid-area: left;
    }

    .section1-grid1{
        position: relative;
    }

    .section1 div p{
        text-align: left;
    }

    .section1-grid1 :nth-child(1){
        position: absolute;
        right: -150px;
        top: -130px;   
    }
    
    .section1-grid1 :nth-child(2){
        position: absolute;
        right: -150px;
        top: -280px;
    }

    .section1-grid1 :nth-child(1){
        transform: scale(0.5);
    }
    
    /* Section 3 */
    .section3 h2{
        font-size:40px ;
        padding-left:20px ;
        padding-bottom: 40px;
        font-weight: 300;
    }


    /* Section 4 */
    #grid2 img{
        min-height: 200px;
    }

    #grid2 div h4{
        font-size: 10px;
    }

    #grid2 div h4, #grid2 div h6,#grid2 div p{
    margin: 10px 20px;
    font-size: 80%;
    }

    .section2,.section3,.section4{
        padding:10px ;
    }

    /* Navbar */
    nav{
        height: 40px;
        width: 100%;
        padding-right: 1px;
    }
    nav ul li{
        padding-left: 25px;
    }

    nav button{
        margin-right: auto;
        display: inline-block;
        /* align-self: flex-end; */
    }

    .nav_options{
        display: flex;
        gap:15px;
        padding-right: 15px;
    }

    
    /* Hover Animation */
    nav ul li a:hover{
        color: hsl(192, 69%, 51%);
        text-decoration: underline hsl(192, 69%, 51%) 3px ;
        text-underline-offset:21px; 

    }

    

    
}




/* Mobile Layout */
@media (max-width: 819px) {
    
    /* Section 1 */
    .section1{
        display: flow-root;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
       
    } 

    .section1-grid1 {
        position: relative;
        height: 700px; 
        overflow: hidden;
        left: -40px;
        margin: 0;
        width: 100vw;
        top:-180px
    }

    .intro_image img {
        width: 100%;
        display: block;
    }

    .mockup_image picture {
        position: absolute;
        top: -290px; 
        transform: translateX(-50%);
        width: 100%;
        max-width: 500px;
        z-index: 2;
    }

    .section1-grid2{
        text-align: center;
    }

    .section1-grid1 picture{
        width: 100%;
        height: auto;
        display: block;
    }

    /* Section 2 */
    .section2{
        text-align: center;
    }

    #grid1{
        gap:1.5rem;
        padding-left:70px ;
        padding-right:70px ;
        display: flex;
        flex-direction: column; 
        align-items: center;       
    }

    #grid1 div{
        margin-bottom: 70px;
        text-align: center;
    }

    /* Section 3 */
    #grid2 div p{
        font-size: 25px;
    }

    #grid2 div h4, #grid2 div h6,#grid2 div p{
        margin: 20px 50px;
    }

    #grid2 div h4{
        font-weight:300 ;
        font-size: 28px;
    }

    .section3{
        text-align: center;
    }

    .section3 h2{
        font-size:40px ;
        padding-left:20px ;
        font-weight: 300;
        align-self: center;
    }

    #grid2 div{
        transform: scale(0.8);
    }

    #grid2{
        display: grid;
        grid-template-rows: repeat(4, 750px);
        gap:1.5rem;
    }

    /* Section 4 */
    .section4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        text-align: center;
    }

    .section4 ul {
        display: flex;
        flex-direction: column; 
        align-items: center;    
        gap: 0.5rem;           
        padding: 0;
        margin-top: -25px;
    }

    .section4 button, .section4 h6 {
        text-align: center;
    }

     .section4 ul li:nth-child(even) {
        position: relative;
    }


    /* Triangular stagger effect for footer section*/
    .section4 ul li:nth-child(odd) {
        position: relative;
    }

    
    /* Overlay */
    .overlay {
       z-index: 999;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }

    .overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /* Hamburger Menu */

    .hamburger-menu-image-div{
        cursor:pointer;
    }

    .hamburger-menu-div{
        width:100%;
        display: flex ;
        justify-content: center;
    }

    .hamburger-menu{
        background-color: white;
        max-width:349px;
        width: 90%;
        max-height: 280px;
        padding: 70px;
        border-radius: 10px;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        pointer-events: none;
        transition: 0.1s ease;
    }

    .hamburger-menu {
        z-index: 1000;
    }

    .hamburger-menu.active {
        opacity: 1;
        pointer-events: all;
        transform: translate(-50%, -50%) scale(1);
    }

    .hamburger-menu ul{
        display: flex;
        flex-direction: column; 
        align-items: center;    
        gap: 0.5rem;           
        padding: 0;
        margin-top: -25px;
        list-style: none;
        text-align: center;
    }

    .hamburger-menu ul li{
        margin-bottom: 15px;
    }

    .hamburger-menu ul li a{
        color: black;
    }

    /* Navbar */
    nav{
        overflow: hidden;
    }


     /* Hover Animation */
    .hamburger-menu ul li a:hover{
        color: hsl(192, 69%, 51%);
        text-decoration: underline hsl(192, 69%, 51%) 3px ;
        text-underline-offset:5px; 

    }

    
}