/*
Theme Name: Secretary Services Pro
Theme URI:
Author: VW Themes
Author URI: https://www.vwthemes.com/
Description:
Version: 0.0.1
Requires at least: 5.8.0
Tested up to: 6.0.3
Requires PHP: 7.2
License: GNU General Public License
License URI:license.txt
Text Domain: secretary-services-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
Secretary Services Pro WordPress Theme has been created by VW Themes(vwthemes.com), 2023.
Secretary Services Pro WordPress Theme is released under the terms of GNU GPL
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 :root {
 --color-one: #F56490;
 --color-two: #FFB0C8;
 --black: #000000;
 --black-two: #383838;
 --white: #ffffff;
 --theme-font: Inter;
}

/* Basic Style */
 html body {
  margin: 0;
  padding: 0;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  background-color: white;
  position: relative;
  font-size: 14px;
  color:var(--black-two);
  font-family: var(--theme-font);
  background: var(--white);
}
 label {
     margin-bottom: 0 !important;
}
 img {
     margin: 0;
     padding: 0;
     border: none;
     max-width: 100%;
     height: auto;
     width: auto;
}
 section img {
     max-width: 100%;
}
 h1, h2, h3, h4, h5, h6 {
     margin: 0;
    font-family: var(--theme-font);
    font-weight: bold;
}
 p {
     margin: 0 0 15px;
     padding: 0;
     font-size: 14px;
     font-weight: normal;
}
 p, ul li a {
     letter-spacing: 0px;
       font-family: var(--theme-font);
}
 body a {
     text-decoration: none;
     color: #277BF8;
}
 a:hover {
     text-decoration: none;
     color: var(--black1);
}
 a:focus, a:hover {
     text-decoration: none !important;
}
 ul, ol {
     margin: 0 0 0 0;
     padding: 0;
}

 input[type="text"], input[type="tel"], input[type="email"], input[type="phno"], input[type="password"], textarea , .form-group input, select{
  border: 1px solid transparent;
  font-size: 14px;
  padding: 10px 10px;
  margin: 0 0 0px 0;
  height: auto;
  width: 100%;
  background: #FFFFFF;
  border-radius: 10px;
  margin-bottom: 0px;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  color: #7D7D7D;
}
.wpcf7-spinner{
  position: absolute;
  margin: 0 5px;
  right: -36px;
  z-index: 1;
  opacity: 1;
}
.contact-box .theme-btn p{
  margin-bottom: 0;
  line-height: 0;
}
.contact-box .theme-btn p input {
  background: transparent;
  border: none;
  font: 400 16px / 20px var(--theme-font);
  color: var(--black);
  text-transform: capitalize;
}

.contact-box .theme-btn:hover  p input{
  color: var(--white);
}
.contact-box{
  width: 95%;
  margin: 0 auto;
}
.contact-row img{
  width: 95%;
  margin: 0 auto;
  border-radius: 20px;
}

.contact-img-wrap {
  position: relative;
  z-index: 1;
}
.contact-box-1{
  height: 235px;
  width: 205px;
  background: #FFFFFF;
  position: absolute;
  border-radius: 30px;
  z-index: -1;
  top: -18px;
  left:-3px;
}
.contact-box-2{
  width: 207px;
  height: 286px;
  background: #fff;
  border-radius: 20px;
  position: absolute;
  right: -5px;
  bottom: -20px;
  z-index: -1;
}
textarea{
  height: 155px;
}
 section{
     background-size: 100% 100% !important;
     background-repeat: no-repeat !important;
     padding: 60px 0;
     background-attachment: scroll;
     overflow-x: hidden;
}
 .screen-reader-text {
     position: absolute;
     top: -9999em;
     left: -9999em;
}
section a:hover{
  color: var(--green);
}
/*------------------------- Headings --------------------------*/
 section h2 ,h2{
  font:600 45px / 50px var(--theme-font);
  letter-spacing: 0px;
}
 section h3 ,h3{
  font-size: 22px;
  font-weight: 600;
  font-family: var(--theme-font);
}
section h4,h4 a,h4{
  font: 600 20px / 25px var(--theme-font);
  letter-spacing: 0px;
}
section h5,h5 ,h5 a{
  font: 600 16px / 23px var(--theme-font);
  letter-spacing: 0px;
}
section h6,h6 a,h6{
  font: 600 15px / 20px var(--theme-font);
  letter-spacing: 0px;
}
p{
  font: 400 16px / 26px var(--theme-font);
  letter-spacing: 0px;
}
/* ----------- Post Content ---------------*/

 .vw-fixed{
     background-attachment: fixed !important;
     background-size: cover ;
     background-repeat: no-repeat ;

}
 .vw-scroll{
     background-attachment: scroll !important;
     background-size: cover ;
     background-repeat: no-repeat;
}
 .slider-bg-image.vw-fixed{
   position: fixed !important;
 }
