*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
.top{
    background: #f1f1f1;
}
.btn{
    padding: 9px 14px;
    background: #fff;
    border: 1px solid #A51500;
    border-radius: 5px;
    color: #A51500;
    transition: 0.5s;
}
/* banner content */
.heading {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90vh;
    z-index: 1;
    background: #4a101033;
}

.sub-heading {
    width: 70%;
    margin: auto;
    font-size: 24px;
    color: #ffff;
    background: transparent;
    text-align: center;
}
.sub-heading h1{
    color: #ffff;
    font-size: 42px;
    font-weight: 300;
    transition-delay: 2s;
}
.sub-heading p{
    color: #ffff;
    font-weight: 300;
    transition-delay: 2s;
}

/* banner cont end */
.btn:hover{
    background: #A51500;
    color: #fff;
}
.img-fit{
    width: 100%;
}
.top div div div{
    padding: 10px 0px;
}
.top div div div a{
    text-decoration: none;
    color: #333;
    padding: 0px 15px;
    font-size: 14px;
}
.top div div div a i{
    color: #A51500;
    font-size: 20px;
}
.zero{
    padding: 0 !important;
}
.imgfit{
    width: 100%;
}
#bar{
    padding: 10px;
    background: #A51500;
    cursor: pointer;
}
#bar img{
    width: 50px;
}
.logo{
    width: 175px;
    padding: 10px;
    background: #f1f1f1;
}
#header{
    z-index: 999;
    background: #fff !important;
}
.hstatick{
    position: static;
    top: -150px;
    transition: 0.5s;
}
.hsticky{
    position: sticky;
    top: 0px;
    transition: 0.5s;
    animation: anim 950ms ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@keyframes anim{
    0%{
        transform: scale(0.95) rotateX(100deg) translateY(-95px);
    }
    100%{
        transform: scale(1);
    }
    
}
/* fixed bar */
#fixBox{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #a516002f;
    transition: all 500ms ease-in-out;
    z-index: 1;
}
.dblock{
    z-index: 1;
    display: block;
    right: 0%;
}
.dnone{
    z-index: 1;
    display: none;
    right: -100%;
}
#fixBar{
    z-index: 9;
    background: #f1f1f1;
    padding: 50px;
    width: 30%;
    height: 100%;
    position: fixed;
    top: 0px;
}
.dleft{
    right: 0%;
    transition: 0.6s;
}
.dright{
    right: -100%;
    transition: 0.6s;
}

#fixBar p{
    color: #555;
}
#fixBar p a{
    text-decoration: none;
    color: #333;
    font-size: 16px;
}
#fixBar p a i{
    color: #A51500;
    font-size: 20px;
}
#fixBar h3{
    font-weight: 500;
    padding: 15px 0px;
    position: relative;
}
#fixBar h3::after{
    position: absolute;
    content: " ";
    background: #A51500;
    left: 0px;
    bottom: -5px;
    height: 2px;
    width: 100px;
}
#cros{
    position: absolute;
    left: -12%;
    top: 15%;
    z-index: 9;
    padding: 10px;
    background: #A51500;
}
#cros img{
    width: 30px;
}

#section-1 div div div h2{
    font-size: 34px;
    color: #A51500;
}
#section-1 div div div p{
    color: #555;
}



/* gallery */


.cont{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: rgba(255, 255 255, 0.31);
    /* box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px !important; */
    backdrop-filter: blur(1.9px);
    /* border: 1px solid rgba(0, 0, 0, 0.16); */
    width: 90%;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    white-space: nowrap;
}

.cont .year img{
    width: 100%;
}
.cont #slider{
    position: absolute;
    top: 0;
    left: -20%;
    background: #abe9cd;
    background-image: linear-gradient(315deg, #abe9cd 0%, #3eadcf 74%);
    opacity: 0.7;
    height: 50%;
    font-size: 1.2rem;
    width: 20%;
    min-width: 4.25rem;
    transition: 0.9s;
    z-index: 9;

}
.year{
    width: 20%;
    min-width: 4.25em;
    font-size: 1.2;
    display: inline-block;
    padding: 0.75em 1em;
    cursor: pointer;
    position: relative;
    z-index: 5;
    transition: 0.9s;
}
.year img{
    cursor: pointer;
}


