* {
  padding: 0px;
  margin: 0px;
  border: none;
}

#navbar + div {
  margin-top: 120px;
}
#headerPart {
  display: flex;
  margin: auto;
  width: 95%;
  height: 700px;
  padding: 2%;
  background-color: whitesmoke;
  /* border: 1px solid black; */
  gap: 20px;
}
#firstImage {
  width: 50%;
  height: 100%;
  /* border: 1px solid green; */
  background-image: url("https://pisces.bbystatic.com/image2/BestBuy_US/dam/MMT-510776_2022TopDeals-GHPApp-LV-55adde1f-dd0b-48d7-9a08-b28bbc00187d.jpg");
  background-position: center;
  background-repeat: no-repeat;
}
#firstImage > h2 {
  text-align: center;
  margin-top: 400px;
  font-size: 30px;
  color: white;
  font-weight: bold;
}
#firstImage button {
  margin-left: 45%;
  margin-top: 5%;
  padding: 3%;
  color: rgb(9, 53, 197);
  font-weight: bold;
}
#firstImage > h2 + button:hover {
  background-color: rgb(9, 53, 197);
  color: white;
}
#secondImage {
  width: 50%;
  height: 100%;

  /* box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; */
}

#firstBox {
  width: 100%;
  height: auto;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 15px;
}
#firstBox > h2 {
  font-size: 18px;
  margin-left: 15px;
}
#insideBox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, auto);
  justify-content: space-between;
  padding: 2%;
}

#insideBox p {
  font-size: 13px;
  color: rgb(9, 53, 197);
  margin: 5%;
}
#insideBox img {
  width: 70%;
  height: 56%;
  margin-left: 15px;
}
#insideBox div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#secondBox {
  width: 100%;
  height: 380px;
  width: 100%;
  display: flex;
  gap: 20px;
  margin-top: 5%;
}

/* #secondBox{
    width: 100%;
    display: flex;
    margin-top: 40px;
    
} */

#firstPart {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5%;
  justify-content: space-between;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
#firstPart > button {
  padding: 4%;
  color: #fff;
  width: 60%;
  font-weight: bold;
  background-color: rgb(9, 53, 197);
}
#firstPart h1 {
  color: brown;
  text-align: center;
  font-size: 45px;
}
#firstPart h3 {
  color: rgb(9, 53, 197);
  font-size: 15px;
}

#secondPart {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5%;
  justify-content: space-between;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
#secondPart > img {
  width: 90%;
  height: 60%;
}
#secondPart > img + p {
  color: rgb(9, 53, 197);
}
/* End the Header part..... */
#middlePart {
  width: 95%;
  height: 400px;
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
  margin: auto;
  margin-top: 50px;
}
#middlePart > div > h2 {
  margin-bottom: 1%;
}
#middlePart > div > p {
  color: black;
}
a > p {
  color: rgb(9, 53, 197);
}
a:hover > p {
  color: rgb(12, 28, 81);
}
#footer a > p {
  color: black;
}
#footer a:hover p {
  color: rgb(9, 53, 197);
}
#iconImage {
  margin-top: 1%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 250px);
  gap: 10px;
}
#iconImage > div {
  padding: 5%;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 13px;
}
#iconImage > div > img {
  width: 70%;
  height: 60%;
  margin: 20px 0 0 35px;
}
/* #Icon1 {
  
}
#Icon2 {
  width: 40%;
  height: 60%;
  margin: 20px 0 0 35px;
}
#Icon3 {
  width: 80%;
  margin: 35px 0 0 20px;
}
#Icon4 {
  width: 80%;
  margin: 35px 0 0 20px;
}
#Icon5 {
  width: 40%;
  height: 35%;
  margin: 45px;
}
#Icon5 + p {
  margin-top: 0px;
} */

#smallImg {
  width: 95%;
  height: 100px;

  margin: auto;
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
#smallImg > div {
  width: 50%;
  height: 80px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* #shortImg1 {
  width: 50%;
  height: 80px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  margin-top: 10px;
}

#shortImg1 > img + h2 {
  text-align: end;
  margin-top: -70px;
  margin-right: 30px;
}
#shortImg1 > img + h2 + p {
  text-align: end;
  margin-right: 150px;
  margin-top: 10px;
} */
/* #shortImg2 {
  width: 50%;
  height: 80px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  margin-top: 10px;
} */

#shortImg2 > img + h2 {
  text-align: end;
}
#shortImg2 > img + h2 + h3 {
  text-align: end;
}
#shortImg2 > img + h2 + h3 + p {
  text-align: end;
}
#border {
  width: 95%;
  height: 100px;
  border: 1px solid black;
  background-color: yellow;
  margin: auto;
  margin-top: 10px;
  border: 1px solid yellow;
}
#border > h2 {
  text-align: center;
  color: balck;
  margin-top: 40px;
}
#photoPic {
  width: 95%;
  height: 500px;
  /* border: 1px solid red; */
  margin: auto;
  margin-top: 2%;
  display: flex;
  gap: 10px;
  margin-bottom: 3%;
}
#mobilePic {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  background-image: url("https://pisces.bbystatic.com/image2/BestBuy_US/dam/MMT-566876-pixel6a-subghp-3811a5d5-fb45-4794-ad1e-e89d89b86fcc.jpg");
  background-repeat: no-repeat;
  background-position: center;
  padding: 2%;
}

