/* fonts */

@font-face {
  font-family: "Ndot55";
  src: url(https://in.cmf.tech/cdn/shop/t/4/assets/Ndot55.ttf?v=108699980366410716671694574627);
}
@font-face {
  font-family:"FranklinGothicBook" ;
  src: url(https://in.cmf.tech/cdn/shop/t/4/assets/FranklinGothicBookRegular.ttf?v=30393265066194110661694574625);
}
@font-face {
  font-family:"LetteraMonoLL" ;
  src: url(https://in.cmf.tech/cdn/shop/t/4/assets/LetteraMonoLL.ttf?v=155457666558450898161694574627);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header{
 background-image: url(header-media/header-background-img.webp);
 background-size: cover;
 background-position: center;
 padding: 0 3.75rem 0 3.75rem;
 position: relative;
 height: 41.938rem;
 width: 100%;
}

.nav-bar img{
  height: 3.875rem;
}

.nav-menu{
 display: flex;
 justify-content: space-between;
 list-style: none;
 color: white;
 width: 50%;
 font-family: "LetteraMonoLL";
}

.nav-menu > li:hover{
  color: #FB471F;
  cursor: pointer;
}

.nav-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-section{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 19.5rem;
  gap: 1.563rem;
  align-items: start;
}

.hero-section h2{
  font-family:"Ndot55" ;
  font-size: 3.75rem;
  text-wrap: wrap;
  color: #fff;
  line-height: 0.9;
  letter-spacing:-1px ;
}

.hero-section button{
  min-width: 12rem;
  background-color: #FB471F;
  color: #fff;
  border: none;
  padding: 0.5rem 3.125rem 0.5rem 3.125rem;
}

.header-play-icon{
  position: absolute;
  top: 50%;
  left: 50%;
}

.hero-section button:hover{
  background-color: black;
  color: #fff;
}

.product-section{
  padding: 0 5rem 0 5rem;
}

.card-1{
  background-image: url(header-media/card-1-img.webp);
  background-size: cover;
  height: 41.813rem;
  background-position: center;
  align-content: flex-end;
}

.card-2{
  background-image: url(header-media/card-2-img.webp);
  background-size: cover;
  height: 41.813rem;
  background-position: center;
  align-content: flex-end;

}

.card-3{
  background-image: url(header-media/card-3-img.webp);
  background-size: cover;
  height: 41.813rem;
  background-position: center;
  align-content: flex-end;
}

.card-4{
  background-image: url(header-media/card-4-img.webp);
  background-size: cover;
  height: 41.813rem;
  background-position: center;
  align-content: flex-end;
  color: #fff;
}

.contents{
  display: flex;
  flex-direction: column;
  padding-bottom: 12.938rem;
  align-items: flex-start;
  
}
.contents h2{
  font-family: "Ndot55";
  font-size: 3.75rem;
  line-height: 0.9;
  letter-spacing: -1px;
  padding-bottom: 1.563rem;
}
.contents p{
  font-family: "LetteraMonoLL";
  font-size: 1.125rem;
  padding-bottom: 1.563rem;
}
.content-buttons{
  display: flex;
  gap: 1.25rem;
}
.button-1{
  background-color: black;
  color: #fff;
  border: none;
  min-width: 12rem;
  padding: 0.5rem 3.125rem 0.5rem 3.125rem;
}
.button-1:hover{
  background-color: #fb471f;
}
.button-2{
  background-color: #fb471f;
  color: #fff;
  min-width: 12rem;
  padding: 0.5rem 3.125rem 0.5rem 3.125rem;
  border: none;
  cursor: pointer;
}
.button-2:hover{
  background-color: black;
  
}
.nothing-gadgets{
 padding: 3.75rem 3.75rem 5.938rem 3.75rem;
 width: 33.5%;
 
}
.all-gadgets{
  display: flex;
  
}
.name-price{
  display: flex;
  margin-bottom: 1.25rem;
  margin-top: 3.75rem ;
}

.name{
  font-family : "Ndot55";
  font-size : 2.625rem;
  color : black;
}
.price{
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.875rem;
  color: #fb471f;
}
.item-details{
  font-family: "LetteraMonoLL";
  font-size: 0.75rem;
}
.img{
  width: 17rem;
  text-align: center;
}
.btn-white{
 height: 1.875rem;
 width: 1.875rem;
 background-color: #e1e4ea;
 border-radius: 1.65rem;
 border: none;
}
.btn-black{
 height: 1.875rem;
 width: 1.875rem;
 background-color: black;
 border-radius: 1.65rem;
 border: none;
}
.btn-orange{
 height: 1.875rem;
 width: 1.875rem;
 background-color: #FB471F;
 border-radius: 1.65rem;
 border: none;
}
.btn-grey{
  height: 1.875rem;
  width: 1.875rem;
  background-color: gray;
  border-radius: 1.65rem;
  border: none;
 }
 .dots{
  display: flex;
  align-items: center;
 }
 .dots {
  display: flex;
  justify-content: center;
  gap: 0.625em;
  margin-bottom: 2.188rem;
}
.product-image{
  padding-left: 3.75rem;
  padding-top: 3rem;
}
#pic-1{
 padding-bottom: 6rem;
}
#pic-2{
  padding-bottom: 9rem;
}
#pic-3{
  padding-bottom: 8rem;
}
.information{
  padding: 7.188rem 8.938rem 7.188rem 8.938rem;
  background-color: #424b54;
}
.info{
  display: flex;
  justify-content: space-between;
  font-family:"LetteraMonoLL";
  color: white;
  margin-bottom: 0.625rem;
}
.contents-info h4{
  font-family: "LetteraMonoLL";
  letter-spacing: -1px;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  font-weight: 100;
}
.contents-info{
  width: 20rem;
}
.design{
  background-image: url(card-img/design-img.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}
.about-design{
  padding-left: 52rem;
  padding-top: 12rem;
}
.about-design h3{
  font-family: "LetteraMonoLL";
  font-size: 2.625rem;
  line-height: 2.49375rem;
  font-weight: 400;
}
.about-design p{
  margin-bottom: 1rem;
  margin-top: 1rem;
  line-height: 20.41px ;
  font-family:"FranklinGothicBook";
  font-size: 14px;
  font-weight: 400;
}
.sign-up-dpn{
  width: 50%;
}
.sign-up-dpn h3{
 font-family: "LetteraMonoLL";
 font-size: 1.5rem;
 font-weight: 100;
 margin-bottom: 1rem;
}
.sign-up-dpn p{
  font-family: "FranklinGothicBook";
  font-size: 0.875rem;
  font-weight: 100;
 }
.arrow-svg{
  height: 1.688rem;
  padding-right: 2rem;
}
.login{
 width: 37.5rem;
 border: 1px solid black;
 height: 4rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
}
.login input{
  font-family:"FranklinGothicBook" ;
  font-size: 16px;
}
.sign-up{
  display: flex;
  align-items: center;
  height:40vh ;
  padding-left: 4rem;
  padding-right: 4rem;
}
input{
  border: none;
  padding-left: 2rem;
  font-size: 1rem;

}
*:focus {
  outline: none;
}
label{
  font-size: 14px;
  font-family: FranklinGothicBook;
  font-weight: 100;
}

.footer-1{
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: #e1e4ea;
  padding: 12.438rem 3.75rem 5.938rem 3.75rem;
}
.a-link{
  position: absolute;
  left: 95%;
  bottom: 74%;
}
.copy-right{
  width: 50%;
}
.copy-right h1{
  width: 50%;
  font-size: 14px;
  font-family: "LetteraMonoLL";
  font-weight: 100;
}
.details{
 list-style-type: none;
 font-family: "LetteraMonoLL";
 font-weight: 50;
 font-size: 14px;
}
.detailed-nav h3{
  margin-bottom: 4rem;
  font-family: "LetteraMonoLL";
  font-size: 16px;
  font-weight: 600;
}

.detailed-nav li{
  margin-bottom: 1rem;
}
.main-footer{
  display: flex;
  height: 40vh;
}
.blank{
  background-color: #424b54;
  width: 50%;
}
.logo-div{
  width: 50%;
  display: flex;
  background-color: #a3a7a4;
}
.footer-logo{
  padding-top: 9rem;
  width: 50%;
}
.footer-info{
  display: flex;
  flex-direction: column;
  width: 50%;
}

.social-network{
  height: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #a3a7a4;
  padding-right: 5rem;
}
.footer-logo img{
   width: 57%;
   padding-left: 4rem;
}

.footer-item{
  padding-left: 1.875rem;
  height: 50%;
  background-color: #e1e4ea;
}
.footer-item ul{
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  height: 100%;
  justify-content: space-between;
  align-content: center;
  row-gap: 3rem;
  font-size: 14px;
  font-family: "LetteraMonoLL";
  font-weight: 100;
  color: #424b54;
}
.footer-item li{
  width:14rem;
}