.year:nth-child(1) ~ #slider{
    transform: translateX(0%);
}
.year:nth-child(2) ~ #slider{
    transform: translateX(100%);
}
.year:nth-child(3) ~ #slider{
    transform: translateX(200%);
}
.year:nth-child(4) ~ #slider{
    transform: translateX(300%);
}
.year:nth-child(5) ~ #slider{
    transform: translateX(400%);
}
.year:nth-child(6) ~ #slider{
    transform: translateX(0%);
    transform: translateY(100%)
}
.year:nth-child(7) ~ #slider{
    transform: translateX(100%);
    transform: translateY(100%)
}
.year:nth-child(8) ~ #slider{
    transform: translateX(200%);
    transform: translateY(100%)
}
.year:nth-child(9) ~ #slider{
    transform: translateX(300%);
    transform: translateY(100%)
}
.year:nth-child(10) ~ #slider{
    transform: translateX(400%);
    transform: translateY(100%)
}






.year:nth-child(1):hover ~ #slider{
    transform: translateX(100%);
    background-color: #eec0c6;
background-image: linear-gradient(315deg, #eec0c6 0%, #e58c8a 74%);

}
.year:nth-child(2):hover ~ #slider{
    transform: translateX(200%);
    background-color: #eec0c6;
background-image: linear-gradient(315deg, #0cbaba 0%, #eec0c6 74%);

}
.year:nth-child(3):hover ~ #slider{
    transform: translateX(300%);
    background-color: #eec0c6;
background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);

}
.year:nth-child(4):hover ~ #slider{
    transform: translateX(400%);
    background-color: #e899dc;
background-image: linear-gradient(315deg, #e899dc 0%, #d387ab 74%);
}
.year:nth-child(5):hover ~ #slider{
    transform: translateX(500%);
    background-color: #90d5ec;
background-image: linear-gradient(315deg, #eec0c6 0%, #fc575e 74%);

}
.year:nth-child(6):hover ~ #slider{
    transform: translateX(100%) translateY(100%);
    background-color: #90d5ec;
    background-image: linear-gradient(315deg, #eec0c6 0%, #fc575e 74%);
}
.year:nth-child(7):hover ~ #slider{
    transform: translateX(200%) translateY(100%);
}
.year:nth-child(8):hover ~ #slider{
    transform: translateX(300%) translateY(100%);
}
.year:nth-child(9):hover ~ #slider{
    transform: translateX(400%) translateY(100%);
}
.year:nth-child(10):hover ~ #slider{
    transform: translateX(500%) translateY(100%);
}

/* Book Effects */
#bkSort{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.897) 50%, #4a1010d8 50%),url('../images/b2.jpg');
    background-attachment: fixed;

}
#bkSort .container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.book input{
    display: none;
}
#cover img{
    width: 100%;
    height: 100%;
}
.flip div img{
    width: 100%;
    height: 100%;
}
.book{
    display: flex;
}
#cover{
    width: 99%;
    height: auto;
}
.flip-book{
    width: 99%;
    height: auto;
    position: relative;
    perspective: 1500px;
}
.next-btn i{
    font-size: 24px;
    box-shadow: 0 0 10 #777;
}
.back-btn i{
    font-size: 24px;
    box-shadow: 0 0 10 #777;
}
.flip{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: 0.5s;
    color: #000;
}
p{
    font-size: 14px;
    line-height: 24px;
}
.front{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: scroll;
    background-color: #fff;
    box-sizing: border-box;
    padding: 25px 13px;
    box-shadow: 0 0 20px rgba(119, 119, 119, 0.39);
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5) 0 2px 5px rgba(0, 0, 0, 0.5);
}

.front-num{
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 64px;
    color: #4d1f1e56;
}

.back{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-color: #000;
    box-shadow: 0 0 20px rgba(153, 153, 153, 0.336);
}
.next-btn{
    position: absolute;
    bottom: 45%;
    right: -1px;
    cursor: pointer;
    color: #000;
}

.back-btn{
    position: absolute;
    bottom: 45%;
    left: -1px;
    cursor: pointer;
    color: #fff;
}
#p1{
    z-index: 3;
}
#p2{
    z-index: 2;
}
#p3{
    z-index: 1;
}
#c1:checked ~ .flip-book #p1{
    transform: rotateY(-180deg);
    z-index: 1;
}
#c2:checked ~ .flip-book #p2{
    transform: rotateY(-180deg);
    z-index: 2;
}
#c3:checked ~ .flip-book #p3{
    transform: rotateY(-180deg);
    z-index: 3;
}







/* testimonial */
.section-3{
    background-image: url('../images/testomonial.jpg');
    background-position: center;
    background-size: contain;
    background-attachment: fixed;
}
.testimonial{
    background-color: #fff;
}
.review{
    background-color: rgba(255, 255, 255, 0.829);
    padding: 15px 55px;
}