/* ---------- Return to Top ------------ */
 #return-to-top {
  position: fixed;
  bottom: 10px;
  right: 19px;
  background: #000;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 9;
  align-items: center;
  display: flex;
  justify-content: center;
}
 #return-to-top i {
  position: relative;
  font-size: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #fff !important;
  font-weight: 800;
}
 #return-to-top:hover {
    background: var(--color-one);
}

#vw-sticky-menu{
  padding: 20px 0;
}
.sticky.stickynavbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  background:var(--white);
  padding: 15px 0;
  box-shadow: 0px 0px 20px #0000002B;
}
.sticky.stickynavbar .header-inner{
  background: unset;
  box-shadow: unset;
}
#vw-sticky-menu .avatar {
  border-radius: 7px;
  border: 1px solid var(--color-one);
  padding: 5px;
  height: 35px;
  width: 35px;
  object-fit: cover;
}
.owl-nav button{
  background: #fff;
  border: 1px solid #F56490;
  height: 40px;
  width: 40px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px 0px #00000040;
}
.owl-nav button i{
  font-size: 18px;
  color: #000;
}
.owl-nav button:hover{
  background: var(--color-one);
}
.owl-nav button:hover i{
  color: var(--white);
}
/* ----------- Spinner ------------- */
 .eco-box{
   position: fixed;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   cursor: pointer;
   z-index: 99999999;
   background-color:#8f99fb!important;
   width: 100%;
}
.loader-main{
  display: flex;
  justify-content: center;
  width: max-content;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: max-content;
}

.loader {
  width:50px;
  aspect-ratio: 1;
  display: grid;
}
.loader {
  width: 35px;
  aspect-ratio: 1;
  /* --c1:linear-gradient(90deg,#0000 calc(100%/3),#fff 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),#fff 0 calc(2*100%/3),#0000 0); */
  background:linear-gradient(90deg,#0000 calc(100%/3),#fff 0 calc(2*100%/3),#0000 0),linear-gradient( 0deg,#0000 calc(100%/3),#fff 0 calc(2*100%/3),#0000 0),
  linear-gradient(90deg,#0000 calc(100%/3),#fff 0 calc(2*100%/3),#0000 0),linear-gradient( 0deg,#0000 calc(100%/3),#fff 0 calc(2*100%/3),#0000 0);
  background-size: 300% 4px,4px 300% !important;
  background-repeat: no-repeat  !important;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}
 /* common css */
.main-head{
  color:var(--color-one);
}
.sub-head {
  font: 600 18px / 22px var(--theme-font);
  letter-spacing: 0px;
  margin-bottom: 0;
}
.main-para{
  font: 400 15px / 20px var(--theme-font);
  color: var(--color-one);
}


 .theme-btn{
  border-radius: 10px;
  position: relative;
  transition: all 0.5s;
  overflow: hidden;
  display: inline-block;
  padding: 10px 30px;
  z-index: 1;
  width: max-content;
  background: var(--white);
  color: var(--black);
  font: 400 16px / 20px var(--theme-font);
  border: 2px solid var(--color-one);
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  vertical-align: middle;
  box-shadow: 0px 4px 4px 0px #00000040;
}
.theme-btn:before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:var(--color-one);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.theme-btn:hover{
  color: var(--white);
  transition: unset;
}
.theme-btn:hover:before {   -webkit-transform: scale(1);
  transform: scale(1);}

  #services .main-head,#services .main-para,#how-work .main-head,#how-work .main-para,.testimonial-inner .main-head,.testimonial-inner .main-para,
.contact-iner .main-head,.contact-iner .main-para{
color: var(--black-two);
}
.services-iner,.work-inner,.testimonial-inner,.contact-iner {
  background: #FFB0C8;
    padding: 35px 20px;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* Blog */
#blog-news .blog-svg{
  position: absolute;
  top: -25%;
  z-index: 1;
  height: 300px;
  left: 0;
  -webkit-animation: bounce 2s ease-in-out 0s infinite alternate;
  animation: bouncess 2s ease-in-out 0s infinite alternate;
}
.blog-category a{
  font-family: Inter;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: var(--white)
}
.blog-category{
  position: absolute;
  top: -19px;
  z-index: 11;
  background: #F56490;
  border-radius: 10px;
  left: 0;
  right: 0;
  width: min-content;
  margin: 0 auto;
  padding: 20px;
}
.blog-content-box{
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  width: 98%;
  margin: 0 auto;
  background: rgb(0 0 0 / 45%);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}
.blog-img-wrap{
  height: 370px;
}
.blog-detail img{
height: 100%;
  width: 100%;
  object-fit: cover;
}
.blog-content p{
  font-family: Inter;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0;
  margin-bottom: 0;
}
.blog-title a{
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-title a:hover{
  color: var(--color-one);
}
.admin-text a{
  font-family: Inter;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  text-transform:capitalize;
}
.admin-text a:hover{
  color: var(--color-one);
}
#blog-detail  .col-md-8 .blog-content p{
  width: 80%;
}
 .blog-img-wrap{
  overflow: hidden;
  position: relative;
  border-radius: 20px;
 }
 .blog-detail .blog-img-wrap img{
  transition: all .4s ease;
 }
.blog-detail:hover .blog-img-wrap img{
  transform: scale(1.05) rotate(-2deg);
  opacity: .8;
}
/* about sec */
.page-template-about .abt-btn{
  display: none;
}
#about-us{
  padding-bottom: 5%;
}
#about-us .abt-svg{
  position: absolute;
  width: 230px;
  left: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: bounce 2s ease-in-out 0s infinite alternate;
  animation: bouncess 2s ease-in-out 0s infinite alternate;
}
@-webkit-keyframes bouncess {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
    100% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-40px);
  }
}
.abt-btn{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -20%;
}
.abt-para-wrap{
  padding:20px 60px 20px 10px;
 }
