/* ========== Reset and Base ========== */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body, html {
  scroll-behavior: smooth;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
width: 100%;}


/* ========== Section-1 Start: Header ========== */
header {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 1000;
  opacity: 0.96;
}
header > div {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 20px 20px 20px 140px;
  background-color: rgb(216, 216, 216);
}
header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background-color: #fff;
  flex-wrap: wrap;
}
header a {
  text-decoration: none;
  color: #000;
font-size: 0.8rem;
  margin-left: 2rem;
}
i{
  font-size: 1.2rem;
}
/* ========== Section-1 End: Header ========== */

/* ========== Section-2 Start: Hero ========== */
section#hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url(./assets/images/airpods.png);
  background-repeat: repeat;
  background-position: center;
  
  background-size: 20rem;
}
#hero .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  margin-top: 9rem;
}
#hero .first-hero-div,
#hero .third-hero-div {
  background-color: rgb(0, 110, 255);
  font-size: 1.7rem;
  max-width: 13rem;
  color: #fff;
  padding: 06px;
  border-radius: 30px;
}
#hero .second-hero-div {
  background-color: rgb(0, 110, 255);
  font-size: 1.2rem;
  max-width: 18rem;
  color: #fff;
  padding: 010px;
  border-radius: 30px;
}
/* #hero img {
  position: relative;
  left: 200px;
  top: 150px;
} */
#hero button {
  padding: 15px 30px;
  border-radius: 30px;
  border: 1px solid rgb(0, 140, 255);
  color: rgb(0, 140, 255);
  background-color: #fff;
}
/* ========== Section-2 End: Hero ========== */

/* ========== Section-3 Start: MacBook & iPhone ========== */
#section-2, #section-3 {
  display: flex;
  justify-content: center;
  min-height: 90vh;
  margin-top: 2rem;
}
#section-2 {
  background-image: linear-gradient(to right, rgb(147, 228, 255), white, rgb(147, 228, 255));
}
#section-3 {
  background-color: #f7f7f7;
}
#section-2 .container, #section-3 .container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 2rem;
}
#section-2 .container {
  gap: 25px;
}
#section-3 .container {
  gap: 15px;
}
#section-2 h1 {
  font-size: 3.2rem;
}
#section-3 h1 {
  font-size: 3.8rem;
}
#section-2 p, #section-3 p {
  text-align: center;
  font-size: 2rem;
}
#section-2 button, #section-3 button {
  padding: 15px 30px;
  border-radius: 25px;
  border: 1px solid rgb(0, 119, 255);
  font-size: 1rem;
  margin-left: 10px;
}
#section-2 .btn-2, #section-3 .btn-2 {
  background-color: transparent;
  color: rgb(0, 89, 255);
}
#section-2 .btn-1, #section-3 .btn-1 {
  background-color: rgb(0, 89, 255);
  color: #fff;
}
/* ========== Section-3 End ========== */

/* ========== Section-4/5/6 Start: Dual Columns ========== */
section, .container {
  min-height: 100vh;
  box-sizing: border-box;
}
#section-4 .container, 
#section-5 .container, 
#section-6 .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-width: 100%;
  background-color: #fff;
  flex-wrap: wrap;
}
.one, .two {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;
}
.one h1, .two h1 {
  padding-top: 2rem;
  font-size: 2.8rem;
}
.one p, .two p {
  font-size: 1.25rem;
  color: #fff;
}
#section-4 .two h1, 
#section-4 .two p,
#section-6 .two h1, 
#section-6 .two p {
  color: #000;
}
#section-4 .container .one, 
#section-4 .container .two, 
#section-5 .container .one, 
#section-5 .container .two, 
#section-6 .container .one, 
#section-6 .container .two {
  width: 45%;
  background-color: #000;
  height: 90vh;
}

/* Section-4 Specific Backgrounds */
#section-4 .one {
  background-image: url(./assets/images/mackbbok\ black.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#section-4 .two {
  background-image: url(./assets/images/watch.png);
  background-size: 45rem;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: #e8e8e8;
}

