/*!
 Copyright @2020 PageRaja 
 Author : The PageRaja Developing Team
 Team Leader : Priya Chauhan
 Date : 10/10/2020 - 31/10/2020
 Template : Biz Flyer
 */

/* ---------------------------------------------
Table of contents
------------------------------------------------
1. Loader and body part
2. home card section
3. about us section
4. Products section
5. Payments Section
6. Gallery Section
7. Video Section
8. Feedback Section
9. Enquiry Section
10.Footer Section


------------

/* 

---------------------------------------------
Loader and body section
--------------------------------------------- */

#loader {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.99;
  /*background-color: #595959;*/
  z-index: 99;
  text-align: center;
  bottom:0;
  right:0;
  margin:auto;
  overflow:hidden;
}

.loader-icon {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  width: 120px;
  height: 120px;
  background-image:url(https://pageraja.com/user/images/Pageraja-black-png.png);
  background-size:100px 100px;
  background-repeat:no-repeat;
  background-position: center;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
}

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

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


.area{
    background: #34495E;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100vh;
    
   
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}


/*===End For Loader and body part---*/

/* 


---------------------------------------------
Home card section
--------------------------------------------- */

.logo {
  position: relative;
  text-align: center;
}

/*mycol and myrow styling*/

.myrow {
  display: flex;
  position: relative;
  top: -20px;
}

.mycol {
  padding: 10px;
  width: 50%;
}

/*----# START Company Name and person name  Styling-------*/

.Userdetails {
  position: relative;
  top: 30px;
  font-family: 'Oswald', sans-serif;
}

.Cname {
  font-weight: 400;
  font-size: 2em;
  line-height: 1;
  margin: 0 0 30px;
}

.pname {
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1;
  margin: 0 0 30px;
}

/*---------------# START Social Icons Styling--------------*/

.social-icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  float: left;
  left: -2px;
  z-index: 2;
}

.social-icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.social-icon-bar a:hover {
  background-color: #000;
  animation: pulse 1s infinite;
  transition: .3s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}

.facebook {
  background: #2b4680;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.whatsapp {
  background: #4cbb17;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.website {
  background: #333333;
  color: white;
}