.abt-row{
  background: #FFB0C8;
  border-radius: 20px;
  padding: 20px;
  margin-top: 6%;
}
.about-img-wrap img{
  transform: scale(1.2, 1.3);
  box-shadow: 0px 0px 12.2px 5px #00000040;
border-radius: 20px;
height: 100%;
width: 100%;

}
.count-number{
  font: 600 20px / 25px var(--theme-font);
  letter-spacing: 0px;
}
.abt-counter-wrap{
  gap: 45px;
  justify-content: center;
  text-align: center;
  padding-left: 5%;
}


/* TEstimonial */
#testimonial{
  padding-bottom: 10%;
}
.testi-content-row{
  margin-bottom: -15%;
}
 .testimonial-box img{
  height: 100px;
  width: 100px !important;
  margin: 0 auto;
  border-radius: 20px;
  position: relative;
  top: -15px;
  margin-top: -60px;
 }
 #testimonial .owl-prev, #testimonial .owl-next{
  position: absolute;
  bottom: 45%;
 }
 #testimonial .owl-prev{
  left: -5px;
 }
 #testimonial .owl-next{
  right: -15px;
 }
 #testimonial .owl-stage-outer{
  padding: 4% 5px;
 }
 .testimonial-box{
  background: #fff;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 20px;
  text-align: center;
  margin: 10px;
  padding: 20px 10%;
 }
 .testimonial-box h5{
  position: relative;
 }
 .testimonial-box h5 a{
  color: #000;
  text-transform: capitalize;
 }
 .testimonial-box h5::after{
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 1px;
  width: 80%;
  background: #DEDEDE;
  width: 55px;
  margin: 0 auto;
 }

 .testimonial-box:hover img{
  transition: all .7s ease-out;
  border-radius: 0;
 }
 /* services */


