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

body{

    font-family: 'Poppins', sans-serif;
}


.small-container{
    max-width:1560px;
    margin:auto;
    padding-left:30px;
    padding-right:30px;
    overflow: hidden;
}

.container{
    max-width:1300px;
    margin:auto;
    padding-left:25px;
    padding-right:25px;
    overflow: hidden;
        
}

.row,.row-footer{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content: center;
    gap:20px;
    padding:25px;
}



.rating i, .rating .bi,.col-3 .bi{
    background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size:15px;
}

.ratingBig i, .ratingBig .bi,.col-3 .bi{
    background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size:40px;
}



/*============================================================Main Header==============================================*/

.navbar{
    display:flex;
    align-items:center;
    padding:0px 20px;
    top:0;
}

nav{
    flex:1;
    flex-basis:10%;
    width:100%;
    margin:0 auto;  
    text-align: right;
    
}

nav ul{
    list-style-type:none;
    gap:20%;

}

nav ul li{
    display: inline-block;
    margin-right:20px;	
}

a{
    text-decoration:none;
    color:#987c32;
    transition: 0.8s;
}

a:hover{
    color:#fefefd;
    transition: 0.8s;
}

.logo{
    flex-basis:25%;
    width:100%;
    max-width:300px;
    flex-basis:25%;
}


.logo img{
    height:50%;
    width:70%;
    border-radius:0% ;
    padding:20px;
    justify-content: center;
    align-items: center;
}


.header{

    background-image:url(0.mainImages/gearbox.jpg);
    background-size: cover;
    height:100%;
    overflow:hidden;
}

.rowMessage{
    align-items:center;
    width:100%;
    max-width:1300px;
    height:70vh;
    overflow: hidden;
    display:flex;
    margin-left:10%;
    margin-right:10%;
}

.col-1{
    flex-basis:30% ;
    width:100%;
}

