body {
  transition: background-color 0.5s ease; 
}


.canvas-size {
   width: 500px;
  height: 500px;
  overflow:hidden;
}

.canvas-grid {display: grid;grid-template-columns: 1fr 1fr;}

@keyframes strike{
  0%   { width : 0; }
  100% { width: 100%; }
}
.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

.flower {display:block;}


.titleline {text-align:center;text-decoration-line: underline;
  text-decoration-thickness: 8px;font-weight:700; text-decoration-color:#DB1387;padding-top:3%;}
.make-section {display:grid; grid-template-columns: 1fr 1fr 1fr;column-gap: 3%;}

.function-section {display:grid; grid-template-columns: 1fr 1fr;}

.function-section-grid {padding:1%;padding-bottom:4%;padding-left:0; 	border-top:1px solid #333;
}

.margin_top_rwd {margin-top:50px;}
 
.service-box {border:1px solid #333;text-align:Center; border-radius: 25px;
 	box-shadow: 3px 3px 3px #ccc;
	padding-top:5%; padding-bottom:5%;
}

#bar-container {height:400px;border:1px solid #333;
position:relative;margin-bottom:2%;}

#left-bar {
  display: inline-block;
  width: 35%;
  height: 100%;color:#333;font-size:100px;
  position:absolute; top:0; left:0;
text-align:center;font-weight:700;line-height:100px;
padding-top:2%;
}

#right-bar {
  display: inline-block;
  width: 65%;
  height: 100%;
  overflow-y: scroll;
  position:absolute;  top:0; left:35%;
}

.marfont {font-size:80px;}
.function-text {font-size:30px;font-weight:700;padding-top:1%;}
.function-text2 {font-size:18px;}
.marquee {
  display:inline-block;  overflow: hidden !important;
  animation: scrolling-left1 50s linear infinite;
}

@keyframes scrolling-left1 {
  0% {
    transform: translate(20%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

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



@media(max-width: 767px)
{
.canvas-size { width : 300px;
  height : 300px;}

.canvas-grid {grid-template-columns: 1fr;}

.rwdarrow-down {visibility: hidden}

.background-service {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-size: cover;
  background-position: 0 0; 
  transition: background-position 0.3s ease; }

.bg-service
{
    background: linear-gradient(90deg, #ff0077 0%, #8244b0 100%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}

ul {padding-left:16px;  list-style-type: circle;}
ul li {padding-left:-6px;}

.text-vertical {writing-mode: vertical-rl;
text-orientation: upright;}
.object1 {
  animation: MoveLeftRight 5s linear infinite;
  position: absolute;
  right: 300px;
  bottom: 110px;
}

.object2 {
  animation: MoveUpDown 6s linear infinite;
  position: absolute;
  right: 500px;
  bottom: 80px;
}

.object3 {
  animation: MoveUpDown 7s linear infinite;
  position: absolute;
  right: 20px;
  bottom: 0;
}
@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 400px;
  }
}

@keyframes MoveLeftRight {
  0%, 100% {
    left: 0;
  }
  50% {
    left: 800px;
  }
}

.marfont {font-size:60px;}

.make-section {display:grid; grid-template-columns: 100%;column-gap: 3%;row-gap: 3%;}
.a1{width: 100%;min-height: 100px;background-color:#fff;}
.a2_1{background-color:#fff;}
.a2_2{width: 100%;padding: 0px 0px 0px 0px;}
.a2_3{top: 20px;}
.a4{width: 100%;padding: 60px 0px 0px 0px;}
.a5{width: 100%;padding: 60px 0px 0px 0px;}
.a6{width:auto;padding: 0px 0px 30px 0px;}
.a6_1{font-size:16px;}
.a7{width: calc(100% - 32px);flex-wrap: wrap;padding: 0px 16px 0px 16px;}
.a7_1{width: 100% !important;}
.a7_2{width: 100% !important;margin: 0px 0px 16px 0px;}
.a7_3{width: calc(100% - 64px) !important;margin: 0px 0px 16px 0px;}

.boxrwd {margin-right:8px;}
.function-section {display:grid; grid-template-columns:100%;border-bottom:0px;}
.text-vertical {  writing-mode: horizontal-tb;}
.service-box {padding:15%;}

#tagline2 {display:block; font-size:36px;font-weight:700;text-align:center;text-decoration-line: underline;text-decoration-thickness: 10px;text-decoration-color:#DB1387;margin-bottom:3%;}

#bar-container {height:500px; box-shadow: 3px 3px 3px #ccc;}

#left-bar {display:none;}

#right-bar {width:100%;left:0;background-color:#fff;}

.rwdarrow-down {visibility: visible;  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;position:absolute;bottom:15px;right:15px; }

  
.flower {display:none;}
}