*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: popins;
    /* text-align: center; */
}

*::selection{
    color: #fff;
    background-color: #000;
}
html,body {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    
}
body{
    background-color: #f7f7f7;

}

#nav{
    /* height: 100px; */
    width: 100%;
    /* background-color: burlywood; */
    position: fixed;
    z-index: 99;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 26px 28px;
}
#nav #navpart{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; 
}
#links{
    padding: 10px;
    /* display: none; */
}
#links a{

}
#logo{
    /* background-color: brown; */
    /* opacity: 1; */
    height: 100px;
    overflow: hidden;
} 
#logo svg{
    display: block;
    height: 65px;
    width: 80px ;
    /* flex-shrink: 0; */
    /* margin-bottom:px; */
} 
#nav #twgl{
    height: 70px;
    /* margin-left: 3px; */
    margin: 13px;
}
#nav #twg{

}

#icons{
    padding: 8px 25px;
    border-radius: 50px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#icons i{
    padding: 9px 10px;
}
#navpart #icon{
    font-size: 18px;
    margin: 0 20px;
    font-weight: 100;
}

#cursor{
    height: 150px;
    width: 150px;
    background-color: blanchedalmond;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%,-50%);
    
}

#page1{
    min-height: 100vh;
    position: relative;
    width: 100%;
    padding: 40 1vw;
    padding-top: 35vh;
}
#page1 h1{
    font-size: 15.8vw;
    font-family: futura;
    line-height: 13vw;
    letter-spacing: -8px;
}

#cont{
    height: 100vh;
    width: 100%;
    margin-top: 1vw;
    position: relative;
}

#cont img{
    position: absolute;
    width: 100%;
    /* width: 1350px; */
    /* height: 100%; */
    object-fit: cover;
    top: 100px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    }

#buy{
    position: absolute;
    top: 23%;
    text-decoration: none;
    left: 58vw;
}
#buy svg {
    animation: rotate 10s linear infinite;
}

#buy span{
    position: absolute;
    top: 50%;
    left: 50%;
    color: black;
    transform: translate(-50%, -50%);
    font-family: Futura ;
    font-weight: 500;
    font-size: 30px;
}

#p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: black 1px solid;
    margin-top: 16vw;
    font-size: 12px;
}


@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

#page2{
    min-height: 100vh;
    width: 100%;
    position: relative;
    /* padding: 37vw 3vw; */
    padding: 4vw 2vw;
    display: flex;
    /* overflow: hidden; */
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3vh;
    left: 3vw;
}
#page2 .elem{
    height: 100vh;
    width: 100%;
    position: relative;
    /* margin-bottom: 2vw; */
    margin-right: 2vw;
}
#page2 .elem img{
    height: 98vh;
    width: 86%;
    object-fit: cover;
    scale: 1.2;
}
#page2 .elem .dets{
    height: 50px;
    border-radius: 50px;
    width: 85%;
    position: absolute;
    z-index: 9;
    
    top: 50%;
    
}
#page2 .elem .dets:hover{
    height: 150px;  
}
.dets .content{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1vw;
    font-size: 12px;
}
.hoverdets:hover {
    opacity: 0;

}


#page3{
    min-height: 100vh;
    width: 100%;
    position: relative;
    letter-spacing: 1px;
    /* padding: 10px 0; */
    text-align: center;
    bottom: 7vw;
}
#contt{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    /* bottom: 7vw; */
    padding: 0 55px;
    

}
#head{
    padding: 12px;
    font-family: futura;

    
}
.line{
    /* position: absolute; */
    width: 20%;
    height: 1px;
    background: currentColor;
    margin-left: 304px;
}
#desc span{

}
#desc{
    padding: 4vw 0;
    font-size: 19px;
    font-family: futura;

}
#desc p{
    padding: 33px 0px;
    max-width: 62%;
    margin-left: 16vw;
}
#desc .line:hover{
    transform: translateX(13px) ease-out;
}
#desc a{
    font-size: 12px;
}
#prdcts{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    text-align: center;
}

.child{
    /* height: 54vh; */
    width: 40%;
    font-size: 13px;
    /* padding: 15vw; */
    
}
.child img{
    width: 100%;
}
.child h3{
    font-size: 15px;
}
.child span{
    font-size: 13px;
}