.HeaderText{
    font-size:75px;
    background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.col-1-Image{
    flex-basis:70% ;
    width:100%;
    max-width:800px; 
    margin-bottom:240px;
}

.theimg{
    margin:auto;
    margin-bottom:20px; 
    width:100%;
    
    
}

.mainImage{
 max-width: 800px;
}



.col-1 .text{
    color:rgb(163, 157, 157);
    font-size:16px;
}

.pictureLink{
    display:flex;
    flex-basis: 25%;
    width:100%;
    max-width:200px;
    font-size: 30px;
    padding:20px; 
}

.innerPicture{
    margin:0px auto; 
    gap:20%; 
    width:100%
}


.headerTitle
{
    background-image:url(0.mainImages/headerImage.jpg);
    background-size:cover;
    height:100px; 
    padding-left:160px; 
    padding-top:20px; 	
}



/*============================================================My Ads=================================================*/

.about{
font-size:30px;
text-align:center;
margin:0 80px;
position:relative;
line-height:50px;
color:white;	
}
.small-container-about,.small-container-Product{
width:100%;
margin:auto 0px;
padding-left:25px;
padding-right:25px;
overflow:hidden;
}

.offer{
background: linear-gradient(to right, #434343 0%, black 100%);
padding-top:30px;
padding-bottom:60px;
padding-left:0;

}

.button{
background: #b48b22;
color:white;
width:120px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
font-size:15px;
margin-left:15%;
transition:1s;
font-weight:strong;
cursor:pointer;
}

.button:hover{
background:transparent;
border:2px solid #b48b22;

}


small{
color:#555;
}


.row-about{
display:flex;
width:100%;
justify-content: center;
padding:25px;
max-width:1500px;
}


.col-Main,.col-Main-video{
flex-basis:30%;
width:100%;	
}

.col-Main-video{
flex-basis:50%;
}

.col-Main-video video{
max-width:720px;
height:100%;
max-height:500px;
}

.col-Main h1{
font-size:47px;
line-height:60px;
margin:15px 0;
background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.description{
padding:20px;
text-align: justify;
font-size:18px;
margin: 10px 40px
}


.small-container-about small{
font-size:15px;
}


.about::after{
content:'';
background:#b48b22;
width:85px;
border-radius:0px 15px 0px  15px;
height:7px;
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}


/*============================================================Category=================================================*/


.categories{
margin:70px 0;
}

.col-3-category{
flex-basis:30%;
min-width:250px;
margin-bottom:30px;
position:relative;
background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);	
}


.img-box{
position:relative;
}

.col-3-category img{
width:100%;
display:block;
margin:auto;

}

.content2{
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    background-color:rgba(0,0,0,0.6);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    transform:translateY(15px);
    opacity:0;
    transition:0.8s;
    overflow:hidden;
}

.content2:hover{
opacity:1;
transform:translateY(0px);

}

.content2 h1{
font-size:40px;
background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

.content2 p{
color:white;
text-align:center;
padding: 0px 20px;
}

.content2 > *{
transition: transform 0.6s;
}

.content2:hover > *{
transform:translateY(0px);
}

/*============================================================Featured Product=================================================*/
.col-4{
flex-basis:20%;
padding:10px;
min-width:200px;
margin-bottom:50px;
transition:transform 0.9s;
cursor:pointer;
position:relative;
overflow:hidden;
box-shadow:6px 6px 10px 1px rgba(0,0,0,0.15), -6px -6px 10px -1px rgba(255,255,255,0.7);

}


.col-4::before{

content:"";
position:absolute;
left:0;
width:100%;
height:0%;
background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
z-index:-1;
top:0;
border-radius:60% 0% 30% 0%;
transition:1.2s;
}

.col-4:hover::before{
height:100%;

}


.col-4 img{
width:100%;

}

.col-4 .featured img:hover{
cursor:pointer;
}

.ProductName,.price{
font-size:18px;
}

.col-4:hover{
transform:translateY(-5px);	
}



.title{
text-align:center;
margin:0  80px;
position:relative;
line-height:60px;
color:#555;
font-size:30px;	
}


.title::after{
content:'';
background:#b48b22;
width:80%;
max-width:150px;
border-radius:0px 15px 0px  15px;
height:7px;
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
} 

.link{
color:#555;

}
/*============================================================Top Product=================================================*/
            /* carousel */
            .carousel{
                height: 80vh;
                margin-top: -50px;
                width: 100vw;
                overflow: hidden;
                position: relative;
            }
            .carousel .list .item{
                width: 100%;
                height: 100%;
                position: absolute;
                inset: 0 0 0 0;
            }
            .carousel .list .item img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .carousel .list .item .contentSlider{
                position: absolute;
                top: 20%;
                width: 1140px;
                max-width: 80%;
                left: 50%;
                transform: translateX(-50%);
                padding-right: 30%;
                box-sizing: border-box;
                color: #fff;
                text-shadow: 0 5px 10px #0004;
            }
            .carousel .list .item .author{
                font-weight: bold;
                letter-spacing: 10px;
            }
            .carousel .list .item .title,
            .carousel .list .item .topic{
                font-size: 5em;
                font-weight: bold;
                line-height: 1.3em;
            }
            .carousel .list .item .topic{
                background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
            }

            .des{
                font-size:18px;
                max-width:600px;
            }
            .carousel .list .item .buttons{
                display: grid;
                grid-template-columns: repeat(2, 130px);
                grid-template-rows: 40px;
                gap: 5px;
                margin-top: 20px;
            }
            .carousel .list .item .buttons button{
                border: none;
                background: linear-gradient(87.4deg, rgb(255, 241, 165) 1.9%, rgb(200, 125, 76) 49.7%, rgb(83, 54, 54) 100.5%);
                letter-spacing: 3px;
                font-family: Poppins;
                font-weight: 500;
                cursor:pointer;
            }

            .carousel .list .item .buttons button:nth-child(2){
                background: transparent;
                border: 2px solid darkgoldenrod;
                color:  darkgoldenrod;
                cursor:pointer;
            }
            
            .carousel .list .item .buttons button:hover,.carousel .list .item .buttons button:nth-child(2):hover{
                background: rgb(119, 117, 117);
            }


            /* thumbail */
            .thumbnail{
                position: absolute;
                bottom: 50px;
                left: 50%;
                width: max-content;
                z-index: 100;
                display: flex;
                gap: 20px;
            }
            .thumbnail .item{
                width: 150px;
                height: 220px;
                flex-shrink: 0;
                position: relative;
            }
            .thumbnail .item img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 20px;
            }
            .thumbnail .item .contentSlider{
                color: #fff;
                position: absolute;
                bottom: 10px;
                left: 10px;
                right: 10px;
            }
            .thumbnail .item .contentSlider .titleSlider{
                font-weight: 500;
                font-size:20px;
            }
            .thumbnail .item .contentSlider .productSlider{
                width:100%;
                position:absolute;
                bottom:60%;
            }
            .thumbnail .item .contentSlider .descriptionSlider{
                font-weight: 300;
            }
            /* arrows */
            .arrows{
                position: absolute;
                top: 80%;
                right: 52%;
                z-index: 100;
                width: 300px;
                max-width: 30%;
                display: flex;
                gap: 10px;
                align-items: center;
                
            }
            .arrows button{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #eee4;
                border: none;
                color: #fff;
                font-family: monospace;
                font-weight: bold;
                transition: .5s;
                cursor:pointer;
            }
            .arrows button:hover{
                background-color: #fff;
                color: #000;
            }

            /* animation */
            .carousel .list .item:nth-child(1){
                z-index: 1;
            }

            /* animation text in first item */

            .carousel .list .item:nth-child(1) .contentSlider .author,
            .carousel .list .item:nth-child(1) .contentSlider .titleSlider,
            .carousel .list .item:nth-child(1) .contentSlider .topic,
            .carousel .list .item:nth-child(1) .contentSlider .des,
            .carousel .list .item:nth-child(1) .contentSlider .buttons
            {
                transform: translateY(50px);
                filter: blur(20px);
                opacity: 0;
                animation: showContent .5s 1s linear 1 forwards;
            }
            @keyframes showContent{
                to{
                    transform: translateY(0px);
                    filter: blur(0px);
                    opacity: 1;
                }
            }
            .carousel .list .item:nth-child(1) .contentSlider .titleSlider{
                animation-delay: 1.2s!important;
            }
            .carousel .list .item:nth-child(1) .contentSlider .topic{
                animation-delay: 1.4s!important;
            }
            .carousel .list .item:nth-child(1) .contentSlider .des{
                animation-delay: 1.6s!important;
            }
            .carousel .list .item:nth-child(1) .contentSlider .buttons{
                animation-delay: 1.8s!important;
            }
            /* create animation when next click */
            .carousel.next .list .item:nth-child(1) img{
                width: 150px;
                height: 220px;
                position: absolute;
                bottom: 50px;
                left: 50%;
                border-radius: 30px;
                animation: showImage .5s linear 1 forwards;
            }
            @keyframes showImage{
                to{
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 0;
                }
            }

            .carousel.next .thumbnail .item:nth-last-child(1){
                overflow: hidden;
                animation: showThumbnail .5s linear 1 forwards;
            }
            .carousel.prev .list .item img{
                z-index: 100;
            }
            @keyframes showThumbnail{
                from{
                    width: 0;
                    opacity: 0;
                }
            }
            .carousel.next .thumbnail{
                animation: effectNext .5s linear 1 forwards;
            }

            @keyframes effectNext{
                from{
                    transform: translateX(150px);
                }
            }

            /* running time */

            .carousel .time{
                position: absolute;
                z-index: 1000;
                width: 0%;
                height: 5px;
                background-color: rgb(69, 79, 154);
                left: 0;
                top: 0;
            }

            .carousel.next .time,
            .carousel.prev .time{
                animation: runningTime 3s linear 1 forwards;
            }
            @keyframes runningTime{
                from{ width: 100%}
                to{width: 0}
            }


            /* prev click */

            .carousel.prev .list .item:nth-child(2){
                z-index: 2;
            }

            .carousel.prev .list .item:nth-child(2) img{
                animation: outFrame 0.5s linear 1 forwards;
                position: absolute;
                bottom: 0;
                left: 0;
            }
            @keyframes outFrame{
                to{
                    width: 150px;
                    height: 220px;
                    bottom: 50px;
                    left: 50%;
                    border-radius: 20px;
                }
            }

            .carousel.prev .thumbnail .item:nth-child(1){
                overflow: hidden;
                opacity: 0;
                animation: showThumbnail .5s linear 1 forwards;
            }
            .carousel.next .arrows button,
            .carousel.prev .arrows button{
                pointer-events: none;
            }
            .carousel.prev .list .item:nth-child(2) .contentSlider .author,
            .carousel.prev .list .item:nth-child(2) .contentSlider .titleSlider,
            .carousel.prev .list .item:nth-child(2) .contentSlider .topic,
            .carousel.prev .list .item:nth-child(2) .contentSlider .des,
            .carousel.prev .list .item:nth-child(2) .contentSlider .buttons
            {
                animation: contentOut 1.5s linear 1 forwards!important;
            }

            @keyframes contentOut{
                to{
                    transform: translateY(-150px);
                    filter: blur(20px);
                    opacity: 0;
                }
            }
            @media screen and (max-width: 678px) {
                .carousel .list .item .contentSlider{
                    padding-right: 0;
                }
                .carousel .list .item .contentSlider .titleSlider{
                    font-size: 30px;
                }
            }

/*============================================================Testominal=================================================*/

.testominal{
    padding-top:100px;
}

.col-3{
    flex-basis:30%;
    min-width:250px;
    margin-bottom:30px;
    position:relative;
}

.testominal .col-3{
    text-align:center;
    padding:40px 20px;
    box-shadow:0 0 20px 0px rgba(0,0,0,0.1);
    cursor:pointer;
    transition:2s;
}

.testominal .col-3 img{
    width:50px;
    margin-top:20px;
    border-radius:50%;	
    
}

.testominal .col-3:hover{
    transform:translateY(-10px);
    background-color:black;
}

.bi.bi-quote{
    font-size:34px;
    color:#25385b;
}

.col-3 p{
    font-size:12px;
    margin:12px 0;
    color:#777;	
}

.col-3 p:hover{
    
    color:white;
}

.testominal .col-3 h3{
    font-weight:600;
    color:#555;
    font-size:16px;

}

/*============================================================Footer=================================================*/

.footer{
    background:#000;
    color:#8a8a8a;
    font-size:14px;
    padding:60px 0 20px;
}

.footer .container{
    max-width: 2500px;
}

.footer ul li a{
    color:rgb(164, 163, 163);
}

.footer ul li a:hover{
    color:white;
    
}

.footer h3{
    color:#fff;
    margin-bottom:20px;
}

.footer p{
    color:#8a8a8a;
    
}

.footer-col, .footer-col-contact{
    max-width:250px;
    margin-bottom:20px;	
    max-height: 200px;
    flex-basis:25%;
    text-align: center;
    width:100%;
    
}

.footer-col marquee{
height:80px;
padding:10px;
text-align: center;
}

.footer-col-contact ul{
    display:flex;
    height:50px;
    justify-content: center;
}

.footer-col-contact ul li{
flex-basis: 20%;

}


.footer-col-contact ul li i{
    background-color:white;
    padding:10px;
    border-radius:50%;
    cursor: pointer;
    color:black;

}


.footer-col-contact ul li i .bi{
    
    font-size:20px;
    
}

.info
{
   top:35px;
   left:40px;
   background-color:white;
   border-radius:0px 20px 20px 20px;
   padding:10px;
   position:absolute;
   transition: 2s;
   opacity:0;
}


.footer-col-contact ul li i:hover{
background-color:rgb(84, 81, 81);
padding:10px;
border-radius:50%;
cursor: pointer;
color:white;   
}

.footer-col-contact ul li i:hover + .info{
opacity:1;
}

.menu-icon{
    width:20px;
    margin-left:20px;
    display:none;
    
}

.footer-col-contact ul{
    list-style: none;
}

.Footer-List{
    list-style: none;

}

.footer h6{
    font-size:40px; 
    color:white;
}

/**********************************************************Product Details Page**********************************************/
/*============================================================Single Product=================================================*/


.col-1{
    flex-basis:40% ;
    min-width:250px;
    
}

.col-1 img{
    width:100%;
    padding:20px;
    background-image:url(0.mainImages/Gearbox.jpg); 
    background-size: cover;
    border:2px solid #25385b;
}

.single-product{
    margin-top:80px;
}

.single-product.col-2 img{
    padding:0;
}

.single-product.col-2 {
    padding:20 px;
}

.single-product h4{
    margin:20px 0;
    font-size:22px;
    font-weight:bold;
}

.single-product select{
    display:block;
    padding: 10px;
    margin-top:20px	;
    background-color:#929698;
    color:white;
    border:none;
}

.single-product input{
    width:50px;
    height:40px;
    padding-left:10px;
    font-size:20px;
    margin-left:10px;
    border:1px solid #ff523b;
}

input:focus{
    outline:none;
    
}

.single-product .bi{
    color:#b48b22;
    margin-left:10px;
    
}

.small-img-row{
    display:flex;
    justify-content:space-between;
    padding-top:20px;

}

.small-img-col{
flex-basis:30%;
cursor:pointer;	
}

.small-img-col img{
    background-color:#929698;
    border:2px solid #25385b;
    padding:10px 0px;
    }

.product{
    margin:0 auto 0px;
    position:relative;
    line-height:50px;
    color:black;	
}

.product::after{
    content:'';
    background:#25385b;
    width:80px;
    height:5px;
    border-radius:5px;
    position:absolute;
    bottom:0;
    left:5%;
    transform:translateX(-50%);
}

.productBtn
{
    display:flex; 
    margin:20px 0px; 
    color:white;

}

.wrapper
{
    background-color:darkgrey;
    height:35px;
    width:105px;
    justify-content:center; 
    align-items: center;
    padding:8px 0px; 
    display:flex; 
    border-radius:5px; 
    border-right:2px solid rgb(84, 81, 81); 
    border-left:2px solid rgb(84, 81, 81);

}

.btn,.btn2{
    background:#77797a;
    color:white;
    text-align:center;
    padding:8px 10px;
    margin:0px 20px;	
    transition:background 2s;
    width:30%;
    cursor: pointer;
    font-size: 15px;
    transition: 1s;
}


.btn:hover{
    background-color:#25385b;
}


.product-description{
    margin-left:5%;
    padding:20px;
    line-height:1.5;
    gap:10%;
}

.product-description ul li{
    text-align: justify;
}

.single-product h1,.single-product h4,.single-product p,.single-product h3{
    margin-left:5%;
}
/*************************************************************Product Page*************************************************/
/*============================================================All Product=================================================*/
.row-2{
    justify-content:space-between;
    margin: 100px auto	
}

.headerTitle h1{
    font-size:40px; 
    font-family:'Lucida Sans Unicode, Geneva, Verdana, sans-serif';
    font-weight:600px;

}


select{

    width:150px;
    height: 60px;
    background-color:black;
    padding:20px;
    color:white;


}

select:hover{
background-color: #777;
color:white;
}

.inputSearch
{
    border-radius:10px; 
    height:34px;
    padding:10px;
}

.searchBtn{
background-color:#25385b;
height:34px;
}


.searchBtn:hover{
    border:4px solid #25385b;
    height:34px;
    }
.page-btn{
    margin:0 auto 80px;
    height:20px;

    
}

.page-btn span{
    display:inline-block;
    background-color: #25385b;
    color:white;
    border-radius:30%;
    margin-left:10px;
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    cursor:pointer;
    
}

.page-btn span:hover{
    border:3px solid #25385b;
    background-color:white;
    color:#25385b;
    
}

.col-4 a{
    display:block;
}

    
.search_wrap{
    justify-content: center;
    align-items: center;;
    width: 70%;
    margin: 38px auto;
}

.search_wrap .search_box{
    position: relative;
    width: 700px;
    height: 60px;
}

.search_wrap .search_box .input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 18px;
}



.search_wrap .search_box .btn{
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height:100%;
    background:black;
    z-index: 1;
    cursor: pointer;
}

.search_wrap .search_box .btn:hover{
    background: rgb(134, 116, 17);	
}



.search_wrap.search_wrap_5 .search_box .btn{
    width: 20%;
    height: 45px;
    top: 8px;
    right: 5px;
    font-size: 80%;
    border-radius: 3px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}



.search_wrap.search_wrap_5 .search_box .input
{
    padding-right: 145px;
}



/*************************************************************Contact us Page*************************************************/
    .contact_section{
        margin:220px;
        }

    .form-container{
        max-width:600px;
        width:100%;
        margin:0 auto;
        box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
        padding-top:20px;
        margin-top:40px;
        background-color: #25385b;
        opacity:80%;
        padding-bottom:20px;
        max-height:800px;
        
    }

    .form-inner{
        padding:30px;
    }

    .h1Contact{
        font-weight:normal;
        padding:15px;
        color:white;
        text-align:center;
        box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
    }

    .input-holder{

        position:relative;
        margin-bottom:25px;
    }

    .input-text,textarea{
        width:100%;
        height:40px;
        border:none;
        border-bottom:1px solid white;
        background:transparent;
        color:white;
    }

    textarea{
        min-height:100px;
        padding:15px 0;
    }


    .label{
        position:absolute;
        pointer-events:none;
        transition:0.9s;
        font-size:16px;
        color:white;
        top:18px;
        opacity:0;
    }

    .sendButton{
        cursor:pointer;
        border-radius:3px;
        padding:15px;
        width:100%;
        box-shadow:0 3px 6px 0 rgba(0,0,0,0.1);
        border:none;
        font-size:16px;
        background:transparent;
        transition:1.2s;
        background-color:#808080;
    }

    .sendButton:hover{
        box-shadow:0 3px 6px 0 rgba(  0,0,0,0.4);
        background-color:transparent;
        border:2px solid #808080;
        color:white;
    }

    .sendButton:focus{
        outline:0;
    }

    input:focus,textarea:focus{
        outline:0;
        border-bottom:2px solid white;
    }
    input:focus::placeholder,textarea:focus::placeholder {
    color: transparent;
    }

    input:focus ~.label,
    textarea:focus ~.label{
        opacity: 1;
        top:-10px;
        left:0;
        font-size:11px;
    }





/*============================================================Format=================================================*/
.header{
    background-image: white;
}

.header .row{
    margin-top:60px;
    
}





/*============================================================RESPONSIVE MEDIA QUERY=================================================*/

/*=================================================================MAX-WIDTH  1380px=================================================*/

@media screen and (max-width: 1380px) {

.carousel{
height: 60vh;
}


.carousel .list .item .contentSlider{
top: 15%;

}
.carousel .list .item .title,
.carousel .list .item .topic{
font-size:40px;
}

.des{
font-size:18px;

}

.thumbnail{
top:70%;
left: 40%;
}

.buttons button{
font-size:12px;
}
}


/*=================================================================MAX-WIDTH  1370px=================================================*/

@media screen and (max-width: 1370px) {


.carousel{
height: 85vh;
}

.rowMessage .col-1 .HeaderText{
text-align: left;
font-size: 55px;
width:80%;
}

.rowMessage .col-1 .text,.rowMessage .col-1 small{
text-align: left;
font-size: 20px;
width:80%;
}


.mainImage{
max-width: 50%;
position:absolute;
top:0%;
left:47%;
}
}


@media screen and (height :912px) {


.header{
height:75vh;
}

.rowMessage .col-1{
padding-bottom: 20%;;
}

.mainImage{
left:38%;
}


}



/*=================================================================MAX-WIDTH  1280px=================================================*/

@media screen and (max-width: 1280px)  {
.carousel{
height: 90vh;
}

.des{
font-size:16px;

}


.thumbnail{
top:60%;
}
.buttons button{
font-size: 12px;
}


/*-------column product------*/
.col-product h4{
margin:0px 20px;
font-size:15px;
}

/*-------product details------*/
.product-details.col-4{
flex-basis:20%;
max-width:150px;

}

    
/*-------Ads-----*/	

.small-container-about{
padding:0;
}

.row-about{
padding:25;
}
                    
.col-Main,.col-Main-video{
flex-basis:100%;
width:100%;
padding:0;
padding-top: 20px;;
}


.col-Main-video video{
width:100%;

}

.col-Main h1{
font-size:35px;
line-height:1.2;

}					

.description{
padding:10px;
margin:0px;
}

.description p{

font-size:15px;

}

.description h1{

font-size:30px;	
}

.description small{
font-size: 15px;
}


.button{
margin: 10px 5%;
}

.col-3-category h1{
font-size:25px;
}





}

@media screen and (width:1180px) {

.header{
height:70vh;
}




}


/*=================================================================MAX-WIDTH  1034px=================================================*/


@media screen and (max-width: 1034px)  {

.carousel{
height: 100vh;
}

/*-------Ads-----*/	

.col-Main h1{
font-size:25px;
line-height:1.2;

}					
}

/*=================================================================WIDTH 1024px=================================================*/

@media screen and (width:1024px) {

.carousel{
height:50vh;
}

.header{
height:60vh;
}

.rowMessage{
padding-bottom: 55%;
}
.rowMessage .col-1{
flex-basis: 100%;
width:100%;
}

.mainImage{
top:15%;
max-width: 60%;
left:40%;
}
}

/*=================================================================HEIGHT 1024px=================================================*/

@media screen and (height:1024px) {


.header{
    height:70vh;
   }


  
}

/*=================================================================HEIGHT 768px=================================================*/

@media screen and (height:768px) {


.header{
    height:100vh;
   }

   .rowMessage{
    padding-bottom: 0%;
   }
   .rowMessage .col-1{
    flex-basis: 100%;
    width:100%;
}

.mainImage{
    top:38%;
    max-width: 45%;
    left:50%;
}
}

/*=================================================================HEIGHT  600px=================================================*/

@media screen and (height:600px) {
    .carousel{
        height: 10vh;
    }

    nav ul{
        top:30px;
    }

    .header{
        height:100vh;
       }

       .rowMessage{
        padding-bottom: 0%;
       }
       .rowMessage .col-1{
        flex-basis: 100%;
        width:100%;
    }
    
    .mainImage{
        top:38%;
        max-width: 35%;
        left:55%;
    }
    }


/*=================================================================MAX-WIDTH  950px=================================================*/
@media screen and (max-width: 950px)  {

nav ul{
top:9%;	
}


.carousel{
height: 200vh;
}


nav ul{
border-top: 5px solid rgb(97, 85, 17);
position:absolute;
left:0;
background:black;
width:100%;
margin-top:80px;
overflow:hidden;
transition:max-height 0.9s;
text-align:center;
z-index: 2;
border-bottom: 5px solid rgb(97, 85, 17);


}


nav ul li{
width:100%;	
}




nav ul li a{
color:rgb(110, 105, 105);
display:block;
padding:10px;
}


nav ul li a:hover{
background-color: #2b2d42;
}



.menu-icon{
display:block;
cursor:pointer;	
}


.logo img{
width:100%;
margin-left:0;
}




.rowMessage .col-1 .HeaderText{
text-align: left;
font-size: 45px;
width:50%;
}

.rowMessage .col-1 .text{
text-align: left;
font-size: 15px;
width:80%;
}


.mainImage{
max-width: 60%;
position:absolute;
top:10%;
left:40%;
}




/*-------product page------*/
select{
height: 58px;
}
/*-------product details------*/
.col-4 h4{
font-size: 15px;	
}

.single-product .row{
flex-direction: column;
}

.ratingBig{
text-align: center;
}

}

/*=================================================================WIDTH 932px=================================================*/

@media screen and (width:932px) {


.header{
height:150vh;
}

.rowMessage .col-1 .HeaderText{
width:80%;
}

.mainImage{
top:20%;
}



}

/*=================================================================MAX-WIDTH  920px=================================================*/

@media screen and (max-width: 920px) {

.rowMessage .col-1 .HeaderText{
font-size: 50px;
width:100%;
}

.mainImage{
max-width: 35%;
top:20%;
left:50%;

}

}

/*=================================================================WIDTH 912px=================================================*/
@media screen and (width:912px) {


.carousel{
height:50vh;
}

nav ul{
top:30px;
}

.header{
height:60vh;
}

.rowMessage{
padding-bottom: 70%;
}
.rowMessage .col-1{
flex-basis: 100%;
width:100%;
}

.mainImage{
top:20%;
max-width: 60%;
left:30%;
}
}






/*=================================================================MAX-WIDTH  900px=================================================*/

@media screen and (max-width: 900px) {

nav ul{
top:48px;	
}


.carousel{
height: 200vh;
}



}

/*=================================================================WIDTH 896px=================================================*/

@media screen and (width:896px) {
.mainImage{
max-width: 40%;
top:15%;
left:50%;

}
}

/*=================================================================MAX-WIDTH  850px=================================================*/
@media screen and (max-width: 850px) {


nav ul{
top:42px;	
}

.carousel{
height: 250vh;
}

.thumbnail{
top:70%;
}

.buttons button{
font-size:12px;
}

.rowMessage .col-1 .HeaderText{
width:50%;
}

/*-------Ads-----*/	

.col-Main h1{
font-size:23px;

}






/*-------product page------*/

.headerTitle h1{
margin-left:10%;
}

.headerTitle p{
margin-left:8%;

}

/*-------product details------*/
.headerTitle{
height:80px; 
padding-left:15px; 
padding-top:10px; 

}
.headerTitle p{
padding-left: 18px;
font-size: 10px;
}

.headerTitle h1{
font-size: 25px;
height:20px;
padding-top:0;

}

.single-product{
margin-top:0px;
}
.single-product .row{
flex-direction:column;

}

.col-1{
flex-basis: 80%;
}

.col-1 h1{
font-size: 25px;
text-align: center;
}




}


/*=================================================================WIDTH 844px=================================================*/

@media screen and (width: 844px) {

/*------- Header -------*/


.mainImage{
top:20%;
max-width: 37%;
left:55%;

}

}



/*=================================================================MAX-WIDTH  610px=================================================*/

@media screen and (max-width: 840px) {

nav ul{
top:40px;	
}


.carousel{
height: 75vh;
}

/*-------contact us------*/
.contact_section{
width:500px;
margin:20px auto;
}
}

/*=================================================================WIDTH 820px=================================================*/
@media screen and (width:820px) {

.header{
height:70vh;
}

.rowMessage .col-1{
padding-bottom: 45%;
}

.mainImage{
top:28%;
max-width: 60%;
left:40%;
}


}


/*=================================================================MAX-WIDTH  780px=================================================*/

@media screen and (max-width: 780px) {



nav ul{
top:35px;	
}

    .carousel{
        height: 80vh;
    }




    /*-------footer section------*/
    .row-footer{
        flex-direction: column;
    }
    .footer-col,.footer-col-contact{
        flex-basis:100%;
    }

    
/*-------Ads-----*/	

.small-container-about{
padding:0;
}

.row-about{
flex-direction: column;
padding:0;
}





}

/*=================================================================WIDTH 768px=================================================*/

@media screen and (width:768px) {

.header{
height:70vh;
}

.mainImage{
top:25%;
max-width: 55%;
left:44%;
}


}




/*=================================================================MAX-WIDTH  750px=================================================*/

@media screen and (max-width: 750px) {

nav ul{
top:30px;	
}



.carousel{
height: 220vh;
}

.mainImage{
max-width: 50%;
top:20%;
left:50%;
}



}

/*=================================================================MAX WIDTH 740px=================================================*/
@media screen and (width:740px) {
.header{
height:120vh;
}
}

/*=================================================================MAX WIDTH 720px=================================================*/
@media screen and (width:720px) {
.carousel{
height:150vh;
}
}




/*=================================================================MAX WIDTH 700px=================================================*/
@media screen and (max-width: 700px) {

nav ul{
top:25px;	
}



.carousel{
height: 220vh;
}


.mainImage{
max-width: 40%;
top:50%;
left:55%;
}



}


/*=================================================================MAX-WIDTH  680px=================================================*/

@media screen and (max-width: 680px) {

nav ul{
top:20px;	
}

.carousel{
height: 220vh;
}
.mainImage{
max-width: 50%;
top:45%;
left:45%;
}

.rowMessage .col-1 .HeaderText{
font-size: 50px;
width:100%;
}

.rowMessage .col-1 .text,.rowMessage .col-1 small{
font-size: 15px;
}




}

@media screen and (max-width: 680px) {
.mainImage{
display:none;
}
}


@media screen and (height: 280px) {

.carousel{
height: 280vh;
}

}




/*=================================================================MAX-WIDTH  630px=================================================*/

@media screen and (max-width: 630px) {



.carousel .list .item .contentSlider{
top: 10%;

}

.des{
font-size:18px;
}



nav ul{
top:11px;	
}

.mainImage{
top:53%;
display:flex;
}

.rowMessage .col-1 .HeaderText{
font-size: 30px;
}




/*-------product page------*/

.search_wrap{
width: 50%;
}

select{

width:44%;
height: 50px;
padding:10px;
font-size:10px;
}

.search_wrap .search_box{

height: 50px;

}

.search_wrap.search_wrap_5 .search_box .btn{
width: 40%;
height: 28px;
right: 20px;
font-size: 10px;
}

.search_wrap.search_wrap_5 .search_box .input
{
padding:20px;
font-size:10px;

}



.small-container{
padding:0;
}



/*-------contact us------*/
.contact_section{
width:400px;

}
.form-container{
width:100%;
}

}


/*=================================================================WIDTH  600px=================================================*/

@media screen and (width: 600px) {

/*------- Header -------*/

.header{
height:50vh;
}
.mainImage{
top:15%;
max-width: 60%;
left:35%;
}

.rowMessage{
padding-bottom:100px;
}

.rowMessage .col-1{
margin-bottom:40px;
padding-bottom:70%;
}

.carousel{
height: 80vh;
}

}

/*=================================================================MAX-WIDTH  570px=================================================*/
@media screen and (max-width: 570px) {

nav ul{
top:10px;	
}


/*-------list of top product------*/

.carousel{
height: 100vh;
}

.des{
font-size:15px;
}		

.thumbnail{
top:65%;
left: 40%;
}




}

/*=================================================================MAX-WIDTH 550px=================================================*/


@media screen and (max-width: 550px) {

nav ul{
top:5px;	
}


.product-description ul li{
text-align: justify;
}


}


/*=================================================================WIDTH  540px  && WIDTH 512px =================================================*/

@media screen and (width:540px) , screen and (width:512px) {



.rowMessage .col-1{
padding-bottom: 20%;;
}

.mainImage{
top:40%;
left:27%;
max-width: 75%;
}


}


/*=================================================================MAX-WIDTH  500px=================================================*/

@media screen and (max-width: 500px) {

nav ul{
top:48px;	
}

.headerTitle p{
margin-left:0%;
}

.headerTitle h1{
margin-left:4%;
}



.logo{
flex-basis:50%;
}




/*-------list of top product------*/
.carousel .list .item .buttons button{
display:none;
}


/*--------product details----------*/
.single-product h1{
font-size:24px;
text-align: left;
}

.product::after{
width:120px;
left:15%;
}



/*-------contact us------*/
.contact_section{
width:350px;

}

    
/*-------Ads-----*/	

.col-Main h1{
font-size:25px;

}					

}

/*=================================================================MAX-WIDTH  450px=================================================*/
@media screen and (max-width: 450px) {
    

/*------- Header -------*/

.header{
height:80vh;
}
.mainImage{
top:40%;
max-width: 60%;
left:40%;
}
.rowMessage{
padding-bottom:130px;
}

.rowMessage .col-1{
margin-bottom:40px;
}	

/*-------list of top product------*/
.carousel{
height: 120vh;
}

.carousel .list .item .title,
.carousel .list .item .topic{
font-size:45px;
}

.des{
font-size:15px;
}


.thumbnail{
top:65%;
}


    
/*------Product details------------*/


.product::after{
width:150px;
left:40%;
}

.product{
margin-left:15%;
}

.product-details .col-4 h4{
font-size: 15px;
width:80%;
margin: 0 20px;
}

        
/*-------contact us------*/
.contact_section{
width:300px;

}

}