BLACKSITE


	: 216.73.217.141
	: 119.18.54.19 / yugtechnologies.com
	: Linux sh200.bigrock.com 4.19.286-203.ELK.el7.x86_64 #1 SMP Wed Jun 14 04:33:55 CDT 2023 x86_64
: /home1/yugte9pz/public_html/
files >> /home1/yugte9pz/public_html/mystyle.scss
 @import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;400&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;1,6..12,400&family=Poppins:wght@200;400&family=Roboto+Slab:wght@200;400&family=Ubuntu:wght@300;400&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;400&family=Lora:wght@400;500&family=Merriweather:wght@300;400&family=Noto+Serif:wght@100;200;400&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;1,6..12,400&family=Poppins:wght@200;400&family=Roboto+Slab:wght@200;400&family=Ubuntu:wght@300;400&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&family=Raleway:wght@100;400;500;600;700&family=Roboto+Condensed:wght@100;200;300;400;500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");

//
// font-family: "Merriweather", serif;
// font-family: 'Jost', sans-serif;
// font-family: 'Lora', serif;
// font-family: 'Noto Serif', serif;
// font-family: 'Nunito Sans', sans-serif;
// font-family: 'Poppins', sans-serif;
// font-family: 'Roboto Slab', serif;
// font-family: 'Ubuntu', sans-serif;
// font-family: 'Raleway', sans-serif;
// font-family: 'Roboto Condensed', sans-serif;
// font-family: 'Open Sans', sans-serif;
$font-open-sans: "Open Sans", sans-serif;
$font-roboto: "Roboto Condensed", sans-serif;
$font-raleway: "Raleway", sans-serif;
$font-ubuntu: "Ubuntu", sans-serif;
$font-quicksand: "Quicksand", sans-serif;
$title-fonts: "Raleway", sans-serif;
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Raleway", sans-serif;
}

p {
   font-family: "Poppins", sans-serif;
}

header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
   font-size: 18px;
}

header#pq-header {
   .pq-bottom-header {
      .navbar {
         .navbar-nav {
            // float: left !important;
            padding-block-start: 14px;
            padding-inline-end: 3vw;
            @media only screen and (min-width: 1024px) and (max-width: 1330px) {
               padding-block-start: 0px;
            }

            li {
               margin-inline: 22px;
               font-weight: bold;
               @media only screen and (min-width: 1330px) and (max-width: 1407px) {
                  a {
                     font-size: 15px;
                  }
               }

               @media only screen and (min-width: 1024px) and (max-width: 1330px) {
                  margin-inline: 15px;
               }
               @media (max-width: 497px) {
                  margin-inline: 0px;
               }
            }
         }
      }
   }
}

header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
   @media (max-width: 497px) {
      width: 100%;
      display: inline-block;
      padding-inline: 4px;
      padding-block: 2vh;
   }
}
header {
   #pq-header {
      .pq-bottom-header {
         .navbar {
            .navbar-nav {
               li {
                  .current-menu-item {
                     a {
                        color: white !important;
                        background: #18a0ef !important;
                        border-radius: 25px !important;
                        padding-block: 1.8vh !important;
                        padding-inline: 1.5vw !important;
                     }
                  }
               }
            }
         }
      }
   }
}

.menu-item {
   a {
      &:hover {
         color: #18a0ef !important;
      }
   }
}
#head-btn {
   background: #18a0ef;
   color: white;
   border: 1px solid transparent;
   padding-inline: 30px;
   padding-block: 7px;
   border-radius: 25px;
   font-weight: bold;
   transition: all 0.6s ease-in-out;
   &:hover {
      background: #18a0ef;
   }
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      margin-block-start: 5px !important;
      padding-inline: 1vw;
      font-size: 12px;
      font-weight: bold;
      padding-block: 6px;
      padding-inline: 23px;
   }
   @media (max-width: 497px) {
      width: 100%;
      margin-bottom: 2vh;
      border-radius: 10px;
   }
}

.pq-sidebar-block {
   padding: 20px 30px 30px 30px !important;
   overflow: scroll;
}

.pq-top-header {
   .row {
      background: #ed6960;
   }
}

