/* -------------------------------------------------------------------------
CSS Version : 0.0 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
Fonts
------------------------------------------------------------------------- */
@font-face {
  font-family: "cinzel-black";
  src: url("./fonts/cinzel/CinzelDecorative-Black.ttf");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "cinzel-bold";
  src: url("./fonts/cinzel/CinzelDecorative-Bold.ttf");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "cinzel-regular";
  src: url("./fonts/cinzel/CinzelDecorative-Regular.ttf");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "roboto-bold";
  src: ur("./fonts/roboto/Roboto-Bold.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "roboto-light";
  src: url("./fonts/roboto/Roboto-Light.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "roboto-medium";
  src: url("./fonts/roboto/Roboto-Medium.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "roboto-regular";
  src: url("./fonts/roboto/Roboto-Regular.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
Variables
------------------------------------------------------------------------- */

:root {
  /* // Colors >>>> */
  --primary-color: #c1871c;
  --secondary-color: #541412;
  --tertiary-color: #6e8ca0;
  --background-color: #f4f3ff;
  --white: #ffffff;
  --light-black: #7c7e8f;
  --black: #252525;
  --border-color: #d2d1dc;
  /* // Fonts >>>> */
  --cinzel-regular: cinzel-regular;
  --roboto-regular: roboto-regular;
  --roboto-bold: roboto-bold;
  --roboto-medium: roboto-medium;
  --cinzel-black: cinzel-black;
  --cinzel-bold: cinzel-bold;
  /* // Font size--[0.5 rem = 5px, 1 rem = 10px] >>> */
  font-size: 62.5%;
  /*-- TO MAKE 1 rem  = 10px */
  --h1-font-size: 4.5rem;
  --h2-font-size: 3rem;
  --p-font-size: 1.6rem;
  --big-font-size: 2rem;
  --medium-font-size: 1.4rem;
  --small-font-size: 1.2rem;
  /* // Margin >>>> */
  --mpx150: 15rem;
  --mpx100: 10rem;
  --mpx75: 7.5rem;
  --mpx65: 6.5rem;
  --mpx50: 5rem;
  --mpx45: 4.5rem;
  --mpx40: 4rem;
  --mpx30: 3rem;
  --mpx20: 2rem;
  --mpx15: 1.5rem;
  --mpx10: 1rem;
  /* // Padding >>>> */
  --ppx30: 3rem;
  --ppx25: 2.5rem;
  --ppx20: 2rem;
  --ppx15: 1.5rem;
  --ppx10: 1rem;
}

/* -------------------------------------------------------------------------
Globle CSS
------------------------------------------------------------------------- */

/* // Main section [To set max width] >>>> */
.section {
  max-width: 1180px;
  padding: 0 20px;
  margin: 0 auto;
}

.height-adjuster {
  height: 69px;
}

/* // To avoid browser styles >>>> */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  font-family: var(--roboto-regular);
  font-size: var(--p-font-size);
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/* // SCROLL BAR >>>> */
* {
  scrollbar-color: var(--tnit-color) var(--white);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--tnit-color);
  border-radius: 10px;
}

h1,
h2,
h3,
h4,
h5,
h5,
p,
a,
span,
button {
  font-family: var(--roboto-regular);
}
p{
  text-align: justify;
}

html, body{
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------
Globle Classes
------------------------------------------------------------------------- */

/* // Background color >>>> */

.back-color-tnit {
  background-color: var(--tnit-color);
}

.back-color-razorpay {
  background-color: var(--razorpay-color);
}

.back-color-book {
  background-color: var(--book-color);
}

.back-color-hostbook {
  background-color: var(--hostbook-color);
}

.back-color-black {
  background-color: var(--black);
}

.back-color-white {
  background-color: var(--white);
}

.back-color-background {
  background-color: var(--background-color);
}

/* // Font color >>>> */

.font-color-tnit {
  color: var(--tnit-color);
}

.font-color-razorpay {
  color: var(--razorpay-color);
}

.font-color-book {
  color: var(--book-color);
}

.font-color-book {
  color: var(--hostbook-color);
}

.font-color-black {
  color: var(--black);
}

.font-color-light {
  color: var(--light-black);
}

.font-color-white {
  color: var(--white);
}

.font-color-gradient {
  background: linear-gradient(
    93.8deg,
    rgba(0, 102, 255, 0.89) 0%,
    rgba(104, 61, 196, 0.885625) 62.96%,
    rgba(238, 9, 121, 0.88) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* // Font size >>>> */

.h1-title {
  font-family: var(--roboto-regular);
  font-size: var(--h1-font-size);
  line-height: 130%;
}

.h2-title {
  font-family: var(--roboto-regular);
  font-size: var(--h2-font-size);
  line-height: 150%;
}

.p-title {
  font-size: var(--p-font-size);
  font-family: var(--roboto-medium);
  line-height: 130%;
  text-decoration: none;
  color: #000;

}

.p-small-title {
  font-size: var(--small-font-size);
  font-family: var(--roboto-medium);
  line-height: 130%;
}

.p-medium-title {
  font-size: var(--medium-font-size);
  font-family: var(--roboto-medium);
  line-height: 130%;
}

.p-big-title {
  font-size: var(--big-font-size);
  font-family: var(--roboto-medium);
  line-height: 130%;
  color: #2b84ea;
  text-align: center;
  margin: 0 auto;
}

.p-desc {
  font-size: var(--p-font-size);
  font-family: var(--roboto-regular);
  line-height: 150%;
  margin: 10px 0;
  text-decoration: none;
}

.p-desc span {
  font-style: italic;
  color: #eeeeee;
  font-size: 0.8em;
}

.p-small-desc {
  font-size: var(--small-font-size);
  font-family: var(--roboto-regular);
  line-height: 150%;
}

.p-medium-desc {
  font-size: var(--medium-font-size);
  font-family: var(--roboto-regular);
  line-height: 150%;
}

.p-big-desc {
  font-size: var(--big-font-size);
  font-family: var(--roboto-regular);
  line-height: 150%;
}

/* // Bold >>> */
.bold {
  font-family: var(--roboto-bold);
}

/* -------------------------------------------------------------------------
Buttons & Links
------------------------------------------------------------------------- */

.primary-btn {
  border: 2px solid #fff;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  padding: 15px 24px;
  font-family: var(--roboto-medium);
  font-size: var(--p-font-size);
  background: transparent;
  color: #fff;
  transition: all 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary-btn:hover {
  background: #fff;
  color: #000;
}

.secondary-btn {
  background: var(--tertiary-color);
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  padding: 15px 24px;
  font-size: var(--p-font-size);
  border: none;
  color: #000;
  margin: 10px auto;
}

.secondary-link {
  font-size: var(--p-font-size);
}

/* -------------------------------------------------------------------------
Inputs
------------------------------------------------------------------------- */
.form-area {
  display: grid;
  grid-template-columns: 100%;
  row-gap: var(--mpx20);
}

.single-input {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 15px;
  column-gap: 15px;
}

.dual-input {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 15px;
  column-gap: 15px;
}

.triple-input {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 15px;
  column-gap: 15px;
}

.four-input {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: 15px;
  column-gap: 15px;
}

.input-label {
  font-family: var(--roboto-medium);
  font-size: var(--p_font_size);
  color: var(--black);
}

.required-span {
  color: red;
}

.input-field,
.textarea-field {
  border: 0.5px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  /* background: var(--background-color); */
  font-family: var(--roboto-regular);
  font-size: var(--p-font-size);
  line-height: 150%;
  color: var(--black);
  padding: var(--ppx10) var(--ppx20);
}

.textarea-field {
  resize: none;
}

.input-field::placeholder,
.textarea-field::placeholder {
  color: var(--light-black);
}

.checkbox-single-input {
  display: flex;
  align-items: center;
  column-gap: 15px;
}

.checkbox-input_-abel {
  margin-left: 10px;
  font-family: var(--roboto-medium);
  color: var(--light-black);
  font-size: 15px;
}

.select-field {
  /* background: transparent; */
  outline: none;
  border: 0.5px solid var(--border-color);
  border-radius: 5px;
  padding: var(--ppx10) var(--ppx20);
  font-family: var(--roboto-medium);
  font-size: var(--p-font-size);
  color: var(--light-black);
}

/* --To hide number arrow-- */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* --------------------------------------------------------------------------
Alerts
-------------------------------------------------------------------------- */
.alert-box {
  position: fixed;
  z-index: 1000;
  top: 7vh;
  right: 0;
  display: flex;
  align-items: center;
  padding: var(--gpx10) var(--gpx20) var(--gpx10) var(--gpx20);
  border-radius: 0.5rem 0 0 0.5rem;
  width: max-content;
  min-width: 30.5rem;
  max-width: 50%;
}

.alert-box-img {
  width: 3rem;
  height: 3rem;
  margin-right: var(--gpx20);
  flex-shrink: 0;
}

.alert-box-details {
  margin-right: var(--gpx40);
  flex: 1;
}

.alert-box-desc {
  margin-top: 0.5rem;
  font-size: 1.4rem;
}

.alert-box-close-img {
  width: 3rem;
  height: 3rem;
  margin-left: var(--gpx20);
  cursor: pointer;
}

/* // Success box >>>> */
.succ-alert-box {
  background: #cfe3ca;
}

.succ-alert-box .alert-box-title {
  color: #037d08;
}

/* // Fail box >>>> */
.fail-alert-box {
  background: #f5d0c9;
}

.fail-alert-box .alert-box-title {
  color: #ff0000;
}

/* -------------------------------------------------------------------------
Sections EX : Left-Right, Center, etc.
------------------------------------------------------------------------- */
/* // Center title >>>> */

.center-title-sec {
  text-align: center;
  max-width: 70%;
  margin: 0 auto;
}

/* // Two section sec [Left right section] >>>> */
.two-sec {
  display: flex;
  justify-content: space-between;
}

.left-sec {
  width: 50%;
}

.heading-desc-left-sec {
  margin-top: var(--ppx15);
}

/* // No data found >>>> */
.not-found-sec {
  margin-top: var(--mpx100);
  display: grid;
  text-align: center;
  justify-items: center;
}

/* -------------------------------------------------------------------------
Navbar
------------------------------------------------------------------------- */

/*Icons*/

.m-icon {
  background-position: 50%;
  background-repeat: no-repeat;
  display: inline-block;
  height: var(--mpx40);
  width: var(--mpx40);
}

/* // Desktop navbar >>>> */

header {
  background-color: transparent;
  flex-shrink: 0;
  position: absolute;
  top: 0;
  z-index: 100;
  width: 100%;
  overflow: hidden;
}

.stickyheader {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 5px 5px rgba(0, 0, 0, 0.24);
}

.navbar-sec {
  width: 100%;
  padding: var(--mpx20) var(--mpx50);
}

.navbar-area {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.main-nav {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 10px;
}

.main-nav :first-child {
  justify-content: flex-start;
}

.main-nav :not(:first-child) {
  margin-left: auto;
}

.right-div {
  width: auto;
  padding: 0 10px;
  display: flex;
  /*  background: rgba(131,133,175,0.8);*/
  height: 50px;
  border-radius: 10px;
}
.right-div-lg {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 30px;
  overflow: hidden;
}

.right-div-lg a {
  width: auto;
  font-family: var(--roboto-medium);
  font-weight: 400;
  line-height: 21px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}

.right-div-lg a::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

.right-div-lg a:hover {
  font-size: 110%;
}

.right-div-lg a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.right-div-lg button,
.navbar-item-ul ul button {
  background: #000;
  color: #fff;
  font-family: var(--roboto-medium);
  font-weight: 400;
  font-size: 16px;
  height: auto;
  padding: var(--mpx10) var(--mpx20);
  border: 1px solid #000;
}

.right-div-lg button:hover {
  background: #fff;
  color: #000;
}

.navbar-icon {
  cursor: pointer;
  z-index: 1000;
  display: none;
}

.navbar-icon svg {
  stroke: var(--white);
  transition: 0.2s;
}

.navbar-icon svg g:first-child {
  opacity: 1;
  transition: opacity 0s 0.2s;
}

.navbar-icon svg g:first-child line {
  transition: transform 0.2s 0.2s;
  transform: translateY(0px);
}

.navbar-icon svg g:last-child {
  opacity: 0;
  transition: opacity 0s 0.2s;
}

.navbar-icon svg g:last-child line {
  transition: transform 0.2s;
  transform: rotate(0deg);
  transform-origin: center;
}

.navbar-icon.-menu-open svg {
  stroke: var(--white);
}

.navbar-icon.-menu-open svg g:first-child {
  opacity: 0;
}

.navbar-icon.-menu-open svg g:first-child line {
  transition: transform 0.2s;
}

.navbar-icon.-menu-open svg g:first-child line:first-child {
  transform: translateY(7px);
}

.navbar-icon.-menu-open svg g:first-child line:last-child {
  transform: translateY(-7px);
}

.navbar-icon.-menu-open svg g:last-child {
  opacity: 1;
}

.navbar-icon.-menu-open svg g:last-child line {
  transition: transform 0.2s 0.2s;
}

.navbar-icon.-menu-open svg g:last-child line:first-child {
  transform: rotate(45deg);
}

.navbar-icon.-menu-open svg g:last-child line:last-child {
  transform: rotate(-45deg);
}

.navbar-item-ul {
  display: none;
  flex-direction: column;
  background: #fff;
  min-width: 50%;
  width: 100%;
  position: relative;
  height: auto;
  padding: var(--mpx20) var(--mpx10);
  z-index: 2000;
  border-radius: var(--mpx10);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 5px 5px rgba(0, 0, 0, 0.24);
}

.navbar-item-ul a {
  font-family: var(--roboto-medium);
  font-weight: 400;
  font-size: 16px;
  height: auto;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: var(--mpx10);
  text-align: center;
  padding: var(--mpx10);
  color: #000;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #5533ff;
  background: linear-gradient(95deg, #02042a 40%, #02042a 100%);
  -webkit-transform: skewY(-12deg);
  transform: skewY(-12deg);
  -webkit-transform-origin: 0;
  transform-origin: 0;
  z-index: -12;
}
.overlay :nth-child(1) {
  width: 33.33333%;
  width: calc(100% / 2);
  top: 0;
  left: 16.66666%;
  left: calc(calc(100% / 3) / 2);
  right: auto;
  background: #5533ff;
  background: linear-gradient(95deg, #02042a 40%, #02042a 100%);
  height: 200px;
}
.overlay :nth-child(2) {
  width: 33.33333%;
  width: calc(100% / 3);
  bottom: 0;
  background: #5533ff;
  background: linear-gradient(95deg, #02042a 40%, #02042a 100%);
  position: absolute;
  height: 155px;
  left: 3%;
}

/* -------------------------------------------------------------------------
Whatsapp float icon
------------------------------------------------------------------------- */
.whatsapp_float_icon_sec {
  position: fixed;
  bottom: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  z-index: 500;
}

.whatsapp_float_p_sec {
  display: flex;
  align-items: center;
  column-gap: 10px;
  background: var(--white);
  box-shadow: 10px 10px 20px rgba(0, 39, 179, 0.05);
  border-radius: 3px;
  cursor: pointer;
}

.whatsapp_float_p_sec:hover {
  padding-left: 10px;
}

.whatsapp_float_p_sec:hover > .whatsapp_float_icon_p {
  display: block;
}

.whatsapp_float_p_close_img {
  width: 20px;
  transform: rotate(45deg);
}

.whatsapp_float_icon_p {
  display: none;
  color: var(--black);
  font-family: var(--roboto-medium);
}

.whatsapp_float_icon {
  width: 50px;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
Popup
------------------------------------------------------------------------- */

.popup-sec {
  background: rgba(164, 195, 230, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup-area {
  top: 100px;
  max-width: 80%;
  max-height: 80%;
  overflow-y: scroll;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-shadow: 8px 16px 25px -15px rgba(0, 102, 255, 0.1);
  border: 0.5px solid var(--border-color);
  border-radius: 10px;
  padding: var(--mpx50);
  background: var(--white);
}

.popup-close-btn {
  cursor: pointer;
  background: #2b84ea;
  padding: var(--mpx15) var(--ppx20);
  position: absolute;
  top: -0;
  right: -0;
  border-radius: 0 10px 0 0;
}

.popup-feature-box-area {
  margin-top: var(--mpx20) !important;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  column-gap: var(--mpx20) !important;
  row-gap: var(--mpx20);
}

.popup-left-sec {
  margin-top: var(--mpx100);
}

/* -------------------------------------------------------------------------
Homepage : Petpooja
------------------------------------------------------------------------- */
/* // Bannner */
.banner-sec {
  max-width: 90%;
  margin: var(--mpx50) auto;
}

.banner-area {
  border-radius: 20px;
  padding: var(--mpx65) 0;
  gap: 20px;
}

.banner-right-area {
  display: flex;
  justify-content: center;
  gap: var(--mpx20);
  flex-direction: column;
}

.banner-img {
  width: 600px;
  height: 500px;
  border-radius: var(--mpx10);
}

.banner-btn-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--mpx15);
  row-gap: var(--mpx15);
}

.logo {
  width: 50%;
}

.logo-area {
  display: flex;
  flex-direction: column;
  max-width: 150px;
}

.logo-area p {
  font-weight: 600;
  width: 100%;
}

.mobile-banner-img{
  display: none;
}

/* // About >>>> */

.about-sec {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: var(--mpx50) 0;
}

.about-sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/about-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: -1;
}

.about-sec .content {
  position: relative;
  z-index: 2;
}

.about-area {
  width: 80%;
  display: flex;
}

.about-right-area {
  width: 90%;
}

/* NC Section */

.nc-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--mpx50) 0;
}

/* // Small feature >>>> */
.small-feature-sec {
  margin-top: var(--mpx30);
}

.small-feature-box-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--mpx50);
  row-gap: var(--mpx30);
  margin: var(--mpx20) auto;
}
.services_highlight_area .small-feature-box {
  animation: slide 15s linear infinite;
}

@keyframes slide {
  0%,
  33.33% {
    transform: translate3d(0, 0, 0);
  }

  33.34%,
  66.66% {
    transform: translate3d(-500px, 0, 0);
  }

  66.67%,
  100% {
    transform: translate3d(-1000px, 0, 0);
  }
}

.small-feature-box {
  min-width: 250px !important;
  box-shadow: none !important;
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  padding: 10px !important;
  margin: 10px;
}

/* // Features >>>> */
.features-sec {
  width: 100% !important;
  padding: var(--mpx100);
  margin-top: var(--mpx100);
  background: #c52031;
}

.features-area {
  margin-top: var(--mpx50);
}

.features-box-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: var(--mpx10);
  row-gap: var(--mpx45);
}

.features-box {
  display: flex;
  flex-direction: column;
  place-items: center;
  text-align: center;
  width: calc(33% - var(--mpx45) * 2 / 3);
  border: 0.5px solid var(--primary-color);
  border-radius: 10px;
  padding: var(--ppx30);
}

.features-box-big {
  background: #fff;
  display: grid;
  justify-items: center;
  text-align: center;
  width: 300px;
  border: 0.5px solid var(--primary-color);
  border-radius: 10px;
  padding: var(--mpx20);
}

.features-box-img-area {
  background: transparent;
  padding: 12px;
  border-radius: 10px;
  max-width: max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  color: var(--primary-color);
  cursor: pointer;
}
.features-box-img-area p {
  font-family: var(--roboto-regular);
  margin-bottom: 0;
}

.features-box-big .features-box-img {
  display: block;
  width: auto;
  height: 30px;
  object-fit: cover;
}

.features-box-img {
  /*    filter: invert(32%) sepia(61%) saturate(2778%) hue-rotate(339deg) brightness(95%) contrast(96%);*/
  display: block;
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.features-box-title {
  margin-top: var(--mpx20);
  font-size: var(--mpx20);
  text-align: left;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}

.features-box-title:hover {
  text-decoration: underline;
}

.features-box-desc {
  margin: var(--mpx20) auto;
  text-align: center;
  font-size: var(--mpx15);
}

/* Box shadow */

.cards {
  margin: 0 auto;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  border-radius: 10px !important;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 15px;
  padding: 1.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* // Detail >>>> */

.detail-sec {
  /* max-width: 1100px;
    padding: 0 20px;
    margin: 0 auto; */
  margin-top: var(--mpx100);
}

.detail-left-sec {
  max-width: 35%;
}

.detail-right-sec {
  max-width: 35%;
}

.detail-img {
  width: 100%;
  mix-blend-mode: screen;
  opacity: 1;
}

/* // Benefits >>>> */
.benefits-sec {
  margin-top: var(--mpx150);
  padding: var(--mpx30);
  background: #5533ff;
  background: linear-gradient(95deg, #2b84ea 40%, #2b84ea 100%);
  -webkit-transform: skewY(-12deg);
  transform: skewY(-4deg);
  -webkit-transform-origin: 0;
  transform-origin: 0;
  z-index: -100;
}

.benefits-sec .center-title-sec,
.benefits-sec .benefits-area {
  transform: skewY(4deg);
}

.benefits-area-left-sec {
  max-width: 55%;
  margin-right: var(--ppx30);
}

.benefits-box-area {
  margin-top: var(--ppx30);
}

.benefits-box {
  display: flex;
  width: 100%;
  margin-bottom: var(--ppx25);
}

.benefits-box:nth-last-child(0) {
  margin-bottom: 0;
}

.benefits-box-number {
  margin-right: var(--mpx15);
}

.benefits-box .benefits-box-number {
  margin-top: 3px;
  color: var(--white);
}

.benefits-box-active {
  background: var(--white);
  box-shadow: 8px 16px 25px -15px rgba(0, 102, 255, 0.1);
  border: 0.5px solid var(--border-color);
  border-radius: 5px;
  padding: 15px;
}

.benefits-box-active .benefits-box-number {
  color: var(--razorpay-color);
  display: block;
  background-color: var(--razorpay-light);
  padding: 7px;
  border-radius: 5px;
  height: max-content;
  line-height: 100%;
}

.benefits-box-main-area {
  width: 100%;
}

.benefits-box-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.benefits-box-active .benefits-box-title {
  color: var(--black);
}

.benefits-box-active .benefits-box-title-down-img {
  display: none;
}

.benefits-box-desc {
  display: none;
}

.benefits-box-active .benefits-box-desc {
  display: block;
  margin-top: var(--mpx15);
}

.benefits-img {
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
}

/*TEXT SECTION*/

.text-sec {
  display: flex;
  width: 100%;
  height: 40vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.text-sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/about-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: -1;
}
.text-sec p {
  color: var(--primary-color);
  font-family: var(--roboto-regular);
  font-size: var(--mpx20);
  text-align: center;
  padding: 0 var(--mpx150);
}

/* // Price >>>> */

.razorpay-price-box-include-img {
  /* filter: invert(32%) sepia(61%) saturate(2778%) hue-rotate(339deg) brightness(95%) contrast(96%);*/
}

.razorpay-download-btn-area img {
  height: 50px;
}

/* // Download >>>> */
.razorpay-download-btn-sec {
  margin-top: var(--mpx100);
}

.razorpay-download-btn-area {
  margin-top: var(--mpx50);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: var(--mpx20);
  row-gap: var(--mpx20);
}

/* -------------------------------------------------------------------------
Homepage : Bookkeeper
------------------------------------------------------------------------- */

/* // Bannner */
.banner2-sec {
  margin-top: var(--mpx10);
}

.banner2-img {
  max-height: 250px;
}

.banner2-btn-area {
  margin-top: var(--ppx20);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--mpx15);
  row-gap: var(--mpx15);
}

/* // Features >>>> */

.book-features-box .features-box-img-area {
  background: var(--book-light);
}

.book-features-box .features-box-img {
  filter: invert(41%) sepia(26%) saturate(671%) hue-rotate(61deg)
    brightness(92%) contrast(93%);
}

/* // Why bookkeeper >>>> */

.why-book-sec {
  margin-top: var(--mpx100);
}

.download-btn-area {
  margin-top: var(--mpx20);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpx15);
  row-gap: var(--mpx15);
  align-items: center;
}

.why-book-or {
  margin: var(--mpx15) 0;
}

.download-btn-area img {
  height: 40px;
}

.why-book-area-right-sec {
  max-width: 45%;
}

.why-book-box {
  margin-bottom: var(--mpx20);
  display: flex;
}

.why-book-box:nth-last-child(1) {
  margin-bottom: 0;
}

.why-book-box-img-area {
  margin-right: var(--mpx15);
  background: var(--book-light);
  padding: 10px;
  height: min-content;
  border-radius: 5px;
}

.why-book-box-img {
  filter: invert(41%) sepia(26%) saturate(671%) hue-rotate(61deg)
    brightness(92%) contrast(93%);
  display: block;
  width: 20px;
  height: 20px;
  object-fit: cover;
  display: block;
}

.why-book-box-content-desc {
  margin-top: var(--mpx15);
}

/* // Price >>>> */

.price-sec {
  margin-top: var(--mpx100);
}

.price-box-area {
  width: 90%;
  margin: auto;
  margin-top: var(--mpx50);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpx20);
  row-gap: var(--mpx45);
  justify-content: center;
}

.price-box {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 30%;
  width: 30%;
  box-shadow: 8px 16px 25px -15px rgba(0, 102, 255, 0.1);
  border: 0.5px solid var(--border-color);
  border-radius: 10px;
  padding: var(--ppx30);
}

.bottom-link {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.price-box-plan-area {
  display: flex;
  align-items: center;
  column-gap: var(--ppx20);
}

.price-box-price {
  white-space: nowrap;
}

.price-box-plan-details-area {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.price-box-include-area {
  margin-top: var(--ppx30);
}

.price-box-inlcude {
  margin-bottom: var(--mpx15);
  display: flex;
  align-items: center;
  column-gap: var(--ppx15);
}

.price-box-inlcude:nth-last-child(1) {
  margin-bottom: 0;
}

.price-box-buy-btn {
  margin-top: var(--mpx20);
  background: linear-gradient(95deg, #5533ff 40%, #25ddf5 100%);
}

/* -------------------------------------------------------------------------
Footer
------------------------------------------------------------------------- */

footer {
  padding: var(--mpx45) 0;
  background: var(--tertiary-color);
}

.footer-box-area {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpx45);
  row-gap: var(--mpx45);
  justify-content: space-between;
}

.footer-box {
  width: auto;
}

.footer-contact-box p {
  margin-top: var(--mpx10);
}

.footer-logo-img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%)
    contrast(103%);
}

.footer-box-img {
  width: 25px;
  height: 25px;
}
.footer-box-img:hover {
  transform: scale(1.1);
}
.footer-box h2 {
  margin-bottom: var(--ppx30);
  font-weight: 100;
}
.footer-box .p-desc:hover {
  color: var(--secondary-color);
  cursor: pointer;
}
.footer-box-ul {
  line-height: var(--mpx30);
}
.footer-box-ul li:nth-last-child(1) {
  margin-bottom: 0;
}

.footer-box-social {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpx15);
  row-gap: var(--mpx15);
  align-items: center;
}

/* -------------------------------------------------------------------------
Homepage : Hostbooks
------------------------------------------------------------------------- */
.hostbook-sec {
  background-color: var(--hostbook-light);
}

.hostbook-center-sec {
  margin-top: var(--mpx50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.hostbook-btn-area {
  margin-top: var(--mpx15);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpx15);
  row-gap: var(--mpx15);
}

.hostbook-center-img {
  width: 70%;
  margin-top: var(--mpx45);
}

/* // Features >>>> */
.hostbook-features-box {
  justify-items: flex-start;
  text-align: left;
}

.hostbook-features-box .features-box-img-area {
  background: var(--hostbook-light);
}

.hostbook-features-box .features-box-img {
  filter: invert(30%) sepia(77%) saturate(1522%) hue-rotate(181deg)
    brightness(93%) contrast(101%);
}

/* // Why Hostbook >>>> */
.why-hostbook-box .why-book-box-img-area {
  background: var(--hostbook-light);
}

.why-hostbook-box .why-book-box-img {
  filter: invert(30%) sepia(77%) saturate(1522%) hue-rotate(181deg)
    brightness(93%) contrast(101%);
}

/* // Price >>>> */

.hostbook-price-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(33% - var(--mpx45) * 2 / 3);
}

.hostbook-price-box .price-box-plan-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--ppx20);
}

.hostbook-price-box .price-box-plan-details-area {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  column-gap: var(--ppx10);
  white-space: wrap;
}

.hostbook-price-box .price-box-include-img {
  filter: invert(30%) sepia(77%) saturate(1522%) hue-rotate(181deg)
    brightness(93%) contrast(101%);
}
/* -------------------------------------------------------------------------
About us
------------------------------------------------------------------------- */
/* // Hightlight >>>> */
.services_highlight_area {
  margin-top: var(--mpx50);
  width: 100%;
  display: flex;
  column-gap: 15%;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-content: center;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  overflow: auto;
}

.services_highlight_area .principle_highlight_p {
  animation: slide 15s linear infinite;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-1500px, 0, 0);
  }
}

.services_highlight_area::-webkit-scrollbar {
  display: none;
}

/* // Team  >>>> */
.team-sec {
  margin-top: var(--mpx100);
}

.team-left-sec {
  max-width: 80%;
}

/* // Team member >>>> */
.team-member-sec {
  margin-top: var(--mpx100);
}

.team-memeber-box-area {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpx45);
  row-gap: var(--mpx45);
}

.team-memeber-box {
  width: calc(25% - var(--mpx45) * 3 / 4);
}

.team-member-box-img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: var(--mpx15);
}

