/*============================================================


Template Name   : Logisto


Description     : Logistics And Transportation HTML5 Template


Author          : LunarTemp


Version         : 1.0


==============================================================*/





/*CTA*/





.cta-strip {


  width: 100%;


  height: 140px;


  background-color: #f5f5f5;


  color: #111;


  display: flex;


  justify-content: center;


  align-items: center;


  padding: 0 15px;


  box-sizing: border-box;


  border: 4px solid #22aa11;


  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);


  border-radius: 15px;


  margin: 25px 0;


}





.cta-text h1 {


  font-size: 22px;


  margin: 0;


  color: #000000;


  line-height: 1.7;


   text-align: center;


}





.cta-text h1 span a{


 text-decoration: none;


}


.cta-text h1 span a:hover{


    color: #ffffff;


}





.cta-text h1 span a{


   color: #FFFFFF;


   font-size:32px;


   background-color: red;


   padding: 8px 10px;


   border-radius: 5px;


   margin: 0 5px;


}








@media (max-width: 768px) {


  .cta-strip {


    flex-direction: column;


    height: auto;


    text-align: center;


    padding: 10px 5%;


  }





  .cta-text {


    width: 100%;


    margin-bottom: 20px;


    text-align: center;


  }


}





ul.custom-list li {


  list-style: none;


  position: relative;


  padding-left: 28px;


  font-size: 1.1rem;


}





ul.custom-list li::before {


  content: '';


  position: absolute;


  left: 0;


  top: 4px;


  width: 20px;


  height: 20px;


  background-image: url('https://getmeupads.in/assets/img/list.png');


  background-size: contain;


  background-repeat: no-repeat;


}





/**/





.blog-details ul li {


  list-style: none;


  position: relative;


  padding-left: 28px;


  font-size: 1.1rem;


}





.blog-details ul li::before {


  content: '';


  position: absolute;


  left: 0;


  top: 4px;


  width: 20px;


  height: 20px;


  background-image: url('https://getmeupads.in/assets/img/list.png');


  background-size: contain;


  background-repeat: no-repeat;


}








/*=====================================================


Table of contents


=======================================================





1. Google fonts


2. Theme variables


3. General css


4. Theme default css


5. Margin & padding


6. Preloader


7. Bs custom css


8. Container


9. Nice select css


10. Play btn


11. Site title css


12. Theme button


13. Header top css


14. Navbar css


15. Navbar multi level dropdown


16. Navbar mega menu


17. Search popup


18. Sidebar popup css 


19. Main section css 


20. Hero css 


21. Breadcrumb css


22. About css 


23. Feature css 


24. Service css 


25. Service single


26. Step/process css 


27. Skill css 


28. Portfolio css 


29. Portfolio single


30. Pricing css


31. Counter css 


32. Team css 


33. Video css 


34. Quote css 


35. Location css 


36. Cta css 


37. Choose css 


38. Track shipment css 


39. Testimonial css 


40. Gallery css 


41. Blog css 


42. Blog single css


43. Blog sidebar widget css


44. Pagination css 


45. Faq css 


46. Contact us css 


47. Auth css


48. Coming soon css 


49. Error css 


50. Terms/privacy css


51. Scroll top css


52. Footer css 


53. Home-2 css 


54. Home-3 css 





=======================================================*/








/*====================


1. Google fonts


======================*/





@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');








/*====================


2. Theme variables


======================*/





:root {


  --body-font: 'Roboto', sans-serif;


  --heading-font: "Poppins", sans-serif;


  --theme-color: #FF5E14;


  --theme-color2: #FFAE00;


  --theme-bg-light: #F6F6F6;


  --theme-color-light: rgba(255, 94, 20, .1);


  --body-text-color: #757F95;


  --color-white: #ffffff;


  --color-dark: #003F72;


  --color-green: #15D4C9;


  --color-blue: #0049D0;


  --color-skyblue: #00BFFF;


  --color-yellow: #FBA707;


  --color-gray: #ECECEC;


  --color-red: #F05454;


  --box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);


  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);


  --transition: all .5s ease-in-out;


  --transition2: all .3s ease-in-out;


  --border-info-color: rgba(0, 0, 0, 0.08);


  --border-info-color2: rgba(0, 0, 0, 0.05);


  --border-white-color: rgba(255, 255, 255, 0.08);


  --border-white-color2: rgba(255, 255, 255, 0.05);


  --footer-bg: #003F72;


  --footer-text-color: #F5FAFF;


}











/*====================


3. General css


======================*/





*,


*:before,


*:after {


  box-sizing: inherit;


}





* {


  scroll-behavior: inherit !important;


}





html,


body {


  height: auto;


  width: 100%;


  margin: 0;


  padding: 0;


  box-sizing: border-box;


  font-family: "Montserrat", sans-serif !important;


}





body {


  /*font-family: var(--body-font);*/


  font-style: normal;


  font-size: 16px;


  font-weight: normal;


  /*color: var(--body-text-color);*/


  line-height: 1.8;


}





ul{


    /*color: #000;*/


    /*font-family: "Poppins", sans-serif;*/


    font-family: "Montserrat", sans-serif;


    font-weight: 400;


}





a {


  color: #000;;


  display: inline-block;


}





a,


a:active,


a:focus,


a:hover {


  outline: none;


  -webkit-transition: all 0.3s ease-out 0s;


  -moz-transition: all 0.3s ease-out 0s;


  -o-transition: all 0.3s ease-out 0s;


  -ms-transition: all 0.3s ease-out 0s;


  transition: all 0.3s ease-out 0s;


  text-decoration: none;


}





a:hover {


  color: var(--color-blue);


}





ul {


  margin: 0;


  padding: 0;


}





li {


  list-style: none;


}





h1,


h2,


h3,


h4,


h5,


h6 {


  color: #22aa11;


  margin: 0px;


  font-weight: 600;


  font-family: var(--heading-font);


  line-height: 1.2;


}





h1 {


  font-size: 40px;


}





h2 {


  font-size: 32px;


}





h3 {


  font-size: 28px;


}





h4 {


  font-size: 22px;


}





h5 {


  font-size: 18px;


}





h6 {


  font-size: 16px;


}





p {


  margin: 0px;


}





.img,


img {


  max-width: 100%;


  -webkit-transition: all 0.3s ease-out 0s;


  -moz-transition: all 0.3s ease-out 0s;


  -ms-transition: all 0.3s ease-out 0s;


  -o-transition: all 0.3s ease-out 0s;


  transition: all 0.3s ease-out 0s;


  height: auto;


}





label {


  color: #000;


  cursor: pointer;


  font-weight: 400;


}





*::-moz-selection {


  background: #d6b161;


  color: var(--color-white);


  text-shadow: none;


}





::-moz-selection {


  background: #555;


  color: var(--color-white);


  text-shadow: none;


}





::selection {


  background: #555;


  color: var(--color-white);


  text-shadow: none;


}





*::-moz-placeholder {


  color: #999;


  font-size: 16px;


  opacity: 1;


}





*::placeholder {


  color: #999;


  font-size: 16px;


  opacity: 1;


}








/* FILTER */





.dropdown-list{


  z-index: 9990 !important;


}








/*===================


4. Theme default css


======================*/





.bg {


  background: var(--theme-bg-light);


}











/*====================


5. Margin & padding


======================*/





.pt-0 {


  padding-top: 0px;


}





.pt-10 {


  padding-top: 10px;


}





.pt-20 {


  padding-top: 20px;


}





.pt-30 {


  padding-top: 30px;


}





.pt-40 {


  padding-top: 40px;


}





.pt-50 {


  padding-top: 50px;


}





.pt-60 {


  padding-top: 60px;


}





.pt-70 {


  padding-top: 70px;


}





.pt-80 {


  padding-top: 80px;


}





.pt-90 {


  padding-top: 90px;


}





.pt-100 {


  padding-top: 100px;


}





.pt-110 {


  padding-top: 110px;


}





.pt-120 {


  padding-top: 40px;


  padding-bottom:40px;


}





.pb-0 {


  padding-bottom: 0px;


}





.pb-10 {


  padding-bottom: 10px;


}





.pb-20 {


  padding-bottom: 20px;


}





.pb-30 {


  padding-bottom: 30px;


}





.pb-40 {


  padding-bottom: 40px;


}





.pb-50 {


  padding-bottom: 50px;


}





.pb-60 {


  padding-bottom: 60px;


}





.pb-70 {


  padding-bottom: 70px;


}





.pb-80 {


  padding-bottom: 80px;


}





.pb-90 {


  padding-bottom: 90px;


}





.pb-100 {


  padding-bottom: 100px;


}





.pb-110 {


  padding-bottom: 110px;


}





.pb-120 {


  padding-bottom: 120px;


}





.py-80 {


  padding: 80px 0;


}





.py-90 {


  padding: 90px 0;


}





.py-100 {


  padding: 100px 0;


}





.py-110 {


  padding: 110px 0;


}





.py-120 {


  padding: 20px 0;


}





.mt-0 {


  margin-top: 0px;


}





.mt-10 {


  margin-top: 10px;


}





.mt-20 {


  margin-top: 20px;


}





.mt-30 {


  margin-top: 30px;


}





.mt-40 {


  margin-top: 40px;


}





.mt-50 {


  margin-top: 50px;


}





.mt-60 {


  margin-top: 60px;


}





.mt-70 {


  margin-top: 70px;


}





.mt-80 {


  margin-top: 80px;


}





.mt-90 {


  margin-top: 90px;


}





.mt-100 {


  margin-top: 100px;


}





.mt-110 {


  margin-top: 110px;


}





.mt-120 {


  margin-top: 120px;


}





.mb-0 {


  margin-bottom: 0px;


}





.mb-10 {


  margin-bottom: 10px;


}





.mb-20 {


  margin-bottom: 20px;


}





.mb-30 {


  margin-bottom: 30px;


}





.mb-40 {


  margin-bottom: 40px;


}





.mb-50 {


  margin-bottom: 50px;


}





.mb-60 {


  margin-bottom: 60px;


}





.mb-70 {


  margin-bottom: 70px;


}





.mb-80 {


  margin-bottom: 80px;


}





.mb-90 {


  margin-bottom: 90px;


}





.mb-100 {


  margin-bottom: 100px;


}





.mb-110 {


  margin-bottom: 110px;


}





.mb-120 {


  margin-bottom: 120px;


}





.my-80 {


  margin: 80px 0;


}





.my-90 {


  margin: 90px 0;


}





.my-100 {


  margin: 100px 0;


}





.my-110 {


  margin: 110px 0;


}





.my-120 {


  margin: 120px 0;


}














/*====================


6. Preloader


======================*/





.preloader {


  position: fixed;


  width: 100%;


  height: 100%;


  background:#22aa11;


  top: 0;


  left: 0;


  z-index: 9999;


  display: flex;


  align-items: center;


  justify-content: center;


}





.loader-ripple {


  display: inline-block;


  position: relative;


  width: 80px;


  height: 80px;


}





.loader-ripple div {


  position: absolute;


  border: 4px solid var(--color-white);


  opacity: 1;


  border-radius: 50%;


  animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;


}





.loader-ripple div:nth-child(2) {


  animation-delay: -0.5s;


}





@keyframes loader-ripple {


  0% {


    top: 36px;


    left: 36px;


    width: 0;


    height: 0;


    opacity: 1;


  }





  100% {


    top: 0px;


    left: 0px;


    width: 72px;


    height: 72px;


    opacity: 0;


  }


}














/*====================


7. Bs custom css


======================*/





/* custom form */


.form-group {


  margin-bottom: 20px;


}





.form-group .form-label{


  color: #000;;


}





.form-group .form-control,


.form-group .form-select{


  padding: 14px 20px 14px 20px;


  border-radius: 15px;


  background-color: var(--color-white);


  color: #000;;


  border-color: var(--border-info-color);


}





.form-group .form-control::placeholder{


  color: var(--body-text-color);


}





.form-group .form-control:focus,


.form-group .form-select:focus{


  border-color: #22aa11;


  box-shadow: 0 0 0 .25rem rgba(249, 92, 20, .25)


}





.form-group .form-icon{


  position: relative;


}





.form-group .form-icon i{


  position: absolute;


  top: 19px;


  left: 20px;


  color: #22aa11;


  z-index: 1;


}





.form-group .form-icon .form-control,


.form-group .form-icon .form-select{


  padding-left: 50px;


}





.form-check{


  margin-bottom: 20px;


}





.form-check .form-check-input{


  border-radius: 6px;


  margin-top: 6.5px;


  border-color: var(--border-info-color);


}





.form-check .form-check-label{


  color: #000;;


}





.form-check .form-check-input:checked{


  background-color: #22aa11;


  border-color: var(--theme-color)


}





.form-check .form-check-input:focus{


  border-color: #22aa11;


  box-shadow: 0 0 0 .25rem rgba(249, 92, 20, .25)


}











/*====================


8. Container


======================*/





@media (min-width: 1200px) {


  .container,


  .container-sm,


  .container-md,


  .container-lg,


  .container-xl {


    max-width: 1200px;


  }


}











/*====================


9. Nice select css


======================*/





.nice-select{


  width: 100%;


  height: 54px;


  line-height: 54px;


  border-radius: 15px;


  font-size: 16px;


  color: #000;;


  margin-bottom: 20px;


  border-color: var(--border-info-color);


}





.nice-select::after{


  width: 9px;


  height: 9px;


  right: 20px;


  margin-top: -6.5px


}





.nice-select:focus{


  border-color: #22aa11;


  box-shadow: 0 0 0 .25rem rgba(249, 92, 20, .25)


}





.nice-select .list{


  width: 100%;


  border: none;


  border-radius: 15px;


  padding: 10px;


  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);


}





.nice-select .option.focus,


.nice-select .option.selected.focus,


.nice-select .option:hover {


  border-radius: 10px;


  background: var(--theme-bg-light);


  color: #22aa11;


}





.form-icon .nice-select{


  padding-left: 50px;


}











/*===================


10. Play btn


=====================*/





.play-btn {


  display: inline-block;


  padding: 0;


  height: 75px;


  width: 75px;


  line-height: 75px;


  font-size: 20px;


  text-align: center;


  background: #22aa11;


  color: var(--color-white) !important;


  position: absolute;


  border-radius: 50%;


  z-index: 1;


}