#services  .owl-item.active {
  height: 325px;
  position: relative;
}
#services .owl-item.active:nth-child(2) .services-box{
  position: absolute;
  bottom: 40px;
}
#services .owl-item.active:nth-child(4) .services-box{
  position: absolute;
  bottom: 50px;
}
#services .owl-item.active:nth-child(6) .services-box{
  position: absolute;
  bottom: 20px;
}
.services-box h6 a{
  color: var(--black-two);
}
.ser-arrow{
  background: #fff;
  height: 0;
  transition: height 0.5s ease-in-out;
  width: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.ser-arrow i{
  color: #F56490;
  font-size: 18px;
  transform: rotate(-45deg);
  opacity: 0;
}
.ser-line{
  background: #FFFFFF;
  width: 80%;
  margin: 0 auto;
  border-radius: 25px 25px 0 0;
  height: 10px;
  opacity: 0;
}
.services-box:hover .ser-line{
  opacity: 1;
}
.services-box:hover .ser-arrow{
  height: 43px;
}
.services-box:hover  .ser-arrow i{
  opacity: 1;
}
#services .service-svg{
  position: absolute;
  right: 0;
  top: 20%;
  width: 190px;
  backface-visibility: hidden;
  animation: 2s ease-in-out 0s infinite alternate none running bouncess;
}
.services-img{
  height: 170px;
}
.services-img img{
  border-radius: 20px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
 /* faq */
 .faq-svg{
  position: absolute;
  bottom: 0;
  left: 5%;
  z-index: -1;
  width: 300px;
  -webkit-animation: bounce 2s ease-in-out 0s infinite alternate;
  animation: bouncess 2s ease-in-out 0s infinite alternate;
 }
 .faq-video-wrap {
  height: 420px;
 }
 .faq-video-wrap img{
  object-fit: cover;
  border-radius: 20px;
 }
 #faq .videoslider-video-btn{
  position: absolute;
  inset: 0;
  width: min-content;
  height: min-content;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  margin: auto;
 }
 #faq .videoslider-video-btn i{
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-one);
  font-size: 20px;
  color: var(--white);
  border-radius: 50%;
  position: relative;
 }

 #faq .accordion-button {
  background: transparent;
  box-shadow:unset;
}
 #faq .accordion-item{
  background-color: #fff;
}
 #faq .accordion-item{
  border: 1px solid #F56490;
  margin-bottom: 20px;
  box-shadow: 0px 0px 8.2px 2px #00000040;
  border-radius: 15px;
}

 #faq .accordion-button{
  font: 500 16px / 20px var(--theme-font);
  color: #000;
}
  #faq  .accordion-button:not(.collapsed)::after{
  content: '\f078';
  font-family: "font awesome 6 free";
  font-weight: 900;
  font-size: 14px;
  background-image: unset !important;
  height: unset !important;
  width: unset !important;
  transition: unset;
  color:  var(--green);
}
.accordion-body{
  font: 400 16px / 25px var(--theme-font);
}
  #faq .accordion-button::after{
  content: '\f078';
  font-family: "font awesome 6 free";
  font-weight: 900;
  font-size: 14px;
  background-image: unset !important;
  height: unset !important;
  width: unset !important;
  transition: unset;
}


/* -------plan--------- */
#plans{
  position: relative;
  overflow: visible;
}
#plans .sec-svg{
  position: absolute;
  right: 0;
  top: -30%;
  width: 240px;
  z-index: -1;
  -webkit-animation: bounce 2s ease-in-out 0s infinite alternate;
  animation: bouncess 2s ease-in-out 0s infinite alternate;
}
.plan-wrap-inner{
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 1s ease 0s;
  border: 2px solid #F56490;
  justify-content: space-between;
  padding-bottom: 20px;
}
.plans-points{
  background: #FFFFFF;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  width: 80%;
  border-radius: 15px;
  margin-top: 11%;
}

.plan-title{
  position: relative;
  padding: 30px;
  margin: 3px;
  border-radius: 20px;
}
.plan-title::after{
  content: '';
  position: absolute;
  inset: 40px 0 0 0;
  border-bottom: 1px solid #DEDEDE;
  width: 80%;
  margin: 0 auto;
}
.plan-points{
  padding: 0 20px;
}
.plan-wrap-inner:hover .plan-title{
  background: #F56490;
  color: var(--white);
}
.plan-wrap-inner:hover .plan-title::after{
  content: unset;
}
.plan-wrap-inner:hover .theme-btn{
  background: var(--color-one);
color: var(--white);
}
.plan-wrap:nth-child(2) .plan-wrap-inner {
  margin-top: -5%;
}
.plan-wrap-inner:hover {
  box-shadow: 0px 0px 19px 4px #00000040;
}
p.link-more a {
    color: #F56490;
}
a.read-more {
    color: #F56490;
}