@media (min-width: 1000px) {
  /*===============================================
Template: Toko - Corporate Business HTML Template
Author: Hi-Tech Parks
Version: 1.0.0
Created: Nov 2023
================================================*/

  /************ font family *************/

  /************ reset css start *************/
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
   /* font: inherit;*/
    vertical-align: baseline;
  }
  a {
    color: inherit;
    font-family: inherit;
    text-decoration: inherit;
  }
  a:hover {
    color: inherit;
    font-family: inherit;
    text-decoration: inherit;
  }
  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  ::-webkit-input-placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  ::-moz-placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  :-ms-input-placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  ::placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  /************ reset css end *************/

  /******** variable start ********/
  :root {
    --fontTitle: "Rajdhani", sans-serif;
    --fontText: "Roboto", sans-serif;
    --fontNum: "Poppins", sans-serif;
  }
  /******** variable end ********/

  /******** topbar start ********/
  .topbar {
    padding: 10px 0px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: #353535;
  }
  .topbar .shape {
    background-image: url("../image/innner_page_top_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 41%;
    height: 100%;
    z-index: -1;
  }
  .topbar .topbar-info {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
  }
  .topbar .topbar-right {
    float: right;
  }
  .topbar .topbar-menu {
    list-style-type: none;
    padding: 0px;
    display: inline-block;
  }
  .topbar .topbar-menu li {
    display: inline-block;
    margin: 0px 7px;
  }
  .topbar .topbar-menu li a {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    transition: all 500ms ease;
    position: relative;
    font-weight: 300;
  }
  .topbar .topbar-menu li a:hover {
    color: #ff6116;
  }
  .topbar .topbar-menu li a::before {
    content: "";
    position: absolute;
    top: 2px;
    right: -8px;
    height: 12px;
    width: 1px;
    background-color: #ffffff;
    transform: skew(-20deg);
    margin: 0px -2px;
    font-weight: 300;
  }
  .topbar .topbar-menu li:last-child a::before {
    display: none;
  }
  .topbar .topbar-social {
    list-style-type: none;
    padding: 0px;
    display: inline-block;
    text-align: right;
    margin-left: 50px;
  }
  .topbar .topbar-social li {
    display: inline-block;
    margin: 0px 10px;
  }
  .topbar .topbar-social li a {
    color: #ffffff;
    font-size: 14px;
    line-height: 10px;
    transition: all 0.5s;
  }
  .topbar .topbar-social li a:hover {
    color: #ff6116;
  }
  /******** topbar end ********/

  /******** breadcrumbs start ********/
  .breadcrumbs {
    position: relative;
    overflow: hidden;
  }
  .breadcrumbs .shape1 {
    background-image: url("../image/inner_page_shape_2.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 320px;
    height: 327px;
    position: absolute;
    top: 0px;
    left: -110px;
    z-index: 13;
  }
  .breadcrumbs .shape2 {
    background-image: url("../image/inner_page_shape_3.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 550px;
    height: 679px;
    position: absolute;
    bottom: -353px;
    right: -275px;
    z-index: 13;
  }
  .breadcrumbs .overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .breadcrumbs .breadcrumbs-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    margin-top: 75px;
  }
  .breadcrumbs .breadcrumbs-content {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }
  .breadcrumbs .breadcrumbs-content .page-title {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 700;
    color: #ffff;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .breadcrumbs .breadcrumbs-content ul li {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 18px;
    display: inline-block;
    color: #ff6116;
  }
  .breadcrumbs .breadcrumbs-content ul li span {
    color: #ffffff;
    font-size: 13px;
  }
  .breadcrumbs .breadcrumbs-content ul li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;
    color: #ffff;
  }
  /******** breadcrumbs end ********/

  /******** section title start ********/
  .section-title {
    text-align: center;
    padding-bottom: 50px;
  }
  .section-title h2 {
    font-family: var(--fontTitle);
    color: #db5e22;
    font-size: 18px;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    font-weight: 600;
  }
  .section-title h2::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0px;
    width: 50px;
    height: 2px;
    animation: title-before 1s infinite alternate;
    background-color: #db5e22;
  }
  .section-title h2::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 65px;
    width: 20px;
    height: 2px;
    background-color: #db5e22;
    animation: title-after 1s infinite alternate;
  }
  .section-title h3 {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 700;
    color: #353535;
    text-transform: capitalize;
    margin-top: 25px;
    line-height: 1.1;
  }
  /******** section title end ********/

  /******** preloader start ******/
  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff6116;
  }
  .preloader-dash {
    width: 5px;
    height: 100px;
    background: linear-gradient(45deg, #ffffff, #ffffff);
    margin: 10px;
    animation: preloader 1s linear infinite;
    border-radius: 20px;
  }
  .preloader-dash:nth-child(2) {
    animation-delay: 0.1s;
  }
  .preloader-dash:nth-child(3) {
    animation-delay: 0.2s;
  }
  .preloader-dash:nth-child(4) {
    animation-delay: 0.3s;
  }
  .preloader-dash:nth-child(5) {
    animation-delay: 0.4s;
  }
  .preloader-dash:nth-child(6) {
    animation-delay: 0.5s;
  }
  .preloader-dash:nth-child(7) {
    animation-delay: 0.6s;
  }
  .preloader-dash:nth-child(8) {
    animation-delay: 0.7s;
  }
  .preloader-dash:nth-child(9) {
    animation-delay: 0.8s;
  }
  .preloader-dash:nth-child(10) {
    animation-delay: 0.9s;
  }
  /******** preloader end ********/

  /******** scroll top start ********/
  .scrollTop {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff6116;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    z-index: 9999999999;
    cursor: pointer;
  }
  .scrollTop .icon {
    font-size: 30px;
    color: #ffffff;
  }
  .scrollTop.active {
    opacity: 1;
    visibility: visible;
  }
  /********** scroll top end *********/

  /******** main menu start *********/
  .main-navbar {
    padding: 10px 0px;
    background-color: #ffffff;
    position: absolute;
    /* top: 37px; */
    left: 0;
    right: 0;
    z-index: 14;
  }
  .main-navbar.sticky {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
  }
  /* MENU text CSS */
  .main_menu ul {
    text-align: right;
    list-style: none;
    margin-bottom: 0px;
    /* display: flex; */
  }
  .main_menu > ul > li {
    display: inline-block;
    width: max-content;
    margin: auto;
  }
  .main_menu > ul > li.active {
    color: #cc1a21;
  }
  .main_menu > ul > li > a {
    font-family: var(--fontTitle);
    font-weight: 500;
    display: block;
    margin: 0px 0.4rem;
    transition: 0.5s;
    font-size: 1.3rem;
    color: #353535;
    text-decoration: none;
  }
  .main_menu > ul > li > a.active,
  .main_menu > ul > li > a:hover {
    color: #cc1a21;
  }
  .main_menu > ul > li > a:before,
  .main_menu > ul > li.current > a:before {
    background: #ffb600 none repeat scroll 0% 0;
    bottom: -7px;
    content: "";
    height: 2px;
    left: 0;
    margin: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: all 0.5s ease 0s;
    width: 15%;
    display: none;
  }
  .main_menu ul li:last-child a {
    margin-right: 0px !important;
  }
  .main_menu > ul > li.current > a,
  .main_menu > ul > li:hover > a,
  .creative_header_menu > ul > li:hover > a {
    color: #ff6000;
    background-color: transparent;
    color: #ff6000;
  }
  .main_menu > ul > li:hover > a:before,
  .main_menu > ul > li.current > a:before {
    opacity: 1;
  }
  .main_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 250%;
    width: 180%;
    text-align: left;
    background: #fff;
    margin: 0;
    padding: 15px 15px 8px 25px;
    z-index: 9999;
    box-shadow: 0 0 30px rgb(0 0 0 / 9%);
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
    border-top: 2px solid #ff6116;
    transition: all 0.5s;
    overflow: hidden;
  }
  .main_menu ul li:hover .sub-menu {
    transition: 0.5s;
    opacity: 1;
    visibility: visible;
    top: 180%;
    z-index: 9;
  }
  .main_menu ul .sub-menu li {
    position: relative;
    transition: 0.5s;
  }
  .main_menu ul .menu-item-has-children {
    /* margin-right: 10px; */
    position: relative;
  }
  .main_menu ul .menu-item-has-children > a {
    position: relative;
  }

  .main_menu ul .menu-item-has-children.active::before,
  .main_menu ul .menu-item-has-children:hover::before,
  .main_menu ul .menu-item-has-children:hover::before {
    color: #ff6116;
    transform: rotate(180deg);
  }
  .main_menu ul .sub-menu li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: small;
    display: block;
    margin: 0;
    margin-bottom: 6px;
    letter-spacing: normal;
    transition: 0.5s;
    color: #353535;
    visibility: inherit !important;
    padding: 0px 0px;
    text-decoration: none;
  }
  .main_menu ul .sub-menu li:hover a,
  .main_menu ul .sub-menu li a.active {
    color: #ff6000;
  }
  .main_menu ul .sub-menu li a::before {
    font: var(--fa-font-solid);
    content: "";
    font-size: 13px;
    position: absolute;
    top: 7px;
    left: -50px;
    visibility: hidden;
    transition: all 0.5s;
  }
  .main_menu ul .sub-menu li a:hover::before {
    visibility: visible;
    left: -20px;
  }
  .main_menu ul .sub-menu li:before {
    left: -18px;
  }
  .main_menu ul .sub-menu li:hover:before {
    opacity: 1;
  }
  .main_menu ul .sub-menu li:hover {
    margin-left: 8px;
  }
  .main_menu .popup-btn {
    background-color: #ffffff;
    border-style: none;
    color: #ff6116;
    margin-top: -2px;
  }
  .main_menu .popup-btn:hover {
    color: #ff6116;
  }
  .main_menu .popup-btn:focus {
    background-color: #ffffff;
    border-style: none;
    box-shadow: none;
    border-style: none;
    color: #ff6116;
  }
  .modal-content .search-form {
    position: relative;
    top: 200px;
  }
  .modal-content .search-form input {
    box-shadow: none;
    border-style: none;
    border-bottom: 2px solid #ffeaea;
    padding: 15px 26px;
    font-weight: 500;
    font-size: 16px;
    color: #616161;
  }
  .modal-content .search-form input::placeholder {
    font-weight: 500;
    font-size: 16px;
    color: #616161;
  }
  .modal-content .search-form .btn {
    font-family: var(--fontTitle);
    position: absolute;
    top: 10px;
    right: 10px;
    text-transform: capitalize;
    background-color: transparent;
    color: #616161;
  }
  .modal-content .search-form .btn:hover,
  .modal-content .search-form .btn:focus {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  .modal-content .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1 !important;
    width: 100vw;
    height: 100vh;
    background-color: #000;
  }
  .modal-content {
    opacity: 1;
    background-color: #fff9f6;
    z-index: 999999;
  }
  .main_menu .modal-header .btn-close:focus {
    box-shadow: none;
    border-style: none;
    outline: none;
  }
  /******** main menu end *********/

  /******** mobile menu start ********/
  .mobile_logo_area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
    background-color: #ffffff;
    padding: 7px;
  }
  .mean-container .mean-bar {
    float: left;
    width: 100%;
    position: absolute;
    top: 57px;
    background: #ff6116;
    padding: 0px;
    min-height: 50px;
    z-index: 999999999;
  }
  .mean-container .mean-bar::before {
    font-family: var(--fontTitle);
    font-weight: 400;
    color: #fff;
    content: "Menu";
    font-size: 18px;
    font-weight: 700;
    left: 15px;
    position: absolute;
    top: 15px;
  }
  .mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #ffffffff;
    margin-top: 44px;
  }
  .mean-container .mean-nav ul li {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    position: relative;
    width: 100%;
    border-top: 1px solid #ddd;
  }
  .mean-container .mean-nav ul li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    transition: 0.5s;
    font-size: 16px;
    color: #353535;
  }
  .mean-container .mean-nav ul li a.active {
    color: #ff6116;
  }
  .mean-container .mean-nav ul li a:hover {
    color: #ff6116;
  }
  .mean-container .mean-nav ul li a.mean-expand {
    background-color: #ff6116;
    color: #ffffff;
    transition: all 0.5s;
    margin-top: 1px;
    width: 26px;
    height: 27px;
    padding: 12px !important;
    text-align: center;
    position: absolute;
    right: 0;
    top: -4px;
    z-index: 2;
  }
  .mean-container .mean-nav ul li a.mean-expand:hover {
    background-color: #ff6116;
    opacity: 0.8;
  }
  /******** mobile menu end ********/

  /******** slider start *******/
  .slider {
    position: relative;
    overflow: hidden;
  }
  .slider .top-shape {
    background-image: url("../image/home_page_top_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    height: 320px;
    position: absolute;
    top: 0px;
    left: -97px;
    z-index: 12;
  }
  .slider .bottom-shape {
    background-image: url("../image/slider_bottom_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 308px;
    height: 369px;
    bottom: 0px;
    right: 0px;
    z-index: 10;
  }
  .slider .carousel-item img {
    height: 656px;
    margin-top: 50px;
    /* object-fit: cover; */
  }
  .slider .carousel .overlay {
    float: left;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* background-color: #000000; */
    opacity: 70%;
    z-index: 9;
  }
  .slider .carousel-indicators {
    z-index: 20;
    display: none;
  }
  .slider .carousel-control-prev {
    height: 45px;
    width: 45px;
    color: #ffffff;
    background-color: #ff6116;
    border-radius: 50%;
    position: absolute;
    left: auto;
    right: 152px !important;
    z-index: 99;
    top: 53%;
  }
  .slider .carousel-control-next {
    height: 45px;
    width: 45px;
    color: #ffffff;
    background-color: #ff6116;
    border-radius: 50%;
    position: absolute;
    right: 152px !important;
    z-index: 99;
    top: 45%;
  }
  .slider .carousel-control-prev-icon,
  .slider .carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .slider .carousel-caption {
    position: absolute;
    right: 15%;
    left: 10%;
    color: #fff;
    text-align: left;
    top: 242px;
    z-index: 13;
    width: 70%;
  }
  .slider .carousel-caption .title {
    font-family: var(--fontTitle);
    font-size: 75px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 35px;
  }
  .slider .carousel-caption .desc {
    font-family: var(--fontText);
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: 35px;
  }
  .slider .carousel-caption .button-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
  }
  .slider .carousel-caption .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 15px;
    float: left;
    padding: 10px 20px;
    background-color: #ff6116;
    color: #ffffff;
    text-transform: capitalize;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .slider .carousel-caption .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    z-index: -1;
    background-color: #ff8145;
    transition: all 500ms ease;
  }
  .slider .carousel-caption .btn:hover::before {
    left: 0;
  }
  .slider .carousel-caption .video-btn {
    float: left;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #ff6116;
    border-radius: 50%;
    margin-left: 25px;
    outline: 5px solid rgba(255, 97, 22, 0.3);
    box-sizing: border-box;
  }
  .slider .carousel-caption .video-btn .icon {
    color: #ffffff;
    font-size: 20px;
  }
  .slider .carousel-caption .info {
    font-family: var(--fontTitle);
    text-transform: uppercase;
    font-weight: 400;
    color: #d8591b;
    font-size: 20px;
    margin-bottom: 15px;
  }
  .slider .carousel-caption .info-bottom {
    font-family: var(--fontTitle);
    font-weight: 600;
    float: left;
    color: #ffffff;
    margin-left: 25px;
    vertical-align: center;
  }
  /******** slider end ********/

  /******** feature start ********/
  .feature {
    padding: 70px 0px;
    background-image: url("../image/map.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .feature .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(110, 0, 93, 0.05);
  }
  .feature .single-feature {
    background: #ffffff;
    padding: 40px 30px 40px 30px;
    transition: all 1.5s;
    position: relative;
    border-radius: 5px;
  }
  .feature .single-feature:hover {
    background-color: #ff6116;
    background-image: url("../image/png-23.png");
    transform: translateY(-10px);
  }
  .feature .single-feature .header {
    margin-bottom: 40px;
  }
  .feature .single-feature .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 7%;
    background-color: #ff6116;
    position: absolute;
    transition: all 0.5s;
  }
  .feature .single-feature:hover .icon-box {
    border-radius: 50%;
    transition: all 0.5s;
    background-color: #ff8145;
  }
  .feature .single-feature .icon-box .icon {
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .feature .single-feature .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    color: #353535;
    font-size: 20px;
    display: inline-block;
    line-height: 1.2;
    margin-left: 70px;
    display: inline-block;
  }
  .feature .single-feature:hover .title {
    color: #ffffff;
  }
  .feature .single-feature .desc {
    color: #616161;
    font-family: var(--fontText);
    font-size: 16px;
    line-height: 1.5;
  }
  .feature .single-feature:hover .desc {
    color: #ffffff;
  }
  /***** feature end *******/

  /***** about start *******/
  .about {
    padding: 120px 0px;
    position: relative;
    overflow: hidden;
  }
  .about.bg-color {
    background-color: #fff9f6;
  }
  .about .shape-1 {
    background-image: url("../image/shape-1.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -139px;
    left: 3px;
    width: 280px;
    height: 440px;
    object-fit: cover;
  }
  .about .shape-2 {
    background-image: url("../image/6.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 105px;
    left: 232px;
    width: 150px;
    height: 150px;
    object-fit: cover;
    animation: shape-position-change 3s linear infinite alternate;
  }
  .about .section-title {
    text-align: left;
  }
  .about .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin-bottom: 41px;
  }
  .about .content-area .service-features {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 18px;
    color: #353535;
    float: left;
    margin: 10px 0px;
  }
  .about .content-area .service-features .feature-item {
    font-family: var(--fontText);
    font-weight: 700;
    font-size: 18px;
    float: left;
    width: 50%;
    margin-bottom: 30px;
  }
  .about .content-area .service-features .feature-item .icon {
    margin-right: 10px;
    color: #ff6116;
  }
  .about .content-area .button-area .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
    padding: 10px 20px;
    background-color: #ff6116;
    border-style: none;
    outline-style: none;
    box-shadow: none;
    color: #ffffff;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .about .content-area .button-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -150px;
    z-index: -1;
    transition: all 500ms ease;
    background-color: #ff8145;
  }
  .about .content-area .button-area .btn:hover::before {
    left: 0;
  }
  .about .image-area {
    position: relative;
  }
  .about .image-area .main {
    position: relative;
    text-align: center;
  }
  .about .image-area .main::after {
    content: "";
    width: 3px;
    height: 250px;
    background-color: #ff6116;
    position: absolute;
    top: 0%;
    right: 10%;
    transition: all 500ms ease;
  }
  .about .image-area:hover .main::after {
    height: 320px;
  }
  .about .image-area .main img {
    height: 450px;
    object-fit: cover;
    border-radius: 5px;
  }
  .about .image-area .skills-progress {
    width: 240px;
    padding: 30px;
    background-color: #ffeaea;
    border-radius: 3%;
    position: absolute;
    bottom: -119px;
  }
  .about .image-area .skills-progress .progress-item {
    position: relative;
  }
  .about .image-area .skills-progress .progress-item:last-child {
    margin-bottom: 0px;
  }
  .about .image-area .skills-progress .progress-item .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    color: #353535;
    margin-bottom: 20px;
  }
  .about .image-area .skills-progress .progress-item .progressbar {
    margin-top: 10px;
    margin-bottom: 17px;
    background-color: #ececec !important;
    box-shadow: none;
    border-radius: 4px !important;
  }
  .about .image-area .skills-progress .progress-item .progressbar .proggress {
    background-color: #ff6116 !important;
    height: 6px !important;
    border-radius: 4px !important;
  }
  .about
    .image-area
    .skills-progress
    .progress-item
    .progressbar
    .percentCount {
    margin-top: -38px;
    margin-right: 6px;
    font-size: 13px;
    color: #ffffff;
  }
  .about .image-area .skills-progress .progress-item .value {
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #da5e21;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #ffffff;
    border: 3px solid #ffffff;
    outline: 1px solid #c9c9c9;
    position: absolute;
    top: -7px;
    right: 0;
  }
  .about .image-area .video-area {
    height: 220px;
    width: 220px;
    position: absolute;
    bottom: -114px;
    right: 42px;
    border-radius: 4px;
  }
  .about .image-area .video-area .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
  }
  .about .image-area .video-area img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
  .about .image-area .video-area .button-area {
    position: relative;
    bottom: 60%;
    left: 40%;
  }
  .about .image-area .video-area .button-area .play-btn {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #da5e21;
    color: #ffffff;
    box-shadow: none;
    border: 2px solid #ffffff;
    position: relative;
    transition: all 500ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about .image-area .video-area .button-area .play-btn:hover {
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.2);
  }
  .about .image-area .video-area .button-area .play-btn::before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.5s;
    content: "";
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
    animation: ripple 3s infinite;
    transition: all 0.4s ease;
  }
  /******** about end ********/

  /******** team start ********/
  .team {
    background-color: #ffffff;
    padding: 70px 0px 120px;
  }
  .team .single-team {
    border-radius: 5px;
    position: relative;
  }
  .team .single-team .team-image {
    width: 100%;
    height: 320px;
    position: relative;
  }
  .team .single-team .team-image .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(27, 29, 27, 0.5);
    border-radius: 5px 5px 0px 0px;
    transform: scale(0, 0);
    z-index: 10;
    transition: all 500ms ease;
  }
  .team .single-team:hover .team-image .overlay {
    transform: scale(1, 1);
  }
  .team .single-team .team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px 5px 0px 0px;
  }
  .team .single-team .team-info .team-social {
    padding: 0px !important;
    list-style-type: none;
    margin-top: 30px;
    text-align: center;
    position: relative;
    top: -150px;
    z-index: 30;
    transition: all 500ms linear;
  }
  .team .single-team:hover .team-info .team-social {
    top: -120px;
  }
  .team .single-team .team-info .team-social li {
    display: inline-block;
  }
  .team .single-team .team-info .team-social li a {
    float: left;
    width: 32px;
    height: 32px;
    background-color: #ff6116;
    color: #ffffff;
    font-size: 16px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    border-radius: 3px;
  }
  .team .single-team .team-info .team-social li a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    transform: scale(0, 0);
    z-index: -1;
    transition: all 500ms ease;
    border-radius: 3px;
  }
  .team .single-team .team-info .team-social li a:hover::before {
    transform: scale(1, 1);
  }
  .team .single-team .team-info .team-social li:hover a {
    background-color: #ff7939;
  }
  .team .single-team .team-info .team-social li:hover a {
    color: #ff6116;
  }
  .team .single-team .team-info {
    padding: 5px 50px;
    background-color: #ffffff;
    position: relative;
  }
  .team .single-team .team-info .team-info-inner {
    padding: 20px 10px;
    background-color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 50px;
    right: 50px;
    z-index: 100;
    transition: all 500ms linear;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.1);
  }
  .team .single-team:hover .team-info .team-info-inner {
    bottom: -65px;
  }
  .team .single-team .team-info .team-info-inner .name {
    font-family: var(--fontTitle);
    font-size: 24px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 16px;
  }
  .team .single-team .team-info .team-info-inner .designation {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #ff6116;
  }
  .team .single-team .team-info .team-info-inner .team-contact-icon li {
    display: inline-block;
  }
  .team .single-team .team-info .team-info-inner .team-contact-icon li a {
    height: 45px;
    width: 45px;
    display: inline-block;
    background-color: #f5f5f6;
    margin: 0px 5px;
    margin-top: 15px;
    border-radius: 5px;
    transition: all 0.5s;
    font-family: var(--fontText);
    font-size: 18px;
    color: #9797a1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .team
    .single-team
    .team-info
    .team-info-inner
    .team-contact-icon
    li
    a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: -100px;
    right: 0px;
    z-index: -1;
    background-color: #ff6116;
    transition: all 500ms ease;
  }
  .team
    .single-team
    .team-info
    .team-info-inner
    .team-contact-icon
    li
    a:hover::before {
    left: 0px;
  }
  .team .single-team .team-info .team-info-inner .team-contact-icon li a:hover {
    color: #ffffff;
  }
  /******** team end ********/

  /******** partner start ********/
  .brands {
    padding: 100px 0px 150px;
    text-align: center;
    position: relative;
    perspective: 1000px;
  }
  .brands.home-page {
    padding: 100px 0px;
  }
  .brands.bg-color {
    background-color: #fff0e9;
  }
  .brands .item {
    display: flex;
    justify-content: center;
  }
  .brands .item img {
    width: 150px;
    filter: grayscale(100%);
  }
  .brands .item img:hover {
    filter: grayscale(0%);
  }
  .brands .right-shape {
    background-image: url("../image/shape2.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50px;
    right: 20px;
    width: 110px;
    height: 150px;
    animation: brand-shape-rotate 2000ms infinite linear;
  }
  .brands .left-shape {
    background-image: url("../image/shape2.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50px;
    left: 15px;
    width: 110px;
    height: 150px;
    animation: brand-shape-rotate 2000ms infinite linear;
  }
  /******** partner end ********/

  /******** video start ********/
  .video {
    padding: 70px 0px;
    background-image: url("../image/video_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
  }
  .video .video-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    opacity: 1;
  }
  .video .video-area .play-button-area {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
  }
  .video .video-area .play-button-area::after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.9s;
    content: "";
    position: absolute;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
    animation: ripple 3s infinite;
    transition: all 0.4s ease;
  }
  .video .video-area .play-button-area .play-area {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #ff6116;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
  }
  .video .video-area .play-button-area .play-area .icon {
    font-size: 40px;
    color: #ff6116;
  }
  .video .video-area .title {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
  }
  .video .video-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    line-height: 1.5;
  }
  .video .video-area .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    background-color: #ffffff;
    border-radius: 5px;
    color: #ff6116;
    margin-top: 30px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 10px 20px;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .video .video-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -150px;
    top: 0px;
    z-index: -1;
    border-radius: 5px;
    transition: all 500ms ease;
    background-color: #353535;
  }
  .video .video-area .btn:hover {
    color: #ffffff;
  }
  .video .video-area .btn:hover::before {
    left: 0px;
  }
  /***** video end ******/

  /***** why choose us start *****/
  .why-choose-us {
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
  }
  .why-choose-us .shape-1 {
    background-image: url("../image/2222.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 60%;
    position: absolute;
    top: 100px;
    left: -20%;
  }
  .why-choose-us .shape-2 {
    background-image: url("../image/6.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 53px;
    left: 92px;
    animation: shape-position-change 2s linear infinite alternate;
  }
  .why-choose-us .image-area .main-outer {
    position: relative;
  }
  .why-choose-us .image-area .main-outer::before {
    content: "";
    width: 100px;
    height: 4px;
    background-color: #000000;
    position: absolute;
    bottom: -13px;
    right: 17%;
    transition: all 500ms ease;
  }
  .why-choose-us .image-area:hover .main-outer::before {
    width: 200px;
  }
  .why-choose-us .image-area .main-outer::after {
    content: "";
    width: 4px;
    height: 100px;
    background-color: #000000;
    position: absolute;
    bottom: -13px;
    right: 17%;
    transition: all 500ms ease;
  }
  .why-choose-us .image-area:hover .main-outer::after {
    height: 250px;
  }
  .why-choose-us .image-area {
    position: relative;
  }
  .why-choose-us .image-area::before {
    content: "";
    position: absolute;
    bottom: 10%;
    left: -20px;
    height: 220px;
    width: 4px;
    background-color: #ff6116;
    transition: all 500ms ease;
  }
  .why-choose-us .image-area:hover::before {
    height: 300px;
  }
  .why-choose-us .image-area .main {
    width: 100%;
    position: relative;
  }
  .why-choose-us .image-area .main::after {
    content: "";
    width: 30px;
    height: 80px;
    background-color: #ff6116;
    position: absolute;
    top: -37px;
    right: 108px;
    transform: skew(30deg);
  }
  .why-choose-us .image-area .main::before {
    content: "";
    width: 30px;
    height: 50px;
    background-color: #ff6116;
    position: absolute;
    top: -3px;
    right: 130px;
    transform: skew(-217deg);
  }
  .why-choose-us .image-area .main img {
    width: 80%;
    height: 530px;
    border-radius: 5px;
    object-fit: cover;
  }
  .why-choose-us .image-area .main .content {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    background-color: #ff6116;
    border-radius: 5px;
    position: absolute;
    right: 48px;
    bottom: 86px;
    z-index: 10;
    line-height: 1.3;
  }
  .why-choose-us .content-area .section-title {
    text-align: left;
    padding-bottom: 30px;
  }
  .why-choose-us .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #616161;
  }
  .why-choose-us .content-area .inner .single-item {
    padding-left: 50px;
    margin-top: 50px;
    position: relative;
  }
  .why-choose-us .content-area .inner .single-item .icon-area {
    width: 30px;
    height: 30px;
    background-color: #ff6116;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .why-choose-us .content-area .inner .single-item .icon-area .icon {
    color: #ffffff;
  }
  .why-choose-us .content-area .inner .single-item .title {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 700;
    color: #353535;
  }
  .why-choose-us .content-area .inner .single-item .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    margin-top: 10px;
  }
  /***** why choose us end *****/

  /****** work process start ******/
  .work-process {
    padding: 70px 0px;
    background-color: #fff9f6;
  }
  .work-process .single-work-process {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 20px;
    position: relative;
  }
  .work-process .single-work-process::after {
    content: "";
    width: 200px;
    height: 0px;
    position: absolute;
    top: 30%;
    right: -108px;
    border: 2px dotted #353535;
  }
  .work-process .single-work-process.last-item::after {
    display: none;
  }
  .work-process .single-work-process .icon-inner-1 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 2px dotted #d7ddd3;
    outline-offset: 18px;
    background-color: #353535;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    transition: all 500ms ease;
    box-sizing: border-box;
  }
  .work-process .single-work-process:hover .icon-inner-1 {
    outline: 2px dotted #ffc5a9;
  }
  .work-process .single-work-process .icon-inner-1::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 45%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff6116;
    visibility: hidden;
    transition: all 100ms ease;
  }
  .work-process .single-work-process:hover .icon-inner-1::after {
    visibility: visible;
  }
  .work-process .single-work-process .icon-inner-1::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0, 0);
    background-color: #ff6116;
    z-index: -1;
    transition: all 0.5s;
  }
  .work-process .single-work-process:hover .icon-inner-1::before {
    transform: scale(1, 1);
  }
  .work-process .single-work-process .icon-inner-1 .icon-inner-2 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 3px solid #ff6116;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .work-process .single-work-process .icon-inner-1 .icon-inner-2 .icon {
    color: #ff6116;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.5s;
  }
  .work-process .single-work-process:hover .icon-inner-1 .icon-inner-2 .icon {
    color: #ffffff;
    font-size: 40px;
  }
  .work-process .single-work-process .content-area {
    padding: 0px 20px;
  }
  .work-process .single-work-process .content-area .title {
    font-family: var(--fontTitle);
    font-size: 24px;
    font-weight: 700;
    color: #353535;
    margin-top: 50px;
    margin-bottom: 15px;
    text-align: center;
  }
  .work-process .single-work-process .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    text-align: center;
    line-height: 1.5;
  }
  /******* work process end ********/

  /****** experience start ******/
  .experience {
    padding: 120px 0px;
    position: relative;
  }
  .experience .shape-1 {
    background-image: url("../image/6.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 13%;
    left: 5%;
    animation: shape-position-change 2s linear infinite alternate;
  }
  .experience .shape-2 {
    background-image: url("../image/circle_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 17px;
    left: 32%;
    animation: shape-position-change 2s linear infinite alternate;
  }
  .experience .image-area {
    position: relative;
  }
  .experience .image-area::before {
    content: "";
    position: absolute;
    bottom: -50px;
    left: -20px;
    width: 5px;
    height: 200px;
    background-color: #ff6116;
    transition: all 500ms ease;
  }
  .experience .image-area:hover::before {
    height: 300px;
  }
  .experience .image-area .main-img img {
    width: 80%;
    height: 500px;
    border-radius: 5px;
    object-fit: cover;
  }
  .experience .image-area .sub-img {
    position: absolute;
    bottom: -54px;
    right: 42px;
  }
  .experience .image-area .sub-img img {
    width: 250px;
    height: 250px;
    border-radius: 4px;
    object-fit: cover;
  }
  .experience .content-area .section-title {
    text-align: left;
    padding-bottom: 30px;
  }
  .experience .content-area .desc {
    font-family: var(--fontText);
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
  }
  .experience .content-area .progress-title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    color: #313131;
    margin-top: 30px;
  }
  .experience .content-area .progressbar {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    background-color: #ececec !important;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px !important;
  }
  .experience .content-area .progressbar .proggress {
    background-color: #ff6116 !important;
    height: 5px !important;
    border-radius: 4px !important;
  }
  .experience .content-area .progressbar .percentCount {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    float: right;
    margin-top: -40px;
    clear: both;
  }
  .experience .content-area .btn {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: #ff6116;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 10px 20px;
    transition: all 0.5s;
    margin-top: 20px;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .experience .content-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -150px;
    top: 0px;
    z-index: -1;
    transition: all 500ms ease;
    background-color: #ff8145;
  }
  .experience .content-area .btn:hover::before {
    left: 0;
  }
  /****** experience end ******/

  /******* counter start ********/
  .counter {
    padding: 70px 0px;
    background-image: url("../image/counter_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .counter .single-counter {
    text-align: center;
    position: relative;
  }
  .counter .count-num {
    font-family: var(--fontNum);
    font-weight: 600;
    font-size: 70px;
    color: #ffffff;
    position: relative;
    display: inline-block;
  }
  .counter .shape {
    position: absolute;
    top: -24%;
    left: 13%;
    width: 70px;
    height: 70px;
    background-image: url("../image/counter_circle.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .counter .count-num::before {
    content: "";
    width: 5px;
    height: 40px;
    background-color: #ffffff;
  }
  .counter .content-area {
    display: inline-block;
    margin-left: 20px;
    text-align: left;
    border-left: 2px solid #ffffff;
    padding-left: 20px;
    vertical-align: center;
  }
  .counter .content-area .designation {
    font-family: var(--fontNum);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
  }
  .counter .content-area .status {
    font-family: var(--fontNum);
    font-weight: 600;
    font-size: 22px;
    color: #ffffff;
    margin-top: 20px;
  }
  /******* counter start ********/

  /******* testimonial start *******/
  .testimonial {
    padding: 70px 0px;
    background-image: url("../image/map.png");
    position: relative;
  }
  .testimonial .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(188, 121, 121, 0.1);
  }
  .testimonial .single-testimonial {
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    margin-top: 50px;
    padding: 25px 40px 60px 40px;
  }
  .testimonial .single-testimonial .thum-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #ffc7ac;
    position: absolute;
    top: -41px;
    left: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .testimonial .single-testimonial .thum-box img {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
  .testimonial .single-testimonial .rating-box {
    text-align: right;
  }
  .testimonial .single-testimonial .rating-box .icon {
    font-weight: 400;
    color: #ff6116;
    margin: 0px 3px;
  }
  .testimonial .single-testimonial .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin: 20px 0px;
  }
  .testimonial .single-testimonial .name {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    color: #353535;
    display: inline-block;
  }
  .testimonial .single-testimonial .designation {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 14px;
    color: #353535;
    margin-left: 10px;
  }
  .testimonial .single-testimonial .quote {
    position: absolute;
    bottom: 10%;
    right: 13%;
  }
  .testimonial .single-testimonial .quote .icon {
    font-size: 60px;
    color: #ffe9de;
  }
  .testimonial .owl-carousel .owl-dots {
    margin-top: 20px;
    display: block;
    text-align: center;
  }
  .testimonial .owl-carousel .owl-dots .owl-dot {
    display: inline;
    width: 6px;
    height: 6px;
    background-color: #ff6116;
    border-radius: 50%;
    margin: 0px 5px;
  }
  .testimonial .owl-carousel .owl-dots .owl-dot.active {
    width: 30px;
    border-radius: 10px;
  }
  /********* testimonial end *********/

  /********* blog start *********/
  .blog {
    padding: 70px 0px;
  }
  .blog .single-blog {
    background-color: #ffffff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: all 0.5s;
  }
  .blog .single-blog:hover {
    transform: translateY(-10px);
  }
  .blog .single-blog .image-area {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
  }
  .blog .single-blog .image-area img {
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0px 0px;
    object-fit: cover;
    transition: all 0.5s;
  }
  .blog .single-blog:hover .image-area img {
    transform: scale(1.1);
  }
  .blog .single-blog .content-area {
    padding: 40px;
    position: relative;
  }
  .blog .single-blog .content-area .date-area {
    width: 60px;
    height: 60px;
    background-color: #ff6116;
    border-radius: 5%;
    text-align: center;
    position: absolute;
    top: -19%;
    right: 27px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .blog .single-blog .content-area .date-area .day {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 25px;
    color: #ffffff;
    margin-bottom: 4px;
  }
  .blog .single-blog .content-area .date-area .month {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
  }
  .blog .single-blog .content-area .category {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #ff6116;
    padding-left: 25px;
    position: relative;
  }
  .blog .single-blog .content-area .category::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #ff6116;
    position: absolute;
    top: 2px;
    left: -1px;
  }
  .blog .single-blog .content-area .title {
    margin-top: 30px;
  }
  .blog .single-blog .content-area .title a {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    color: #353535;
    transition: all 0.5s;
    line-height: 1.3;
  }
  .blog .single-blog .content-area .title a:hover {
    color: #ff6116;
  }
  .blog .single-blog .content-area .button-area {
    margin-top: 20px;
  }
  .blog .single-blog .content-area .button-area a {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 600;
    color: #353535;
    text-decoration: none;
    transition: all 0.5s;
  }
  .blog .single-blog .content-area .button-area a:hover {
    color: #ff6116;
  }
  .blog .single-blog .content-area .button-area a .icon {
    color: #353535;
    transition: all 0.5s;
  }
  .blog .single-blog .content-area .button-area a:hover .icon {
    color: #ff6116;
  }
  /******** blog end ********/

  /****** pricing start ******/
  .pricing {
    padding: 100px 0px;
  }
  .pricing .single-pricing {
    background-color: #ffffff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    border-radius: 3%;
    padding-bottom: 50px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
  }
  .pricing .single-pricing .price-header {
    background-color: #fbeee8;
    height: 312px;
    width: 100%;
    position: relative;
    transition: all 200ms ease;
  }
  .pricing .single-pricing:hover .price-header,
  .pricing .single-pricing.active .price-header {
    background-color: rgba(255, 97, 22, 0.2);
  }
  .pricing .single-pricing .price-header::before {
    content: "";
    width: 100%;
    height: 120%;
    background-color: #ffffff;
    position: absolute;
    bottom: -66%;
    border-radius: 50%;
    z-index: 1;
  }
  .pricing .single-pricing .price-header .price-tag {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 600;
    color: #db5e22;
    position: absolute;
    top: 20%;
    right: 8%;
  }
  .pricing .single-pricing .price-header .price-icon {
    position: absolute;
    top: 32%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
  .pricing .single-pricing .price-header .price-icon .icon-inner-2 {
    width: 85px;
    height: 85px;
    background-color: #d8591b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .pricing .single-pricing .price-header .price-icon .icon-inner-2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    transform: scale(0, 0);
    background-color: #d8591b;
    transition: all 500ms ease;
    z-index: -1;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2:hover::before {
    transform: scale(1, 1);
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2
    .icon-inner-1 {
    width: 40px;
    height: 40px;
    background-color: #db5e22;
    border-radius: 50%;
    border: 3px solid #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 500ms ease;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2:hover
    .icon-inner-1 {
    background: transparent;
    border-style: none;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2
    .icon-inner-1
    .icon {
    color: #ffffff;
    font-size: 25px;
    transition: all 500ms ease;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2:hover
    .icon-inner-1
    .icon {
    font-size: 40px;
  }
  .pricing .single-pricing .price-body .pricing-features {
    text-align: center;
  }
  .pricing .single-pricing .price-body .pricing-features li {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 500;
    margin-top: 25px;
    color: #616161;
  }
  .pricing .single-pricing .price-body .pricing-features li .icon-box {
    position: relative;
    margin-right: 20px;
    top: -1px;
  }
  .pricing .single-pricing .price-body .pricing-features li .icon-box .icon {
    width: 20px;
    height: 20px;
    border: 1px solid #db5e22;
    color: #db5e22;
    border-radius: 50%;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pricing .single-pricing .price-body {
    margin-top: 50px;
    position: relative;
    z-index: 12;
  }
  .pricing .single-pricing .price-button {
    text-align: center;
    margin-top: 30px;
  }
  .pricing .single-pricing .price-button .btn {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 600;
    background-color: #ff6116;
    color: #ffffff;
    text-transform: uppercase;
    border-style: none;
    box-shadow: none;
    outline-style: none;
    padding: 15px 30px;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    line-height: 1;
    overflow: hidden;
  }
  .pricing .single-pricing .price-button .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .pricing .single-pricing .price-button .btn:hover::before {
    left: 0;
  }
  .pricing .single-pricing .price {
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
  }
  .pricing .single-pricing .price .plan {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
    color: #353535;
    margin-bottom: 22px;
  }
  .pricing .single-pricing .price .currency-symbol {
    font-family: var(--fontTitle);
    font-size: 32px;
    font-weight: 700;
    color: #353535;
    display: inline-block;
    position: relative;
    top: -20px;
  }
  .pricing .single-pricing .price .amount {
    font-weight: var(--fontTitle);
    font-weight: 700;
    font-size: 65px;
    color: #db5e22;
    display: inline-block;
  }
  .pricing .single-pricing .price .duration {
    font-family: var(--fontTitle);
    font-size: 20px;
    font-weight: 500;
    color: #d8591b;
    display: inline-block;
  }
  /****** pricing end ******/

  /************ sidebar start *************/
  .sidebar .sidebar-widget {
    padding: 35px 30px;
    background-color: #f6f6f6;
    margin-bottom: 40px;
    border-radius: 5px;
  }
  .sidebar .sidebar-widget .widget-title {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 18px;
    color: #353535;
    position: relative;
    margin-bottom: 30px;
  }
  .sidebar .sidebar-widget .widget-title::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0px;
    width: 30px;
    height: 2px;
    background-color: #ff6116;
    animation: sidebar-title-before-animation 1000ms infinite alternate;
  }
  .sidebar .sidebar-widget .widget-title::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 40px;
    width: 10px;
    height: 2px;
    background-color: #ff6116;
    animation: sidebar-title-after-animation 1000ms infinite alternate;
  }
  .sidebar .sidebar-widget .widget-content .category-list li {
    padding-left: 20px;
    margin: 13px 0px;
    position: relative;
  }
  .sidebar .sidebar-widget .widget-content .category-list li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #ff6116;
    border-radius: 50%;
  }
  .sidebar .sidebar-widget .widget-content .category-list li a {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #353535;
    text-decoration: none;
    position: relative;
  }
  .sidebar .sidebar-widget .widget-content .category-list li a::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 0%;
    background-color: #ff6116;
    bottom: -2px;
    transition: all 500ms ease;
  }
  .sidebar .sidebar-widget .widget-content .category-list li a:hover::before {
    width: 100%;
  }
  .sidebar .sidebar-widget .post-inner {
    margin-top: 20px;
  }
  .sidebar .sidebar-widget .post-inner .post {
    position: relative;
    padding-left: 115px;
    margin-top: 30px;
  }
  .sidebar .sidebar-widget .post-inner .post .post-thum {
    position: absolute;
    top: 5px;
    left: 0;
  }
  .sidebar .sidebar-widget .post-inner .post .post-thum img {
    width: 90px;
    height: 90px;
    border-radius: 5px;
    object-fit: cover;
  }
  .sidebar .sidebar-widget .post-inner .post .desc {
    margin-bottom: 15px;
  }
  .sidebar .sidebar-widget .post-inner .post .desc a {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    text-transform: capitalize;
    color: #353535;
    line-height: 1.5;
  }
  .sidebar .sidebar-widget .post-inner .post .date {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    color: #ff6116;
  }
  .sidebar .tag-widget .tags-list {
    display: flex;
    flex-wrap: wrap;
  }
  .sidebar .tag-widget .tags-list li {
    margin-right: 10px;
    margin-bottom: 30px;
  }
  .sidebar .tag-widget .tags-list li a {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    padding: 5px 14px;
    text-decoration: none;
    background-color: #ffffff;
    color: #353535;
    transition: all 500ms ease;
    position: relative;
    z-index: 1;
    border-radius: 4px;
  }
  .sidebar .tag-widget .tags-list li a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #ff6116;
    transform: scale(0, 1);
    transition: all 500ms ease;
    z-index: -1;
    border-radius: 4px;
  }
  .sidebar .tag-widget .tags-list li a:hover::before {
    transform: scale(1, 1);
  }
  .sidebar .tag-widget .tags-list li a:hover {
    color: #ffffff;
  }
  .sidebar .sidebar-widget .search-form {
    position: relative;
  }
  .sidebar .sidebar-widget .search-form .form-group {
    position: relative;
  }
  .sidebar .sidebar-widget .search-form .form-group button {
    background-color: #ffffff;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 14px;
    color: #e6e6e6;
    cursor: pointer;
    transition: all 500ms ease;
    border-style: none;
    width: 50px;
    bottom: 0;
  }
  .sidebar .sidebar-widget .search-form .form-group input {
    padding: 10px 10px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    color: #616161;
  }
  .sidebar .sidebar-widget .search-form .form-group input::placeholder {
    text-transform: capitalize;
    color: #e6e6e6;
  }
  .sidebar .sidebar-widget .search-form .form-group input:focus {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  .sidebar .support-widget {
    background-image: url("../image/contact_bg.png");
    width: 100%;
    height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    position: relative;
    overflow: hidden;
  }
  .sidebar .support-widget .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .sidebar .support-widget .shape {
    position: absolute;
    top: -50px;
    left: -118px;
    background-image: url("../image/contact_shape.png");
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    z-index: 10;
  }
  .sidebar .support-widget .widget-content {
    text-align: center;
    position: absolute;
    top: 25%;
    left: 15%;
    right: 15%;
    z-index: 200;
  }
  .sidebar .support-widget .widget-content form input {
    float: left;
    width: 70%;
    font-size: 16px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    border-radius: 3px 0px 0px 3px;
  }
  .sidebar .support-widget .widget-content form input::placeholder {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #1c1c1c;
  }
  .sidebar .support-widget .widget-content form .btn {
    float: left;
    width: 30%;
    background-color: #ff6116;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    color: #ffffff;
    border-radius: 0px 3px 3px 0px;
  }
  .sidebar .support-widget .widget-content .info {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #db5e22;
    margin-bottom: 15px;
  }
  .sidebar .support-widget .widget-content .title {
    font-family: var(--fontTitle);
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 20px;
  }
  .sidebar .support-widget .widget-content .number {
    font-family: var(--fontTitle);
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .sidebar .support-widget .widget-content .label {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 20px;
  }
  .sidebar-title-section {
    text-align: left;
    padding-bottom: 30px;
  }
  .sidebar-title-section h2 {
    font-family: var(--fontTitle);
    color: #db5e22;
    font-size: 18px;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    font-weight: 600;
  }
  .sidebar-title-section h2::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0px;
    width: 50px;
    height: 2px;
    animation: title-before 1s infinite alternate;
    background-color: #db5e22;
  }
  .sidebar-title-section h2::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 65px;
    width: 20px;
    height: 2px;
    background-color: #db5e22;
    animation: title-after 1s infinite alternate;
  }
  .sidebar-title-section h3 {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 700;
    color: #353535;
    text-transform: capitalize;
    margin-top: 25px;
    line-height: 1.1;
  }
  /************ sidebar end *************/

  /******* service start ******/
  .service {
    padding: 70px 0px;
    background-color: #fff0e9;
    position: relative;
    overflow: hidden;
  }
  .service .shape {
    background-image: url("../image/service_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -229px;
    left: -192px;
    width: 520px;
    height: 510px;
  }
  .service .single-service {
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    z-index: 1;
  }
  .service.single-page .single-service {
    margin-bottom: 40px;
    border-radius: 0px 0px 5px 5px;
  }
  .service .single-service .image-area {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
  }
  .service .single-service .image-area a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
  }
  .service .single-service:hover .image-area a img {
    transform: scale(1.1);
  }
  .service .single-service .content-area {
    padding: 50px 40px 40px 40px;
    position: relative;
  }
  .service .single-service .content-area .icon-box {
    width: 45px;
    height: 45px;
    background-color: #ff6116;
    position: absolute;
    top: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5%;
  }
  .service .single-service:hover .content-area .icon-box {
    animation-name: service-iconbox-rotate;
    animation-duration: 1s;
  }
  .service .single-service .content-area .icon-box .icon {
    font-size: 25px;
    color: #ffffff;
  }
  .service .single-service .content-area .title a {
    font-family: var(--fontTitle);
    color: #353535;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.5s;
  }
  .service .single-service .content-area .title a:hover {
    color: #ff6116;
  }
  .service .single-service .content-area .desc {
    font-family: var(--fontText);
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin-top: 20px;
  }
  .service .single-service .content-area .button-area {
    margin-top: 20px;
  }
  .service .single-service .content-area .button-area a {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    color: #353535;
    text-decoration: none;
    transition: all 0.5s;
  }
  .service .single-service .content-area .button-area a:hover {
    color: #ff6116;
  }
  .service .single-service .content-area .button-area a .icon {
    font-size: 14px;
    color: #353535;
    transition: all 0.5s;
  }
  .service .single-service .content-area .button-area a:hover .icon {
    color: #ff6116;
  }
  /******* service end *******/

  /****** service details start ******/
  .service-details {
    padding: 70px 0px;
  }
  .service-details .service {
    background-color: #ffffff;
  }
  .service-details .service .single-service {
    background-color: #f3f7fa;
    border-radius: 5px;
  }
  .service-details .service-details-content .img-area {
    margin-bottom: 30px;
  }
  .service-details .service-details-content .img-area img {
    width: 100%;
    height: 420px;
    border-radius: 5px;
    object-fit: cover;
  }
  .service-details .service-details-content .content-area .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 40px;
    color: #353535;
    margin-bottom: 30px;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .service-details .service-details-content .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
  }
  .service-details .service-details-content .features {
    background-color: #f3f7fa;
    padding: 30px 20px;
    padding-left: 120px;
    position: relative;
    margin-top: 50px;
    border-radius: 5px;
  }
  .service-details .service-details-content .features .icon-box {
    position: absolute;
    top: 25%;
    left: 10%;
  }
  .service-details .service-details-content .features .icon-box .icon img {
    width: 50px;
  }
  .service-details .service-details-content .features .title {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 24px;
    color: #353535;
    margin-bottom: 10px;
  }
  .service-details .service-details-content .features .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
  }
  /******** service details end ********/

  /****** project start ******/
  .project {
    padding: 70px 0px;
  }
  .project .item-menu {
    text-align: center;
    margin-bottom: 50px;
  }
  .project .item-menu ul li {
    font-family: var(--fontTitle);
    font-size: 20px;
    font-weight: 500;
    color: #353535;
    display: inline-block;
    margin: 0px 10px;
    cursor: pointer;
    position: relative;
  }
  .project .item-menu ul li.active {
    color: #db5e22;
  }
  .project .item-menu ul li::after {
    content: "";
    width: 80%;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: #db5e22;
    position: absolute;
    bottom: -5px;
    transform: scale(0, 1);
    transition: all 0.5s;
  }
  .project .item-menu ul li.active::after {
    transform: scale(1, 1);
  }
  .project .item-details {
    padding: 0px;
    margin: 0px;
  }
  .project .item-details .item {
    margin-bottom: 20px;
    overflow: hidden;
  }
  .project .item-details .item .image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 5px;
  }
  .project .item-details .item {
    position: relative;
  }
  .project .item-details .item .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    left: 12px;
    transform: scale(0, 0);
    background-color: rgba(255, 176, 138, 0.5);
    transition: all 500ms ease;
  }
  .project .item-details .item:hover .overlay {
    background-color: rgba(255, 176, 138, 0.5);
    transform: scale(1, 1);
  }
  .project .item-details .item .content {
    position: absolute;
    right: 20%;
    left: 20%;
    bottom: -40%;
    background-color: #302e2e;
    z-index: 100;
    padding: 30px 30px;
    transition: all 500ms !important;
  }
  .project .item-details .item:hover .content {
    bottom: 20%;
  }
  .project .item-details .item .content .info {
    float: left;
  }
  .project .item-details .item .content .info .title {
    margin-bottom: 8px;
  }
  .project .item-details .item .content .icon {
    float: right;
  }
  .project .item-details .item .content .title a {
    font-family: var(--fontTitle);
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
  }
  .project .item-details .item .content .category a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
  }
  .project .item-details .item .content .icon-area .icon {
    color: #ffffff;
    font-size: 25px;
    margin-top: 10px;
  }
  .project .item-details .btn-area {
    text-align: center;
    margin-top: 30px;
  }
  .project .item-details .btn-area .btn {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    background-color: #ff6116;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 10px 20px;
    position: relative;
    z-index: 2;
    line-height: 1;
  }
  .project .item-details .btn-area .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
    border-radius: 4px;
  }
  .project .item-details .btn-area .btn:hover::before {
    width: 100%;
  }
  .project .item-details .btn-area .btn:focus {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  /****** project end ******/

  /****** portfolio details start  ******/
  .project-details {
    padding: 70px 0px;
  }
  .project-details .section-title {
    text-align: left;
    padding-bottom: 30px;
  }
  .project-details .project-details-content img {
    width: 100%;
    object-fit: cover;
    height: 720px;
    border-radius: 5px;
  }
  .project-details .project-details-sidebar {
    background-color: #f6f6f6;
    padding: 30px;
    border-radius: 5px;
  }
  .project-details .project-details-sidebar .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
    margin-bottom: 30px;
  }
  .project-details .project-details-sidebar .info-list li {
    padding-left: 20px;
    margin-bottom: 15px;
    position: relative;
    font-size: 16px;
  }
  .project-details .project-details-sidebar .info-list li .label {
    font-family: var(--fontTitle);
    font-weight: 600;
    margin-right: 7px;
  }
  .project-details .project-details-sidebar .info-list li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #ff6116;
    border-radius: 50%;
  }
  .project-details .project-silder {
    margin-top: 70px;
  }
  .project-details .project-silder .item img {
    width: 100%;
    height: 300px;
    border-radius: 7px;
    object-fit: cover;
  }
  /****** portfolio details end  ******/

  /****** faq start ******/
  .faq {
    padding: 70px 0px;
  }
  .faq .section-title {
    text-align: left;
  }
  .faq .section-title .desc {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 400;
    color: #353535;
    margin-top: 35px;
    line-height: 1.7;
  }
  .faq .faq-accordion .accordion {
    border-style: none;
  }
  .faq .faq-accordion .accordion .accordion-item {
    margin-bottom: 20px;
    border-style: none;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-button {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 700;
    color: #353535;
    padding: 10px;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-button::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    content: "\f107";
    background: none;
  }
  .faq
    .faq-accordion
    .accordion
    .accordion-item
    .accordion-button[aria-expanded="true"] {
    background-color: #ffffff;
    color: #db5e22;
  }
  .faq
    .faq-accordion
    .accordion
    .accordion-item
    .accordion-button[aria-expanded="true"]::after {
    transform: rotate(-90deg);
    color: #db5e22;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-body {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 400;
    color: #616161;
    line-height: 1.7;
    background-color: #f7f7f7;
    padding: 15px 20px;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-button:focus {
    border-style: none;
    box-shadow: none;
    outline-style: none;
  }
  /****** faq end ******/

  /****** blog start  ******/
  .blog-standard {
    padding: 70px 0px;
  }
  .blog-standard .blog-standard-content {
    margin-bottom: 50px;
  }
  .blog-standard .blog-standard-content .img-area img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .blog-standard .blog-standard-content .img-area {
    position: relative;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
  }
  .blog-standard .blog-standard-content .img-area .overlay {
    position: absolute;
    top: 0;
    bottom: -300px;
    right: 0;
    left: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.8) 100%
    );
    transition: all 1000ms ease;
  }
  .blog-standard .blog-standard-content:hover .img-area .overlay {
    top: 0;
    bottom: 0;
  }
  .blog-standard .blog-standard-content .content-area {
    padding: 40px;
    border: 1px solid #fea578;
    border-radius: 0px 0px 5px 5px;
    position: relative;
  }
  .blog-standard .blog-standard-content .content-area .title a {
    font-family: var(--fontTitle);
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
    color: #ffffff;
    position: absolute;
    top: -80px;
    text-decoration: none;
  }
  .blog-standard .blog-standard-content .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin-bottom: 35px;
  }
  .blog-standard .blog-standard-content .content-area .meta-tags {
    width: 100%;
    line-height: 3;
  }
  .blog-standard .blog-standard-content .content-area .btn-area {
    display: inline-block;
  }
  .blog-standard .blog-standard-content .content-area .btn-area .btn {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 16px;
    background-color: #ff6116;
    color: #ffffff;
    padding: 8px 20px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .blog-standard .blog-standard-content .content-area .btn-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -120px;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .blog-standard
    .blog-standard-content
    .content-area
    .btn-area
    .btn:hover::before {
    left: 0;
  }
  .blog-standard .blog-standard-content .content-area .date {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 500;
    color: #ff6116;
    margin: 0px 90px;
  }
  .blog-standard .blog-standard-content .content-area .category {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    color: #ff6116;
    text-decoration: none;
  }
  /****** blog end ******/

  /****** blog details start ******/
  .blog-details {
    padding: 100px 0px;
  }
  .blog-details .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 40px;
    text-transform: capitalize;
    margin: 40px 0px;
    color: #353535;
    line-height: 1.1;
  }
  .blog-details .img-area img {
    width: 100%;
    height: 410px;
    object-fit: cover;
    border-radius: 5px;
  }
  .blog-details .blog-details-content {
    position: relative;
    margin-bottom: 50px;
  }
  .blog-details .blog-details-content .date {
    position: absolute;
    bottom: -27px;
    left: 5%;
    background-color: #ff6116;
    padding: 5px 20px;
    text-align: center;
  }
  .blog-details .blog-details-content .date .day {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 5px;
  }
  .blog-details .blog-details-content .date .month {
    font-family: var(--fontTitle);
    font-size: 20px;
    color: #ffffff;
  }
  .blog-details .blog-details-content .meta {
    position: absolute;
    bottom: -15px;
    left: 17%;
    background-color: #ff6116;
    padding: 10px;
  }
  .blog-details .blog-details-content .meta li {
    display: inline-block;
    padding-left: 20px;
    position: relative;
    margin: 0px 5px;
    text-transform: capitalize;
  }
  .blog-details .blog-details-content .meta li::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 5px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
  }
  .blog-details .blog-details-content .meta li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
  }
  .blog-details .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
  }
  .blog-details blockquote {
    background-color: #ffeee6;
    padding: 30px;
    border-left: 3px solid #db5e22;
    margin: 50px 0px;
  }
  .blog-details blockquote .icon-box {
    float: left;
    margin-right: 40px;
  }
  .blog-details blockquote .icon-box .icon {
    font-size: 40px;
    color: #db5e22;
  }
  .blog-details blockquote .quote {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
  }
  .blog-details blockquote .name {
    font-family: var(--fontText);
    font-size: 16px;
    color: #616161;
    text-transform: uppercase;
    padding-left: 75px;
    margin-top: 5px;
  }
  .blog-details .image {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 50px;
  }
  .blog-details .image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 5px;
  }
  .blog-details .list li {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 18px;
    color: #616161;
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px;
  }
  .blog-details .list li .icon {
    color: #db5e22;
    margin-right: 20px;
    position: absolute;
    top: 0;
    left: 0;
  }
  /****** blog details end ******/

  /****** career start ******/
  .career {
    padding: 70px 0px;
    background-color: #f6f7f8;
  }
  .career .job-list .job-item {
    background-color: #ffffff;
    position: relative;
    padding: 30px 0px;
    padding-left: 150px;
    margin-bottom: 30px;
    transition: all 1s;
    border-radius: 5px;
  }
  .career .job-list .job-item:hover {
    background-color: #ff6116;
  }
  .career .job-list .job-item .icon-area {
    width: 80px;
    height: 80px;
    background-color: #f6f7f8;
    border: 3px solid #ff6116;
    position: absolute;
    top: 15px;
    left: 20px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s;
  }
  .career .job-list .job-item:hover .icon-area {
    background-color: #ffffff;
  }
  .career .job-list .job-item .icon-area {
    color: #ff6116;
    font-size: 40px;
  }
  .career .job-list .job-item .job-category {
    font-family: var(--fontTitle);
    font-size: 25px;
    font-weight: 600;
    color: #353535;
    margin-bottom: 10px;
    transition: all 0.2s;
  }
  .career .job-list .job-item:hover .job-category {
    color: #ffffff;
  }
  .career .job-list .job-item .job-desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    transition: all 0.2s;
  }
  .career .job-list .job-item:hover .job-desc {
    color: #ffffff;
  }
  .career .job-list .job-item .apply-btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    float: right;
    border: 2px solid #ff6116;
    background-color: #ffffff;
    color: #353535;
    box-shadow: none;
    outline-style: none;
    position: absolute;
    right: 5%;
    bottom: 35%;
    font-size: 18px;
    transition: all 0.2s;
  }
  /****** career end ******/

  /****** career solution start ******/
  .career-features {
    padding: 70px 0px;
  }
  .career-features .section-title {
    text-align: left;
    padding-bottom: 40px;
  }
  .career-features .content .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
    margin-bottom: 30px;
  }
  .career-features .content .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    background-color: #ff6116;
    color: #ffffff;
    padding: 10px 20px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    transition: all 0.5s;
    z-index: 1;
    position: relative;
    overflow: hidden;
  }
  .career-features .content .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: -150px;
    z-index: -1;
    background-color: #ff8145;
    transition: all 500ms ease;
  }
  .career-features .content .btn:hover::before {
    left: 0;
  }
  .career-features .features .feature-box {
    font-family: var(--fontTitle);
    font-weight: 600;
    background-color: #ffffff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .career-features .features .feature-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0%;
    bottom: 0;
    left: 0;
    background-color: #ff6116;
    transition: all 500ms ease;
    z-index: -1;
  }
  .career-features .features .feature-box:hover::before {
    height: 100%;
    top: 0;
  }
  .career-features .features .feature-box.first-item {
    margin-top: 30px;
  }
  .career-features .features .feature-box .icon-area {
    width: 75px;
    height: 75px;
    background-color: #f6f7f8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  .career-features .features .feature-box .icon-area .icon {
    font-size: 25px;
    color: #ff6116;
  }
  .career-features .features .feature-box .title {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 1.3;
    transition: all 500ms ease;
  }
  .career-features .features .feature-box:hover .title {
    color: #ffffff;
  }
  /****** career solution end ******/

  /****** contact start ******/
  .contact {
    padding: 80px 0px;
    background-color: #ffffff;
  }
  .contact .section-title {
    text-align: left !important;
  }
  .contact .contact-form {
    background-color: #f6f7f8;
    padding: 50px 30px;
    border-radius: 5px;
  }
  .contact .contact-form .form-label {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 35px;
    color: #353535;
    line-height: 1.5;
  }
  .contact .contact-form .form-group {
    margin-bottom: 35px;
  }
  .contact .contact-form label {
    font-family: var(--fontText);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #353535;
  }
  .contact .contact-form input,
  .contact .contact-form textarea,
  .contact .contact-form select {
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 12px 15px;
    position: relative;
    border-bottom: 2px solid transparent;
    border-width: 1px;
    transition: all 500ms ease;
    color: #616161;
    font-size: 16px;
  }
  .contact .contact-form input::placeholder,
  .contact .contact-form textarea::placeholder,
  .contact .contact-form select::placeholder,
  .contact .contact-form select {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 400;
    color: #9da4a8;
  }
  .contact .contact-form input:focus,
  .contact .contact-form textarea:focus,
  .contact .contact-form select:focus {
    border-color: #ff6116;
  }
  .contact .contact-form input:hover,
  .contact .contact-form textarea:hover,
  .contact .contact-form select:hover {
    border-width: 1px;
  }
  .contact .contact-form button {
    font-family: var(--fontTitle);
    font-weight: 600;
    padding: 15px 20px;
    background-color: #ff6116;
    border-style: none;
    outline-style: none;
    box-shadow: none;
    color: #ffffff;
    border-radius: 5%;
    transition: all 0.5s;
    z-index: 1;
    position: relative;
    overflow: hidden;
    font-size: 16px;
  }
  .contact .contact-form button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .contact .contact-form button:hover::before {
    left: 0;
  }
  .contact .contact-info .contact-box {
    float: left;
    background-color: #f6f7f8;
    padding: 44px 30px;
    position: relative;
    margin-bottom: 46px;
    width: 100%;
    border-radius: 5px;
  }
  .contact .contact-info .contact-box .contact-box-icon {
    float: left;
    display: flex;
    justify-content: center;
  }
  .contact .contact-info .contact-box .contact-box-icon .icon img {
    width: 50px;
  }
  .contact .contact-info .contact-box:hover .contact-box-icon .icon {
    color: #ffffff;
  }
  .contact .contact-info .contact-box .contact-box-content {
    padding-left: 80px;
  }
  .contact .contact-info .contact-box .contact-box-content .title {
    font-family: var(--fontTitle);
    color: #353535;
    font-size: 24px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 15px;
  }
  .contact .contact-info .contact-box .contact-box-content .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: #616161;
  }
  .site-map {
    height: 400px;
  }
  /****** contact end ******/

  /****** error section start ******/
  .erorr-section {
    padding: 70px 0px;
  }
  .erorr-section .error-text {
    text-align: center;
  }
  .erorr-section .error-text .error-code {
    font-family: var(--fontTitle);
    font-size: 100px;
    font-weight: 600;
    color: #353535;
    margin-bottom: 20px;
  }
  .erorr-section .error-text .error-title {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 600;
    color: #353535;
    margin-bottom: 15px;
  }
  .erorr-section .error-text .error-desc {
    font-family: var(--fontTitle);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 50px;
    color: #353535;
  }
  .erorr-section .error-text .error-button {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 600;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    background-color: #ff6116;
    color: #ffffff;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .erorr-section .error-text .error-button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -100%;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .erorr-section .error-text .error-button:hover::before {
    left: 0;
  }
  /****** error section end ******/

  /****** subscribe start  ******/
  .subscribe {
    position: relative;
  }
  .subscribe .bg-color {
    background-color: #ff6116;
    padding: 50px;
    position: absolute;
    top: -50px;
    left: 140px;
    right: 140px;
    border-radius: 7px;
    z-index: 100;
  }
  .subscribe .subscribe-info .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 45px;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: capitalize;
  }
  .subscribe .subscribe-info .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
  }
  .subscribe .subscribe-form {
    margin-top: 10px;
  }
  .subscribe .subscribe-form input {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 18px;
    float: left;
    width: 75%;
    padding: 10px 20px;
    border-radius: 4px 0px 0px 4px;
    color: #616161;
  }
  .subscribe .subscribe-form .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 18px;
    width: 25%;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #1c1c1d;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: 0px 4px 4px 0px;
  }
  .subscribe .subscribe-form input,
  .subscribe .subscribe-form button {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  .subscribe .subscribe-form input::placeholder {
    font-family: var(--fontNum);
    font-size: 16px;
    font-weight: 400;
    color: #616161;
  }
  /****** subscribe end  ******/

  /***** call us start *****/
  .call-us {
    position: relative;
    bottom: -80px;
    z-index: 1;
    overflow: hidden;
  }
  .call-us .bg-area {
    background-color: #ff6116;
    border-radius: 5px;
    padding: 50px 0px;
    position: relative;
  }
  .call-us .shape {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 25%;
    background-image: url(../image/2222.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 100;
  }
  .call-us .bg-area .text-area {
    padding-left: 50px;
  }
  .call-us .bg-area .text-area h2 {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    position: relative;
    margin-bottom: 25px;
  }
  .call-us .bg-area .text-area h2::after {
    content: "";
    width: 100px;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    top: 8px;
    left: 155px;
  }
  .call-us .bg-area .text-area p {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 36px;
    color: #ffffff;
  }
  .call-us .bg-area .icon-inner {
    display: flex;
    justify-content: end;
  }
  .call-us .bg-area .icon-area {
    width: 70px;
    height: 70px;
    font-size: 26px;
    border: 10px solid #ffffff;
    background-color: #ff6116;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.5s;
    transform: translateX(-30px);
    z-index: 100;
  }
  .call-us .bg-area .icon-area::before,
  .call-us .bg-area .icon-area:after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.1s;
    content: "";
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
    animation: ripple 3s infinite;
    transition: all 0.4s ease;
  }
  .call-us .bg-area .icon-area .icon {
    color: #ffffff;
  }
  .call-us .bg-area .shape-bg {
    background-image: url("https://www.hitechparks.com/web/template/toko-corporate/assets/images/call-us-bg.png");
    position: absolute;
    top: 0;
    right: 200px;
    z-index: 100;
  }
  /***** call us end *****/

  /***** footer start *****/
  .footer-top {
    padding: 200px 0px 80px;
    background: url("../image/footer_bg_shape.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .footer-top.main-page {
    padding: 150px 0px 80px;
  }
  .footer-top .footer-list p {
    font-family: var(--fontText);
    font-size: 16px;
    text-transform: capitalize;
    color: #c8c8c8;
    line-height: 1.7;
    margin-top: 38px;
  }
  .footer-top .footer-list .footer-social-icon {
    padding: 0px !important;
    list-style-type: none;
    margin-top: 30px;
  }
  .footer-top .footer-list .footer-social-icon li {
    display: inline-block;
  }
  .footer-top .footer-list .footer-social-icon li a {
    float: left;
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border-radius: 5%;
    font-size: 18px;
    color: #ff6116;
    transition: all 0.5s;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    transition: all 0.5s;
  }
  .footer-top .footer-list .footer-social-icon li a:hover {
    color: #ffffff;
  }
  .footer-top .footer-list .footer-social-icon li a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ff6116;
    border-radius: 5%;
    transform: scale(0, 0);
    left: 0px;
    top: 0px;
    z-index: -1;
    transition: all 500ms ease;
  }
  .footer-top .footer-list .footer-social-icon li a:hover::before {
    transform: scale(1, 1);
  }
  .footer-top .footer-list .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 28px;
    color: #ff6116;
    text-transform: uppercase;
    margin-bottom: 40px;
  }
  .footer-top .footer-list .footer-nav-links {
    padding: 0px;
    margin-top: 20px;
    list-style-type: none;
  }
  .footer-top .footer-list .footer-nav-links li {
    margin-bottom: 22px;
  }
  .footer-top .footer-list .footer-nav-links li a {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    text-transform: capitalize;
    color: #c8c8c8;
    padding-left: 35px;
    position: relative;
  }
  .footer-top .footer-list .footer-nav-links li a::before {
    content: "";
    width: 14px;
    height: 2px;
    background-color: #c8c8c8;
    position: absolute;
    top: 9px;
    left: 6px;
    transition: all 0.5s;
  }
  .footer-top .footer-list .footer-nav-links li a:hover::before {
    background-color: #ff6116;
    left: 12px;
  }
  .footer-top .footer-list .address-widget {
    padding: 0px;
    list-style-type: none;
    margin-top: 25px;
  }
  .footer-top .footer-list .address-widget li {
    margin-bottom: 0px;
    padding-bottom: 60px;
  }
  .footer-top .footer-list .address-widget li .icon-area {
    float: left;
    width: 13%;
  }
  .footer-top .footer-list .address-widget li .icon {
    font-size: 23px;
    color: #ff6116;
  }
  .footer-top .footer-list .address-widget li .desc {
    font-family: var(--fontText);
    float: left;
    width: 87%;
    color: #c8c8c8;
    font-size: 16px;
    position: relative;
    line-height: 1.5;
  }
  .footer-Links {
    padding: 0rem 2rem;
    background-color: #ad0910;
    color: white;
  }
  .footer-Links .linksRow {
    display: flex;
  }
  .footer-Links .linksRow ul {
    padding: 0.5rem 0.2rem;
    margin: 0.5rem;
    color: #9797a1;
  }
  .footer-Links .linksRow ul li:nth-child(1) {
    color: white !important;
  }
  .footer-bottom {
    padding: 10px 0px 10px;
    background-color: #a31016;
    /* border-top: 1px solid #302e2e; */
  }

  .footer-bottom .copyright-info p {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
  .footer-bottom .footer-menu .footer-nav {
    text-align: right;
    list-style-type: none;
    padding: 0px;
  }
  .footer-bottom .footer-menu .footer-nav li {
    display: inline-block;
    margin-right: 10px;
    position: relative;
  }
  .footer-bottom .footer-menu .footer-nav li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: 7px;
    right: -8px;
  }
  .footer-bottom .footer-menu .footer-nav li:last-child::before {
    display: none;
  }
  .footer-bottom .footer-menu .footer-nav li a {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    transition: all 500ms ease;
  }
  .footer-bottom .footer-menu .footer-nav li a:hover {
    color: #ff6116;
  }
  /******* footer end ********/

  /****** animation start ******/
  @keyframes shape-position-change {
    0% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(20px);
    }
  }

  @keyframes brand-shape-rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }

  @keyframes service-iconbox-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes preloader {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }

  @keyframes sidebar-title-before-animation {
    0% {
      width: 0px;
    }
    100% {
      width: 30px;
    }
  }

  @keyframes sidebar-title-after-animation {
    0% {
      width: 0px;
    }
    100% {
      width: 10px;
    }
  }

  @keyframes title-before {
    0% {
      width: 0px;
    }
    100% {
      width: 50px;
    }
  }

  @keyframes title-after {
    0% {
      width: 0px;
    }
    100% {
      width: 20px;
    }
  }

  @keyframes ripple {
    70% {
      box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
  /****** animation end ******/

  /******新闻中心  news********/
  .news {
    background-image: url(../img/hp_xwzx_bg_img@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 10rem;
  }
  .news .titlePart {
    font-size: 2rem;
    margin: auto;
    text-align: center;
  }
  .news .contentPart {
    display: flex;
    /* margin: auto; */
    /* text-align: center; */
    justify-content: center;
    margin-top: 1rem;
    margin-left: 0.5rem;
  }

  .news .contentPart .imgPart {
    width: 30%;
  }
  .news .contentPart .imgPart img {
    width: 100%;
    height: 100%;
  }
  .news .contentPart .titlePart {
  }
  .news .contentPart .titlePart img {
    padding: 2rem 10rem;
    width: 100%;
  }
  .news .contentPart .textPart {
    width: 70%;
    padding-left: 1rem;
  }
  .news .contentPart .textPart .textTitleul {
    display: flex;
  }
  .news .contentPart .textPart .textTitleul .activeClass {
    background-color: #cc1a21 !important;
    color: white !important;
    padding: 0.5rem 2rem;
    margin: 0 1px 1rem 1px;
    border-radius: 0.3rem;
  }
  .news .contentPart .textPart .textTitleul .baseClass {
    background-color: #f4f4f4;
    color: black;
    padding: 0.5rem 4rem;
    margin: 0 1px 1rem 1px;
    border-radius: 0.3rem;
    width: 33.3%;
    text-align: center;
  }

  .news .contentPart .textPart .textList1,
  .textList2,
  .textList3 {
    font-size: small;
    color: black;
  }
  .news .contentPart .textPart .textList1 li {
    /* padding: 1.4rem; */
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: calc(100vw/30);
    letter-spacing: 2px;
    display: flex;
  }
  .news .contentPart .textPart .textList1 li .text {
    display: inline-block;
    width: 80%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .news .contentPart .textPart .textList1 li .time {
    display: inline-block;
    width: 20%;
    text-align: right;
  }
  .news .contentPart .textPart .textList2 li {
    padding: 0.5rem;
  }
  .news .contentPart .textPart .textList3 li {
    padding: 0.5rem;
  }
  .news .contentPart .textPart .textList1 li::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: #313131;
    vertical-align: middle;
    margin-right: 1rem;
    position: relative;
    top: 1.8rem;
  }
  .news .contentPart .textPart .textList2 li::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: #313131;
    vertical-align: middle;
    margin-right: 1rem;
  }
  .news .contentPart .textPart .textList3 li::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: #313131;
    vertical-align: middle;
    margin-right: 1rem;
  }
  /******主营业务  mainBusiness********/
  .mainBusiness {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1rem 10rem;
  }
  .mainBusiness .titlePart {
    font-size: 2rem;
    margin: auto;
    text-align: center;
  }
  .mainBusiness .subtitlePart {
    margin: auto;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
  }
  .mainBusiness .picsPart {
    text-align: center;
  }
  .mainBusiness .content{
    display: flex;
  }
  .mainBusiness .content .left{
    width: 40%;
  }
  .mainBusiness .content .el-carousel__item{
    display: flex;
  }
  .mainBusiness .content .el-carousel__container{
    height: calc(100vw/8) !important;
  }
  .mainBusiness .content .left .pic1 {
    width: 50%;
    padding: 0.5rem;
  }
  .mainBusiness .content .left .pic1 img{
    width: 100%;
    height: 100%;
  }
  .mainBusiness .content .left .pic2 {
    width: 50%;
    padding: 0.5rem;
  }
  .mainBusiness .content .left .pic2 img {
    width: 100%;
    height: 100%;
  }
  .mainBusiness .content .middle{
    width: 20%;
    padding: 1rem;
    height: calc(100vw/7) !important;

  }
  .mainBusiness .content .right{
    width: 40%;
  }
  .mainBusiness .content .right .pic1 {
    width: 50%;
    padding:0.5rem;
  }
  .mainBusiness .content .right .pic1 img{
    width: 100%;
    height: 100%;
  }
  .mainBusiness .content .right .pic2 {
    width: 50%;
    padding:0.5rem;
  }
  .mainBusiness .content .right .pic2 img{
    width: 100%;
    height: 100%;
  }
  /******关于隆达  aboutLongda*  *******/
  .aboutLongda {
    background-image: url(../img/hp_gyld_bg_img@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem 10rem;
  }
  .aboutLongda .titlePart {
    font-size: 2rem;
    margin: auto;
    text-align: center;
  }
  .aboutLongda .subtitlePart {
    margin: auto;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: left;
    padding: 2rem 5rem;
  }
  .aboutLongda .subtitlePart p {
    padding: 1rem;
    text-indent: 2em;
    line-height: 3rem;
  }
  .aboutLongda .picsPart {
    display: flex;
    justify-content: center;
  }
  .aboutLongda .picsPart .item {
    width: 12%;
    padding: 1rem;
    text-align: center;
    margin: 1rem;
    border: #efefef 1px solid;
  }
  .aboutLongda .picsPart .item img {
    width: 100%;
    padding: 1rem;
  }
  .aboutLongda .picsPart .item:hover {
    box-shadow: 5px 5px 10px 0px #ebebeb;
  }

  /**********底部********/
  .footer-section .footer-Links .rightPart {
    /* border-left: 1px solid #5c5c5c; */
    display: flex;
    justify-content: space-evenly;
  }
  .footer-section .footer-Links .relations {
    border-top: 1px solid #5c5c5c;
    display: flex;
    padding: 0.5rem;
    width: 33%;
    justify-content: center;
  }
  .footer-section .footer-Links .relations .items {
    display: flex;
  }
  .footer-section .footer-Links .relations .t1 {
    line-height: 3rem;
  }
  .footer-section .footer-Links .relations .t2 {
    line-height: 3rem;
    margin-left: 0.5rem;
  }
  .footer-section .footer-Links .relations img {
    width: 2rem;
    position: relative;
    top: 5px;
    margin-right: 1rem;
  }
  .footer-section .footer-Links .phone {
    display: flex;
    padding: 0.5rem;
    border-right: #c22429 1px dashed;
    width: 40%;
    justify-content: center;
  }
  .footer-section .footer-Links .phone .items {
    display: flex;
  }
  .footer-section .footer-Links .phone .items .t1 {
    line-height: 3rem;
  }
  .footer-section .footer-Links .phone .items .t2 {
    line-height: 3rem;
    margin-left: 0.5rem;
  }
  .footer-section .footer-Links .phone img {
    width: 2rem;
    position: relative;
    top: 5px;
    margin-right: 1rem;
  }
  .footer-section .footer-Links .container {
  }
  .footer-section .footer-Links .rightPart .youqingtext {
    padding: 0.2rem;
    line-height: 2.5rem;
  }
  .footer-section .footer-Links .rightPart .xialakuang {
    background-color: #c53036;
    padding: 0.5rem;
    color: white;
    border-radius: 5px;
    height: 2rem;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
  }
  .footer-section .footer-Links .rightPart .toppartyouqing {
    padding: 0.5rem;
    display: flex;
    border-right: #c22429 1px dashed;
    width: 33%;
    justify-content: center;
  }
  .main_nav .nav {
    background: linear-gradient(180deg, #ffffff 0%, #ededed 100%);
    padding-left: 30%;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .main_nav {
    position: relative;
  }
  .main_nav .nav_list {
    position: absolute;
    top: -2rem;
    left: 10%;
  }
  .main_nav .nav_list .title span::before {
    content: ".";
    width: 4px;
    max-height: 10px;
    background: #cc1a21;
    color: #cc1a21;
    border-radius: 2px;
    position: relative;
    left: -6px;
  }
  .main_nav .nav_list .title {
    background-image: url("../img/2-longda_img@2x.png");
    background-size: cover;
    text-align: center;
    padding: 2rem 5rem;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 20px;
    color: #595757;
    line-height: 26px;
    text-align: left;
    font-style: normal;
  }
  .main_nav .nav_list .ul {
    background-color: white;
    padding: 2rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    box-shadow: 0px 1px 21px 0px rgba(210, 210, 210, 0.5);
  }
  .main_nav .nav_list .ul li {
    text-align: center;
  }
  .main_nav .nav_list .ul .current {
    color: #cc1a21 !important;
  }
  .main_nav .nav_list .ul .t1 {
    padding: 0.5rem 4rem;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
    line-height: 18px;
    font-style: normal;
    text-align: left;
  }
  .main_nav .nav_list .ul .t1::before {
    content: ".";
    width: 6px;
    max-height: 10px;
    border-radius: 2px;
    position: relative;
    left: -6px;
    color: #000;
    display: inline-block;
    font-weight: 900;
    top: -4px;
  }
  .main_nav .nav_list .ul .t2 {
    padding: 0.5rem 1rem;
    font-family: MicrosoftYaHei;
    font-size: 15px;
    color: #666666;
    line-height: 18px;
    font-style: normal;
  }
  .main_nav .nav_list .ul li:hover {
    background-color: #cc1a21;
    color: white !important;
  }

  .main_nav .nav .nav_sub {
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #666666;
    line-height: 17px;
    text-align: left;
    font-style: normal;
    padding: 1rem 0;
  }
  .main_nav .nav .nav_sub span {
    color: #cc1a21;
  }
  .main_nav .contentPart {
    padding-top: 1rem;
    padding-left: 30%;
    min-height: 30vw;
    font-size: 17px;
    line-height: 2rem;
    padding-right: 15%;
    padding-bottom: 5%;
  }
  .main_nav .contentPart .logo3 img {
    position: relative;
    left: 48%;
    top: 0.5rem;
  }
  .main_nav .contentPart .title::before {
    content: ".";
    width: 4px;
    max-height: 10px;
    background: #cc1a21;
    color: #cc1a21;
    border-radius: 2px;
    position: relative;
    left: -6px;
  }
  .main_nav .contentPart .title {
    padding: 1rem 0;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 19px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    font-style: normal;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 1rem;
  }
  .main_nav .contentPart .title2 {
    padding: 1rem 0;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    line-height: 31px;
    text-align: center;
    font-style: normal;
  }
  .main_nav .contentPart .title3 {
    padding: 1rem 0;
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #333333;
    line-height: 25px;
    text-align: center;
    font-style: normal;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 2rem;
  }
  .main_nav .contentPart .title3 span {
    margin-left: 3rem;
  }
  .main_nav .contentPart .title .tag {
    padding: 0.2rem 2rem;
    float: right;
    font-size: 16px !important;
    font-family: MicrosoftYaHei;
    font-weight: 600;
    color: #666666;
    line-height: 21px !important;
    text-align: center;
    font-style: normal;
    background: #f2f2f2;
    border-radius: 4px;
    border: 1px solid #d3d3d3;
    margin: 1px;
  }
  .main_nav .contentPart .title .current {
    background-color: #cc1a21;
    color: white;
  }
  .main_nav .contentPart .contentItem {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2rem;
  }

  .main_nav .contentPart .item {
    width: 50%;
    text-align: center;
    padding-top: 2rem;
  }
  .main_nav .contentPart .item img {
    width: 80%;
    height: 15rem;
  }
  .main_nav .contentPart .item p img {
    width: 1.5rem;
    height:auto;
    position: relative;
    top: 0.2rem;
    right: 0.3rem;
  }
  .main_nav .contentPart .item p {
    width: 80%;
    margin-left: 10%;
    background-color: #eef5ff;
    position: relative;
    top: -5px;
    height: 2rem;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    color: #333333;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-indent: 0;
  }
  .main_nav .contentPart .item p span {
    float: left;
    /* width: 3rem; */
    height: 2rem;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    color: #0068b7;
    line-height: 24px;
    /* text-align: left; */
    font-style: normal;
    background-color: #dbeaff;
    margin-right: -5rem;
    display: inline-block;
    padding-right: 2rem;
  }
  .main_nav .contentPart .newsList {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: 1rem;
  }
  .main_nav .contentPart .newsList ul li::before {
    content: ".";
    width: 4px;
    max-height: 10px;
    border-radius: 2px;
    position: relative;
    left: -6px;
    color: #cc1a21;
    font-weight: 900;
    display: inline;
    top: -4px;
  }
  .main_nav .contentPart .newsList ul li {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #333333;
    line-height: 40px;
    text-align: left;
    font-style: normal;
  }
  .main_nav .contentPart .newsList .time {
    float: right;
    font-family: MicrosoftYaHei;
    font-size: 15px;
    color: #666666;
    line-height: 40px;
    text-align: right;
    font-style: normal;
  }
  .main_nav .contentPart p {
    text-indent: 2em;
    text-align: justify;
  }
  .lunbo .el-carousel__item {
    height: max-content !important;
  }
  .lunbo .el-carousel__container {
    height: calc(100vw / 2.5);
    overflow: hidden;
  }
  .lunbo .el-carousel__arrow {
    background-color: #cc1a21;
    border-radius: 5% !important;
  }
  .lunbo .el-carousel__arrow--left {
    left: 0;
  }
  .lunbo .el-carousel__arrow--right {
    right: 0;
  }
  .mainBusiness .contentItem .item {
    background-color: #cc1a21;
    height: calc(100vw / 41);
    margin: 0.5rem 0.5rem;
    color: white;
    font-weight: 500;
    border-radius: 0.5rem;
    /* padding: 1.5rem; */
    line-height: calc(100vw / 40);
    /* position: relative; */
    top: -1.2rem;
    font-size: calc(100vw / 80);
    text-align: center;
  }
  .mainBusiness .contentItem {
    margin: auto 0.5rem;
  }

  .main_nav .contentPart .ledder_title {
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .main_nav .contentPart .ledder_content {
    display: flex;
    justify-content: space-evenly;
  }
  .main_nav .contentPart .ledder_content .ledder_item img {
    width: 100%;
  }
  .main_nav .contentPart .ledder_content .ledder_item {
    width: 40%;
    text-align: center;
  }
  .main_nav .contentPart .ledder_content .ledder_item .name {
    font-weight: 600;
  }
  .main_nav .contentPart .ledder_content .ledder_item .position {
    font-weight: 500;
  }
  .main_nav .contentPart .ledder_member .ledder_member_title {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1rem;
    text-indent: 1.5rem;
  }
  .main_nav .contentPart .ledder_member p {
    padding: 0.5rem;
  }
  .main_nav .contentPart .ledder_member .name {
  }
  .main_nav .contentPart .ledder_member .position {
    margin-left: 1rem;
  }
  .pagination > li{
    font-size: large;
  }
}
/* 手机端 */
@media (max-width: 600px) {
  /*===============================================
Template: Toko - Corporate Business HTML Template
Author: Hi-Tech Parks
Version: 1.0.0
Created: Nov 2023
================================================*/

  /************ font family *************/

  /************ reset css start *************/
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font: inherit;
    vertical-align: baseline;
  }
  a {
    color: inherit;
    font-family: inherit;
    text-decoration: inherit;
  }
  a:hover {
    color: inherit;
    font-family: inherit;
    text-decoration: inherit;
  }
  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  ::-webkit-input-placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  ::-moz-placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  :-ms-input-placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  ::placeholder {
    color: #9da4a8;
    font-size: 16px;
  }
  /************ reset css end *************/

  /******** variable start ********/
  :root {
    --fontTitle: "Rajdhani", sans-serif;
    --fontText: "Roboto", sans-serif;
    --fontNum: "Poppins", sans-serif;
  }
  /******** variable end ********/

  /******** topbar start ********/
  .topbar {
    padding: 10px 0px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: #353535;
  }
  .topbar .shape {
    background-image: url("../image/innner_page_top_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 41%;
    height: 100%;
    z-index: -1;
  }
  .topbar .topbar-info {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
  }
  .topbar .topbar-right {
    float: right;
  }
  .topbar .topbar-menu {
    list-style-type: none;
    padding: 0px;
    display: inline-block;
  }
  .topbar .topbar-menu li {
    display: inline-block;
    margin: 0px 7px;
  }
  .topbar .topbar-menu li a {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    transition: all 500ms ease;
    position: relative;
    font-weight: 300;
  }
  .topbar .topbar-menu li a:hover {
    color: #ff6116;
  }
  .topbar .topbar-menu li a::before {
    content: "";
    position: absolute;
    top: 2px;
    right: -8px;
    height: 12px;
    width: 1px;
    background-color: #ffffff;
    transform: skew(-20deg);
    margin: 0px -2px;
    font-weight: 300;
  }
  .topbar .topbar-menu li:last-child a::before {
    display: none;
  }
  .topbar .topbar-social {
    list-style-type: none;
    padding: 0px;
    display: inline-block;
    text-align: right;
    margin-left: 50px;
  }
  .topbar .topbar-social li {
    display: inline-block;
    margin: 0px 10px;
  }
  .topbar .topbar-social li a {
    color: #ffffff;
    font-size: 14px;
    line-height: 10px;
    transition: all 0.5s;
  }
  .topbar .topbar-social li a:hover {
    color: #ff6116;
  }
  /******** topbar end ********/

  /******** breadcrumbs start ********/
  .breadcrumbs {
    position: relative;
    overflow: hidden;
  }
  .breadcrumbs .shape1 {
    background-image: url("../image/inner_page_shape_2.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 320px;
    height: 327px;
    position: absolute;
    top: 0px;
    left: -110px;
    z-index: 13;
  }
  .breadcrumbs .shape2 {
    background-image: url("../image/inner_page_shape_3.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 550px;
    height: 679px;
    position: absolute;
    bottom: -353px;
    right: -275px;
    z-index: 13;
  }
  .breadcrumbs .overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .breadcrumbs .breadcrumbs-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    margin-top: 75px;
  }
  .breadcrumbs .breadcrumbs-content {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }
  .breadcrumbs .breadcrumbs-content .page-title {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 700;
    color: #ffff;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .breadcrumbs .breadcrumbs-content ul li {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 18px;
    display: inline-block;
    color: #ff6116;
  }
  .breadcrumbs .breadcrumbs-content ul li span {
    color: #ffffff;
    font-size: 13px;
  }
  .breadcrumbs .breadcrumbs-content ul li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;
    color: #ffff;
  }
  /******** breadcrumbs end ********/

  /******** section title start ********/
  .section-title {
    text-align: center;
    padding-bottom: 50px;
  }
  .section-title h2 {
    font-family: var(--fontTitle);
    color: #db5e22;
    font-size: 18px;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    font-weight: 600;
  }
  .section-title h2::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0px;
    width: 50px;
    height: 2px;
    animation: title-before 1s infinite alternate;
    background-color: #db5e22;
  }
  .section-title h2::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 65px;
    width: 20px;
    height: 2px;
    background-color: #db5e22;
    animation: title-after 1s infinite alternate;
  }
  .section-title h3 {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 700;
    color: #353535;
    text-transform: capitalize;
    margin-top: 25px;
    line-height: 1.1;
  }
  /******** section title end ********/

  /******** preloader start ******/
  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff6116;
  }
  .preloader-dash {
    width: 5px;
    height: 100px;
    background: linear-gradient(45deg, #ffffff, #ffffff);
    margin: 10px;
    animation: preloader 1s linear infinite;
    border-radius: 20px;
  }
  .preloader-dash:nth-child(2) {
    animation-delay: 0.1s;
  }
  .preloader-dash:nth-child(3) {
    animation-delay: 0.2s;
  }
  .preloader-dash:nth-child(4) {
    animation-delay: 0.3s;
  }
  .preloader-dash:nth-child(5) {
    animation-delay: 0.4s;
  }
  .preloader-dash:nth-child(6) {
    animation-delay: 0.5s;
  }
  .preloader-dash:nth-child(7) {
    animation-delay: 0.6s;
  }
  .preloader-dash:nth-child(8) {
    animation-delay: 0.7s;
  }
  .preloader-dash:nth-child(9) {
    animation-delay: 0.8s;
  }
  .preloader-dash:nth-child(10) {
    animation-delay: 0.9s;
  }
  /******** preloader end ********/

  /******** scroll top start ********/
  .scrollTop {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff6116;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    z-index: 9999999999;
    cursor: pointer;
  }
  .scrollTop .icon {
    font-size: 30px;
    color: #ffffff;
  }
  .scrollTop.active {
    opacity: 1;
    visibility: visible;
  }
  /********** scroll top end *********/

  /******** main menu start *********/
  .main-navbar {
    padding: 10px 0px;
    background-color: #ffffff;
    position: relative;
    /* top: 37px; */
    left: 0;
    right: 0;
    z-index: 14;
  }
  .main-navbar.sticky {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
  }
  /* MENU text CSS */
  .main_menu ul {
    text-align: right;
    list-style: none;
    margin-bottom: 0px;
    /* display: flex; */
  }
  .main_menu > ul > li {
    display: inline-block;
    width: max-content;
    margin: auto;
  }
  .main_menu > ul > li.active {
    color: #cc1a21;
  }
  .main_menu > ul > li > a {
    font-family: var(--fontTitle);
    font-weight: 500;
    display: block;
    margin: 0px 0.4rem;
    transition: 0.5s;
    font-size: 1.3rem;
    color: #353535;
    text-decoration: none;
  }
  .main_menu > ul > li > a.active,
  .main_menu > ul > li > a:hover {
    color: #cc1a21;
  }
  .main_menu > ul > li > a:before,
  .main_menu > ul > li.current > a:before {
    background: #ffb600 none repeat scroll 0% 0;
    bottom: -7px;
    content: "";
    height: 2px;
    left: 0;
    margin: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: all 0.5s ease 0s;
    width: 15%;
    display: none;
  }
  .main_menu ul li:last-child a {
    margin-right: 0px !important;
  }
  .main_menu > ul > li.current > a,
  .main_menu > ul > li:hover > a,
  .creative_header_menu > ul > li:hover > a {
    color: #ff6000;
    background-color: transparent;
    color: #ff6000;
  }
  .main_menu > ul > li:hover > a:before,
  .main_menu > ul > li.current > a:before {
    opacity: 1;
  }
  .main_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 250%;
    width: 180%;
    text-align: left;
    background: #fff;
    margin: 0;
    padding: 15px 15px 8px 25px;
    z-index: 9999;
    box-shadow: 0 0 30px rgb(0 0 0 / 9%);
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
    border-top: 2px solid #ff6116;
    transition: all 0.5s;
    overflow: hidden;
  }
  .main_menu ul li:hover .sub-menu {
    transition: 0.5s;
    opacity: 1;
    visibility: visible;
    top: 180%;
    z-index: 9;
  }
  .main_menu ul .sub-menu li {
    position: relative;
    transition: 0.5s;
  }
  .main_menu ul .menu-item-has-children {
    margin-right: 10px;
    position: relative;
  }
  .main_menu ul .menu-item-has-children > a {
    position: relative;
  }

  .main_menu ul .menu-item-has-children.active::before,
  .main_menu ul .menu-item-has-children:hover::before,
  .main_menu ul .menu-item-has-children:hover::before {
    color: #ff6116;
    transform: rotate(180deg);
  }
  .main_menu ul .sub-menu li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: small;
    display: block;
    margin: 0;
    margin-bottom: 6px;
    letter-spacing: normal;
    transition: 0.5s;
    color: #353535;
    visibility: inherit !important;
    padding: 0px 0px;
    text-decoration: none;
  }
  .main_menu ul .sub-menu li:hover a,
  .main_menu ul .sub-menu li a.active {
    color: #ff6000;
  }
  .main_menu ul .sub-menu li a::before {
    font: var(--fa-font-solid);
    content: "";
    font-size: 13px;
    position: absolute;
    top: 7px;
    left: -50px;
    visibility: hidden;
    transition: all 0.5s;
  }
  .main_menu ul .sub-menu li a:hover::before {
    visibility: visible;
    left: -20px;
  }
  .main_menu ul .sub-menu li:before {
    left: -18px;
  }
  .main_menu ul .sub-menu li:hover:before {
    opacity: 1;
  }
  .main_menu ul .sub-menu li:hover {
    margin-left: 8px;
  }
  .main_menu .popup-btn {
    background-color: #ffffff;
    border-style: none;
    color: #ff6116;
    margin-top: -2px;
  }
  .main_menu .popup-btn:hover {
    color: #ff6116;
  }
  .main_menu .popup-btn:focus {
    background-color: #ffffff;
    border-style: none;
    box-shadow: none;
    border-style: none;
    color: #ff6116;
  }
  .modal-content .search-form {
    position: relative;
    top: 200px;
  }
  .modal-content .search-form input {
    box-shadow: none;
    border-style: none;
    border-bottom: 2px solid #ffeaea;
    padding: 15px 26px;
    font-weight: 500;
    font-size: 16px;
    color: #616161;
  }
  .modal-content .search-form input::placeholder {
    font-weight: 500;
    font-size: 16px;
    color: #616161;
  }
  .modal-content .search-form .btn {
    font-family: var(--fontTitle);
    position: absolute;
    top: 10px;
    right: 10px;
    text-transform: capitalize;
    background-color: transparent;
    color: #616161;
  }
  .modal-content .search-form .btn:hover,
  .modal-content .search-form .btn:focus {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  .modal-content .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1 !important;
    width: 100vw;
    height: 100vh;
    background-color: #000;
  }
  .modal-content {
    opacity: 1;
    background-color: #fff9f6;
    z-index: 999999;
  }
  .main_menu .modal-header .btn-close:focus {
    box-shadow: none;
    border-style: none;
    outline: none;
  }
  /******** main menu end *********/

  /******** mobile menu start ********/
  .mobile_logo_area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
    background-color: #ffffff;
    padding: 7px;
  }
  .mean-container .mean-bar {
    float: left;
    width: 100%;
    position: absolute;
    top: 57px;
    background: #ff6116;
    padding: 0px;
    min-height: 50px;
    z-index: 999999999;
  }
  .mean-container .mean-bar::before {
    font-family: var(--fontTitle);
    font-weight: 400;
    color: #fff;
    content: "Menu";
    font-size: 18px;
    font-weight: 700;
    left: 15px;
    position: absolute;
    top: 15px;
  }
  .mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #ffffffff;
    margin-top: 44px;
  }
  .mean-container .mean-nav ul li {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    position: relative;
    width: 100%;
    border-top: 1px solid #ddd;
  }
  .mean-container .mean-nav ul li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    transition: 0.5s;
    font-size: 16px;
    color: #353535;
  }
  .mean-container .mean-nav ul li a.active {
    color: #ff6116;
  }
  .mean-container .mean-nav ul li a:hover {
    color: #ff6116;
  }
  .mean-container .mean-nav ul li a.mean-expand {
    background-color: #ff6116;
    color: #ffffff;
    transition: all 0.5s;
    margin-top: 1px;
    width: 26px;
    height: 27px;
    padding: 12px !important;
    text-align: center;
    position: absolute;
    right: 0;
    top: -4px;
    z-index: 2;
  }
  .mean-container .mean-nav ul li a.mean-expand:hover {
    background-color: #ff6116;
    opacity: 0.8;
  }
  /******** mobile menu end ********/

  /******** slider start *******/
  .slider {
    position: relative;
    overflow: hidden;
  }
  .slider .top-shape {
    background-image: url("../image/home_page_top_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    height: 320px;
    position: absolute;
    top: 0px;
    left: -97px;
    z-index: 12;
  }
  .slider .bottom-shape {
    background-image: url("../image/slider_bottom_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 308px;
    height: 369px;
    bottom: 0px;
    right: 0px;
    z-index: 10;
  }
  .slider .carousel-item img {
    height: 656px;
    margin-top: 50px;
    /* object-fit: cover; */
  }
  .slider .carousel .overlay {
    float: left;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* background-color: #000000; */
    opacity: 70%;
    z-index: 9;
  }
  .slider .carousel-indicators {
    z-index: 20;
    display: none;
  }
  .slider .carousel-control-prev {
    height: 45px;
    width: 45px;
    color: #ffffff;
    background-color: #ff6116;
    border-radius: 50%;
    position: absolute;
    left: auto;
    right: 152px !important;
    z-index: 99;
    top: 53%;
  }
  .slider .carousel-control-next {
    height: 45px;
    width: 45px;
    color: #ffffff;
    background-color: #ff6116;
    border-radius: 50%;
    position: absolute;
    right: 152px !important;
    z-index: 99;
    top: 45%;
  }
  .slider .carousel-control-prev-icon,
  .slider .carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .slider .carousel-caption {
    position: absolute;
    right: 15%;
    left: 10%;
    color: #fff;
    text-align: left;
    top: 242px;
    z-index: 13;
    width: 70%;
  }
  .slider .carousel-caption .title {
    font-family: var(--fontTitle);
    font-size: 75px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 35px;
  }
  .slider .carousel-caption .desc {
    font-family: var(--fontText);
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: 35px;
  }
  .slider .carousel-caption .button-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
  }
  .slider .carousel-caption .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 15px;
    float: left;
    padding: 10px 20px;
    background-color: #ff6116;
    color: #ffffff;
    text-transform: capitalize;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .slider .carousel-caption .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    z-index: -1;
    background-color: #ff8145;
    transition: all 500ms ease;
  }
  .slider .carousel-caption .btn:hover::before {
    left: 0;
  }
  .slider .carousel-caption .video-btn {
    float: left;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #ff6116;
    border-radius: 50%;
    margin-left: 25px;
    outline: 5px solid rgba(255, 97, 22, 0.3);
    box-sizing: border-box;
  }
  .slider .carousel-caption .video-btn .icon {
    color: #ffffff;
    font-size: 20px;
  }
  .slider .carousel-caption .info {
    font-family: var(--fontTitle);
    text-transform: uppercase;
    font-weight: 400;
    color: #d8591b;
    font-size: 20px;
    margin-bottom: 15px;
  }
  .slider .carousel-caption .info-bottom {
    font-family: var(--fontTitle);
    font-weight: 600;
    float: left;
    color: #ffffff;
    margin-left: 25px;
    vertical-align: center;
  }
  /******** slider end ********/

  /******** feature start ********/
  .feature {
    padding: 70px 0px;
    background-image: url("../image/map.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .feature .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(110, 0, 93, 0.05);
  }
  .feature .single-feature {
    background: #ffffff;
    padding: 40px 30px 40px 30px;
    transition: all 1.5s;
    position: relative;
    border-radius: 5px;
  }
  .feature .single-feature:hover {
    background-color: #ff6116;
    background-image: url("../image/png-23.png");
    transform: translateY(-10px);
  }
  .feature .single-feature .header {
    margin-bottom: 40px;
  }
  .feature .single-feature .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 7%;
    background-color: #ff6116;
    position: absolute;
    transition: all 0.5s;
  }
  .feature .single-feature:hover .icon-box {
    border-radius: 50%;
    transition: all 0.5s;
    background-color: #ff8145;
  }
  .feature .single-feature .icon-box .icon {
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .feature .single-feature .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    color: #353535;
    font-size: 20px;
    display: inline-block;
    line-height: 1.2;
    margin-left: 70px;
    display: inline-block;
  }
  .feature .single-feature:hover .title {
    color: #ffffff;
  }
  .feature .single-feature .desc {
    color: #616161;
    font-family: var(--fontText);
    font-size: 16px;
    line-height: 1.5;
  }
  .feature .single-feature:hover .desc {
    color: #ffffff;
  }
  /***** feature end *******/

  /***** about start *******/
  .about {
    padding: 120px 0px;
    position: relative;
    overflow: hidden;
  }
  .about.bg-color {
    background-color: #fff9f6;
  }
  .about .shape-1 {
    background-image: url("../image/shape-1.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -139px;
    left: 3px;
    width: 280px;
    height: 440px;
    object-fit: cover;
  }
  .about .shape-2 {
    background-image: url("../image/6.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 105px;
    left: 232px;
    width: 150px;
    height: 150px;
    object-fit: cover;
    animation: shape-position-change 3s linear infinite alternate;
  }
  .about .section-title {
    text-align: left;
  }
  .about .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin-bottom: 41px;
  }
  .about .content-area .service-features {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 18px;
    color: #353535;
    float: left;
    margin: 10px 0px;
  }
  .about .content-area .service-features .feature-item {
    font-family: var(--fontText);
    font-weight: 700;
    font-size: 18px;
    float: left;
    width: 50%;
    margin-bottom: 30px;
  }
  .about .content-area .service-features .feature-item .icon {
    margin-right: 10px;
    color: #ff6116;
  }
  .about .content-area .button-area .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
    padding: 10px 20px;
    background-color: #ff6116;
    border-style: none;
    outline-style: none;
    box-shadow: none;
    color: #ffffff;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .about .content-area .button-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -150px;
    z-index: -1;
    transition: all 500ms ease;
    background-color: #ff8145;
  }
  .about .content-area .button-area .btn:hover::before {
    left: 0;
  }
  .about .image-area {
    position: relative;
  }
  .about .image-area .main {
    position: relative;
    text-align: center;
  }
  .about .image-area .main::after {
    content: "";
    width: 3px;
    height: 250px;
    background-color: #ff6116;
    position: absolute;
    top: 0%;
    right: 10%;
    transition: all 500ms ease;
  }
  .about .image-area:hover .main::after {
    height: 320px;
  }
  .about .image-area .main img {
    height: 450px;
    object-fit: cover;
    border-radius: 5px;
  }
  .about .image-area .skills-progress {
    width: 240px;
    padding: 30px;
    background-color: #ffeaea;
    border-radius: 3%;
    position: absolute;
    bottom: -119px;
  }
  .about .image-area .skills-progress .progress-item {
    position: relative;
  }
  .about .image-area .skills-progress .progress-item:last-child {
    margin-bottom: 0px;
  }
  .about .image-area .skills-progress .progress-item .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    color: #353535;
    margin-bottom: 20px;
  }
  .about .image-area .skills-progress .progress-item .progressbar {
    margin-top: 10px;
    margin-bottom: 17px;
    background-color: #ececec !important;
    box-shadow: none;
    border-radius: 4px !important;
  }
  .about .image-area .skills-progress .progress-item .progressbar .proggress {
    background-color: #ff6116 !important;
    height: 6px !important;
    border-radius: 4px !important;
  }
  .about
    .image-area
    .skills-progress
    .progress-item
    .progressbar
    .percentCount {
    margin-top: -38px;
    margin-right: 6px;
    font-size: 13px;
    color: #ffffff;
  }
  .about .image-area .skills-progress .progress-item .value {
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #da5e21;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #ffffff;
    border: 3px solid #ffffff;
    outline: 1px solid #c9c9c9;
    position: absolute;
    top: -7px;
    right: 0;
  }
  .about .image-area .video-area {
    height: 220px;
    width: 220px;
    position: absolute;
    bottom: -114px;
    right: 42px;
    border-radius: 4px;
  }
  .about .image-area .video-area .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
  }
  .about .image-area .video-area img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
  .about .image-area .video-area .button-area {
    position: relative;
    bottom: 60%;
    left: 40%;
  }
  .about .image-area .video-area .button-area .play-btn {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #da5e21;
    color: #ffffff;
    box-shadow: none;
    border: 2px solid #ffffff;
    position: relative;
    transition: all 500ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about .image-area .video-area .button-area .play-btn:hover {
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.2);
  }
  .about .image-area .video-area .button-area .play-btn::before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.5s;
    content: "";
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
    animation: ripple 3s infinite;
    transition: all 0.4s ease;
  }
  /******** about end ********/

  /******** team start ********/
  .team {
    background-color: #ffffff;
    padding: 70px 0px 120px;
  }
  .team .single-team {
    border-radius: 5px;
    position: relative;
  }
  .team .single-team .team-image {
    width: 100%;
    height: 320px;
    position: relative;
  }
  .team .single-team .team-image .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(27, 29, 27, 0.5);
    border-radius: 5px 5px 0px 0px;
    transform: scale(0, 0);
    z-index: 10;
    transition: all 500ms ease;
  }
  .team .single-team:hover .team-image .overlay {
    transform: scale(1, 1);
  }
  .team .single-team .team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px 5px 0px 0px;
  }
  .team .single-team .team-info .team-social {
    padding: 0px !important;
    list-style-type: none;
    margin-top: 30px;
    text-align: center;
    position: relative;
    top: -150px;
    z-index: 30;
    transition: all 500ms linear;
  }
  .team .single-team:hover .team-info .team-social {
    top: -120px;
  }
  .team .single-team .team-info .team-social li {
    display: inline-block;
  }
  .team .single-team .team-info .team-social li a {
    float: left;
    width: 32px;
    height: 32px;
    background-color: #ff6116;
    color: #ffffff;
    font-size: 16px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    border-radius: 3px;
  }
  .team .single-team .team-info .team-social li a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    transform: scale(0, 0);
    z-index: -1;
    transition: all 500ms ease;
    border-radius: 3px;
  }
  .team .single-team .team-info .team-social li a:hover::before {
    transform: scale(1, 1);
  }
  .team .single-team .team-info .team-social li:hover a {
    background-color: #ff7939;
  }
  .team .single-team .team-info .team-social li:hover a {
    color: #ff6116;
  }
  .team .single-team .team-info {
    padding: 5px 50px;
    background-color: #ffffff;
    position: relative;
  }
  .team .single-team .team-info .team-info-inner {
    padding: 20px 10px;
    background-color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 50px;
    right: 50px;
    z-index: 100;
    transition: all 500ms linear;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.1);
  }
  .team .single-team:hover .team-info .team-info-inner {
    bottom: -65px;
  }
  .team .single-team .team-info .team-info-inner .name {
    font-family: var(--fontTitle);
    font-size: 24px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 16px;
  }
  .team .single-team .team-info .team-info-inner .designation {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #ff6116;
  }
  .team .single-team .team-info .team-info-inner .team-contact-icon li {
    display: inline-block;
  }
  .team .single-team .team-info .team-info-inner .team-contact-icon li a {
    height: 45px;
    width: 45px;
    display: inline-block;
    background-color: #f5f5f6;
    margin: 0px 5px;
    margin-top: 15px;
    border-radius: 5px;
    transition: all 0.5s;
    font-family: var(--fontText);
    font-size: 18px;
    color: #9797a1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .team
    .single-team
    .team-info
    .team-info-inner
    .team-contact-icon
    li
    a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: -100px;
    right: 0px;
    z-index: -1;
    background-color: #ff6116;
    transition: all 500ms ease;
  }
  .team
    .single-team
    .team-info
    .team-info-inner
    .team-contact-icon
    li
    a:hover::before {
    left: 0px;
  }
  .team .single-team .team-info .team-info-inner .team-contact-icon li a:hover {
    color: #ffffff;
  }
  /******** team end ********/

  /******** partner start ********/
  .brands {
    padding: 100px 0px 150px;
    text-align: center;
    position: relative;
    perspective: 1000px;
  }
  .brands.home-page {
    padding: 100px 0px;
  }
  .brands.bg-color {
    background-color: #fff0e9;
  }
  .brands .item {
    display: flex;
    justify-content: center;
  }
  .brands .item img {
    width: 150px;
    filter: grayscale(100%);
  }
  .brands .item img:hover {
    filter: grayscale(0%);
  }
  .brands .right-shape {
    background-image: url("../image/shape2.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50px;
    right: 20px;
    width: 110px;
    height: 150px;
    animation: brand-shape-rotate 2000ms infinite linear;
  }
  .brands .left-shape {
    background-image: url("../image/shape2.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50px;
    left: 15px;
    width: 110px;
    height: 150px;
    animation: brand-shape-rotate 2000ms infinite linear;
  }
  /******** partner end ********/

  /******** video start ********/
  .video {
    padding: 70px 0px;
    background-image: url("../image/video_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
  }
  .video .video-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    opacity: 1;
  }
  .video .video-area .play-button-area {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
  }
  .video .video-area .play-button-area::after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.9s;
    content: "";
    position: absolute;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
    animation: ripple 3s infinite;
    transition: all 0.4s ease;
  }
  .video .video-area .play-button-area .play-area {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #ff6116;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
  }
  .video .video-area .play-button-area .play-area .icon {
    font-size: 40px;
    color: #ff6116;
  }
  .video .video-area .title {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
  }
  .video .video-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    line-height: 1.5;
  }
  .video .video-area .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    background-color: #ffffff;
    border-radius: 5px;
    color: #ff6116;
    margin-top: 30px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 10px 20px;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .video .video-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -150px;
    top: 0px;
    z-index: -1;
    border-radius: 5px;
    transition: all 500ms ease;
    background-color: #353535;
  }
  .video .video-area .btn:hover {
    color: #ffffff;
  }
  .video .video-area .btn:hover::before {
    left: 0px;
  }
  /***** video end ******/

  /***** why choose us start *****/
  .why-choose-us {
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
  }
  .why-choose-us .shape-1 {
    background-image: url("../image/2222.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 60%;
    position: absolute;
    top: 100px;
    left: -20%;
  }
  .why-choose-us .shape-2 {
    background-image: url("../image/6.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 53px;
    left: 92px;
    animation: shape-position-change 2s linear infinite alternate;
  }
  .why-choose-us .image-area .main-outer {
    position: relative;
  }
  .why-choose-us .image-area .main-outer::before {
    content: "";
    width: 100px;
    height: 4px;
    background-color: #000000;
    position: absolute;
    bottom: -13px;
    right: 17%;
    transition: all 500ms ease;
  }
  .why-choose-us .image-area:hover .main-outer::before {
    width: 200px;
  }
  .why-choose-us .image-area .main-outer::after {
    content: "";
    width: 4px;
    height: 100px;
    background-color: #000000;
    position: absolute;
    bottom: -13px;
    right: 17%;
    transition: all 500ms ease;
  }
  .why-choose-us .image-area:hover .main-outer::after {
    height: 250px;
  }
  .why-choose-us .image-area {
    position: relative;
  }
  .why-choose-us .image-area::before {
    content: "";
    position: absolute;
    bottom: 10%;
    left: -20px;
    height: 220px;
    width: 4px;
    background-color: #ff6116;
    transition: all 500ms ease;
  }
  .why-choose-us .image-area:hover::before {
    height: 300px;
  }
  .why-choose-us .image-area .main {
    width: 100%;
    position: relative;
  }
  .why-choose-us .image-area .main::after {
    content: "";
    width: 30px;
    height: 80px;
    background-color: #ff6116;
    position: absolute;
    top: -37px;
    right: 108px;
    transform: skew(30deg);
  }
  .why-choose-us .image-area .main::before {
    content: "";
    width: 30px;
    height: 50px;
    background-color: #ff6116;
    position: absolute;
    top: -3px;
    right: 130px;
    transform: skew(-217deg);
  }
  .why-choose-us .image-area .main img {
    width: 80%;
    height: 530px;
    border-radius: 5px;
    object-fit: cover;
  }
  .why-choose-us .image-area .main .content {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    background-color: #ff6116;
    border-radius: 5px;
    position: absolute;
    right: 48px;
    bottom: 86px;
    z-index: 10;
    line-height: 1.3;
  }
  .why-choose-us .content-area .section-title {
    text-align: left;
    padding-bottom: 30px;
  }
  .why-choose-us .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #616161;
  }
  .why-choose-us .content-area .inner .single-item {
    padding-left: 50px;
    margin-top: 50px;
    position: relative;
  }
  .why-choose-us .content-area .inner .single-item .icon-area {
    width: 30px;
    height: 30px;
    background-color: #ff6116;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .why-choose-us .content-area .inner .single-item .icon-area .icon {
    color: #ffffff;
  }
  .why-choose-us .content-area .inner .single-item .title {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 700;
    color: #353535;
  }
  .why-choose-us .content-area .inner .single-item .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    margin-top: 10px;
  }
  /***** why choose us end *****/

  /****** work process start ******/
  .work-process {
    padding: 70px 0px;
    background-color: #fff9f6;
  }
  .work-process .single-work-process {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 20px;
    position: relative;
  }
  .work-process .single-work-process::after {
    content: "";
    width: 200px;
    height: 0px;
    position: absolute;
    top: 30%;
    right: -108px;
    border: 2px dotted #353535;
  }
  .work-process .single-work-process.last-item::after {
    display: none;
  }
  .work-process .single-work-process .icon-inner-1 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 2px dotted #d7ddd3;
    outline-offset: 18px;
    background-color: #353535;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    transition: all 500ms ease;
    box-sizing: border-box;
  }
  .work-process .single-work-process:hover .icon-inner-1 {
    outline: 2px dotted #ffc5a9;
  }
  .work-process .single-work-process .icon-inner-1::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 45%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff6116;
    visibility: hidden;
    transition: all 100ms ease;
  }
  .work-process .single-work-process:hover .icon-inner-1::after {
    visibility: visible;
  }
  .work-process .single-work-process .icon-inner-1::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0, 0);
    background-color: #ff6116;
    z-index: -1;
    transition: all 0.5s;
  }
  .work-process .single-work-process:hover .icon-inner-1::before {
    transform: scale(1, 1);
  }
  .work-process .single-work-process .icon-inner-1 .icon-inner-2 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 3px solid #ff6116;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .work-process .single-work-process .icon-inner-1 .icon-inner-2 .icon {
    color: #ff6116;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.5s;
  }
  .work-process .single-work-process:hover .icon-inner-1 .icon-inner-2 .icon {
    color: #ffffff;
    font-size: 40px;
  }
  .work-process .single-work-process .content-area {
    padding: 0px 20px;
  }
  .work-process .single-work-process .content-area .title {
    font-family: var(--fontTitle);
    font-size: 24px;
    font-weight: 700;
    color: #353535;
    margin-top: 50px;
    margin-bottom: 15px;
    text-align: center;
  }
  .work-process .single-work-process .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    text-align: center;
    line-height: 1.5;
  }
  /******* work process end ********/

  /****** experience start ******/
  .experience {
    padding: 120px 0px;
    position: relative;
  }
  .experience .shape-1 {
    background-image: url("../image/6.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 13%;
    left: 5%;
    animation: shape-position-change 2s linear infinite alternate;
  }
  .experience .shape-2 {
    background-image: url("../image/circle_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 17px;
    left: 32%;
    animation: shape-position-change 2s linear infinite alternate;
  }
  .experience .image-area {
    position: relative;
  }
  .experience .image-area::before {
    content: "";
    position: absolute;
    bottom: -50px;
    left: -20px;
    width: 5px;
    height: 200px;
    background-color: #ff6116;
    transition: all 500ms ease;
  }
  .experience .image-area:hover::before {
    height: 300px;
  }
  .experience .image-area .main-img img {
    width: 80%;
    height: 500px;
    border-radius: 5px;
    object-fit: cover;
  }
  .experience .image-area .sub-img {
    position: absolute;
    bottom: -54px;
    right: 42px;
  }
  .experience .image-area .sub-img img {
    width: 250px;
    height: 250px;
    border-radius: 4px;
    object-fit: cover;
  }
  .experience .content-area .section-title {
    text-align: left;
    padding-bottom: 30px;
  }
  .experience .content-area .desc {
    font-family: var(--fontText);
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
  }
  .experience .content-area .progress-title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    color: #313131;
    margin-top: 30px;
  }
  .experience .content-area .progressbar {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    background-color: #ececec !important;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px !important;
  }
  .experience .content-area .progressbar .proggress {
    background-color: #ff6116 !important;
    height: 5px !important;
    border-radius: 4px !important;
  }
  .experience .content-area .progressbar .percentCount {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    float: right;
    margin-top: -40px;
    clear: both;
  }
  .experience .content-area .btn {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: #ff6116;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 10px 20px;
    transition: all 0.5s;
    margin-top: 20px;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .experience .content-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -150px;
    top: 0px;
    z-index: -1;
    transition: all 500ms ease;
    background-color: #ff8145;
  }
  .experience .content-area .btn:hover::before {
    left: 0;
  }
  /****** experience end ******/

  /******* counter start ********/
  .counter {
    padding: 70px 0px;
    background-image: url("../image/counter_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .counter .single-counter {
    text-align: center;
    position: relative;
  }
  .counter .count-num {
    font-family: var(--fontNum);
    font-weight: 600;
    font-size: 70px;
    color: #ffffff;
    position: relative;
    display: inline-block;
  }
  .counter .shape {
    position: absolute;
    top: -24%;
    left: 13%;
    width: 70px;
    height: 70px;
    background-image: url("../image/counter_circle.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .counter .count-num::before {
    content: "";
    width: 5px;
    height: 40px;
    background-color: #ffffff;
  }
  .counter .content-area {
    display: inline-block;
    margin-left: 20px;
    text-align: left;
    border-left: 2px solid #ffffff;
    padding-left: 20px;
    vertical-align: center;
  }
  .counter .content-area .designation {
    font-family: var(--fontNum);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
  }
  .counter .content-area .status {
    font-family: var(--fontNum);
    font-weight: 600;
    font-size: 22px;
    color: #ffffff;
    margin-top: 20px;
  }
  /******* counter start ********/

  /******* testimonial start *******/
  .testimonial {
    padding: 70px 0px;
    background-image: url("../image/map.png");
    position: relative;
  }
  .testimonial .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(188, 121, 121, 0.1);
  }
  .testimonial .single-testimonial {
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    margin-top: 50px;
    padding: 25px 40px 60px 40px;
  }
  .testimonial .single-testimonial .thum-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #ffc7ac;
    position: absolute;
    top: -41px;
    left: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .testimonial .single-testimonial .thum-box img {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
  .testimonial .single-testimonial .rating-box {
    text-align: right;
  }
  .testimonial .single-testimonial .rating-box .icon {
    font-weight: 400;
    color: #ff6116;
    margin: 0px 3px;
  }
  .testimonial .single-testimonial .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin: 20px 0px;
  }
  .testimonial .single-testimonial .name {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 18px;
    color: #353535;
    display: inline-block;
  }
  .testimonial .single-testimonial .designation {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 14px;
    color: #353535;
    margin-left: 10px;
  }
  .testimonial .single-testimonial .quote {
    position: absolute;
    bottom: 10%;
    right: 13%;
  }
  .testimonial .single-testimonial .quote .icon {
    font-size: 60px;
    color: #ffe9de;
  }
  .testimonial .owl-carousel .owl-dots {
    margin-top: 20px;
    display: block;
    text-align: center;
  }
  .testimonial .owl-carousel .owl-dots .owl-dot {
    display: inline;
    width: 6px;
    height: 6px;
    background-color: #ff6116;
    border-radius: 50%;
    margin: 0px 5px;
  }
  .testimonial .owl-carousel .owl-dots .owl-dot.active {
    width: 30px;
    border-radius: 10px;
  }
  /********* testimonial end *********/

  /********* blog start *********/
  .blog {
    padding: 70px 0px;
  }
  .blog .single-blog {
    background-color: #ffffff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: all 0.5s;
  }
  .blog .single-blog:hover {
    transform: translateY(-10px);
  }
  .blog .single-blog .image-area {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
  }
  .blog .single-blog .image-area img {
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0px 0px;
    object-fit: cover;
    transition: all 0.5s;
  }
  .blog .single-blog:hover .image-area img {
    transform: scale(1.1);
  }
  .blog .single-blog .content-area {
    padding: 40px;
    position: relative;
  }
  .blog .single-blog .content-area .date-area {
    width: 60px;
    height: 60px;
    background-color: #ff6116;
    border-radius: 5%;
    text-align: center;
    position: absolute;
    top: -19%;
    right: 27px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .blog .single-blog .content-area .date-area .day {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 25px;
    color: #ffffff;
    margin-bottom: 4px;
  }
  .blog .single-blog .content-area .date-area .month {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
  }
  .blog .single-blog .content-area .category {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #ff6116;
    padding-left: 25px;
    position: relative;
  }
  .blog .single-blog .content-area .category::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #ff6116;
    position: absolute;
    top: 2px;
    left: -1px;
  }
  .blog .single-blog .content-area .title {
    margin-top: 30px;
  }
  .blog .single-blog .content-area .title a {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    color: #353535;
    transition: all 0.5s;
    line-height: 1.3;
  }
  .blog .single-blog .content-area .title a:hover {
    color: #ff6116;
  }
  .blog .single-blog .content-area .button-area {
    margin-top: 20px;
  }
  .blog .single-blog .content-area .button-area a {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 600;
    color: #353535;
    text-decoration: none;
    transition: all 0.5s;
  }
  .blog .single-blog .content-area .button-area a:hover {
    color: #ff6116;
  }
  .blog .single-blog .content-area .button-area a .icon {
    color: #353535;
    transition: all 0.5s;
  }
  .blog .single-blog .content-area .button-area a:hover .icon {
    color: #ff6116;
  }
  /******** blog end ********/

  /****** pricing start ******/
  .pricing {
    padding: 100px 0px;
  }
  .pricing .single-pricing {
    background-color: #ffffff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    border-radius: 3%;
    padding-bottom: 50px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
  }
  .pricing .single-pricing .price-header {
    background-color: #fbeee8;
    height: 312px;
    width: 100%;
    position: relative;
    transition: all 200ms ease;
  }
  .pricing .single-pricing:hover .price-header,
  .pricing .single-pricing.active .price-header {
    background-color: rgba(255, 97, 22, 0.2);
  }
  .pricing .single-pricing .price-header::before {
    content: "";
    width: 100%;
    height: 120%;
    background-color: #ffffff;
    position: absolute;
    bottom: -66%;
    border-radius: 50%;
    z-index: 1;
  }
  .pricing .single-pricing .price-header .price-tag {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 600;
    color: #db5e22;
    position: absolute;
    top: 20%;
    right: 8%;
  }
  .pricing .single-pricing .price-header .price-icon {
    position: absolute;
    top: 32%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
  .pricing .single-pricing .price-header .price-icon .icon-inner-2 {
    width: 85px;
    height: 85px;
    background-color: #d8591b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .pricing .single-pricing .price-header .price-icon .icon-inner-2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    transform: scale(0, 0);
    background-color: #d8591b;
    transition: all 500ms ease;
    z-index: -1;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2:hover::before {
    transform: scale(1, 1);
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2
    .icon-inner-1 {
    width: 40px;
    height: 40px;
    background-color: #db5e22;
    border-radius: 50%;
    border: 3px solid #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 500ms ease;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2:hover
    .icon-inner-1 {
    background: transparent;
    border-style: none;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2
    .icon-inner-1
    .icon {
    color: #ffffff;
    font-size: 25px;
    transition: all 500ms ease;
  }
  .pricing
    .single-pricing
    .price-header
    .price-icon
    .icon-inner-2:hover
    .icon-inner-1
    .icon {
    font-size: 40px;
  }
  .pricing .single-pricing .price-body .pricing-features {
    text-align: center;
  }
  .pricing .single-pricing .price-body .pricing-features li {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 500;
    margin-top: 25px;
    color: #616161;
  }
  .pricing .single-pricing .price-body .pricing-features li .icon-box {
    position: relative;
    margin-right: 20px;
    top: -1px;
  }
  .pricing .single-pricing .price-body .pricing-features li .icon-box .icon {
    width: 20px;
    height: 20px;
    border: 1px solid #db5e22;
    color: #db5e22;
    border-radius: 50%;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pricing .single-pricing .price-body {
    margin-top: 50px;
    position: relative;
    z-index: 12;
  }
  .pricing .single-pricing .price-button {
    text-align: center;
    margin-top: 30px;
  }
  .pricing .single-pricing .price-button .btn {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 600;
    background-color: #ff6116;
    color: #ffffff;
    text-transform: uppercase;
    border-style: none;
    box-shadow: none;
    outline-style: none;
    padding: 15px 30px;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    line-height: 1;
    overflow: hidden;
  }
  .pricing .single-pricing .price-button .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .pricing .single-pricing .price-button .btn:hover::before {
    left: 0;
  }
  .pricing .single-pricing .price {
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
  }
  .pricing .single-pricing .price .plan {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
    color: #353535;
    margin-bottom: 22px;
  }
  .pricing .single-pricing .price .currency-symbol {
    font-family: var(--fontTitle);
    font-size: 32px;
    font-weight: 700;
    color: #353535;
    display: inline-block;
    position: relative;
    top: -20px;
  }
  .pricing .single-pricing .price .amount {
    font-weight: var(--fontTitle);
    font-weight: 700;
    font-size: 65px;
    color: #db5e22;
    display: inline-block;
  }
  .pricing .single-pricing .price .duration {
    font-family: var(--fontTitle);
    font-size: 20px;
    font-weight: 500;
    color: #d8591b;
    display: inline-block;
  }
  /****** pricing end ******/

  /************ sidebar start *************/
  .sidebar .sidebar-widget {
    padding: 35px 30px;
    background-color: #f6f6f6;
    margin-bottom: 40px;
    border-radius: 5px;
  }
  .sidebar .sidebar-widget .widget-title {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 18px;
    color: #353535;
    position: relative;
    margin-bottom: 30px;
  }
  .sidebar .sidebar-widget .widget-title::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0px;
    width: 30px;
    height: 2px;
    background-color: #ff6116;
    animation: sidebar-title-before-animation 1000ms infinite alternate;
  }
  .sidebar .sidebar-widget .widget-title::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 40px;
    width: 10px;
    height: 2px;
    background-color: #ff6116;
    animation: sidebar-title-after-animation 1000ms infinite alternate;
  }
  .sidebar .sidebar-widget .widget-content .category-list li {
    padding-left: 20px;
    margin: 13px 0px;
    position: relative;
  }
  .sidebar .sidebar-widget .widget-content .category-list li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #ff6116;
    border-radius: 50%;
  }
  .sidebar .sidebar-widget .widget-content .category-list li a {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #353535;
    text-decoration: none;
    position: relative;
  }
  .sidebar .sidebar-widget .widget-content .category-list li a::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 0%;
    background-color: #ff6116;
    bottom: -2px;
    transition: all 500ms ease;
  }
  .sidebar .sidebar-widget .widget-content .category-list li a:hover::before {
    width: 100%;
  }
  .sidebar .sidebar-widget .post-inner {
    margin-top: 20px;
  }
  .sidebar .sidebar-widget .post-inner .post {
    position: relative;
    padding-left: 115px;
    margin-top: 30px;
  }
  .sidebar .sidebar-widget .post-inner .post .post-thum {
    position: absolute;
    top: 5px;
    left: 0;
  }
  .sidebar .sidebar-widget .post-inner .post .post-thum img {
    width: 90px;
    height: 90px;
    border-radius: 5px;
    object-fit: cover;
  }
  .sidebar .sidebar-widget .post-inner .post .desc {
    margin-bottom: 15px;
  }
  .sidebar .sidebar-widget .post-inner .post .desc a {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    text-transform: capitalize;
    color: #353535;
    line-height: 1.5;
  }
  .sidebar .sidebar-widget .post-inner .post .date {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    color: #ff6116;
  }
  .sidebar .tag-widget .tags-list {
    display: flex;
    flex-wrap: wrap;
  }
  .sidebar .tag-widget .tags-list li {
    margin-right: 10px;
    margin-bottom: 30px;
  }
  .sidebar .tag-widget .tags-list li a {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    padding: 5px 14px;
    text-decoration: none;
    background-color: #ffffff;
    color: #353535;
    transition: all 500ms ease;
    position: relative;
    z-index: 1;
    border-radius: 4px;
  }
  .sidebar .tag-widget .tags-list li a::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #ff6116;
    transform: scale(0, 1);
    transition: all 500ms ease;
    z-index: -1;
    border-radius: 4px;
  }
  .sidebar .tag-widget .tags-list li a:hover::before {
    transform: scale(1, 1);
  }
  .sidebar .tag-widget .tags-list li a:hover {
    color: #ffffff;
  }
  .sidebar .sidebar-widget .search-form {
    position: relative;
  }
  .sidebar .sidebar-widget .search-form .form-group {
    position: relative;
  }
  .sidebar .sidebar-widget .search-form .form-group button {
    background-color: #ffffff;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 14px;
    color: #e6e6e6;
    cursor: pointer;
    transition: all 500ms ease;
    border-style: none;
    width: 50px;
    bottom: 0;
  }
  .sidebar .sidebar-widget .search-form .form-group input {
    padding: 10px 10px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    color: #616161;
  }
  .sidebar .sidebar-widget .search-form .form-group input::placeholder {
    text-transform: capitalize;
    color: #e6e6e6;
  }
  .sidebar .sidebar-widget .search-form .form-group input:focus {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  .sidebar .support-widget {
    background-image: url("../image/contact_bg.png");
    width: 100%;
    height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    position: relative;
    overflow: hidden;
  }
  .sidebar .support-widget .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .sidebar .support-widget .shape {
    position: absolute;
    top: -50px;
    left: -118px;
    background-image: url("../image/contact_shape.png");
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    z-index: 10;
  }
  .sidebar .support-widget .widget-content {
    text-align: center;
    position: absolute;
    top: 25%;
    left: 15%;
    right: 15%;
    z-index: 200;
  }
  .sidebar .support-widget .widget-content form input {
    float: left;
    width: 70%;
    font-size: 16px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    border-radius: 3px 0px 0px 3px;
  }
  .sidebar .support-widget .widget-content form input::placeholder {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #1c1c1c;
  }
  .sidebar .support-widget .widget-content form .btn {
    float: left;
    width: 30%;
    background-color: #ff6116;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    color: #ffffff;
    border-radius: 0px 3px 3px 0px;
  }
  .sidebar .support-widget .widget-content .info {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #db5e22;
    margin-bottom: 15px;
  }
  .sidebar .support-widget .widget-content .title {
    font-family: var(--fontTitle);
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 20px;
  }
  .sidebar .support-widget .widget-content .number {
    font-family: var(--fontTitle);
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .sidebar .support-widget .widget-content .label {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 20px;
  }
  .sidebar-title-section {
    text-align: left;
    padding-bottom: 30px;
  }
  .sidebar-title-section h2 {
    font-family: var(--fontTitle);
    color: #db5e22;
    font-size: 18px;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    font-weight: 600;
  }
  .sidebar-title-section h2::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0px;
    width: 50px;
    height: 2px;
    animation: title-before 1s infinite alternate;
    background-color: #db5e22;
  }
  .sidebar-title-section h2::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 65px;
    width: 20px;
    height: 2px;
    background-color: #db5e22;
    animation: title-after 1s infinite alternate;
  }
  .sidebar-title-section h3 {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 700;
    color: #353535;
    text-transform: capitalize;
    margin-top: 25px;
    line-height: 1.1;
  }
  /************ sidebar end *************/

  /******* service start ******/
  .service {
    padding: 70px 0px;
    background-color: #fff0e9;
    position: relative;
    overflow: hidden;
  }
  .service .shape {
    background-image: url("../image/service_shape.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -229px;
    left: -192px;
    width: 520px;
    height: 510px;
  }
  .service .single-service {
    background-color: #ffffff;
    border-radius: 5px;
    position: relative;
    z-index: 1;
  }
  .service.single-page .single-service {
    margin-bottom: 40px;
    border-radius: 0px 0px 5px 5px;
  }
  .service .single-service .image-area {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
  }
  .service .single-service .image-area a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
  }
  .service .single-service:hover .image-area a img {
    transform: scale(1.1);
  }
  .service .single-service .content-area {
    padding: 50px 40px 40px 40px;
    position: relative;
  }
  .service .single-service .content-area .icon-box {
    width: 45px;
    height: 45px;
    background-color: #ff6116;
    position: absolute;
    top: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5%;
  }
  .service .single-service:hover .content-area .icon-box {
    animation-name: service-iconbox-rotate;
    animation-duration: 1s;
  }
  .service .single-service .content-area .icon-box .icon {
    font-size: 25px;
    color: #ffffff;
  }
  .service .single-service .content-area .title a {
    font-family: var(--fontTitle);
    color: #353535;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.5s;
  }
  .service .single-service .content-area .title a:hover {
    color: #ff6116;
  }
  .service .single-service .content-area .desc {
    font-family: var(--fontText);
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin-top: 20px;
  }
  .service .single-service .content-area .button-area {
    margin-top: 20px;
  }
  .service .single-service .content-area .button-area a {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    color: #353535;
    text-decoration: none;
    transition: all 0.5s;
  }
  .service .single-service .content-area .button-area a:hover {
    color: #ff6116;
  }
  .service .single-service .content-area .button-area a .icon {
    font-size: 14px;
    color: #353535;
    transition: all 0.5s;
  }
  .service .single-service .content-area .button-area a:hover .icon {
    color: #ff6116;
  }
  /******* service end *******/

  /****** service details start ******/
  .service-details {
    padding: 70px 0px;
  }
  .service-details .service {
    background-color: #ffffff;
  }
  .service-details .service .single-service {
    background-color: #f3f7fa;
    border-radius: 5px;
  }
  .service-details .service-details-content .img-area {
    margin-bottom: 30px;
  }
  .service-details .service-details-content .img-area img {
    width: 100%;
    height: 420px;
    border-radius: 5px;
    object-fit: cover;
  }
  .service-details .service-details-content .content-area .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 40px;
    color: #353535;
    margin-bottom: 30px;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .service-details .service-details-content .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
  }
  .service-details .service-details-content .features {
    background-color: #f3f7fa;
    padding: 30px 20px;
    padding-left: 120px;
    position: relative;
    margin-top: 50px;
    border-radius: 5px;
  }
  .service-details .service-details-content .features .icon-box {
    position: absolute;
    top: 25%;
    left: 10%;
  }
  .service-details .service-details-content .features .icon-box .icon img {
    width: 50px;
  }
  .service-details .service-details-content .features .title {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 24px;
    color: #353535;
    margin-bottom: 10px;
  }
  .service-details .service-details-content .features .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
  }
  /******** service details end ********/

  /****** project start ******/
  .project {
    padding: 70px 0px;
  }
  .project .item-menu {
    text-align: center;
    margin-bottom: 50px;
  }
  .project .item-menu ul li {
    font-family: var(--fontTitle);
    font-size: 20px;
    font-weight: 500;
    color: #353535;
    display: inline-block;
    margin: 0px 10px;
    cursor: pointer;
    position: relative;
  }
  .project .item-menu ul li.active {
    color: #db5e22;
  }
  .project .item-menu ul li::after {
    content: "";
    width: 80%;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: #db5e22;
    position: absolute;
    bottom: -5px;
    transform: scale(0, 1);
    transition: all 0.5s;
  }
  .project .item-menu ul li.active::after {
    transform: scale(1, 1);
  }
  .project .item-details {
    padding: 0px;
    margin: 0px;
  }
  .project .item-details .item {
    margin-bottom: 20px;
    overflow: hidden;
  }
  .project .item-details .item .image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 5px;
  }
  .project .item-details .item {
    position: relative;
  }
  .project .item-details .item .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    left: 12px;
    transform: scale(0, 0);
    background-color: rgba(255, 176, 138, 0.5);
    transition: all 500ms ease;
  }
  .project .item-details .item:hover .overlay {
    background-color: rgba(255, 176, 138, 0.5);
    transform: scale(1, 1);
  }
  .project .item-details .item .content {
    position: absolute;
    right: 20%;
    left: 20%;
    bottom: -40%;
    background-color: #302e2e;
    z-index: 100;
    padding: 30px 30px;
    transition: all 500ms !important;
  }
  .project .item-details .item:hover .content {
    bottom: 20%;
  }
  .project .item-details .item .content .info {
    float: left;
  }
  .project .item-details .item .content .info .title {
    margin-bottom: 8px;
  }
  .project .item-details .item .content .icon {
    float: right;
  }
  .project .item-details .item .content .title a {
    font-family: var(--fontTitle);
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
  }
  .project .item-details .item .content .category a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
  }
  .project .item-details .item .content .icon-area .icon {
    color: #ffffff;
    font-size: 25px;
    margin-top: 10px;
  }
  .project .item-details .btn-area {
    text-align: center;
    margin-top: 30px;
  }
  .project .item-details .btn-area .btn {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    background-color: #ff6116;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 10px 20px;
    position: relative;
    z-index: 2;
    line-height: 1;
  }
  .project .item-details .btn-area .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
    border-radius: 4px;
  }
  .project .item-details .btn-area .btn:hover::before {
    width: 100%;
  }
  .project .item-details .btn-area .btn:focus {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  /****** project end ******/

  /****** portfolio details start  ******/
  .project-details {
    padding: 70px 0px;
  }
  .project-details .section-title {
    text-align: left;
    padding-bottom: 30px;
  }
  .project-details .project-details-content img {
    width: 100%;
    object-fit: cover;
    height: 720px;
    border-radius: 5px;
  }
  .project-details .project-details-sidebar {
    background-color: #f6f6f6;
    padding: 30px;
    border-radius: 5px;
  }
  .project-details .project-details-sidebar .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
    margin-bottom: 30px;
  }
  .project-details .project-details-sidebar .info-list li {
    padding-left: 20px;
    margin-bottom: 15px;
    position: relative;
    font-size: 16px;
  }
  .project-details .project-details-sidebar .info-list li .label {
    font-family: var(--fontTitle);
    font-weight: 600;
    margin-right: 7px;
  }
  .project-details .project-details-sidebar .info-list li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #ff6116;
    border-radius: 50%;
  }
  .project-details .project-silder {
    margin-top: 70px;
  }
  .project-details .project-silder .item img {
    width: 100%;
    height: 300px;
    border-radius: 7px;
    object-fit: cover;
  }
  /****** portfolio details end  ******/

  /****** faq start ******/
  .faq {
    padding: 70px 0px;
  }
  .faq .section-title {
    text-align: left;
  }
  .faq .section-title .desc {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 400;
    color: #353535;
    margin-top: 35px;
    line-height: 1.7;
  }
  .faq .faq-accordion .accordion {
    border-style: none;
  }
  .faq .faq-accordion .accordion .accordion-item {
    margin-bottom: 20px;
    border-style: none;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-button {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 700;
    color: #353535;
    padding: 10px;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-button::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    content: "\f107";
    background: none;
  }
  .faq
    .faq-accordion
    .accordion
    .accordion-item
    .accordion-button[aria-expanded="true"] {
    background-color: #ffffff;
    color: #db5e22;
  }
  .faq
    .faq-accordion
    .accordion
    .accordion-item
    .accordion-button[aria-expanded="true"]::after {
    transform: rotate(-90deg);
    color: #db5e22;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-body {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 400;
    color: #616161;
    line-height: 1.7;
    background-color: #f7f7f7;
    padding: 15px 20px;
  }
  .faq .faq-accordion .accordion .accordion-item .accordion-button:focus {
    border-style: none;
    box-shadow: none;
    outline-style: none;
  }
  /****** faq end ******/

  /****** blog start  ******/
  .blog-standard {
    padding: 70px 0px;
  }
  .blog-standard .blog-standard-content {
    margin-bottom: 50px;
  }
  .blog-standard .blog-standard-content .img-area img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .blog-standard .blog-standard-content .img-area {
    position: relative;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
  }
  .blog-standard .blog-standard-content .img-area .overlay {
    position: absolute;
    top: 0;
    bottom: -300px;
    right: 0;
    left: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.8) 100%
    );
    transition: all 1000ms ease;
  }
  .blog-standard .blog-standard-content:hover .img-area .overlay {
    top: 0;
    bottom: 0;
  }
  .blog-standard .blog-standard-content .content-area {
    padding: 40px;
    border: 1px solid #fea578;
    border-radius: 0px 0px 5px 5px;
    position: relative;
  }
  .blog-standard .blog-standard-content .content-area .title a {
    font-family: var(--fontTitle);
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
    color: #ffffff;
    position: absolute;
    top: -80px;
    text-decoration: none;
  }
  .blog-standard .blog-standard-content .content-area .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
    margin-bottom: 35px;
  }
  .blog-standard .blog-standard-content .content-area .meta-tags {
    width: 100%;
    line-height: 3;
  }
  .blog-standard .blog-standard-content .content-area .btn-area {
    display: inline-block;
  }
  .blog-standard .blog-standard-content .content-area .btn-area .btn {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 16px;
    background-color: #ff6116;
    color: #ffffff;
    padding: 8px 20px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .blog-standard .blog-standard-content .content-area .btn-area .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -120px;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .blog-standard
    .blog-standard-content
    .content-area
    .btn-area
    .btn:hover::before {
    left: 0;
  }
  .blog-standard .blog-standard-content .content-area .date {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 500;
    color: #ff6116;
    margin: 0px 90px;
  }
  .blog-standard .blog-standard-content .content-area .category {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    color: #ff6116;
    text-decoration: none;
  }
  /****** blog end ******/

  /****** blog details start ******/
  .blog-details {
    padding: 100px 0px;
  }
  .blog-details .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 40px;
    text-transform: capitalize;
    margin: 40px 0px;
    color: #353535;
    line-height: 1.1;
  }
  .blog-details .img-area img {
    width: 100%;
    height: 410px;
    object-fit: cover;
    border-radius: 5px;
  }
  .blog-details .blog-details-content {
    position: relative;
    margin-bottom: 50px;
  }
  .blog-details .blog-details-content .date {
    position: absolute;
    bottom: -27px;
    left: 5%;
    background-color: #ff6116;
    padding: 5px 20px;
    text-align: center;
  }
  .blog-details .blog-details-content .date .day {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 5px;
  }
  .blog-details .blog-details-content .date .month {
    font-family: var(--fontTitle);
    font-size: 20px;
    color: #ffffff;
  }
  .blog-details .blog-details-content .meta {
    position: absolute;
    bottom: -15px;
    left: 17%;
    background-color: #ff6116;
    padding: 10px;
  }
  .blog-details .blog-details-content .meta li {
    display: inline-block;
    padding-left: 20px;
    position: relative;
    margin: 0px 5px;
    text-transform: capitalize;
  }
  .blog-details .blog-details-content .meta li::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 5px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
  }
  .blog-details .blog-details-content .meta li a {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
  }
  .blog-details .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
  }
  .blog-details blockquote {
    background-color: #ffeee6;
    padding: 30px;
    border-left: 3px solid #db5e22;
    margin: 50px 0px;
  }
  .blog-details blockquote .icon-box {
    float: left;
    margin-right: 40px;
  }
  .blog-details blockquote .icon-box .icon {
    font-size: 40px;
    color: #db5e22;
  }
  .blog-details blockquote .quote {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.5;
  }
  .blog-details blockquote .name {
    font-family: var(--fontText);
    font-size: 16px;
    color: #616161;
    text-transform: uppercase;
    padding-left: 75px;
    margin-top: 5px;
  }
  .blog-details .image {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 50px;
  }
  .blog-details .image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 5px;
  }
  .blog-details .list li {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 18px;
    color: #616161;
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px;
  }
  .blog-details .list li .icon {
    color: #db5e22;
    margin-right: 20px;
    position: absolute;
    top: 0;
    left: 0;
  }
  /****** blog details end ******/

  /****** career start ******/
  .career {
    padding: 70px 0px;
    background-color: #f6f7f8;
  }
  .career .job-list .job-item {
    background-color: #ffffff;
    position: relative;
    padding: 30px 0px;
    padding-left: 150px;
    margin-bottom: 30px;
    transition: all 1s;
    border-radius: 5px;
  }
  .career .job-list .job-item:hover {
    background-color: #ff6116;
  }
  .career .job-list .job-item .icon-area {
    width: 80px;
    height: 80px;
    background-color: #f6f7f8;
    border: 3px solid #ff6116;
    position: absolute;
    top: 15px;
    left: 20px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s;
  }
  .career .job-list .job-item:hover .icon-area {
    background-color: #ffffff;
  }
  .career .job-list .job-item .icon-area {
    color: #ff6116;
    font-size: 40px;
  }
  .career .job-list .job-item .job-category {
    font-family: var(--fontTitle);
    font-size: 25px;
    font-weight: 600;
    color: #353535;
    margin-bottom: 10px;
    transition: all 0.2s;
  }
  .career .job-list .job-item:hover .job-category {
    color: #ffffff;
  }
  .career .job-list .job-item .job-desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    transition: all 0.2s;
  }
  .career .job-list .job-item:hover .job-desc {
    color: #ffffff;
  }
  .career .job-list .job-item .apply-btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    float: right;
    border: 2px solid #ff6116;
    background-color: #ffffff;
    color: #353535;
    box-shadow: none;
    outline-style: none;
    position: absolute;
    right: 5%;
    bottom: 35%;
    font-size: 18px;
    transition: all 0.2s;
  }
  /****** career end ******/

  /****** career solution start ******/
  .career-features {
    padding: 70px 0px;
  }
  .career-features .section-title {
    text-align: left;
    padding-bottom: 40px;
  }
  .career-features .content .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #616161;
    line-height: 1.7;
    margin-bottom: 30px;
  }
  .career-features .content .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    background-color: #ff6116;
    color: #ffffff;
    padding: 10px 20px;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    transition: all 0.5s;
    z-index: 1;
    position: relative;
    overflow: hidden;
  }
  .career-features .content .btn::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: -150px;
    z-index: -1;
    background-color: #ff8145;
    transition: all 500ms ease;
  }
  .career-features .content .btn:hover::before {
    left: 0;
  }
  .career-features .features .feature-box {
    font-family: var(--fontTitle);
    font-weight: 600;
    background-color: #ffffff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .career-features .features .feature-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0%;
    bottom: 0;
    left: 0;
    background-color: #ff6116;
    transition: all 500ms ease;
    z-index: -1;
  }
  .career-features .features .feature-box:hover::before {
    height: 100%;
    top: 0;
  }
  .career-features .features .feature-box.first-item {
    margin-top: 30px;
  }
  .career-features .features .feature-box .icon-area {
    width: 75px;
    height: 75px;
    background-color: #f6f7f8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  .career-features .features .feature-box .icon-area .icon {
    font-size: 25px;
    color: #ff6116;
  }
  .career-features .features .feature-box .title {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 1.3;
    transition: all 500ms ease;
  }
  .career-features .features .feature-box:hover .title {
    color: #ffffff;
  }
  /****** career solution end ******/

  /****** contact start ******/
  .contact {
    padding: 80px 0px;
    background-color: #ffffff;
  }
  .contact .section-title {
    text-align: left !important;
  }
  .contact .contact-form {
    background-color: #f6f7f8;
    padding: 50px 30px;
    border-radius: 5px;
  }
  .contact .contact-form .form-label {
    font-family: var(--fontTitle);
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 35px;
    color: #353535;
    line-height: 1.5;
  }
  .contact .contact-form .form-group {
    margin-bottom: 35px;
  }
  .contact .contact-form label {
    font-family: var(--fontText);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #353535;
  }
  .contact .contact-form input,
  .contact .contact-form textarea,
  .contact .contact-form select {
    box-shadow: none;
    border-style: none;
    outline-style: none;
    padding: 12px 15px;
    position: relative;
    border-bottom: 2px solid transparent;
    border-width: 1px;
    transition: all 500ms ease;
    color: #616161;
    font-size: 16px;
  }
  .contact .contact-form input::placeholder,
  .contact .contact-form textarea::placeholder,
  .contact .contact-form select::placeholder,
  .contact .contact-form select {
    font-family: var(--fontText);
    font-size: 16px;
    font-weight: 400;
    color: #9da4a8;
  }
  .contact .contact-form input:focus,
  .contact .contact-form textarea:focus,
  .contact .contact-form select:focus {
    border-color: #ff6116;
  }
  .contact .contact-form input:hover,
  .contact .contact-form textarea:hover,
  .contact .contact-form select:hover {
    border-width: 1px;
  }
  .contact .contact-form button {
    font-family: var(--fontTitle);
    font-weight: 600;
    padding: 15px 20px;
    background-color: #ff6116;
    border-style: none;
    outline-style: none;
    box-shadow: none;
    color: #ffffff;
    border-radius: 5%;
    transition: all 0.5s;
    z-index: 1;
    position: relative;
    overflow: hidden;
    font-size: 16px;
  }
  .contact .contact-form button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .contact .contact-form button:hover::before {
    left: 0;
  }
  .contact .contact-info .contact-box {
    float: left;
    background-color: #f6f7f8;
    padding: 44px 30px;
    position: relative;
    margin-bottom: 46px;
    width: 100%;
    border-radius: 5px;
  }
  .contact .contact-info .contact-box .contact-box-icon {
    float: left;
    display: flex;
    justify-content: center;
  }
  .contact .contact-info .contact-box .contact-box-icon .icon img {
    width: 50px;
  }
  .contact .contact-info .contact-box:hover .contact-box-icon .icon {
    color: #ffffff;
  }
  .contact .contact-info .contact-box .contact-box-content {
    padding-left: 80px;
  }
  .contact .contact-info .contact-box .contact-box-content .title {
    font-family: var(--fontTitle);
    color: #353535;
    font-size: 24px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 15px;
  }
  .contact .contact-info .contact-box .contact-box-content .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: #616161;
  }
  .site-map {
    height: 400px;
  }
  /****** contact end ******/

  /****** error section start ******/
  .erorr-section {
    padding: 70px 0px;
  }
  .erorr-section .error-text {
    text-align: center;
  }
  .erorr-section .error-text .error-code {
    font-family: var(--fontTitle);
    font-size: 100px;
    font-weight: 600;
    color: #353535;
    margin-bottom: 20px;
  }
  .erorr-section .error-text .error-title {
    font-family: var(--fontTitle);
    font-size: 46px;
    font-weight: 600;
    color: #353535;
    margin-bottom: 15px;
  }
  .erorr-section .error-text .error-desc {
    font-family: var(--fontTitle);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 50px;
    color: #353535;
  }
  .erorr-section .error-text .error-button {
    font-family: var(--fontTitle);
    font-size: 18px;
    font-weight: 600;
    box-shadow: none;
    border-style: none;
    outline-style: none;
    background-color: #ff6116;
    color: #ffffff;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .erorr-section .error-text .error-button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -100%;
    background-color: #ff8145;
    z-index: -1;
    transition: all 500ms ease;
  }
  .erorr-section .error-text .error-button:hover::before {
    left: 0;
  }
  /****** error section end ******/

  /****** subscribe start  ******/
  .subscribe {
    position: relative;
  }
  .subscribe .bg-color {
    background-color: #ff6116;
    padding: 50px;
    position: absolute;
    top: -50px;
    left: 140px;
    right: 140px;
    border-radius: 7px;
    z-index: 100;
  }
  .subscribe .subscribe-info .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 45px;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: capitalize;
  }
  .subscribe .subscribe-info .desc {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
  }
  .subscribe .subscribe-form {
    margin-top: 10px;
  }
  .subscribe .subscribe-form input {
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 18px;
    float: left;
    width: 75%;
    padding: 10px 20px;
    border-radius: 4px 0px 0px 4px;
    color: #616161;
  }
  .subscribe .subscribe-form .btn {
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 18px;
    width: 25%;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #1c1c1d;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: 0px 4px 4px 0px;
  }
  .subscribe .subscribe-form input,
  .subscribe .subscribe-form button {
    box-shadow: none;
    border-style: none;
    outline-style: none;
  }
  .subscribe .subscribe-form input::placeholder {
    font-family: var(--fontNum);
    font-size: 16px;
    font-weight: 400;
    color: #616161;
  }
  /****** subscribe end  ******/

  /***** call us start *****/
  .call-us {
    position: relative;
    bottom: -80px;
    z-index: 1;
    overflow: hidden;
  }
  .call-us .bg-area {
    background-color: #ff6116;
    border-radius: 5px;
    padding: 50px 0px;
    position: relative;
  }
  .call-us .shape {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 25%;
    background-image: url(../image/2222.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 100;
  }
  .call-us .bg-area .text-area {
    padding-left: 50px;
  }
  .call-us .bg-area .text-area h2 {
    font-family: var(--fontTitle);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    position: relative;
    margin-bottom: 25px;
  }
  .call-us .bg-area .text-area h2::after {
    content: "";
    width: 100px;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    top: 8px;
    left: 155px;
  }
  .call-us .bg-area .text-area p {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 36px;
    color: #ffffff;
  }
  .call-us .bg-area .icon-inner {
    display: flex;
    justify-content: end;
  }
  .call-us .bg-area .icon-area {
    width: 70px;
    height: 70px;
    font-size: 26px;
    border: 10px solid #ffffff;
    background-color: #ff6116;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.5s;
    transform: translateX(-30px);
    z-index: 100;
  }
  .call-us .bg-area .icon-area::before,
  .call-us .bg-area .icon-area:after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.1s;
    content: "";
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
    animation: ripple 3s infinite;
    transition: all 0.4s ease;
  }
  .call-us .bg-area .icon-area .icon {
    color: #ffffff;
  }
  .call-us .bg-area .shape-bg {
    background-image: url("https://www.hitechparks.com/web/template/toko-corporate/assets/images/call-us-bg.png");
    position: absolute;
    top: 0;
    right: 200px;
    z-index: 100;
  }
  /***** call us end *****/

  /***** footer start *****/
  .footer-top {
    padding: 200px 0px 80px;
    background: url("../image/footer_bg_shape.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .footer-top.main-page {
    padding: 150px 0px 80px;
  }
  .footer-top .footer-list p {
    font-family: var(--fontText);
    font-size: 16px;
    text-transform: capitalize;
    color: #c8c8c8;
    line-height: 1.7;
    margin-top: 38px;
  }
  .footer-top .footer-list .footer-social-icon {
    padding: 0px !important;
    list-style-type: none;
    margin-top: 30px;
  }
  .footer-top .footer-list .footer-social-icon li {
    display: inline-block;
  }
  .footer-top .footer-list .footer-social-icon li a {
    float: left;
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border-radius: 5%;
    font-size: 18px;
    color: #ff6116;
    transition: all 0.5s;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    position: relative;
    z-index: 1;
    transition: all 0.5s;
  }
  .footer-top .footer-list .footer-social-icon li a:hover {
    color: #ffffff;
  }
  .footer-top .footer-list .footer-social-icon li a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ff6116;
    border-radius: 5%;
    transform: scale(0, 0);
    left: 0px;
    top: 0px;
    z-index: -1;
    transition: all 500ms ease;
  }
  .footer-top .footer-list .footer-social-icon li a:hover::before {
    transform: scale(1, 1);
  }
  .footer-top .footer-list .title {
    font-family: var(--fontTitle);
    font-weight: 700;
    font-size: 28px;
    color: #ff6116;
    text-transform: uppercase;
    margin-bottom: 40px;
  }
  .footer-top .footer-list .footer-nav-links {
    padding: 0px;
    margin-top: 20px;
    list-style-type: none;
  }
  .footer-top .footer-list .footer-nav-links li {
    margin-bottom: 22px;
  }
  .footer-top .footer-list .footer-nav-links li a {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    text-transform: capitalize;
    color: #c8c8c8;
    padding-left: 35px;
    position: relative;
  }
  .footer-top .footer-list .footer-nav-links li a::before {
    content: "";
    width: 14px;
    height: 2px;
    background-color: #c8c8c8;
    position: absolute;
    top: 9px;
    left: 6px;
    transition: all 0.5s;
  }
  .footer-top .footer-list .footer-nav-links li a:hover::before {
    background-color: #ff6116;
    left: 12px;
  }
  .footer-top .footer-list .address-widget {
    padding: 0px;
    list-style-type: none;
    margin-top: 25px;
  }
  .footer-top .footer-list .address-widget li {
    margin-bottom: 0px;
    padding-bottom: 60px;
  }
  .footer-top .footer-list .address-widget li .icon-area {
    float: left;
    width: 13%;
  }
  .footer-top .footer-list .address-widget li .icon {
    font-size: 23px;
    color: #ff6116;
  }
  .footer-top .footer-list .address-widget li .desc {
    font-family: var(--fontText);
    float: left;
    width: 87%;
    color: #c8c8c8;
    font-size: 16px;
    position: relative;
    line-height: 1.5;
  }
  .footer-Links {
    padding: 0rem 2rem;
    background-color: #ad0910;
    color: white;
  }
  .footer-Links .linksRow {
    display: flex;
  }
  .footer-Links .linksRow ul {
    padding: 0.5rem 0.2rem;
    margin: 0.5rem;
    color: #9797a1;
  }
  .footer-Links .linksRow ul li:nth-child(1) {
    color: white !important;
  }
  .footer-bottom {
    padding: 10px 0px 10px;
    background-color: #a31016;
    /* border-top: 1px solid #302e2e; */
  }

  .footer-bottom .copyright-info p {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 10px !important;
    color: #ffffff;
  }
  .footer-bottom .footer-menu .footer-nav {
    text-align: right;
    list-style-type: none;
    padding: 0px;
    margin-top: 0px !important;
  }
  .footer-bottom .footer-menu .footer-nav li {
    display: inline-block;
    margin-right: 10px;
    position: relative;
  }
  .footer-bottom .footer-menu .footer-nav li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: 7px;
    right: -8px;
  }
  .footer-bottom .footer-menu .footer-nav li:last-child::before {
    display: none;
  }
  .footer-bottom .footer-menu .footer-nav li a {
    font-family: var(--fontText);
    font-weight: 400;
    font-size: 10px !important;
    color: #ffffff;
    text-decoration: none;
    transition: all 500ms ease;
  }
  .footer-bottom .footer-menu .footer-nav li a:hover {
    color: #ff6116;
  }
  /******* footer end ********/

  /****** animation start ******/
  @keyframes shape-position-change {
    0% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(20px);
    }
  }

  @keyframes brand-shape-rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }

  @keyframes service-iconbox-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes preloader {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }

  @keyframes sidebar-title-before-animation {
    0% {
      width: 0px;
    }
    100% {
      width: 30px;
    }
  }

  @keyframes sidebar-title-after-animation {
    0% {
      width: 0px;
    }
    100% {
      width: 10px;
    }
  }

  @keyframes title-before {
    0% {
      width: 0px;
    }
    100% {
      width: 50px;
    }
  }

  @keyframes title-after {
    0% {
      width: 0px;
    }
    100% {
      width: 20px;
    }
  }

  @keyframes ripple {
    70% {
      box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
  /****** animation end ******/

  /******新闻中心  news********/
  .news {
    background-image: url(../img/hp_xwzx_bg_img@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5px 10px;
  }
  .news .titlePart {
    font-size: 2rem;
    margin: auto;
    text-align: center;
  }
  .news .contentPart {
    display: flex;
    margin: auto;
    text-align: center;
    justify-content: center;
    margin-top: 2px;
    /* margin-left: 0.5rem; */
    flex-wrap: wrap;
    flex-direction: column;
  }

  .news .contentPart .imgPart {
    width: 100%;
  }
  .news .contentPart .imgPart img {
    width: 100%;
  }
  .news .contentPart .titlePart {
  }
  .news .contentPart .titlePart img {
    padding: 2rem 10rem;
    width: 100%;
  }
  .news .contentPart .textPart {
    width: 100%;
  }
  .news .contentPart .textPart .textTitleul {
    display: flex;
  }
  .news .contentPart .textPart .textTitleul .activeClass {
    background-color: #cc1a21 !important;
    color: white !important;
    /* padding: 0.5rem 2rem; */
    /* margin: 0 1px 1rem 1px; */
    border-radius: 0.3rem;
  }
  .news .contentPart .textPart .textTitleul .baseClass {
    background-color: #f4f4f4;
    color: black;
    /* padding: 0.5rem 4rem; */
    /* margin: 0 1px 1rem 1px; */
    border-radius: 0.3rem;
    width: 33.3%;
    text-align: center;
  }

  .news .contentPart .textPart .textList1,
  .textList2,
  .textList3 {
    font-size: small;
    color: black;
  }
  .news .contentPart .textPart .textList1 li {
    /* padding: 1.4rem; */
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2rem;
    letter-spacing: 2px;
    display: flex;
    justify-content: space-between;
  }
  .news .contentPart .textPart .textList1 li .text{
    width: 75%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
  }
  .news .contentPart .textPart .textList1 li .time {

  }
  .news .contentPart .textPart .textList2 li {
    padding: 0.5rem;
  }
  .news .contentPart .textPart .textList3 li {
    padding: 0.5rem;
  }
  .news .contentPart .textPart .textList1 li::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: #313131;
    vertical-align: middle;
    position: relative;
    top: 9px;
    margin: 4px;
  }
  .news .contentPart .textPart .textList2 li::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: #313131;
    vertical-align: middle;
    margin-right: 1rem;
  }
  .news .contentPart .textPart .textList3 li::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: #313131;
    vertical-align: middle;
    margin-right: 1rem;
  }
  /******主营业务  mainBusiness********/
  .mainBusiness {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5px 10px;
  }
  .mainBusiness .titlePart {
    font-size: 2rem;
    margin: auto;
    text-align: center;
  }
  .mainBusiness .subtitlePart {
    margin: auto;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
  }
  .mainBusiness .picsPart {
    text-align: center;
  }
  .mainBusiness .content{
    display: flex;
  }
  .mainBusiness .content .left{
    width: 40%;
  }
  .mainBusiness .content .el-carousel__item{
    display: flex;
  }
  .mainBusiness .content .el-carousel__container{
    height: calc(100vw/7) !important;
  }
  .mainBusiness .content .left .pic1 {
    width: 50%;
    padding: 2px;
  }
  .mainBusiness .content .left .pic2 {
    width: 50%;
    padding: 2px;
  }
  .mainBusiness .content .middle{
    width: 20%;
    /* padding: 1rem; */
    height: calc(100vw/7) !important;
  }
  .mainBusiness .content .right{
    width: 40%;
  }
  .mainBusiness .content .right .pic1 {
    width: 50%;
    padding: 2px;

  }
  .mainBusiness .content .right .pic2 {
    width: 50%;
    padding: 2px;

  }
  /******关于隆达  aboutLongda*  *******/
  .aboutLongda {
    background-image: url(../img/hp_gyld_bg_img@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5px 10px;
  }
  .aboutLongda .titlePart {
    font-size: 2rem;
    margin: auto;
    text-align: center;
  }
  .aboutLongda .subtitlePart {
    margin: auto;
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    /* padding: 1rem 5rem; */
  }
  .aboutLongda .subtitlePart p {
    /* padding: 1rem; */
    text-indent: 2em;
  }
  .aboutLongda .picsPart {
    display: flex;
    justify-content: center;
  }
  .aboutLongda .picsPart .item {
    width: 12%;
    padding: 1rem;
    text-align: center;
    margin: 1rem;
    border: #efefef 1px solid;
  }
  .aboutLongda .picsPart .item img {
    width: 100%;
    padding: 1rem;
  }
  .aboutLongda .picsPart .item:hover {
    box-shadow: 5px 5px 10px 0px #ebebeb;
  }

  /**********底部********/
  .footer-section .footer-Links .rightPart {
    /* border-left: 1px solid #5c5c5c; */
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
  }
  .footer-section .footer-Links .relations {
    /* border-top: 1px solid #5c5c5c; */
    display: flex;
    /* padding: 0.5rem; */
    /* width: 33%; */
    justify-content: flex-start;
    font-size: 10px;
  }
  .footer-section .footer-Links .relations .items {
    display: flex;
  }
  .footer-section .footer-Links .relations .t1 {
    line-height: 3rem;
  }
  .footer-section .footer-Links .relations .t2 {
    line-height: 3rem;
    margin-left: 0.5rem;
  }
  .footer-section .footer-Links .relations img {
    width: 2rem;
    position: relative;
    top: 5px;
    margin-right: 1rem;
  }
  .footer-section .footer-Links .phone {
    display: flex;
    /* padding: 0.5rem; */
    /* border-right: #c22429 1px dashed; */
    /* width: 33%; */
    justify-content: flex-start;
    font-size: 10px;
  }
  .footer-section .footer-Links .phone .items {
    display: flex;
  }
  .footer-section .footer-Links .phone .items .t1 {
    line-height: 3rem;
  }
  .footer-section .footer-Links .phone .items .t2 {
    line-height: 3rem;
    margin-left: 0.5rem;
  }
  .footer-section .footer-Links .phone img {
    width: 30px;
    position: relative;
    top: 8px;
    margin-right: 1rem;
  }
  .footer-section .footer-Links .container {
  }
  .footer-section .footer-Links .rightPart .youqingtext {
    padding: 0.2rem;
    line-height: 2.5rem;
  }
  .footer-section .footer-Links .rightPart .xialakuang {
    background-color: #c53036;
    padding: 0.5rem;
    color: white;
    border-radius: 5px;
    height: 2rem;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
  }
  .footer-section .footer-Links .rightPart .toppartyouqing {
    /* padding: 0.5rem; */
    display: flex;
    /* border-right: #c22429 1px dashed; */
    /* width: 33%; */
    justify-content: flex-start;
    font-size: 10px;
  }
  .main_nav .nav {
    background: linear-gradient(180deg, #ffffff 0%, #ededed 100%);
    padding-left: 10px;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .main_nav {
    position: relative;
  }
  .main_nav .nav_list {
    position: absolute;
    top: -2rem;
    left: 10%;
  }
  .main_nav .nav_list .title span::before {
    content: ".";
    width: 4px;
    max-height: 10px;
    background: #cc1a21;
    color: #cc1a21;
    border-radius: 2px;
    position: relative;
    left: -6px;
  }
  .main_nav .nav_list .title {
    background-image: url("../img/2-longda_img@2x.png");
    background-size: cover;
    text-align: center;
    padding: 2rem 5rem;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 20px;
    color: #595757;
    line-height: 26px;
    text-align: left;
    font-style: normal;
  }
  .main_nav .nav_list .ul {
    background-color: white;
    padding: 2rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    box-shadow: 0px 1px 21px 0px rgba(210, 210, 210, 0.5);
  }
  .main_nav .nav_list .ul li {
    text-align: center;
  }
  .main_nav .nav_list .ul .current {
    color: #cc1a21 !important;
  }
  .main_nav .nav_list .ul .t1 {
    padding: 0.5rem 4rem;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
    line-height: 18px;
    font-style: normal;
    text-align: left;
  }
  .main_nav .nav_list .ul .t1::before {
    content: ".";
    width: 6px;
    max-height: 10px;
    border-radius: 2px;
    position: relative;
    left: -6px;
    color: #000;
    display: inline-block;
    font-weight: 900;
    top: -4px;
  }
  .main_nav .nav_list .ul .t2 {
    padding: 0.5rem 1rem;
    font-family: MicrosoftYaHei;
    font-size: 15px;
    color: #666666;
    line-height: 18px;
    font-style: normal;
  }
  .main_nav .nav_list .ul li:hover {
    background-color: #cc1a21;
    color: white !important;
  }

  .main_nav .nav .nav_sub {
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #666666;
    line-height: 17px;
    text-align: left;
    font-style: normal;
    padding: 1rem 0;
  }
  .main_nav .nav .nav_sub span {
    color: #cc1a21;
  }
  .main_nav .contentPart {
    padding-top: 1rem;
    padding-left: 10px;
    min-height: 30vw;
    font-size: 17px;
    line-height: 2rem;
    padding-right: 10px;
    padding-bottom: 5%;
  }
  .main_nav .contentPart .logo3 img {
    position: relative;
    left: 18.5%;
    top: 1.5rem;
  }
  .main_nav .contentPart .title::before {
    content: ".";
    width: 4px;
    max-height: 10px;
    background: #cc1a21;
    color: #cc1a21;
    border-radius: 2px;
    position: relative;
    left: -6px;
  }
  .main_nav .contentPart .title {
    padding: 1rem 10px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 19px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    font-style: normal;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 1rem;
  }
  .main_nav .contentPart .title2 {
    padding: 1rem 0;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    line-height: 31px;
    text-align: center;
    font-style: normal;
  }
  .main_nav .contentPart .title3 {
    padding: 1rem 0;
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #333333;
    line-height: 25px;
    text-align: center;
    font-style: normal;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 2rem;
  }
  .main_nav .contentPart .title3 span {
    margin-left: 3rem;
  }
  .main_nav .contentPart .title .tag {
    padding: 0.2rem 2rem;
    float: right;
    font-size: 16px !important;
    font-family: MicrosoftYaHei;
    font-weight: 600;
    color: #666666;
    line-height: 21px !important;
    text-align: center;
    font-style: normal;
    background: #f2f2f2;
    border-radius: 4px;
    border: 1px solid #d3d3d3;
    margin: 1px;
  }
  .main_nav .contentPart .title .current {
    background-color: #cc1a21;
    color: white;
  }
  .main_nav .contentPart .contentItem {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2rem;
  }

  .main_nav .contentPart .item {
    width: 100%;
    text-align: center;
    padding-top: 2rem;
  }
  .main_nav .contentPart .item img {
    width: 80%;
    height: 15rem;
  }
  .main_nav .contentPart .item p img {
    width: 1rem !important;
    height:auto !important;
    position: relative;
    top: 0.2rem;
    right: 0.3rem;
  }
  .main_nav .contentPart .item p {
    width: 80%;
    margin-left: 10%;
    background-color: #eef5ff;
    position: relative;
    top: -10px;
    height: 2rem;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    color: #333333;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-indent: 0;
  }
  .main_nav .contentPart .item p span {
    float: left;
    /* width: 3rem; */
    height: 2rem;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    color: #0068b7;
    line-height: 24px;
    /* text-align: left; */
    font-style: normal;
    background-color: #dbeaff;
    margin-right: -5rem;
    display: inline-block;
    padding-right: 2rem;
  }
  .main_nav .contentPart .newsList {
    margin: 1rem 10px;
  }
  .main_nav .contentPart .newsList ul li::before {
    content: ".";
    width: 4px;
    max-height: 10px;
    border-radius: 2px;
    position: relative;
    left: -6px;
    color: #cc1a21;
    font-weight: 900;
    display: inline;
    top: -4px;
  }
  .main_nav .contentPart .newsList ul li {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #333333;
    line-height: 40px;
    text-align: left;
    font-style: normal;
    display: flex;
  }
  .main_nav .contentPart .newsList ul li .text{
    font-family: MicrosoftYaHei;
    font-size: 15px;
    color: #333333;
    line-height: 40px;
    text-align: left;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 70%;
  }
  .main_nav .contentPart .newsList .time {
    font-family: MicrosoftYaHei;
    font-size: 15px;
    color: #666666;
    line-height: 40px;
    text-align: right;
    font-style: normal;
    width: 30%;
  }
  .main_nav .contentPart p {
    text-indent: 2em;
  }
  .main_nav .contentPart p img {
    width: 85% !important;
    height: 100% !important;
    margin: auto;
  }
  .lunbo .el-carousel__item {
    height: max-content !important;
  }
  .lunbo .el-carousel__container {
    height: calc(100vw / 2.5);
  }
  .lunbo .el-carousel__arrow {
    background-color: #cc1a21;
    border-radius: 5% !important;
    width: 20px;
    height: 20px;
  }
  .lunbo .el-carousel__arrow--left {
    left: 0;
  }
  .lunbo .el-carousel__arrow--right {
    right: 0;
  }
  .mainBusiness .contentItem .item {
    background-color: #cc1a21;
    height: calc(100vw / 30);
    margin: 3px;
    color: white;
    font-weight: 500;
    border-radius: 0.2rem;
    /* padding: 1.5rem; */
    line-height: calc(100vw / 35);
    /* position: relative; */
    top: -12px;
    font-size: calc(100vw / 70);
    text-align: center;
  }
  .mainBusiness .contentItem {
    margin: 1px;
  }

  .main_nav .contentPart .ledder_title {
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .main_nav .contentPart .ledder_content {
    display: flex;
    justify-content: space-evenly;
  }
  .main_nav .contentPart .ledder_content .ledder_item img {
    width: 100%;
  }
  .main_nav .contentPart .ledder_content .ledder_item {
    width: 40%;
    text-align: center;
  }
  .main_nav .contentPart .ledder_content .ledder_item .name {
    font-weight: 600;
  }
  .main_nav .contentPart .ledder_content .ledder_item .position {
    font-weight: 500;
  }
  .main_nav .contentPart .ledder_member .ledder_member_title {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1rem;
    text-indent: 1.5rem;
  }
  .main_nav .contentPart .ledder_member p {
    padding: 0.5rem;
  }
  .main_nav .contentPart .ledder_member .name {
  }
  .main_nav .contentPart .ledder_member .position {
    margin-left: 1rem;
  }
  .mainBusiness .pic .contentPart .content .btoTitle{
    background-color: rgb(127 127 127);
    position: relative;
    color: white;
    top: -22px;
    opacity: 0.8;
    font-size: 8px;
    height: 15px;
    line-height: 15px;
  }
  /*  */
  .tree li {
    padding:5px !important;
  }

  /* 手机菜单 */

  .inlineBlock{
  display: inline-block;
  }
  .clear{
  clear: both;
  }
  .fadeContent{
  display: none;
  }
  .threeDots{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }

  .phone_header{
      width: 100%;
      height: 52px;
  }
  .phone_logo{
      margin-left: 5%;
      width: 180px;
      vertical-align: middle;
      margin-top: 0px;
  }
  .phone_open{
      width: 20%;
      float: right;
      text-align: center;
      margin-top: 12px;
  }
  .open{
      width: 24px;
      vertical-align: middle;
  }
  .phone_tabs{
      background-color:rgba(11, 11, 11, 0.71);
      z-index: 100000;
      position: absolute;
      top: 52px;
      width: 100%;
  }
  .phone_tabs_left{
      width:80%;
      height: 100%;
      background-color: #ffffff;
  }
  .tabs_title{
      height: 60px;
      line-height: 60px;
      background-color: #F0F0F0;
      padding-left: 11%;
      color: #1C1C1C;
  }
  .tabs_title_red{
      color:#B52416;
  }
  .tabs_title img{
      width: 18px;height: 12px;
      float: right;
      margin-top: 25px;
      margin-right: 16%;
  }
  .phone_tabs_left ul li:nth-child(2n) .tabs_title{
      background-color: #F8F8F8;
  }
  .tabs_content{
      background-color: #ffffff;
      padding-left: 11%;
      padding-right: 11%;
      font-size: 14px;
  }
  .tabs_content a{
      color: #4A4A4A;
  }
  .tabs_content div{
      border-bottom: 1px solid #8A8A8A;
      height: 47px;line-height: 47px;
  }
  .tabs_content a:last-child div{
      border: none;;
  }
  .phone_tabs_right{
      width: 20%;
      float: right;
  }
  .close{
      width: 100%;
      height: 60px;
      background-color: #6C6C6C;
      line-height: 60px;
      text-align: center;
      font-size: 36px;
      color: #ffffff;
  }
  /* 底部样式 */
  .phone_footer{
      background-color: #F4F4F4;
      padding:0px 5% 23px;
      font-size: 12px;
      color: #1E1E1E;
  }
  .phone_footer_first{
      height: 55px;
      line-height: 55px;
      border-bottom: 1px solid #5C5C5C;
  }
  .phone_footer_first div:first-child{
      width:68%;
  }
  .phone_footer_first div:last-child{
      width: 30%;
  }
  .phone_footer_second{
      height: 80px;
      line-height: 80px;
      border-bottom: 1px solid #5C5C5C;
  }
  .phone_footer_img{
      float:right;
      width: 74px;height: 74px;
      margin-top: 3px;
  }
  /* 首页 滑动块 */
  .phone_slider_box{
      position: relative;
  }
  .phone_slider{
      background-color: #F2F2F2;
      margin-top: 10px;
      font-size: 12px;
  }
  .phone_slider_block{
      width: 14.2%;
      height: 100%;
      text-align: center;
      float: left;
      padding: 8px 0px;
      border-right: 1px solid #fff;
  }
  .phone_slider_block:last-child{
      border-right:none;
  }
  .phone_slider_img{
      height: 26px;
  }
  .phone_slider_block img{
      vertical-align: middle;
      height: 23px;
  }
  .bg_slider{
      background-color: #B52416;
      color: #ffffff;
  }
  .slider_hide{
      position: absolute;
     background-color: #DBDBDB;
      width: 100%;
      top:60px;
      left:0px;
  }
  .slider_hide_block{
      padding:8px 18px ;
  }
  .slider_hide a{
      float:left;
      width: 50%;
      text-align: center;
      height: 28px;
      line-height: 28px;
      color:#4A4A4A;
      font-size: 12px;
  }
  /* 首页新闻 */
  .phone_index_news{
      padding: 0px 5%;
      font-size: 13px;
  }
  .phone_index_news > a.news-item{
      display: block;
      border-bottom: 1px solid #D8D8D8;
  }
  .index_news_title{
      height: 48px;
      line-height:58px;
      font-size: 16px;
      color: #0B0B0B;
      font-weight: bolder;
      border-bottom: 1px solid #2D2D2D;
  }
  
  .index_news_block{
      width: 97%;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      color: #000000;
      font-size: 14px;
  }
  .index_news_line{
      height: 1px;
      background-color: #D8D8D8;
  }
  .index_news_content{
      width: 97%;
      line-height: 18px;
      color: #444444;
      margin-top: -4px;
      margin-bottom: 8px;
  }
  .index_news_more{
      display: block;
      height: 42px;
      line-height: 42px;
      background-color: #FFFFFF;
      color: #B52416;
      font-size: 14px;
      text-align: center;
      border:1px solid #A03434;
      margin-bottom: 17px;
  }
  /* 分页面公共样式*/
  .reback{
      text-align: center;
      margin-top: 20px;
  }
  .reback a{
      font-size: 13px;
      color: #4a4a4a;
  
  }
  
  .page_content{
      padding:0px 5%;
  }
  .page_banner img,.page_bgImg img{
      width:100%;
  }
  .page_bgImg{
      width:100%;
      position: relative;
      bottom: 0%;
      left:0%;
  }
  .page_title{
      font-size: 17px;
      font-weight: bolder;
      color: #000;
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #9D9D9D;
  }
  .page_line{
      float: left;
      background-color: #B52416;
      margin-top: 12px;
      height: 16px;
      width: 3px;
  }
  .page_title p{
      padding-left: 8px;
  }
  /* 首钢新闻 */
  .news_xw li{
      padding: 5px 0 10px 0;
      border-bottom: 1px solid #525252;
  }
  .mobile-content .xw_date{
      font-weight: bold;
      color: #1C1C1C;
      font-size: 16px;
      height: 27px;
      line-height: 30px;
      float: none;
      width: auto;
      text-align: inherit;
  }
  .xw_content{
      font-size: 14px;
      color: #525252;
      line-height: 20px;
  }
  /* 党建文化 */
  .news_dj, .phone_company{
      padding-top: 10px;
  }
  .news_dj img, .phone_company img{
      max-width: 100%;
      height: auto !important;
  }
  .phone_news_dj{
      margin-top: 20px;
      margin-bottom: 5px;
      border-top: 1px solid #D8D8D8;
  }
  .phone_news_dj li{
      padding: 15px 0px 10px;
      border-bottom: 1px solid #D8D8D8;
  }
  .news_dj_img{
      width: 44%;
      float: left;
  }
  .news_dj_img img{
      width: 100%;
  }
  .news_dj_content{
      width:54%;
      float: right;
      font-size: 14px;
      padding: 10px;
      color: #4A4A4A;
  }
  .news_dj_title{
      font-weight: bold;
  }
  /* 公司介绍 */
  .phone_year{
      padding: 10px 0px;
  }
  .phone_year a{
      float: left;
      width:28%;
      height:40px;
      line-height: 40px;
      text-align: center;
      margin-right: 5%;
      margin-bottom: 10px;
      background-color: #F3F3F3;
  }
  /* 成员单位服务 */
  .phone_cydw_title{
      height: 60px;
      line-height: 60px;
      font-weight: bold;
      color: #595757;
  }
  .phone_cydw_title > span:before{
      display: inline-block;
      content: '';
      background: url(../img/mobile/red.png) no-repeat;
      width: 6px;
      height: 6px;
      background-size: 100% 100%;
      vertical-align: middle;
      margin-right: 10px;
  }
  .phone_cydw_block a{
      float: left;
      width:47%;
      height: 50px;
      line-height: 50px;
      background-color: #F8F8F8;
      border-radius: 8px;
      font-size: 15px;
      margin-right: 5%;
      margin-bottom: 16px;
      color: #4A4A4A;
      font-size: 13px;
  }
  .phone_cydw_block a:nth-child(2n){
      margin-right: 0%;
  }
  .phone_cydw_block a img{
      margin-left: 13%;
      width: 28px;
      vertical-align: middle;
      margin-right: 15px;
  }
  /* 首钢财票业务 */
  .phone_sgcp,.phone_jgqd{
      margin-bottom: 16px;
  }
  .phone_sgcp_title{
      float: left;
      width:100%;
      height: 120px;
      border-bottom: 1px solid #D8D8D8;
  }
  .phone_sgcp_title img{
      width:44% ;
      max-width: 162px;
      float: left;
      margin-top: 15px;
  }
  .phone_sgcp_title span{
      font-size: 14px;
      color: #525252;
      float: left;
      width:56%;
      padding-left: 10px;
      height: 120px;
      line-height: 120px;
  }
  .phone_jgqd a{
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #FFFFFF;
      font-size: 18px;
      border-radius: 4px;
      float: left;
      margin-top: 20px;
  }
  .phone_jgqd_pjtx{
      width:100%;height: 100%;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
  }
  
  .phone_jgqd_pjtx img{
      width:100%;
      /* height: 100%; */
      position: absolute;
      top:0px;left:0px;
      z-index: -1;
  }
  .phone_jgqd_pjtx p{
      float: left;
      width:100%;
      height: 100%;
      overflow: hidden;
  }
  
  .phone_khfw{
      padding-top: 16px;
      font-size: 14px;
  }
  .phone_khfw p{
      line-height: 23px;
  }
  .telephone{
      margin-top: 15px;
  }
  .phone_more{
      display:block;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #C0483C;
      border-radius: 8px;
      margin-top: 16px;
      text-align: center;
      color:#FFFFFF;
      font-size: 16px;
      font-weight: bold;
  }
  /* 政策法规 */
  .phone_zcfg_article{
      padding-top: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid #9f9f9f;
  }
  .phone_zcfg_title{
      font-weight: bold;
      line-height: 28px;
      color:#1C1C1C;
      font-size: 15px;
  }
  .phone_zcfg_content{
      line-height: 20px;
      color: #525252;
      font-size: 13px;
      overflow: hidden;  
      display: -webkit-box;  
      -webkit-line-clamp: 2;  
      -webkit-box-orient: vertical;  
  }
  /* 岗位招聘 */
  .phone_gwzp_block{
      width: 100%;
      padding: 18px 0px 16px;
      font-size: 13px;
      border-bottom: 1px solid #9f9f9f;
  }
  .phone_gwzp_title{
      height:25px;
      font-size:15px;
      font-weight:bold;
      color:#1C1C1C;
      line-height:21px;
  }
  .phone_gwzp_more{
      float: right;
      width:70px;
      height:20px;
      line-height: 20px;
      text-align: center;
      background:#FEF4F4;
      color: #C42525;
      font-size: 12px;
  }
  .phone_gwzp_details{
      height: 30px;
      line-height: 30px;
  }
  .phone_gwzp_line{
      display: inline-block;
      width: 1px;
      height: 11px;
      margin: 0px 5px -1px;
      background-color: #595757;
  }
  /* 联系我们 */
  #dituContent{
      margin:20px 0px 20px;
  }
  .phone_address{
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      overflow: hidden;
      color: #595757;;
  }
  .phone_address span:first-child{
      display: inline-block;
      width:58px;
      font-weight: bold;
  }
  .content_title{
      text-align: center;
      font-size: 20px;
      margin: 16px 0;
  }
  .phone_company p{
      text-align: justify;
  }
  .news_dj p{
      text-align: justify;
  }
  .mainBusiness .pic{
    width: 100%;
    height: calc(100vw / 8);
    margin: 10px auto 0;
  }
  .newheader-search {
    position: absolute;
    top: 110%;
    right: 0;
    width: 250px;
    padding: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 90;
    display: none;
  }
  .newheader-search-input input {
    width: 100%;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    outline: none;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
  }
  
  .newheader-search-other {
    text-align: center;
  }
  .newheader-search-other button:nth-child(1) {
    margin-right: 20px;
  }
  .newheader-search-other button {
    border-radius: 5px;
    color: #fff;
    background: #5fa5eb;
    border: none;
    padding: 5px 20px;
    cursor: pointer;
  }
  
  .pagination > li{
    font-size: small;
  }
}