/* Footer */
footer{
    background: #f1f1f1;
}
.footer-link{
    text-decoration: none;
    color: #333;
}
.footer-link:hover{
    color: #A51500;
}


.bottom{
    background: #9f9f9f;
    padding: 5px 0px;
    color: #111;
}
.bottom a{
    text-decoration: none;
    color: #111;
}
.bottom a i{
    color: #A51500;
    font-size: 4px;
}

.bottom a:hover{
    color: #A51500;
}

/* Tab botton */
.tab-btn{
    border: none;
    outline: none;
    background: #fff;
    padding: 10px 15px;
    margin: 0px 25px;
    color: #444;
    border-radius: 3px;
    transition: all 300ms ease-in;
}
.tab-btn:hover{
    background: #A51500;
    color: #fff;
}
.card{
    margin: 12px 0;
}
.card img{
    position: relative;
}
.card-cont{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #a51600c5;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transition: 0.5s;
    transform: scale(0.2);
}
.card:hover .card-cont{
    opacity: 1;
    transform: scale(1);
}

.card-cont p{
    color: #ffff;
}
.activate{
    color: #fff;
    background: #A51500;
}
/* card button hover effects */
.crdBtn{
    position: relative;
    display: inline-block;
    padding: 10px 14px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;
    overflow: hidden;
    transition: 0.5s;
}
.crdBtn:hover{
    color: #fff;
    letter-spacing: 2px;
    background: #A51500;
    transition-delay: 1s;
}
.crdBtn span{
    position: absolute;
    display: block;
}
.crdBtn span:nth-child(1){
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff);
}
.crdBtn:hover span:nth-child(1){
    left: 100%;
    transition: 1s;
}
.crdBtn span:nth-child(3){
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #fff);
}
.crdBtn:hover span:nth-child(3){
    right: 100%;
    transition: 1s;
    transition-delay: 00.5s;
}
.crdBtn span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #fff);
}
.crdBtn:hover span:nth-child(2){
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
}
.crdBtn span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #fff);
}
.crdBtn:hover span:nth-child(4){
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
}
/* fixed icons */

.fixed-mail{
    position: fixed;
    z-index: 1000;
    font-size: 36px;
    left: 3%;
    top: 90%;
    color: #A51500;
}
.fixed-mail:hover{
    color: #A51500;
}

.fixed-call{
    position: fixed;
    z-index: 1000;
    font-size: 36px;
    left: 3%;
    top: 80%;
    color: #A51500;
}
.fixed-call:hover{
    color: #A51500;
}

.fixed-whatsp{
    position: fixed;
    z-index: 1000;
    font-size: 36px;
    right: 3%;
    top: 90%;
    color: #A51500;
}
.fixed-whatsp:hover{
    color: #A51500;
}
#fixedtop{
    position: fixed;
    z-index: 1000;
    font-size: 28px;
    padding: 5px 15px;
    right: 2%;
    top: 0%;
    opacity: 0;
    transition: 1s;
    color: #fff;
    background: #A51500;
}

/* client section */
.clint{
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
}
#container{
    width: 1050px;
    overflow: hidden;
    margin: auto;
   
}
.slidebox{
    position: relative;
    width: 2960px;
    animation-name: anni;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function:ease;
    animation-play-state: running;
}
.slidebox:hover{
    animation-play-state: paused;
}
.slidebox div{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    width: 200px;
    height: 200px;
    float: left;
    border-radius: 5px;
}

