body{background: rgb(90, 33, 10);}
.textColor{color: rgb(90, 33, 10); text-decoration: none;}
.bgColor{background: rgb(90, 33, 10);}
.bgColor2{background: rgb(50, 31, 23);}
.topNav{ padding: 6px; color: white;}
.socialIcon{margin-left: 6px;}
.hideUp{display: none;}
.f22{font-size: 22px; margin-top: 6px;}
.f35{font-size: 35px;}
h2{color: rgb(255, 201, 180); font-size: 35px;font-family: 'Cormorant', serif;}
h3{color: rgb(255, 201, 180); font-size: 20px;font-family: 'Cormorant', serif;}
h4{color: rgb(255, 201, 180); font-size: 18px;font-family: 'Cormorant', serif;}
b{color: rgb(255, 164, 128);}
p{color: rgb(255, 201, 180);}
.a{color: rgb(21, 8, 4); text-decoration: none; background: yellow;}
header{padding: 6px; background: rgb(255, 208, 186);}
.logo img{width: 200px;}

.navigation{line-height: 50px;}
.ulCus{display: flex; justify-content: center;}
.ulCus a{text-decoration: none; color: white;}
.ulCus .li{margin: 3px; padding: 3px 10px; border: 0px solid white;}
.myDrop{position: relative;}
.liDrop{display: none; transition: 0.4s; line-height: 30px; padding: 10px 0px; position: absolute; background: rgba(122, 42, 10, 0.879); width: 300px; border-radius: 10px;left: 0px;}
.liDrop .li:hover{background: rgb(90, 33, 10); border-radius: 5px; transition: 0.3s;}
.myDrop:hover .liDrop{display: block; z-index: 1999;}
.mobileNaveShow{display: none;}
.imageBanner{height: 500px; background-position: center; background-size: cover;}
.motiImage{background-position: center; background-size: cover; border-radius: 10px; border: 0px solid black; width: 200px; height: 300px;}
.msgType{width: 80%; padding: 5px; border-radius: 6px; border: none;}
.whatsappBtm{background: green; color: white; border: none; border-radius: 6px; margin-top: 10px; font-size: 22px;}
.servP{font-size: 12px;}
.forInput{width: 95%;margin: 6px auto; padding: 7px;}
.forBtnThis{border: none; border-radius: 5px; padding: 5px; width: 150px; color: white;}
.imageService{width: 100px; height: 100px; background-position: center; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; }
.boxShadowServ{background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(50, 31, 23, 0.474)); padding: 5px; }
.hover{
 --c: rgb(163, 72, 36); /* the color */
 box-shadow: 0px 10px 10px black;
 
 color: #0000;
 background: 
     linear-gradient(90deg,#fff 50%,var(--c) 0) calc(100% - var(--_p,0%))/200% 100%,
     linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat;
 -webkit-background-clip: text,padding-box;
         background-clip: text,padding-box;
 transition: 0.5s;
 }
 .hover:hover {
 --_p: 100%
 }
 .imageSpine{
    width: 100%;
    animation-name: spin;
    animation-duration: 15000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */ 
    /* transform: rotate(.03turn);  */
    }

    @keyframes spin {
        from {
            transform:rotate(0deg);
        }
        to {
            transform:rotate(360deg);
        }
    }
    .zodiacBox{position: relative;width: 100%; height: 200px;}
    .zodiacBg{position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);}
    .zodiacBg2{opacity: 0; transition: 0.3s; position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);}
    .zodiacIcon{position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%;}
    .zodiacBox:hover .zodiacBg2{opacity: 1;}
    .reviewsBox{width: 350px;}
    .reviewsBox .imageBox{width: 200px; height: 200px; margin: 10px auto; position: relative;}
    .reviewsBox .imageBox .authImage{position: absolute; left: 0%; top: 0%;animation-name: spinReview;animation-duration: 15000ms;animation-iteration-count: infinite;animation-timing-function: linear;}
    .imageRev{width: 100px; height: 100px; background-position: center; background-size: cover; border-radius: 50%; border: 3px solid white; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
        @keyframes spinReview {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
        }
        .textBox{color: white; text-align: center; padding: 10px;}
        .textBox h3{ margin-top: 25px;}
        .awardBox{padding: 15px; border: 1px solid grey;}
        .awardBox2{padding: 15px;}
        .awardBox img{width: 100%; box-shadow: 0px 5px 10px black;}
        .awardBox2 img{width: 100%; box-shadow: 0px 5px 10px black;}
        a{text-decoration: none;}

@media(max-width:900px){
    .hideUp{display: block;}
    #nevBarMov{display: none;}
    .ulCus{ background: rgb(29, 11, 4);position: fixed; left: 0; top: 0; height: 100%; z-index: 9999; display: block; width: 100%; overflow: scroll;}
    .ulCus .li{border:0px solid grey; width: 95%; padding: 0px 10px; background: rgb(36, 13, 4);}
    .mobileNaveShow{display: block;}
    .liDrop{position: inherit;}

    .movCenter{text-align: center;}
    .hideDown{display: none;}
    .mobileNaveShow{display: block;}
    .logo img{width: 150px; margin-top: 10px;}
    .cusFornt{font-size: 12px;}
    .f22{font-size: 13px;}
    .imageSpine{width: 80%; text-align: center;}
    
}