/* https://www.instagram.com/p/Ck77kI4Dp1k/ */
.container{
    width: 70%;
    margin: auto;
    /* border: solid; */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
#son{
display: grid;
grid-template-columns: repeat(2,1fr);
}
#son div{
width: 400px;
/* border: solid; */
margin: auto;
/* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
}
img{
width: 100%;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
box-shadow: none;
}

/* nav */


.nav{
display: grid;
/* border: solid; */
grid-template-columns: 150px 700px;
justify-content: space-between;
gap: 50px;
margin-bottom: 20px;
/* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
}
/* .nav div{
border: solid;

} */
/* / */
nav p:hover{
box-shadow: black;
/* background-color: black; */
/* color: gainsboro; */
background-color: #EEEEEE;

    }
    html
    nav{
        display: flex;
        height: 50px;
 
        margin: auto;
        /* background-color:aliceblue;; */
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        background-image:image-set();
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        position: sticky;
        top: 0px;
        width: 100%;
        background-color: #E0E0E0;
    }
    nav img{
        width: 12%;
        box-shadow: none;
        height: 50px;
        padding-bottom: 10px;
        /* padding-top: 5px; */
    }
    nav > div{
        display: flex;
        justify-content: space-between;
        width: 530px;
        cursor: pointer;
        font-weight: bold;
    }
    nav p {
        width: 80px;
        height: 30px;
        text-align: center;
        padding-top: 10px;
        border-radius: 10px;
        /* border: solid;  */
        font-size: 15px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;   
        /* font-weight: bold; */


    }
    #signin:hover{
        background-color: #424242;
        /* border: 0px; */
        box-shadow: #424242;
    }
    #signin{
        background-color: black;
        color: white;
        height: 40px;
        margin-top: 9px;
        width: 100px;
        border-radius: 10px;
        font-size: 15px; 
    }
    #signin a {
        color: white;
    }
    #main{
        width: 90%;
        margin: auto;
    }
/* footer part */

.footer {
background-color: #FCE4EC;
/* padding: 100px 0; */
padding-top: 50px;
margin-top: 50px;
padding-bottom: 20px;
margin-bottom: 50px;

}
.containe{
max-width: 1170px;
background-color: #FCE4EC;
margin: auto;
height: 300px;
}
.footer-col {
width: 25%;
padding: 0 15px;

}
.footer-col h4 {
font-size: 25px;
color: black;
/* text-transform: capitalize; */
margin-bottom: 40px;
font-weight: 500;
position: relative;


}
.footer-col h4::before{

content: '';
position: absolute;
left: 0;
bottom: -10px;
/* background-color: #e91e63; */
height: 2px;
box-sizing: border-box;
width: 50px;

}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 20px;
text-transform: capitalize;
color: #424242;
text-decoration: none;
font-weight: 300;
color: #424242;
display: block;
transition: all 0.5s ease;
}
.footer-col ul li a:hover {
color: #424242;
padding-left: 8px;
}
.footer-col .social a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(41, 37, 37, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #212121;
transition: all 0.5s ease;

}
.footer-col .social a:hover{

color: #24262b;
background-color: #9E9E9E;

}
.row{
display: flex;
flex-wrap: wrap;
}

ul{
list-style: none;

}

/* responsive */
/* medium */
@media screen and (min-width:651px) and (max-width:1024px){
    #son{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        
        }
        .nav{
            display: grid;
            /* border: solid; */
            grid-template-columns: 130px 300px;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;

}
}
@media screen and (min-width:320px) and (max-width:650px){
    #son{
display: grid;
grid-template-columns: repeat(1,1fr);


        }
        .nav{
            display: grid;
            /* border: solid; */
            grid-template-columns: 250px ;
            margin: auto;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;

}
}





@media (max-width:767px) {

.footer-col{
width:50%;
margin-bottom:30px;
}

}
@media (max-width:574px) {

.footer-col{
width:100%;
/* margin-bottom:30px; */
}

}