.play-btn i::after {


  content: "";


  position: absolute;


  height: 100%;


  width: 100%;


  top: 0;


  left: 0;


  z-index: -1;


  background-color: #22aa11;


  border-radius: 50px;


  animation: ripple-wave 1s linear infinite;


  -webkit-transform: scale(1);


  transform: scale(1);


  transition: all 0.5s ease-in-out;


}





@keyframes ripple-wave {


  0% {


    opacity: 0.8;


    -webkit-transform: scale(0.9);


    transform: scale(0.9);


  }





  100% {


    opacity: 0;


    -webkit-transform: scale(2);


    transform: scale(2);


  }


}











/*====================


11. Site title css


======================*/





.site-heading {


  margin-bottom: 50px;


  position: relative;


  /* z-index: 1; */


}





.site-title-tagline {


  display: inline-block;


  color: var(--color-white);


  font-weight: 500;


  text-transform: capitalize;


  font-size: 18px;


  background: #22aa11;


  border-radius: 50px;


  padding: 2px 15px 2px 3px;


  margin-bottom: 15px;


}





.site-title-tagline.light{


  background: var(--color-white);


}





.site-title-tagline i{


  font-size: 16px;


  width: 30px;


  height: 30px;


  line-height: 30px;


  background: var(--color-white);


  color: #22aa11;


  text-align: center;


  border-radius: 50px;


  margin-right: 5px;


}





.site-title {


  font-weight: 700;


  text-transform: capitalize;


  font-size: 32px;


  color: #000;;


  margin-bottom: 0;


}





.site-title span{


  color:#22aa11;


}





.site-heading p {


  margin-top: 15px;


}





.heading-divider {


  display: inline-block;


  position: relative;


  border-bottom: 4px solid #22aa11;


  width: 90px;


  height: 4px;


  border-radius: 50px;


}





.heading-divider:after {


  content: '';


  position: absolute;


  left: 0;


  top: -1px;


  height: 6px;


  width: 15px;


  border-radius: 0px;


  background-color: var(--color-white);


  -webkit-animation: heading-move 5s infinite linear;


  animation: heading-move 5s infinite linear;


}





@-webkit-keyframes heading-move {


  0% {


    transform: translateX(-1px);


  }


  50% {


    transform: translateX(75px);


  }


  100% {


    transform: translateX(-1px);


  }


}





@keyframes heading-move {


  0% {


    transform: translateX(-1px);


  }


  50% {


    transform: translateX(75px);


  }


  100% {


    transform: translateX(-1px);


  }


}











/*====================


12. Theme button


======================*/





.theme-btn,


.theme-btn2 {


  font-size: 16px;


  color: var(--color-white);


  padding: 10px 20px;


  transition: all 0.5s;


  text-transform: capitalize;


  position: relative;


  border-radius: 10px;


  font-weight: 500;


  cursor: pointer;


  text-align: center;


  vertical-align: middle;


  overflow: hidden;


  border: none;


  background:#22aa11;


  box-shadow: var(--box-shadow);


  z-index: 1;


}





.theme-btn::before,


.theme-btn2::before {


  content: "";


  height: 300px;


  width: 300px;


  background: #000;;


  border-radius: 50%;


  position: absolute;


  top: 50%;


  left: 50%;


  transform: translateY(-50%) translateX(-50%) scale(0);


  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);


  z-index: -1;


}





.theme-btn:hover{


  color: var(--color-white);


}





.theme-btn:hover::before,


.theme-btn2:hover::before {


  transform: translateY(-50%) translateX(-50%) scale(1);


}





.theme-btn i,


.theme-btn2 i{


  margin-left: 8px;


  transform: rotate(-40deg);


  transition: var(--transition2);


}





.theme-btn:hover i,


.theme-btn2:hover i{


  transform: rotate(0deg);


}





.theme-btn span,


.theme-btn2 span {


  margin-right: 5px;


}





.theme-btn2{


  background: var(--theme-color2);


  color: var(--color-white);


}





.theme-btn2::before {


  background: #000;;


}





.theme-btn2:hover{


  color: var(--color-white);


}











/*====================


13. Header top css


======================*/





.header-top {


  padding: 10px 0;


  background: #000;;


  position: relative;


}





.header-top::before{


  content: "";


  position: absolute;


  top: 0;


  right: 0;


  bottom: 0;


  width: 40%;


  background: #22aa11;


}





.header-top-wrap {


  display: flex;


  align-items: center;


  justify-content: space-between;


  flex-wrap: wrap;


  position: relative;


}





.header-top-list ul {


  display: flex;


  align-items: center;


  flex-wrap: wrap;


  gap: 25px;


}





.header-top-list a {


  color: var(--color-white);


  font-weight: 500;


}





.header-top-list a:hover{


  color: var(--theme-color2)


}





.header-top-list a i{


  color: #22aa11;


  margin-right: 5px;


}





.header-top-right {


  display: flex;


  align-items: center;


  flex-wrap: wrap;


  gap: 15px;


}





.header-top-right .header-top-list i{


  color: var(--color-white);


}





.header-top-social span{


  color: var(--color-white);


}





.header-top-social a {


  color: var(--color-white);


  font-size: 16px;


  text-align: center;


  margin-left: 14px;


  transition: var(--transition);


}





.header-top-social a:hover {


  color: var(--theme-color2);


}





.header-top-lang .top-lang{


  color: var(--color-white);


}





.header-top-lang .dropdown-menu{


  min-width: 60px;


  border-radius: 15px;


  padding: 10px;


  border: none;


  box-shadow: var(--box-shadow);


}





.header-top-lang .dropdown-item{


  color: #000;;


  border-radius: 10px;


}





.header-top-lang .dropdown-item:hover{


  background: #22aa11;


  color: var(--color-white);


}





@media all and (max-width: 1199px) {


  .header-top-list ul {


    gap: 10px;


  }





  .header-top-social a {


    width: 34px;


    height: 34px;


    line-height: 37px;


    margin-left: 0;


  }





  .header-top-left {


    margin-right: 5px;


  }


}





@media all and (max-width: 991px) {


  .header-top-list ul {


    gap: 0px;


  }





  .header-top-list ul li{


    margin-right: 10px;


  }





  .header-top-list ul li:last-child{


    display: none;


  }





  .header-top-lang .dropdown-toggle::after{


    margin-top: 12px;


  }





  .header-top-social span{


    display: none;


  }


}











/*====================


14. Navbar css


======================*/





.navbar {


  background: transparent;


  padding-top: 0px;


  padding-bottom: 0px;


  z-index: 4;


}





.navbar.fixed-top {


  position: fixed;


  background: var(--color-white);


  box-shadow: var(--box-shadow2);


  animation: slide-down 0.7s;


}





@keyframes slide-down {


  0% {


    transform: translateY(-100%);


  }





  100% {


    transform: translateY(0);


  }


}





.navbar .navbar-brand .logo-display {


  display: block;


}





.navbar .navbar-brand .logo-scrolled {


  display: none;


}





.navbar.fixed-top .navbar-brand .logo-display {


  display: none;


}





.navbar.fixed-top .navbar-brand .logo-scrolled {


  display: block;


}





.navbar-brand {


  margin-right: 0;


}





.navbar-brand img {


  width: 170px;


}





.navbar .dropdown-toggle::after {


  display: inline-block;


  margin-left: 5px;


  vertical-align: baseline;


  font-family: 'Font Awesome 6 Pro';


  content: "\f107";


  font-weight: 600;


  border: none;


  font-size: 14px;


}





@media all and (min-width: 992px) {





  .navbar .nav-item .nav-link {


    margin-right: 22px;


    padding: 30px 0 30px 0;


    font-size: 17px;


    font-weight: 600;


    color: #000;;


    text-transform: capitalize;


  }





  .navbar.fixed-top .nav-item .nav-link{


    color: #000;;


  }





  .navbar .nav-item .nav-link.active,


  .navbar .nav-item:hover .nav-link {


    color: #22aa11;


  }





  .navbar .nav-item:last-child .nav-link {


    margin-right: 0;


  }





  .navbar .nav-item .dropdown-menu {


    display: block;


    padding: 10px;


    margin-top: 0;


    left: -15px;


    border-radius: 15px;


    border: none;


    background: var(--color-white);


    width: 220px;


    box-shadow: var(--box-shadow);


    opacity: 0;


    visibility: hidden;


    transition: var(--transition2);


  }





  .navbar .nav-item .dropdown-menu .dropdown-item {


    font-size: 16px;


    padding: 6px 15px;


    font-weight: 500;


    color: #000;;


    position: relative;


    overflow: hidden;


    border-radius: 10px;


    text-transform: capitalize;


    transition: var(--transition2);


    z-index: 1;


  }





  .navbar .nav-item .dropdown-menu .dropdown-item:hover {


    background: #22aa11;


    color: var(--color-white);


    padding-left: 25px;


  }





  .navbar .nav-item .dropdown-menu .dropdown-item::before {


    content: "\f061";


    position: absolute;


    font-family: "Font Awesome 6 Pro";


    left: -15px;


    top: 6px;


    color: var(--color-white);


    opacity: 0;


    visibility: hidden;


    transition: var(--transition2);


    z-index: -1;


  }





  .navbar .nav-item .dropdown-menu .dropdown-item:hover::before {


    left: 0;


    opacity: 1;


    visibility: visible;


  }





  .navbar .nav-item:hover .dropdown-menu {


    transition: .3s;


    opacity: 1;


    visibility: visible;


    top: 100%;


    transform: rotateX(0deg);


  }





  .navbar .dropdown-menu-end {


    right: 0;


    left: auto;


  }





  .navbar .dropdown-menu.fade-down {


    top: 80%;


    transform: rotateX(-75deg);


    transform-origin: 0% 0%;


  }





  .navbar .dropdown-menu.fade-up {


    top: 140%;


  }





  /* nav right */


  .nav-right {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 30px;


    margin-left: 45px;


  }





  .nav-right-link {


    position: relative;


    font-size: 20px;


    color: #000;;


    border: none;


    padding-right: 0;


    background: transparent;


    transition: var(--transition);


  }





  .nav-right-link:hover {


    color: #22aa11;


  }





  .navbar.fixed-top .nav-right-link{


    color: #000;;


  }





  .navbar.fixed-top .nav-right-link:hover{


    color: #22aa11;


  }





  .nav-right .call-wrap{


    display: flex;


    align-items: center;


    justify-content: flex-start;


    gap: 7px;


  }





  .nav-right .call-wrap .icon{


    width: 45px;


    height: 45px;


    line-height: 46px;


    border-radius: 50px;


    background: #22aa11;


    color: var(--color-white);


    text-align: center;


    font-size: 18px;


    margin-top: 5px;


  }





  .nav-right .call-wrap .content span{


   color: #22aa11;


   font-weight: 500;


  }





  .nav-right .call-wrap .content h6 a{


    color: #000;;


    font-weight: 800;


  }





  .nav-right .sidebar-btn span{


    display: block;


    width: 24px;


    border-bottom: 3px solid var(--color-dark);


    border-radius: 50px;


    margin-top: 6px;


    margin-left: auto;


    transition: var(--transition);


  }





  .nav-right .sidebar-btn span:first-child{


    width: 10px;


    margin-top: 0;


  }





  .nav-right .sidebar-btn span:nth-child(3){


    width: 15px;


  }





  /* navbar light */


  .navbar.light .nav-item .nav-link{


    color: var(--color-white);


  }





  .navbar.light.fixed-top .nav-item .nav-link{


    color: #000;;


  }





  .navbar.light .nav-item .nav-link.active,


  .navbar.light .nav-item:hover .nav-link {


    color: #22aa11;


  }





  .navbar.light .nav-right-link{


    color: var(--color-white);


  }





  .navbar.light.fixed-top .nav-right-link{


    color: #000;;


  }





  .navbar.light .nav-right-link:hover{


    color: #22aa11;


  }





  .navbar.light .nav-right .sidebar-btn span{


    border-color: var(--color-white);


  }





  .navbar.light.fixed-top .nav-right .sidebar-btn span{


    border-color: #000;;


  }


}





@media all and (max-width: 1199px) {


  .navbar .nav-item .nav-link {


    margin-right: 15px;


  }





  .nav-right {


    margin-left: 25px;


  }





  .nav-right .sidebar-btn,


  .nav-right .call-wrap{


    display: none;


  }


}








/* navbar mobile menu */


.navbar .mobile-menu-right {


  display: none;


}





@media all and (max-width: 991px) {


  .navbar {


    padding-top: 10px;


    padding-bottom: 10px;


  }





  .navbar-brand img {


    width: 130px;


  }





  .navbar .offcanvas{


    width: 300px;


  }





  .navbar .offcanvas-header .btn-close{


    background: var(--color-red);


    width: 20px;


    height: 20px;


    line-height: 20px;


    text-align: center;


    border-radius: 50px;


    color: var(--color-white);


    font-size: 18px;


    box-shadow: none;


    opacity: 1;


  }





  .navbar .offcanvas-brand{


    width: 150px;


  }





  .navbar .nav-item .nav-link {


    color: #000;;


    font-weight: 700;


    margin-right: 0px;


    transition: var(--transition);


  }





  .navbar .nav-item .nav-link:hover {


    color: #22aa11;


  }





  .navbar .nav-item .dropdown-menu {


    border-radius: 15px;


  }





  .navbar .nav-item .dropdown-toggle::after {


    float: right;


    margin-top: 2.5px;


  }





  .navbar-toggler {


    padding: 0;


    border: none;


  }





  .navbar-toggler:focus {


    outline: none;


    box-shadow: none;


  }





  .navbar-toggler span{


    display: block;


    width: 22px;


    border-bottom: 3px solid var(--color-dark);


    border-radius: 50px;


    margin-top: 5px;


  }





  .navbar-toggler span:first-child{


    margin-top: 0;


  }





  .navbar-toggler span:nth-child(2){


    width: 15px;


  }





  .navbar .mobile-menu-right {


    display: flex;


    align-items: center;


    gap: 20px;


  }





  .navbar .mobile-menu-right .nav-right-link {


    background: transparent;


    border: none;


    font-size: 20px;


    color: #000;;


  }





  .navbar .mobile-menu-right .nav-right-link:hover{


    color: #22aa11;


  }





  .nav-right {


    display: none;


  }





  /* navbar light */


  .navbar.light .navbar-toggler span{


    border-color: var(--color-white);


  }





  .navbar.light.fixed-top .navbar-toggler span{


    border-color: #000;;


  }





  .navbar.light .mobile-menu-right .nav-right-link {


    color: var(--color-white);


  }





  .navbar.light.fixed-top .mobile-menu-right .nav-right-link {


    color: #000;;


  }





  .navbar.light .mobile-menu-right .nav-right-link:hover{


    color: #22aa11;


  }


}











