/*
Theme Name: Business Office Pro
Theme URI: https://www.apexthemes.net/products/business-firm-wordpress-theme/
Author: Apex Themes
Author URI: https://www.apexthemes.com/
Description: Business Firm WordPress Theme is crafted to help companies establish a strong and professional online presence with ease. This Business Firm WordPress Theme features clean, modern layouts that effectively showcase services, team members, client testimonials, and case studies. Designed with flexibility in mind, it offers customizable typography, color schemes, and page layouts to align with your brand identity. The theme includes pre-designed sections for business portfolios, service highlights, and contact information, making it ideal for corporate agencies, consulting firms, startups, and financial services.
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: business-office-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
Business Office Pro WordPress Theme has been created by Apex Themes(apexthemes.com), 2026.
Business Office Pro WordPress Theme is released under the terms of GNU GPL
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 :root {
 --green: #F17B01;
 --black: #000000;
 --white: #ffffff;
 --theme-font: Outfit;
}

/* 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);
  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: 5px;
     margin-bottom: 10px;
     color: #000;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  color: #000;
}
.wpcf7-spinner{
  position: absolute;
  margin: 0 5px;
  right: -36px;
  z-index: 1;
  opacity: 1;
}
.advisor-form-box .theme-btn p{
  margin-bottom: 0;
}
.advisor-form-box .theme-btn p input {
  background: transparent;
  border: none;
  font: 400 16px / 20px var(--theme-font);
  color: #fff;
}
 section{
     background-size: cover !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 {
  font: bold 30px / 32px var(--theme-font);
  letter-spacing: 0px;
}
 section h3 {
   font-weight: 500;    right: -36px;
   z-index: 1;

   font-size: 26px;
}
section h4,h4 a{
  font: 600 20px / 26px var(--theme-font);
  letter-spacing: 0px;
}
section h5{
  font: 600 19px / 23px var(--theme-font);
  letter-spacing: 0px;
}
section h6{
  font: 600 15px / 28px var(--theme-font);
  letter-spacing: 0px;
}
p{
  font: 400 15px/25px var(--theme-font);
  letter-spacing: 0px;
}
/* ----------- Post Content ---------------*/

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

}
 .ta-scroll{
     background-attachment: scroll !important;
     background-size: cover ;
     background-repeat: no-repeat;
}
 .slider-bg-image.ta-fixed{
   position: fixed !important;
 }
/* ---------- Return to Top ------------ */
 #return-to-top {
  position: fixed;
  bottom: 10px;
  right: 19px;
  background: #000;
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  border: 8px solid #111111;
  -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: rgba(0, 0, 0, 0.9);
}


