@charset "utf-8";

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    
}
body{
    background:url(../images/background.png);
    background-attachment: fixed;
}
#page{
    width:1200px;
    height:2000px;
    margin:0 auto;    
}

/*  START SIGN_IN PAGE CODING */

#sign_up_page{
width:1200px;
height:1000px;
margin:0 auto;
background:white;

}

/*  START SIGN_IN PAGE CODING */
/* star header coding */
header{
    width:1200px;
    height:133px;
    float: left;
    background:url(../images/bg.jpg);
    background-size: cover;
    position: fixed;
    top:0;
    z-index: 1;

}
#form{
    width:100%;
    height: 40px;
    float: left;
    padding-top:4px;
    padding-right:5px;
}

#form-box{
    width:250px;
    height:25px;
    background:#E8E7E7;
    border:none;
    outline: none;
    border-bottom-left-radius:5px;
    border-top-left-radius:5px;
    padding-left: 8px;
}
#search-btn{
    width:80px;
    height:26px;
    border: none;
    background:#108E8F;
    color:#ddd;

}
#brand-name{
    float: left;
    clear: left;
    margin-top:-25px;
}
#tag-lines{
    float: right;
    color:#209FA1;
    margin-top:25px;
    margin-right:10px;
    margin-bottom:8px;
    font-family: sans-serif;
    font-size:14px;
}
marquee{
    font-family: sans-serif;
    font-size:13px;
    float: left;
    color:darkcyan;
}

/* end header coding */
/* start nav coding */
nav{
    width:1200px;
    height:30px;
    float: left;
    background:#E0DDDF;
    background-image: url(../images/background.png);
    background-size: cover;
    position: fixed;
    top:133px;
    z-index: 1;

}
#navbar{
    list-style: none;
}
#nav-item{
    display:inline-block;
    width:168px;
    height:30px;
    line-height:30px;
    text-align: center;
    border-right:1px dotted #fff; 

}
#nav-item a {
    color:dimgrey;
    font-family: sans-serif;
    font-weight:bold;
    text-decoration: none;
    font-size: 12px;
}
#nav-item:hover  #color{
    color:blue;
    
}

#nav-item:hover #shopping_page{
    display: block;
}

#nav-list-img{
   position: relative;
    top:2px;
}
/*end nav coding */

section{
    width:1200px;
    height:auto;
    float: left; 
    padding:5px;
    padding-top:10px;
    padding-left:14px;
    border-top: none;
    position: relative;
    top:163px;
    background-color: white;
    background-image: url(../images/bg_aa.png);
}

#slider-page{
    width:800px;
    height:200px;
    float: left;
    border:1px solid darkcyan;
    border-radius:4px;
    margin-top: 3px;  
    overflow: hidden;
    box-shadow: 0px 0px 5px #ddd;
    margin-right:6px;
}
#slider{
    width:4000px;
    height: 200px;
    float:left;
    position:relative;
    -webkit-animation:slide 15s infinite;
    -moz-animation:slide 15s infinite;
    -o-animation:slide 15s infinite;
    animation:slide 15s infinite;
    animation-delay:1s;
}
@keyframes slide{
    0%{top:0;left:0;}
    10%{top:0;left:-800px;}
    20%{top:0;left:-800px;}
    30%{top:0;left:-1600px;}
    40%{top:0;left:-1600px;}
    50%{top:0;left:-2400px;}
    60%{top:0;left:-2400px;}
    70%{top:0;left:-3200px;}
    80%{top:0;left:-3200px;}
}
#slider-img{
    float: left;
    width:800px;
    height:200px;
}

#advt-one,#advt-two{
    width:180px;
    height:200px;
    float: left;
    border:1px solid darkcyan;
    border-radius:4px;
    margin-top:3px;
    margin-bottom:5px;
    background-color:#E6F3FB;
}

#advt-one{
    margin-right:5px;
    background: url(../images/Animations/advertise!.gif);
    background-position: center;
    background-repeat: no-repeat;
}