/*==============================


15. Navbar multi level dropdown


================================*/





.navbar .nav-item .dropdown-submenu {


  position: relative;


}





.navbar .nav-item .dropdown-submenu .dropdown-menu::before {


  display: none;


}





.navbar .nav-item .dropdown-submenu a::after {


  transform: rotate(-90deg);


  position: absolute;


  right: 15px;


  top: 8px;


  font-weight: 600;


}





.navbar .nav-item .dropdown-submenu a:hover {


  background: transparent;


  color: var(--color-white);


}





.navbar .nav-item .dropdown-submenu a:focus{


  background: transparent;


}





.navbar .nav-item .dropdown-submenu .dropdown-menu {


  top: 120%;


  left: 100%;


  opacity: 0;


  visibility: hidden;


}





.navbar .nav-item .dropdown-submenu:hover .dropdown-menu {


  top: 0;


  opacity: 1;


  visibility: visible;


}





@media all and (max-width: 991px) {


  .navbar .nav-item .dropdown-menu .dropdown-item{


    color: #000;


  }





  .navbar .nav-item .dropdown-submenu .dropdown-menu {


    margin: 0 17px;


  }





  .navbar .nav-item .dropdown-submenu .dropdown-menu {


    opacity: unset;


    visibility: unset;


  }





  .navbar .nav-item .dropdown-submenu a::after {


    top: 3px;


  }





  .navbar .nav-item .dropdown-submenu a:hover {


    color: #22aa11;


  }


}











/*============================


16. Navbar mega menu


==============================*/





@media all and (min-width: 992px){


  .nav-item.mega-menu {


    position: static;


  }


  


  .navbar .nav-item.mega-menu .dropdown-menu{


    width: 98.2%;


    left: 12px;


  } 





  .navbar .mega-menu .mega-content{


    padding: 12px;


  }





  .navbar .mega-menu .mega-menu-title{


    font-size: 17px;


    margin-bottom: 15px;


    color: #000;;


  }





  .navbar .mega-menu-img img{


    border-radius: 15px;


  }





  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item{


    padding-left: 0;


  }





  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item::before{


    left: 0;


  }





  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item:hover{


    padding-left: 15px;


  }





  /* mega-menu small */


  .navbar .nav-item.mega-menu.small {


    position: relative;


  }





  .navbar .mega-menu.small .dropdown-menu{


    width: 340px;


    left: 50%;


    transform: translateX(-50%);


  } 


}








@media all and (max-width: 991px){


  .navbar .mega-menu-img{


    display: none;


  }





  .navbar .mega-menu .mega-content h5{


    margin: 15px 0;


  }


}














/* ======================


17. Search popup


====================== */





.search-popup {


  position: fixed;


  left: 0;


  top: 0;


  height: 100vh;


  width: 100%;


  z-index: 99999;


  margin-top: -540px;


  transform: translateY(-100%);


  background-color: rgba(0, 0, 0, .95);


  transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);


  transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);


}





.search-active .search-popup {


  transform: translateY(0%);


  margin-top: 0;


}





.search-popup .close-search {


  position: absolute;


  left: 0;


  right: 0;


  top: 75%;


  border: none;


  margin: 0 auto;


  margin-top: -200px;


  border-radius: 50px;


  text-align: center;


  background: var(--color-red);


  text-align: center;


  width: 50px;


  height: 50px;


  color: var(--color-white);


  font-size: 20px;


  cursor: pointer;


  box-shadow: var(--box-shadow);


  transition: all 500ms ease;


  opacity: 0;


  visibility: hidden;


}





.search-active .search-popup .close-search {


  visibility: visible;


  opacity: 1;


  top: 50%;


  transition-delay: 1500ms;


}





.search-active .search-popup .close-search span{


  transition: var(--transition);


}





.search-active .search-popup .close-search:hover span{


  transform: rotate(180deg);


}





.search-popup form {


  position: absolute;


  max-width: 700px;


  top: 50%;


  left: 15px;


  right: 15px;


  margin: -35px auto 0;


  transform: scaleX(0);


  transform-origin: center;


  transition: all 300ms ease;


}





.search-active .search-popup form {


  transform: scaleX(1);


  transition-delay: 1200ms;


}





.search-popup .form-group {


  position: relative;


  margin: 0px;


  overflow: hidden;


}





.search-popup .form-control {


  position: relative;


  width: 100%;


  height: 70px;


  outline: none;


  border-radius: 0px;


  border: none;


  border-bottom: 2px solid var(--color-white);


  background-color: transparent;


  color: var(--color-white);


  font-size: 40px;


  padding: 0 70px 0 20px;


  transition: all 500ms ease;


  text-transform: capitalize;


}





.search-popup .form-control::placeholder{


  color: var(--color-white);


  font-size: 40px;


}





.search-popup .form-group button {


  position: absolute;


  right: 5px;


  top: 5px;


  border-radius: 50px;


  background: transparent;


  text-align: center;


  font-size: 30px;


  color: var(--color-white);


  height: 50px;


  width: 50px;


  border: none;


  cursor: pointer;


  transition: all 500ms ease;


}





.search-popup .form-group button:hover{


  color: #22aa11;


}











/*====================


18. Sidebar popup css 


======================*/





.sidebar-popup{


  padding: 20px;


}





.sidebar-popup .btn-close{


  background: #22aa11;


  width: 25px;


  height: 25px;


  line-height: 25px;


  text-align: center;


  border-radius: 50px;


  color: var(--color-white);


  font-size: 20px;


  transition: var(--transition);


  box-shadow: var(--box-shadow);


  opacity: 1;


}





.sidebar-popup .btn-close:hover{


  background: var(--color-red);


}





.sidebar-popup .btn-close i{


  transition: var(--transition);


}





.sidebar-popup .btn-close:hover i{


  transform: rotate(180deg);


}





.sidebar-popup-logo img{


  width: 180px;


}





.sidebar-popup-about{


  margin-top: 10px;


}





.sidebar-popup-about h4{


  margin-bottom: 10px;


  font-weight: 700;


}





.sidebar-popup-contact{


  margin-top: 20px;


}





.sidebar-popup-contact h4{


  margin-bottom: 15px;


  font-weight: 700;


}





.sidebar-popup-contact li{


  display: flex;


  gap: 12px;


  align-items: center;


}


.sidebar-popup-contact li>img{


  width: 16px;


  height: 16px;


}





.sidebar-popup-contact li .icon{


  width: 35px;


  height: 35px;


  line-height: 35px;


  color: var(--color-white);


  background: #22aa11;


  text-align: center;


  border-radius: 50px;


}





.sidebar-popup-contact li a:hover{


  color: #22aa11;


}





.sidebar-popup-social{


  margin-top: 25px;


}





.sidebar-popup-social h4{


  margin-bottom: 20px;


  font-weight: 700;


}





.sidebar-popup-social a{


  width: 40px;


  height: 40px;


  line-height: 40px;


  text-align: center;


  border-radius: 50px;


  margin-right: 8px;


  background: #22aa11;


  color: var(--color-white);


  box-shadow: var(--box-shadow);


}





.sidebar-popup-social a:hover{


  background: #000;;


}














/*====================


19. Main section css 


======================*/





.main {


  margin-top: 0rem;


}











/*====================


20. Hero css 


======================*/





.hero-single {


  padding-top: 120px;


  padding-bottom: 40px;


  background-position: center !important;


  background-size: cover !important;


  background-repeat: no-repeat !important;


  display: flex;


  align-items: center;


  justify-content: center;


  position: relative;


  z-index: 1;


}





.hero-single::before {


  content: "";


  position: absolute;


  width: 100%;


  height: 100%;


  top: 0;


  left: -0.5px;


  background: linear-gradient(to bottom right, rgba(23, 42, 56, 1) 0%, rgba(23, 42, 56, 0) 100%);


  z-index: -1;


}





.hero-single .hero-content {


  height: 100%;


}





.hero-single .hero-content .hero-sub-title {


  display: inline-block;


  color: var(--color-white);


  font-size: 24px;


  letter-spacing: 6px;


  font-weight: 600;


  position: relative;


  text-transform: uppercase;


}





.hero-single .hero-content .hero-sub-title::before{


  content: "";


  position: absolute;


  left: 0;


  bottom: 0;


  width: 100%;


  height: 15px;


  background: #22aa11;


  z-index: -1;


}





.hero-single .hero-content .hero-title {


  color: var(--color-white);


  font-size: 46px;


  font-weight: 600;


  margin: 20px 0;


  text-transform: capitalize;


}





.hero-single .hero-content .hero-title span{


  color:#22aa11;


}





.hero-single .hero-content p {


  color: var(--color-white);


  font-size: 18px;


  line-height: 30px;


  font-weight: 400;


  margin-bottom: 20px;


}





.hero-single .hero-content .hero-btn {


  display: flex;


  justify-content: start;


  gap: 1rem;


  margin-top: 35px;


}





@media all and (max-width: 1199px) {


  .hero-single .hero-content .hero-title {


    font-size: 37px;


  }


}





@media all and (max-width: 991px) {


  .hero-single .hero-content .hero-title {


    font-size: 50px;


  }


}





@media all and (max-width: 767px) {


   .hero-single .hero-content .hero-title {


    font-size: 32px;


  }


  


  .hero-single .hero-content .hero-sub-title {


    font-size: 18px;


  }





  .hero-single .hero-content .hero-btn {


    gap: 1rem;


  }


  


  .hero-single{


      padding-top: 120px !important;


  }


}








/* hero-slider */


.hero-slider .owl-nav {


  margin-top: 0px;


}





.hero-slider .owl-nav button i{


  display: inline-block;


  height: 55px;


  width: 55px;


  line-height: 55px;


  color: #22aa11;


  font-size: 25px;


  text-align: center;


  background: var(--color-white);


  border-radius: 50px;


  cursor: pointer;


  transition: var(--transition);


}





.hero-slider .owl-nav button:hover i{


  background: #22aa11;


  color: var(--color-white);


}





.hero-slider .owl-nav .owl-prev {


  left: 40px;


}





.hero-slider .owl-nav .owl-next {


  right: 40px;


}





.hero-slider .owl-nav .owl-prev,


.hero-slider .owl-nav .owl-next {


  position: absolute;


  top: 50%;


  transform: translate(0, -50%);


}





.hero-slider .owl-dots {


  position: absolute;


  left: 50%;


  bottom: 40px;


  transform: translateX(-50%);


  display: none;


}





.hero-slider .owl-dots .owl-dot span {


  display: inline-block;


  width: 15px;


  height: 15px;


  background-color: var(--color-white);


  border-radius: 0px;


  border: 3px solid #22aa11;


  margin: 5px;


  transition: var(--transition);


}





.hero-slider .owl-dots .owl-dot.active span {


  background-color: #22aa11;


}








@media all and (max-width: 1199px) {


  .hero-slider .owl-nav .owl-prev,


  .hero-slider .owl-nav .owl-next {


    top: unset;


    bottom: 45px;


  }





  .hero-slider .owl-nav .owl-prev {


    left: unset;


    right: 120px;


  }





  .hero-slider .owl-nav .owl-next {


    right: 40px;


  }


}











/*====================


21. Breadcrumb css


======================*/





.site-breadcrumb {


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  text-align: center;


  background-repeat: no-repeat !important;


  background-position: center !important;


  background-size: cover !important;


  position: relative;


  padding-top: 30px;


  padding-bottom: 30px;


  z-index: 1;


}





.site-breadcrumb::before {


  content: "";


  position: absolute;


  height: 100%;


  width: 100%;


  top: 0;


  left: 0;


  background: #000;;


  opacity: 0.85;


  z-index: -1;


}





.site-breadcrumb .breadcrumb-title {


  font-size: 35px;


  color: var(--color-white);


  font-weight: 700;


  margin-bottom: 10px;


  text-transform: capitalize;


}





.site-breadcrumb .breadcrumb-menu {


  position: relative;


  z-index: 1;


}





.site-breadcrumb .breadcrumb-menu li {


  position: relative;


  display: inline-block;


  margin-left: 25px;


  color: var(--color-white);


  font-weight: 500;


  text-transform: capitalize;


}





.site-breadcrumb .breadcrumb-menu li a {


  color: var(--color-white);


  transition: all 0.5s ease-in-out;


}





.site-breadcrumb .breadcrumb-menu li::before {


  position: absolute;


  content: '\f101';


  font-family: 'Font Awesome 6 Pro';


  right: -21px;


  top: 1px;


  text-align: center;


  font-size: 16px;


  color: var(--color-white);


}





.site-breadcrumb .breadcrumb-menu li:first-child {


  margin-left: 0;


}





.site-breadcrumb .breadcrumb-menu li:last-child:before {


  display: none;


}





.site-breadcrumb .breadcrumb-menu li a:hover {


  color: #22aa11;


}





.site-breadcrumb .breadcrumb-menu li.active {


  color: #22aa11;


}











/* ===================


22. About css 


====================== */








.about-left{


  position: relative;


}





.about-img img{


  border-radius: 100px;


}





.about-img .img-2{


  margin-left: -20px;


  margin-top: 130px;


  border: 10px solid var(--color-white);


}





.about-img .img-3{


  margin-top: -20px;


  margin-left: -50px;


  border: 10px solid var(--color-white);


}





.about-right {


  position: relative;


  display: block;


}





.about-experience{


  background: #22aa11;


  position: absolute;


  right: 50px;


  bottom: 20px;


  padding: 14px 25px;


  border-radius: 100px;


  text-align: center;


  border: 10px solid var(--color-white);


}





.about-experience h5{


  color: var(--color-white);


  font-size: 40px;


}





.about-experience p{


  color: var(--color-white);


  font-weight: 600;


}





.about-content {


  margin-top: 25px;


  margin-bottom: 35px;


}





.about-item{


  display: flex;


  gap: 12px;


  border: 1px solid var(--border-info-color);


  border-radius: 20px;


  padding: 15px;


}





