/* @import url(https://fonts.googleapis.com/css?family=Roboto); */
/* @import url(https://fonts.googleapis.com/css?family=Handlee); */
body{background-color:rgba(255, 244, 225,0.3);}
.navbar-fixed{
    max-width: 130em;
    margin: auto;
}

.heading{
    display: flex;
    justify-content: center;
}
.m-container{
    text-align: center;
    max-width: 80em;
    margin: 100vh auto 3em auto;
    align-self: center;
    visibility: hidden;
}
.heading{

    height: fit-content;

}
.slider , .slides{
    height: 100vh;
}
.slider .caption{
    margin-top: 25vh;
}
.indicator-item{
    transform: scale(0.8);
    color: black;
}

.m-container p{
    font-size: medium;
}
.slider img {
  filter: brightness(45%);
}

.caption h5{
    margin: 2em auto;
}

.show-design{
    padding: 20px;
    width: 100%;
}

.m-container p{
    overflow: hidden;
}

@keyframes upar_se {
   from{opacity: 0;transform: translateY(100vh) scale(0);}
    to{opacity: 1;transform: translateY(0vh) scale(1);}
}

.dabba h3{
    padding-top: 10px;
}
*{
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}
.popys{
    border-bottom: white 2px solid;
    border-top: white 2px solid;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.7px;
}
.popmar{
    padding-right: 2.5em;
}
.ham{
    border: solid 2px white;
    width:20px;
    margin-bottom: 3px;
    background-color :white;
}
.sidenav-trigger{
    margin-top: 5em;
}
.parallax-container h3, .client-container h3{
    color: white;
    letter-spacing: 1.8px;
    text-align: center;
    margin-top: 1em;
}
h3,h4,.show-design h2{
    top: 0px;
    text-align: center;
    height: 1.5em;
    text-overflow: ellipsis;
    position: absoulute;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}
h4{height: 1.4em;}
.underline{border-bottom: white 2px solid;}
.underline-b{border-bottom: black 2px solid;}
.underline-s{border-bottom: white 2px solid;}
.underline-s-b{border-bottom: black 2px solid;}
.underline-dif{
    display: inline-block;
    text-align: center;
    width: max-content;
}
.underline-dif h3{height: 1.15em; letter-spacing: 0px;}
.underliner{height: 3px;width: 60%;background-color: white;position: absoulute;margin-left: auto;margin-right: auto;}
.my-gallery{
    text-align: center;
    padding-top: 1.2em;
    overflow: visible;
    height: 380px;
    padding-bottom: 1em;
    max-width: 90em;
    margin: auto;
}
@media only screen and (max-width: 800px) {
    .my-gallery{height: 570px;}
  }
@media only screen and (max-width: 450px) {
    .my-gallery{height:1080px;}
  }  
.my-gallery-s{
    text-align: center;
    padding-top: 1.2em;
    height: 115px;
    margin-bottom: 0.5em;
}
.gallery-pics{
    float: left;
    text-align: center;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.gallery-pics img{
    height: 160px;
    width: 320px;
    display: inline-block;
    vertical-align: middle;
    color: white;
    overflow: visible;
}
.show-design{background-color:rgba(255, 244, 225,0.3);height: 100%;}
.gallery-inner{display: none;cursor:pointer;}
.mygallery-logo{
    width: 50px;
    height:50px;
    transform: scale(1.5);
    margin: 20px;
    border-radius:100%
}
@media only screen and (max-width: 390px) {
    .mygallery-logo{transform: scale(0.9);margin: 1px;}
  }
#para-align{align-self: center; width: 100%;padding-left: auto;padding-right: auto;}  
.card-zipper{
    height: 280px;
    width: fit-content;
    overflow-x: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 77%;
    align-self: center;
    align-items: center;
    visibility: hidden;
}
@media screen and (max-width: 600px) {
    .card-zipper{
        margin-left: 12%;
        margin-right: 12%;
    }
}
.my-gallery-s{height:auto}
.card-area{
    width: max-content;
    position: relative;
}
.info-ico{
    width: 1em;
    height: 1em;
    border-radius: 100%;
}
.close-ico{margin-top: 15px;margin-right: 6px;}
.cross{
    border: black 1px solid;
    background-color: black;
    position: relative;
    height: 2px;
    width: 15px;
}
.cross:nth-child(1){transform: rotateZ(45deg);top: 1px;}
.cross:nth-child(2){transform: rotateZ(-45deg);bottom: 1px;}
.n-caps{
    background-image: linear-gradient(to bottom right, #1a4edb , #2089c9);
    border: none;
    color: black;
    padding: 6px 12px;
    text-align: center;
    color: #dbdbdb;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
  }
.card-content{
    background-color: white;
}
.pre-card{
    width: auto;
    height: 40em;
    margin: 50px;
}
.card-reveal>*{
    margin-left: 0.8em;
    
}
.card-reveal::-webkit-scrollbar ,.card-zipper::-webkit-scrollbar{
    display: none;
}
.card:nth-child(1){margin-left: 0px;padding-left: 0px;}
.card:nth-last-child(1){margin-right: 0px;padding-right: 0px;}
.prevcious{
    background-image: url("iconfinder_reply_2676939.png");
    background-image: linear-gradient(to bottom right, #00d400 , #d2ffa8);
    height: 0.5em;
    width: 0.5em;
    border-radius: 100%;
    transform: scale(10);
    border: solid 0px transparent;
    text-align: center;
}
.previous:hover,.next:hover{
    transform: scale(1.25);
}
.previous,.next {
    display: block;
    height: 2em;
    width: 2em;
    border-radius: 100rem;
    text-align: center;
    margin: 10px;
    box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
    border: solid 3px transparent;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #78e4ff, #ff48fa);
    background-origin: border-box;
    box-shadow: 2px 1000px 1px #fff inset;
}
.angled{
    height: 2px;
    width: 4em;
    left: 0px;
    background-color: black;
  }
.nxt-prev{
    width: auto;
    height: auto;
    text-align: center;
} 
.previous{float: left;margin-left: 20%;} 
.next{float: right;margin-right: 20%;}
.gallery-note{
    display: block;
    background-color:rgba(255, 244, 225,0.3);
}

@keyframes ubhar {
   from{opacity: 0;transform:scale(0); }
    to{opacity: 1;transform: scale(1);}
}
.card,.service,.product{
    transition: 0.5s;
}
.card-area .card:hover,.service:hover,.product:hover{
    transform: translateY(-0.6em);
}