/*
* ----------------------------------------------------------------------------------------
Author       : Tanvir Hossain
Template Name: Nino - Premium Portfolio Template
Version      : 1.0                                          
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 01.GLOBAL CSS STYLE
* 02.COMMON CSS STYLE
* 03.MENU CSS STYLE
* 04.HEADER CSS STYLE
* 05.ABOUT CSS STYLE
* 06.SERVICE CSS STYLE
* 07.SKILL CSS STYLE
* 08.RESUME CSS STYLE
* 09.PORTFOLIO CSS STYLE
* 10.TESTIMONIALS CSS STYLE
* 11.PRICING CSS STYLE
* 12.CLIENTS CSS STYLE
* 13.CONTACT CSS STYLE
* 14.FOOTER CSS STYLE
* 15.PRELOADER & BOUNCE CCS STYLE
* 16.BLOG CSS STYLE
* 17.Mobile Menu CSS STYLE
* 18.Responsive CSS STYLE
* ----------------------------------------------------------------------------------------
*/
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Tailwind Css Import */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /*
* ----------------------------------------------------------------------------------------
* 01.GLOBAL STYLE
* ----------------------------------------------------------------------------------------
*/

  body {
    @apply font-textFont leading-[30px];
  }

  /* Heading styles */
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6,
  .accordion-item .accordion-button {
    @apply mb-[.5rem] font-titleFont font-medium text-headingColor;
  }

  /* Heading sizes */
  h1,
  .h1 {
    @apply text-[58px] leading-[120%];
  }

  h2,
  .h2 {
    @apply text-[22px] leading-[120%];
  }

  h3,
  .h3 {
    @apply text-[30px] leading-[120%];
  }

  h4,
  .h4 {
    @apply text-[24px] leading-[120%];
  }

  h5,
  .h5 {
    @apply text-xl leading-[120%];
  }

  h6,
  .h6 {
    @apply text-[16px] leading-[120%];
  }

  /* Paragraph styles */
  p {
    @apply leading-[28px];
  }

  /* List styles */
  ul,
  li {
    @apply m-0 p-0;
  }

  /* Fieldset */
  fieldset {
    @apply m-0 border-0 p-0;
  }

  /* No padding class */
  .no-padding {
    @apply p-0 !important;
  }

  /* Anchor tags */
  a {
    @apply cursor-pointer font-textFont text-mainColor no-underline outline-none transition duration-500;
  }

  a:hover,
  a:focus,
  a:visited {
    @apply no-underline outline-none;
  }

  a:hover {
    @apply text-black;
  }

  /* Unordered and list items */
  ul,
  li {
    @apply m-0 list-none p-0;
  }

  /* Image styles */
  img {
    @apply inline-block max-w-full;
  }

  /* Mark styles */
  mark {
    @apply bg-transparent text-primaryColor underline;
  }

  /* Input, select, textarea, and form-control */
  input,
  select,
  textarea,
  .nice-select,
  .form-control {
    @apply w-full border-b-2 border-none border-b-[rgba(41,41,41,0.1)] bg-white text-xl;
  }

  /* Placeholder styles */
  input::placeholder,
  select::placeholder,
  textarea::placeholder,
  .nice-select::placeholder,
  .form-control::placeholder {
    @apply text-mainColor opacity-40;
  }

  /* Focus states */
  input:focus,
  select:focus,
  textarea:focus,
  .nice-select:focus,
  .form-control:focus {
    @apply border-b-2 border-[rgba(41,41,41,0.1)];
  }

  /* Textarea styles */
  textarea {
    @apply pt-5;
  }

  /* Label styles */
  label {
    @apply mb-1 cursor-pointer font-medium text-mainColor;
  }

  /* Form group styles */
  .form-group {
    @apply relative;
  }

  /* Focus states */
  input:focus,
  button:focus,
  .form-control:focus {
    @apply border-[#cfdbf1] shadow-none outline-none;
  }

  /* Search input styles */
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration,
  input[type="search"]::-ms-clear,
  input[type="search"]::-ms-reveal {
    @apply hidden;
  }

  /* Checkbox and radio input styles */
  input[type="checkbox"],
  input[type="radio"] {
    @apply h-auto w-auto;
  }

  /* HTML scroll behavior */
  html {
    @apply scroll-auto !important;
  }

  /*
* ----------------------------------------------------------------------------------------
* 02.COMMON TAILWIND STYLE
* ----------------------------------------------------------------------------------------
*/

  /* No gap */
  .no-gap {
    @apply ml-0 mr-0;
  }

  .no-gap > div {
    @apply pl-0 pr-0;
  }

  /* Section Title */
  .section-title {
    @apply mb-[30px] md:mb-[50px];
  }

  .has-border {
    @apply border-b border-gray-700;
  }

  .section-title .sub-title {
    @apply block font-medium text-white/65;
  }

  .section-black-title h2 {
    @apply text-mainColor;
  }

  .section-title h2 {
    @apply mb-[15px] pb-5 text-[50px] uppercase leading-[70px] md:text-[60px];
  }

  .section-title p {
    @apply text-base uppercase max-md:mb-0;
  }

  .section-title h2 span {
    @apply text-mainColor;
  }

  .section-title h6 {
    @apply text-lg;
  }

  .section-title h6 span {
    @apply text-primaryColor;
  }

  /* Theme Button */
  .theme-btn {
    @apply mb-2.5 mr-[5px] inline-block cursor-pointer rounded-[2px] border border-buttonBorder bg-mainColor px-[34px] py-5 text-center text-sm font-medium leading-[20px] text-white transition duration-300;
  }

  .theme-btn-two {
    @apply bg-primaryColor text-black;
  }

  .theme-btn:focus {
    @apply no-underline transition duration-300;
  }

  .theme-btn i {
    @apply ml-1;
  }

  .theme-btn:hover {
    @apply border border-buttonBorder bg-transparent text-mainColor no-underline;
  }

  .theme-btn-two:hover {
    @apply border border-bodyColor text-headingColor no-underline;
  }

  .theme-btn:active {
    @apply shadow-inner;
  }

  /* Details Button */
  .details-btn {
    @apply border-border-color inline-block h-[50px] w-[50px] -rotate-45 transform rounded-full border bg-[#131313] text-center leading-[50px];
  }

  .details-btn:hover {
    @apply bg-primaryColor text-black;
  }

  /* Read More */
  .read-more {
    @apply inline-flex items-center text-sm capitalize text-white;
  }

  .read-more i {
    @apply float-right ml-[7px] mt-0.5 transition duration-500;
  }

  .read-more:hover {
    @apply text-primaryColor;
  }

  .read-more:hover i {
    @apply ml-2.5;
  }

  /* List Style One */
  .list-style-one li {
    @apply flex items-center font-medium text-white;
  }

  .list-style-one li:not(:last-child) {
    @apply mb-2.5;
  }

  .list-style-one.two-column {
    @apply mt-[30px] flex flex-wrap;
  }

  .list-style-one.two-column li {
    @apply w-[48%] text-base text-gray-600;
  }

  .list-style-one.two-column li i {
    @apply pr-2.5;
  }

  /* List Style Two */
  .list-style-two li {
    @apply flex items-center;
  }

  .list-style-two li:before {
    @apply leading-1 font-awesome-5-pro mr-5 h-[30px] w-[30px] rounded-full bg-primaryColor text-center text-base leading-[30px] text-lighterColor content-["\f00c"];
  }

  .list-style-two li:not(:last-child) {
    @apply mb-[25px];
  }

  /* Social Style One */
  .social-style-one {
    @apply ml-[-5px] mr-[-5px] inline-flex flex-wrap;
  }

  .social-style-one a {
    @apply ml-[5px] mr-[5px] h-[35px] w-[35px] rounded-full bg-[#0c0b0b] text-center text-sm leading-[35px] text-[#b0afaf];
  }

  .social-style-one a:hover {
    @apply bg-primaryColor text-black;
  }

  /* Social Style Two */
  .social-style-two {
    @apply -mx-3 inline-flex flex-wrap;
  }

  .social-style-two a {
    @apply mx-3 text-white/35;
  }

  .social-style-two a:hover {
    @apply text-primaryColor;
  }

  /* Pagination */
  .pagination {
    @apply -mx-[-15px] items-center;
  }

  .pagination li {
    @apply mx-[15px] mb-0 mt-2.5;
  }

  .pagination li a,
  .pagination li .page-link {
    @apply border-none bg-transparent p-0 text-2xl font-semibold text-mainColor shadow-none;
  }

  .pagination li.active .page-link,
  .pagination li:hover:not(.disabled) .page-link {
    @apply bg-transparent text-primaryColor;
  }

  /* Rating */
  .ratting {
    @apply leading-1 ml-[-5px] mr-[-5px] inline-flex items-center;
  }

  .ratting i {
    @apply mx-[5px] text-[#ab6034];
  }

  /* Slick Arrow */
  .slick-arrow {
    @apply h-[40px] w-[40px] rounded-full border border-buttonBorder bg-mainColor leading-[40px] text-black transition duration-500;
  }

  .slick-arrow:focus,
  .slick-arrow:hover {
    @apply border-mainColor bg-transparent text-white;
  }

  .slider-arrows button:first-child {
    @apply mr-[5px];
  }

  /* Slick Dots */
  .slick-dots {
    @apply flex items-center justify-center;
  }

  .slick-dots li {
    @apply relative mx-[8px] h-[6px] w-[6px] cursor-pointer rounded-full bg-[#1d1b1a] opacity-30 transition duration-500;
  }

  .slick-dots li button {
    @apply h-0 opacity-0;
  }

  .slick-dots li:before {
    @apply absolute h-0 w-0 -translate-x-1/2 -translate-y-1/2 transform rounded-full border border-primaryColor transition duration-500 content-[""];
  }

  .slick-dots li.slick-active {
    @apply bg-primaryColor opacity-100;
  }

  .slick-dots li.slick-active:before {
    @apply h-[21px] w-[21px];
  }

  /* Single Page Hero Area */
  .single-page-hero-area {
    @apply bg-primaryColor pb-[50px] pt-[200px];
  }

  .single-page-hero-area h2 {
    @apply mb-[15px] pb-5 text-center text-[90px] font-medium uppercase text-mainColor md:text-[150px];
  }

  .single-page-hero-area p {
    @apply px-[30px] text-center text-[16px] leading-[24px] text-mainColor md:px-[200px];
  }

  /*
* ----------------------------------------------------------------------------------------
* 03.MENU CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Tailwind CSS conversion using @apply */

  /* Header Area */
  .header-area {
    @apply relative left-0 top-0 z-[999] w-full transition-all duration-500 ease-in-out;
  }

  .fixed-header .header-upper {
    @apply border-b border-buttonBorder bg-primaryColor transition-all duration-500 ease-in-out;
  }

  .fixed-header .header-inner {
    @apply py-4 transition-all duration-500 ease-in-out;
  }

  .fixed-header .main-menu .navbar-collapse li a {
    @apply max-md:text-white;
  }

  .fixed-header .main-menu .navbar-collapse li a:hover {
    @apply max-md:text-white;
  }

  .header-inner {
    @apply py-5 transition-all duration-500 ease-in-out md:py-[30px];
  }

  .main-header .header-upper {
    @apply fixed top-0 z-[5] w-full transition-all duration-500 ease-in-out;
  }

  /* Logo */
  .logo img {
    @apply w-auto max-w-[180px] max-h-[50px] h-auto object-contain block;
  }

  .logo-area,
  .logo,
  .logo a {
    @apply flex items-center min-h-[40px];
  }

  /* Main Menu */
  .main-menu {
    @apply text-right;
  }

  .main-menu ul li {
    @apply relative ml-[30px] inline-block;
  }

  .main-menu ul li:last-child {
    @apply mr-0;
  }

  .main-menu ul li.has-dropdown > a {
    @apply pr-[14px];
  }

  .main-menu ul li.has-dropdown > a:after {
    @apply absolute right-[-4px] top-[10px] text-[16px] text-mainColor transition duration-300 ease-in-out content-['\f107'];
    font-family: "Font Awesome 6 Pro";
  }

  .main-menu ul li .sub-menu li.has-dropdown > a:after {
    @apply right-[15px] top-[6px];
  }

  /* Main Menu Links */
  .main-menu ul li a {
    @apply inline-block py-2.5 text-[15px] font-medium uppercase leading-[20px] text-mainColor transition duration-300;
  }

  .main-menu ul li .active {
    @apply text-primaryColor;
  }

  /* Nav items + buttons are too wide for the container between lg and xl+,
     causing an early, unnecessary wrap to a second row. Tighten spacing in
     this range only; below 992px the mobile menu takes over anyway. */
  @media (min-width: 992px) and (max-width: 1399px) {
    .main-menu ul li {
      margin-left: 14px;
    }
    .main-menu ul li a {
      font-size: 13px;
    }
    .main-menu ul li a.theme-btn {
      margin-right: 0;
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  .main-menu ul li:hover > a {
    @apply text-mainColor;
  }

  .main-menu ul li:hover > a:after {
    @apply text-mainColor;
  }

  .main-menu ul li:hover .sub-menu {
    @apply visible top-full opacity-100;
  }

  .main-menu .navbar-collapse li a:hover {
    @apply max-md:text-white max-md:no-underline;
  }

  /* Sub Menu */
  .main-menu ul li .sub-menu {
    @apply invisible absolute right-0 top-full mt-0 min-w-[180px] border-t-[2px] border-black bg-blackColor p-[20px_0px_15px] opacity-0 shadow-lg transition duration-500 ease-in-out;
  }

  .main-menu ul li .sub-menu li {
    @apply relative m-0 block w-full;
  }

  .main-menu ul li .sub-menu li a {
    @apply block px-[25px] py-[5px] text-left text-[13px] font-normal uppercase leading-[20px] text-headingColor transition duration-300;
  }

  .main-menu ul li .sub-menu li:hover > a {
    @apply text-primaryColor;
  }

  .main-menu ul li .sub-menu li > .sub-menu {
    @apply invisible right-[120%] top-2 opacity-0;
  }

  .main-menu ul li .sub-menu li:hover > .sub-menu {
    @apply visible right-full opacity-100;
  }

  /* Side Menu Icon */
  .side-menu-icon i {
    @apply relative top-[5px] cursor-pointer text-[32px] text-mainColor;
  }

  /* Link Style */
  .linkstyle {
    @apply relative cursor-pointer whitespace-nowrap text-lg;
  }

  .linkstyle {
    @apply before:absolute before:left-0 before:top-[90%] before:h-[1px] before:w-full before:origin-[100%_50%] before:scale-x-0 before:bg-mainColor before:transition-transform before:duration-300 before:ease-in-out hover:before:origin-[0%_50%] hover:before:scale-x-100;
  }

  /*----------------------------------------*/
  /*  MEAN MENU CSS START
/*----------------------------------------*/

  /* Tailwind CSS conversion using @apply */

  /* Mean Menu CSS */
  .mean-container a.meanmenu-reveal {
    @apply hidden;
  }

  .mean-container .mean-nav {
    @apply mt-0 bg-transparent;
  }

  .mean-container .mean-bar {
    @apply h-auto bg-transparent p-0;
  }

  .mean-container .mean-nav > ul {
    @apply m-0 block w-full list-none p-0 !important;
  }

  .mean-container a.meanmenu-reveal {
    @apply hidden !important;
  }

  .mean-container .mean-nav ul li a {
    @apply w-full border-t border-[#353535] py-2.5 text-[14px] font-medium leading-[1.5] text-primaryColor;
  }

  .mean-container .mean-nav ul li a:hover {
    @apply text-primaryColor;
  }

  .mean-container .mean-nav ul li a.mean-expand {
    @apply mt-3 h-[30px] w-[30px] border border-[#353535] p-0 text-center font-normal leading-[14px] text-primaryColor;
  }

  .mean-container .mean-nav ul li a.mean-expand:hover {
    @apply border-[#353535];
  }

  .mean-container .mean-nav ul li > a > i {
    @apply hidden;
  }

  .mean-container .mean-nav ul li > a.mean-expand i {
    @apply inline-block;
  }

  .mean-container .mean-nav > ul > li:first-child > a {
    @apply border-t-0;
  }

  .mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
    @apply rotate-[45deg] transform;
  }

  /* Sidebar CSS */
  .sidebar__area {
    @apply fixed right-[-485px] top-0 z-[9999] h-full w-[465px] overflow-y-scroll bg-blackColor transition-all duration-300;

    -ms-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    -o-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  }

  @media (max-width: 575px) {
    .sidebar__area {
      @apply w-[290px];
    }
  }

  .sidebar__area.sidebar-opened {
    @apply right-0;
  }

  .sidebar__area-2 {
    @apply left-[-485px];
  }

  .sidebar__area-2.sidebar-opened {
    @apply left-0;
  }

  .sidebar__wrapper {
    @apply relative p-[45px] lg:bg-primaryColor;
  }

  @media (max-width: 575px) {
    .sidebar__wrapper {
      @apply p-[20px];
    }
  }

  .sidebar__close {
    @apply absolute right-[45px] top-[35px];
  }

  @media (max-width: 575px) {
    .sidebar__close {
      @apply right-[20px] top-[12px];
    }
  }

  .sidebar__close-btn {
    @apply inline-block h-[45px] w-[45px] rounded-full bg-black text-[16px] leading-[49px] text-white;
  }

  .sidebar__close-btn:hover {
    @apply bg-black;
  }

  .sidebar__close-btn-3 {
    @apply bg-[#666];
  }

  .sidebar__close-btn-3:hover {
    @apply bg-[#666];
  }

  /* Body Overlay */

  .body-overlay.opened {
    @apply visible opacity-100;
  }

  /*
* ----------------------------------------------------------------------------------------
* 04.HEADER CSS STYLE
* ----------------------------------------------------------------------------------------
*/

  /* Main Hero Area */
  .main-hero-area {
    @apply bg-primaryColor pt-[110px] max-lg:pt-[130px] md:pt-[115px];
  }

  .hero-content h2 {
    @apply text-center font-medium uppercase text-mainColor;
  }

  .hero-content p {
    @apply text-mainColor;
  }

  .hero-btns {
    @apply mt-[30px];
  }

  .hero-content .hero-btns .read-more {
    @apply mt-[15px] underline;
  }

  .hero-content .dot-shape {
    @apply max-md:left-[3%] max-md:top-[15%];
  }

  .hero-content .dot-shape2 {
    @apply max-md:right-[6%] max-md:top-[58%];
  }

  /* Author Image Part */
  .author-image-part {
    @apply relative z-[1] mx-auto max-w-[575px] overflow-hidden rounded-b-[580px_565px] text-center;
  }

  .author-image-part .bg-circle {
    @apply absolute left-[5%] top-[4%] z-[-2] h-[425px] w-[425px] rounded-full bg-blackColor;
  }

  .author-image-part .progress-shape {
    @apply absolute bottom-0 right-0 z-[-1] w-full text-center;
  }

  /* Hero Counter Area */
  .hero-counter-area {
    @apply mt-[60px] max-md:w-full;
  }

  .counter-item {
    @apply text-center;
  }

  .counter-title {
    @apply text-primaryColor;
  }

  .hero-counter-area .count-text {
    @apply text-center text-3xl font-bold leading-[1] text-primaryColor md:text-[50px];
  }

  .hero-counter-area .count-text.plus:after {
    content: "+";
  }

  .hero-counter-area .count-text.k-plus:after {
    content: "k+";
  }

  .hero-counter-area .count-text.percent:after {
    content: "%+";
  }

  .hero-counter-area .counter-title {
    @apply block max-md:text-sm;
  }

  /* Hero Image */
  .hero-image {
    @apply relative text-center;
  }

  .hero-image img {
    @apply w-[400px] rotate-[10deg] rounded-[20px] border-[3px] border-white text-center transition-all duration-500 max-md:mt-0;
  }

  .hero-image img:hover {
    @apply rotate-0 transition-all duration-500;
  }

  /* Client Reviews */
  .clienti-reviews .clienti-profile {
    @apply m-0 flex list-none p-0 max-md:justify-center;
  }
  .clienti-reviews {
    @apply max-md:mb-10 max-md:text-center;
  }

  .clienti-reviews .clienti-profile li {
    @apply ml-[-15px] h-[60px] w-[60px] flex-none rounded-full;
  }

  .clienti-reviews .clienti-profile li img {
    @apply rounded-full;
  }

  .clienti-reviews .clienti-profile li:first-child {
    @apply ml-0;
  }

  .clienti-reviews .reviews {
    @apply mt-[20px] block text-xl font-medium text-mainColor;
  }

  .clienti-reviews .reviews span {
    @apply text-[#969696];
  }

  .clienti-reviews .reviews p {
    @apply mt-0 text-[16px] md:mt-[20px];
  }

  /*
* ----------------------------------------------------------------------------------------
* 05.ABOUT CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* About Area */
  .about-area {
    @apply pb-[100px] pt-0 md:pt-[100px];
  }

  .hero-content .job {
    @apply mt-0 inline-block bg-[#f5f5f5] px-[30px] py-[12px] md:mt-[10px] lg:p-0 xl:px-[40px] xl:py-[15px];
  }

  .hero-content .job span {
    @apply relative mr-[10px] inline-block pr-[15px];
  }

  .hero-content .job span:last-child {
    @apply m-0 p-0;
  }

  .hero-content .job span:last-child:after {
    @apply hidden;
  }

  .hero-content .job span:after {
    @apply absolute right-0 top-1/2 h-[6px] w-[6px] -translate-y-1/2 transform rounded-full bg-black/15 content-[''];
  }

  /* About Content Part */
  .about-content-part p {
    @apply text-2xl leading-[1.4em] md:text-[30px];
  }

  /* About Image Part */
  .about-image-part {
    @apply rounded-[10px] border border-black/5 pb-[30px] pt-10 text-center md:p-10;
  }

  .about-image-area img {
    @apply w-1/2 text-center;
  }

  .about-image-part img {
    @apply rounded-[10px];
  }

  .about-image-part h2 {
    @apply mt-[30px] text-[30px];
  }

  /* About Content Part H2 */
  .about-content-part h2 {
    @apply mb-5 mt-[30px] text-3xl leading-[72px] md:text-[40px] lg:text-[55px];
  }

  .about-content-part h2 span {
    @apply border border-black/10 px-[20px];
  }

  /* About Social */
  .about-social {
    @apply mt-[30px] md:max-lg:mb-[30px];
  }

  .about-social ul {
    @apply list-none;
  }

  .about-social ul li {
    @apply mr-[15px] inline-block;
  }

  .about-social ul li a {
    @apply rounded border border-black/5 px-[14px] py-[10px] text-xl;
  }

  /* About Image Part Dot Shape */
  .about-image-part .dot-shape {
    @apply absolute left-[-10%] top-[25%] animate-spin;
  }

  /* About Button */
  .about-btn {
    @apply inline-flex rounded-[30px] border border-[#ededee] px-[20px] py-[15px] text-white;
  }

  .about-btn img {
    @apply mr-[15px] rounded-full;
  }

  .about-btn h6 {
    @apply mb-0 mr-[15px] mt-[-5px] font-normal text-[#77777d];
  }

  .about-btn i {
    @apply -rotate-45 transform;
  }

  /* About Counter Part */
  .about-counter-part {
    @apply relative rounded-[10px] bg-mainColor py-[50px] text-center;
  }

  .about-counter-part:before {
    @apply absolute left-1/2 top-0 h-[28px] w-[28px] -translate-y-1/2 rotate-[48deg] transform bg-mainColor content-[''] md:left-[-22px] md:top-1/2;
  }

  .about-counter-part h2 {
    @apply mb-[15px] text-[80px] font-medium leading-[1] tracking-[-2.4px] text-blackColor;
  }

  .about-counter-part p {
    @apply text-[12px] font-bold uppercase leading-[1.5] tracking-[2.4px] text-blackColor;
  }

  /* About Pre-title */
  h2.about-pre-title {
    @apply text-[22px] capitalize text-primaryColor max-md:mb-[30px];
  }

  .single-about-content-part span {
    @apply text-mainColor;
  }

  /*
* ----------------------------------------------------------------------------------------
* 06.SERVICE CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Services Area */
  .services-area {
    @apply bg-primaryColor py-20 md:py-[100px];
  }

  /* Service Item */
  .service-item {
    @apply relative rounded-[20px] border border-borderColor bg-lighterColor px-[40px] py-[60px] transition duration-[0.5s] max-md:mb-[30px];
  }

  .service-item:hover {
    @apply border-primaryColor transition duration-[0.5s];
  }

  .service-item h5 {
    @apply mb-[60px] inline-block rounded-[6px] border px-[10px] py-[4px] font-textFont text-[14px] text-bodyColor transition duration-[0.5s];
  }

  .service-item:hover h5 {
    @apply bg-mainColor text-primaryColor transition duration-[0.5s];
  }

  .service-item p {
    @apply mb-0 text-bodyColor;
  }

  .service-item h4 {
    @apply mb-[20px] mt-[20px] text-[30px] uppercase text-mainColor;
  }

  .service-item i {
    @apply absolute right-[4%] top-[18%] text-[30px] text-mainColor transition duration-[0.5s];
  }

  .service-item:hover i {
    @apply rotate-[45deg];
  }

  .service-item:hover .details-btn {
    @apply bg-primaryColor text-blackColor;
  }

  /*
* ----------------------------------------------------------------------------------------
* 07.SKILL CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Skill Area */
  .skill-area {
    @apply pt-[20px];
  }

  /* Skill Item */
  .skill-item {
    @apply rounded-[14px] border border-borderColor p-[25px] text-center transition duration-[0.5s];
  }

  .skill-item h5 {
    @apply mt-[20px] text-[16px] leading-[19px] text-subtitleColor;
  }

  .skill-item .percent {
    @apply block p-[10px] text-xl font-[600] text-blackColor;
  }

  .skill-item:hover {
    @apply border-primaryColor;
  }

  .skill-item:hover .percent {
    @apply bg-blackColor text-headingColor;
  }

  .extra-skills ul {
    @apply mt-[30px];
  }

  ul.extra-skills li {
    @apply mb-[10px] mr-[20px] inline-block rounded-[12px] border border-borderColor px-[10px] py-[3px];
  }

  ul.extra-skills li i {
    @apply pr-[10px];
  }

  /*
* ----------------------------------------------------------------------------------------
* 08.RESUME CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Resume Area */
  .resume-area {
    @apply bg-primaryColor pb-[100px] pt-[50px] md:pt-[100px];
  }

  /* Resume Wrapper */
  .resume-wrapper {
    @apply relative;
  }

  .resume-wrapper:before {
    content: "";
    @apply absolute left-0 top-0 h-full;
  }

  .resume-wrapper i {
    @apply mb-[30px] block text-[40px] text-primaryColor;
  }

  /* Resume Box */
  .resume-wrapper .resume-box {
    @apply mb-[20px] rounded-[20px] bg-lighterColor p-[60px];
  }

  .resume-box h2 {
    @apply mb-[20px] mt-[20px] text-[30px] uppercase text-mainColor;
  }

  .resume-wrapper .resume-box:last-child {
    @apply mb-0;
  }

  .resume-wrapper .resume-box .resume-date {
    @apply relative mb-[1em] inline-block rounded-[2em] border-2 border-borderColor bg-mainColor p-[5px] text-[10px] font-[500] uppercase tracking-wider text-white duration-100;
  }

  .resume-wrapper .resume-box .resume-date:before {
    content: "";
    @apply absolute left-[-20px] top-1/2 h-[1px] w-[20px] -translate-y-1/2 transform border-t-2 border-mainColor;
  }

  .resume-wrapper .resume-box .resume-date:after {
    content: "";
    @apply absolute left-[-23px] top-1/2 h-[5px] w-[5px] -translate-y-1/2 transform rounded-full bg-mainColor;
  }

  .resume-box p {
    @apply mb-0 mt-[20px] text-[rgb(119,119,125)];
  }

  .resume-box span {
    @apply text-[rgb(119,119,125)];
  }

  .resume-item .content h4 {
    @apply max-md:text-3xl;
  }

  /* Skill Area */
  .skill-area {
    @apply bg-primaryColor pt-[50px] md:pt-[120px];
  }

  /* Skill Item */
  .skill-item {
    @apply rounded-[14px] bg-lighterColor p-[40px] text-center transition duration-[0.5s];
  }

  .skill-item h5 {
    @apply mb-[20px] mt-[20px] text-xl uppercase text-mainColor;
  }

  .skill-item .percent {
    @apply block p-[10px] text-xl font-[600] text-blackColor;
  }

  .skill-item:hover {
    @apply border-primaryColor;
  }

  .skill-item:hover .percent {
    @apply bg-blackColor text-headingColor;
  }

  /* Extra Skills */

  .extra-skills ul {
    @apply mt-[30px];
  }

  ul.extra-skills li {
    @apply mb-[10px] mr-[20px] inline-block rounded-[12px] border-2 border-borderColor px-[10px] py-[3px];
  }

  ul.extra-skills li i {
    @apply pr-[10px];
  }

  /*
* ----------------------------------------------------------------------------------------
* 09.PORTFOLIO CSS STYLE
* ----------------------------------------------------------------------------------------
*/

  /* Projects Area */
  .projects-area {
    @apply pb-20 pt-[50px] md:py-[100px];
  }

  /* Filter */
  .filter ul {
    @apply m-0 p-0;
  }

  .filter ul li {
    @apply relative mx-[7px] mb-[10px] inline-block cursor-pointer rounded-[2em] border-dashed border-black px-[1em] py-[0.5em] text-[0.9em] text-black transition duration-100;
    font-family: "Roboto Mono", monospace;
  }

  .filter ul li:hover,
  .filter ul li.mixitup-control-active {
    @apply bg-black text-white;
  }

  .theme-dark .filter ul li {
    @apply border-white text-white;
  }

  .theme-dark .filter ul li:hover,
  .theme-dark .filter ul li.mixitup-control-active {
    @apply bg-white text-black;
  }

  /* Portfolio Box */
  .portfolio-box {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    overflow: hidden;
    border-radius: 0.5em;
  }

  .portfolio-box:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    background-image: -webkit-linear-gradient(
      bottom,
      rgba(0, 0, 0, 0.3),
      transparent
    );
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
    width: 100%;
    height: 100%;
    -webkit-transition: ease-out 0.16s;
    transition: ease-out 0.16s;
  }

  .portfolio-box img {
    -webkit-transform: scale(1);
    transform: scale(1);
    width: 100%;
    -webkit-transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: -webkit-transform 0.4s
      cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition:
      transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
      -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .portfolio-box .portfolio-category {
    @apply absolute right-4 top-4 inline-block rounded-[2em] bg-[rgba(0,0,0,0.2)] px-[1em] py-[0.5em] text-[0.9em] font-normal uppercase tracking-[5px] text-white;

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .portfolio-box .portfolio-caption {
    @apply invisible absolute bottom-0 left-0 right-0 z-[100] mb-[-6px] px-[30px] pb-6 opacity-0 transition duration-500 ease-out;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  .portfolio-box .portfolio-caption * {
    @apply m-0 text-[30px] font-[500] uppercase tracking-[0.5px] text-white transition duration-[0.06s];
  }

  .portfolio-box .portfolio-caption *:hover {
    text-shadow: 0 0 white;
  }

  .portfolio-box:hover:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }

  .portfolio-box:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-filter: blur(1.5px);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="1.5" /></filter></svg>#filter');
    filter: blur(1.5px);
  }

  .portfolio-box:hover .portfolio-caption {
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    margin-bottom: 0;
  }

  /* Single Project Page */
  .single-project-page-right,
  .single-project-page-left {
    @apply border border-[rgba(0,0,0,0.05)];
  }

  .single-project-page-design {
    @apply pt-[30px];
  }

  .single-project-image img {
    @apply w-full;
  }

  .single-info h3 {
    @apply text-xl;
  }

  .single-image {
    @apply mb-[30px];
  }

  .single-info {
    @apply pb-[30px];
  }

  .single-info:last-child {
    @apply pb-0;
  }

  .single-info p {
    @apply mb-0;
  }

  .project-image {
    @apply mb-[45px];
  }

  .single-project-item {
    @apply border border-borderColor p-[30px];
  }
  .single-service-information-wrap .title {
    @apply max-xl:pb-0 max-xl:text-3xl;
  }

  .project-item.style-two .project-content h3 {
    @apply max-xl:text-xl max-xl:text-white;
  }
  /*
* ----------------------------------------------------------------------------------------
* 10.TESTIMONIALS CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Testimonials Area */
  .testimonials-area {
    @apply bg-primaryColor py-20 md:py-[100px];
  }

  /* Testimonial Item */
  .testimonial-item {
    @apply mb-[30px] rounded-[16px] border border-borderColor bg-lighterColor p-[20px] transition duration-500;
  }

  .testimonial-item .author {
    @apply mb-[25px] inline-block;
  }

  .testimonial-item .author img {
    @apply inline-block h-[60px] w-[60px] rounded-full;
  }

  .testimonial-item .text {
    @apply mb-[30px] text-[rgb(119,119,125)];
  }

  .testimonial-item .testi-des h5 {
    @apply mb-0 mt-[20px] text-[30px] uppercase text-mainColor;
  }

  .testimonial-item .testi-des span {
    @apply mb-0 text-[14px] leading-[22px] text-[rgb(119,119,125)];
  }

  .testimonial-item:hover {
    @apply border border-mainColor;
  }

  .testimonial-item:hover .author:before {
    @apply bg-primaryColor text-black;
  }

  /* Testimonials Wrap */
  .testimonials-wrap {
    @apply -mx-[15px];
  }

  .testimonials-wrap .testimonial-item {
    @apply mx-[15px];
  }

  /*
* ----------------------------------------------------------------------------------------
* 11.PRICING CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Pricing Area */
  .pricing-area {
    @apply py-[50px] md:py-[100px];
  }

  /* Pricing Item */
  .pricing-item {
    @apply mb-[30px] rounded-[16px] border border-borderColor p-[10px];
  }

  /* Pricing Header */
  .pricing-item .pricing-header {
    @apply rounded-[16px] border border-borderColor p-[20px];
  }

  .pricing-header h4.title {
    @apply my-[12px] pb-[20px] text-[40px] uppercase leading-[49px] text-subtitleColor;
  }

  .pricing-item .pricing-header .save-percent {
    @apply mb-[20px] text-xl leading-[27px] text-[rgb(119,119,125)];
  }

  .pricing-item .pricing-header .save-percent span {
    @apply text-primaryColor;
  }

  .pricing-item .pricing-header .price {
    @apply text-[38px] font-medium text-primaryColor;
  }

  .pricing-item .pricing-header .price:before {
    content: "$";
  }

  .pricing-item .pricing-header .price:after {
    @apply text-[16px] font-normal text-mainColor;
    content: "/Hour";
  }

  /* Pricing Details */
  .pricing-item .pricing-details {
    @apply p-[20px];
  }

  .pricing-item .pricing-details p {
    @apply mb-[35px];
  }

  .pricing-item .pricing-details ul {
    @apply pb-[12px];
  }

  .pricing-item .pricing-details ul li {
    @apply mb-[10px];
  }

  .pricing-item .pricing-details ul li i {
    @apply pr-[10px];
  }

  .pricing-item .pricing-details ul li.unable {
    @apply text-[rgb(119,119,125)] opacity-35; /* Note: Tailwind does not have direct support for MS filters */
  }

  .pricing-item .pricing-details ul li.unable:before {
    @apply text-white;
  }

  /*
* ----------------------------------------------------------------------------------------
* 12.CLIENTS CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Client Logo Area */
  .client-logo-area {
    @apply pt-50px md:pt-[20px];
  }

  /* Client Logo Wrap */
  .client-logo-wrap {
    @apply mx-[-30px] flex flex-wrap items-center justify-between;
  }

  /* Client Logo Item */
  .client-logo-wrap .client-logo-item {
    @apply mx-[30px] mb-[10px] w-[calc(20%-60px)];
  }

  /*
* ----------------------------------------------------------------------------------------
* 13.CONTACT CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  .contact-area {
    @apply bg-primaryColor py-20 md:py-[100px];
  }
  .contact-form-area {
    @apply rounded-[10px] border border-borderColor bg-lighterColor pb-[20px] pl-[40px] pr-[30px] pt-[50px];
  }

  .contact-form-area .form-group .input-icon-wrap {
    @apply relative;
  }

  .contact-form-area .form-group .for-icon {
    @apply absolute right-[26px] top-1/2 mt-0 -translate-y-1/2 text-base text-mainColor;
  }

  .contact-form-area .form-group .form-control {
    @apply rounded-[10px] border border-solid border-blackColor bg-transparent px-5 py-[18px] text-base font-normal leading-[1.3] text-mainColor;
  }

  .contact-form-area .form-group input[type="text"] {
    @apply text-mainColor;
  }

  .contact-form-area .form-group .form-control:focus {
    @apply border border-mainColor bg-transparent;
  }

  .contact-form-area .form-group label {
    @apply mb-[18px] text-base uppercase text-mainColor;
  }

  .contact-form-area .form-group .nice-select .current {
    @apply text-[rgba(255,255,255,0.2)];
  }

  .contact-form-area .form-group .nice-select:focus .current {
    @apply text-white;
  }

  .contact-form-area .form-group .nice-select:focus:after {
    @apply border-[white];
  }

  .contact-form-area .form-group .nice-select .list {
    @apply bg-black text-blackColor;
  }

  .contact-form-area .form-group .nice-select .option.focus,
  .contact-form-area .form-group .nice-select .option.selected.focus,
  .contact-form-area .form-group .nice-select .option:hover {
    @apply bg-headingColor;
  }

  .contact-form-area .form-group .nice-select:after {
    @apply absolute right-[26px] mt-[-6px] border-[rgba(255,255,255,0.2)];
  }

  .contact-icon {
    @apply pb-[1px];
  }

  .circle-btn i {
    @apply text-[30px] text-blackColor;
  }

  .single-contact {
    @apply pb-[20px];
  }

  .single-contact p {
    @apply text-[rgb(119,119,125)];
  }

  .single-contact h2 {
    @apply mb-[5px] mt-[15px] text-[20px] font-normal uppercase text-mainColor transition-all duration-300;
  }

  .contact-content-part {
    @apply rounded-[10px] border border-borderColor bg-lighterColor p-[50px] pb-[20px] pl-[40px] pr-[30px] pt-[50px] max-md:mb-[30px];
  }

  .contact-page-content h6 {
    @apply mb-[22px] text-[18px] text-[rgb(119,119,125)];
  }

  .contact-page-content .social-style-one a {
    @apply text-lighbg-lighterColor h-[40px] w-[40px] leading-[40px];
  }

  .contact-page-content .social-style-one a:not(:hover) {
    @apply bg-white;
  }

  .contact-page-form {
    @apply rounded-[14px] border border-borderColor bg-lighterColor p-[45px] pb-[50px] pr-[50px] pt-[45px];
  }

  .contact-page-form .form-group .nice-select,
  .contact-page-form .form-group .form-control {
    @apply bg-[rgba(255,255,255,0.07)];
  }

  /* Location Map */
  .our-location iframe {
    @apply h-[600px];
  }

  /* Input States */
  .input-success,
  .input-error {
    @apply mb-0 mt-[10px] hidden rounded-[4px];
  }

  .input-success {
    @apply border-[1px] border-[#01b500];
  }

  .input-error {
    @apply border-[1px] border-[#ff0000];
  }

  .has-error .help-block.with-errors {
    @apply mt-[5px] text-red-600;
  }

  /* AJAX contact form (home page) fills this in without adding .has-error
     to the parent, so style it directly to avoid invisible/white text. */
  .help-block.with-errors:not(:empty) {
    @apply mt-[5px] text-red-600;
  }

  /* Message Submission */
  #msgSubmit.h4 {
    @apply mb-0 mt-[10px] text-[20px];
  }
  /*
* ----------------------------------------------------------------------------------------
* 14.FOOTER CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* Main Footer */
  .main-footer {
    @apply bg-primaryColor px-0 max-md:py-[50px];
  }

  /* Copy Left Text */
  p.copy-left-text {
    @apply text-center text-[12px] font-light leading-[20px] text-mainColor max-md:mt-[60px] md:text-left;
  }

  /* Copy Right Text */
  p.copy-right-text {
    @apply text-center text-[12px] font-light leading-[20px] text-mainColor md:text-right;
  }

  /* Footer Top */
  .footer-top {
    @apply pb-[50px] pt-[10px] md:pb-[100px] md:pt-[100px];
  }

  .footer-top h2 {
    @apply text-center font-bold uppercase leading-[1em] text-mainColor;
  }

  .footer-top p {
    @apply text-center text-xl text-mainColor;
  }

  /* Main Container styles */
  .container {
    @apply mx-auto max-sm:max-w-[90%] sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px] xxl:max-w-[1296px];
  }

  .progress-wrap {
    @apply invisible translate-y-5 opacity-0 duration-500;
    mix-blend-mode: difference;
  }
  .progress-wrap.active-progress {
    @apply visible translate-y-0 opacity-100;
  }

  /*----------------------------------------*/
  /* BLOG CSS START
/*----------------------------------------*/
  .blog-page-area {
    @apply bg-blackColor py-24;
  }

  .blog_sidebar__wrapper {
    @apply pl-0 max-lg:pl-0 md:pl-10;
  }

  .postbox__title a {
    @apply text-[30px] uppercase;
  }

  .postbox__title a:hover {
    @apply text-blackColor;
  }

  .blog__section-title-7 .section__title-wrapper-7 > p {
    @apply text-[20px] leading-[1.5] text-[#525258];
  }

  .postbox__video .play-btn {
    @apply absolute left-[45%] top-[40%] -translate-x-1/2 -translate-y-1/2 transform;
  }

  .postbox__video .play-btn:hover {
    @apply bg-blackColor text-headingColor;
  }

  .pulse-btn {
    @apply inline-block h-[80px] w-[80px] animate-pulse rounded-full bg-headingColor text-center leading-[80px] text-blackColor;
  }

  .pulse-btn:hover {
    @apply bg-blackColor text-headingColor;
  }

  .tp-pagination ul li a:hover,
  .tp-pagination ul li a.current,
  .tp-pagination ul li span:hover,
  .tp-pagination ul li span.current {
    @apply border-primaryColor bg-[#333] text-white shadow-sm;
  }

  .tp-pagination-style-2 ul li a,
  .tp-pagination-style-2 ul li span {
    @apply border border-[#EAEAEF] leading-[42px] shadow-none;
  }

  .tp-pagination ul li a.page-numbers {
    @apply px-[19px] py-[12px] leading-[1.2];
  }

  .tp-pagination ul li a,
  .tp-pagination ul li span {
    @apply flex min-h-[44px] min-w-[44px] items-center justify-center gap-2 bg-primaryColor text-center text-[16px] font-medium leading-[20px] text-blackColor shadow-sm;
  }

  .tp-pagination ul li {
    @apply mb-5 inline-block;
  }

  .tp-pagination ul li:not(:last-child) {
    @apply mr-px;
  }

  .postbox__breadcrumb {
    @apply mb-[72px];
  }

  .postbox__main-wrapper p {
    @apply mb-[17px] text-[16px] leading-[1.75];
  }

  .postbox__category {
    @apply mb-[5px];
  }

  .postbox__category a {
    @apply bg-tpTheme1 inline-block px-[12px] py-[5px] text-[15px] font-medium leading-none text-white;
  }

  .postbox__category a:hover {
    @apply bg-blackColor text-white;
  }

  .postbox__title {
    @apply mb-[20px] text-[38px];
  }

  .postbox__title {
    @apply lg:max-xl:text-[35px];
  }
  .postbox__title {
    @apply md:max-lg:text-[35px];
  }

  .postbox__title {
    @apply sm:max-md:text-[30px];
  }

  .postbox__title {
    @apply max-sm:text-[25px];
  }

  .postbox__meta {
    @apply mb-[7px];
  }

  .postbox__meta a:hover {
    @apply text-blackColor;
  }

  .postbox__meta-wrapper {
    @apply mb-[10px] text-left;
  }

  [dir="rtl"] .postbox__meta-wrapper {
    @apply text-right;
  }

  .postbox__meta-author-thumb img {
    @apply mr-[12px] h-[50px] w-[50px] rounded-full;
  }

  [dir="rtl"] .postbox__meta-author-thumb img {
    @apply ml-[12px] mr-0;
  }

  .postbox__meta-item {
    @apply mr-[47px];
  }

  [dir="rtl"] .postbox__meta-item {
    @apply ml-[47px];
  }

  .postbox__meta-item {
    @apply lg:max-xl:mr-[40px];
  }
  [dir="rtl"] .postbox__meta-item {
    @apply lg:max-xl:ml-[40px];
  }

  .postbox__meta-item {
    @apply sm:max-md:mr-[35px];
  }
  [dir="rtl"] .postbox__meta-item {
    @apply sm:max-md:ml-[35px];
  }

  .postbox__meta-item {
    @apply max-sm:mr-[25px];
  }
  [dir="rtl"] .postbox__meta-item {
    @apply max-sm:ml-[25px];
  }
  .postbox__meta-item:last-child {
    @apply mr-0;
  }

  [dir="rtl"] .postbox__meta-item:last-child {
    @apply ml-0;
  }

  .postbox__meta-type {
    @apply text-[14px] leading-none text-[#6B6B7B];
  }

  p.postbox__meta-name {
    @apply mb-[4px] text-[15px] font-medium leading-none text-blackColor;
  }

  .postbox__meta span {
    @apply mb-[5px] mr-[30px] inline-block text-[14px] font-medium;
  }

  .postbox__meta span:last-child {
    @apply mr-0;
  }

  [dir="rtl"] .postbox__meta span:last-child {
    @apply ml-0;
  }

  .postbox__meta span svg,
  .postbox__meta span i {
    @apply mr-[5px];
  }

  [dir="rtl"] .postbox__meta span svg,
  [dir="rtl"] .postbox__meta span i {
    @apply ml-[5px] mr-0;
  }

  .postbox__meta span svg {
    @apply translate-y-[-2px] transform;
  }

  .postbox__meta span svg path {
    @apply stroke-blackColor;
  }

  .postbox__meta span i {
    @apply text-blackColor;
  }

  .postbox__meta span a:hover {
    @apply text-blackColor;
  }

  .postbox__details-title {
    @apply mb-[35px] text-[30px] uppercase leading-[1.27] tracking-[-0.02em];
  }

  .postbox__details-title {
    @apply max-sm:text-[25px];
  }

  .postbox__details-title br {
    @apply max-xl:hidden;
  }

  .postbox__details-title-2 {
    @apply text-blackColorSolid mb-[20px] text-[40px] leading-none tracking-[-0.04em];
  }

  .postbox__details-title-3 {
    @apply text-blackColorSolid text-[22px] leading-[1.27] tracking-[-0.02em];
  }

  .postbox__details-social a {
    @apply mb-[8px] mr-[6px] inline-block h-[40px] w-[40px] rounded-full border border-[#DDDDE3] text-center leading-[36px] text-blackColor;
  }

  [dir="rtl"] .postbox__details-social a {
    @apply ml-[6px] mr-0;
  }

  .postbox__details-social a:hover {
    @apply bg-tpTheme1 border-tpTheme1 text-white;
  }

  .postbox__details-social ul li {
    @apply list-none;
  }

  .postbox__details-social ul li a {
    @apply inline-block h-[40px] w-[40px] border border-[#DDDDE3] text-center leading-[38px] text-blackColor;
  }

  .postbox__details-social ul li a:hover {
    @apply bg-tpTheme1 border-tpTheme1 text-white;
  }

  .postbox__details-content {
    @apply mb-[35px] mt-[50px] border-t border-[#EAEAEF] pt-[52px];
  }

  .postbox__details-content p {
    @apply pr-[15px];
  }

  [dir="rtl"] .postbox__details-content p {
    @apply pl-[15px] pr-0;
  }

  .postbox__img-caption {
    @apply mt-[18px] text-center text-[13px] font-normal text-[#6B6B7B];
  }

  .postbox__img-caption a {
    @apply font-medium text-blackColor;
  }

  .postbox__features {
    @apply mb-[30px];
  }

  .postbox__features-title {
    @apply mb-[15px] text-[34px] uppercase leading-none tracking-[-0.02em];
  }

  .postbox__features p {
    @apply mb-[30px];
  }

  .postbox__features ul li {
    @apply relative list-none pl-[15px] text-[16px] leading-[2] text-white;
  }

  [dir="rtl"] .postbox__features ul li {
    @apply pl-0 pr-[15px];
  }

  /* new post commet */
  [dir="rtl"] .postbox__features ul li::after {
    @apply right-0;
  }

  .postbox__features-2 {
    @apply mb-6 mt-6;
  }

  .postbox__more-menu span {
    @apply inline-block h-12 w-12 rounded-full border border-black border-opacity-20 text-center leading-[46px];
  }

  .postbox__more-menu span svg {
    @apply -translate-y-px;
  }

  .postbox__more-menu span:hover {
    @apply bg-tp-theme-1 border-tp-theme-1 text-white;
  }

  .postbox__more-navigation {
    @apply shadow-opacity-6 mt-12 p-8 shadow-sm;
  }

  .postbox__more-navigation-2 {
    @apply p-10 pb-6 pt-6;
  }

  .postbox__more-icon a {
    @apply mr-4 text-lg;
  }

  [dir="rtl"] .postbox__more-icon a {
    @apply ml-4 mr-0;
  }

  .postbox__more-icon a svg {
    @apply -translate-y-[2px];
  }

  .postbox__more-icon a:hover {
    @apply text-tp-theme-1;
  }

  .postbox__more-content p {
    @apply mb-1 text-xs font-medium uppercase leading-tight tracking-widest text-gray-500;
  }

  .postbox__more-content p a:hover {
    @apply text-tp-theme-1;
  }

  .postbox__more-content h4 {
    @apply mb-0 text-lg leading-tight tracking-tight;
  }

  .postbox__more-content h4 a:hover {
    @apply text-tp-theme-1;
  }

  .postbox__more-right {
    @apply text-right;
  }

  [dir="rtl"] .postbox__more-right {
    @apply text-left;
  }

  .postbox__author {
    @apply p-8 pr-16;
  }

  [dir="rtl"] .postbox__author {
    @apply pl-16 pr-8;
  }

  @media (min-width: 576px) and (max-width: 767px) {
    .postbox__author {
      @apply pr-9;
    }
    [dir="rtl"] .postbox__author {
      @apply pl-9 pr-0;
    }
  }

  @media (max-width: 575px) {
    .postbox__author {
      @apply pr-8;
    }
    [dir="rtl"] .postbox__author {
      @apply pl-8 pr-0;
    }
  }

  .postbox__author-thumb img {
    @apply mr-6 h-16 w-16 rounded-full;
  }

  [dir="rtl"] .postbox__author-thumb img {
    @apply ml-6 mr-0;
  }

  .postbox__author-title {
    @apply font-inter text-lg font-semibold;
  }

  .postbox__author-content p {
    @apply mb-5 text-sm leading-relaxed;
  }

  .postbox__author-social a {
    @apply mr-1 inline-block h-9 w-9 border border-gray-300 text-center leading-8;
  }

  [dir="rtl"] .postbox__author-social a {
    @apply ml-1 mr-0;
  }

  .postbox__author-social a:last-child {
    @apply mr-0;
  }

  [dir="rtl"] .postbox__author-social a:last-child {
    @apply ml-0;
  }

  .postbox__author-social a:hover {
    @apply bg-tp-theme-1 border-tp-theme-1 text-white;
  }

  .postbox__author-2 {
    @apply border-tp-common-black border pb-12;
  }

  .postbox__comment ul li {
    @apply mb-5 list-none;
  }

  .postbox__comment ul.children {
    @apply ml-24 mt-5;
  }

  [dir="rtl"] .postbox__comment ul.children {
    @apply ml-0 mr-24;
  }

  @media (min-width: 576px) and (max-width: 767px) {
    .postbox__comment ul.children {
      @apply ml-10;
    }
    [dir="rtl"] .postbox__comment ul.children {
      @apply ml-0 mr-10;
    }
  }

  @media (max-width: 575px) {
    .postbox__comment ul.children {
      @apply ml-4;
    }
    [dir="rtl"] .postbox__comment ul.children {
      @apply mx-4;
    }
  }

  .postbox__comment-form-title {
    @apply mb-2.5 text-4xl uppercase leading-tight tracking-tight;
  }

  .postbox__comment-form p {
    @apply mb-12 text-sm leading-tight;
  }

  .postbox__comment-input {
    @apply relative mb-5;
  }

  .postbox__comment-input span {
    @apply mb-3 block font-semibold;
  }

  .postbox__comment-input input,
  .postbox__comment-input textarea {
    @apply w-full border-blackColor border-opacity-60 bg-primaryColor p-6 text-sm text-blackColor shadow-sm;
  }

  .postbox__comment-input textarea {
    @apply resize-none pb-6 pt-6;
  }

  .postbox__comment-title {
    @apply mb-9 text-4xl uppercase leading-tight tracking-tight;
  }

  .postbox__comment-box {
    @apply bg-primaryColor p-8 pb-8 pr-20 shadow-sm;
  }

  [dir="rtl"] .postbox__comment-box {
    @apply pl-20 pr-0;
  }

  @media (min-width: 992px) and (max-width: 1199px),
    (min-width: 576px) and (max-width: 767px) {
    .postbox__comment-box {
      @apply pr-9;
    }
    [dir="rtl"] .postbox__comment-box {
      @apply pl-9 pr-0;
    }
  }

  @media (max-width: 575px) {
    .postbox__comment-box {
      @apply pr-9;
    }
    [dir="rtl"] .postbox__comment-box {
      @apply pl-9 pr-0;
    }
  }

  .postbox__comment-info {
    @apply flex-shrink-0;
  }

  .postbox__comment-avater img {
    @apply mr-5 h-20 w-20;
  }

  [dir="rtl"] .postbox__comment-avater img {
    @apply ml-5 mr-0;
  }

  .postbox__comment-name {
    @apply mb-1;
  }

  .postbox__comment-name h5 {
    @apply mb-2.5 text-lg leading-tight;
  }

  .postbox__comment-text p {
    @apply mb-5 text-base leading-relaxed text-bodyColor;
  }

  .postbox__comment-reply a {
    @apply inline-block border border-black px-4 py-1.5 text-sm font-medium leading-tight tracking-tight text-black;
  }

  .postbox__comment-reply a:hover {
    @apply bg-black text-headingColor;
  }

  .postbox__comment-agree {
    @apply pl-1;
  }

  [dir="rtl"] .postbox__comment-agree {
    @apply pl-0 pr-1 text-white;
  }

  .postbox__comment-agree input {
    @apply m-0 block size-[18px] appearance-none border border-gray-200 bg-gray-100 shadow-none outline-none;
    @apply -translate-y-0.5;
  }

  .postbox__comment-agree input:checked {
    @apply relative border-transparent bg-primaryColor;
  }

  /* new post commet */

  .postbox__quote {
    margin-top: 40px;
    text-align: center;
    background-color: var(--tp-common-white);
    box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1);
  }
  .postbox__quote-icon span {
    font-size: 34px;
    display: inline-block;
    color: #000;
    margin-bottom: 9px;
  }
  .postbox__quote p {
    @apply text-center text-[22px] font-medium text-blackColor;

    line-height: 1.36;
    letter-spacing: -0.02em;
  }
  .postbox__quote blockquote {
    @apply mb-11 bg-primaryColor;
    padding: 32px 60px 35px;
  }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .postbox__quote blockquote {
      padding-left: 40px;
      padding-right: 40px;
    }
  }
  @media (max-width: 575px) {
    .postbox__quote blockquote {
      padding-left: 30px;
      padding-right: 30px;
    }
  }

  .postbox__features ul li::after {
    @apply absolute left-0 top-1/2 h-[5px] w-[5px] -translate-y-1/2 transform rounded-full bg-headingColor content-[""];
  }

  .postbox__share span {
    @apply mr-[12px] text-[14px] font-bold;
  }
  [dir="rtl"] .postbox__share span {
    @apply ml-0 mr-[12px];
  }
  .postbox__share a {
    @apply mb-[6px] inline-block h-[36px] w-[36px] bg-primaryColor text-center leading-[36px] text-blackColor shadow-[0px_1px_3px_rgba(3,4,28,0.1)];
  }
  .postbox__share a:hover {
    @apply bg-headingColor;
  }
  .postbox__share-2 a {
    @apply mr-[1px] border border-[#eaeaef] leading-[34px] shadow-none;
  }
  [dir="rtl"] .postbox__share-2 a {
    @apply ml-[1px] mr-0;
  }
  .postbox__thumb-overlay {
    @apply relative;
  }
  .postbox__thumb-overlay::after {
    @apply absolute inset-0 bg-[rgba(3,4,28,0.3)];
  }
  .postbox__content {
    @apply bg-primaryColor p-[43px_50px_45px];
  }
  .postbox__content {
    @apply max-sm:p-[33px_28px_35px];
  }
  .postbox__content p {
    @apply mb-[30px] text-[#777777];
  }
  .postbox__content .tp-btn {
    @apply px-[40px] py-[17px] text-[16px] font-normal tracking-normal;
  }

  .postbox__audio {
    @apply h-[420px];
  }
  .postbox__audio iframe {
    @apply h-full w-full;
  }
  .postbox__nav button {
    @apply absolute left-[15px] top-1/2 z-[1] h-[50px] w-[50px] -translate-y-1/2 transform border border-[rgba(255,255,255,0.7)] bg-transparent text-center text-[18px] leading-[48px];
  }

  .postbox__nav button.postbox-slider-button-next {
    @apply left-auto right-[15px];
  }
  [dir="rtl"] .postbox__nav button.postbox-slider-button-next {
    @apply left-[15px] right-auto;
  }
  .postbox__style-2 .postbox__top {
    @apply relative z-[1] pb-[150px] pt-[185px] text-center;
  }
  .postbox__style-2 .postbox__title {
    @apply mb-[27px] text-[70px];
  }
  .postbox__style-2 .postbox__title {
    @apply lg:max-xl:text-[50px];
  }
  .postbox__style-2 .postbox__title {
    @apply md:text-[45px];
  }
  .postbox__style-2 .postbox__title {
    @apply sm:text-[40px];
  }
  .postbox__style-2 .postbox__title {
    @apply max-sm:text-[30px];
  }
  .postbox__style-2 .postbox__thumb {
    @apply absolute left-0 top-0 -z-10 h-full w-full bg-cover bg-center bg-no-repeat;
  }
  .postbox__style-2 .postbox__meta-type {
    @apply text-white/[0.7607843137];
  }
  .postbox__style-2 p.postbox__meta-name {
    @apply text-[var(--tp-common-white)];
  }

  .rc__post {
    @apply mb-1.5 bg-primaryColor p-3 pr-9 shadow-[0px_1px_3px_rgba(3,4,28,0.06)] transition duration-500;
  }
  [dir="rtl"] .rc__post {
    @apply pl-9 pr-3;
  }
  .rc__post:hover .rc__post-thumb img {
    @apply scale-110 transition duration-500;
  }
  .rc__post:last-child {
    @apply mb-0;
  }
  .rc__post-thumb {
    @apply mr-6 flex-none overflow-hidden;
  }
  [dir="rtl"] .rc__post-thumb {
    @apply ml-6 mr-0;
  }
  .rc__post-thumb img {
    @apply h-[90px] w-[90px] object-cover;
  }
  .rc__post-title {
    @apply text-base leading-tight;
  }
  .rc__post-title a:hover {
    @apply text-blackColor;
  }
  .rc__meta span {
    @apply text-sm text-[#333];
  }
  .rc__meta span svg,
  .rc__meta span i {
    @apply mr-1.5;
  }
  [dir="rtl"] .rc__meta span svg,
  [dir="rtl"] .rc__meta span i {
    @apply ml-1.5 mr-0;
  }
  .rc__meta span svg {
    @apply -translate-y-0.5;
  }
  .rc__meta span:hover a {
    @apply text-[var(--tp-theme-1)];
  }

  .sidebar__wrapper {
    @apply overflow-hidden lg:max-xl:pl-0;
  }
  [dir="rtl"] .sidebar__wrapper {
    @apply lg:max-xl:pr-0;
  }

  .sidebar__wrapper {
    @apply max-lg:pl-0;
  }
  [dir="rtl"] .sidebar__wrapper {
    @apply max-lg:pr-0;
  }
  .sidebar__widget-title {
    @apply relative mb-[23px] inline-block text-3xl font-medium uppercase;
  }
  .sidebar__widget ul li {
    @apply mb-1.5 list-none text-xs font-medium;
  }
  .sidebar__widget ul li:last-child {
    @apply mb-0;
  }
  .sidebar__widget ul li a {
    @apply relative block bg-primaryColor py-[7px] pl-[33px] pr-[14px] text-sm font-medium text-blackColor shadow-[0px_1px_3px_rgba(3,4,28,0.06)];
  }
  [dir="rtl"] .sidebar__widget ul li a {
    @apply pl-[14px] pr-[33px];
  }
  .sidebar__widget ul li a::after {
    @apply absolute left-5 top-1/2 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full text-blackColor content-[''];
  }
  [dir="rtl"] .sidebar__widget ul li a::after {
    @apply left-auto right-5;
  }
  .sidebar__widget ul li a span {
    @apply float-right mt-0.5 inline-block rounded-full border border-[#333] px-[11px] py-1 text-xs font-medium leading-none text-blackColor;
  }
  [dir="rtl"] .sidebar__widget ul li a span {
    @apply float-left;
  }
  .sidebar__widget ul li a:hover {
    @apply bg-headingColor;
  }

  /* Active category: the "active" class is rendered on the <li>, not the
     <a>, so give it a solid dark background with white text (matching
     .theme-btn) instead of the invisible bg-primaryColor/text-blackColor
     combo it would otherwise inherit. */
  .sidebar__widget ul li.active a {
    @apply bg-mainColor text-white;
  }
  .sidebar__widget ul li.active a::after {
    @apply text-white;
  }

  .sidebar__widget ul li:hover {
    @apply text-[var(--tp-common-white)];
  }
  .sidebar__widget ul li ul {
    @apply pl-[15px] pt-1.5;
  }
  [dir="rtl"] .sidebar__widget ul li ul {
    @apply pl-0 pr-[15px];
  }
  .sidebar__widget-style-2 ul li a {
    @apply border border-[#eaeaef] shadow-none;
  }
  .sidebar__widget-style-2 ul li a:hover {
    @apply;
  }
  .sidebar__widget-style-2 .sidebar__author {
    @apply border border-[#eaeaef] shadow-none;
  }
  .sidebar__widget-style-2 .sidebar__search input {
    @apply border border-[#eaeaef] shadow-none;
  }
  .sidebar__widget-style-2 .sidebar__search input:focus,
  .sidebar__widget-style-2 .sidebar__search input:hover {
    @apply border-[var(--tp-common-black)];
  }
  .sidebar__widget-style-2 .sidebar__search button {
    @apply bg-transparent;
  }
  .sidebar__widget-style-2 .rc__post {
    @apply border border-[#eaeaef] bg-[var(--tp-common-white)] shadow-none;
  }
  .sidebar__widget-style-2 .tagcloud a {
    @apply border border-[#eaeaef] shadow-none;
  }

  .sidebar__search {
    @apply relative;
  }
  .sidebar__search input {
    @apply h-[60px] w-full border-0 bg-primaryColor pl-[25px] pr-[50px] text-sm leading-[60px] shadow-[0px_1px_3px_rgba(3,4,28,0.06)] outline-none;
  }
  [dir="rtl"] .sidebar__search input {
    @apply pl-[50px] pr-[25px];
  }
  .sidebar__search input::placeholder {
    @apply text-sm tracking-[-0.02em] text-[#333];
  }
  .sidebar__search button {
    @apply absolute right-0 top-0 h-full bg-primaryColor px-6 leading-[60px] text-blackColor;
  }
  [dir="rtl"] .sidebar__search button {
    @apply left-0 right-auto;
  }
  .sidebar__search button svg {
    @apply -translate-y-0.5;
  }
  .sidebar__search button:hover {
    @apply text-[var(--tp-theme-1)];
  }
  .sidebar__banner::after {
    @apply absolute left-0 top-0 h-full w-full bg-black/50 content-[''];
  }
  [dir="rtl"] .sidebar__banner::after {
    @apply left-auto right-0;
  }
  .sidebar__banner-content {
    @apply absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2 bg-[var(--tp-common-white)];
  }
  .sidebar__banner-content h4 {
    @apply mb-0 px-5 py-[15px] text-2xl uppercase;
  }
  .sidebar__author {
    @apply bg-primaryColor px-[50px] py-[45px] text-center shadow-[0px_1px_3px_rgba(3,4,28,0.06)];
  }
  .sidebar__author-thumb {
    @apply mb-[25px];
  }
  .sidebar__author-thumb img {
    @apply h-36 w-36 rounded-full border border-[#e0e0e0] p-3;
  }
  .sidebar__author-title {
    @apply mb-5 mt-5 text-3xl uppercase text-mainColor;
  }
  .sidebar__author-content p {
    @apply mb-[22px] text-sm leading-[1.47] text-[rgb(119,119,125)];
  }
  .sidebar__author-social a {
    @apply mr-[3px] inline-block h-10 w-10 border border-[rgb(119,119,125)] text-center leading-[38px] text-blackColor;
  }
  [dir="rtl"] .sidebar__author-social a {
    @apply ml-[3px] mr-0;
  }
  .sidebar__author-social a:last-child {
    @apply mr-0;
  }
  [dir="rtl"] .sidebar__author-social a:last-child {
    @apply ml-0;
  }
  .sidebar__author-social a:hover {
    @apply border-headingColor bg-headingColor text-blackColor;
  }

  .tagcloud span {
    @apply mr-3 text-sm font-bold;
  }
  [dir="rtl"] .tagcloud span {
    @apply ml-3 mr-0;
  }
  .tagcloud a {
    @apply mb-1.5 mr-0.5 inline-block bg-primaryColor px-[18.5px] py-[9px] text-sm font-medium capitalize leading-none text-blackColor shadow-[0px_1px_3px_rgba(3,4,28,0.06)];
  }
  [dir="rtl"] .tagcloud a {
    @apply ml-0.5 mr-0;
  }
  .tagcloud a:hover {
    @apply bg-headingColor;
  }
  .tagcloud-sm a {
    @apply px-[12.5px] py-2;
  }
  .tagcloud-style-2 a {
    @apply border border-solid border-[#eaeaef] px-[11.5px] py-[7px] shadow-none;
  }

  blockquote {
    @apply mb-[35px] bg-[var(--tp-grey-1)] px-[50px] py-[35px] max-sm:px-[15px];
  }

  blockquote p {
    @apply text-[20px] font-normal leading-[1.5] text-[#57565e];
  }
  blockquote cite {
    @apply relative mt-[10px] block text-[18px] font-semibold not-italic text-[#070337];
  }
  blockquote cite::before {
    content: "";
    @apply relative top-[-4px] mr-[10px] inline-block h-[2px] w-[40px] pb-0 text-center text-[28px] font-normal;
  }
  [dir="rtl"] blockquote cite::before {
    @apply ml-[10px] mr-0;
  }

  /*
* ----------------------------------------------------------------------------------------
* 16.BLOG CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  /* BLOG CSS STYLE */
  .blog-area {
    @apply py-20 md:py-[100px];
  }

  .blog-post-box {
    @apply mb-14 border border-[#242424] p-10;
  }

  .blog-post-box .blog-post-img {
    @apply relative transform-gpu overflow-hidden rounded-md;
  }

  .blog-post-box .blog-post-img img {
    @apply transform transition-transform duration-500 ease-out;
  }

  .blog-post-box .blog-post-img:hover img {
    @apply scale-105 blur-sm;
  }

  .blog-post-box .blog-post-img .blog-post-category {
    @apply absolute left-4 top-4 rounded-full bg-black/20 px-4 py-2 text-sm font-normal uppercase tracking-wider text-white backdrop-blur-sm;
  }

  .blog-post-box .blog-post-img .blog-post-category a {
    @apply text-xs text-primaryColor;
  }

  .blog-post-box .blog-post-img .blog-post-category a:hover {
    @apply text-white;
  }

  .blog-post-caption {
    @apply pl-0 max-md:pt-[30px] lg:pl-14;
  }

  .blog-post-caption h2 a {
    @apply block py-2.5 font-titleFont text-[40px] font-medium uppercase !leading-[130%] tracking-[-0.3px] text-white;
  }

  .blog-post-caption h3 {
    @apply font-textFont text-xs uppercase text-primaryColor;
  }

  .blog-category {
    @apply py-20;
  }

  .single-blog-post {
    @apply mb-12;
  }

  .single-blog-post h2 {
    @apply text-xl;
  }

  .single-blog-post a.read-more {
    @apply border border-black bg-black px-5 py-1.5 text-white;
  }

  .single-blog-post a.read-more:hover {
    @apply bg-transparent text-black;
  }

  .post-date {
    @apply mb-2 border-b border-borderColor pb-8;
  }

  .post-date span {
    @apply bg-primatext-primaryColor mr-5 rounded-lg px-5 py-2 uppercase text-headingColor;
  }

  .single-blog-post p {
    @apply mb-5 text-lg;
  }

  .blog-carosel-control {
    @apply absolute top-1/2 -mt-12 h-24 w-6 bg-gray-800 text-center text-3xl leading-[5rem] text-black;
  }

  .blog-carosel-control.right {
    @apply right-0;
  }

  .pagination {
    @apply m-0;
  }

  ul.blog_pagination li a {
    @apply m-1 h-9 w-9 rounded-none border border-gray-300 text-lg leading-5 text-gray-800;
  }

  .black-icon {
    @apply bg-gray-800 text-white;
  }

  .black-icon:hover {
    @apply bg-gray-800;
  }

  .black-icon i {
    @apply text-sm;
  }

  ul.blog_pagination li a:hover {
    @apply border border-gray-800 bg-gray-800 text-white;
  }

  .single-side-bar {
    @apply mb-10;
  }

  .single-side-bar h2 {
    @apply mb-4 mt-0 text-lg uppercase;
  }

  .single-side-bar input {
    @apply h-12 rounded-none border border-gray-800 bg-transparent pl-2 text-gray-300 shadow-none;
  }

  .single-side-bar input:hover,
  .single-side-bar input:focus {
    @apply border border-gray-800 shadow-none outline-none;
  }

  .single-side-bar button {
    @apply h-10 bg-gray-800 px-8 text-white transition duration-300;
  }

  .single-side-bar button:hover {
    @apply border border-gray-800 bg-transparent text-white;
  }

  .single-side-bar ul {
    @apply m-0 list-none p-0;
  }

  .single-side-bar ul li a {
    @apply block py-1 text-lg text-white opacity-70;
  }

  .single-side-bar ul li a:hover {
    @apply text-primaryColor;
  }

  .single-blog-social-icon {
    @apply float-left mb-2.5 w-44;
  }

  .single-blog-social-icon i {
    @apply leading-12 float-left mr-4 h-12 w-12 rounded-full border border-gray-800 text-center text-2xl;
  }

  .tag a {
    @apply float-left mx-1.5 my-1 rounded-lg border border-borderColor px-5 py-2 text-sm font-light text-white transition-all duration-300 ease-in;
  }

  .tag a:hover {
    @apply border border-gray-800 bg-transparent text-gray-400;
  }

  .single-blog-post-details blockquote {
    @apply border-l border-white pl-10 text-lg leading-7;
  }

  .single-blog-post-details img {
    @apply w-full;
  }

  .single-blog-post-details h2 {
    @apply py-5 text-4xl text-white;
  }

  .next-previews-button-design {
    @apply mt-10;
  }

  .next-previews-button-design a {
    @apply text-black;
  }

  .post-comments-area {
    @apply mt-12;
  }

  .post-comments-area h2 {
    @apply mb-5;
  }

  .single-comment {
    @apply mb-14;
  }

  .single-comment img {
    @apply float-left mb-20 mr-12 w-24 rounded-full;
  }

  .single-comment h5 {
    @apply font-bold;
  }

  .single-comment a {
    @apply text-white transition-all duration-300 ease-in;
  }

  .single-comment a:hover {
    @apply text-gray-800;
  }

  .comment-form-area {
    @apply ml-36 rounded-lg bg-gray-900 p-12;
  }

  .comment-form-area input,
  .comment-form-area textarea {
    @apply rounded-none border border-gray-300 bg-white pl-2 text-blackColor shadow-none;
  }

  .comment-form-area button {
    @apply bg-primatext-primaryColor rounded-lg border border-gray-800 px-5 py-2 text-lg text-blackColor;
  }

  .owl-theme .owl-controls .owl-page span {
    @apply m-1.5 block h-1.5 w-1.5 rounded-full bg-black opacity-50;
  }

  .single-blog h5 {
    @apply text-xs font-light;
  }

  .single-blog h3 {
    @apply inline-block px-4 text-xs uppercase tracking-wide text-gray-500;
  }

  .blog-description {
    @apply border border-gray-100 px-7 py-5 text-center;
  }

  .single-side-bar {
    @apply mb-7 rounded-lg border border-borderColor p-6 transition duration-500;
  }

  .company-design-area {
    @apply py-24;
  }

  .company-design-area h2 {
    @apply mb-7 text-center text-lg font-medium uppercase tracking-[5px] text-white;
  }

  .scroller__inner {
    @apply flex flex-wrap gap-20 py-4;
  }

  /*
* ----------------------------------------------------------------------------------------
* 17.Mobile Menu CSS STYLE
* ----------------------------------------------------------------------------------------
*/
  a.meanmenu-reveal {
    @apply hidden;
  }

  /* when under viewport size, .mean-container is added to body */
  .mean-container .mean-bar {
    @apply relative z-[999999] float-left min-h-[42px] w-full bg-transparent px-0 py-1;
  }

  .mean-container a.meanmenu-reveal {
    @apply absolute right-0 top-0 block size-[22px] cursor-pointer py-[13px] pl-[11px] pr-[13px] -indent-[9999em] text-base font-bold leading-[22px] text-white;
  }

  .mean-container a.meanmenu-reveal span {
    @apply mt-[3px] block h-[3px] bg-white;
  }

  .mean-container .mean-nav {
    @apply float-left mt-11 w-full bg-transparent;
  }

  .mean-container .mean-nav ul {
    @apply m-0 w-full p-0;
  }

  .mean-container .mean-nav ul li {
    @apply relative float-left w-full;
  }

  .mean-container .mean-nav ul li a {
    @apply float-left m-0 block w-[90%] border-t border-[#26272b] px-[5%] py-2.5 text-left uppercase text-white;
  }

  .mean-container .mean-nav ul li li a {
    @apply visible w-[80%] px-[10%] py-2.5;
    text-shadow: none !important;
  }

  .mean-container .mean-nav ul li.mean-last a {
    @apply mb-0;
    margin-bottom: 0;
  }

  .mean-container .mean-nav ul li li li a {
    @apply w-[70%] px-[15%] py-2.5;
  }

  .mean-container .mean-nav ul li li li li a {
    @apply w-[60%] px-[20%] py-2.5;
  }

  .mean-container .mean-nav ul li li li li li a {
    @apply w-1/2 px-[25%] py-2.5;
  }

  .mean-container .mean-nav ul li a.mean-expand {
    @apply absolute right-0 top-1.5 z-[2] mt-px h-[32px] w-[26px] !border-none bg-transparent text-center text-sm font-bold;
  }

  .mean-container .mean-push {
    @apply float-left clear-both m-0 w-full p-0;
  }

  .mean-nav .wrapper {
    @apply m-0 w-full p-0;
  }

  /* Fix for box sizing on Foundation Framework etc. */
  .mean-container .mean-bar,
  .mean-container .mean-bar * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  .mean-remove {
    display: none !important;
  }

  /* The generic ".active" rule (padding + bg on the <li>) fights with this
     menu's 90%-width bordered links, so the active highlight ends up offset
     and visually clipped by the next item's top border. Reset it here and
     highlight the link itself instead, which already matches the item's box
     model (width/border/padding). */
  .mean-container .mean-nav ul li.active {
    background-color: transparent;
    padding: 0;
  }
  .mean-container .mean-nav ul li.active > a {
    background-color: var(--rs-theme-primary);
    color: #fff;
  }
  /* meanmenu.js only hides the desktop nav + builds the mobile version via
     JS after the page loads, so on mobile the full inline nav flashes
     visible for a moment first. Hide it with CSS at the same breakpoint
     meanmenu uses (991px) so it's gone from the very first paint; JS still
     overrides this with an inline style once it runs (both on mobile and
     back on desktop). */
  @media (max-width: 991px) {
    #mobile-menu {
      display: none;
    }
  }

  /* Shared auth pages (login/signup/forget-password) use Bootstrap grid
     classes (row/col-lg-*/justify-content-center/etc.), but this theme's
     CSS is Tailwind-only and never defines them, so the form renders
     unstyled and left-aligned instead of centered. Add just enough of that
     grid here. */
  .dashboard-area .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
  }
  .dashboard-area .row.justify-content-center {
    justify-content: center;
  }
  .dashboard-area .row.align-items-center {
    align-items: center;
  }
  .dashboard-area [class*="col-lg-"] {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  @media (min-width: 992px) {
    .dashboard-area .col-lg-3 {
      width: 25%;
      flex: 0 0 25%;
      max-width: 25%;
    }
    .dashboard-area .col-lg-5 {
      width: 41.6667%;
      flex: 0 0 41.6667%;
      max-width: 41.6667%;
    }
    .dashboard-area .col-lg-6 {
      width: 50%;
      flex: 0 0 50%;
      max-width: 50%;
    }
    .dashboard-area .col-lg-7 {
      width: 58.3333%;
      flex: 0 0 58.3333%;
      max-width: 58.3333%;
    }
    .dashboard-area .col-lg-9 {
      width: 75%;
      flex: 0 0 75%;
      max-width: 75%;
      margin-left: 0;
    }
    .dashboard-area .col-lg-10 {
      width: 83.3333%;
    }
    .dashboard-area .user-dashboard-layout,
    .dashboard-area > .container > .row:not(.justify-content-center) {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
    }
  }
  .dashboard-area .d-sm-flex {
    display: block;
  }
  @media (min-width: 576px) {
    .dashboard-area .d-sm-flex {
      display: flex;
    }
  }
  .dashboard-area .justify-content-between {
    justify-content: space-between;
  }
  /* Submit button + "lost/back to login" link: same row, button left /
     link right on desktop. flex-wrap naturally drops the link onto its own
     line (with a gap from the button) once the row gets too narrow, so
     mobile stacks automatically without a separate breakpoint rule. */
  .dashboard-area .form-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }
  .dashboard-area .form-submit-row .form-forget {
    margin-left: auto;
  }
  @media (max-width: 575px) {
    .dashboard-area .form-submit-row .form-forget {
      width: 100%;
      margin-left: 0;
      text-align: center;
    }
  }
  .dashboard-area.mt-30 {
    margin-top: 30px;
  }
  /* This section has no bottom spacing of its own, so the footer's "let's
     work" CTA sits right up against the form. Match the padding rhythm
     used by other sections (e.g. .contact-area) before the footer. */
  .dashboard-area.sign-in-area {
    padding-bottom: 60px !important;
  }
  @media (min-width: 768px) {
    .dashboard-area.sign-in-area {
      padding-bottom: 100px !important;
    }
  }
  .dashboard-area .mt-35 {
    margin-top: 35px;
  }
  .dashboard-area .mt-10 {
    margin-top: 10px;
  }
  .dashboard-area .text-danger {
    display: block;
    margin-top: 5px;
    color: rgba(220, 38, 38, 1);
  }

  /* Login/Appointment buttons borrow the site-wide .theme-btn hover style,
     which switches to dark text for use on light backgrounds. That's
     invisible against this dark sidebar, so keep it light in here. */
  .mean-container .mean-nav ul li a.theme-btn:hover {
    color: rgba(244, 243, 237, 1) !important;
  }
}

@layer base {
  .eventunset {
    pointer-events: unset;
  }
}
/*
* ----------------------------------------------------------------------------------------
* 15.PRELOADER & BOUNCE CCS STYLE
* ----------------------------------------------------------------------------------------
*/
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body.loaded {
  overflow: hidden !important;
  height: 100% !important;
}

.load-text span {
  -webkit-animation: loading 1s infinite alternate;
  animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.load-text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }

  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

@keyframes loading {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }

  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

.color-pulse {
  background: #00ff00;
}

.circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

.pulse {
  -webkit-animation: pulse-animation 2s infinite;
  animation: pulse-animation 2s infinite;
}

@-webkit-keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.light-dark-version {
  position: fixed;
  top: 45px;
  right: 40px;
  z-index: 9999;
  cursor: pointer;
}

/* ===== # Magic Cursor ===== */
#magic-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 10000;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s;
  transition: opacity 0.2s ease-in-out 0.5s;
}

#ball {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid #999999;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  box-sizing: border-box;
  /* -webkit-transform: scale(0.5);
  transform: scale(0.5); */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* -webkit-transition: 0.2s;
  transition: 0.2s; */
  margin-left: -20px;
  margin-top: -20px;
}

.magic-cursor.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  background-color: #cc0000;
  opacity: 0.3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

#ball.hovered {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.scroller__inner img {
  margin-right: 30px;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: -webkit-linear-gradient(
    left,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@-webkit-keyframes scroll {
  to {
    -webkit-transform: translate(calc(-50% - 0.5rem));
    transform: translate(calc(-50% - 0.5rem));
  }
}

@keyframes scroll {
  to {
    -webkit-transform: translate(calc(-50% - 0.5rem));
    transform: translate(calc(-50% - 0.5rem));
  }
}

/*
* ----------------------------------------------------------------------------------------
* 17.Responsive CSS STYLE
* ----------------------------------------------------------------------------------------
*/

@layer utilities {
  /* Tablet Layout: 768px. */
  @media only screen and (min-width: 767px) and (max-width: 991px) {
    .main-hero-area {
      @apply pt-[130px];
    }

    .about-area {
      @apply pt-0;
    }

    .resume-area {
      @apply py-20;
    }

    .single-project-page-right {
      @apply pl-0 pt-[30px];
    }

    .skill-area {
      @apply pt-[50px];
    }

    .services-area,
    .projects-area,
    .testimonials-area,
    .contact-area,
    .blog-area {
      @apply py-20;
    }

    .client-logo-area {
      @apply pt-[50px];
    }

    .pricing-area {
      @apply py-[50px];
    }

    .hero-content {
      @apply p-0;
    }

    .section-title {
      @apply mb-[30px];
    }

    .main-menu .navbar-collapse li a:hover {
      @apply text-white no-underline;
    }

    .section-title p {
      @apply mb-0;
    }

    .service-item {
      @apply mb-[30px];
    }

    .section-title h2 {
      @apply text-[60px] leading-[70px];
    }

    .fixed-header .main-menu .navbar-collapse li a {
      @apply text-white;
    }

    .fixed-header .main-menu .navbar-collapse li a:hover {
      @apply text-white;
    }

    .blog-item {
      @apply mb-[30px];
    }

    .main-footer {
      @apply py-[50px];
    }

    .about-counter-part::before {
      @apply left-1/2 top-0;
    }

    .blog-post-caption {
      @apply pl-0 pt-[30px];
    }

    .contact-form-area {
      @apply pt-[30px];
    }

    .footer-top h2 {
      @apply mb-[60px] leading-[1em];
    }

    .project-item.style-two .project-content h3 {
      @apply text-xl;
    }

    .single-service-information-wrap {
      @apply ml-0;
    }

    .resume-item .content h4 {
      @apply text-xl leading-[1.3em];
    }

    .hero-image img {
      @apply mt-0;
    }

    .hero-content {
      @apply px-[10px] text-center;
    }

    .clienti-reviews {
      @apply mb-10 text-center;
    }

    .clienti-reviews .clienti-profile {
      @apply justify-center;
    }

    .clienti-reviews .reviews p {
      @apply mt-0;
    }

    .footer-top {
      @apply pb-[50px] pt-[10px];
    }
  }
  .blog-details-wrap .content h4 {
    @apply mb-[18px];
  }

  @media only screen and (min-width: 1400px) {
    .container-fluid.gap-wide {
      @apply px-[100px];
    }
    .error-content .section-title h1 {
      @apply text-[85px];
    }

    .error-content .section-title h2 {
      @apply text-[55px];
    }
  }

  @media only screen and (max-width: 375px) {
    .admin-comment .comment-body {
      @apply px-[25px];
    }
    .admin-comment .comment-body .author-thumb {
      @apply max-w-[100px];
    }
    .banner-inner h1 {
      @apply text-[35px];
    }
    .banner-inner h3 {
      @apply text-[25px];
    }
    .breadcrumb {
      @apply text-base;
    }
    .project-content {
      @apply px-0;
    }
    .project-item.style-two .project-content {
      @apply px-0;
    }
    .project-item.style-three .project-content {
      @apply px-[25px];
    }
    .project-details-info {
      @apply px-[35px];
    }
    .pricing-item .pricing-header .price {
      @apply text-[35px];
    }
    .pricing-item .pricing-details ul li {
      @apply text-lg;
    }
    .client-logo-wrap .client-logo-item {
      @apply w-[calc(50%-60px)];
    }
    .blog-item .content h5 {
      @apply text-xl;
    }
    .main-sidebar {
      @apply px-[25px];
    }
    .widget-recent-news ul li h5 {
      @apply text-base;
    }
    .cta-widget {
      @apply px-[25px];
    }
    .col-small {
      @apply max-w-full flex-[0_0_100%];
    }
    .about-image-part {
      @apply pl-[50px];
    }
    .blog-item.style-two .content {
      @apply px-[15px];
    }
    .blog-content h4 {
      @apply text-xl;
    }
    .author-date-share .text h5 {
      @apply text-lg;
    }
    blockquote {
      @apply pl-[25px] text-lg;
    }

    blockquote:before {
      @apply hidden;
    }

    .comments {
      @apply px-[25px];
    }
  }

  @media only screen and (max-width: 479px) {
    .author-date-share .text {
      @apply mr-5;
    }
    blockquote {
      @apply pl-[60px] pr-[25px] text-xl;
    }

    blockquote:before {
      @apply left-[15px] text-[25px];
    }

    .about-btn h6 {
      @apply text-sm;
    }
    .service-item {
      @apply block;
    }
    .service-item .content {
      @apply mb-[25px] mt-[25px];
    }
    .contact-page-form {
      @apply px-5;
    }
    .project-content {
      @apply px-[25px];
    }
    .project-content h2 {
      @apply text-3xl leading-[1.3];
    }
    .project-item.style-two .project-content h3 {
      @apply text-[25px];
    }
    .tag-share {
      @apply px-[15px];
    }
    .list-style-one.two-column li {
      @apply w-full;
    }
    .resume-item .content h4 {
      @apply text-xl leading-[1.3];
    }
    .blog-details-wrap .content {
      @apply px-0;
    }
  }

  @media only screen and (max-width: 1399px) {
    .author-image-part .bg-circle {
      @apply left-0 top-[15%] h-[300px] w-[300px];
    }
    .onepage-menu {
      @apply py-5;
    }

    .onepage-menu li .menu-item {
      @apply py-[15px];
    }
    .onepage-menu .active a {
      @apply rounded-[5px];
    }
    .main-menu .navbar-collapse li {
      @apply px-[10px];
    }
    .our-location iframe {
      @apply h-[500px];
    }
  }

  @media only screen and (min-width: 376px) {
    .list-style-one li {
      @apply text-xl;
    }
    .next-prev-post .post-item h6 {
      @apply text-lg;
    }
    .comment-body .content h6 {
      @apply text-lg;
    }
    .admin-comment .comment-body .content h5 {
      @apply text-[22px];
    }
    .list-style-two li {
      @apply text-xl;
    }
    .pd-info-item h5 {
      @apply text-[22px];
    }
  }

  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .project-details-info {
      @apply px-[35px];
    }
    .main-sidebar {
      @apply px-5;
    }
    .hero-counter-area {
      @apply px-7;
    }
    .blog-item {
      @apply block;
    }

    .blog-item .image {
      @apply mb-[15px] mr-0 max-w-none;
    }
    .blog-item.style-two .content {
      @apply px-[15px];
    }
    .project-content {
      @apply px-5;
    }
  }

  @media only screen and (max-width: 767px) {
    .project-content {
      @apply px-10;
    }
    .project-content h2 {
      @apply text-[35px];
    }
    .client-logo-wrap .client-logo-item {
      @apply w-[calc(33.33%-60px)];
    }
    .menu-social {
      @apply hidden;
    }
    .hero-counter-area {
      @apply px-[25px];
    }
    .resume-items-wrap:before {
      @apply hidden;
    }
    blockquote {
      @apply pl-[100px] text-[22px];
    }

    blockquote:before {
      @apply left-[30px] text-[40px];
    }
    .comments {
      @apply px-10;
    }
    .admin-comment .comment-body {
      @apply block px-10;
    }
    .onepage-menu li .menu-item span {
      @apply hidden;
    }
    .hero-menu {
      @apply hidden;
    }
    .banner-inner h1 {
      @apply text-[55px];
    }
  }

  @media only screen and (max-width: 575px) {
    .service-item {
      @apply px-[25px];
    }
    .banner-inner h1 {
      @apply text-[45px];
    }
    .our-location iframe {
      @apply h-[350px];
    }
    .onepage-menu li .menu-item {
      @apply py-[10px];
    }
    .comment-body.comment-child {
      @apply ml-[30px];
    }
    .main-menu .mobile-logo {
      @apply max-w-[150px];
    }
  }

  @media only screen and (max-width: 1199px) {
    .resume-items-wrap {
      @apply px-[25px];
    }

    .resume-items-wrap:before {
      @apply left-[45%];
    }
    .blog-details-wrap .content {
      @apply px-[15px];
    }
    .project-item.style-two .project-content {
      @apply px-[25px];
    }
    .testimonial-item {
      @apply px-[25px];
    }
    .pricing-item .pricing-header {
      @apply px-[25px];
    }
    .pricing-item .pricing-header .price {
      @apply text-[40px];
    }
    .pricing-item .pricing-details {
      @apply px-[25px];
    }
    .widget-recent-news ul li .image {
      @apply mr-5;
    }
  }

  @media only screen and (max-width: 991px) {
    .our-location iframe {
      @apply h-[400px];
    }
    .client-logo-wrap {
      @apply justify-center;
    }
    .nav-outer {
      @apply w-full;
    }
    .main-menu .navbar-collapse li ul li {
      @apply px-[15px];
    }
    .client-logo-wrap .client-logo-item {
      @apply mb-10 w-[calc(25%-60px)];
    }
    .about-btn.btn-one {
      @apply left-[5%];
    }
    .main-menu .navbar-collapse li ul {
      @apply min-w-0;
    }
    .main-menu .navbar-header {
      @apply flex items-center justify-start;
    }
    .banner-inner h1 {
      @apply text-[65px];
    }
    .main-menu .navbar-collapse li ul {
      @apply relative hidden w-full shadow-none;
    }

    .main-menu .navbar-collapse li ul:after {
      @apply clear-both block content-[''];
    }
    .main-menu .navbar-collapse li.dropdown .dropdown-btn {
      @apply absolute right-[10px] top-0 h-[43px] w-[50px] border-l border-borderColor text-center leading-[43px];
    }
    .main-menu .navbar-collapse li {
      @apply block border-t border-borderColor px-[15px];
    }
    .main-menu .navbar-collapse li a {
      @apply px-[10px] py-[10px] leading-[22px] text-white opacity-70;
    }
    .main-menu .navbar-collapse li .megamenu {
      @apply relative w-full shadow-none;
    }

    .main-menu .navbar-collapse li .megamenu .container {
      @apply max-w-full;
    }

    .main-menu .navbar-collapse li .megamenu .row {
      @apply m-0;
    }
    .main-menu .navbar-collapse {
      @apply absolute left-[45%] w-1/2;
    }
    .main-menu .navbar-collapse > ul {
      @apply block max-h-[calc(100vh-100px)] overflow-x-hidden bg-[#333] py-[25px];
    }

    .main-menu .navbar-collapse > ul > li:last-child {
      @apply border-b border-[var(--border-color)];
    }
    .main-menu .collapse {
      @apply overflow-auto;
    }
    .main-menu {
      @apply w-full;
    }
    .hero-menu li .menu-item span {
      @apply hidden;
    }
    .main-header .logo-outer {
      @apply hidden;
    }
    .blog-content {
      @apply px-[25px];
    }

    .blog-content h4 {
      @apply text-[23px];
    }
    .author-date-share .text {
      @apply mr-[30px];
    }
  }

  @media only screen and (min-width: 992px) {
    .widget_newsletter form {
      @apply mx-auto;
    }
    .widget_nav_menu {
      @apply mx-auto max-w-max;
    }
  }

  @media only screen and (min-width: 768px) {
    .admin-comment .comment-body .author-thumb {
      @apply mb-0;
    }
    .banner-inner h3 {
      @apply text-[35px];
    }
    .comment-body {
      @apply flex;
    }
  }

  @media only screen and (min-width: 576px) {
    .author-date-share .text h5 {
      @apply text-[22px];
    }
  }

  @media only screen and (min-width: 480px) {
    .blog-details-wrap .content h4 {
      @apply text-[27px];
    }
  }

  @media only screen and (max-width: 991px) and (max-width: 375px) {
    .main-menu .navbar-collapse li ul li ul {
      @apply left-auto;
    }
  }

  @media only screen and (min-width: 1200px) {
    .main-header .container-fluid {
      @apply px-[55px];
    }
  }

  @media (max-width: 991.98px) {
    .resume-wrapper .resume-box {
      @apply mb-6;
    }

    .resume-wrapper .resume-box:last-child {
      @apply mb-0;
    }
  }
}