/* -------------------------------------------------------------------------
homepage [Index.html]
------------------------------------------------------------------------- */
/* // Banner >>>> */
.tnit-banner-area {
  background: var(--tnit-color);
}

.tnit-banner-left-area {
  max-width: 55%;
}

.tnit-banner-img {
  max-height: 450px;
}

/* // Features >>>> */

.tnit-features-box .features-box-img-area {
  background: var(--tnit-light);
}

.tnit-features-box .features-box-img {
  filter: invert(12%) sepia(85%) saturate(4697%) hue-rotate(219deg)
    brightness(84%) contrast(126%);
}

/* // Features 2 >>>> */
.features2-sec {
  margin: var(--mpx100) auto 0 auto;
  width: 60%;
}

.features2-area {
  box-shadow: 8px 16px 25px -15px rgba(0, 102, 255, 0.1);
  border: 0.5px solid var(--border-color);
  border-radius: 10px;
  padding: var(--mpx50);
}

.features2-box-area {
  margin-top: var(--ppx30);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--ppx25);
  row-gap: var(--ppx25);
}

.features2-box {
  width: calc(50% - var(--ppx25) / 2);
}

/* // Product >>>> */
.product-sec {
  margin: var(--mpx100) auto;
}
.choose-product-sec {
  margin-top: var(--mpx100);
}