#advt-two{
  background: url(../images/Animations/advertise!!.gif);
    background-position: center;
    background-repeat: no-repeat;   
    
}
#show-pic1{
position: relative;
left:-130px;
}
#advt-pic1{
position: relative;
top:-150px;
left: -130px;
animation:girl_gf_top 15s infinite;
animation-delay: 1s;
animation-timing-function:ease-in;

}

@keyframes girl_gf_top{
10%{top:0;left:-130px;}
35%{top:0;left:-130px;}
50%{top:180px;left:-130px;}
60%{top:180px;left:-130px;}
75%{top:0px;left:-130px;}
85%{top:0px;left:-130px;}
95%{top:-180px;left:-130px;}    
100%{top:-180px;left:-130px;}
}
#advt-pic2{
position: relative;
right: -100px;
animation:girl_gf_saree 10s infinite;
animation-delay: 1s;
}

@keyframes gir_gf_saree{
10%{top:0;right:-145px;}
35%{top:0;right:-145px;}
50%{top:180px;right:-145px;}
60%{top:180px;right:-145px;}
75%{top:0px;right:-145px;}
85%{top:0px;right:-145px;}
95%{top:-180px;right:-145px;}    
100%{top:-180px;right:-145px;}
}


#product-cont-one,#product-cont-two{
    width:1180px;
    float: left;
}
#product-cont-one{
    height:250px;
}

#product-cont-two{

}

#section-header{
    color:blue;
    width:100%;
    font-family:Dosis;
    font-size:24px;
    text-shadow:0px 0px 2px red;
}

hr{
    margin-bottom:2px;
    height:5px;
    background:#323232;
}

/* start product coding */
#prod-one{
    width:190px;
    height:200px;
    float: left;
    font-family: calibri;
    margin-right:6px;
}
#prod-one:hover{
   box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    background:white;
    transition:0.5s;

}


.prod_one_box{
    font-family:calibri;


}

/* START HOME PAGE FIRST MOBILE PIC ARRANGEMENT  */

#mobile-pic-first-row{
float: left;
margin-left:60px;
margin-top:4px;

}
#mobile-pic-first-row:hover{
filter: brightness(90%);
}


#prod-one-text{
    float: left;
    clear: left;
    margin-left:59px;
    font-size:18px;
    font-weight: bold;
}
#prod-pr{
    float: left;
     margin-left:8px;
     margin-bottom:10px;
}
#price-color{
    color:darkcyan;
    font-weight: bold;
}

#buy-btn,#buy-btn-lp{
    border:none;
    color:white;
    float: left;
    padding:5px;
    width:100%;
    outline:none;
}
#buy-btn{
    background-color: darkcyan;
}

#buy-btn:hover{
    background-color:red;
    transition:0.5s;
    cursor: pointer;
}

/*  START LAPTOP BOX CONTAINER CODING */
#prod-one-lp{
    width:190px;
    height:180px;
    float: left;
    margin-right:6px;
    margin-top:0px;
    margin-bottom:2px;
    font-family: calibri; 
    padding-top:4px;
}
.prod_one_box_lp{
    height:200px;
}
#prod-one-lp:hover{
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    background:white;
}
#lp-pic-first-row{
float: left;
margin-left:16px;
}

#buy-btn-lp{
    background-color:darkcyan;
}
#buy-btn-lp:hover{
    background-color: black;
    cursor:pointer;
}

/*  END LAPTOP BOX CONTAINER CODING */

/* end product coding */

    
/* START SHOPPINF PAGE CODING */
.shopping{
position: relative;
}
.shooping:hover > #shooping_page{
    display: block;
}
#shopping_page{
width:720px;
height:200px;
border:1px solid #ccc;
box-shadow: 0px 0px 5px #ddd;
position: absolute;
z-index: 1;
top:27px;
left:-250px;
background: url(../images/bg.jpg);
background-size:100% 100%;
display: none;

}

@keyframes page_show{
0%{opacity:0;}
100%{opacity:1;}

}
#shopping_page a {
font-size:18px;
font-family:Exotc350 Bd Bt;

}