header {
   #pq-header {
      .pq-header-style-2 {
         .navbar-brand {
            @media only screen and (min-width: 1024px) and (max-width: 1330px) {
               padding: 20px 0px !important ;
            }
         }
      }
   }
}

.aboutus {
   background: url(images/abt-bg.jpg);
   padding-block: 3vh;
   background-repeat: no-repeat;
   transition: all 0.7s ease;
   text-align: center;
   #head {
      // h1 {
      //    font-family: "Open Sans", sans-serif;
      //    font-weight: 400;
      // }
      .underline {
         border: 3px solid #2a67f0;
         width: 18vw;
         margin-inline: 33vw;
         border-radius: 40% 50%;
         @media only screen and (min-width: 1024px) and (max-width: 1330px) {
            width: 30vw;
            margin-inline: 35vw;
         }
         @media (max-width: 497px) {
            width: 70vw;
            margin-inline: 15vw;
         }
      }
   }
   #textpart {
      p {
         color: black;
         font-family: "Poppins", sans-serif;
         text-align: left;
         @media only screen and (min-width: 1024px) and (max-width: 1330px) {
            padding-inline: 5vw;
         }
         @media (max-width: 497px) {
            padding-inline: 10vw;
         }
      }
   }
   #abt-btn {
      // border: 1px solid #18a0ef;
      background: linear-gradient(112deg, #18a0ef, #a627ca);
      color: white;
      border-radius: 25px;
      width: 18vw;
      text-transform: uppercase;
      transition: all 0.7s ease;
      font-family: "Noto Serif", serif;
      font-weight: 400;

      &:hover {
         background: linear-gradient(328deg, #18a0ef, #a627ca);
         color: white;
      }
      @media (max-width: 497px) {
         width: 88vw;
      }
   }
}

.service {
   padding-block: 10vh;
   background: url(images/service-bg.jpg);
   .pr-img {
      width: 8vw;
   }
}

.client {
   background: #ebebeb;
}
.benefit {
   padding-block: 5vh;
}

// side social starts

#social-links {
   position: fixed;
   top: 30%;
   // transform: translateY(-50%);
   // right: -10px;
   left: 1px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   // transition: all 0.8s ease-in;
   @media only screen and (min-width: 1204px) and (max-width: 1330px) {
      left: 5px;
   }
   span {
      font-weight: bold;
   }
}

.social-link {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   padding: 8px;
   color: #fff;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.8s ease-in-out;
   @media (max-width: 497px) {
      padding: 4px;
      a {
         i {
            font-size: 20px;
         }
      }
   }
   .name {
      display: none;
   }
   a {
      i {
         font-size: 25px;
      }
   }
   &:hover {
      width: 150px;
      .name {
         display: block;
      }
   }
}

footer#pq-footer {
   background-color: #d1ebf5;
   color: #000000;
   .footer-title {
      color: black !important;
   }

   .pq-footer-recent-post-info h6 {
      color: #000000 !important;
   }
}
.pq-footer-social ul li a {
   color: white !important;
}

.pq-header-sticky {
   padding-top: 0px !important;
}

header#pq-header.pq-header-style-2 .pq-header-diff-block .navbar-brand img {
   height: 70px;
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      height: 45px;
   }
}

header#pq-header.pq-header-style-2 .navbar-brand {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding: 8px 5px;
   }
}
#head {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-block-start: 1.5vh;
   }
}

#testi {
   padding-block-start: 10vh;
   .pq-icon-box.pq-style-8 .pq-icon i {
      font-size: 6em !important;
   }
}

header#pq-header.pq-header-style-2.pq-header-sticky .pq-header-diff-block .navbar-brand img {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      height: 50px;
   }
}

header#pq-header.pq-header-style-2.pq-header-sticky .navbar-brand {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding: 15px 5px;
   }
}

header#pq-header.pq-header-style-2 .pq-bottom-header .navbar-toggler {
   @media (max-width: 497px) {
      margin-top: 4vh;
      margin-inline-start: 30vw;
   }
}

header#pq-header.pq-header-style-2.pq-header-sticky {
   .navbar-toggler {
      margin-top: 1vh;
   }
}
#menu-useful-service-links,
#menu-usefull-link {
   li {
      a {
         font-weight: bold;
      }
   }
}