/* Section-5 Specific Backgrounds */
#section-5 .one {
  background-image: url(./assets/images/airpod\ girl.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  justify-content: flex-end;
}
#section-5 .two {
  background-image: url(https://png.pngtree.com/thumb_back/fh260/background/20230526/pngtree-neon-laptop-with-black-background-image_2647525.jpg);
  background-size: 45rem;
  background-repeat: no-repeat;
  background-position:bottom;
}
#section-5 .one h1 {
  color: #fff;
}
#section-5 .one p {
  color: #fff;
}

/* Section-6 Specific Backgrounds */
#section-6 .one {
  background-image: url(./assets/images/iphone\ trade.png);
  background-size: 45rem;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: #fff;
  text-align: center;
}
#section-6 .two {
  background-image: url(./assets/images/icard.png);
  background-size: 25rem;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: #e5e5e5;
}
#section-6 .one h1 {
  color: #fff;
}
#section-6 .one p {
  color: #fff;
}

/* Buttons Shared by Section-4,5,6 */
#section-4 button, 
#section-5 button, 
#section-6 button {
  padding: 10px 20px;
  border-radius: 30px;
}
#section-4 .btn-1, 
#section-5 .btn-1, 
#section-6 .btn-1 {
  background-color: #3694ff;
  border: 1px solid #3694ff;
  color: #fff;
}
#section-4 .btn-2, 
#section-5 .btn-2, 
#section-6 .btn-2 {
  border: 1px solid #3694ff;
  color: #3694ff;
  background-color: #fff;
}
/* ========== Section-4/5/6 End ========== */
/* extra  */
#section-4 .one h1{
    color: #fff;
}

#section-4 .container .two{
    background-color: #f7f7f7;
}
#section-5 .two h1{
    color: #fff;
}
#section-5 .btn{
    margin-bottom: 2rem;
}
#section-6 .container .one{
    background-color: #f7f7f7;
}
#section-6 .container .two{
    background-color: #f7f7f7;
    margin-bottom: 3rem;
}
#section-6 .one h1{
    color: #000;
}
#section-6 .one p{
    color: #000;
}
#section-6 .container p{
width: 70%;
text-align: center;
}
/* extra end  */

#amazingslider-wrapper-1{
  width: 95%;
  height: auto;
}
#guidelines{
  min-height: 90vh;
 font-size: 13px;
  font-weight: lighter;
  width: 100%;
  background-color: #f2f2f2;
  

}
#guidelines p{
  margin-bottom: 10px;
  color: #888888;
  
}
.guidelines-div{
   width: 70%;
  display: block;
  /* background-color: #d6d6d6; */
  margin: 4rem auto;
  text-align: justify;
  padding-top: 2rem;

}
#footer{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#footer .footer-container{
  max-width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
margin-bottom: 8rem;
flex-wrap: wrap;
}
#footer .footer-container div{
 height: 70vh;
  font-size: 0.85rem;
}
#footer  p{
  margin-bottom: 1rem;
  color: #676767;
}
#footer .footer-container+p{
  font-size: 13px;
  width: 77%;
  text-align: left;

}
#footer .second-p{
  font-size: 13px;
  text-align: left;
  width: 77%;
  margin-top: 1.2rem;
}
marquee{
  margin-top: 4rem;
}
#slider-section-marquee{
  min-height: auto;
}
/* ========== Media Queries ========== */
@media (max-width: 768px) {
  #section-2 img,
  #section-3 img {
    max-width: 100%;
    height: auto;
  }

  #section-4 .container,
  #section-5 .container,
  #section-6 .container {
    flex-direction: column;
  }

  #section-4 .container .one, 
  #section-5 .container .one,
  #section-6 .container .one {
    width: 100%;
  }
  
    #section-4 .container .two, 
  #section-5 .container .two,
  #section-6 .container .two {
    width: 100%;
  }
#section-4 .one,
#section-5 .one,
#section-6 .one{
  background-size: 50rem;
}
#section-4 .two,
#section-5 .two{
  background-size: 40rem;
}
}
/* ========== Media End ========== */