*{
margin:0;
padding:0;

}
body{
font-family: sans-serif;
}
nav {

display: flex;
justify-content: space-between;
padding: 5px 30px 5px 30px;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
/* border: 1px solid red; */

height: 60px;
}
#hamburger {
display: none;
}
#nav_right_side {
display: flex;
}
#brand_name {
height: 80%;
width: 150px;
padding-top: 4%;
padding-bottom: 4%;

/* font-size: 210%;
font-family: 'Pacifico', cursive;
color: white;
font-weight: 700;
margin-right: 20px; */
}
#nav_right_side > input {
width: 250px;
height: 80%;
border: none;
background-color: white;
border-radius: 7px;
}
::placeholder {
font-size: 120%;
padding-left: 10px;
}
#nav_left_side {
width: 50%;
display: flex;
justify-content: space-evenly;
}
#nav_left_side > div {
display: flex;
align-items: center;
padding-left: 10px;
padding-right: 10px;

}
#nav_left_side :hover {
background-color: #b5d0f8;;
border-radius: 7px;
color:  #00053d;
}

#nav_left_side > div > i {
color:  #00053d;
margin-right: 7px;
font-size: 20px;
}

#burger {
height: 100%;
/* width: 40%; */
font-family: sans-serif;
background-color: white;
display: none;
}
#burger > div {
transition: color 0.3s ease;
padding-top: 10px;
font-size: large;
padding: 2%;
/* background-color: #902735; */
font-weight: 600;
background-color: white;
color:  #00053d;
}
#burger > div:hover {
width: 96%;
border-radius: 3px;
background-color: #b5d0f8;;
color: #00053d;
/* color: #FC2779; */
}
.indexstyle {
text-decoration: none;
color:  #00053d;
font-size: 18px;
/* margin-left: 2%; */
}

/* RESPONSIVENESS */

@media screen and (min-width: 480px) and (max-width: 850px) {
#hamburger {
display: block;
color:  #00053d;
margin-right: 3%;
font-size: 160%;
padding-top: 2%;
}
#nav_left_side {
display: none;
}
#nav_right_side > input {
display: none;
}
nav {
padding-left: 1%;
justify-content: flex-start;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.indexstyle {
text-decoration: none;
color:  #00053d;
font-size: 18px;
/* margin-left: 2%; */
}
}

@media screen and (max-width: 480px) {
#hamburger {
display: block;
color:  #00053d;
margin-right: 3%;
font-size: 160%;
padding-top: 2%;
}
#nav_left_side {
display: none;
}
#nav_right_side > input {
display: none;
}
nav {
padding-left: 1%;
justify-content: flex-start;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.indexstyle {
text-decoration: none;
color:  #00053d;
font-size: 16px;
/* margin-left: 2%; */
}
}

/* ========================mainbody =========================*/
#main_img_info {
display: grid;
text-decoration: none;
height: 80%;
/* border: 1px solid green; */
grid-template-columns: repeat(2, 1fr);
}
/* #ïmg1{
border: 1px solid red;
} */
#main_img_info a {
text-decoration: none;
color: black;
}
.img_info {
width: 100%;
height: 75%;

border-radius: 10%;
}
.img1_main {
/* height: 110%; */
width: 105%;
}
.div_img_info {
text-decoration: none;
width: 78%;
height: 70%;
margin: auto;
transition: transform 0.2s;
border-radius: 10%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
/* border: 1px solid red; */
}
.div_img_info p {
font-size: 22px;
font-size: bolder;
text-decoration: none;
text-align: center;
padding-top: 6%;
padding-bottom: 6%;
}
.div_img_info:hover {
transform: scale(1.1);
}
#main_dashboard {
width: 90%;
/* border: 1px solid red; */
margin: auto;
display: flex;
gap: 8%;
margin-top: 1%;
/* border: 1px solid black; */
}
@media (max-width: 1075px) {
.div_img_info:hover {
transform: scale(1.1);
}
.div_img_info p {
font-size: 20px;
font-size: bolder;
text-decoration: none;
text-align: center;
}
#main_dashboard {
width: 90%;
margin: auto;
display: flex;
gap: 2%;
margin-top: 5%;
/* border: 1px solid black; */
}
.div_img_info {
text-decoration: none;
width: 180px;
height: 65%;
padding-bottom: 4%;
margin: auto;
transition: transform 0.2s;
border-radius: 10%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
/* border: 1px solid red; */
}
#main_img_info {
display: grid;
text-decoration: none;
gap: 2%;
/* border: 1px solid green; */
grid-template-columns: repeat(2, 1fr);
}
.img1_main {
width: 90%;
}
}

@media (max-width: 995px) {
.div_img_info:hover {
transform: scale(1.1);
}
.div_img_info p {
font-size: 18px;
font-size: bolder;
text-decoration: none;
text-align: center;
}
#main_dashboard {
width: 90%;
margin: auto;
display: flex;
gap: 2%;
margin-top: 5%;
/* border: 1px solid black; */
}
.div_img_info {
text-decoration: none;
width: 150px;
height: 80%;
margin: auto;
transition: transform 0.2s;
border-radius: 10%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
/* border: 1px solid red; */
}
#main_img_info {
display: grid;
text-decoration: none;
gap: 2%;
/* border: 1px solid green; */
grid-template-columns: repeat(2, 1fr);
}
.img1_main {
height: 350px;
}
}
@media (max-width: 663px) {
.div_img_info:hover {
transform: scale(1.1);
}
.div_img_info p {
font-size: 18px;
font-size: bolder;
text-decoration: none;
text-align: center;
}
#main_dashboard {
width: 90%;
margin: auto;
display: flex;
flex-direction: column;
gap: 2%;
margin-top: 5%;
/* border: 1px solid black; */
}
.div_img_info {
text-decoration: none;
width: 90%;
height: 90%;
margin: auto;
transition: transform 0.2s;
border-radius: 10%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
/* border: 1px solid red; */
}
#main_img_info {
display: grid;
text-decoration: none;
gap: 2%;
/* border: 1px solid green; */
grid-template-columns: repeat(2, 1fr);
}
.img1_main {
height: 500px;
}
}
@media (max-width: 378px) {
.div_img_info:hover {
transform: scale(1.1);
}
.div_img_info p {
font-size: 18px;
font-size: bolder;
text-decoration: none;
text-align: center;
}
#main_dashboard {
width: 90%;
margin: auto;
display: flex;
flex-direction: column;
gap: 2%;
margin-top: 5%;
/* border: 1px solid black; */
}
.div_img_info {
text-decoration: none;
width: 100%;
height: 100%;
margin: auto;
transition: transform 0.2s;
border-radius: 10%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
/* border: 1px solid red; */
}
#main_img_info {
display: grid;
text-decoration: none;
gap: 2%;

/* border: 1px solid green; */
grid-template-columns: repeat(1, 1fr);
}
.img1_main {
height: 300px;
}
}