.instagram {
  background: linear-gradient(to right, #d62976 0%, #ff6600 100%);
  color: white;
}

.googlemaplink {
  background: #fa7e1e;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}

/*-------------#START Contact Icon Section Styling-----------------*/

.contact-Icon-table {
  width: 100%;
  position: relative;
  left: 0px;
  text-align: center;
}

.contact-icons li {
  list-style: none;
  display: inline-flex;
  padding: 10px;
  justify-content: center;
}

.contact-icons li a {
  text-align: center;
}

/*Change icons circle size and color here*/

.contact-icons .fa {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.contact-icons.icon-circle .fa {
  border-radius: 50%;
}

.contact-icons.icon-rounded .fa {
  border-radius: 5px;
}

.contact-icons.icon-flat .fa {
  border-radius: 0;
}

.contact-icons .fa:hover, .contact-icons .fa:active {
  color: #FFF;
  -webkit-box-shadow: 1px 1px 3px #333;
  -moz-box-shadow: 1px 1px 3px #333;
  box-shadow: 1px 1px 3px #333;
}

.contact-icons.icon-zoom .fa:hover, .contact-icons.icon-zoom .fa:active {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.contact-icons.icon-rotate .fa:hover, .contact-icons.icon-rotate .fa:active {
  -webkit-transform: scale(1.1) rotate(360deg);
  -moz-transform: scale(1.1) rotate(360deg);
  -ms-transform: scale(1.1) rotate(360deg);
  -o-transform: scale(1.1) rotate(360deg);
  transform: scale(1.1) rotate(360deg);
}

.contact-icons .fa-phone {
  background: linear-gradient(45deg, #3b5998, #0078d7);
  box-shadow: 0px 4px 30px rgba(43, 98, 169, 0.5);
}

.contact-icons .fa-whatsapp {
  background-color: #25d366;
}

.contact-icons .fa-envelope {
  background-color: #D44638;
}

.contact-icons .fa-map-marker {
  background: linear-gradient(45deg, #d5135a, #f05924);
  box-shadow: 0px 4px 30px rgba(223, 45, 70, 0.6);
}

/*----------------------------START Share on Whatsapp Styling --------------------- */

.whatsapp-input {
  display: flex;
  position: relative;
  top: 25px;
}

.input-type {
  width: 100px;
  margin-left: 3px;
}

.input-type input {
  width: 200px;
  height: 10px;
  padding: 15px;
  font-size: 13px;
  border-radius: 20px;
  border-color: #aaaaaae3;
  background: linear-gradient(to bottom right, #ffffff 7%, #808080 110%);
}

.whatsapp-input-icon {
  border: 1px solid #51B14D;
  background: linear-gradient(to top, #009933 7%, #33cc33 59%);
  border-bottom: 6px solid green;
}

.whatsapp-input-icon i {
  padding-right: 5px;
}

/*---------------------------#START Add to Contact Shadow button ---------------- */

.addContact {
  display: flex;
}

.addContactInner {
  display: flex;
  z-index:2;
}

.shareW {
  padding: 0px;
}

.shadow-button {
  display: flex;
  margin: -5px;
  position: relative;
  top: 20px;
  width: 100%;
}

.wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbutton {
  width: 240px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 600;
  background: linear-gradient(90deg, #6a2ce6 0%, #d320cf 100%);
  border: none;
  border-radius: 1000px;
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 15px;
  margin: 0px 10px;
  text-decoration: none;
  color: white;
}

.sbutton::before {
  content: '';
  border-radius: 1000px;
  min-width: calc(230px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid #b666d2;
  box-shadow: 0 0 60px #b666d2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.sbutton:hover, .sbutton:focus {
  color: #313133;
  transform: translateY(-6px);
}

.sbutton:hover::before, .sbutton:focus::before {
  opacity: 1;
}

.sbutton::after {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 6px solid #b666d2;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

.sbutton:hover::after, .sbutton:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/*------#Start Liquid Button Styling-------------*/

.btn-liquid {
  display: inline-block;
  position: relative;
  width: 240px;
  height: 60px;
  border-radius: 27px;
  color: #fff;
  font: 700 14px/60px "Droid Sans", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-liquid .inner {
  position: relative;
  z-index: 2;
}

.btn-liquid canvas {
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;
  z-index: 1;
}

/*pop up modal for send whatsapp */

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext");
* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}

/*@media screen and (max-width: 768px) {
  html, body {
    font-size: 12px;
  }
}
*/

.button {
  text-decoration: none;
  font-size: .875rem;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 1.5rem;
  background-color: #fff;
  color: #9191E9;
  padding: 1rem 2rem;
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 400px;
  height: 300px;
  bottom: 100px;
  right: 370px;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hiden;
  transition: .64s ease-in-out;
}

.popup-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 90%;
  height: 80%;
  background-color: #fff;
  transform: rotate(32deg);
  transition: .64s ease-in-out;
}

.popup:target {
  visibility: visible;
  opacity: 1;
}

.popup:target .popup-inner {
  bottom: 0;
  right: 0;
  transform: rotate(0);
}

.popup__close {
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 3rem;
  height: 3rem;
  font-size: .875rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: #0A0A0A;
  z-index: 4;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

.btnwa {
  font-size: 1em;
  padding: 10px;
  color: black;
  border: 2px solid rgb(210 18 244);
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
  margin-top: 10px;
}

.btnwa:hover {
  background: linear-gradient(90deg, #6a2ce6 0%, #d320cf 100%);
  color: white;
  border: 2px solid white;
}

/*-----------------Scrollbar Styling for product--------------------------*/

.scrollbar {
  float: left;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow {
  min-height: 450px;
}

#style-2::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #2F98D1;
}

#style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #2F98D1;
}

#style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #007bb5), color-stop(0.72, rgba(255, 255, 255, 0.8)), color-stop(0.86, #068df4));
}

/* 


---------------------------------------------
About section
--------------------------------------------- */

.aboutrow {
  display: flex;
  padding: 0px 10px;
}

.aboutcol {
  width: 50%;
}

.documents-link {
  display: inline-flex;
  color: #fff;
  border: 2px solid #fff;
  padding: 12px;
  text-decoration: none;
  width: 95%;
  border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 15px;
}

.pdf {
  padding-right: 10px;
}

.pdf i {
  padding-left: 30px;
  flex: 1px;
}

.ginnerscrollbar {
  float: left;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.style-6::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f36196;
  ;
}

.style-6::-webkit-scrollbar {
  width: 12px;
  background-color: #f36196;
  ;
}

.style-6::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #fc6c85), color-stop(0.72, rgba(255, 255, 255, 0.8)), color-stop(0.86, #e75480));
}

/* 


---------------------------------------------
Product service Section
--------------------------------------------- */

.P-heading {
  color: white;
  padding: 0px 20px 0px 20px;
  display: flex;
  justify-content: center;
}

.product-service-section {
  width: 100%;
  position: relative;
  top: 50px;
}

#trapezoid2 {
  border-bottom: 300px solid #fff;
  border-left: 70px solid transparent;
  border-right: 0px solid transparent;
  height: 0;
  width: auto;
  transform: rotate(90deg);
  position: relative;
  left: 0px;
  top: -80px;
  z-index: 2;
}

.productrow {
  display: inline-flex;
}

.card1 {
  text-align: left;
  background-color: #2F98D1;
  padding: 25px;
  margin-left: 20px;
  margin-bottom: -200px;
}

.card1 img {
  width: 300px;
  height: 200px;
  padding: 0px;
  box-shadow: 5px 5px 5px #48484833;
}

.protitle {
  color: #5e5b5b;
  padding-left: 10px;
}

.product-details {
  text-align: left;
  color: black;
  font-family: sans-serif;
  padding-bottom: 10px;
  position: relative;
  top: -220px;
  margin-top: -100px;
  z-index: 2;
}

.product-details p {
  padding: 0px 15px;
  width: 300px;
  height: auto;
  background-color: white;
}

.enquery-link {
  text-decoration: none;
  padding: 10px;
  color: black;
  background-color: #0085C4;
  background: linear-gradient(to bottom, #2f98d1 1%, #ffffff 130%);
  font-size: 15px;
  position: relative;
  border-radius: 15px;
  z-index: 2;
  left: 10px;
}

/* END product service  styling */

.about-us-table td h3 {
  font-size: 13px;
}

.about-us-table td {
  font-size: 13px;
}

/* 


---------------------------------------------
Payment Section
--------------------------------------------- */

.style-5::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #25d366;
}

.style-5::-webkit-scrollbar {
  width: 12px;
  background-color: #25d366;
}

.style-5::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #10c654), color-stop(0.72, rgba(255, 255, 255, 0.8)), color-stop(0.86, #64c688));
}

.Pd-heading {
  color: white;
  padding: 0px 20px 0px 20px;
  display: flex;
  justify-content: center;
}

.payment-details-table {
  font-size: 14px;
  margin-top: 15px;
  border-collapse: separate;
  border-spacing: 0 5px;
}

.payment-section {
  background-color: white;
  color: black;
  width: 100%;
  padding: 10px 20px 10px 20px;
  position: relative;
  top: -70px;
}

.payment-details-table .payment-lbl {
  text-align: left;
  min-width: 150px;
  vertical-align: top;
  position: relative;
}

.payment-details-table .payment-lbl .colon {
  position: absolute;
  right: 0;
}

.payment-details-table .payment-lbl .t {
  display: inline-block;
  margin: 0;
  font-size: 14px;
}

.bankdetails-table .bankdetailslbl {
  text-align: left;
  min-width: 150px;
  vertical-align: top;
  position: relative;
}

.bankdetails-table .bankdetailslbl .colon {
  position: absolute;
  right: 0;
}

.bankdetails-table .bankdetailslbl .t {
  display: inline-block;
  margin: 0;
  font-size: 14px;
}

.bankdetails-table td {
  font-size: 13px;
}

.payment-details-table td {
  font-size: 13px;
}

/* 


---------------------------------------------
Gallery Section
--------------------------------------------- */

.img-heading {
  color: white;
  padding: 0px 20px 0px 20px;
  display: flex;
  justify-content: center;
}

.galleryrow {
  display: inline-flex;
}

.image-section {
  width: 100%;
  padding: 10px;
  background-color: #ff7f50;
}

.images {
  padding: 10px;
  margin: 10px;
  background-color: white;
}

.style-3::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ff7f50;
}

.style-3::-webkit-scrollbar {
  width: 12px;
  background-color: #ff7f50;
}

.style-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #ed6939), color-stop(0.72, rgba(255, 255, 255, 0.8)), color-stop(0.86, #f46835));
}

/*---------------Video section Styling-------------------*/

.v-heading {
  color: white;
  padding: 0px 20px 0px 20px;
  display: flex;
  justify-content: center;
}

.video-section {
  width: 100%;
  padding: 12px;
  background-color: #ff7f50;
}

.video-gallery {
  text-align: left;
  padding: 10px;
  margin: 10px;
  max-width: 100%;
  padding-bottom: 60px;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 251, 251, 0.1) inset;
}

/* 


---------------------------------------------
Feedback Section
--------------------------------------------- */

.f-heading {
  color: white;
  padding: 0px 20px 0px 20px;
  display: flex;
  justify-content: center;
}

.fa {
  font-size: 20px;
}

.checked {
  color: orange;
}

/* Three column layout */

.side {
  float: left;
  width: 15%;
  margin-top: 10px;
}

.middle {
  margin-top: 10px;
  float: left;
  width: 70%;
}

/* Place text to the right */

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The bar container */

.bar-container {
  width: 100%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
}

/* Individual bars */

.bar-5 {
  width: 60%;
  height: 18px;
  background-color: #4CAF50;
}

.bar-4 {
  width: 30%;
  height: 18px;
  background-color: #2196F3;
}

.bar-3 {
  width: 10%;
  height: 18px;
  background-color: #00bcd4;
}

.bar-2 {
  width: 4%;
  height: 18px;
  background-color: #ff9800;
}

.bar-1 {
  width: 15%;
  height: 18px;
  background-color: #f44336;
}

.user-rating {
  background-color: #b666d2;
  padding: 10px;
  position: relative;
  top: 10px;
  width: 100%;
}

.style-4::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #b666d2;
}

.style-4::-webkit-scrollbar {
  width: 12px;
  background-color: #cc68ee;
}

.style-4::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #9c7bde), color-stop(0.72, rgba(255, 255, 255, 0.8)), color-stop(0.86, #d99aef));
}

/*-------------feedback pop up modal section styling------*/

.popup-modal {
  right: 30px;
  position: absolute;
  top: -50px;
  z-index: 15;
}

.btnfb {
  font-size: 1em;
  padding: 10px;
  color: black;
  border: 2px solid orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
  margin-top: 10px;
}

.btnfb:hover {
  background: linear-gradient(180deg, #ff8a00, #e52e71);
  color: white;
  border: 2px solid white;
}

.feedback-form {
  position: relative;
  top: 5px;
  padding: 20px;
}

.email {
  background: #DEDBDF;
  border-radius: 16px;
  height: 32px;
  overflow: hidden;
  position: relative;
  width: 162px;
  -webkit-tap-highlight-color: transparent;
  transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1), height 300ms cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), border-radius 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.email:not(.expand) {
  cursor: pointer;
}

.email:not(.expand):hover {
  background: #C2C0C2;
}

.from {
  position: absolute;
  transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}

.from-contents {
  display: flex;
  flex-direction: row;
  transform-origin: 0 0;
  transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.to {
  opacity: 0;
  position: absolute;
  transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}

.to-contents {
  transform: scale(.55);
  transform-origin: 0 0;
  transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.avatar {
  border-radius: 12px;
  height: 24px;
  left: 6px;
  position: relative;
  top: 4px;
  width: 24px;
}

.name {
  font-size: 14px;
  line-height: 32px;
  margin-left: 30px;
}

.top {
  background-image: linear-gradient(315deg, #ee9617 0%, #fe5858 74%);
  display: flex;
  flex-direction: row;
  height: 70px;
  transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 450px;
}

.avatar-large {
  border-radius: 21px;
  height: 42px;
  margin-left: 12px;
  position: relative;
  top: 14px;
  width: 42px;
}

.name-large {
  color: #efd8ef;
  font-size: 16px;
  line-height: 70px;
  margin-left: 20px;
}

.x-touch {
  align-items: center;
  align-self: center;
  cursor: pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  margin-left: auto;
  width: 50px;
}

.x {
  background-image: linear-gradient(315deg, #ee9617 0%, #fe5858 74%);
  border-radius: 10px;
  height: 20px;
  position: relative;
  right: 20px;
  width: 20px;
}

.x-touch:hover .x {
  background: #CB9AFB;
}

.line1 {
  background: #6422EB;
  height: 12px;
  position: absolute;
  transform: translateX(9px) translateY(4px) rotate(45deg);
  width: 2px;
}

.line2 {
  background: #6422EB;
  height: 12px;
  position: absolute;
  transform: translateX(9px) translateY(4px) rotate(-45deg);
  width: 2px;
}

.bottom {
  background: white;
  color: #444247;
  font-size: 14px;
  height: 280px;
  padding-top: 5px;
  width: 450px;
}

.row {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 60px;
}

.medium {
  height: 30px;
  margin-left: 16px;
  position: relative;
  width: 30px;
}

.email.expand {
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 6px rgba(0, 0, 0, 0.16);
  height: 375px;
  width: 430px;
}

.expand .to {
  opacity: 1;
  transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}

.expand .to-contents {
  transform: scale(1);
}


/*--------Footer - Copyright Section---------------*/

.copyright
{
    bottom: 0;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 99%;
    background-color: rgba(0, 0, 0, 0.1);
    color: black;
    font-size: 14px;
    font-weight: 700;
    padding: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1), 3px 5px 20px rgba(0,0,0,.2);
}

.copyright a
{
    color: black;
    font-size: 14px;
    font-weight: 700;
    text-decoration:none;
    padding-left:3px;
}

/*-------#END Copyright Section-----------*/


/*for firefox browser */

.productscroll
{
  scrollbar-width:thin;
  scrollbar-color: white #068df4;
}
.aboutscroll
{
  scrollbar-width:thin;
  scrollbar-color: white #f36196;
}
.paymentscroll
{
  scrollbar-width:thin;
  scrollbar-color: white  #25d366;
}

.imagescroll
{
  scrollbar-width:thin;
  scrollbar-color: white  #ff7f50;
}
.videoscroll
{
  scrollbar-width:thin;
  scrollbar-color: white  #ff7f50;
}
.feedbackscroll
{
  scrollbar-width:thin;
  scrollbar-color: white #b666d2;
}

/*End for firefox browser*/

/* 


---------------------------------------------
Media Queries
--------------------------------------------- */

@media only screen and (max-width: 700px) {
  .cards {
    height: 650px;
  }
  .shadow-button {
    margin: -5px;
    position: relative;
    top: 20px;
  }
  .wrap {
    display: block;
  }
  .shareW {
    padding: 10px;
    justify-content: center;
    display: flex;
  }
  .addContact {
    justify-content: center;
  }
  .popup {
    right: 80px;
  }
  .Pd-heading {
    position: relative;
    top: 30px;
  }
}

@media only screen and (max-width: 600px) {
  .aboutrow {
    display: inline-block;
    justify-content: center;
  }
  .aboutcol {
    width: 100%;
  }
  .mycol {
  width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .Userdetails {
    position: relative;
    top: 120px;
    left: 50px;
    font-family: 'Oswald', sans-serif;
    width: 100%;
  }
  .addContact {
    flex-wrap: wrap;
    justify-content: center;
  }
  .addContactInner {
    padding: 10px;
  }
  .Cname {
    font-weight: 400;
    font-size: 25px;
    /* font-size: 2em; */
    line-height: 1;
    margin: 0 0 30px;
  }
  .pname {
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    margin: 0 0 30px;
  }
  .logo {
    position: fixed;
    top: -110px;
    left: -100px;
    text-align: center;
    width: 100%;
  }
  .contact-Icon-table {
    width: 100%;
    position: relative;
    left: -25px;
    text-align: center;
    top: 80px;
  }
  .contact-Icon-table ul {
    width: 100%;
  }
  .contact-icons li {
    padding: 10px;
  }
  .contact-Icon-table li a {
    width: 100%;
    display: inline-flex;
    text-decoration: none;
  }
  .shadow-button {
    position: relative;
    top: 80px;
    width: 100%;
  }
  .cards {
    width: 768px;
    height: auto;
    min-height: 550px;
  }
  .cards .card {
    display: inline-block;
    margin-right: 10px;
    width: 100%;
  }
  .card1 {
    padding: 0px;
  }
  .image-section {
    padding: 0px;
  }
  .email.expand {
    height: 370px;
    width: 310px;
  }
  .popup-modal {
    right: 15px;
    top: -30px;
  }
  .x {
    position:absolute;
    right:200px;
  }
  .user-rating {
    padding: 10px;
    position: relative;
    top: 20px;
    width: 100%;
  }
  .cards {
    height: 800px;
  }
  .P-heading {
    position: relative;
    top: 0px;
  }
  .popup {
    right: 10px;
    width: 90%;
  }
  .scrollbar {
    height: 450px;
  }
  .f-heading {
    display: flex;
    justify-content: left;
  }
  .email.expand {
    height: 350px;
    width: 280px;
  }
}

@media only screen and (max-width:525px) {
  .card1 {
    margin-bottom: -150px;
  }
}

@media only screen and (max-width:300px) {
  .email.expand {
    height: 350px;
    width: 240px;
  }
}


@media only screen and (max-width:800px) {
  .productrow {
    display: inline-block;
  }
  .product-service-section {
    display: flex;
    justify-content: center;
  }
  .P-heading {
    display: flex;
    justify-content: center;
  }
  .image-section {
    display: flex;
    justify-content: center;
  }
  .galleryrow {
    display: inline-block;
  }
  .prow2 {
    position: relative;
    top: -80px;
  }
  .gscrollbar {
    height: 300px;
    overflow-y: scroll;
    margin-bottom: 25px;
  }
  .ginnerscrollbar {
    overflow-y: hidden;
    height: auto;
    float:none;
  }
  .style-3::-webkit-gscrollbar-track {
    border-radius: 10px;
    background-color: #ff7f50;
  }
  
  .style-3::-webkit-gscrollbar {
    width: 12px;
    background-color: #ff7f50;
  }
  
  .style-3::-webkit-gscrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #ed6939), color-stop(0.72, rgba(255, 255, 255, 0.8)), color-stop(0.86, #f46835));
  }

}
@media only screen and (max-width:490px) {
  .gscrollbar {
    height: 500px;
  }
}