#photoPic button {
  padding: 2%;
  color: #fff;
  width: 30%;
  font-weight: bold;
  background-color: rgb(9, 53, 197);
  margin-top: 5%;
}
#laptopPic {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  background-image: url("https://pisces.bbystatic.com/image2/BestBuy_US/dam/subghp-MMT-555591-tv-4ef8f148-989d-4846-ae5c-65854b349e5b.jpg");
  background-position: center;
  background-repeat: no-repeat;
  padding: 2%;
}
#photoPic h1 {
  margin-left: 15px;
  font-weight: bold;
  margin-top: 1%;
  margin-bottom: 3%;
}
#photoPic p {
  font-size: 13px;
}
#ready {
  width: 95%;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 150px);
  margin: auto;
  margin-top: 10px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
#ready > div {
  display: flex;
  justify-content: space-around;
  padding-top: 2%;
}
#ready img {
  height: 50%;
}
#bottom {
  display: flex;
  width: 95%;
  height: 650px;
  margin: auto;
  margin-top: 20px;

  gap: 20px;
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
}
#school {
  width: 33%;
  height: 100%;
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
}

.one {
  margin-top: 3%;
  display: flex;
  width: 100%;
  height: 45%;
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
}
.one div {
  padding: 3%;
  width: 50%;
  height: 270px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.one > div > img {
  width: 100%;
  margin-left: 10px;
}
.one > div > img + h3 {
  margin-left: 10px;
  color: rgb(9, 53, 197);
}
#pagloImg > img {
  width: 100%;
  height: 200px;
}
/* .two{
 display: flex;
width: 100%;
height: 45%;
border: 1px solid grey;
}
.two>div{

} */
#schoolyear {
  width: 33%;
  height: 100%;
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
}
#college {
  width: 33%;
  height: 100%;
  /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
}
#foot > h2 {
  margin-left: 35px;

  width: 95%;
}

#footerSection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 450px);
  width: 95%;
  margin: auto;

  margin-top: 10px;
  margin-bottom: 3%;
}

#footerSection > div {
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.imageSection {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3%;
}
.imageSection > img {
  width: 70%;
  margin: 20px 60px 0 60px;
}

.imageSection p {
  margin-top: 3%;
  margin-bottom: 3%;
}
.imageSection p + p {
  margin-top: 3%;
  margin-bottom: 3%;
  font-size: 12px;
  margin-left: 5px;
}

#showImg {
  margin-left: 30px;
  /* border-bottom: underline; */
}
#showImg > h2 {
  width: 96%;
}
#box {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, 300px);
  width: 97%;
}
/* #box>div{
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
} */
.boxImg > img {
  width: 40%;
  margin: 30px 60px 0 60px;
}
.boxImg > p + h3 {
  padding-top: 20px;
}
#boxImg2 > img {
  width: 40%;
  margin-top: 50px;
  margin-left: 20px;
}
#boxImg2 > img + p {
  color: rgb(9, 53, 197);
}
.boxImg > img + p {
  color: rgb(9, 53, 197);
}
.boxImg > img + p + h3 {
  margin-top: -15px;
}
#boxImg1 > img {
  width: 30%;
  margin-top: 30px;
  margin-left: 40px;
}
#boxImg1 > img + p {
  color: rgb(9, 53, 197);
  margin-top: 24px;
}
#showImg2 {
  margin-left: 25px;
}
#showImg3 > h2 {
  width: 95%;
}
#showImg2 > h2 {
  width: 95%;
}
#bigBox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 350px);
  gap: 20px;
  width: 95%;
  margin: auto;
  margin-top: 20px;
}
#bigBox div {
  border: 1px solid gray;
  display: flex;
  flex-direction: column;

  justify-content: space-between;
}
.bigImg > img {
  height: 100%;
}
.bigImg > h3 {
  margin-top: -300px;
  margin-left: 5%;
  color: whitesmoke;
}
.bigImg2 {
  padding: 6%;
}
.bigImg2 > img + h2 {
  color: rgb(9, 53, 197);
  /* margin-top: -5px; */
}
#showImg3 {
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 3%;
  padding: 3%;
  margin-top: 1%;
}
#box {
  margin-top: 1%;
}
#box img {
  width: 50%;
  height: 50%;
  margin: 20px 0 0 40px;
}
#box > div {
  display: flex;
  flex-direction: column;
  padding: 5%;
  justify-content: space-between;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

img {
  cursor: pointer;
}

p:hover {
  text-decoration: underline;
}
a {
  text-decoration: none;
}
button {
  cursor: pointer;
}
button:hover {
  background-color: white;
  color: rgb(9, 53, 197);
}