@font-face {
    font-family: 'Lora' serif;
    src: url('./fonts/static/Lora-Bold.ttf') format('truetype');
    font-weight: 1 999;
    /* variable font weight range */
    font-style: normal;
}

@font-face {
    font-family: 'Poppins' sans-serif;
    src: url('./fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 1 999;
    /* variable font weight range */
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue', sans-serif;
    src: url('./fonts/BebasNeue Bold.otf') format('truetype');
    font-weight: 1 999;
    /* variable font weight range */
    font-style: normal;
}


@font-face {
    font-family: 'Dosis';
    src: url('./fonts/Dosis-VariableFont_wght.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'WinkyRough';
    src: url('./fonts/WinkyRough-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Kai';
    src: url('assets/fonts/BebasKai.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Anton';
    src: url('assets/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ComicRelief';
    src: url('assets/fonts/ComicRelief-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
   font-family: 'Poiret One';
  src: url('assets/fonts/PoiretOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Playfair Display';
  src: url("assets/fonts/PlayfairDisplay-Black.ttf") format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* For variable weight support */
  font-style: normal;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('assets/fonts/Comfortaa-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}


* {
    padding: 0;
    margin: 0;
}

:root {
    --bg-color: #cce7d4;
    --Text: #1C1C1C;
    --Accent-Color: rgb(0, 26, 255);
}

body {
    background-color: var(--bg-color);
    overflow-x: hidden !important;
}
body::-webkit-scrollbar {
  width: 12px; 
  /* height: 12px;  */
}

/* Track */
body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background: #a9338a; 
  border-radius: 10px;
  border: 2px solid #f1f1f1; 
}
body::-webkit-scrollbar-thumb:hover {
  background: #8a276e;
}
a{
text-decoration: none;
color: black;
}
a:hover{
    color: #AF2B99;
}


.navbar-a {
    padding: 0px 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    box-shadow: 0 1PX 10PX gray;
    position: relative;
    z-index: 100;
    height: 80px;
}
.myheader{
      padding: 0px 3vw;
      background-color: #ffffff;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.logo {
   
    color: black;
    font-family: 'lora' serif;
    color: white;
    padding: 5px 0 5px 0;
}

.logo img {
     /*height:; */
    width: 2vw;
    min-width: 60px;
}
.navbar-nav .nav-link{
    padding: 0 15px !important;
  font-weight: 600;
  color: #A3238E !important;
 font-family: 'Playfair Display', serif;
}
.navbar-nav .nav-link:hover{
    color: black !important;
}
.dropdown-menu{
width: 200px;
border: none;
overflow: hidden;
background: white;
border-radius: 4px;
margin: 0;
padding: 0;
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.dropdown-menu li{
    border-bottom: 1px solid #A3238E;
}
.dropdown-menu li:last-child {
    border: none !important;
}
.dropdown-menu .dropdown-item{
    padding: 10px 15px;
     font-weight: 600;
  color: #A3238E !important;
 font-family: 'Playfair Display', serif;
 transition: all 0.6s;
}
.dropdown-menu .dropdown-item:hover{
 background:  #A3238E !important;
  color: white !important;
}
.company {
    padding: 8px 15px;
    background-color: #a3238e;
    border-radius: 3px;
    transition: all ease-in-out 0.2s;
}

.company-btn {
    text-decoration: none;
    color: white;
}

.company:hover {
    outline: 1px solid white;
    border-radius: 3px;
    outline-offset: -5px;
}

.hamber {
    width: 60px;
    height: 35px;
    /* background-color: red; */
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-direction: column;

}

.hamber:hover .line {
    width: 100%;
    /* border-radius: 4px; */
}

.hamber:hover .line1 {
    width: 40%;
}

.hamber:hover .line2 {
    width: 70%;
}


.line {
    width: 100%;
    height: 5px;
    background-color: #b835a2;
    box-shadow: 0 0 1px gray;
    transition: all 0.3s;

}

.line2 {
    width: 75%;
}

.line3 {
    width: 50%;
}


.navbar-drop {
    width: 50%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 500;
    background-color: whitesmoke;
    align-items: end;
    padding: 0px 20px;
    box-shadow: 0px 0px 20px gray;
    display: none;
    overflow-y: auto;
}

.navbar-drop::-webkit-scrollbar {
    width: 8px;
    background-color: #f2e6f3;
    /* Slightly lighter base */
    /* box-shadow: none; */
    /* border: none; */
}

.navbar-drop::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, transparent,  #ffffff,#a3238e );
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border: 2px solid #f2e6f3;
    transition: background 0.3s ease;
    box-shadow: none;
    border: none;

}

.navbar-drop::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,#e6e6e6,#7a1a6b);
    /* Darker purple for hover */
}

.navbar-drop::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #ffffff, transparent);
    border-radius: 10px;
}


.show {
    display: unset;
    animation: slidein 1s;
}

.hide {
    display: none;
    animation: slideout 1s;
}

@keyframes slidein {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);

    }
}

@keyframes slideout {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);

    }
}

.cros-btn {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.company-name {
    font-size: 2vw;
    margin-top: 20px;
    border-bottom: 2px solid black;
}

.cros-btn .btn {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
    cursor: pointer;

}

.cros-btn .btn:hover .cline {
    background-color: gray;
    border-radius: 5px;
}

.cline {
    width: 100%;
    height: 5px;
    background-color: black;
    box-shadow: 0 0 2px black;
    position: absolute;
    transform: rotate(45deg);
    bottom: 0;
}

.cline1 {
    transform: rotate(-45deg);

}

.navbar-drop ul {
    width: 100%;
    height: 100%;
    padding: 30px 0px;
}

.navbar-drop ul li {
    list-style: none;
    padding: 7px;
    border-bottom: 2px solid #a3238e;
    position: relative;
    transition: all ease-in 0.3s;

}

.navbar-drop ul li::before {
    position: absolute;
    content: '';
    width: 0%;
    height: 100%;
    background-color: #a3238e;
    left: 0;
    top: 0;
    z-index: -1;
    transition: all ease-in 0.3s;
}

.navbar-drop ul a {
    text-decoration: none;
    font-size: 1.3vw;
    color: #a3238e;
    font-family: 'Anton', sans-serif;
    font-weight: 600;
    transition: all ease 0.4s;
    transform: scale(1.05) !important;

}

.navbar-drop ul li:hover {
    cursor: pointer;
}

.navbar-drop ul li:hover::before {
    width: 100%;
}

.navbar-drop ul li:hover {
    color: whitesmoke;

}


.top-catalogue {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    overflow-x: hidden;
    padding-bottom:30px;
}

.catalogue-bottom {
    margin-bottom: 0;
    display: none;
}

.img-catalogue {
    width: 11vw;
    height: fit-content;
    opacity: 0;
    /* margin: 5px; */

}

.cata-eve {
    transform: translateY(15px);
}

.img-catalogue img {
    width: 100%;
    box-shadow: 0px 4px 10px gray;
}

.top-catalogue .img-catalogue:nth-child(1) {
    animation-delay: 0.4s;
    animation: move 0.2s forwards;

}

.top-catalogue .img-catalogue:nth-child(2) {
    animation: move1 2s forwards;
    animation-delay: 0.4s;

}

.top-catalogue .img-catalogue:nth-child(3) {
    animation: move2 2s forwards;
    animation-delay: 0.6s;

}

.top-catalogue .img-catalogue:nth-child(4) {
    animation: move3 2s forwards;
    animation-delay: 0.6s;

}

.top-catalogue .img-catalogue:nth-child(5) {
    animation: move4 2s forwards;
    animation-delay: 0.8s;

}

.top-catalogue .img-catalogue:nth-child(6) {
    animation: move5 2s forwards;
    animation-delay: 0.6s;

}

.top-catalogue .img-catalogue:nth-child(7) {
    animation: move6 2s forwards;
    animation-delay: 0.4s;

}

.top-catalogue .img-catalogue:nth-child(8) {
    animation: move7 2s forwards;
    animation-delay: 0.2s;

}

@keyframes move {
    0% {
        transform: translate(-100px, 100px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes move1 {
    0% {
        transform: translate(-200px, 150px) rotate(135deg);
        opacity: 0;

    }

    100% {
        transform: translate(0px, 15px) rotate(0);
        opacity: 1;
    }
}

@keyframes move2 {
    0% {
        transform: translate(250px, 150px) rotate(105deg);
        opacity: 0;

    }

    100% {
        transform: translate(0px, 0px) rotate(0);
        opacity: 1;
    }
}

@keyframes move3 {
    0% {
        transform: translate(-200px, -150px) rotate(20deg);
        opacity: 0;

    }

    100% {
        transform: translate(0px, 15px) rotate(0);
        opacity: 1;
    }
}


@keyframes move4 {
    0% {
        transform: translate(-200px, -150px) rotate(-20deg);
        opacity: 0;


    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes move5 {
    0% {
        transform: translate(-250px, -150px) rotate(-105deg);
        opacity: 0;

    }

    100% {
        transform: translate(0px, 15px) rotate(0);
        opacity: 1;

    }
}

@keyframes move6 {
    0% {
        transform: translate(200px, -150px) rotate(-135deg);
        opacity: 0;


    }

    100% {
        transform: translate(0px, 0px) rotate(0);
        opacity: 1;
    }
}

@keyframes move7 {
    0% {
        transform: translate(100px, 100px) rotate(20deg);
        opacity: 0;

    }

    100% {
        transform: translate(0px, 15px) rotate(0);
        opacity: 1;
    }
}



.home {
    position: relative;
    width: 100%;
}



.home-bg {
    position: relative;
    display: flex;
}

.year {

    width: fit-content;
    height: fit-content;
    transform: rotate(180deg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.back-year {
    width: fit-content;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: 5vw;
    font-weight: bolder;
    text-transform: uppercase;
    color: #b3ddc1;
    /* color: red; */
    font-family: 'Anton', sans-serif !important;


}

.upyear {
    font-size: 2vw;
    font-weight: 100;
    font-family: 'Bebas Kai', sans-serif;
    text-align: center;
    position: absolute;
    letter-spacing: 5px;
    z-index: 10;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    text-shadow: 0 0 2px rgb(151, 151, 151);
    right: 35%;
    height: 200px;
    text-wrap: nowrap;
    animation: pop 0.9s ease-in-out infinite;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.main-home {
    height: auto;
    width: 100%;
    /* background-color: red; */
    /* overflow-y:hidden !important; */
}

.shrinkhla {
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 6vw;
    /* background-color: #00008B; */
    /* padding: 10px 0 0px 0; */
    /* background-color: red; */

}

.name-animation {
    height: auto;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: 'Playfair Display', serif;

}

.name-animation::after {
    width: fit-content;

    position: absolute;
    content: "Design 'n' perfection";
    height: fit-content;
    bottom: -10px;
    font-style: italic;
    right: 0;
    font-size: 2em;
}

.name-animation span {
    font-size: 8vw;
    font-weight: 800;
    text-transform: uppercase;
    color: #a3238e;
    opacity: 0;
    animation: fadeIn 5s forwards;
    transition: 0.3s;
    font-family: ;
}

.name-animation span:hover {
    cursor: pointer;
    text-shadow: 0 0 5px rgb(232, 174, 241), 0 0 10px rgb(232, 174, 241), 0 0 15px rgb(232, 174, 241), 0 0 20px rgb(232, 174, 241);
    /* margin-top: 5px; */


}




.name-animation span:nth-child(1) {
    animation-delay: 0s;
}

.name-animation span:nth-child(2) {
    animation-delay: 0.3s;
}

.name-animation span:nth-child(3) {
    animation-delay: 0.6s;
}

.name-animation span:nth-child(4) {
    animation-delay: 0.9s;
}

.name-animation span:nth-child(5) {
    animation-delay: 1.2s;
}

.name-animation span:nth-child(6) {
    animation-delay: 1.5s;
}

.name-animation span:nth-child(7) {
    animation-delay: 1.8s;
}

.name-animation span:nth-child(8) {
    animation-delay: 2.1s;
}

.name-animation span:nth-child(9) {
    animation-delay: 2.4s;
}

@keyframes fadeIn {
    0% {
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

.para {
    text-align: end;
    width: 100%;
    font-size: 3vw;
    background-color: red;


}

.typing-text {
    color: #a3238e;
}

.title {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 2vw;
    letter-spacing: 1vw;
    font-weight: 550;
    font-family: 'Dosis', sans-serif;
    padding: 30px 0;
    margin-top: 20px;
    font-weight: 500;

}

.designing {
    color: red;
    margin-bottom: 15px;
}

.printing {
    color: #2e3192;
}

/* about Us section  */

.about-body {
    width: 100%;
    /*height: 95vh;*/
    position: relative;
    overflow: hidden;
}

.about-bg {
    width: 100%;
    /* height:100VH; */
    position: absolute;
    background-color: #2e3192;
    z-index: -3;
    display: flex;
    flex-direction: column;

}

.about-bg span {
    font-size: 8vw;
    position: absolute;
    font-weight: bolder;
    font-family: 'ComicReliefBold', sans-serif;
    animation: letter 5s infinite;
    opacity: 0;
    /* transition: opacity 1s ease, transform 1s ease; */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.about-bg span:nth-child(1) {
    animation-delay: 2s;
    top: 10vh;
    --final-left: 10%;
}

.about-bg span:nth-child(2) {
    top: 90vh;
    animation-delay: 4s;
    --final-left: 90%;
}

.about-bg span:nth-child(3) {
    top: 50vh;
    animation-delay: 5s;
    --final-left: 15%;
}

.about-bg span:nth-child(4) {
    top: 5vh;
    animation-delay: 1s;
    --final-left: 20%;
}

.about-bg span:nth-child(5) {
    top: 30vh;
    animation-delay: 0s;
    --final-left: 5%;
}

.about-bg span:nth-child(6) {
    top: 60vh;
    animation-delay: 2s;
    --final-left: 8%;
}

.about-bg span:nth-child(7) {
    top: 95vh;
    animation-delay: 1s;
    --final-left: 17%;
}

.about-bg span:nth-child(8) {
    top: 70vh;
    animation-delay: 5s;
    --final-left: 15%;
}

.about-bg span:nth-child(9) {
    top: 20vh;
    animation-delay: 0s;
    --final-left: 25%;
}

/* Animation keyframes */
@keyframes letter {
    0% {
        left: -5%;
        opacity: 0;
        transform: translateY(-20px) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    50% {
        transform: translateY(0) rotate(180deg) scale(1.2);
    }

    90% {
        opacity: 1;
    }

    100% {
        left: var(--final-left, 50%);
        opacity: 0;
        transform: translateY(20px) rotate(360deg);
    }
}




.about-content {
    padding: 0px 15vw;
    height: 100%;
    position: relative;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}

.about-content::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, white, white, white, transparent);
    left: 0;
    top: 0;
    z-index: -1;

}

.about-heading {
    font-size: 2.5vw;
   font-family: 'Poiret One', sans-serif;
    color: #63c3e6;
    /* font-weight: 100 !important; */
}
.about-heading-img{
 margin-top: 15px;
    width: 50%;
}
.about-heading-img img{
width: 100%;
}
.about-para {
    margin-top: 15px;
    font-size: 1.5vw;
    text-align: justify;
    /* color: whitesmoke; */
}
/* service */
.class-body{
    background-color: #f0f0f0 !important;
}
.service {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.service-body {
    width: 100%;
    height: 100vh;
    position: absolute;
    /* z-index: -2; */
}

.service-body .play-line {
    width: 150%;
    height: 2px;
    background-color: transparent;
    background-color: rgba(245, 245, 245, 0.438);
    position: relative;
    overflow: hidden;
}
.service-body .play-line::before {
    position: absolute;
    content: '';
    width: 0%;
    height: 2px;
    background: linear-gradient(to left, red, blue, red, transparent, red, blue);
    background: rgba(115, 197, 229, 0.873);
    /* padding: 20px; */
    top: 0;
    left: 0;
    animation: widthbg 10s infinite;
    z-index: -10;
}


.lines1 {
    transform: rotate(50deg) translateY(300px);
}

.lines2 {
    transform: rotate(45deg) translateY(-0px);
}

.lines3 {
    transform: rotate(100deg) translateY(0px);
}

.lines4 {
    transform: rotate(190deg) translateY(-300px);
}

.lines5 {
    transform: rotate(-45deg) translateY(-50px);
}

.lines6 {
    transform: rotate(-45deg) translateY(-340px);
}

@keyframes widthbg {
    0% {
        width: 0%;
    }

    50% {
        width: 150%;
    }

    100% {
        width: 0%;
    }
}

.secvice-name-bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    padding: 20px 0px;
}

.sercive-item-name {
    width: 100%;
    height: 100vh;
    position: relative;
}

.sercive-item-name span {
    font-size: 2vw;
    position: absolute;
    color: rgb(132, 128, 128);
    transition: all 0.3s;

}

.sercive-item-name span:hover {
    text-shadow: 0 0 4px black;
    cursor: pointer;
}

.sercive-item-name span:nth-child(1) {
    top: 100px;
    left: 1vw;
    animation: word1 2s forwards;
}

.sercive-item-name span:nth-child(2) {
    top: 150px;
    left: 3vw;
    animation: word2 2s forwards;
}

.sercive-item-name span:nth-child(3) {
    top: 300px;
    animation: word3 2s forwards;
}

.sercive-item-name span:nth-child(4) {
    top: 250px;
    left: 4vw;
    animation: word4 2s forwards;
}

.sercive-item-name span:nth-child(5) {
    top: 50px;
    left: 4vw;
    animation: word5 5s forwards;
}

.sercive-item-name span:nth-child(6) {
    top: 70%;
    left: 4vw;
    animation: word6 5s forwards;
}

.sercive-item-name span:nth-child(7) {
    top: 85%;
    left: 5vw;
    animation: word7 5s forwards;
}

.sercive-item-name span:nth-child(16) {
    top: 50%;
    left: 30vw;
    animation: word15 5s forwards;
}



@keyframes word1 {
    0% {
        transform: translate(0);
        opacity: 0;
    }

    100% {
        transform: translate(100px) rotate(-20deg);
        opacity: 1;
    }

}

@keyframes word2 {
    0% {
        transform: translate(0);
        opacity: 0;
    }

    100% {
        transform: translate(140px) rotate(10deg);
        opacity: 1;
    }

}

@keyframes word3 {
    0% {
        transform: translate(0);
        opacity: 0;
    }

    100% {
        transform: translate(200px) rotate(10deg);
        opacity: 1;
    }

}

@keyframes word4 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1.1) rotate(-10deg);
        opacity: 1;
    }

}

@keyframes word5 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {

        transform: scale(1.1) rotate(-10deg);
        opacity: 1;
    }

}

@keyframes word6 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {

        transform: scale(1.1) rotate(-10deg);
        opacity: 1;
    }

}

@keyframes word7 {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    100% {

        transform: translateX(5vw) rotate(10deg);
        opacity: 1;
    }

}

@keyframes word15 {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    100% {

        transform: translateX(5vw) rotate(10deg);
        opacity: 1;
    }

}


/* rigth  */


.sercive-item-name span:nth-child(8) {
    top: 100px;
    right: 1vw;
    animation: word8 2s forwards;
}

.sercive-item-name span:nth-child(9) {
    top: 150px;
    right: 3vw;
    animation: word9 2s forwards;
}

.sercive-item-name span:nth-child(10) {
    top: 300px;
    animation: word10 2s forwards;
}

.sercive-item-name span:nth-child(11) {
    top: 250px;
    right: 4vw;
    animation: word11 2s forwards;
}

.sercive-item-name span:nth-child(12) {
    top: 50px;
    right: 4vw;
    animation: word12 2s forwards;
}

.sercive-item-name span:nth-child(13) {
    top: 70%;
    right: 4vw;
    animation: word13 5s forwards;
}

.sercive-item-name span:nth-child(14) {
    top: 85%;
    right: 5vw;
    animation: word14 5s forwards;
}

.sercive-item-name span:nth-child(15) {
    top: 60%;
    right: 5vw;
    animation: word14 5s forwards;
}




@keyframes word8 {
    0% {
        transform: translate(0);
        opacity: 0;
    }

    100% {
        transform: translate(-100px) rotate(20deg);
        opacity: 1;
    }

}

@keyframes word9 {
    0% {
        transform: translate(0);
        opacity: 0;
    }

    100% {
        transform: translate(-140px) rotate(-10deg);
        opacity: 1;
    }

}

@keyframes word10 {
    0% {
        transform: translate(0);
        opacity: 0;
    }

    100% {
        transform: translate(-200px) rotate(-10deg);
        opacity: 1;
    }

}

@keyframes word11 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1.1) rotate(10deg);
        opacity: 1;
    }

}

@keyframes word12 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {

        transform: scale(1.1) rotate(10deg);
        opacity: 1;
    }

}

@keyframes word13 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {

        transform: scale(1.1) rotate(10deg);
        opacity: 1;
    }

}

@keyframes word14 {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    100% {

        transform: translateX(-5vw) rotate(-10deg);
        opacity: 1;
    }

}

@keyframes word15 {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    100% {

        transform: translateX(-7vw) rotate(-10deg);
        opacity: 1;
    }

}








.service-name-body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #f0f0f0;
    /* padding: 10px; */

}

.service-name {
    z-index: 100;
    font-size: 3vw;
    margin: 0px;
    font-weight: 500;
    font-family: 'Anton', sans-serif;
    letter-spacing: 1px;
    transition: all 0.3s;
    font-stretch: expanded;
    font-stretch: condensed;

}



.roof-heading {
    z-index: 100;
    letter-spacing: 0spx;
    font-size: 2.5vw;
    margin: 5px;
    font-weight: 700;
    /*font-family: 'Poppins' sans-serif !important;*/
    transition: all 0.3s;
    color: transparent;
    -webkit-text-stroke: 2px black;
    text-shadow:
        4px 4px 4px #636262;
    position: relative;
    color: white;
    text-transform: uppercase;
}

.roof-heading h1 {
    /*font-family: 'Poppins Bold', sans-serif;*/
    /*   font-family: 'Anton', sans-serif;*/
    /*font-family: 'BebasNeu' sans-serif !important;*/
    font-family: 'Bebas Neue', sans-serif;
}

.roof-heading::before {
    position: absolute;
    content: '';
    background-color: white;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: -5px;
    border: 2px solid black;
}

.service-name:hover {
    transform: translateY(-4px);
    text-shadow: 0 5px 2px rgb(197, 195, 195);
}

.service-name a {
    text-decoration: none;
}

.service1 a {
    color: #FF0000;
}

.service2 a {
    color: #800080;
}

.service3 a {
    color: #FF8C00;
}

.service4 a {
    color: #008000;
}

.service5 a {
    color: #6A5ACD;
}

.service6 a {
    color: #006400;
}

.service7 a {
    color: #FF0000;
}

.service8 a {
    color: #00008B;
}

.service9 a {
    color: #008000;
}

/* contact us page  */

.contact {
    width: 100%;
    height: 95vw;
    max-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-body {
    width: 80%;
    height: 90%;
    border-radius: 20px;

}

.bg-img {}

.bg-img img {
    position: absolute;
    z-index: -2;
    right: 0%;
    top: 38%;
    animation: bg 20s infinite;

}
.contact-top-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #EE82EE;
}
.contact-cross-btn{
width: 50px;
height: 50px;
position: relative;

margin-right: 10px;
display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    margin-top: 10px;
}
.contact-cross-btn p{
    width: 40px ;
    height: 4px;
    background: black ;
    position:absolute ;
    transition: all 0.3s;
    
}
.contact-cross-btn .cline1{
    transform: rotate(45deg);
}
.contact-cross-btn .cline2{
    transform: rotate(-45deg);
}
.contact-cross-btn:hover p{
    background: white;
}

/* The Modal (background) */
        .modal {
            display: none;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5px auto;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }

        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }

            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes animatezoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }

        .qr-body {
            width: 350px;
            padding: 0px;
            overflow: hidden;


        }

        .qr-body h3 {
            background: violet;
            padding: 10px
        }

        .qr-body img {
            width: 80%;
            /* border: 10px solid violet ; */
            border-radius: 10px;
            margin: 20px auto;
            display: block;
            cursor: pointer;
        }

        .qr-body h4 {
            text-align: center;
            padding: 10px;
            background-color: violet;
            margin: 0;
        }

        .qr-body p {
            text-align: center;
            color: black;
            margin-top: 0;
        }

        .qr-btn {
            border: none;
            outline: none;
            margin-bottom: 8px;
            padding: 8px 20px;
            background-color: violet;
            border-radius: 5px;
            color: white;
            transition: all 0.4s;
        }

        .qr-btn:hover {
            background-color: white;
            color: violet;
            outline: 1px solid violet;
        }