#social-links {
   a {
      color: white;
      display: contents;
   }
}
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item a {
   font-family: "Poppins", sans-serif;
}
header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      font-size: 12px;
   }
}
header#pq-header .pq-bottom-header .navbar .navbar-nav {
   @media (max-width: 497px) {
      float: left !important;
   }
}
header#pq-header .pq-bottom-header .navbar .navbar-nav li > a:hover,
header#pq-header .pq-bottom-header .navbar .navbar-nav li:hover > a {
   @media (max-width: 497px) {
      background: transparent;
   }
}

#sol-sup-ser {
   margin-block: 5vh;
   padding-block: 3vh;

   .r-2 {
      padding-inline: 12vw;
      @media (max-width: 497px) {
         padding-inline: 2vw;
      }
      @media only screen and (min-width: 1024px) and (max-width: 1330px) {
         padding-inline: 3vw;
      }
      .box {
         // border: 1px solid black;
         padding-block: 4vh;
         height: 55vh;
         padding-inline: 3vw;
         background: linear-gradient(308deg, #00d8f0, #2a67f0);
         border-radius: 15px;
         margin-top: 10vh;
         transition: all 0.7s ease-in-out;
         @media (max-width: 497px) {
            padding-block-start: 1vh;
            padding-inline: 9vw;
            padding-block-end: 5vw;
            height: unset;
         }
         @media only screen and (min-width: 1024px) and (max-width: 1330px) {
            padding-block-start: 5vh;
            padding-inline: 16px;
            height: 62vh;
         }
         &:hover {
            background: linear-gradient(336deg, #00d8f0, #2a67f0);
            box-shadow: 0px 0px 5px 5px gainsboro;
         }
         h2 {
            color: #f9f871;
            margin-block: 2vh;
            @media (max-width: 497px) {
               font-size: 15px;
            }
         }
         li {
            color: white;
            margin-block-end: 1vh;
            font-size: large;
            font-weight: 600;
            @media (max-width: 497px) {
               font-size: 12px;
            }
         }
      }
   }
}

#testi {
   padding-block: 10vh 20vh;
}

// card section css starts
#service {
   padding-block: 8vh;
   background: #6078c85c;
   padding-inline: 6vw;
   background-image: url(images/bg-images/2.png);
   background-attachment: fixed;
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 8vw 1vw;
   }
   @media (max-width: 497px) {
      padding-inline: 7vw;
   }
   .new-service {
      background: transparent linear-gradient(147deg, #18a0ef 0%, #006ae4 100%);
      border-radius: 10px 0 0 10px;
      padding: 3px 5px 3px 20px;
      color: white;
   }

   .outline {
      border: 2px solid blue;
      width: 50%;
   }
   #row-2 {
      @media only screen and (min-width: 1024px) and (max-width: 1330px) {
         align-items: center;
         text-align: center;
         justify-content: center;
      }

      // base
      .flip {
         position: relative;
         > .front,
         > .back {
            display: block;
            // transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
            // transition-duration: 0.5s;
            // transition-property: transform, opacity;
            transition: all 0.8s ease;
         }
         > .front {
            transform: rotateY(0deg);
         }
         > .back {
            position: absolute;
            opacity: 0;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            transform: rotateY(-180deg);
         }
         &:hover {
            > .front {
               transform: rotateY(180deg);
            }
            > .back {
               opacity: 1;
               transform: rotateY(0deg);
            }
         }
         &.flip-vertical {
            > .back {
               transform: rotateX(-180deg);
            }
            &:hover {
               > .front {
                  transform: rotateX(180deg);
               }
               > .back {
                  transform: rotateX(0deg);
               }
            }
         }
      }

      // custom
      // only changes done below
      .flip {
         position: relative;
         display: inline-block;
         margin-right: 2px;
         margin-bottom: 1em;
         width: 28vw;
         // z-index:;
         @media only screen and (min-width: 1024px) and (max-width: 1330px) {
            width: 30vw;
         }
         @media (max-width: 497px) {
            width: -webkit-fill-available;
         }

         > .front {
            display: block;
            color: white;
            width: inherit;
            background-size: cover !important;
            background-position: center !important;
            height: 55vh;
            width: 100%;
            background: #313131;
            border-radius: 10px;
            @media only screen and (min-width: 1024px) and (max-width: 1330px) {
               height: 55vh;
            }
            @media (max-width: 497px) {
               height: height 48vh;
            }
            &::before {
               content: "";
               height: 100%;
               width: 100%;
               position: absolute;
               background-color: #020202;
               opacity: 0.7;
               border-radius: 10px;
            }
            p {
               font-size: 25px;
               font-weight: 600;
               padding-inline: 30px;
               text-transform: uppercase;
               position: absolute;
               top: 45%;
               font-family: $font-raleway;
            }

            img {
               height: 100%;
               width: 100%;
            }
         }

         > .back {
            display: block;
            color: white;
            width: inherit;
            padding-inline: 2vw;
            background-size: cover !important;
            background-position: center !important;
            width: 100%;
            background: #18a0ef;
            border-radius: 10px;
            padding-block: 9vh;
            height: 55vh;
            @media only screen and (min-width: 1024px) and (max-width: 1330px) {
               height: 55vh;
            }
            @media (max-width: 497px) {
               height: height 48vh;
            }
            h2 {
               color: #002866;
            }
            p {
               font-size: 15px;
               font-weight: 500;
               font-family: $font-ubuntu;
            }
         }
      }

      .text-shadow {
         font-family: "Nunito Sans", sans-serif;
         margin-left: 20px;
      }
   }
   .r-3 {
      button {
         width: 20vw;
         font-size: 24px;
         border-radius: 10px;
         transition: all 0.7s ease;
         margin-block-start: 5vh;
         @media only screen and (min-width: 1024px) and (max-width: 1330px) {
         }
         @media (max-width: 497px) {
            width: 80vw;
            font-size: 20px;
         }
      }
   }
}

