/* importing essential fonts */

@font-face {
    font-family: 'LetteraMonoLL';
    src: url('./fonts/LetteraMonoLL.ttf');
}

@font-face {
    font-family: 'Ndot55';
    src: url('./fonts/Ndot55.ttf');
}

@font-face {
    font-family: 'FranklinGothicBook';
    src: url('./fonts/FranklinGothicBookRegular.ttf');
}


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

/* common or default classes */

/* common heading styles */
.heading {
    font-family: 'Ndot55';
    font-size: 3.75rem;
    line-height: 0.9;
    letter-spacing: -1px;
}

/* defalut button size and font */

.button {
    width: 12rem;
    height: 2rem;
    color: white;
    border-radius: 0;
    border: none;
    font-size: 0.75rem;
    font-family: 'LetteraMonoLL';
    transition: 100ms;
}

.button:hover {
    cursor: pointer;
}

/* orange button color and hover color */

.orange-btn {
    background-color: rgb(251, 71, 31);
}

.orange-btn:hover {
    background-color: black;
}

/* black button color and hover color */

.black-btn {
    background-color: black;
}

.black-btn:hover {
    background-color: rgb(251, 71, 31);
}


/* background image for header and made position relative to position the floating text section*/

header {
    background-image: url('./images/cover.webp');
    background-size: cover;
    background-position: center;
    padding: 0 60px;
    position: relative;
    height: 94vh;
}

/* nav made flex to containe logo and nav links */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
}

/* logo size */
.logo {
    height: 3.785rem;
}

/* navlink section created using flex and default list styles removed */
nav>ul {
    width: 50%;
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding-left: 6rem;
}

/* navlinks */
nav>ul>li {
    color: white;
    font-size: 1rem;
    font-family: 'LetteraMonoLL';
}

/* navlinks hover style */
nav>ul>li:hover {
    color: #fb471f;
    cursor: pointer;
}

/* floating text session over header */