.about-item .icon{


  width: 65px;


  height: 65px;


  line-height: 65px;


  text-align: center;


  background: #22aa11;


  border-radius: 50px;


}





.about-item .icon img{


  width: 45px;


  filter: brightness(0) invert(1);


}





.about-item .content{


  flex: 1;


}





.about-item .content h6{


  color: #000;;


  margin-bottom: 5px;


}





.about-text{


  /*color:#000;*/


}








@media all and (max-width: 991px) {


  .about-right {


    margin-top: 80px;


  }


}





@media all and (max-width: 767px) {


  .about-title {


    font-size: 30px;


  }





  .about-img .img-2{


    margin-top: 60px;


    margin-left: -10px;


  }





  .about-img .img-3{


    margin-left: -30px;


  }





  .about-experience{


    right: -7px;


    bottom: -60px;


  }


}











/*====================


23. Feature css 


======================*/





.feature-area{


  position: relative;


  z-index: 1;


}





.fa-negative{


  margin-top: -100px;


}





.feature-item{


  display: flex;


  gap: 14px;


  background: #000;;


  border-radius: 15px;


  padding: 20px;


  position: relative;


}





.feature-item::before{


  content: "";


  position: absolute;


  left: 80px;


  right: 80px;


  bottom: -1px;


  border: 4px solid var(--color-white);


  border-radius: 10px 10px 0 0;


}





.feature-item .count{


  position: absolute;


  left: 20px;


  bottom: 0px;


  font-size: 50px;


  font-weight: 700;


  color: transparent;


  -webkit-text-stroke: 1px var(--body-text-color);


}





.feature-icon{


  position: relative;


}





.feature-icon::before{


  content: "";


  position: absolute;


  left: 0;


  top: 0;


  width: 50px;


  height: 50px;


  background: #22aa11;


  border-radius: 50px;


}





.feature-icon img{


  width: 60px;


  filter: brightness(0) invert(1);


}





.feature-content{


  flex: 1;


}





.feature-content h4{


  color: var(--color-white);


}





.feature-content p{


  color: var(--color-white);


  margin-top: 10px;


}





/* feature-area 2 */


.feature-area.fta-2 .feature-item{


  background: var(--color-white);


  padding: 30px;


  box-shadow: var(--box-shadow);


}





.feature-area.fta-2 .feature-item::before{


  display: none;


}





.feature-area.fta-2 .feature-icon{


  width: 68px;


  height: 68px;


  line-height: 68px;


  text-align: center;


  background: #22aa11;


  border-radius: 50px 50px 50px 10px;


  box-shadow: -10px -10px 0 var(--theme-color-light);


}





.feature-area.fta-2 .feature-icon img{


  width: 45px;


}





.feature-area.fta-2 .feature-icon::before{


  display: none;


}





.feature-area.fta-2 .feature-content h4{


  color: #000;;


}





.feature-area.fta-2 .feature-content p{


  color: var(--body-text-color);


}





@media all and (max-width: 1199px) {


  .fa-negative{


    margin-top: -70px;


  }


}














/* ===================


24. Service css 


====================== */





.sa-bg{


  position: relative;


  background: #000;;


  z-index: 1;


}





.sa-bg::before{


  content: "";


  position: absolute;


  width: 100%;


  height: 100%;


  left: 0;


  top: 0;


  background-image: url(../img/shape/03.png);


  background-repeat: no-repeat;


  background-size: cover;


  background-position: center;


  opacity: .1;


  z-index: -1;


}





.service-item {


  position: relative;


  padding: 20px;


  background: var(--color-white);


  border-radius: 50px 50px 50px 10px;


  transition: var(--transition);


}





.service-item:hover {


  transform: translateY(-5px);


}





.service-item .count{


  position: absolute;


  top: 0px;


  right: 30px;


  font-weight: 800;


  font-size: 70px;


  color: transparent;


  -webkit-text-stroke: 1px #22aa11;


  opacity: .2;


}





.service-icon{


  width: 80px;


  height: 80px;


  line-height: 80px;


  text-align: center;


  border-radius: 50px 50px 50px 10px;


  background: #22aa11;


  margin-bottom: 30px;


  box-shadow: 10px 10px 0 var(--theme-color-light);


  transition: var(--transition);


}





.service-item:hover .service-icon{


  box-shadow: 0px 0px 0 var(--theme-color-light);


}





.service-icon img{


  width: 50px;


  filter: brightness(0) invert(1);


}





.service-content h4 a{


  color: #000;;


}





.service-content h4 a:hover{


  color: #22aa11;


}





.service-content p{


  color: var(--body-text-color);


  margin-top: 5px;


  margin-bottom: 20px;


}





/* service-area 2 */


.service-area.sa-2 .service-item{


  background: transparent;


  transform: none;


}





.service-area.sa-2 .service-item::before{


  content: "";


  position: absolute;


  left: 0;


  bottom: 0;


  width: 100%;


  height: 80%;


  background: var(--color-white);


  border-radius: 40px 40px 40px 10px;


  z-index: -1;


}





.service-area.sa-2 .service-item .count{


  top: unset;


  right: unset;


  left: 18px;


  bottom: -10px;


}





.service-area.sa-2 .service-img img{


  border-radius: 50px;


}





.service-area.sa-2 .service-content{


  display: flex;


  gap: 20px;


  margin-top: 20px;


}





.service-area.sa-2 .service-icon{


  display: flex;


  align-items: center;


  justify-content: center;


}





.service-area.sa-2 .service-icon img{


  width: 50px !important;


}





.service-area.sa-2 .service-info{


  flex: 1;


}





/* service-slider */


.service-slider .owl-nav {


  margin-top: 0px;


}





.service-slider .owl-nav button{


  position: absolute;


  top: 50%;


  transform: translate(0, -50%);


  transition: var(--transition);


}





.service-slider .owl-nav button i{


  display: inline-block;


  height: 48px;


  width: 48px;


  line-height: 48px;


  color: var(--color-white);


  font-size: 25px;


  text-align: center;


  background: #22aa11;


  border-radius: 50px;


  cursor: pointer;


  transition: var(--transition);


}





.service-slider .owl-nav button:hover i{


  background: #22aa11;


  color: var(--color-white);


} 





.service-slider .owl-nav .owl-prev {


  left: 0px;


  opacity: 0;


}





.service-slider .owl-nav .owl-next {


  right: 0px;


  opacity: 0;


}





.service-slider:hover .owl-nav .owl-prev {


  left: -20px;


  opacity: 1;


}





.service-slider:hover .owl-nav .owl-next {


  right: -20px;


  opacity: 1;


}





@media all and (max-width: 1199px) {


  .service-slider .owl-nav {


    display: none;


  }


}














/* ======================


25. Service single


====================== */





.service-sidebar .widget{


  background: var(--color-white);


  padding: 30px;


  border-radius: 20px;


  margin-bottom: 30px;


  box-shadow: var(--box-shadow);


}





.service-sidebar .widget .title{


  position: relative;


  padding-bottom: 10px;


  margin-bottom: 30px;


}





.service-sidebar .widget .title::before{


  content: "";


  position: absolute;


  left: 0;


  bottom: 0;


  height: 3px;


  width: 50px;


  background: #22aa11;


  border-radius: 50px;


}





.service-sidebar .category a{


  display: block;


  font-size: 16px;


  color: #000;;


  font-weight: 500;


  padding-bottom: 7px;


  margin-bottom: 7px;


  border-bottom: 1px solid var(--border-info-color);


}





.service-sidebar .category a:hover{


  color: #22aa11;


  padding-left: 5px;


}





.service-sidebar .category a i{


  margin-right: 5px;


}





.service-sidebar .category a:last-child{


  padding: 0;


  margin: 0;


  border-bottom: none;


}





.service-sidebar .service-download a {


  display: block;


  color: #000;;


  font-weight: 500;


  border: 2px solid #22aa11;


  padding: 10px 20px;


  margin-bottom: 20px;


  border-radius: 50px;


  transition: var(--transition);


}





.service-sidebar .service-download a:last-child{


  margin-bottom: 0;


}





.service-sidebar .service-download a:hover{


  background: #22aa11;


  color: var(--color-white);


}





.service-sidebar .service-download a i {


  margin-right: 10px;


}





.service-details img{


  border-radius: 30px;


}





.service-details .content h3{


  color: #000;;


}





.service-details .content .list li{


  font-weight: 500;


  color: #000;;


  margin-top: 5px;


}





.service-details .content .list i {


  color: #22aa11;


  margin-right: 10px;


}











/* ===================


26. Step/process css 


====================== */





.process-item {


  position: relative;


  background: var(--color-white);


  padding: 20px;


  border-radius: 20px;


  box-shadow: var(--box-shadow);


}





.process-item .count{


  display: block;


  font-weight: 800;


  color: var(--color-white);


  font-size: 20px;


  height: 35px;


  width: 35px;


  line-height: 28px;


  text-align: center;


  background: #000;;


  padding: 2px 6px;


  margin-top: -20px;


  margin-bottom: 10px;


  border-radius: 0 0 50px 50px;


}





.process-item .icon{


  position: absolute;


  right: 0;


  top: 0;


  width: 65px;


  height: 65px;


  line-height: 60px;


  text-align: center;


  background: #22aa11;


  border-radius: 50px 10px 50px 50px;


}





.process-item .icon img{


  width: 40px;


  filter: brightness(0) invert(1);


}





.process-item .content h4{


  color: #000;;


}





.process-item .content p{


  color: var(--body-text-color);


  margin-top: 10px;


}











/* ===================


27. Skill css 


====================== */





.skill-img{


  position: relative;


}





.skill-img::before{


  content: "";


  position: absolute;


  right: 50px;


  bottom: 0;


  width: 80%;


  height: 90%;


  background: #22aa11;


  border-radius: 50px;


  transform: rotate(5deg);


  opacity: .2;


  z-index: -1;


}





.skill-img img{


  width: 85%;


  border-radius: 50px;


}





.skill-text{


  margin-top: 10px;


}





.skill-progress{


  margin-top: 25px;


}





.skill-progress .progress-item {


  margin-bottom: 25px;


}





.skill-progress .progress-item:last-child {


  margin-bottom: 0;


}





.skill-progress .progress-item h5 {


  font-size: 16px;


  text-transform: capitalize;


  font-weight: 600;


  display: flex;


  justify-content: space-between;


  align-items: center;


  margin-bottom: 15px;


}





.skill-progress .progress-item .progress {


  height: 8px;


  background-color: var(--theme-bg-light);


  border-radius: 50px;


}





.skill-progress .progress-item .progress .progress-bar {


  background-color: #22aa11;


}





@media all and (max-width: 767px) {


  .skill-img::before{


    right: 15px;


  }


}











/*====================


28. Portfolio css 


======================*/





.portfolio-area{


  position: relative;


}





.pa-bg{


  position: absolute;


  top: 0;


  left: 0;


  background-repeat: no-repeat;


  background-position: center;


  background-size: cover;


  width: 100%;


  height: 500px;


}





.pa-bg::before{


  content: "";


  position: absolute;


  top: 0;


  left: 0;


  background: rgba(0, 63, 114, .85);


  width: 100%;


  height: 100%;


}





.portfolio-img {


  position: relative;


}





.portfolio-img img{


  border-radius: 50px;


}





.portfolio-img::before {


  content: '';


  position: absolute;


  top: 0px;


  left: 0px;


  width: 100%;


  height: 100%;


  opacity: 0;


  background: #22aa11;


  border-radius: 50px;


  transform: scaleY(0);


  transition: var(--transition);


}





.portfolio-item:hover .portfolio-img::before {


  opacity: .8;


  transform: scaleY(1);


}





.portfolio-link {


  position: absolute;


  width: 60px;


  height: 60px;


  line-height: 60px;


  color: #22aa11;


  background: var(--color-white);


  border-radius: 50px;


  text-align: center;


  left: 50%;


  top: 50%;


  font-size: 28px;


  margin-top: 50px;


  opacity: 0;


  box-shadow: var(--box-shadow);


  transform: translate(-50%, -50%);


  transition-delay: 0.3s;


}





.portfolio-link:hover{


  color: #22aa11;


}





.portfolio-item:hover .portfolio-link {


  margin-top: 0px;


  opacity: 1;


}





.portfolio-content{


  display: flex;


  justify-content: space-between;


  align-items: center;


  margin-top: 15px;


}





.portfolio-content small{


  text-transform: uppercase;


  font-weight: 600;


  color: #22aa11;


  letter-spacing: 2px;


}





.portfolio-content h4 a{


  font-size: 20px;


  color: #000;;


}





.portfolio-content h4 a:hover{


  color: #22aa11;


}





.portfolio-arrow{


  width: 45px;


  height: 45px;


  line-height: 45px;


  background: #22aa11;


  color: var(--color-white);


  text-align: center;


  border-radius: 50px;


}





.portfolio-arrow i{


  color: var(--color-white);


  transform: rotate(-45deg);


  transition: var(--transition);


}





.portfolio-arrow:hover i{


  transform: rotate(0);


}





/* portfolio-slider */


.portfolio-slider .owl-nav {


  margin-top: 0px;


}





.portfolio-slider .owl-nav button{


  position: absolute;


  top: 50%;


  margin-top: -35px;


  transform: translate(0, -50%);


  transition: var(--transition);


}





.portfolio-slider .owl-nav button i{


  display: inline-block;


  height: 48px;


  width: 48px;


  line-height: 48px;


  color: var(--color-white);


  font-size: 25px;


  text-align: center;


  background: #22aa11;


  border-radius: 50px;


  cursor: pointer;


  transition: var(--transition);


}





.portfolio-slider .owl-nav button:hover i{


  background: #22aa11;


  color: var(--color-white);


} 





.portfolio-slider .owl-nav .owl-prev {


  left: 0px;


  opacity: 0;


}





.portfolio-slider .owl-nav .owl-next {


  right: 0px;


  opacity: 0;


}





.portfolio-slider:hover .owl-nav .owl-prev {


  left: -10px;


  opacity: 1;


}





.portfolio-slider:hover .owl-nav .owl-next {


  right: -10px;


  opacity: 1;


}





@media all and (max-width: 1199px) {


  .portfolio-slider .owl-nav {


    display: none;


  }


}











/* ======================


29. Portfolio single


====================== */





.portfolio-sidebar .widget{


  background: var(--color-white);


  padding: 30px;


  border-radius: 20px;


  margin-bottom: 30px;


  box-shadow: var(--box-shadow);


}