@keyframes anni{
    0%{
        right: 10px;
        top: 0;
        
    }
    8%{
        right: 10px;
        top: 0; 
    }
    10%{
        right: 210px;
        top: 0; 
    }
    18%{
        right: 210px;
        top: 0; 
    }
    20%{
        right: 420px;
        top: 0; 
    }
    28%{
        right: 420px;
        top: 0; 
    }
    30%{
        right: 630px;
        top: 0; 
    }
    38%{
        right: 630px;
        top: 0; 
    }
    40%{
        right: 840px;
        top: 0; 
    }
    48%{
        right: 840px;
        top: 0; 
    }
    50%{
        right: 1050px;
        top: 0; 
    }
    58%{
        right: 1050px;
        top: 0; 
    }
    58%{
        right: 1050px;
        top: 0; 
    }
    60%{
        right: 1260px;
        top: 0; 
    }
    68%{
        right: 1260px;
        top: 0; 
    }
    70%{
        right: 1470px;
        top: 0; 
    }
    78%{
        right: 1470px;
        top: 0; 
    }
    80%{
        right: 1680px;
        top: 0; 
    }
    88%{
        right: 1680px;
        top: 0; 
    }
    90%{
        right: 1890px;
        top: 0; 
    }
    100%{
        right: 1890px;
        top: 0; 
    }
    
   }

   /* catagory pages code*/

   /* catagory heading */
   .catg-heading{
       background: linear-gradient(#a5160091,#a516008e),url('../images/b3.jpg');
   }
   .catg-heading div div p a, .catg-heading div div p span{
       text-decoration: none;
       color: #fff;
   }
   .catg-heading div div h2{
       font-size: 45px;
       color: #fff;
   }
   /* about us */
   .abtshake{
       animation-name: pendulam;
       animation-duration: 5s;
       animation-iteration-count: infinite;
       animation-delay: 1s;
       box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
   }
   @keyframes pendulam { 
    0%,100% { 
       transform: rotate(1deg); 
    } 
    50% { 
        transform: rotate(-1deg); 
    } 
} 

/* contact us */
/* form */
/* contact form */
.cont-form{
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-form form textarea{
    width: 98%;
}
.cont-form form label{
    font-size: 18px;
    color: #A51500;
    font-weight: 400;
    text-align: left;
    display: inline-block;
    margin: 10px 0 5px 0;
    padding: 0;
}
.cont-form form input{
    width: 98%;
    padding: 10px;
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    outline: none;
}
.cont-form form textarea{
    width: 98%;
    padding: 10px;
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    outline: none;
}
.cont-form form{
    width: 100%;
    margin: auto;
    padding: 30px 50px;
    /* box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.2); */
}
.cont-form form .btn{
    width: 150px;
    display: block;
    border: 1px solid #000;
    padding: 10px 0;
    margin: 30px auto 0;
    text-align: center;
    background: none;
    outline: none;
    position: relative;
    color: #A51500;
    overflow: hidden;
    z-index: 1;
}
.cont-form form .btn::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 100%;
    background-color: #A51500;
    transition: all 500ms ease-in-out;
    z-index: -1;
}
.cont-form form .btn:hover::before{
    top: 0;
}
.cont-form form .btn:hover{
    color: #fff;
}
.cont-box{
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(119, 119, 119, 0.507);
}

/* Modal  */
.modal-header {
    width: 100%;
    height: 50px;
    background-color: #A51500;
    color: #fff;
}
.modal .modal-body {
    width: 100%;
    padding: 40px 20px;
    text-align: center;
}
.modal form {
    color: #A51500;
}
.modal .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.modal form input {
    width: 100%;
    padding: 5px 7px;
    margin-bottom: 15px;
    outline: none;
    font-size:14px;
}
.modal textarea {
    width: 100%;
    padding: 5px 7px;
    margin-bottom: 15px;
    outline: none;
    font-size:14px; 
    height: auto;
    border: 1px solid #4F4F4F;
}
.modal .form-btn {
    color: #000;
    /* font-weight: 800; */
    font-size: 14px;
    background-color: transparent;
    padding: 17px 35px;
    border-radius: 20px;
    cursor: pointer;
    transition: .3s;
    margin-top: 10px;
    border: 1px solid #cfcfd0;
    line-height: 0%;
    width: auto;
    height: auto;
    transition: .3s;
    font-family: 'Roboto', sans-serif;
}
.modal .form-btn:hover {
    background-color: #A51500;
    color: #fff;
}
.modal .btn-close {
    color: #fff;
    background-color: #ffff;
    z-index: 99999999999;
    font-size: 10px;
}
.modal h5{
    font-size: 20px !important;
    font-weight: 600;
}











   @media screen and (max-width: 1189px){
    #container{
        width: 840px;
    }
   }

@media screen and (max-width: 991px){
    #bar {
        display: none;
    }
    #container{
        width: 630px;
    }
    .sub-heading{
        width: 90%;
    }
    .sub-heading h1{
        font-size: 26px;
    }

}
@media screen and (max-width: 744px){
    #container{
        width: 420px;
    }
    .heading{
        height: 75vh;
    }
}
@media screen and (max-width: 540px){
    .cont{
        width: 100%;
    }
    .year{
        padding: 0px;
    }
    .heading{
        display: none;
    }
}
@media screen and (max-width: 431px){
    #container{
        width: 210px;
    }
    .heading{
        display: none;
    }
    #bkSort .container {
    height: auto;
    }
}
@media screen and (max-width: 373px){
    #slider{
        display: none;
    }
    .year{
        margin: 10px 5px;
    }
    .top{
        display: none;
    }
}