#drop-navbar{
    margin: 0;
    padding: 0;
    list-style: none;
}
#drop-item{
text-align: left;
padding-left:70px;
}
#drop-item a{
   color:blue; 
}
#drop-item:hover{
background-color:white;
color:darkcyan;
}

#drop-item:hover a{
color: darkcyan;
}
/*START SPECIAL MENU CODING */#special_page{
width:1170px;
height:600px;
border:1px solid red;
background:url(../images/contact-bg.png);
background-attachment: fixed;
background-position:center;
background-size: cover;
}
#special-products-flower{
width:1170px;
height: 600px;
background:rgba(0,0,0,0.6);
float: left;
padding-top:10px;
}
#special-header{
font-family:gadget;
color:white;
    
    
}

#spec-prod-one,#spec-prod-two{
width:250px;
height:250px;
border:1px solid white;
border-radius:4px;
float: left;   
margin:20px;
}

#special-products-watches{
width:1170px;
height:600px;
background:url(../images/contact-bg.png);
float: left;  
}
#spec-firs-row-pic{
 margin-left:24px;   
    
}

#spec-prod-name,#spec-prod-price{
color:white;
font-family:calibri;
font-size:18px;

}

#spec-prod-name{
font-weight:bold;
font-size:24px;
margin-bottom:4px;
margin-left:19px;
}
#spec-prod-price
{
margin-left:19px;
margin-bottom:5px; 
}
#spec-buy-btn{
border:none;
background:red;
width:246px;
padding:10px;
color:white;
}



/*END SPECIAL MENU CODING */

/* START CONTACT CODING */
#contacts-page{
width:1170px;
height:600px;
float: left;
background-image:url(../images/contact-bg.png);
background-repeat: no-repeat;
}
#contact-text-page{
width:1170px;
height:600px;
background-color: rgba(0,0,0,0.6);

}

#contact-header{
color:white;
font-family:gadget;
text-align: center;
font-size:30px;

}
#contact-address{
width:600px;
height:100px;
margin:0 auto;
}
#contact-address h3{
font-family:sans-serif; 
font-style: normal;
color:white;
font-size:12px;
margin:10px;
margin-left:50px;
}

#company-about{
width:1100px;
height: auto;
margin:0 auto;
padding-top:10px;
}
#about-text{
text-align: center;
font-family:poller one;
color:white;
font-size:30px;  
}

#about-para{
font-family: calibri;
color:#fff;
text-align: justify;
line-height:18px;
padding:3px;
}
/*END CONTACT CODING */

/* START SIGN IN PAGE */
#sign_in_page{
width:1170px;
height:600px;
border:2px solid #323232;
float: left;  
background:url(../images/sign_in_-bg.png);
}

#sign_in_cont{
width:1166px;
height:596px;
background:rgba(0,0,0,0.5);  
padding-top:40px;
}
#sign-in-field{
width:720px;
height:300px;
border-radius:10px;
margin:0 auto;
padding-left:30px;
border:2px solid #fff ;
padding-top:20px;
}
#sign-in-legend{
margin-left:1px;
color:#fff;
font-family:gadget;
border:2px solid #fff;
border-bottom:none;
border-radius:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
padding:5px;
}
#username-sign-in,#pass-text,#re-pass-text{
font-family:sans-serif;
color:#fff;
float: left; 
margin-top:6px;
font-weight: bold;
}
#pass-text{
clear:left;
}
#username-sign-in,#pass-text{
margin-right:31px;
}
#re-pass-text{
margin-right:5px;
margin-top:36px;
clear: left;
}

#user-input-sign-in,#pass-field,#re-pass-field{
width:400px;
border:2px solid #fff;
background: inherit;
color:#fff;
padding:3px;
border-radius:5px;
font-family:calibri;
font-size:17px;
padding-left:10px;
outline:none;
}

#user-input-sign-in::placeholder,#pass-field::placeholder,#re-pass-field::placeholder{
color:#EED6D4;
 font-size:14px;   
    
}

#pass-text{
 margin-top:21px;       
}
#pass-field{
margin-top:15px;
}
#re-pass-field{
margin-top:16px;    
}
#sign_in_btn{
 width:530px;   