.portfolio-sidebar .widget .title{


  position: relative;


  padding-bottom: 10px;


  margin-bottom: 30px;


}





.portfolio-sidebar .widget .title::before{


  content: "";


  position: absolute;


  left: 0;


  bottom: 0;


  height: 3px;


  width: 50px;


  background: #22aa11;


  border-radius: 50px;


}





.portfolio-sidebar .list li {


  border-bottom: 1px solid var(--border-info-color);


  display: block;


  margin-bottom: 10px;


  padding-bottom: 10px;


  text-transform: uppercase;


  font-size: 14px;


  color: #000;;


  font-weight: 600;


  line-height: 33px;


}





.portfolio-sidebar .list li:last-child {


  border-bottom: none;


  padding: 0;


  margin: 0;


}





.portfolio-sidebar .list li span {


  display: block;


  font-weight: normal;


  font-size: 16px;


  margin: 0;


  text-transform: none;


}





.portfolio-sidebar .project h4{


  color: var(--color-white);


  margin-bottom: 25px;


}





.portfolio-sidebar .rating a {


  color: #22aa11;


}





.portfolio-sidebar .project{


  background: #22aa11;


}





.portfolio-details img{


  border-radius: 30px;


}





.portfolio-details .content h3{


  color: #000;;


}





.portfolio-details .content .list li{


  font-weight: 500;


  color: #000;;


  margin-top: 5px;


}





.portfolio-details .content .list i {


  color: #22aa11;


  margin-right: 10px;


}














/* ===================


30. Pricing css 


====================== */





.pricing-area{


  position: relative;


}





.pricing-item {


  background: var(--color-white);


  border-radius: 40px;


  position: relative;


  padding: 40px;


  box-shadow: var(--box-shadow);


  transition: var(--transition);


}





.pricing-item:hover{


  -webkit-transform: translateY(-10px);


  transform: translateY(-10px);


} 





.pricing-header-wrap{


  margin-bottom: 30px;


}





.pricing-header{


  position: absolute;


  right: 30px;


  top: -15px;


  background: #22aa11;


  padding: 0 15px;


  box-shadow: var(--box-shadow);


  border-radius: 50px;


  letter-spacing: 4px;


}





.pricing-header h5 {


  font-size: 22px;


  font-weight: 600;


  text-transform: capitalize;


  display: inline-block;


  color: var(--color-white);


}





.pricing-amount{


  margin-bottom: 45px;


}





.pricing-amount strong {


  font-size: 50px;


  font-weight: 900;


  color: #000;;


  line-height: 1;


}





.pricing-amount-type {


  color: #000;;


  font-size: 16px;


  font-weight: 500;


}





.pricing-text{


  color: #000;;


  text-transform: uppercase;


  font-size: 15px;


}





.pricing-feature {


  padding: 40px 0 0 0;


}





.pricing-feature li {


  margin-bottom: 15px;


  color: #000;;


  font-weight: 500;


}





.pricing-feature li:last-child {


  margin-bottom: 0px;


}





.pricing-feature li i {


  color: #22aa11;


  margin-right: 10px;


}





.pricing-feature li .not-include{


  color: var(--body-text-color);


} 





.pricing-item .theme-btn{


  width: 100%;


}





.pricing-item.active{


  outline: 3px solid #22aa11;


}





@media all and (max-width: 991px) {


  .pricing-amount strong {


    font-size: 50px;


  }


}











/* ===================


31. Counter css 


====================== */





.counter-area {


  position: relative;


  background: #22aa11;


  overflow: hidden;


  z-index: 1;


}





.counter-shape .img-1{


  position: absolute;


  left: -20px;


  top: 0;


  width: 320px;


  opacity: .2;


  z-index: -1;


}





.counter-shape .img-2{


  position: absolute;


  right: -20px;


  bottom: 0;


  width: 320px;


  opacity: .1;


  z-index: -1;


}





.counter-box {


  display: flex;


  gap: 12px;


  position: relative;


  padding: 20px 15px 20px 20px;


  border-radius: 15px;


  border: 2px solid var(--border-white-color);


  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);


  z-index: 1;


}





.counter-box .icon {


    width: 80px;


    height: 80px;


    line-height: 70px;


    font-size: 35px;


    /* border-radius: 50px; */


    text-align: center;


    color: #ffffff;


    /* background: #ffffff; */


}





.counter-box .icon img{


  width: 45px;


}





.counter-box .info{


  display: flex;


  gap: 2px;


}





.counter-box .counter {


  display: block;


  line-height: 1;


  color: var(--color-white);


  font-size: 50px;


  font-weight: 900;


}





.counter-box .unit{


  font-size: 25px;


  color: #fff;


  font-weight: 500;


  line-height: 1;


  margin: 3px 0 0 3px;


}





.counter-box .title {


  color: var(--color-white);


  margin-top: 10px;


  font-size: 18px;


  font-weight: 600;


  text-transform: capitalize;


}











/* ===================


32. Team css 


====================== */





.team-area{


  position: relative;


}





.team-img{


  position: relative;


}





.team-img img{


  border-radius: 20px;


}





.team-social-btn{


  position: absolute;


  right: -3px;


  bottom: 0;


  width: 60px;


  height: 60px;


  background: var(--color-white);


  border-top-left-radius: 50%;


  padding: 8px;


}





.team-social-btn::before{


  content: "";


  position: absolute;


  left: -20px;


  bottom: 0;


  width: 20px;


  height: 20px;


  background: transparent;


  box-shadow: 5px 5px 0 5px var(--color-white);


  border-bottom-right-radius: 20px;


}





.team-social-btn::after{


  content: "";


  position: absolute;


  top: -20px;


  right: 3px;


  width: 20px;


  height: 20px;


  background: transparent;


  box-shadow: 5px 5px 0 5px var(--color-white);


  border-bottom-right-radius: 20px;


}





.team-social-btn button{


  width: 42px;


  height: 42px;


  line-height: 42px;


  background: #22aa11;


  color: var(--color-white);


  border-radius: 50%;


  text-align: center;


  font-size: 18px;


  border: none;


}





.team-social{


  position: absolute;


  right: 9px;


  bottom: 40px;


  text-align: center;


  opacity: 0;


  visibility: hidden;


  transition: var(--transition);


}





.team-social a {


  display: block;


  width: 40px;


  height: 40px;


  line-height: 40px;


  margin-bottom: 10px;


  background: var(--color-white);


  color: #22aa11;


  border-radius: 50px;


}





.team-social a:hover {


 background: #22aa11;


 color: var(--color-white);


}





.team-social-wrap:hover .team-social{


  opacity: 1;


  visibility: visible;


  bottom: 60px;


}





.team-content{


  margin-top: 10px;


}





.team-content h4 a{


  color: #000;;


  font-size: 20px;


}





.team-content h4 a:hover{


  color: #22aa11;


}





.team-content span{


  color: #22aa11;


  font-weight: 500;


}











/* ===================


33. Video css 


====================== */





.video-area {


  position: relative;


  background-repeat: no-repeat;


  background-position: center;


  background-size: cover;


}





.video-area::before {


  content: "";


  position: absolute;


  background: rgba(0, 63, 114, .5);


  width: 100%;


  height: 100%;


  left: 0;


  top: 0;


}





.video-wrap {


  position: relative;


  display: flex;


  justify-content: center;


  border-radius: 5px;


  height: 500px;


}





.video-wrap img {


  border-radius: 12px;


}





.video-wrap .play-btn {


  display: inline-block;


  padding: 0;


  height: 75px;


  width: 75px;


  text-align: center;


  position: absolute;


  border-radius: 50%;


  top: 50%;


  left: 50%;


  transform: translate(-50%, -50%);


}





@media all and (max-width: 767px) {


  .video-wrap {


    height: 400px;


  }


}











/*====================


34. Quote css 


======================*/





.quote-area{


  position: relative;


}





.qa-negative{


  margin-top: -120px;


}





.quote-content{


  background: var(--color-white);


  border-radius: 20px;


  box-shadow: var(--box-shadow);


  padding: 30px;


}





.quote-header{


  border-bottom: 1px solid var(--border-info-color);


  padding-bottom: 20px;


  margin-bottom: 30px;


}





.quote-img img{


  border-radius: 20px;


}











/*====================


35. Location css 


======================*/





.location-map {


  position: relative;


}





.location-item {


  position: absolute;


  left: 10%;


  top: 24%;


}





.location-item:nth-child(2){


  left: 36%;


  top: 66%;


}





.location-item:nth-child(3){


  left: 38%;


  top: 10px;


}





.location-item:nth-child(4){


  left: 50%;


  top: 35%;


}





.location-item:nth-child(5){


  left: 80%;


  top: 16%;


}





.location-item:nth-child(6){


  left: 94%;


  top: 88%;


}





.location-item:nth-child(7){


  left: 28%;


  top: 27%;


}





.location-item:nth-child(8){


  left: 57%;


  top: 58%;


}





.location-item:nth-child(9){


  left: 74%;


  top: 47%;


}





.location-item:nth-child(10){


  left: 94%;


  top: 18%;


}





.location-item:nth-child(11){


  left: 63%;


  top: 18%;


}





.location-item:nth-child(12){


  left: 83%;


  top: 75%;


}





.location-item .point{


  position: relative;


  display: inline-block;


  width: 10px;


  height: 10px;


  background: #22aa11;


  border-radius: 50%;


  cursor: pointer;


  z-index: 1;


}





.location-item .point::after{


  content: "";


  position: absolute;


  width: 100%;


  height: 100%;


  left: 0;


  top: 0;


  background: #22aa11;


  border-radius: 50%;


  transform: scale(1);


  animation: ripple-1 1.5s 0s infinite;


  z-index: -1;


}





.location-item .info{


  padding: 8px 15px;


  position: relative;


  position: absolute;


  width: max-content;


  transform: translateX(-50%);


  left: 5.2px;


  bottom: 20px;


  background: #22aa11;


  border-radius: 50px;


  opacity: 0;


  visibility: hidden;


  transition: var(--transition);


  z-index: 1;


}





.location-item .info::after{


  content: "";


  position: absolute;


  width: 0;


  height: 0;


  border-left: 8px solid transparent;


  border-right: 8px solid transparent;


  border-top: 12px solid #22aa11;


  bottom: -10px;


  left: 50%;


  transform: translateX(-50%);


}





.location-item .info h5 {


  font-size: 15px;


  color: var(--color-white);


}





.location-item.active .info{


  opacity: 1;


  visibility: visible;


  bottom: 30px;


}





@keyframes ripple-1 {


  0% {


      transform: scale(1);


      opacity: 0.8;


  }


  100% {


      transform: scale(3);


      opacity: 0;


  }


}











/* ===================


36. Cta css 


====================== */





.cta-area{


  position: relative;


  background-repeat: no-repeat;


  background-size: cover;


  background-position: center;


  background-attachment: fixed;


  padding-top: 90px;


  padding-bottom: 90px;


  z-index: 1;


}





.cta-area::before{


  content: "";


  position: absolute;


  width: 100%;


  height: 100%;


  left: 0;


  top: 0;


  background:rgba(0, 63, 114, .7);


  z-index: -1;


}





.cta-content{


  text-align: center;


}





.cta-content h1{


  color: var(--color-white);


  text-transform: capitalize;


  font-weight: 700;


  margin-bottom: 10px;


}





.cta-content p{


  color: var(--color-white);


  font-size: 16px;


  margin-bottom: 30px;


}





.cta-content .theme-btn{


  background: #22aa11;


  color: var(--color-white);


}











/* ===================


37. Choose css 


====================== */





.choose-area{


  position: relative;


}





.choose-item{


  display: flex;


  gap: 20px;


  margin: 30px 0;


}





.choose-item-icon{


  position: relative;


  width: 60px;


  height: 60px;


  line-height: 58px;


  background: #22aa11;


  text-align: center;


  border-radius: 50px 50px 50px 10px;


}





.choose-item-icon::before{


  content: "";


  position: absolute;


  inset: -5px;


  border: 2px solid #22aa11;


  border-radius: 50px 50px 50px 10px;


}





.choose-item-icon img{


  width: 38px;


  filter: brightness(0) invert(1);


}





.choose-item-info{


  flex: 1;


}





.choose-item-info h4{


  color: #000;;


  margin-bottom: 8px;


  font-size: 20px;


  font-weight: 600;


}





.choose-item-info p{


  color: var(--body-text-color);


}





.choose-img{


  position: relative;


  text-align: right;


}





.choose-img .img-1{


  width: 70%;


  border-radius: 40px;


}





.choose-img .img-2{


  position: absolute;


  left: 0;


  bottom: -125px;


  width: 80%;


  border-radius: 50px;


  border: 8px solid var(--color-white);


}





.choose-img .img-shape{


  position: absolute;


  left: 0;


  top: 50px;


  width: 150px;


  z-index: -1;


}





@media all and (max-width: 991px) {


  .choose-img .img-2{


    width: 70%;


    bottom: -50px;


  }


}














/*====================


38. Track shipment css 


======================*/





.track-shipment-wrap{


  background-repeat: no-repeat;


  background-size: cover;


  background-position: center;


  border-radius: 40px;


  padding: 30px;


}





.track-shipment-form{


  background: var(--color-white);


  padding: 30px;


  border-radius: 20px;


  box-shadow: var(--box-shadow);


  border: 2px solid #22aa11;


}





.track-shipment-form h4{


  margin-bottom: 20px;


  font-size: 20px;


}





.track-shipment-form .theme-btn{


  width: 100%;


}





.track-shipment-form .theme-btn::before{


  width: 400px;


  height: 400px;


}











/*====================


39. Testimonial css 


======================*/





.testimonial-area {


  position: relative;


  overflow: hidden;


  z-index: 1;


}





.ts-bg{


  background: #000;;


}





.testimonial-area::before{


  content: "";


  position: absolute;


  width: 100%;


  height: 100%;


  left: 0;


  top: 0;


  background-image: url(../img/shape/02.png);


  background-repeat: no-repeat;


  background-size: cover;


  background-position: center;


  opacity: .1;


  z-index: -1;


}





.testimonial-item {


  margin-bottom: 20px;


}





.testimonial-quote {


  position: relative;


  background: var(--color-white);


  padding: 30px;


  border-radius: 30px;


}