#page4{
    position: relative;
    padding: 0vw 2vw;
    /* bottom: 133px; */
    min-height: 55vh;
    width: 100%;
    font-size: 19px;
    letter-spacing: 0.5px;
    text-align: center;
    font-family: futura;

}
#title{
    font-size: 47px;
    /* padding: 55px 18px; */
    line-height: 54px;
}
#des{
    /* padding: 6vw 0; */
    font-family: futura;
    font-size: 16px;
}
#des p{
    padding: 33px 0px;
    max-width: 62%;
    /* margin-left: 10vw; */
}
#desc button{
    background-color: black;
    color: white;
    border-radius: 29px;
    padding: 21px;
    font-weight: 600;
    margin: 9px;
}

#page5{
    position: relative;
    padding: 0vw 2vw;
    min-height: 100vh;
    width: 100%;
    font-size: 19px;
    letter-spacing: 1px;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
}

#img{
    /* margin: ; */
    display: flex;
    height: 55vh;
    justify-content: space-between;
    align-items: center;
    margin-top: 8vw;
    
}
#img img{
    padding: 0px 4px;
    height: 152%;
}


#footer{
    position: relative;
    padding: 0vw 2vw;
    min-height: 100vh;
    width: 100%;
    font-size: 19px;
    letter-spacing: .5px;
    text-align: left;
}
#foot{
    border-bottom: 1px solid;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 31px;
    font-family: futura;
}
#foot img{
    width: 189px;
    position: absolute;
    left: 41vw;
}
.body .social{
    display: flex;
    justify-content: space-between;
    margin: 0px 10px;
    /* margin: 68px 0; */
    
}
.social ul{
    list-style: none;
    font-size: 17px;
    margin-bottom: 35px;
}

.soc{
    font-size: 12px;
    color: rgb(170, 165, 165);
    margin-bottom: 40px;
}
.socp{
    font-size: 15px;
    padding: 0vw 26vw;
    /* margin-bottom: 41px; */
}
.soca{
    display: flex;
    justify-content: space-between;

}
.social li{
    margin-bottom: 5px;
}
.body #loggo{
    margin: 1vw 42vw;
}
#loggo img{
    margin: 41px 42px;
    width: 135px;
}



@media (max-width:600px) {

    #nav{
        /* height: 100px; */
        width: 100%;
        align-items: flex-start;
        padding: 13px 15px ;
    }
    #nav #navpart{
        /* gap: 47px;  */
        padding: 7vw 0vw;
       
    }
    #links{
        padding: 10px;
        display: none;
    }
    #logo{
        /* background-color: brown; */
        height: 83px;
        /* overflow: hidden; */
    }
    #logo svg{
        display: block;
        height: 67px;
        width: 80px;
    }
    #nav #twgl{
        height: 40px;
        margin-left: -20px;

    }
    #navpart #links a{
        text-decoration: none;
        text-transform: uppercase;
        color: #333;
        font-weight: 500;
        font-size: 14px;
        margin: 0 20px;
    }
    #icons{
        padding: 6px 19px;
        border-radius: 50px;
        background-color: #f7f7f7;
        font-size: 17px;
        gap: 53px;
       
    }
    #navpart #icon{
        font-size: 18px;
        margin: 0 20px;
        font-weight: 100;
    }
    
    #cursor{
        height: 150px;
        width: 150px;
        background-color: blanchedalmond;
        border-radius: 50%;
        position: fixed;
        transform: translate(-50%,-50%);
        
    }

    #page1{
        min-height: 70vh;
        width: 100%;
        padding: 158px 4vw;
        padding-top: 41vh;
    }

    #page1 h1{
        font-size: 15vw;
        letter-spacing: -3px;
    }

    #cont{
        height: 25vh;
        margin-top: 5vw;
    }
    
    #cont img{
        height: 53vh;
        width: 327px;
        top: 3vw;
        }

        #buy{
            top: 9%;
            left: 60vw;

            .svg{
                width: 28vw;
            }
        }

        
        #buy span{
            top: 47%;
            left: 56%;
            font-size: 20px;
        }

        
        #page2{
            
            padding: 5vw 3vw;
            flex-direction: column;
           
            /* margin-bottom: 188vw; */
        }

        #p{
            margin-top: 46vw;
            width: 100%;
            margin: 2px;
        }

        #page2 .elem{
            margin-bottom: 5px;
            bottom: 6vw;
            
        }
        #page2 .elem img{
            height: 98vh;
            width: 100%;
            padding: 13vw 8vw;
            position: relative;
            margin-top: 5vw;
            /* scale: 1.2; */

        }
        #page2 .elem .dets{
            height: 50px;
            border-radius: 50px;
            width: 70%;
            top: 50%;
            left: 9%;
            /* background-color: palegoldenrod; */
        }
        .dets .content{
            padding: 4vw;
        }
        
        #page3{
            letter-spacing: 1px;
            padding: 10px 0;
            text-align: center;
            padding-bottom: 15vw;
            font-size: 19px;

            margin: 30vw 2vw;
        }
        #contt {
            font-size: 17px;
            padding: 0 24px;
            flex-direction: column;
        }
        #head{
            padding: 12px;
        }
        .line{
            /* position: absolute; */
            width: 32%;
            height: 1px;
            background: currentColor;
            margin-left: 127px;
        }
        #desc{
            padding: 10vw 0;
            font-size: 19px;
        }
        #desc button{
            margin: 47px;

        }
        #desc p{
            padding: 3px;
        }
        
       
        .child{
            height: 55vh;
            width: 85vw;
            padding: 43px;
        }
        .child img{
            /* height: 100%; */
            width: 100%;
        }
        
        #page4{
            padding: 0vw 2vw;
            bottom: 133px;
        }

        #page5{
            /* bottom: 133px; */
            padding: 0vw 2vw;
            flex-direction: column;


        }

        #img{
            padding: 99px 4px;
        }

        #img img{
            width: 50%;
        }
        #des{
            padding: 50px 9px;

        }
        #des p{
           padding: 15px 1px;             
        }
        #footer{
            padding: 4vw 2vw;
        }
       
        #foot img{
            left: 14vw;
            top: 11vw;
        }
        
        .body .social{
            display: flex;
            justify-content: space-around;
            /* margin: 68px 0; */
            
        }
        .social ul{
            margin-bottom: 35px;
        }
        
        .soc{
            margin-bottom: 40px;
        }
        .socp{
            font-size: 15px;
            padding: 1vw 2vw;
            margin-bottom: 41px;
        }
        .soca{

        }
        .social li{
            margin-bottom: 5px;
        }
        
        #loggo img{
            margin: 43px -112px;
            width: 69px;
        }

       
}

