/* let's define first some root level variables */
:root{
    --bgc: #ddd;
    --dark: #555;
    --light: #fff;
    --shadow: 0px 1px 5px rgba(104,104,104,0.8);
}
/* make margin padding 0 and box-border */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background-color: #ccc;
    color: var(--light);
    font-family: Arial;
    margin: 1.5rem 2.5rem;
}
img{
    max-width: 100%;
}
.btn{
    background-color:var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration: none;
    border: none;
    border-radius: 3px;

}

/* make wrapper containing box grid */
.warpper{
    display: grid;
    grid-gap: 20px;
}
/* making navbar grid */
/* we are gonna hide toggle-btn firstly */
.toggle-btn{
    margin: 1rem 0;
 }
.toggle-btn .hide{
    display: none;
}
.navbar ul{
    display: grid;
    grid-gap: 20px;
    list-style: none;
    padding: 0px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

li a{
    display: block;
    background-color: var(--light);
    text-decoration: none;
    color: var(--dark);
    text-transform: uppercase;
    font-size: 1.2rem;
    text-align: center;
    padding: 0.8rem;
    box-shadow: var(--shadow);
}
li a:hover{
    background-color: var(--dark);
    color: var(--light);
}
/* css for the Main Container */
.main-container {
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 
    "pic-area pic-area membership"
    "pic-area pic-area membership-pro";
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.pic-area{
    grid-area: pic-area;
    min-height: 400px;
    background: url('../images/laptop.jpeg')no-repeat center center;
    background-size: cover;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-shadow: var(--shadow);
    
}
.pic-area h1{
    font-size: 2rem;
    margin-bottom: 0px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 15rem 7.5rem 0rem 0rem;
}
.pic-area p{
    font-size: 1.1rem;
    padding: 0.3rem 0.3rem;
}
.pic-area .btn{
    margin-top: 0.5rem;
    margin-left: 0.3rem;
    
}
.membership{
    grid-area: membership;
    background-color: #fff;
    color: var(--dark);
    box-shadow: var(--shadow);
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 1.5rem;
}
.membership h4{
    font-size: 2.5rem;
    font-weight: normal;
}
.membership-pro{
    grid-area: membership-pro;
    background-color: #fff;
    color: var(--dark);
    box-shadow: var(--shadow);
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 1.5rem;
}
.membership-pro h4{
    font-size: 2.5rem;
    font-weight: normal;
}

/* relative-works */
.relative-works{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.relative-works .box{
    text-align: center;
    padding: 1.5rem 2rem;
    background-color: #fff;
    color: var(--dark);
    box-shadow: var(--shadow);
}
.relative-works h5{
    padding: 0.5rem;
    font-size: 1.1rem;
}
/* info */
.info{
    background-color: #fff;
    color: var(--dark);
    margin: 1rem 0;
    padding: 3rem;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    box-shadow: var(--shadow);
}

.idea-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.idea-info h2{
    padding-bottom: 0.5rem;
}
.idea-info .btn{
    margin-top: 1.5rem;
}

/* gallery */
.gallery{
    margin: 1rem 0;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.gallery img{
    width: 100%;
    box-shadow: var(--shadow);
}
/* footer */
footer{
    background-color: var(--dark);
    text-align: center;
    padding: 0.8rem;
    margin-top:2rem;
    box-shadow: var(--shadow);
}

/* now Media Queries.. */
@media(max-width: 700px){
    .main-container {
        grid-template-areas: 
        "pic-area pic-area"
        " membership membership-pro";
    }
    .navbar ul{
        grid-template-columns: 1fr;
    }
    .info{
        grid-template-columns: 1fr;
    }
}
    @media (max-width: 500px) {
    .main-container {
        grid-template-areas: 
        "pic-area"
        " membership"
        "membership-pro";
    }
}