header {
   z-index: 9999999999999999999 !important;
}

#partners-head {
   span {
      background: #18a0ef;
      color: white;
      padding-block: 1vh;
      padding-inline: 2vw;
      border-radius: 15px;
   }
}

#partners {
   background: #ebebeb;
   padding-block: 5vh;
}

#clients-sec {
   background: #ebebeb;
   .heading-client {
      h1 {
         margin-block-start: 3vh;
         text-transform: capitalize;
         font-size: 40px;
         .new-service {
            background: transparent linear-gradient(147deg, #18a0ef 0%, #006ae4 100%);
            border-radius: 10px 0 0 10px;
            padding: 3px 5px 3px 20px;
            color: white;
         }
      }
      .img-box {
         padding-inline: 30px;
         padding-block: 10px;
      }
   }
}

.pq-section-description {
   text-align: left;
   color: black;
   margin-bottom: 5px;
}

.about-ul {
   text-align: left;
   padding-left: 2vw;
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      text-align: center;
      width: 80vw;
      padding-left: 2vw;
   }
   li {
      transition: all 0.7s ease;
      &:hover {
         background: #18a0ef;
         border-radius: 10px;
         padding-inline-start: 2vw;
         i {
            color: white;
         }
         span {
            font-weight: 600;
         }
      }
      a {
         span {
            font-size: large;
            color: black;
            font-weight: 600;
         }
      }
   }
}

#myBtn-3 {
   background: #189fee;
   cursor: pointer;
   font-size: 25px;
   color: white;
   padding-inline: 2vw;
   padding-block: 1vh;
   border-radius: 10px;
   transition: all 0.6s ease-in-out;
   &:hover {
      background: black;
   }
}

.top-sec {
   margin-block: 10vh;
   h5 {
      margin-block-end: 3vh;
   }
   .underline {
      border: 2px solid blue;
      width: 50%;
      @media (max-width: 497px) {
         margin-bottom: 5vh;
      }
   }
   p {
      font-size: 14px;
   }
}
#about-page {
   margin-bottom: 18vh;
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      margin-bottom: 15vh;
   }
   @media (max-width: 497px) {
      margin-bottom: 0vh;
   }
}