/* @media (max-width:1200px) {

        #nav{
            width: 100%;
            align-items: flex-start;
            padding: 13px 15px ;
        }
        #nav #navpart{
            padding: 4vw 0vw;
           
        }
        #links{
            padding: 10px;
            display: none;
        }
        #logo{
            height: 68px;
            overflow: hidden;
        }
        #logo svg{
            display: block;
            height: 67px;
            width: 80px;
        }
        #nav #twgl{
            height: 40px;
            margin-left: -20px;
    
        }
        #navpart #links a{
            text-decoration: none;
            text-transform: uppercase;
            color: #333;
            font-weight: 500;
            font-size: 14px;
            margin: 0 20px;
        }
        #icons{
            padding: 6px 19px;
            border-radius: 50px;
            background-color: #f7f7f7;
            font-size: 17px;
            gap: 53px;
           
        }
        #navpart #icon{
            font-size: 18px;
            margin: 0 20px;
            font-weight: 100;
        }
        
        #cursor{
            height: 150px;
            width: 150px;
            background-color: blanchedalmond;
            border-radius: 50%;
            position: fixed;
            transform: translate(-50%,-50%);
            
        }
    
        #page1{
            min-height: 70vh;
            width: 100%;
            padding: 0 3vw;
            padding-top: 37vh;
        }
    
        #page1 h1{
            font-size: 15vw;
            letter-spacing: -3px;
        }
    
        #cont{
            height: 25vh;
            margin-top: 5vw;
        }
        
        #cont img{
            height: 53vh;
            width: 327px;
            top: 3vw;
        }
    
            #buy{
                top: 9%;
                left: 60vw;
    
                .svg{
                    width: 28vw;
                }
            }
    
            
            #buy span{
                top: 47%;
                left: 56%;
                font-size: 20px;
            }
    
            
            #page2{
               
                padding: 5vw 3vw;
                flex-direction: column;
                
            }
    
            #p{
                margin-top: 46vw;
            }
    
            #page2 .elem{
                margin-bottom: 2vw;
                
            }
            #page2 .elem img{
                height: 98vh;
                width: 100%;
                padding: 13vw 8vw;
                position: relative;
                margin-top: 5vw;
    
            }
            #page2 .elem .dets{
                height: 50px;
                border-radius: 50px;
                width: 85%; 
                position: absolute;
                z-index: 9;
            }
            
            #page3{
               
                padding-bottom: 86vw;
                margin: 6vw 2vw;
            }
            
           
            .child{
                height: 54vh;
                width: 88vw;
                padding: 15 vw;
            }
            .child img{
                width: 100%;
            }
            
} */