.product-box-area {
  margin-top: var(--mpx45);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mpx50);
  row-gap: var(--mpx50);
}

.product-box {
  width: calc(50% - var(--mpx50) / 2);
  box-shadow: 8px 16px 25px -15px rgba(0, 102, 255, 0.1);
  border: 0.5px solid var(--border-color);
  border-radius: 10px;
  padding: var(--ppx30);
  display: grid;
  justify-items: center;
  justify-content: center;
}

.product-logo-img {
  width: 250px;
  margin-bottom: var(--mpx20);
}

/* -------------------------------------------------------------------------
Trusted By
------------------------------------------------------------------------- */

.trusted-by-sec {
  width: 100%;
  height: auto;
  margin: var(--mpx100) 0;
}

.trusted-div {
  display: flex;
  padding: var(--mpx50) var(--mpx100);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--mpx50);
}

.trusted-div img {
  width: var(--mpx150);
  height: var(--mpx150);
}

/* -------------------------------------------------------------------------
Industry Ratings
------------------------------------------------------------------------- */

.industry-ratings-sec {
  width: 100%;
  height: auto;
  margin: var(--mpx100) 0;
}

.ratings-div {
  padding: var(--mpx100) 0;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.rating {
  width: 30%;
}

.rating img {
  width: 70%;
}
.rating p {
  font-family: var(--roboto-regular);
  font-weight: 400;
  font-size: 18px;
  color: #727480;
  width: 80%;
  text-align: center;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
Contact us
------------------------------------------------------------------------- */
.demo-sec {
  margin: 0;
  width: 100%;
  font-family: var(--roboto-regular);
  padding: var(--mpx50);
  border-bottom: 2px solid var(--primary-color);
}

.contact-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #000;
  padding: 0 200px;
}

.contact-form {
  width: 50%;
  display: flex;
  justify-content: flex-end;
}

.contact-form form {
  width: 70%;
}

.contact-img {
  width: 50%;
  justify-content: center;
  display: flex;
}

.contact-img img {
  width: 50%;
}

.form-group {
  margin-bottom: 15px;
}

.form-group-2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.form-group-2 .form-group {
  width: 40%;
  font-family: var(--roboto-regular);
  font-weight: 400;
  font-size: 20px;
}

.form-label {
  display: block;
}

.form-control {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ce8883;
  border-radius: 15px;
}

.error {
  color: #f47479;
}

/* Submit button styling */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2e86c1;
  color: #fff;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  float: right;
}

