@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
body {
  padding: 0px;
  margin: 0px;
  font-family: "Open Sans", sans-serif;
}
a {
  text-decoration: none !important;
}
hr{
  width: 60%;
}
li{
  font-weight: 200;
  font-size: 12px;
  list-style: none;
}
span{
  font-weight: bold;
}


/* learn more anchore here css */

.learn-more-anchor {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #0077ed;
  border-radius: 20px;
  color: white;
}

.learn-more-anchor:hover {
  background-color: white;
  border: 1px solid #0077ed;
  color: #0077ed;
}

/* shop button anchor here */

.shop-button-anchor {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #0077ed;
  border-radius: 20px;
  color: #0077ed;
}

.shop-button-anchor:hover {
  color: white;
  background-color: #0077ed;
}

/* navbar css here */

.navbar-anchor {
  font-size: 13px;
  color: black;
}

.middle-container-contents {
  display: flex;
  gap: 30px;
}

.middle-container-contents-after-885px {
  display: none;
}

/* macbook for college and ipad css heree */

.button-for-mac-or-ipad-for-college {
  height: 40px;
}
.mac-or-ipad-for-college {
  height: 600px;
  background-color: #f5f5f7;
}

/* apple event at 10 pm css here */

.anchor-apple-event {
  height: 40px;
}

/* iphone our ultrasfast phone,most powerful cameras */

/* <!-- 6 small boxes with 50 % of width and their boxes --> */
/* css here */
.first-box {
  width: 100%;
}
.first-two-boxes {
  display: flex;
}
.middle-gap-for-small-boxes {
  width: 2%;
}
.background-whithish {
  background-color: #f5f5f7;
}
.background-black {
  background-color: #000000;
}

/* <!-- now here are the text containing too much --> */
.main-container-for-long-text-in-middle{
  display: flex;
  justify-content: center;
}
.text-holder-container-in-middle{
  width: 60%;
  font-size: 13px;
}

/* <!-- some rows and colom for the given text here is below --> */
.main-container-for-rows-coloumn-text{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.text-holder-for-rows-coloum{
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* 
fotter css here */
.middle-footer-text{
  display: flex;
  gap: 10px;
}
.text-holder-for-last-text{
  display: flex;
  justify-content: space-around;
}


/* query for navbar */
@media (max-width: 845px) {
  .middle-container-contents {
    display: none;
  }
  .middle-container-contents-after-885px {
    display: block;
    display: flex;
    justify-content: space-between;
    width: 75%;
  }
  .middle-container-contents-after-885px-div-02 {
    display: flex;
    gap: 20px;
  }
  .navbar-anchor {
    font-size: 18px;
  }
  .text-holder-container-in-middle{
    width: 80%;
  }
  .text-holder-for-rows-coloum{
    width: 80%;
  }
  .wid-100-for-footer{
    width: 100%;
  }
}

/* query for ipad or macbook for college */
@media (max-width: 580px) {
  .mac-or-ipad-for-college {
    height: auto;
  }
  .text-holder-container-in-middle{
    width: 100%;
  }
  .text-holder-for-rows-coloum{
    width: 100%;
  }
}

/*  Query for the  6 small boxes with 50 % of width and their boxes */
@media (max-width: 735px) {
  .first-two-boxes {
    flex-wrap: wrap;
    width: 100%;
  }

  .first-box {
    width: 100%;
    margin-top: 5px;
  }
  .text-holder-for-last-text{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .middle-footer-text{
    display: flex;
    justify-content: center;
  }
}