@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html,
body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  line-height: 1.4;
  scroll-behavior: smooth; /*For smooth scrolling of the page when we click anchor tags for particular sections*/
}
main {
  scroll-margin:50px; /* To open the section with margin 5-px so that it start we the top of section b/c due to header stickty position it is not possible */
}
.offer { /* For individual scrolling Margin set we use that class*/
  scroll-margin:200px;
}
/* header - section */
header {
  position:sticky;
  top:0;
  z-index:10000;
  background-color: #270082;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  width:100vw;
}
.head {
  max-width:1200px;
  max-height: 100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:20px;
  padding-bottom:20px;
}
.head .logo {
  font-weight:bold;
  color:white;
  font-size:30px;
}
.navigation {
  display:flex;
  gap:20px;
  color:white;
  justify-content: space-between;
}
.navigation div a{
  text-decoration:none;
  color:white;
  transition: 0.1s ease-in 0s;
  border-bottom:2px solid transparent;
}
.navigation div a:hover{
  border-bottom:2px solid white;
  transition: 0.1s ease-in 0s;
}
/* main */
.top {
  height:100vh;
  width:100vw;
  background-image:url("/Project 6/images/hero_image.png");
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}
.container {
  max-width: 1200px;
  height:100%;
  margin:0 auto;
}
.main1 {
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
  color:white;
  text-align: center;
  gap:30px;
}
.main1 h1 {
  font-size:92px;
}
.main1 h3 {
  font-size:30px;
} 
.sub {
  width:100vw;
  background-color: #281154;
  padding-top:50px;
  min-height:600px;
}
.subscription {
  max-width:1200px;
  margin:0 auto;
  color:white;
  text-align: center;
}
.subscription h4 {
  margin-top:25px;
  text-align:center;
}
.subscription button {
  background-color: #dc0000;
  border:transparent;
  color:white;
  padding:10px;
  margin-top:30px;
  margin-bottom:30px;
}
.subscription button:hover {
  transition: 0.2s ease-in-out;
  opacity: 0.8;
  
}
.subscription p {
  margin-bottom:20px;
}
.subscription .pic {
  margin-top: -400px;
  position: relative;
  top: 400px;
}
.about {
  width:100vw;
  background-color:white;
}
.collection {
  max-width:1200px;
  margin:0 auto;
  margin-top:500px;
  text-align: center;
}
.collection h3 {
  margin-bottom:50px;
}
.collection p {
  margin-bottom:50px;
}
.collection button {
  padding:8px 10px;
  background-color:  #270082;
  color:white;
  border:transparent;
  margin-bottom:50px;
}
.collection button:hover {
  transition: 0.2s ease-in-out;
  opacity: 0.8;
}
.collection .mac {
  text-align: center;
  margin-bottom:50px;
}

.party {
  width:100vw;
  background-image:url("/Project 6/images/video.png");
  min-height:800px;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display:flex;
  flex-direction:column;
  justify-content: center;
}
.party .fun {
  max-width: 1200px;
  height:100%;
  margin:0 auto;
  text-align: center;
  display:flex;
  flex-direction: column;
  justify-content: center;
  color:white;
}
.party .fun h3 {
  margin-bottom:30px;
}
.offer {
  width:100vw;
  background-color:white;
}
.cards {
  max-width: 1200px;
  margin:0 auto;
  margin-top:100px;
  margin-bottom:100px;
  display:flex;
  gap:50px;
  justify-content: space-between;

}
.cards .info {
  display: flex;
  flex-direction: column;
  gap:20px;
}
.cards .info button {
  width:80px;
  padding:8px;
  background-color: #270082;
  color: white;
  border:transparent;
}
.cards .info button:hover {
  transition: 0.2s ease-in-out;
  opacity: 0.8;
}
.upper {
  width:100vw;
  background-color: #1b0058;
  min-height: 200px;
}
.links {
  max-width:1200px;
  margin: 0 auto;
  padding-top:20px;
  padding-bottom:30px;
  display: flex;
  justify-content: space-between;
}
.links div {
  color:white;
  font-weight:bold;
}
.links div h4 {
  margin-bottom:10px;
}
.links div hr {
  margin-bottom:10px;
  font-weight:900;
}
.links li {
  list-style: none;
  font-weight:300;
}
.lower {
  width:100vw;
  background-color: #270082;
  height: 65px;
}
.lower .Owner{
  max-width: 1200px;
  margin:0 auto;
  text-align: center;
  color:white;
  padding:20px;
}

@media (max-width:1280px) {
  .head {
    margin-left: 50px;
    margin-right: 50px;
  }
  .cards {
    padding:50px;
  }
  .cards {
    padding:50px;
  }
  .links {
    padding:50px;
  }
}

@media (max-width:1025px) {
  .cards {
    flex-wrap:wrap;
    justify-content:center;
  }
  .main1 p {
    max-width:800px;
  }
  .subscription .pic img {
    max-width:100%;
    max-height:100%;
  }
  .collection .mac img {
    max-width:100%;
    max-height:100%;
  }
}
@media (max-width:820px) {
  .cards {
    max-width:700px;
  }
  .main1 p {
    max-width:600px;
  }
  .main1 h3 {
    max-width:600px;
  }
  .main1 h1 {
    font-size:75px;
  }
  .subscription h4 {
    max-width:600px;
    margin:0 auto;
    margin-top:25px;
    text-align: center;
  }
  .collection {
    margin-top:400px;
  }
  .collection p {
    max-width:600px;
    margin:0 auto;
    margin-bottom:50px;
  }
  .fun p {
    max-width:600px;
  }
}
@media (max-width:670px) {
  .links {
    flex-direction: column;
    align-items: center;
    gap:20px;
    align-items: baseline;
  }
  .collection {
    margin-top:350px;
  }
}
@media (max-width:640px) {
  .cards {
    max-width:500px;
    align-items: center;
  }
  .main1 p {
    max-width:500px;
  }
  .main1 h3 {
    max-width:500px;
  }
  .main1 h1 {
    font-size:70px;
  }
  .subscription h4 {
    max-width:500px;
    margin:0 auto;
    margin-top:25px;
    text-align: center;
  }
  .collection {
    margin-top: 300px;
  }
  .collection p {
    max-width:500px;
    margin:0 auto;
    margin-bottom:50px;
  }
  .fun p {
    max-width:500px;
  }
}

@media (max-width:550px) {
  .cards .card img {
    max-width:100%;
  }
  .head .navigation {
    display:none;
  }
  .cards {
    max-width:350px;
    align-items: center;
  }
  .main1 p {
    max-width:350px;
  }
  .main1 h3 {
    max-width:350px;
    font-size:30px;
  }
  .main1 h1 {
    font-size:75px;
  }
  .subscription h4 {
    max-width:350px;
    margin:0 auto;
    margin-top:25px;
    text-align: center;
  }
  .subscription p {
    max-width:350px;
    margin:0 auto;
    padding-bottom:20px;
  }
  .collection p {
    max-width:350px;
    margin:0 auto;
    margin-bottom:50px;
  }
  .collection h3 {
    max-width:350px;
    margin:0 auto; 
    margin-bottom:50px;
  }
  .fun p,h3{
    max-width:350px;
  }
  .sub {
    min-height:600px;
  }
}
@media (max-width:450px) {
  .collection {
    margin-top:250px;
  }
}
@media (max-width:400px) {
  .collection {
    margin-top:160px;
  }
}