.testimonial-quote::before {


  content: "\f0dd";


  position: absolute;


  font-family: "Font Awesome 6 Pro";


  bottom: -52px;


  left: 40px;


  font-weight: bold;


  font-size: 70px;


  color: var(--color-white);


}





.testimonial-quote p{


  position: relative;


  color: #000;;


  font-size: 18px;


  font-style: italic;


  font-weight: 500;


  z-index: 1;


}





.testimonial-content {


  display: flex;


  justify-content: start;


  align-items: center;


  margin-top: 30px;


  margin-left: 20px;


}





.testimonial-author-img {


  margin-right: 20px;


  width: 70px;


  height: 70px;


  padding: 4px;


  border-radius: 50px;


  border: 2px dashed #22aa11;


}





.testimonial-author-img img {


  border-radius: 50%;


}





.testimonial-author-info h4 {


  font-size: 20px;


  color: var(--color-white);


}





.testimonial-author-info p {


  color: #22aa11;


  font-weight: 500;


}





.testimonial-quote-icon{


  position: absolute;


  right: 0;


  bottom: 0;


  width: 50px;


  height: 50px;


  line-height: 50px;


  background: #22aa11;


  color: var(--color-white);


  border-radius: 50px 50px 25px 50px;


  text-align: center;


  font-size: 35px;


}





.testimonial-shadow-icon{


  position: absolute;


  top: 50%;


  left: 50%;


  transform: translate(-50%, -50%);


  opacity: .15;


}





.testimonial-shadow-icon img{


  width: 200px !important;


}





.testimonial-rate {


  color: #FB9902;


  margin-top: 15px;


}





/* testimonial-slider */


.testimonial-slider .owl-dots {


  text-align: center;


  margin-top: 10px;


}





.testimonial-slider .owl-dots .owl-dot span {


  background: #22aa11;


  margin: 5px;


  border-radius: 10px;


  width: 15px;


  height: 7px;


  display: inline-block;


  transition: var(--transition);


}





.testimonial-slider .owl-dots .owl-dot.active span {


  background-color: #22aa11;


  width: 8px;


  height: 8px;


}











/* ========================


40. Gallery css 


=========================== */





.gallery-item {


  position: relative;


  width: 100%;


}





.gallery-img {


  height: 100%;


}





.gallery-img img {


  width: 100%;


  border-radius: 40px;


}





.gallery-content {


  position: absolute;


  width: 100%;


  height: 100%;


  top: 0;


  left: 0;


}





.gallery-content::before {


  content: "";


  position: absolute;


  left: 10px;


  top: 10px;


  right: 10px;


  bottom: 10px;


  background: #22aa11;


  border-radius: 40px;


  opacity: 0;


  visibility: hidden;


  transition: 0.3s;


}





.gallery-content:hover::before {


  opacity: 0.9;


  visibility: visible


}





.gallery-link {


  width: 70px;


  height: 70px;


  display: flex;


  align-items: center;


  justify-content: center;


  position: absolute;


  left: 50%;


  top: 50%;


  transform: translate(-50%, -50%) scale(0);


  transition: 0.5s;


  border-radius: 50px;


  opacity: 0;


  visibility: hidden;


  font-size: 50px;


  color: var(--color-white);


}





.gallery-link:hover {


  color: var(--color-white);


}





.gallery-content:hover .gallery-link {


  opacity: 1;


  visibility: visible;


  transform: translate(-50%, -50%) scale(1);


}











/*====================


41. Blog css 


======================*/





.blog-area{


  position: relative;


}





.blog-item{


  padding: 20px;


  background: var(--color-white);


  border-radius: 20px;


  box-shadow: var(--box-shadow);


  transition: var(--transition);


}





.blog-item-img{


  border-radius: 20px;


  overflow: hidden;


  position: relative;


}





.blog-item-img img {


  border-radius: 12px;


}





.blog-item:hover .blog-item-img img{


  transform: scale(1.1);


} 





.blog-date{


  position: absolute;


  right: 10px;


  top: 10px;


  width: 60px;


  height: 60px;


  line-height: 15px;


  background: #22aa11;


  color: var(--color-white);


  text-align: center;


  border-radius: 50px;


  box-shadow: var(--box-shadow);


  border: 4px solid var(--color-white);


}





.blog-date strong{


  display: block;


  font-size: 25px;


  font-weight: 800;


  margin-top: 4px;


  line-height: 1;


}





.blog-date span{


  font-weight: 500;


}





.blog-item-info {


  padding: 15px 0 0 0;


}





.blog-item-meta ul {


  margin: 0;


  margin-bottom: 14px;


  padding: 0;


  padding-bottom: 14px;


  border-bottom: 1px solid var(--border-info-color);


}





.blog-item-meta ul li {


  display: inline-block;


  margin-right: 15px;


  font-weight: 500;


  position: relative;


  color: #000;;


}





.blog-item-meta ul li i {


  margin-right: 5px;


  color: #22aa11;


}





.blog-item-meta a{


  color: #000;;


}





.blog-item-meta a:hover {


  color: #22aa11;


}





.blog-title {


  font-size: 22px;


  margin-bottom: 15px;


  text-transform: capitalize;


}





.blog-item-info h4 a {


  color: #000;;


  font-weight: 600;


}





.blog-item-info h4 a:hover {


  color: #22aa11;


}





.blog-item-info p {


  margin-bottom: 16px;


}





.blog-item-info .theme-btn {


  margin-top: 10px;


}














/*========================


42. Blog single css


==========================*/





.blog-single{


  position: relative;


}





/* blog single img */


.blog-single .blog-thumb-img {


  margin-bottom: 20px;


}