.form-control:focus {
  border-color: #007bff;
  outline: none;
}

/* -------------------------------------------------------------------------
Content pages [Privacy policy, Refund policy , etc.]
------------------------------------------------------------------------- */
.content-sec {
  margin-top: var(--mpx50);
}

.content {
  margin-top: var(--mpx50);
  color: var(--black);
}

/* -------------------------------------------------------------------------
Responsive : Media Queries >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
Homepage : Vyapar
------------------------------------------------------------------------- */
@media screen and (min-width: 0) and (max-width: 451px) {
  /* -------------------------------------------------------------------------
    Variables
    ------------------------------------------------------------------------- */

  :root {
    /* // Font size--[0.5 rem = 5px, 1 rem = 10px] >>> */
    font-size: 62.5%;
    /*-- TO MAKE 1 rem  = 10px */
    --h1-font-size: 3rem;
    --h2-font-size: 2rem;
    --p-font-size: 1.4rem;
    --big-font-size: 1.6rem;
    --medium-font-size: 1.2rem;
    --small-font-size: 1.1rem;
    /* // Margin >>>> */
    --mpx150: 5rem;
    --mpx100: 3rem;
    --mpx75: 3.5rem;
    --mpx65: 3rem;
    --mpx50: 2.8rem;
    --mpx45: 2.6rem;
    --mpx20: 1.6rem;
    --mpx15: 1.2rem;
    --mpx10: 0.8rem;
    /* // Padding >>>> */
    --ppx30: 2.2rem;
    --ppx25: 1.9rem;
    --ppx20: 1.6rem;
    --ppx15: 1.2rem;
    --ppx10: 0.8rem;
  }

  /* -------------------------------------------------------------------------
    Buttons & Links
    ------------------------------------------------------------------------- */

  .primary-btn {
    padding: 10px 20px;
  }

  /* -------------------------------------------------------------------------
    Sections EX : Left-Right, Center, etc.
    ------------------------------------------------------------------------- */
  .center-title-sec {
    max-width: 100%;
  }

  .h1-title {
    font-size: var(--h1-font-size);
  }

  /* // Two section sec [Left right section] >>>> */
  .two-sec {
    flex-direction: column;
    row-gap: var(--mpx50);
  }

  .two-sec-reverse {
    flex-direction: column-reverse;
  }

  .left-sec {
    max-width: 100%;
    width: 100%;
  }
  .contact-div {
    padding: 0;
  }

  .about-sec::before{
    background-image: url('./images/about-bg-vertical.jpg');
  }

  /* -------------------------------------------------------------------------
    Navbar
    ------------------------------------------------------------------------- */

  /* -------------------------------------------------------------------------
    Footer
    ------------------------------------------------------------------------- */

  .footer-box:nth-child(1) {
    width: 100%;
  }

  .footer-box {
    width: 100%;
  }

  /* -------------------------------------------------------------------------
    Popup
    ------------------------------------------------------------------------- */
  .popup-left-sec {
    margin-top: 150px;
  }

  .popup-right-sec {
    display: none;
  }

  .popup-area h1 {
    font-size: var(--mpx30) !important;
  }
  .popup-area h2 {
    font-size: var(--mpx20) !important;
  }

  .popup-area .small-feature-box-area {
    display: none;
  }

  /* -------------------------------------------------------------------------
    Homepage : Petpooja
    ------------------------------------------------------------------------- */
  /* // Bannner */

  .banner-right-area {
    display: none;
  }

  .banner-left-area {
    margin-top: var(--mpx10);
  }

  .logo {
    width: 150%;
  }

  .banner-img{
    display: none;
  }
  .mobile-banner-img{
    display: block;
  }

  /* // Features >>>> */
  .features-box {
    width: 100%;
  }

  /* // Detail >>>> */

  .detail-right-sec {
    max-width: 100%;
  }

  /* // Benefits >>>> */
  .benefits-img {
    width: 100%;
    max-height: auto;
  }

  .benefits-area-left-sec {
    max-width: 100%;
    margin-right: 0;
  }

  /* // Buy now >>>> */

  .buy-image1 {
    position: absolute;
    top: 110px;
    right: -20px;
    width: 50%;
  }

  .buy-image2 {
    display: none;
  }

  /* -------------------------------------------------------------------------
    Homepage : Bookkeeper
    ------------------------------------------------------------------------- */

  /* // Bannner */
  .banner2-img {
    width: 100%;
    max-height: auto;
  }

  /* // Why bookkeeper >>>> */
  .why-book-area-right-sec {
    max-width: 100%;
  }

  /* // Price >>>> */
  .price-box {
    width: 100%;
  }

  /* -------------------------------------------------------------------------
    About us
    ------------------------------------------------------------------------- */
  /* // Banner 2 >>>> */
  .team-left-sec {
    max-width: 100%;
  }

  /* // Team member >>>> */
  .team-memeber-box {
    width: 100%;
  }

  /* -------------------------------------------------------------------------
    homepage [Index.html]
    ------------------------------------------------------------------------- */

  /* // Features 2 >>>> */
  .features2-sec {
    width: 100%;
  }

  .features2-box {
    width: 100%;
  }

  .features-box-big {
    width: 90%;
  }

  .features-box-area {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--mpx45);
  }

  /* // Product >>>> */

  .product-box {
    width: 100%;
  }

  .product-logo-img {
    width: 100%;
    margin-bottom: var(--mpx20);
  }

  /* trusted by sec */

  .trusted-div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
  }

  .ratings-div {
    flex-direction: column;
    width: 90%;
  }
  .rating {
    width: 100%;
  }

  /*contact sec*/

  .contact-img {
    display: none;
  }
  .contact-form {
    width: 100%;
    margin: var(--mpx40) 0;
    justify-content: center;
  }
  .form-group-2 {
    flex-direction: column;
    width: 100%;
  }
  .form-group-2 .form-group {
    width: 100%;
  }

  /* -------------------------------------------------------------------------
    Contact us
    ------------------------------------------------------------------------- */
  .contact-form-right-sec {
    width: 100%;
  }
}