#services-new-sec {
   margin-block-start: 5vh;
   margin-block-end: 15vh;
   .r-1 {
      h1 {
         margin-block: 1vh;
      }
      .underline {
         border: 3px solid blue;
         width: 30%;
         margin-inline: 35%;
      }
   }
   .r-2 {
      margin-block-end: 10vh;
      a {
         text-align: center;
      }
      padding-block-start: 5vh;
      padding-inline: 2vw;
      .content-box {
         text-align: center;
         cursor: pointer;
         position: relative;
         transition: all 0.8s ease-in-out;
         &:hover {
            img {
               box-shadow: -10px -8px 14px 11px #c7c6c6;
            }
         }
         @media (max-width: 497px) {
            margin-block-end: 15vh;
         }
         img {
            border-radius: 10px 10px 0px 0px;
            width: 80%;
            @media (max-width: 497px) {
               width: 90%;
            }
            @media only screen and (min-width: 1024px) and (max-width: 1330px) {
               width: 100%;
            }
         }
         p {
            color: white;
            background: #2a68f1;
            width: 90%;
            text-transform: uppercase;
            margin-left: 5%;
            position: absolute;
            padding-block: 2vh;
            font-weight: 600;
            border-radius: 15px;
            bottom: -70px;
            transition: all 0.7s ease;
            @media only screen and (min-width: 1024px) and (max-width: 1330px) {
               color: white;
               background: #2a68f1;
               width: 100%;
               text-transform: uppercase;
               margin-left: 0%;
               position: absolute;
               padding-block: 1vh;
               font-weight: normal;
               border-radius: 15px;
               bottom: -88px;
               transition: all 0.7s ease;
            }
            &:hover {
               background: black;
            }
         }
      }
   }
}

.benefits p {
   @media (max-width: 497px) {
      text-align: left;
   }
}

footer#pq-footer .pq-footer-top .pq-footer-bottom-list .pq-footer-items h4 {
   @media (max-width: 497px) {
      font-size: 18px;
      // float: left;
      line-height: 15px;
      width: 100%;
      display: inline-block;
   }
}
$dark-color: #151515;
.current-menu-item {
   li {
      a {
         background: transparent !important;
         font-size: small !important;
         line-height: 2 !important;
         color: $dark-color !important;
      }
   }
}

#seervice-details-btn {
   width: -webkit-fill-available;
}

.pq-fancy-box.pq-fancybox-1 {
   height: 45vh;
}

.current-menu-item {
   a {
      &:hover {
         color: #3c4856 !important;
      }
   }
}

#clients {
   background: #e3e3e3;
   // margin-block: 15vh;
   padding-block: 2vh;
   margin-top: 15vh;
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      margin-top: 12vh;
   }
   @media (max-width: 497px) {
      margin-top: 0vh;
   }
   .r-2 {
      margin-top: 2vh;
      padding-inline: 5vw;
      margin-bottom: 3vh;
      text-align: center;
      align-items: center;
      .circle-box {
         @media (max-width: 497px) {
            margin-block: 8vh;
            padding: 1em;
         }
      }
   }
}

#contact-side-details {
   background: #189fee;
   .pq-icon-box.pq-style-5 .pq-icon a i {
      color: black;
   }
}

#about-us-page {
   margin-top: 15vh;
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 5vw;
      margin-top: 10vh;
   }
   @media (max-width: 497px) {
      margin-top: 0vh;
   }
}

#benifits {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 5vw;
   }
}

#progress-bar-area {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 5vw;
   }
}

#contact-form {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 5vw;
   }
}

#contact-page {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 5vw;
   }
}

#whyus-sec {
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline-start: 4vw;
   }
   .pq-icon-box.pq-style-2 {
      padding-block: 4vh;
      height: 60vh;
      border-radius: 20px;
      @media only screen and (min-width: 1024px) and (max-width: 1330px) {
         height: 65vh;
         padding-inline: 5px;
      }
   }
}

#whychoose {
   .pq-icon-box.pq-style-2 {
      padding-block: 4vh;
      height: 60vh;
      border-radius: 20px;
      @media only screen and (min-width: 1024px) and (max-width: 1330px) {
         height: 60vh;
         padding-inline: 5px;
      }
      @media (max-width: 497px) {
         height: 50vh;
         padding-inline: 5vw;
      }
   }
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 2vw;
   }
}