.blog-thumb-img h1{font-size:32px; padding-top:20px; color:#22aa11;}





.details_tittle p:nth-of-type(1) {


    font-size: 32px;


    padding-top: 20px;


    color: #22aa11;


    font-weight:500;


}





.blog-thumb-img p{font-size:18px; color:#000000; line-height:2;}








.blog-single .blog-single-content img {


  border-radius: 0px;


}





/* blog single meta */


.blog-single .blog-meta {


  display: flex;


  justify-content: space-between;


  align-items: center;


  margin-bottom: 20px;


}





.blog-single .blog-meta-left ul {


  display: flex;


  align-items: center;


  gap: 20px;


}





.blog-single .blog-meta-left ul li{


  color: #000;;


  font-weight: 500;


}





.blog-single .blog-meta i {


  margin-right: 5px;


  color: #22aa11;


}





.blog-single .blog-meta a {


  color: #000;;


  font-weight: 500;


}





.blog-single .blog-meta a:hover {


  color: #22aa11;


}





/* blog single details */


.blog-single .blog-details-title {


  font-size: 34px;


  color: #22aa11;


  font-weight: 500;


}


/*.blog-single p{color:#000000;}*/








/* blog single blockqoute */


.blog-single .blockqoute {


  background: var(--theme-bg-light);


  border-left: 5px solid #22aa11;


  padding: 30px;


  font-size: 17px;


  font-style: italic;


  margin: 20px 0;


  border-radius: 0px;


  position: relative;


}





.blog-single .blockqoute .blockqoute-icon{


  position: absolute;


  right: 20px;


  bottom: 5px;


  color: #22aa11;


  font-size: 70px;


}





.blog-single .blockqoute-author {


  margin-top: 20px;


  padding-left: 60px;


  position: relative;


  color: #000;;


}





.blog-single .blockqoute-author::before {


  content: "";


  position: absolute;


  height: 2px;


  width: 40px;


  background: #22aa11;


  left: 0;


  top: 10px;


}





/* blog single details tag */


.blog-single .blog-details-tag {


  display: flex;


  align-items: center;


  gap: 20px;


}





.blog-single .blog-details-tag h5 {


  color: #000;;


}





.blog-single .blog-details-tag ul {


  display: flex;


  align-items: center;


  gap: 15px;


}





.blog-single .blog-details-tag ul a {


  background: var(--theme-bg-light);


  color: #000;;


  padding: 5px 18px;


  border-radius: 50px;


  transition: var(--transition);


}





.blog-single .blog-details-tag ul a:hover {


  background: #22aa11;


  color: var(--color-white);


}





/* blog single author */


.blog-single .blog-author {


  display: flex;


  justify-content: start;


  align-items: center;


  background: var(--theme-bg-light);


  margin: 50px 0;


  padding: 20px;


  border-radius: 15px;


}





.blog-single .blog-author-img {


  width: 320px;


}





.blog-single .blog-author-img img {


  border-radius: 15px;


}





.blog-single .author-name {


  font-size: 22px;


  color: #22aa11;


  margin: 8px 0;


}





.blog-single .author-info {


  padding: 0 20px;


}





.blog-single .author-social {


  margin-top: 10px;


}





.blog-single .author-social a {


  width: 35px;


  height: 35px;


  line-height: 32px;


  text-align: center;


  border: 2px solid #22aa11;


  border-radius: 50px;


  margin-right: 5px;


  color: #22aa11;


  transition: var(--transition);


}





.blog-single .author-social a:hover {


  color: var(--color-white);


  background: #22aa11;


}





/* blog single comment */


.blog-single .blog-comment h3 {


  color: #000;;


  font-weight: 700;


}





.blog-single .blog-comment-wrap {


  margin: 30px 0;


}





.blog-single .blog-comment-item {


  display: flex;


  justify-content: start;


  align-items: flex-start;


  border: 1px solid var(--border-info-color);


  border-radius: 20px;


  padding: 15px;


  margin-top: 50px;


}





.blog-single .blog-comment-item.reply {


  margin-left: 50px;


}





.blog-single .blog-comment-item img {


  width: 80px;


  border-radius: 50%;


}





.blog-single .blog-comment-content {


  padding: 0 0 0 20px;


}





.blog-single .blog-comment-content span {


  font-size: 14px;


  color: #22aa11;


  font-weight: 500;


}





.blog-single .blog-comment-content a {


  font-weight: 500;


  margin-top: 5px;


  color: #22aa11;


}





.blog-single .blog-comment-content a:hover {


  color:  var(--theme-color2);


}





.blog-single .blog-comment-content h5 {


  color: #000;;


  font-weight: 700;


}





/* blog single comment form */


.blog-single .blog-comment-form {


  padding: 30px;


  margin-top: 50px;


  border-radius: 15px;


  background: var(--theme-bg-light);


}





.blog-single .blog-comment-form h3 {


  margin-bottom: 20px;


}








@media all and (max-width: 767px) {


  .blog-single .blog-meta {


    flex-direction: column;


    font-size: 15px;


  }





  .blog-single .blog-meta-left ul {


    gap: 10px;


  }





  .blog-single .blog-details-tag {


    flex-direction: column;


    align-items: flex-start;


  }





  .blog-single .blog-author {


    flex-direction: column;


    text-align: center;


    padding: 25px;


  }





  .blog-single .author-info{


    margin-top: 25px;


  }





  .blog-single .blog-comment-item {


    flex-direction: column;


    text-align: center;


    padding: 30px 0px;


    background: var(--color-white);


    box-shadow: var(--box-shadow);


    margin-bottom: 30px;


    border-radius: 15px;


  }





  .blog-single .blog-comment-item img{


    margin: 0 auto 20px auto;


  }





  .blog-single .blog-comment-item.reply {


    margin-left: 0px;


  }


}











/*==========================


43. Blog sidebar widget css


============================*/





.blog-sidebar .widget {


  background: var(--theme-bg-light);


  padding: 30px;


  margin-bottom: 30px;


  border-radius: 15px;


}





.blog-sidebar .widget .widget-title {


  padding-bottom: 10px;


  margin-bottom: 30px;


  position: relative;


  font-size: 22px;


  color: #000;;


  font-weight: 700;


}





.blog-sidebar .widget .widget-title::before {


  position: absolute;


  content: '';


  width: 15px;


  border-bottom: 3px solid #22aa11;


  bottom: 0;


  left: 0;


}





.blog-sidebar .widget .widget-title::after {


  position: absolute;


  content: '';


  width: 30px;


  border-bottom: 3px solid #22aa11;


  bottom: 0;


  left: 22px;


}





/* search widget */


.blog-sidebar .widget .search-form .form-control {


  padding-right: 50px;


}





.blog-sidebar .widget .search-form .form-group{


  position: relative;


}





.blog-sidebar .widget .search-form button {


  position: absolute;


  right: 0;


  top: 0;


  font-size: 18px;


  padding: 12px 18px 6px 18px;


  background: transparent;


  border: none;


  color: #22aa11;


}





/* category widget */


.blog-sidebar .widget .category-list a {


  display: block;


  padding: 10px 0;


  font-weight: 500;


  color: #000;;


  border-bottom: 1px solid var(--border-info-color);


  transition: var(--transition);


}





.blog-sidebar .widget .category-list a:last-child {


  margin-bottom: 0px;


  border-bottom: none;


}





.blog-sidebar .widget .category-list a:hover {


  padding-left: 10px;


  color: #22aa11;


}





.blog-sidebar .widget .category-list a i {


  margin-right: 5px;


  color: #22aa11;


}





.blog-sidebar .widget .category-list a span {


  float: right;


}





/* recent post widget*/


.blog-sidebar .widget .recent-post-item {


  display: flex;


  justify-content: start;


  align-items: center;


  gap: 15px;


  margin-bottom: 20px;


}





.blog-sidebar .widget .recent-post-img img {


  width: 75px;


  border-radius: 15px;


}





.blog-sidebar .widget .recent-post-info {


  flex: 1;


}





.blog-sidebar .widget .recent-post-info h6 {


  font-size: 18px;


  font-weight: 600;


  margin-bottom: 4px;


}





.blog-sidebar .widget .recent-post-info span {


  font-size: 14px;


  color: #22aa11;


  font-weight: 500;


}





.blog-sidebar .widget .recent-post-info span i {


  margin-right: 5px;


}





.blog-sidebar .widget .recent-post-info h6 a:hover {


  color: #22aa11;


}





/* social widget */


.blog-sidebar .widget .social-link a {


  width: 35px;


  height: 35px;


  line-height: 32px;


  border: 2px solid #22aa11;


  color: #22aa11;


  text-align: center;


  margin-right: 5px;


  border-radius: 50px;


  transition: var(--transition);


}





.blog-sidebar .widget .social-link a:hover {


  background: #22aa11;


  color: var(--color-white);


}





/* tag widget */


.blog-sidebar .widget .tag-list a {


  background: var(--color-white);


  color: #000;;


  padding: 5px 18px;


  margin-bottom: 10px;


  margin-right: 10px;


  border-radius: 50px;


  display: inline-block;


  transition: var(--transition);


}





.blog-sidebar .widget .tag-list a:hover {


  background-color: #22aa11;


  color: var(--color-white);


}














/*====================


44. Pagination css 


======================*/





.pagination {


  display: flex;


  justify-content: center;


  align-items: center;


  margin-top: 50px;


}





.pagination .page-link {


  border: none;


  background:  var(--theme-bg-light);


  color: #000;;


  font-weight: 500;


  margin: 0 10px;


  border-radius: 12px !important;


  width: 40px;


  height: 40px;


  line-height: 28px;


  text-align: center;


  transition: var(--transition);


  z-index: 1;


}





.pagination .page-link:hover,


.pagination .page-item.active .page-link {


  background: #22aa11;


  color: var(--color-white);


}











/*====================


45. Faq css 


======================*/





.faq-area .accordion-item {


  border: none;


  background: var(--color-white);


  border-radius: 12px;


  margin-bottom: 30px;


  box-shadow: var(--box-shadow);


}





.faq-area .accordion-button {


  border-radius: 0px;


  background: transparent;


  font-weight: 700;


  font-size: 20px;


  color: #000;;


  box-shadow: none;


}





.faq-area .accordion-button::after{


  content: "\f107";


  background: none;


  color: #22aa11;


  font-size: 24px;


  font-weight: 500;


  font-family: 'Font Awesome 6 pro';


  width: unset;


  height: unset;


  margin-right: 3px;


}





.faq-area .accordion-button:not(.collapsed) {


  color: #22aa11;


  background: transparent;


  border-bottom: 1px dashed #22aa11;


  box-shadow: none;


}





.faq-area .accordion-button:not(.collapsed)::after{


  content: "\f107";


  transform: rotate(-180deg);


}





.faq-area .accordion-button span {


  width: 45px;


  height: 45px;


  margin-right: 15px;


}





.faq-area .accordion-button span i {


  width: 45px;


  height: 45px;


  line-height: 45px;


  border-radius: 50px;


  background: #22aa11;


  text-align: center;


  color: var(--color-white);


}





.faq-area .accordion-body{


  color: #000;;


  font-weight: 500;


}





@media all and (max-width: 991px) {


  .faq-area .faq-content {


    margin-bottom: 50px;


  }





  .faq-area .accordion-button {


    font-size: 16px;


  }


}














/*===================


46. Contact us css 


=====================*/





.contact-content {


  margin-bottom: 50px;


}





.contact-info {


  display: flex;


  flex-direction: column;


  align-items: center;


  text-align: center;


  gap: 15px;


  padding: 30px 20px;


  position: relative;


  margin-bottom: 25px;


  border-radius: 15px 50px 50px 50px;


  background:var(--theme-bg-light);


  transition: var(--transition);


}





.contact-info:hover{


  transform: translateY(-8px)


}





.contact-info .icon{


  font-size: 35px;


  color: var(--color-white);


  width: 70px;


  height: 70px;


  line-height: 70px;


  text-align: center;


  border-radius: 50px;


  background: #22aa11;


}





.contact-info .content h5 {


  font-size: 20px;


  font-weight: 700;


  margin-bottom: 8px;


  color: #000;;


}





.contact-info .content p{


  color: #000;;


  font-weight: 500;


  font-size: 16px;


}





.contact-img img{


  width: 100%;


  border-radius: 15px;


}





.contact-form{


  background: var(--theme-bg-light);


  padding: 30px;


  border-radius: 15px;


}





.contact-form-header {


  margin-bottom: 30px;


}





.contact-form-header h2 {


  font-size: 30px;


  font-weight: 700;


  margin-bottom: 10px;


  color: #000;;


}





.contact-form-header p{


  color: #000;


}





.contact-form .form-message.success,


.contact-form .form-message.error{


  margin-bottom: 20px;


  border-radius: 10px;


  padding: 10px 18px;


}





.contact-form .form-message.success{


  color: #41BE7D;


  background:rgba(65, 190, 125, .1);


}





.contact-form .form-message.error{


  color: #FF7F7F;


  background:rgba(255, 127, 127, .1);


}





.contact-form .form-message.error{


  color: var(--color-red);


}





.contact-map {


  margin-bottom: -9px;


}





.contact-map iframe {


  width: 100%;


  height: 450px;


}











/*====================


47. Auth css 


======================*/





.auth-form {


  padding: 40px;


  background: var(--theme-bg-light);


  border-radius: 15px;


}





/* auth-header */


.auth-form .auth-header {


  text-align: center;


  margin-bottom: 30px;


}





.auth-form .auth-header img {


  width: 200px;


  margin-bottom: 10px;


}





.auth-form .auth-header h3 {


  color: #22aa11;


  margin-bottom: 5px;


  font-weight: 800;


}





.auth-form .auth-header p {


  color: #000;;


  font-size: 20px;


}





/* auth-group */


.auth-group{


  display: flex;


  align-items: center;


  justify-content: space-between;


  margin-bottom: 25px;


}





.auth-group .form-check{


  margin-bottom: 0;


}





.auth-group .form-check-label{


  color: #000;;


  font-weight: 500;


}





.auth-group .auth-group-link{


  color: #22aa11;


  font-weight: 500;


}





.auth-group .auth-group-link:hover{


  color: var(--color-red);


}





/* password-view */


.auth-form .password-view{


  cursor: pointer;


}





.auth-form .password-view i{


  left: unset;


  right: 20px;


  color: var(--body-text-color);


}





.auth-form .password-view.show i::before{


  content: "\f06e";


}





/* auth-btn */


.auth-form .theme-btn {


  width: 100%;


}





.auth-form .theme-btn::before{


  width: 420px;


  height: 420px;


  transition: var(--transition2);


}





/* auth-bottom */


.auth-form .auth-bottom {


  margin-top: 25px;


}





.auth-form .auth-bottom p {


  color: #000;;


  text-align: center;


}





.auth-form .auth-bottom a {


  color: #22aa11;


  font-weight: 500;


}





.auth-form .auth-bottom a:hover {


  color:  var(--color-red);


}





/* auth-social */


.auth-form .auth-social {


  border-top: 1px solid var(--border-info-color);


  margin-top: 15px;


}





.auth-form .auth-social p {


  color: #000;;


  margin: 10px 0;


}





.auth-form .auth-social-list {


  text-align: center;


  margin-bottom: 10px;


}





.auth-form .auth-social-list a {


  width: 40px;


  height: 40px;


  line-height: 40px;


  background: #22aa11;


  border-radius: 50px;


  margin: 5px;


}





.auth-form .auth-social-list a i {


  color: var(--color-white);


}





.auth-form .auth-social-list a:hover {


  background:  var(--color-red);


}





@media only screen and (max-width: 991px) {


  .auth-form {


    padding: 40px 20px;


  }


}











/*====================


48. Coming soon css 


======================*/





.coming-soon {


  position: relative;


  background-repeat: no-repeat;


  background-size: cover !important;


  background-position: center !important;


  min-height: 100vh;


  width: 100%;


  z-index: 1;


}





.coming-soon:before {


  position: absolute;


  content: '';


  background: rgba(0, 0, 0, .7);


  width: 100%;


  height: 100%;


  top: 0;


  left: 0;


  z-index: -1;


}





.coming-wrap{


  display: flex;


  justify-content: center;


  align-items: center;


  height: 75vh;


}





.coming-content{


  text-align: center;


}





.coming-info h1{


  color: var(--color-white);


  font-weight: 700;


  font-size: 50px;


}





.coming-info p{


  font-size: 18px;


  color: var(--color-white);


  margin-top: 10px;


}





.coming-countdown-wrap{


  margin-top: 30px;


  margin-bottom: 30px;


}





.coming-countdown .time-wrap{


  display: flex;


  align-items: center;


  justify-content: center;


  flex-wrap: wrap;


  gap: 18px;


}





.coming-countdown .time{


  background: var(--color-white);


  width: 125px;


  border-radius: 15px;


  padding: 14px 10px;


}





.coming-countdown .time span{


  display: block;


}





.coming-countdown .time span:first-child{


  color: #22aa11;


  font-weight: 700;


  font-size: 38px;


  line-height: 1;


}





.coming-countdown .time .unit{


  color: #000;;


  font-weight: 500;


}





.coming-countdown .divider{


  display: none;


}





.coming-newsletter-form{


  margin-top: 50px;


  margin-bottom: 25px;


}





.coming-newsletter-form .form-group{


  position: relative;


}





.coming-newsletter-form .form-control{


  padding: 17px 150px 17px 20px;


  border-radius: 50px;


  border-color: transparent;


  color: #000;;


}





.coming-newsletter-form .form-control::placeholder{


  color: #000;;


}





.coming-newsletter-form .form-control:focus{


  border-color: #22aa11;


}





.coming-newsletter-form .theme-btn{


  position: absolute;


  right: 5px;


  top: 6px;


  padding: 9px 15px;


}





.coming-social{


  margin-top: 40px;


  text-align: center;


}





.coming-social a{


  display: inline-block;


  background: #22aa11;


  color: var(--color-white);


  margin: 5px;


  width: 42px;


  height: 42px;


  line-height: 42px;


  text-align: center;


  border-radius: 50px;


  transition: .5s;


  box-shadow: var(--box-shadow2);


}





.coming-social a:hover{


  background: var(--theme-color2);


}





@media all and (max-width: 767px) {


  .coming-info h1{


    font-size: 40px;


  }


}











/*====================


49. Error css 


======================*/





.error-wrap {


  text-align: center;


}





.error-wrap h1 {


  font-size: 250px;


  letter-spacing: 5px;


  font-weight: bold;


  color: #22aa11;


}





.error-wrap h1 span {


  color: #000;;


}





.error-wrap h2 {


  margin-top: 30px;


  margin-bottom: 10px;


}





.error-wrap img {


  width: 100%;


}





.error-wrap .theme-btn {


  margin-top: 30px;


}








@media all and (max-width: 767px) {


  .error-wrap h1 {


    font-size: 160px;


  }


}











/*====================


50. Terms/privacy css 


====================== */





.terms-content:not(:last-child) {


  margin-bottom: 54px;


}





.terms-content:first-child {


  margin-top: -3px;


}





.terms-content .terms-list {


  margin-top: 37px;


}





.terms-content h3 {


  margin-bottom: 23px;


  position: relative;


  font-weight: 700;


}





.terms-content p:not(:last-child) {


  margin-bottom: 26px;


}





.terms-list li:not(:last-child) {


  margin-bottom: 16px;


}











/*====================


51. Scroll top css


======================*/





#scroll-top {


  position: fixed;


  bottom: -20px;


  right: 30px;


  z-index: 99;


  font-size: 20px;


  border: none;


  outline: none;


  border-radius: 50px;


  color: var(--color-white);


  background-color: #22aa11;


  cursor: pointer;


  width: 50px;


  height: 50px;


  line-height: 50px;


  text-align: center;


  box-shadow: var(--box-shadow2);


  transition: var(--transition);


  opacity: 0;


  visibility: hidden;


  transform: rotate(-40deg);


  z-index: 1;


}





#scroll-top:hover{


  transform: rotate(0);


}





#scroll-top.active{


  opacity: 1;


  visibility: visible;


  bottom: 20px;


}








@media all and (min-width: 768px) and (max-width: 1199px) {


  #scroll-top.active {


    bottom: 100px;


  }


}











/*====================


52. Footer css 


======================*/





.footer-area {


  background:#000000;


  position: relative;


  z-index: 1;


}





.footer-shape img{


  position: absolute;


  left: 0;


  top: 0;


  width: 100%;


  height: 100%;


  opacity: .1;


  z-index: -1;


}





.footer-widget {


  position: relative;


}





.footer-widget-box.about-us{


  margin-right: 50px;


}





.footer-widget-box p {


  color: var(--color-white);


  padding-right: 18px;


  margin-bottom: 20px;


}





.footer-logo img {


  width: 200px;


  margin-bottom: 15px;


}





.footer-widget-title {


  color: var(--color-white);


  position: relative;


  padding-bottom: 10px;


  margin-bottom: 20px;


  font-size: 21px;


  z-index: 1;


}





.footer-widget-title::before{


  content: "";


  position: absolute;


  left: 0;


  bottom: 0;


  width: 20px;


  height: 3px;


  background: #22aa11;


  border-radius: 50px;


}





.footer-list {


  display: flex;


  flex-direction: column;


  gap: .70rem;


}





.footer-list li a {


  color: var(--color-white);


  transition: var(--transition);


  position: relative;


  margin-left: -20px;


}





.footer-list li a i {


  margin-right: 5px;


  color: #22aa11;


  opacity: 0;


  transition: var(--transition);


}





.footer-list li a:hover {


  margin-left: 0px;


  color: #22aa11;


}





.footer-list li a:hover i{


  opacity: 1;


}





.footer-social {


  display: flex;


  gap: 15px;


  justify-content: end;


}





.footer-social li a i {


  height: 38px;


  width: 38px;


  line-height: 38px;


  text-align: center;


  border-radius: 50px;


  background: var(--color-white);


  color: #22aa11;


  transition: var(--transition);


}





.footer-social li a i:hover {


  background: #22aa11;


  color: var(--color-white);


}





.footer-contact li {


  position: relative;


  display: flex;


  justify-content: start;


  gap: 10px;


  color: var(--footer-text-color);


  font-size: 16px;


  margin-bottom: 12px;


}





.footer-contact .icon{


  width: 35px;


  height: 35px;


  line-height: 35px;


  background: #22aa11;


  border-radius: 50px;


  text-align: center;


}





.footer-contact .content{


  flex: 1;


}





.footer-contact .content h6{


  color: var(--color-white);


  margin-bottom: 5px;


}





.footer-contact .content a{


  color: var(--color-white);


}





.footer-newsletter h6{


  color: var(--color-white);


  margin-bottom: 20px;


}





.footer-newsletter .newsletter-form .form-group{


  position: relative;


}





.footer-newsletter .newsletter-form .form-icon > i{


  top: 21px;


  left: 0;


  color: #22aa11;


}