@media screen and (min-width: 451px) and (max-width: 701px) {
  /* -------------------------------------------------------------------------
    Variables
    ------------------------------------------------------------------------- */

  :root {
    /* // Font size--[0.5 rem = 5px, 1 rem = 10px] >>> */
    font-size: 62.5%;
    /*-- TO MAKE 1 rem  = 10px */
    --h1-font-size: 4.5rem;
    --h2-font-size: 2.8rem;
    --p-font-size: 1.6rem;
    --big-font-size: 1.8rem;
    --medium-font-size: 1.4rem;
    --small-font-size: 1.2rem;
    /* // Margin >>>> */
    --mpx150: 10rem;
    --mpx100: 8rem;
    --mpx75: 5rem;
    --mpx65: 4.5rem;
    --mpx50: 3.8rem;
    --mpx45: 3.2rem;
    --mpx20: 2rem;
    --mpx15: 1.5rem;
    --mpx10: 1rem;
    /* // Padding >>>> */
    --ppx30: 2.5rem;
    --ppx25: 2.1rem;
    --ppx20: 2rem;
    --ppx15: 1.5rem;
    --ppx10: 1rem;
  }

  /* -------------------------------------------------------------------------
    Sections EX : Left-Right, Center, etc.
    ------------------------------------------------------------------------- */
  .center-title-sec {
    max-width: 100%;
  }
  .h1-title {
    font-size: var(--h2-font-size);
  }

  /* // Two section sec [Left right section] >>>> */
  .two-sec {
    flex-direction: column;
    row-gap: var(--mpx50);
  }

  .two-sec-reverse {
    flex-direction: column-reverse;
  }

  .left-sec {
    max-width: 100%;
    width: 100%;
  }
  .contact-div {
    padding: 0;
  }

  .about-sec::before{
    background-image: url('./images/about-bg-vertical.jpg');
  }


  /* -------------------------------------------------------------------------
    Navbar
    ------------------------------------------------------------------------- */

  /* // Desktop navbar >>>> */

  /* -------------------------------------------------------------------------
    Footer
    ------------------------------------------------------------------------- */

  .footer-box:nth-child(1) {
    width: calc(50% - var(--mpx45) / 2);
  }

  .footer-box {
    width: calc(50% - var(--mpx45) / 2);
  }

  /* -------------------------------------------------------------------------
    Popup
    ------------------------------------------------------------------------- */
  .popup-left-sec {
    margin-top: var(--mpx20);
  }

  .popup-right-sec {
    display: none;
  }

  /* -------------------------------------------------------------------------
    Homepage : Vyapar
    ------------------------------------------------------------------------- */

    
  .banner-img{
    display: none;
  }
  .mobile-banner-img{
    display: block;
  }

  /* // Features >>>> */
  .features-box {
    width: calc(50% - var(--mpx45) / 2);
  }

  .features-box-area {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--mpx45);
  }

  /* // Detail >>>> */

  .detail-right-sec {
    max-width: 100%;
  }

  /* // Benefits >>>> */
  .benefits-img {
    width: 100%;
    max-height: auto;
  }

  .benefits-area-left-sec {
    max-width: 100%;
    margin-right: 0;
  }

  /* // Buy now >>>> */

  .buy-image1 {
    position: absolute;
    top: 70px;
    right: -20px;
    width: 40%;
    z-index: 2;
  }

  .buy-image2 {
    position: absolute;
    top: 160px;
    right: 200px;
    width: 20%;
    z-index: 1;
  }

  /* -------------------------------------------------------------------------
    Homepage : Bookkeeper
    ------------------------------------------------------------------------- */

  /* // Bannner */
  .banner2-img {
    width: 100%;
    max-height: auto;
  }

  /* // Why bookkeeper >>>> */
  .why-book-area-right-sec {
    max-width: 100%;
  }

  /* // Price >>>> */
  .price-box {
    width: calc(50% - var(--mpx50) / 2);
  }

  /* -------------------------------------------------------------------------
    Homepage [Index.html]
    ------------------------------------------------------------------------- */
  /* // Features 2 >>>> */
  .features2-sec {
    width: 100%;
  }

  /* // Product >>>> */
  .product-logo-img {
    width: 100%;
    margin-bottom: var(--mpx20);
  }

  /* -------------------------------------------------------------------------
    Contact us
    ------------------------------------------------------------------------- */
  /*contact sec*/

  .contact-img {
    display: none;
  }
  .contact-form {
    width: 100%;
    margin: var(--mpx40) 0;
    justify-content: center;
  }
  .form-group-2 {
    flex-direction: column;
    width: 100%;
  }
  .form-group-2 .form-group {
    width: 100%;
  }
}