.floating-text {
    position: absolute;
    bottom: 11.5rem;
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* style for floating text heading */
.floating-text>h1 {
    color: white;
    ;
}


/* play logo */
.play-logo {
    position: absolute;
    top: 50%;
    left: 50%;
}

/* styles for product section */

/* common styles for all products */
.product-section {
    height: 96vh;
    padding: 60px;
    background-position: center;
    background-size: cover;
    position: relative;
}

/* only last product sections */



/* diffrent background images for sections */
.product-1 {
    background-image: url('./images/cmf-phone-1.bmp');
}

.product-2 {
    background-image: url('./images/buds-pro-2.bmp');
}

.product-3 {
    background-image: url('./images/watch-pro-2.bmp');
}

.product-4 {
    background-image: url('./images/charger.bmp');
    color: white;
}

.product-section p {
    font-family: 'LetteraMonoLL';
    font-size: 1.125rem;
}

/* styling product section div using flex and postioning*/


.product-section>div {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 20%;
    gap: 1.5rem;
}

.product-section .black-btn {
    margin-right: 1.25rem;
}


/* shop product section */

.shop {
    height: 100vh;
    display: flex;
}

/* each product div in shop section */

.shop>div {
    padding: 3.7rem;
    flex-basis: 100%;
    background-color: rgb(225, 228, 234);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* changing background color of 2nd product*/
.shop>div:nth-child(2) {
    background-color: gray;
}

/* style for product heading */
.product-heading {
    display: flex;
    gap: 1.25rem;
}

.product-heading>h2 {
    font-family: 'Ndot55';
    font-size: 2.625rem;
}

.price {
    font-family: 'LetteraMonoLL';
    color: #fb471f;
    font-size: 14px;
    padding-top: 5px;
}

/* .old-products {} */

.old-products img {
    width: 74%;
    align-self: center;
}

.old-products p {
    font-family: 'LetteraMonoLL';
    font-size: 12px;
}

/* for button inside old products section */
/* .old-products .buttons{

} */

/* color selector in old products */

.color-selector {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
}

.color-selector>div {
    height: 1.875rem;
    width: 1.875rem;
    border-radius: 50%;
}


.color-selector .white {
    border: 2px solid #fb471f;
    background-color: white;
}

.color-selector .orange {
    /* border: 1px solid #fb471f; */
    background-color: #fb471f;
}

.color-selector .black {
    /* border: 2px solid #fb471f; */
    background-color: black;
}

.color-selector .grey {
    background-color: #e1e4ea;
    ;
}

/* details section */

/* details section is displayed as grid of 3 rows and 3 columns */
.details {
    height: 90vh;
    padding: 7rem 9rem;
    background-color: #424b54;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    font-family: 'LetteraMonoLL';
    gap: 1rem;
    color: white;
}

.details>div {
    font-family: 'LetteraMonoLL';
}

.details h4 {
    letter-spacing: -1px;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.details p {
    width: 18rem;
    display: inline-block;
    font-size: 0.875rem;
    line-height: 18.15px;
}


/* disclaimer section */

.disclaimer {
    height: 100vh;
    background-image: url('./images/about-background.webp');
    background-position: center;
    background-size: cover;
    padding-top: 10%;
    padding-left: 55%;
}


.disclaimer h4 {
    font-family: 'LetteraMonoLL';
    font-size: 2.625rem;
    font-weight: 400;
}

.disclaimer p {
    font-size: 14px;
    font-weight: 400rem;
    font-family: 'FranklinGothicBook';
    line-height: 1.27rem;
}

/* contact section */

.contact{
    height: 13rem;
    display: flex;
    align-items: center;
    padding: 3rem 5rem;
}

.contact > *{
    flex-basis: 100%;
}

.contact h6{
    font-family: 'LetteraMonoLL';
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
}

.contact p{
    font-family: 'FranklinGothicBook';
    font-size: 0.875rem;
}

.contact .email{
    border: 1px solid black;
    width: 37.5rem;
    height: 3.3rem;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.email input{
    width: 80%;
    height: 60%;
    border: none;
    font-family: 'LetteraMonoLL';
    font-size: 1rem;
    font-weight: 400;
}

.email input:focus{
    border: none;
    outline: none;
}

.terms{
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}


/* links section */

.links{
    display: flex;
    padding: 5rem;
    background-color: #e1e4ea;
    position: relative;
    padding-top: 15rem;
}

.copyright{
    width: 50%;
    font-family: 'LetteraMonoLL';
    font-weight:400;
    font-size: 0.875rem;
}

.lists{
    width: 50%;
    display: flex;
    justify-content: space-around;
}

.lists  h1{
    font-family: 'LetteraMonoLL';
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4rem;
}
.lists ul{
    list-style-type: none;
    font-family: 'LetteraMonoLL';
    font-weight: 400;
    font-size: 12px;
}

.lists li{
    margin-bottom: 1.5rem;
}


.lists li:hover{
    color:#fb471f
}


/* locatoin div  positioning*/
.location{
    position: absolute;
    top:7%;
    right: 7%;    
    font-family: 'LetteraMonoLL';
    font-weight: 400;
    font-size: 14px;
    display: flex;
    align-items: center;
    text-decoration: underline;
}

.location:hover{
    color: #fb471f;
    text-decoration: none;
}

.location p{
    padding-left: 1rem;
}

/* footer */

footer{
    height: 22rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
}

footer >div:first-child{
    background-color: #a3a7a4;
    grid-area: 1 /1 /3 /2;
    padding: 12rem 8rem 5rem 5rem;
}

footer >div:first-child > img{
    width: 100%;
}

footer > div:nth-child(2){
    background-color: #424b54;
    grid-area: 1/ 2/ 3/3;
}

footer > div:nth-child(3){
    background-color: #a3a7a4;
    grid-area: 1/ 3/ 2/ 5;
}



footer > div:nth-child(4){
    background-color: #e1e4ea;
    grid-area: 2 /3 /3/5;
}


.social-media{
    color: #424b54;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 3rem;
}

.social-media :hover{
    color: white;
}

.term-links{
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
    row-gap: 3rem;
}

.term-links a{
    text-decoration: none;
    color: #424b54;
    font-size: 14px;
    font-family: 'LetteraMonoLL';
    font-weight: 400;
    width: 30%
}

.term-links a:hover{
    color: #fb471f;
}