.footer-newsletter .newsletter-form .form-control {


  padding: 16px 140px 16px 32px;


  border-radius: 0px;


  color: var(--color-white);


  box-shadow: none;


  background-color: transparent;


  border: none;


  border-bottom: 1px solid var(--color-white);


  outline: none;


}





.footer-newsletter .newsletter-form .form-control:focus{


  border-bottom-color: #22aa11;


}





.footer-newsletter .newsletter-form .form-control::placeholder{


  color: var(--color-white);


}





.footer-newsletter .newsletter-form .theme-btn {


  position: absolute;


  right: 0px;


  top: 5px;


  border-radius: 50px;


  padding: 5px 15px;


}





.footer-newsletter .newsletter-form .theme-btn:hover {


  color: #22aa11;


}





.footer-newsletter .newsletter-form .theme-btn::before{


  background: var(--color-white);


}





.footer-newsletter .newsletter-form .theme-btn span{


  margin-right: 0;


  margin-left: 5px;


}





.copyright {


  padding: 20px 0;


  border-top: 1px solid var(--border-white-color);


}





.copyright .footer-menu {


  margin: 0;


  padding: 0;


  text-align: right;


}





.copyright .footer-menu li {


  display: inline-block;


  margin-left: 25px;


  font-size: 16px;


}





.copyright .footer-menu li a {


  color: var(--footer-text-color);


  transition: var(--transition);


}





.copyright .footer-menu li a:hover {


  color: #22aa11;


}





.copyright .copyright-text {


  color: var(--footer-text-color);


  margin-bottom: 0px;


  font-size: 16px;


}





.copyright .copyright-text a {


  color: #22aa11;


  font-weight: 500;


}








@media all and (max-width: 1199px) {


  .footer-widget-box {


    margin-bottom: 50px;


  }





  .footer-list li a{


    font-size: 14px;


  }


}





@media all and (max-width: 991px) {


  .footer-widget-wrap {


    padding-bottom: 0px;


  }





  .footer-list li a{


    font-size: 16px;


  }





  .copyright .footer-menu {


    float: left;


    margin-top: 20px;


    text-align: left;


  }





  .copyright .footer-menu li {


    margin-left: 0;


    margin-right: 15px;


  }


}





@media all and (max-width: 767px) {


  .footer-widget-wrap {


    padding-bottom: 0px;


  }





  .footer-social {


    justify-content: flex-start;


    margin-top: 20px;


  }


}








/* footer light */


.footer-area.light{


  background: var(--theme-bg-light);


}





.footer-area.light .footer-widget-title{


  color: #000;;


  font-weight: 800;


}





.footer-area.light .footer-widget-box p{


  color: var(--body-text-color);


}





.footer-area.light .footer-newsletter h6{


  color: #000;;


  font-weight: 700;


}





.footer-area.light .newsletter-form .form-control{


  color: #000;;


  border-bottom-color: var(--body-text-color);


}





.footer-area.light .newsletter-form .form-control::placeholder{


  color: var(--body-text-color);


}





.footer-area.light .newsletter-form .form-control:focus{


  border-bottom-color: #22aa11;


}





.footer-area.light .footer-list li a{


  color: var(--body-text-color);


}





.footer-area.light .footer-list li a:hover{


  color: #22aa11;


}





.footer-area.light .footer-contact .content h6{


  color: #000;;


  font-weight: 700;


}





.footer-area.light .footer-contact .content a{


  color: var(--body-text-color);


}





.footer-area.light .footer-social li a i{


  background: #000;;


  color: var(--color-white);


}





.footer-area.light .footer-social li a i:hover{


  background: #22aa11;


}





.footer-area.light .copyright{


  border-top-color: var(--border-info-color);


}





.footer-area.light .copyright .copyright-text{


  color: var(--body-text-color);


}








/*====================


53. Home-2 css 


======================*/





.home-2 .header{


  position: relative;


  background: #000;;


}





.home-2 .header::before{


  content: "";


  position: absolute;


  right: 30px;


  top: 0;


  bottom: 0;


  width: 50%;


  background: #22aa11;


  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);


}





.home-2 .header-top{


  background: transparent;


}





.home-2 .header-top::before{


  display: none;


}





.home-2 .navbar::before{


  content: "";


  position: absolute;


  left: 0;


  top: 0;


  width: 90%;


  height: 100%;


  background: var(--color-white);


}





.home-2 .hero-section{


  margin-top: -3rem;


}





.home-2 .hero-single{


  padding-top: 160px;


  padding-bottom: 120px;


}





.home-2 .hero-single .hero-content .hero-title span {


  color: transparent;


  -webkit-text-stroke: 2px var(--color-white);


}





@media all and (max-width: 1199px) {


  .home-2 .navbar::before{


    width: 100%;


  }





  .home-2 .hero-slider .owl-nav .owl-prev,


  .home-2 .hero-slider .owl-nav .owl-next {


    bottom: 15px;


  }


}





@media all and (max-width: 767px) {


  .home-2 .header-top-list a i{


    color: var(--color-white);


  }


  


  h2.title_filter{


    font-size: 24px;


  }


}





@media all and (max-width: 567px) {


  


  h2.title_filter{


    font-size: 20px;


  }


}





@media(max-width: 400px) {


  h2.title_filter {


    font-size: 19px !important;


  }


}





@media(max-width: 376px) {


  h2.title_filter {


    font-size: 16px !important;


  }


}














/*====================


54. Home-3 css 


======================*/





.home-3 .hero-section{


  margin-top: -6rem;


}





.home-3 .hero-single{


  padding-top: 100px;


}





.home-3 .hero-single::before{


  background-image: url(../img/shape/05.png);


  background-repeat: no-repeat;


  background-position: center;


  background-size: cover;


  opacity: .5;


}





.home-3 .hero-single .hero-content .hero-sub-title{


  color:#000;


}





.home-3 .hero-single .hero-content .hero-sub-title::before{


  display: none;


}





.home-3 .hero-single .hero-content .hero-title{


  color:#000;


}





.home-3 .hero-single .hero-content p{


  color:#000;


}





.home-3 .hero-single .hero-img{


  text-align: right;


  position: relative;


}





.home-3 .hero-single .hero-img .play-btn{


  width: 95px;


  height: 95px;


  top: 50%;


  transform: translateY(-50%);


  border: 10px solid var(--color-white);


  margin-left: -50px;


}





.home-3 .hero-single .hero-img img{


  width: 80%;


  border-radius: 40px;


}





@media all and (max-width: 991px) {


  .home-3 .hero-single .hero-img{


    margin-top: 40px;


  }


}








.cwc{color:#000000;}


.cwc table{width:100%;}


.cwc td{border:1px solid #000000; padding:5px;}


.cwc tr{border:1px solid #000000; padding:5px;}








.city-grid {


  padding: 40px 15px;


  background-color: #f9f9f9;


}





.city-grid h2 {


  text-align: center;


  margin-bottom: 30px;


  font-size: 28px;


}





.city-box {


  background-color: white;


  padding: 10px 15px;


  margin: 8px 0;


  border: 1px solid #ddd;


  border-radius: 6px;


  text-align: center;


  font-weight: 500;


  color:#000000;


  box-shadow: 0 2px 5px rgba(0,0,0,0.05);


  transition: color 0.1s linear;


}





.city-box:hover{


  color: #22aa11;


}





    @media (max-width: 576px) {


      .city-box {


        font-size: 14px;


        padding: 8px 10px;


      }


    }


	


	


.newspaperlist{}


.newspaperlist img{padding:20px; border:1px solid #000000;}





.newspapereditions{padding:5px; background:#ececec; color:#000000; border-radius:5px; margin-bottom:10px; text-align:center;}





.newspapercategories{padding-top:0px; padding-bottom:20px;}


.newspapercategories img{padding-bottom:20px;}





.newspapereditionsmar{padding-top:40px; padding-bottom:20px;}





.city-details{}





.city-details h2{font-size:24px; color:#000000; padding-bottom:20px;}





.city-details img{padding:20px; border:1px solid #333333; margin-bottom:20px;} 





/* ================= end ================== */





.dropdown-list {


  max-height: 200px;


  overflow-y: auto;


  border-radius: 0.375rem;


}





#preloader {


  background-color: #22aa11;


  text-align: center;


  padding-top: 20%;


  font-size: 20px;


}





.partner-area .partner-wrapper .owl-item img{


  width: 100%;


  height: 100px;


  object-fit: contain;


}





.blog-details ul,.blog-details p,.about-area p{


  /*color: #000;*/


  /*font-family: "Poppins",sans-serif;*/


  font-weight: 400;


  padding: 5px 0;


}





.blog-details h2{


  font-weight: 500 !important;


  font-size: 24px;


  padding: 30px 0 10px 0;


  text-transform: capitalize;


}





.blog-details h3{


  font-weight: 600 !important;


  font-size: 24px;


  padding: 30px 0 10px 0;


}





.dropdown-item{


  cursor: pointer;


}





/* thank u */








.thank-you-box {


  text-align: center;


  background: #fff;


  padding: 30px;


  border-radius: 16px;


  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);


  max-width: 400px;


  width: 90%;


  animation: fadeIn 1s ease-in-out;


}





/* Animated Checkmark */


.checkmark {


  width: 140px;


  display: inline-block;


  animation: scale 0.3s ease-in-out 0.6s both;


}





.checkmark__check {


  stroke: #22aa11;


  stroke-width: 6;


  fill: none;


  stroke-dasharray: 60;


  stroke-dashoffset: 60;


  animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.2s;


}





@keyframes stroke {


  to { stroke-dashoffset: 0; }


}





@keyframes scale {


  0%, 100% { transform: none; }


  50% { transform: scale(1.1); }


}





@keyframes fadeIn {


  from { opacity: 0; transform: translateY(20px); }


  to { opacity: 1; transform: translateY(0); }


}





/* Text and Button */


h1 {


  font-size: 2rem;


  color: #22aa11;


  margin: 0 0 10px;


}





p {


  font-size: 1.1rem;


  margin-top: 10px;


  font-weight: 400;


  /*color: #000;*/


}





.client-name {


  color: #22aa11;


  font-weight: bold;


}





.back-home {


  margin-top: 20px;


  display: inline-block;


  padding: 12px 24px;


  background-color: #22aa11;


  color: white;


  text-decoration: none;


  border-radius: 6px;


  font-weight: bold;


  transition: background 0.3s ease;


}





.back-home:hover {


  background-color: rgb(25, 105, 16);


}





/* Responsive */


@media (max-width: 768px) {


  .thank-you-box {


    max-width: 280px;


    padding: 30px 20px;


  }





  h1 {


    font-size: 1.5rem;


  }





  p {


    font-size: 1rem;


  }





  .checkmark {


    width: 100px;


    height: 100px;


  }





  .back-home {


    padding: 10px 20px;


    font-size: 0.9rem;


  }


}








#preloader{


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  background: rgba(36, 34, 34, 0.95);


  z-index: 9999;


  display: flex;


  justify-content: center;


  align-items: center;


  padding: 20px;


  overflow:hidden;


}





#close-preloader{


    position: absolute;


    top: 10px;


    right: 10px;


    background: transparent;


    border: none;


    font-size: 3rem;


    font-weight: bold;


    color: #000000;


    cursor: pointer;


    line-height: 1;


}





/*Checkbox serach filter*/





#instantCallBack input[type=checkbox]{


  width: 22px;


  height: 22px;


  accent-color: red;


  border:1px solid red;


  outline: 1px solid red;


}





#instantCallBack input[type=checkbox]:checked {


  outline: 1px solid red;


  outline-offset: 2px;


  accent-color: red;


}





/*captch Field*/





.captcha_field{


    outline: none;


    border: 1px solid #22aa11;


    border-radius: 5px;


}





/*content*/





.content h2{


    margin: 20px 0 10px 0 !important;


}





/*search button*/


.search_filter_btn{


    background-color: #22aa11;


}





.search_filter_btn:hover{


    background-color: #22aa11;


}





/*ITEM*/





.city-item:hover{


    transform: scale(1.1);


}


.city-box{


    transition: all 0.2s linear;


}





.city-box:hover{


    background-color: #22aa11;


    color: #ffffff;


}





.city-box:hover a{


    color: #ffffff;


}











/*filter Dark*/





.bg-light-darker {


    background-color: #f0f0f0 !important; /* Slightly darker than #f8f9fa */


    border-top: 3px solid #22aa11;


    border-bottom: 3px solid #22aa11;


    


  }


  


  #filterForm input{


      border: 1px solid #000;


  }


  


  /*Whatsapp fixed icon*/


  


  #scroll-top-whatsapp{


    position: fixed;


    bottom: 20px;


    right: 30px;


    z-index: 99;


    font-size: 28px;


    border: none;


    outline: none;


    border-radius: 50px;


    color: var(--color-white);


    background-color: #22aa11;


    cursor: pointer;


    width: 50px;


    height: 50px;


    line-height: 50px;


    text-align: center;


    box-shadow: var(--box-shadow2);


    transition: var(--transition);


    /* transform: rotate(-40deg); */


    z-index: 1;


  }


  


  


  


 /*Languages list extra in language newspaper page*/


  


  


   .language-list-extra {


      background: #f8f9fa;


      padding: 20px;


      border-radius: 10px;


      border: 1px solid #dee2e6;


    }





    .language-list-extra ul {


      list-style: none;


      padding-left: 0;


      margin: 0;


    }





    .language-list-extra li {


      border-bottom: 1px solid #dee2e6;


      padding: 10px 0;


    }





    .language-list-extra li:last-child {


      border-bottom: none;


    }





    .language-list-extra a {


      text-decoration: none;


      color: #212529;


      font-weight: 500;


      transition: 0.2s ease;


      display: block;


    }





    .language-list-extra a:hover {


      color: #22aa11;


      padding-left: 5px;


    }





/* ck editor Table */





table {


    width: 100%;


    border-collapse: collapse;


    font-family: Arial, sans-serif;


    margin-top: 20px;


  }





  th, td {


    border: 1px solid #333;


    padding: 10px;


    text-align: center;


  }





  thead {


    background-color: #f2f2f2;


    font-weight: bold;


  }





  tr:nth-child(even) {


    background-color: #fafafa;


  }





  tr:hover {


    background-color: #e0f7fa;


  }
  
  
  .cta {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 10px;
    line-height: 1.5;
}

.cta span {
    background: #FF0000;
    padding: 10px;
    border-radius: 5px;
    color: #FFFFFF;
}