.sticky.stickynavbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  background:var(--black);
  padding: 15px 0;
  box-shadow: 0px 0px 20px #0000002B;
}
.sticky.stickynavbar .header-inner{
  background: unset;
  box-shadow: unset;
}
.owl-nav button{
  background: #F17B01;
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.owl-nav button i{
  font-size: 20px;
  color: #fff;
}
.owl-nav button:hover{
  background: var(--black);
}
/* ----------- Spinner ------------- */
 .eco-box{
   position: fixed;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   cursor: pointer;
   z-index: 99999999;
   background-color:var(--green);
   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;
  border-radius: 50%;
  background:    linear-gradient(0deg ,rgba(255, 255, 255, 0.5) 30%,#ffffff00 0 70%,rgb(255, 255, 255) 0) 50%/8% 100%,
  linear-gradient(90deg,rgba(255, 255, 255, 0.25) 30%,#fffdfd00 0 70%,rgba(255, 255, 255, 0.75) 0) 50%/100% 8%; 
  background-repeat: no-repeat;
  animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
   content: "";
   grid-area: 1/1;
   border-radius: 50%;
   background: inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.loader::after {
   opacity: 0.83;
   transform: rotate(60deg);
}
@keyframes l23 {
  100% {transform: rotate(1turn)}
}

/* common css */
/* slider */
.slider-head {
  font: 700 74px / 85px Outfit;
  color: #fff;
  text-transform: uppercase;
  border-left: 3px solid #FDC607;
  padding-left: 10px;
  border-bottom: 3px solid #FDC607;
  position: relative;
}
.slider-head:after {
  content: '';
  position: absolute;
  bottom: -15px;
  width: 40%;
  border-bottom: 3px solid #FDC607;
  right: 0;
}
.slider-content-wrap {
  padding: 8% 0px 12% 0px;
  position: relative;
  z-index: 1;
}
/* .slider-content-wrap:after {
  clip-path: polygon(61.721% 0%, 0% 100%, 100% 100%, 61.721% 0%);
  content: '';
  background: linear-gradient(105.87deg, #F17B01 37.44%, #FDC607 99.3%);
  width: 50%;
  height: 280px;
  position: absolute;
  bottom: 0;
  left: 8%;
}
.slider-content-wrap:before {
  clip-path: polygon(100% 100%, 82.973% 100%, 0% 18.935%, 10% 0%, 100% 100%);
  content: '';
  background: #FDC607B2;
  width: 33%;
  height: 35%;
  position: absolute;
  bottom: 0;
  left: 35%;
  transform: rotate(14deg);
}
.slider-bgwrap:after {
  clip-path: polygon(6.377% 100%, 0% 100%, 93.239% 0%, 100% 0%, 6.377% 100%);
  background: #FDC607B2;
  position: absolute;
  height: 100%;
  width: 73%;
  top: 0;
  bottom: 0;
  left: 11%;
  z-index: 0;
  content: '';
  transform: rotate(-4deg);
} */
.slider-bgwrap{
  position: relative;
}
/* .slider-bgwrap:before {
  content: '';
  clip-path: polygon(0% 0%, 100% 0%, 22% 100%, 0% 100%, 0% 0%);
  background: #202020F2;
  position: absolute;
  height: 100%;
  width: 75%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
} */
.main-head{
  font: bold 34px / 49px var(--theme-font);
  color:var(--black);
}
.sub-head {
  font: 700 19px / 22px var(--theme-font);
  letter-spacing: 0px;
  color: var(--green);
}
#slider:after {
  content: '';
  background: #F17B01;
  width: 200px;
  height: 250px;
  position: absolute;
  top: 0;
  right: 0;
  clip-path: polygon(100% 0%, 0% 0%, 100% 100%, 100% 0%);
}
.main-para{
  font: 400 16px / 26px var(--theme-font);
  color: var(--black);
}
#slider .main-para{
  font: 400 16px / 26px var(--theme-font);
  color: var(--white);
}
.theme-btn{
  border-radius: 6px;
  position: relative;
  transition: all 0.5s;
  overflow: hidden;
  display: inline-block;
  padding: 10px 30px;
  z-index: 1;
  width: max-content;
  /* transition: all 0.4s ease 0.5s; */
  background: var(--green);
  color: var(--white);    font: 400 16px / 20px Outfit;
  display: block;
  text-transform: uppercase;
}
.theme-btn:before ,.theme-btn:after {
  content: "";
  z-index: -1;
  width: 100%;
  height: 105%;
  position: absolute;
  top: -1px;
  transition: transform 0.6s;
background: var(--black);
}
.theme-btn:after{
  clip-path: polygon(20% 0, 0 50%, 20% 100%, 100% 100%, 100% 0);
  left: 100%;
}
.theme-btn:before {
  clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);
  right: 100%;
}
.theme-btn:hover{
  color: var(--white);
}
.theme-btn:hover:before { transform: translateX(90%);}
.theme-btn:hover:after { transform: translateX(-90%);}

/* Blog */
.blog-img-main{
  position: relative; 
}
.news-author {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 5px;
  background: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  width: max-content;
  left: 10px;
  gap: 10px;
}
.author-image{
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
.blog-inner-content-box{
  background: #FDEBD9;
  border: 1px solid #FDEBD9;
  padding: 10px;
  border-radius: 0 0 10px 10px;
}
.blog-img-main img{
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.author-image{
  height: 30px !important;
  width: 30px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
.blog-title h4{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-title h4 a{color: #000;}
.blog-title h4 a:hover{
  color: var(--green);
}
.blog-detail:hover .news-author {
  margin-left: 50px;
  transition: 0.5s;
  background: #F17B01;
  color: #fff;
}
/* about sec */
.page-template-about .abt-btn{
  display: none;
}
.about-img-main{
  display: grid;
  position: relative;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 40px);
  grid-gap: 15px;
}
.about-img-main .abt-main-iner:nth-child(1){
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 8;
  position: relative;
  z-index: 0;
}
.about-img-main .abt-main-iner:nth-child(1)::after{
  content: '';
  position: absolute;
  inset: 0;
  background: #E6F4F3;
  border-radius: 10px;
  z-index: -1;
  left: 95px;
  width: 90%;
}
.about-img-main .abt-main-iner:nth-child(1) img{
  width: 323px;
  height: 355px;
  position: relative;
  top: -21%;
  animation: shake 16s ease infinite;
}
.about-img-main .abt-main-iner:nth-child(2){
  grid-column-start: 5;
  grid-column-end: 8;
  grid-row-start: 3;
  grid-row-end: 8;
  position: relative;
  z-index: 1;
  margin-top: 15px;
}
.about-img-main .abt-main-iner:nth-child(3){
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 7;
  grid-row-end: 10;
  position: relative;
  top: -18px;
  z-index: 1;
}
.about-img-main .abt-main-iner:nth-child(4){
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
  z-index: 1;
  right: 10px;
}
.abt-main-iner img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
}
.abt-counter-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px 10px;
  position: relative;
  align-items: center;
  text-align: center;
  margin-top: 30px;
}
.bt-counter-wrap{
  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 29px 25px;
}
.abt-counter-box{
  background: #F17B01;
  height: 140px;
  width: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}
.abt-counter-box::after{
  content: "";
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px dashed var(--white);
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  bottom: 0;
  display: block;
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  transform: translate(0px, 10px);
}
.abt-counter-box:hover{
  background: var(--black);
}
.abt-counter-box:hover::after{
  animation: spin 10s linear infinite;
  opacity: 1;
}
@keyframes spin {
  from { 
      transform: rotate(0deg); 
  } to { 
      transform: rotate(360deg); 
  } 
}
.abt-counter-1 {
  position: relative;
  top: -10px;
  right: -14px
}
.abt-counter-wrap svg{
  position: absolute;
  top: 45px;
  z-index: -1;
  width: 100%;
}
.abt-counter-3{
  position: relative;
  top: -40px;
  right: 15px;
}
.abt-counter-4 ,.abt-counter-2 {
  position: relative;
  top: -25px;
}
.abt-counter-wrap h3{
  color: #fff;
}


/* TEstimonial */
.test-img{
  height: 100%;
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
}
.testi-left-wrap i{
  background: #F17B01;
  width: 90px;
  height: 90px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #ffff;
  border-radius: 50%;
  bottom: 20%;
  left: -13%;
}
.test-box{
  background: #FFF9E6;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  right: -50px;
  top: 30px;
  z-index: -1;
}
.testimonial-box{
  background: #FDEBD9;
  padding: 25px 30px;
  border-radius: 20px;
}
.testimonial-box:hover  i{
  color: var(--green);
  transition: 1s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
.testimonial-box h4 a{
  color:#000
}
.testimonial-box i{
  color: #f17b016b;
  font-size: 60px;
  position: relative;
  right: 15px;
}
.testimonial-box img{
  border-radius: 6px;
}
/* #testimonial .owl-carousel {
  left: -20%;
  top: 25%;
} */
 .test-content-box {
  padding-left: 20%;
  padding-bottom: 6%;
 }
 .testi-left-wrap {
  position: absolute;
  width: 300px;
  height: 345px;
  left: 15%;
 }
#testimonial .owl-nav{
  position: absolute;
  display: flex;
  gap: 10px;
  bottom: 5%;
  left: -11%;
 }
 .btn-wrap p:nth-child(2){
    margin: 0;
 }

 /* services */
 .services-img{
  background: #F17B01;
  height: 70px;
  width: 70px;
  padding: 15px;
  border-radius: 50%;
  margin: 0 auto;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-name: pulse;
}
.services-wrap:hover .services-img{
  background: #000;
}
.services-img img{
  height: 100%;
  width: 100%;
}
.services-wrap{
  background: #fff;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
}
.services-back-iner h2,.services-back-iner p{
  color: var(--white);
}
.services-row .services-box:nth-child(even) .services-wrap{
background: #FDEBD9;
}
.services-back-iner{
  display: flex ;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
  height: 100%;
  text-align: center;
}
.services-back{
  position: relative;
  z-index: 1;
  background-size: cover;
    background-repeat: no-repeat;
}
.services-back::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
  inset: 0px;
  background: #202020;
}
.services-wrap h4 a{
  color: var(--black);
}
.services-wrap:hover h4 a{
  color: var(--green);
}
.vission-box h5{
  color: var(--green);
}
#achieve .theme-btn{
  background: #000;
}
#achieve .theme-btn:hover:before,#achieve .theme-btn:hover:after{
  background: var(--green);
}
.advisor-form-box h2{
  color: var(--green);
}