@media screen and (min-width: 701px) and (max-width: 865px) {
  /* -------------------------------------------------------------------------
    Navbar
    ------------------------------------------------------------------------- */

  /* // Desktop navbar >>>> */

  /* -------------------------------------------------------------------------
    Sections EX : Left-Right, Center, etc.
    ------------------------------------------------------------------------- */
  .center-title-sec {
    max-width: 100%;
  }

  /* // Two section sec [Left right section] >>>> */
  .two-sec {
    flex-direction: column;
    row-gap: var(--mpx50);
  }

  .left-sec {
    max-width: 100%;
  }
  .contact-div {
    padding: 0;
  }

  /* -------------------------------------------------------------------------
    Footer
    ------------------------------------------------------------------------- */

  .footer-box:nth-child(1) {
    width: calc(50% - var(--mpx45) / 2);
  }

  .footer-box {
    width: calc(50% - var(--mpx45) / 2);
  }

  /* -------------------------------------------------------------------------
    Homepage : Vyapar
    ------------------------------------------------------------------------- */
  /* // Features >>>> */
  .features-box {
    width: calc(50% - var(--mpx45) / 2);
  }

  /* // Benefits >>>> */
  .benefits-img {
    width: 100%;
    max-height: auto;
  }

  .benefits-area-left-sec {
    max-width: 100%;
    margin-right: 0;
  }

  /* // Buy now >>>> */

  .buy-image1 {
    position: absolute;
    top: 70px;
    right: -20px;
    width: 40%;
    z-index: 2;
  }

  .buy-image2 {
    position: absolute;
    top: 160px;
    right: 200px;
    width: 20%;
    z-index: 1;
  }

  /* -------------------------------------------------------------------------
    Homepage : Bookkeeper
    ------------------------------------------------------------------------- */

  /* // Bannner */
  .banner2-img {
    width: 100%;
    max-height: auto;
  }

  /* // Why bookkeeper >>>> */
  .why-book-area-right-sec {
    max-width: 100%;
  }

  /* // Price >>>> */
  .price-box {
    width: calc(50% - var(--mpx50) / 2);
  }

  /* -------------------------------------------------------------------------
    Homepage [Index.html]
    ------------------------------------------------------------------------- */
  /* // Features 2 >>>> */
  .features2-sec {
    width: 100%;
  }

  .features-box-area {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--mpx45);
  }

  /* -------------------------------------------------------------------------
    Contact us
    ------------------------------------------------------------------------- */
  /*contact sec*/

  .contact-img {
    display: none;
  }
  .contact-form {
    width: 100%;
    margin: var(--mpx40) 0;
    justify-content: center;
  }
  .form-group-2 {
    flex-direction: column;
    width: 100%;
  }
  .form-group-2 .form-group {
    width: 100%;
  }
}