@keyframes bg {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }

}

.form {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    /* background-color: rebeccapurple; */
}

.contact-form {
    background-color: #b3ddc1;
}

.enquery-form {
    padding: 30px;
    width: 100%;
    background-color: white;
    height: 100%;
    outline: 2px solid #a3238e;
    outline-offset: -20px;
    border-radius: 10;
}

.enquery-form h1 {
    text-align: center;
}

.input {
    width: 100%;
    margin-top: 10px;
    font-size: 19px;
    border: none;
    outline: none;
    background-color: #f4e7f2;
    border-radius: 4px;
    padding: 1.5% 4%;
}

.submit-btn {
    width: 70%;
    margin: auto;
    display: block;
    margin-top: 15px;
    font-size: 19px;
    border: none;
    outline: none;
    padding: 10px;
    background-color: #a3238e;
    color: whitesmoke;
    border-radius: 4px;
    transition: all 0.4s;
}

.submit-btn:hover {
    letter-spacing: 2px;
    background-color: #a3238edd;

}

.contact-details {
    height: 100%;
    width: 100%;
    padding: 25px;
    background: linear-gradient(rgba(165, 164, 164, 0.349), rgba(0, 0, 0, 0.776));
    display: flex;
    border-radius: 20px;

    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.contact-content h2 {
    color: white;
    /* border-bottom: 2px solid white; */
    font-size: 3vw;
}

.contact-details p {
    color: aliceblue;
    font-size: 18px;
}

.detail-box {
    width: 100%;
    height: fit-content;
    padding: 30px;
    background-color: white;
    border-radius: 5px;

    box-shadow: 0 0 5px gainsboro;

}

.detail-box ul {
    padding: 0;
    margin: 0;
}

.detail-box ul li {
    list-style: none;
    font-size: 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid black;
    /* padding: 5px 0; */
}

/* PRODUCT SECTION  */

.product-heading {
    width: 75%;
    margin: auto;
    display: block;
    text-align: center;
    font-size: 2.5vw;
  font-size: clamp(16px, 2.5vw, 35px);
    font-family: 'Comfortaa', sans-serif;
  font-weight: bolder;
  color: #B2A7E1;


}
.product-heading img{
    width: 100%;
}
.product-body {
    width: 100%;
    height: auto;
    /* margin-top: 10px; */
    padding: 10px 4vw;
    max-width: 1300px;
    margin: auto;
    /*overflow: hidden;*/

}
.body-section{

 mxa-width:1300px;
 width: 100%;
 /*background: red;*/
 margin: auto;
}

.docket-body {
    min-width: 200px;
    height: auto;
    padding: 10px;
    /* background-color: rebeccapurple; */
    margin-bottom: 20px;
}

.docket-body img {
    width: 80%;
    height: auto;
    margin: auto;
    display: block;
}


.img-body {
    height: auto;
    width: 70%;
    /* height: 180px; */
    /*margin-bottom: 20px;*/
    overflow: hidden;
    margin: auto;
}

.img-body img {
    width: 100%;
    height: auto;
}

.fabric {
    text-align: center;
    font-size: 1.6rem;
    padding: 5px;
    font-weight: 600;
}

.img-fabric {
    width: 100%;
    background-color: red;
}

.img-fabric img {
    width: 100%;
}
.fabric-body{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
      flex-wrap: wrap;
}
.fabric-body .fabric-item{
    width: 18%;
    min-width:200px;
  
    margin: 10px;
}
.fabric-body .fabric-item img{
    width: 100%;
}


.center {
    transform: translateY(50px);
}

.img-side {
    width: 100%;
    margin-top: 50px;
}

.img-side img {
    width: 60%;
    margin: auto;
    display: block;
}

.center-img-cata {
    width: 80%;
    margin: auto;
    margin-top: 0;
}
.center-img-cata4{
 margin-top: -20%;
}
.center-img-cata1{
    width: 100% !important;
    display: flex;
    justify-content: space-between;
}
.center-img-cata1 img{
    width: 30% !important;
}

.center-img-cata img {
    width: 80%;
    display: block;
    margin: auto;
}

.big-img {
    transform: translateY(-70px);
}

.para-cat {
    padding: 0px 20px;
    font-size: 15px;
    text-align: justify;
    margin-top: 20px;
}
.para-cat1{
    /*padding: 0px 20px  0 10vh;*/
}
.para-cat2{
    /*padding: 0 10vh  0 0vh;*/
}

.center-img {
    width: 100%;
    height: auto;
}

.center-img img {
    width: 70%;
}

.our-range {
    height: auto;
    width: 100%;
    /* background-color: white; */
}

.banner-section {
    width: 100%;
    height: auto;
   
}

.banner-section img {
    width: 100%;

    object-fit: cover;
}


.service-box {
    width: 93%;
    padding: 20px;
    max-width: 1300px;
    margin: auto;
    /* background-color: red !important; */
}

.service-item {
    width: 100%;
    margin: 10px;
    height: 100%;
    border-right: 3px solid rgb(77, 189, 233);
    margin: auto;
}

.service-LEFT {
    border: none;
}

.service-item li {
    list-style: none;
    font-size: 23px;
}

.contact-line {
    width: 100%;
    display: block;
    padding: 25px;
    font-size: 18px;
    text-align: center;
}

.contact-line a {
    text-decoration: none;
    color: red;
}

.clients {
    max-width: 100%;
    height: 100vh;
    overflow: hidden;

}

.clients-body {
    padding: 30px 0;
    background-color: rgba(60, 60, 60, 0.465);
    height: 100%;

}

.client-heading {
    font-size: 3.2vw;
    /* font-family: 'Poiret One', cursive; */
    font-weight: 100 !important;
    color: #ffffff;
    text-align: center;
}

.des {
    font-size: 2vw;
    /* font-family: 'Poiret One', cursive; */
    font-weight: 300 !important;
    color: rgb(202, 202, 202);
    margin-top: 5px;

    text-align: center;
}

.mar {
    padding: 40px 0px 0px 0px;
}

.marquee {
    background-color: #5899b1;
    padding: 13px;
    margin-bottom: 10px;
}

.marquee span {

    font-size: 25px;
    margin-left: 50px;
    color: white;

}

/* GIFT Page  */

.gift-body {
    width: 100%;
    /* padding: 20px; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* background-color: #00008B; */
}

.gift-img {
    min-width: 300px;
    width: 380px;
    /* background-color: red; */
}

.gift-img img {
    width: 80%;
    height: auto;
    padding: 10px;
    margin-bottom: 20px;
    margin: auto;
    display: block;
}
.website_link p {
width: 100%;
text-align: center;
display: flex;
align-items: center;
background: red;
}
.website_link p a{
align-items: center;
}

/* certification page  */

.certification-img{
    width: 100%;
    height: auto;
    padding: 50px 0;
}
.certification-img img{
    width: 70%;
    margin: auto;
    display: block;
    height: auto;
}

/* Media Query  */

.top-headind{
    display: none;
}

.back-section{
    position: relative;
    overflow: hidden;
}
.an-line{
    position: absolute;
    background-color: ;
    width: 100%;
    height: 2px;
    bottom:50%;
    z-index: -1;
}
.an-line::before{
    position: absolute;
    width: 0%;
    height: 100%;
    content: '';
    background: skyblue;
    /* transition: al;
     */
     animation: line-an 5s infinite 1s;
    
}
@keyframes line-an {
    0%,100%{
        width: 0%;
    }
    50%{
        width: 100%;
    }
}
.an-line1{
     transform: rotate(-45deg);
     right: 30%;

}
.an-line2{
     transform: rotate(-155deg);
     left: 30%;
}
.an-line3{
     transform: rotate(-135deg);
     top: 20%;
     right: 70%;
}
.an-line4{
     transform: rotate(-205deg);
  
     left: 10%;
}
.an-line5{
     transform: rotate(30deg);
   top: 10%;
     right: 0;
}
.an-line6{
     /* transform: rotate(-0deg); */
     
     left: 0;
}
.an-line7{
     transform: rotate(250deg);
     top: 0;
}

/* wedding cards pages  */

.wedding-section{
    padding: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding-top:30px;
}
.wedding-heading {
    display: flex;
    align-items: end;
    justify-content: end;
    width:100%;
    padding: 10px 20px;
}
.wedding-heading img{
    width: 30%;
}
.main-center{
    width: 100%;
    
}
.main-center img{
    width: 70%;
    display: block;
    margin: auto;
}
.invitation{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
     font-family: 'Poiret One', cursive;
     /*margin: 40px 0px;*/
     margin-top:10px;
     color: white;
     text-transform: capitalize;
     letter-spacing: 1px;
     /* text-shadow: 2px 2px 4px whitesmoke; */
     animation: zoominvitation 2.5s infinite;
}
.wedding-body{
    width: 100%;
    margin: 10px 0px;
    padding-left: 4vw;
}
.wedding-body img{
    width: 170%;
    min-width: 100%;
    z-index: 2;
    position: relative;
}
.wedding-wel{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
        font-family: 'Playfair Display', serif;
        color: white;
        /* text-shadow: 2px 2px 4px whitesmoke; */
          animation: zoominvitation 2.5s infinite;
}
@keyframes zoominvitation {
    0%,100%{
        transform: scale(1.05);
    }
    50%{
        transform: scale(1);
    }
}
.barat-img{
    width: 70%;
    margin-top: 10px;
float: right;
    overflow: hidden;
}
.barat-img img{
    width: 100%;
    /* transform: translateX(100); */
    animation: barat 5s;
}

@keyframes barat {
    0%{
        transform: translateX(100%);
    }
    10%{
transform: translateX(90%) rotate(10deg);
    }
    20%{
transform:translateX(80%) rotate(0deg);
    }
    30%{
transform:translateX(70%) rotate(10deg);
    }
    40%{
transform:translateX(60%) rotate(0deg);
    }
     50%{
transform:translateX(50%) rotate(10deg);
    }
     60%{
transform:translateX(40%) rotate(0deg);
    }
     70%{
transform:translateX(30%) rotate(10deg);
    }
     80%{
transform:translateX(20%) rotate(0deg);
    }

     90%{
transform:translateX(10%) rotate(10deg);
    }
    100%{
         transform: translateX(0%);
    }
}

.wedding-bottom .row p{
    color:white;
    font-size: 20px;
    /* font-weight: 00; */
}
.wedding-bottom-img{
    width: 100%;
    padding: 10px;
}
.wedding-bottom-img img{
    width: 100%;
}


/*Brocher page */

.bro-img{
    width: 100%;
}
.bro-img img{
    width:80%;
    margin: auto;
    display: block;
    padding: 10px;
}
.bro-img-item{
   margin-top:30px;
}
.brochure-heading{
    width: 30%;
    /*transform: translateY(20px);*/
}
.bottom-heading {
    width: 100%;
}
.bottom-heading img{
    width: 70%;
    margin-top:-30px;
}

.fancy-box-body{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:20px;
}
.fancy-left{
    min-width:300px;
    width:25%;
    margin-bottom: 20px;
}
.fancy-right{
    min-width:300px;
    width:25%;
   
      margin-bottom: 20px;
}
.right-img{
    float: right;
}
.fancy-center{
    min-width:300px;
    width:35%;
     margin-bottom: 20px;
}
.fancy-bottom-body{
     display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top:20px;
}
.fany-item{
    min-width:150px;
    width:20%;
    margin-bottom: 20px;
}

.fancy-box-img{
    width: 100%;
    margin-bottom:20px;
}
.fancy-box-img img{
    width: 70%;
    /*margin: auto;*/
    /*display: block;*/
}
.fancy-box-img-center{
width: 100%;
height: 100%;
display:flex;
align-items: center;
justify-content: center;
}
.fancy-box-img-center img{
    width:70%;
}

.market-body{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}
.market-body .market-item{
    width: 30%;
    min-width: 300px;
    background: #CCE7D4;
    margin: 15px 10px;
    padding: 20px 10px;
    font-size: 18px;
    text-align: center;
background-image: linear-gradient(to right, #b835a2, #e15c6c, #d89761, #c4c690, #cce7d4);
border-top-left-radius: 20px ;
transition: all 0.5s;
}
.market-body a{
    color: white;
    text-decoration: none;
}
.market-body .market-item:hover{
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
transform: translateY(5px);
}
.all-product .prod-img{
    width: 400px;
    float: left;
    padding: 15px;
}
.all-product .prod-img img{
   width: 100%;
}
.all-product .product-name{
    font-size: clamp(25px ,4vw ,60px);
    font-weight: 500;
}

.product-des{
   text-align: justify;
  word-break: break-word;
}
.breadcrumb-body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 200px;
    background:#B835A2 ;
width: 100%;
}

.breadcrumb-body .product-heading{
    color: white;
}
.breadcrumb-item{
    color: black;
}
.breadcrumb-item a{
    text-decoration: none;
    color: white;
}