outline: none;
padding:10px;
border:none;
float: left;
background:#4F47C2;
color:#fff;si
}
#sign_up_btn:hover{
background:#675EDA;
cursor:pointer;
}

#forget-text{
color:#E2C7CE;
float: left;
clear: left;
margin-top:20px;
font-family:calibri; 
}

/* END SIGN IN CODING */
/* START SIGN UP PAGE */
#sign_UP_page
{
    width:1170px;
    height:600px;
    border:1px solid red;
    background:url("../images/contact-bg.png");
    
}

#sign-page-data{
width:940px;
height:400px;
margin:0 auto;
padding-top:30px;
background: rgba(0,0,0,0.6);
}
#sign-up-field{
height:300px;    
    
}

#sign-up-legend{
font-family:gadget;
border:2px solid #fff;
padding:5px;
border-bottom:none;
margin-left:10px;
border-radius:4px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
  color: white;  
}

/* End SIGN UP PAGE */


/* START  BACKPAGE CODING  */
#bakend_page{
width:1170px; 
height:auto;
border:6px ridge darkcyan;
padding-top:10px;   
}

#back-details-header{
font-family:gadget;
color:red;
text-align:center;
margin-bottom:10px;
}


#pro-details-pages{
width: 1000px;
height:600px;
border:1px solid red;
padding-top:20px; 
    margin:0 auto;
padding-left:30px;
}

#small-pic-product{
    width:200px;
    height:200px;
    border:1px solid #ccc;
    float: left;
    margin-right:30px; 
    box-shadow:0px 8px 16px 0px #ddd;
}
#prod-details-box{
width:600px;
height:480px;
border:4px solid #ddd;
float: left;
margin-bottom:4px;
box-shadow: 0px 8px 16px 0px #ddd;
}


#buy-btn-box-main{
width:700px;
    height:50px;
    float:left;
    padding-top:3px;
  margin-left:180px;
}

#buy-main-btn{
width:600px;
padding:13px;
background:red;
border:none;
font-family:sans-serif;
color:white;
border-radius:5px;
}

#buy-main-btn:hover{
background:black;
transition: 0.5px;
outline:none;
}

/* END BACKPAGE CODING  */
/*  START FOOTER CODING */

footer{
    width:1200px;
    height:220px;
    float: left;
    position: relative;
    top: 163px;
    background:white;
    background-size: cover;
    border-top:4px solid darkcyan;
}
#service-cont,#information-cont,#personslize-cont,#connect-cont,#location-cont{
    width:240px;
    height: 150px;
    float: left; 
    font-family:calibri;
    padding-left:30px;
    padding-left:10px;
    font-size:12px;
    background:url(../images/bg.jpg);
    background-size:cover;
    background-position:left;
}

#service-cont p,#information-cont p,#personslize-cont p,#connect-cont p,#location-cont p{
line-height:18px;     
}
h5{
    font-family:Humnst777 Blk BT;
    font-size:12px;
    color:darkcyan;
}
#developer_text{
    width:1200px;
    height:70px;
    float: left;
    padding-top:30px; 
    background-image: url(../images/footer-bottom-bg.png);
    background-size:cover;
    border-bottom:10px groove darkcyan;
}
#developer_text p{
    font-family:sans-serif;
    font-size:12px;
    font-weight:bold;
    text-align: center;
    color:red;
}

/*  END FOOTER CODING */


/* START  PAGE ANIMATION CODING */
#animation_page{
width: 100%;
height:100%;
background-image: url(../images/bg.jpg);
position: absolute;
top:0;
left: 0;
z-index: 1;
animation: page_hide 4s;
animation-delay:4.2s;
animation-fill-mode: forwards;
}
@keyframes page_hide{
0%{opacity: 0;z-index: -1;}
100%{opacity:0; z-index:-1;}
}
#animated_text{
 color:darkcyan;
 font-family:Exotc350 Bd Bt;
 text-align: center;
font-size:100px;
 -webkit-animation: color_head 1s infinite;
-moz-animation: color_head 1s infinite;
-o-animation: color_head 1s infinite;
animation: color_head 1s infinite;

}