@media screen and (min-width: 866px) and (max-width: 1075px) {
  /* -------------------------------------------------------------------------
    Navbar
    ------------------------------------------------------------------------- */

  /* // Desktop navbar >>>> */

  /* -------------------------------------------------------------------------
    Homepage : Bookkeeper
    ------------------------------------------------------------------------- */

  /* // Price >>>> */

  .price-box {
    width: calc(33% - var(--mpx50) * 2 / 3);
  }

  /* -------------------------------------------------------------------------
    Homepage [Index.html]
    ------------------------------------------------------------------------- */
  /* // Features 2 >>>> */
  .features2-sec {
    width: 80%;
  }
}

@media (max-width: 1200px) {
  .popup-area {
    padding-top: var(--mpx150);
  }

  .popup-area h1 {
    font-size: var(--mpx40);
  }
  .popup-right-sec {
    display: none;
  }

  .popup-left-sec,
  .left-sec {
    max-width: 100%;
  }
  .banner-area{
    flex-direction: column;
  }
  .left-sec{
    width: 100%;
  }
  .banner-img{
    width: 100%;
  }
}

@media (max-width: 866px) {
  .right-div-lg {
    display: none;
  }

  .navbar-icon {
    display: block;
  }

  .navbar-item-ul-active {
    display: flex;
  }
}