#product-page-start {
   margin-top: 10vh;
   @media only screen and (min-width: 1024px) and (min-width: 1330px) {
      margin-top: 8vh;
   }
   @media (max-width: 497px) {
      margin-top: 0vh;
   }
}
#buying-plans {
   .pq-pricebox {
      &:hover {
         border: 2px solid #189fee;
         box-shadow: 0px 0px 10px 3px #cfedff;
      }
      margin-bottom: 20vh;
      border: 2px solid transparent;
      transition: all 0.8s ease-in-out;
      border-radius: 10px;
      padding-block: 2vh;
      // height: 190vh !important;
      box-shadow: 0px 0px 10px 3px gainsboro;
      .buy-plan {
         h2 {
            font-family: $font-quicksand;
            margin-bottom: 3vh;
         }
         h3 {
            font-family: $font-quicksand;
         }
         h6 {
            font-family: $font-quicksand;
         }
         p {
            font-family: $font-open-sans;
         }
         .lists-sec {
            text-align: left;
            padding-inline: 15%;
            @media only screen and (min-width: 1024px) and (max-width: 1330px) {
               padding-inline: 8%;
            }
            @media (max-width: 497px) {
               padding-inline: 5%;
            }

            ul {
               li {
                  color: black;
               }
            }
         }
         .secure-cloud {
            img {
               width: 20%;
            }
         }
      }
   }
}
.sub-menu {
   background: transparent !important;
}

.sub-menu .menu-item-1 {
   transform-origin: top center;
   animation: rotateZ 360ms 60ms ease-in-out forwards;
   background: white;
}
.sub-menu .menu-item-2 {
   transform-origin: top center;
   animation: rotateZ 360ms 120ms ease-in-out forwards;
   background: white;
}
.sub-menu .menu-item-3 {
   transform-origin: top center;
   animation: rotateZ 360ms 180ms ease-in-out forwards;
   background: white;
}
.sub-menu .menu-item-4 {
   transform-origin: top center;
   animation: rotateZ 360ms 240ms ease-in-out forwards;
   background: white;
}
.sub-menu .menu-item-5 {
   transform-origin: top center;
   animation: rotateZ 360ms 300ms ease-in-out forwards;
   background: white;
}
.sub-menu .menu-item-6 {
   transform-origin: top center;
   animation: rotateZ 360ms 360ms ease-in-out forwards;
   background: white;
}
@keyframes rotateZ {
   0% {
      opacity: 0;
      transform: translateZ(290px);
   }
   80% {
      transform: translateZ(10px);
   }
   100% {
      opacity: 1;
      transform: translateZ(0);
   }
}

#buy-plan-cards {
   justify-content: center;
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-inline: 10vw;
   }
}

#visitor-counter {
   background: black;
   margin-top: 2vh;
   border-radius: 15px;
   .col-12 {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-inline: 15%;
      padding-block: 6vh;
      box-shadow: inset 0px 0px 14px 1px white;
   }
}

#knowledge-center {
   padding-block: 15vh 0vh;
   @media (max-width: 497px) {
      padding: 0px;
   }
   @media only screen and (min-width: 1024px) and (max-width: 1330px) {
      padding-top: 10vh;
   }
   #faq-box {
      background: #e9e7e7;
      padding-inline: 8vw;
      padding-block: 2vh;
      h4 {
         @media (max-width: 497px) {
            margin-top: 4vh;
            color: #189fee;
            text-decoration: underline;
         }
      }
   }
   .pq-active {
      .pq-ad-title {
         border-bottom: 1px solid black;
         background: #189fee;
      }
   }
   .pq-ad-title {
      border-bottom: 1px solid black;
      background: transparent;
   }
}

.knowtop {
   background: #189fee;
   padding-block: 5vh;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   .box {
      background: white;
      border-radius: 15px;
      display: flex;
      padding: 10px;
      justify-content: space-evenly;
      text-align: center;
      width: 90%;
      align-items: center;
      @media (max-width: 497px) {
         width: 100%;
         margin-bottom: 5vh;
         padding-block: 1vh;
         padding-inline: 3vw;
      }
      @media only screen and (min-width: 1024px) and (max-width: 1330px) {
         padding-block: 1vh;
         width: 100%;
      }
      img {
         width: 20%;
      }
   }
}