@keyframes color_head{
0%{color:darkcyan;}
25%{color:red;}
50%{color:blue;}
75%{color:deeppink;}
100%{color:darkblue;}

}
#bottom_line{
margin-top:100px;
height:100px;
background:darkcyan;
-webkit-animation: loading 4s;
-moz-animation: loading 4s;
-o-animation: loading 4s;
animation: loading 4s;
}
@keyframes loading {
0%{width: 0%;}
100%{width:100%;}
}
#load{
    color:white;
    padding-top:25px;
    font-family:scream real;
    text-align: center;
    -webkit-animation: color_head 1s infinite;
    -moz-animation: color_head 1s infinite;
    -o-animation: color_head 1s infinite;
     animation: color_head 1s infinite;
     animation-delay:2s;
}

 /* END PAGE  ANIMATION CODING */

/* START SCROLLBAR CODING */
body::-webkit-scrollbar{
width:13px;
}

body::-webkit-scrollbar-track{
background-image: url(../images/bg.jpg);    
background-size:100% 100%;
}

body::-webkit-scrollbar-thumb{
  background-color:darkcyan; 
    border:3px groove cyan;
    border-radius:5px;
    border-top:none;
    border-top-right-radius: 0px;
}

body::-webkit-scrollbar-thumb:hover{
    background-color: darkcyan;
    border:3px groove cyan;
    border-top: none;
    border-bottom: none;
    transition:0.5s;
    border-radius:0px;
}

body::-webkit-scrollbar-button{
    height:30px;
  background-color:darkcyan; 
    border:3px groove cyan;
    border-radius:5px;
    border-top:none;
    border-bottom: none;
    border-radius:0px;
}


/* END SCROLLBAR CODING */

/*START COLOR SWICHER BOX CODING */
#color-box{
width:0px;
height:auto;
border:1px solid #ccc;
float:left;

}
#open{
width:24px;
height:auto;
float:left;
margin-top:1px;
    
}
#header_title{
color:blue;
font-family:poller one;
font-size:20px;
cursor:default;
}
#clr-header-text{
color:white; 
margin:0;
padding:0;
margin-bottom:50px;
font-family:calibri;
text-transform:capitalize;
text-align:center;
background-color:#443B3D;
}    
.color-button{
width:30px;
height:20px;
border:none;
outline: none;
}  
button:hover{
cursor:pointer;
}
#red{
background:red; 
display:none;
}
#green{
background:green;
display:none;
}
#yellow{
background:yellow;
display:none;
}
#blue{
background:blue;
display:none;
}
#orange{
background:orange;
display:none;
}
#deeppink{
background:deeppink; 
display:none;
}
#cyan{
background:cyan;
display:none;
}
#black{
background:black;
display:none;
}
#pink{
background: pink;
display:none;
}
#darkred{
background:darkred;
display:none;
} 
#close_field{
float: left;
}
#close_color{
font-family:cursive;
float: left;
margin:0;
padding:0;
margin-left:6px;
margin-top:4px;
animation:
}
.icn:hover{
color:red;
}


/* END COLOR SWICHER BOX CODING */

/* START RESPONSIVE CODING */

/* START MOBILE RESPONSIVE CODING */

@media only screen and (max-width:768px){
    page{
        width:100%;
        margin:0;
        padding:0;
    }
    header{
        width:1000px;
        height:120px;
        
    }
    #brand-name{
        position: relative;
        top:-24px;
    }
    marquee{
        position: relative;
        top:-9px;
    }
    nav{
        width:1100px;
        margin-top:-12px;
    }
    #nav-item{
        width:136px;
    }
    
    section{
        width:1100px;
        padding:0;
        margin:0;
        padding-left:5px;
    }
    
    #advt-one,#advt-two{
        width:120px;
        height:150px;
        background-size:100% 100%;
    }
    #slider-page{
        width:738px;
        height:150px;
        margin-right:5px;
    }
    #slider-img{
        width:738px;
        height:150px;
    }
    
}
/* END MOBILE RESPONSIVE CODING */
/* END RESPONSIVE CODING */