/*=====================================================
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. Cta css 
36. Partner css 
37. Choose css 
38. Testimonial css 
39. Gallery css 
40. Blog css 
41. Blog single css
42. Blog sidebar widget css
43. Pagination css 
44. Faq css 
45. Contact us css 
46. Auth css 
47. Coming soon css 
48. Error css 
49. Terms/privacy css 
50. Scroll top css
51. Footer css 
52. Home-2 css 
53. Home-3 css 
=======================================================*/


/*====================
1. Google fonts
======================*/

@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: #77af12;
  --theme-color2: #024e2f;
  --theme-bg-light: #F6F6F6;
  --theme-color-light: rgba(246, 88, 1, .15);
  --body-text-color: #757F95;
  --color-white: #ffffff;
  --color-dark: #000000;
  --color-green: #15D4C9;
  --color-blue: #0049D0;
  --color-skyblue: #00BFFF;
  --color-yellow: #FBA707;
  --color-gray: #ECECEC;
  --color-red: #03542f;
  --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: #024e2f;
  --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;
}

body {
  font-family: var(--body-font);
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  color: var(--body-text-color);
  line-height: 1.8;
}

a {
  color: var(--color-dark);
  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: var(--color-dark);
  margin: 0px;
  font-weight: 600;
  font-family: var(--heading-font);
  line-height: 1.2;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 35px;
}

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: #999;
  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;
}




/*===================
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: 120px;
}

.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: 70px 0;
}

.py-90 {
  padding: 90px 0;
}

.py-100 {
  padding: 100px 0;
}

.py-110 {
  padding: 110px 0;
}

.py-120 {
  padding: 120px 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: var(--theme-color);
  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: var(--color-dark);
}

.form-group .form-control,
.form-group .form-select {
  padding: 14px 20px 14px 20px;
  border-radius: 15px;
  background-color: var(--color-white);
  color: var(--color-dark);
  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: var(--theme-color);
  box-shadow: 0 0 0 .25rem rgba(246, 88, 1, .25);
}

.form-group .form-icon {
  position: relative;
}

.form-group .form-icon i {
  position: absolute;
  top: 19px;
  left: 20px;
  color: var(--theme-color);
  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: var(--color-dark);
}

.form-check .form-check-input:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color)
}

.form-check .form-check-input:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 .25rem rgba(246, 88, 1, .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: var(--color-dark);
  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: var(--theme-color);
  box-shadow: 0 0 0 .25rem rgba(246, 88, 1, .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: var(--theme-color);
}

.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: var(--theme-color);
  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: var(--theme-color);
  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: var(--theme-color);
  border-radius: 50px;
  padding: 2px 15px 2px 15px;
  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: var(--theme-color);
  text-align: center;
  border-radius: 50px;
  margin-right: 5px;
}

.site-title {
  font-weight: 700;
  text-transform: capitalize;
  font-size: 30px;
  color: var(--color-dark);
  margin-bottom: 0;
}

.site-title span {
  color: var(--theme-color);
}

.site-heading p {
  margin-top: 15px;
}

.heading-divider {
  display: inline-block;
  position: relative;
  border-bottom: 4px solid var(--theme-color);
  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: var(--theme-color);
  box-shadow: var(--box-shadow);
  z-index: 1;
}

.theme-btn::before,
.theme-btn2::before {
  content: "";
  height: 300px;
  width: 300px;
  background: var(--theme-color2);
  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: var(--theme-color);
}

.theme-btn2:hover {
  color: var(--color-white);
}



/*====================
13. Header top css
======================*/

.header-top {
  padding: 10px 0;
  background: var(--theme-color2);
  position: relative;
}

.header-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 80px;
  bottom: 0;
  width: 48%;
  background: var(--theme-color);
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}

.header-top::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8%;
  background: var(--theme-color);
  clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.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);
}

.header-top-list a:hover {
  color: var(--color-white)
}

.header-top-list a i {
  color: var(--color-white);
  margin-right: 5px;
}

.header-top-left,
.header-top-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.header-top-social span {
  color: var(--color-white);
}

.header-top-social a {
  color: var(--color-white);
  font-size: 16px;
  text-align: center;
  margin-left: 12px;
  transition: var(--transition);
}

.header-top-social a:hover {
  color: var(--theme-color);
}

.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: var(--color-dark);
  border-radius: 10px;
}

.header-top-lang .dropdown-item:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

@media all and (max-width: 1199px) {
  .header-top::before {
    left: 0;
    width: 62%;
  }

  .header-top::after {
    display: none;
  }

  .header-top-social span {
    display: none;
  }
}

@media all and (max-width: 991px) {
  .header-top::before {
    width: 53%;
  }

  .header-top-list ul li:last-child {
    display: none;
  }
}

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

  .header-top::before,
  .header-top::after {
    display: none;
  }

  .header-top-right {
    margin-top: 15px;
  }
}




/*====================
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: 180px;
}

.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: var(--color-dark);
    text-transform: capitalize;
  }

  .navbar.fixed-top .nav-item .nav-link {
    color: var(--color-dark);
  }

  .navbar .nav-item .nav-link.active,
  .navbar .nav-item:hover .nav-link {
    color: var(--theme-color);
  }

  .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: 300px;
    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: var(--color-dark);
    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: var(--theme-color);
    color: var(--color-white);
    padding-left: 25px;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item::before {
    content: "\f178";
    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: var(--color-dark);
    border: none;
    padding: 0;
    background: transparent;
    transition: var(--transition);
  }

  .nav-right-link:hover {
    color: var(--theme-color);
  }

  .navbar.fixed-top .nav-right-link {
    color: var(--color-dark);
  }

  .navbar.fixed-top .nav-right-link:hover {
    color: var(--theme-color);
  }

  .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: var(--theme-color);
    color: var(--color-white);
    text-align: center;
    font-size: 18px;
    margin-top: 5px;
  }

  .nav-right .call-wrap .content span {
    color: var(--theme-color);
    font-weight: 500;
  }

  .nav-right .call-wrap .content h6 a {
    color: var(--color-dark);
    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: var(--color-dark);
  }

  .navbar.light .nav-item .nav-link.active,
  .navbar.light .nav-item:hover .nav-link {
    color: var(--theme-color);
  }

  .navbar.light .nav-right-link {
    color: var(--color-white);
  }

  .navbar.light.fixed-top .nav-right-link {
    color: var(--color-dark);
  }

  .navbar.light .nav-right-link:hover {
    color: var(--theme-color);
  }

  .navbar.light .nav-right .sidebar-btn span {
    border-color: var(--color-white);
  }

  .navbar.light.fixed-top .nav-right .sidebar-btn span {
    border-color: var(--color-dark);
  }
}

@media all and (max-width: 1199px) {
  .navbar .nav-item .nav-link {
    margin-right: 15px;
  }

  .nav-right {
    margin-left: 15px;
  }

  .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: var(--color-dark);
    font-weight: 700;
    margin-right: 0px;
    transition: var(--transition);
  }

  .navbar .nav-item .nav-link:hover {
    color: var(--theme-color);
  }

  .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: var(--color-dark);
  }

  .navbar .mobile-menu-right .nav-right-link:hover {
    color: var(--theme-color);
  }

  .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: var(--color-dark);
  }

  .navbar.light .mobile-menu-right .nav-right-link {
    color: var(--color-white);
  }

  .navbar.light.fixed-top .mobile-menu-right .nav-right-link {
    color: var(--color-dark);
  }

  .navbar.light .mobile-menu-right .nav-right-link:hover {
    color: var(--theme-color);
  }
}



/*==============================
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: var(--color-dark)
  }

  .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: var(--theme-color);
  }
}



/*============================
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: var(--color-dark);
  }

  .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(10, 33, 85, .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: var(--theme-color);
}



/*====================
18. Sidebar popup css 
======================*/

.sidebar-popup {
  padding: 20px;
}

.sidebar-popup .btn-close {
  background: var(--theme-color);
  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;
  margin-bottom: 15px;
}

.sidebar-popup-contact li .icon {
  width: 35px;
  height: 35px;
  line-height: 35px;
  color: var(--color-white);
  background: var(--theme-color);
  text-align: center;
  border-radius: 50px;
}

.sidebar-popup-contact li a:hover {
  color: var(--theme-color);
}

.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: var(--theme-color);
  color: var(--color-white);
  box-shadow: var(--box-shadow);
}

.sidebar-popup-social a:hover {
  background: var(--color-dark);
}




/*====================
19. Main section css 
======================*/

.main {
  margin-top: 0rem;
}



/*====================
20. Hero css 
======================*/

.hero-single {
  padding-top: 120px;
  padding-bottom: 170px;
  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(0, 42, 126, .8) 0%, rgba(0, 42, 126, 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: var(--theme-color);
  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
  z-index: -1;
}

.hero-single .hero-content .hero-title {
  color: var(--color-white);
  font-size: 60px;
  font-weight: 700;
  margin: 20px 0;
  text-transform: capitalize;
}

.hero-single .hero-content .hero-title span {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-white);
}

.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 {
    padding-top: 60px;
    padding-bottom: 150px;
  }

  .hero-single .hero-content .hero-title {
    font-size: 30px;
  }

  .hero-single .hero-content .hero-sub-title {
    font-size: 18px;
  }

  .hero-single .hero-content .hero-btn {
    gap: 1rem;
  }
}


/* 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: var(--theme-color);
  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: var(--theme-color);
  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 var(--theme-color);
  margin: 5px;
  transition: var(--transition);
}

.hero-slider .owl-dots .owl-dot.active span {
  background-color: var(--theme-color);
}


@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: 120px;
  padding-bottom: 120px;
  z-index: 1;
}

.site-breadcrumb::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--theme-color2);
  opacity: 0.8;
  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: var(--theme-color);
}

.site-breadcrumb .breadcrumb-menu li.active {
  color: var(--theme-color);
}



/* ===================
22. About css 
====================== */

.about-left {
  position: relative;
  margin-right: 25px;
}

.about-left::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 80%;
  left: -20px;
  top: 50px;
  border: 5px solid var(--theme-color);
  border-radius: 100px 20px 20px 80px;
  z-index: -1;
}

.about-img .img-1 {
  width: 51%;
  margin-top: 70px;
  border-radius: 100px 100px 0px 100px;
}

.about-img .img-2 {
  position: absolute;
  top: -20px;
  right: 0;
  width: 45%;
  border: 10px solid var(--color-white);
  border-radius: 100px 100px 100px 0px;
}

.about-right {
  position: relative;
  display: block;
}

.about-experience {
  background: var(--theme-color);
  position: absolute;
  right: 40px;
  bottom: 40px;
  padding: 14px 25px;
  border-radius: 100px 100px 0 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 {
  padding: 15px;
  border: 1px solid var(--border-info-color);
  border-radius: 20px;
  margin-top: 25px;
  margin-bottom: 35px;
}

.about-item {
  display: flex;
  gap: 12px;
  background: var(--color-white);
}

.about-item .icon {
  width: 65px;
  height: 65px;
  line-height: 60px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 50px;
}

.about-item .icon img {
  width: 40px;
  filter: brightness(0) invert(1);
}

.about-item .content {
  flex: 1;
}

.about-item .content h6 {
  color: var(--color-dark);
  font-size: 18px;
  margin-bottom: 5px;
}

.about-text {
  color: var(--body-text-color);
  text-align: justify;
}


@media all and (max-width: 991px) {
  .about-right {
    margin-top: 80px;
  }
}

@media all and (max-width: 767px) {
  .about-left {
    margin-right: 0;
  }

  .about-left::before {
    top: 60px;
    left: -10px;
  }

  .about-title {
    font-size: 30px;
  }

  .about-experience {
    right: -7px;
    bottom: 5px;
  }

  .about-item {
    border: none !important;
  }
}



/*====================
23. Feature css 
======================*/

.feature-area {
  position: relative;
  z-index: 1;
}

.fa-negative {
  margin-top: -130px;
}

.feature-item {
  display: flex;
  gap: 18px;
  background: var(--theme-color2);
  border-radius: 30px;
  padding: 20px 20px 20px 0px;
  position: relative;
}

.feature-item .count {
  position: absolute;
  left: 20px;
  bottom: 8px;
  font-size: 65px;
  line-height: 70px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--body-text-color);
  transition: var(--transition);
}

.feature-icon {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 75px;
  text-align: center;
  background: var(--theme-color);
  border: 10px solid var(--color-white);
  border-radius: 0 50px 50px 50px;
  transition: var(--transition);
  margin-top: -25px;
  margin-left: -7px;
}

.feature-item:hover .feature-icon {
  box-shadow: none;
}

.feature-icon img {
  width: 45px;
  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;
}

@media all and (max-width: 1199px) {
  .fa-negative {
    margin-top: -70px;
  }
}




/* ===================
24. Service css 
====================== */

.service-item {
  position: relative;
  padding: 15px;
  background: var(--color-white);
  border-radius: 30px;
  transition: var(--transition);
  box-shadow: var(--box-shadow);
  margin-top: 20px;
}

.service-item .count {
  position: absolute;
  bottom: 15px;
  right: 20px;
  font-weight: 800;
  font-size: 50px;
  line-height: 50px;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-dark);
  opacity: .2;
}

.service-img img {
  border-radius: 20px;
}

.service-icon {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 90px;
  height: 90px;
  border-radius: 50px 0 50px 50px;
  background: var(--theme-color);
  border: 8px solid var(--color-white);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon img {
  width: 45px !important;
  filter: brightness(0) invert(1);
}

.service-item:hover .service-icon img {
  transform: rotateY(-360deg);
}

.service-content {
  margin-top: 25px;
}

.service-content h4 {
  font-size: 18px;
  font-weight: 800;
}

.service-content h4 a {
  color: var(--color-dark);
}

.service-content h4 a:hover {
  color: var(--theme-color);
}

.service-content p {
  color: var(--body-text-color);
  margin-top: 10px;
  margin-bottom: 30px;
  text-align: justify;
}

/* service area 2 */
.service-area2 .service-item {
  overflow: hidden;
  z-index: 1;
}

.service-area2 .service-item .shape {
  position: absolute;
  right: 0;
  top: 0;
  opacity: .2;
  z-index: -1;
}

.service-area2 .service-icon {
  position: unset;
  border: none;
  width: 95px;
  height: 95px;
  position: relative;
}

.service-area2 .service-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px dashed var(--color-white);
  border-radius: 50px;
}

.service-area2 .service-content {
  margin-top: 20px;
}

.service-area2 .service-content p {
  margin-bottom: 20px;
}

.service-area2 .service-item .count {
  font-size: 50px;
  line-height: 50px;
  bottom: 19px;
}

.service-area2 .service-title {
  font-size: 20px;
}

/* service-slider */
.service-slider .service-item {
  box-shadow: unset;
}

.service-slider .service-item:hover {
  border-color: var(--theme-color);
}

.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: var(--theme-color);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}

.service-slider .owl-nav button:hover i {
  background: var(--theme-color);
  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: var(--theme-color);
  border-radius: 50px;
}

.service-sidebar .category a {
  display: block;
  font-size: 16px;
  color: var(--color-dark);
  font-weight: 500;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--border-info-color);
}

.service-sidebar .category a:hover {
  color: var(--theme-color);
  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: var(--color-dark);
  font-weight: 500;
  border: 2px solid var(--theme-color);
  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: var(--theme-color);
  color: var(--color-white);
}

.service-sidebar .service-download a i {
  margin-right: 10px;
}

.service-details img {
  border-radius: 30px;
}

.service-details .content h3 {
  color: var(--color-dark);
}

.service-details .content .list li {
  font-weight: 500;
  color: var(--color-dark);
  margin-top: 5px;
}

.service-details .content .list i {
  color: var(--theme-color);
  margin-right: 10px;
}



/* ===================
26. Step/process css 
====================== */

.process-item {
  position: relative;
  background: var(--color-white);
  padding: 20px;
  border-radius: 30px;
  box-shadow: var(--box-shadow);
}

.process-item .count {
  position: absolute;
  top: 20px;
  right: 20px;
  color: transparent;
  -webkit-text-stroke: 1px var(--theme-color);
  font-size: 50px;
  line-height: 30px;
  font-weight: 800;
  margin-bottom: 20px;
}

.process-item .icon {
  width: 80px;
  height: 80px;
  line-height: 70px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 0 100px 100px 100px;
  margin-left: -26px;
  margin-top: -26px;
}

.process-item .icon img {
  width: 45px;
  filter: brightness(0) invert(1);
}

.process-item .content {
  margin-top: 15px;
}

.process-item .content h4 {
  color: var(--color-dark);
}

.process-item .content p {
  color: var(--body-text-color);
  margin-top: 10px;
}



/* ===================
27. Skill css 
====================== */

.skill-img {
  position: relative;
  padding-left: 50px;
}

.skill-img::before {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 90%;
  height: 92%;
  background: var(--theme-color);
  border-radius: 0 100px 100px 100px;
  transform: rotate(-5deg);
  opacity: .2;
  z-index: -1;
}

.skill-img img {
  width: 90%;
  border-radius: 0 100px 100px 100px;
}

.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: var(--theme-color);
}

@media all and (max-width: 767px) {
  .skill-img::before {
    right: 15px;
  }
}



/*====================
28. Portfolio css 
======================*/

.portfolio-area {
  position: relative;
}

.pa-bg {
  background: var(--theme-color2);
}

.pa-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/01.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .05;
}

.portfolio-img {
  position: relative;
}

.portfolio-img img {
  border-radius: 30px 30px 30px 0;
}

.portfolio-img::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--theme-color);
  border-radius: 30px;
  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: var(--theme-color);
  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: var(--theme-color);
}

.portfolio-item:hover .portfolio-link {
  margin-top: 0px;
  opacity: 1;
}

.portfolio-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-white);
  margin: -30px 30px 0 0;
  position: relative;
  padding: 10px 10px 10px 15px;
  border-radius: 0 50px 50px 0;
  box-shadow: var(--box-shadow);
}

.portfolio-content small {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--theme-color);
  font-size: 14px;
  letter-spacing: 2px;
}

.portfolio-content h4 a {
  font-size: 18px;
  color: var(--color-dark);
}

.portfolio-content h4 a:hover {
  color: var(--theme-color);
}

.portfolio-arrow {
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: var(--theme-color);
  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 .portfolio-content {
  margin-bottom: 50px;
}

.portfolio-slider .owl-nav {
  margin-top: 0px;
}

.portfolio-slider .owl-nav button {
  position: absolute;
  top: 50%;
  margin-top: -31px;
  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: var(--theme-color);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}

.portfolio-slider .owl-nav button:hover i {
  background: var(--theme-color);
  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: var(--theme-color);
  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: var(--color-dark);
  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: var(--theme-color);
}

.portfolio-sidebar .project {
  background: var(--theme-color);
}

.portfolio-details img {
  border-radius: 30px;
}

.portfolio-details .content h3 {
  color: var(--color-dark);
}

.portfolio-details .content .list li {
  font-weight: 500;
  color: var(--color-dark);
  margin-top: 5px;
}

.portfolio-details .content .list i {
  color: var(--theme-color);
  margin-right: 10px;
}




/* ===================
30. Pricing css 
====================== */

.pricing-area {
  position: relative;
}

.pricing-item {
  background: var(--color-white);
  border-radius: 40px 0 40px 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: 0px;
  top: -15px;
  background: var(--theme-color);
  padding: 0 15px;
  box-shadow: var(--box-shadow);
  border-radius: 50px 50px 0px 50px;
  letter-spacing: 4px;
}

.pricing-header h5 {
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
  color: var(--color-white);
}

.pricing-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.pricing-icon {
  width: 80px;
  height: 80px;
  background: var(--theme-color);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-icon img {
  width: 50px;
  filter: brightness(0) invert(1);
}

.pricing-amount strong {
  font-size: 50px;
  font-weight: 900;
  color: var(--color-dark);
  line-height: 1;
}

.pricing-amount-type {
  color: var(--color-dark);
  font-size: 16px;
  font-weight: 500;
}

.pricing-text {
  color: var(--color-dark);
  text-transform: uppercase;
  font-size: 15px;
}

.pricing-feature {
  padding: 40px 0 0 0;
}

.pricing-feature li {
  margin-bottom: 15px;
  color: var(--color-dark);
  font-weight: 500;
}

.pricing-feature li:last-child {
  margin-bottom: 0px;
}

.pricing-feature li i {
  color: var(--theme-color);
  margin-right: 10px;
}

.pricing-feature li .not-include {
  color: var(--body-text-color);
}

.pricing-item .theme-btn,
.pricing-item .theme-btn2 {
  width: 100%;
}

.pricing-item.active {
  outline: 3px solid var(--theme-color);
}

.pricing-item.active .pricing-header {
  right: -3px;
}

@media all and (max-width: 991px) {
  .pricing-amount strong {
    font-size: 50px;
  }
}



/* ===================
31. Counter css 
====================== */

.counter-area {
  position: relative;
  background: var(--theme-color2);
  overflow: hidden;
  z-index: 1;
}

.counter-area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/02.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .1;
}

.counter-item {
  display: flex;
  gap: 12px;
  position: relative;
  padding: 15px 10px 15px 15px;
  border-radius: 100px;
  border: 2px solid var(--border-white-color);
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  z-index: 1;
}

.counter-item::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  bottom: -2px;
  width: 40%;
  border: 3px solid var(--theme-color);
  border-radius: 100px 0 0 100px;
  border-right: none;
  transition: var(--transition);
}

.counter-item:hover::before {
  width: 50%;
}

.counter-item .icon {
  width: 80px;
  height: 80px;
  line-height: 70px;
  font-size: 35px;
  border-radius: 50px;
  text-align: center;
  color: var(--color-white);
  background: var(--color-white);
}

.counter-item .icon img {
  width: 48px;
}

.counter-item .info {
  display: flex;
  gap: 2px;
}

.counter-item .counter {
  display: block;
  line-height: 1;
  color: var(--color-white);
  font-size: 50px;
  font-weight: 900;
}

.counter-item .unit {
  font-size: 25px;
  color: var(--theme-color);
  font-weight: 500;
  line-height: 1;
  margin: 3px 0 0 3px;
}

.counter-item .title {
  color: var(--color-white);
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
}

/* counter-area 2 */
.counter-area2 {
  position: relative;
  z-index: 1;
}

.counter-area2 .counter-wrap {
  margin-top: -80px;
}

.counter-area2 .counter-item {
  background: var(--color-white);
}

.counter-area2 .counter-item .icon {
  background: var(--theme-color2);
}

.counter-area2 .counter-item .counter {
  color: var(--color-dark);
}

.counter-area2 .counter-item .title {
  color: var(--color-dark);
}



/* ===================
32. Team css 
====================== */

.team-area {
  position: relative;
}

.team-img {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
}

.team-img img {
  border-radius: 40px;
}

.team-item:hover .team-img img {
  transform: scale(1.1);
}

.team-social-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border-radius: 50% 50% 0 0;
  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;
  right: -20px;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: -5px 5px 0 5px var(--color-white);
  border-bottom-left-radius: 20px;
}

.team-social-btn button {
  width: 42px;
  height: 42px;
  line-height: 42px;
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: none;
}

.team-social {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  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: var(--theme-color);
  border-radius: 50px;
}

.team-social a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.team-social-wrap:hover .team-social {
  opacity: 1;
  visibility: visible;
  bottom: 60px;
}

.team-content {
  margin-top: 10px;
  text-align: center;
}

.team-content h4 a {
  color: var(--color-dark);
  font-size: 20px;
}

.team-content h4 a:hover {
  color: var(--theme-color);
}

.team-content span {
  color: var(--theme-color);
  font-weight: 500;
}



/* ===================
33. Video css 
====================== */

.video-area {
  position: relative;
  overflow: hidden;
}

.video-content {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  border-radius: 50px 0 0 50px;
}

.video-content::before {
  content: "";
  position: absolute;
  background: rgba(10, 33, 85, .2);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50px 0 0 50px;
}

.video-content .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: 991px) {
  .video-content {
    position: relative;
    width: 100%;
    height: 350px;
    border-radius: 50px;
    margin-top: 50px;
  }

  .video-content::before {
    border-radius: 50px;
  }
}



/*====================
34. Quote css 
======================*/

.quote-area {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.quote-content {
  background: var(--color-white);
  padding: 20px 35px;
}

.quote-img img {
  border-radius: 15px;
}

.quote-head {
  margin-bottom: 20px;
}

.quote-head h3 {
  margin-bottom: 8px;
}



/* ===================
35. Cta css 
====================== */

.cta-area {
  overflow: hidden;
}

.ct-negative {
  margin-top: -120px;
}

.cta-wrap {
  position: relative;
  background: var(--theme-color);
  border-radius: 50px;
  overflow: hidden;
  z-index: 1;
}

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

.cta-wrap .shape-1 {
  position: absolute;
  left: -70px;
  bottom: 0;
  width: 16%;
  height: 100%;
  background: var(--theme-color);
  opacity: .8;
  transform: skewX(20deg);
  z-index: -1;
}

.cta-wrap .shape-2 {
  position: absolute;
  right: 50px;
  top: 0;
  width: 150px;
  height: 100%;
  background: var(--theme-color);
  opacity: .8;
  transform: skewX(-20deg);
  z-index: -1;
}

.cta-content {
  text-align: center;
}

.cta-content h1 {
  color: var(--color-white);
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 10px;
}

.cta-content p {
  color: var(--color-white);
  font-size: 16px;
  margin-bottom: 30px;
}

.cta-content .theme-btn {
  background: var(--theme-color);
  color: var(--color-white);
}

@media all and (max-width: 991px) {
  .cta-wrap {
    padding: 50px 25px;
  }
}

@media all and (max-width: 767px) {
  .cta-wrap .shape-1 {
    display: none;
  }
}



/* ===================
36. Partner css 
====================== */

.partner-area {
  position: relative;
  z-index: 1;
}

.pt-negative {
  margin-top: -60px;
}

.partner-wrap {
  background: var(--color-white);
  border-radius: 20px;
  padding: 22px 0;
  box-shadow: var(--box-shadow);
}




/* ===================
37. Choose css 
====================== */

.choose-area {
  position: relative;
}

.choose-content {
  margin-top: 50px;
}

.choose-item {
  display: flex;
  gap: 20px;
  margin: 30px 0;
}

.choose-item:last-child {
  margin-bottom: 0;
}

.choose-item-icon {
  position: relative;
  width: 60px;
  height: 60px;
  line-height: 58px;
  background: var(--theme-color);
  text-align: center;
  border-radius: 50px;
}

.choose-item-icon::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px dashed var(--theme-color);
  border-radius: 50px;
}

.choose-item-icon img {
  width: 38px;
  filter: brightness(0) invert(1);
}

.choose-item-info {
  flex: 1;
}

.choose-item-info h4 {
  color: var(--color-dark);
  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;
  margin-top: 45px;
}

.choose-img img {
  width: 83%;
  border: 10px solid var(--color-white);
  border-radius: 100px 100px 0 100px;
}

@media all and (max-width: 991px) {
  .choose-img img {
    width: 100%;
  }
}



/*====================
38. Testimonial css 
======================*/

.testimonial-area {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.ts-bg {
  background: var(--theme-color2);
}

.ts-bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../img/shape/06.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .1;
  z-index: -1;
}

.testimonial-item {
  position: relative;
  background: var(--color-white);
  padding: 20px 30px;
  border-radius: 30px 0px 30px 30px;
  margin-bottom: 20px;
}

.testimonial-quote p {
  position: relative;
  color: var(--color-dark);
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  z-index: 1;
      text-align: justify;
}

.testimonial-content {
  display: flex;
  justify-content: start;
  align-items: center;
}

.testimonial-author-img {
  width: 90px;
  height: 90px;
  border-radius: 50px;
  position: absolute;
  right: -5px;
  top: -5px;
}

.testimonial-author-img img {
  border-radius: 50% 0 50% 50%;
  border: 10px solid var(--theme-color2);
}

.testimonial-area.bg .testimonial-author-img img {
  border-color: var(--theme-bg-light);
}

.testimonial-author-info {
  position: relative;
  margin-bottom: 20px;
  padding-left: 20px;
}

.testimonial-author-info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-left: 4px solid var(--theme-color);
  border-radius: 50px;
}

.testimonial-author-info h4 {
  font-size: 20px;
  color: var(--theme-color2);
}

.testimonial-author-info p {
  color: var(--theme-color);
  font-weight: 600;
}

.testimonial-quote-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .15;
}

.testimonial-shadow-icon img {
  width: 200px !important;
}

.testimonial-rate {
  color: #FB9902;
}

.testimonial-area.bg .testimonial-author-info h4 {
  color: var(--theme-color2)
}

/* testimonial-slider */
.testimonial-slider .owl-dots {
  text-align: center;
  margin-top: 10px;
}

.testimonial-slider .owl-dots .owl-dot span {
  background: var(--theme-color);
  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: var(--theme-color);
  width: 8px;
  height: 8px;
}



/* ========================
39. 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: var(--theme-color);
  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);
}



/*====================
40. Blog css 
======================*/

.blog-area {
  position: relative;
}

.blog-item {
  padding: 20px;
  background: var(--color-white);
  border-radius: 30px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.blog-item-img {
  border-radius: 25px;
  overflow: hidden;
  position: relative;
}

.blog-item-img img {
  border-radius: 25px;
}

.blog-item:hover .blog-item-img img {
  transform: scale(1.1);
}

.blog-date {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background: var(--theme-color);
  color: var(--color-white);
  text-align: center;
  padding: 3px 20px;
  border-radius: 20px;
  box-shadow: var(--box-shadow);
}

.blog-date strong {
  font-size: 20px;
  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: var(--color-dark);
}

.blog-item-meta ul li i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-item-meta a {
  color: var(--color-dark);
}

.blog-item-meta a:hover {
  color: var(--theme-color);
}

.blog-title {
  font-size: 22px;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.blog-item-info h4 a {
  color: var(--color-dark);
  font-weight: 600;
}

.blog-item-info h4 a:hover {
  color: var(--theme-color);
}

.blog-item-info p {
  margin-bottom: 16px;
}

.blog-item-info .theme-btn {
  margin-top: 10px;
}




/*========================
41. Blog single css
==========================*/

.blog-single {
  position: relative;
}

/* blog single img */
.blog-single .blog-thumb-img {
  margin-bottom: 20px;
}

.blog-single .blog-single-content img {
  border-radius: 15px;
}

/* 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: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-single .blog-meta a {
  color: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta a:hover {
  color: var(--theme-color);
}

/* blog single details */
.blog-single .blog-details-title {
  font-size: 34px;
  color: var(--color-dark);
  font-weight: 700;
}

/* blog single blockqoute */
.blog-single .blockqoute {
  background: var(--theme-bg-light);
  border-left: 5px solid var(--theme-color);
  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: var(--theme-color);
  font-size: 70px;
}

.blog-single .blockqoute-author {
  margin-top: 20px;
  padding-left: 60px;
  position: relative;
  color: var(--color-dark);
}

.blog-single .blockqoute-author::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 40px;
  background: var(--theme-color);
  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: var(--color-dark);
}

.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: var(--color-dark);
  padding: 5px 18px;
  border-radius: 50px;
  transition: var(--transition);
}

.blog-single .blog-details-tag ul a:hover {
  background: var(--theme-color);
  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: var(--theme-color);
  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 var(--theme-color);
  border-radius: 50px;
  margin-right: 5px;
  color: var(--theme-color);
  transition: var(--transition);
}

.blog-single .author-social a:hover {
  color: var(--color-white);
  background: var(--theme-color);
}

/* blog single comment */
.blog-single .blog-comment h3 {
  color: var(--color-dark);
  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: var(--theme-color);
  font-weight: 500;
}

.blog-single .blog-comment-content a {
  font-weight: 500;
  margin-top: 5px;
  color: var(--theme-color);
}

.blog-single .blog-comment-content a:hover {
  color: var(--theme-color2);
}

.blog-single .blog-comment-content h5 {
  color: var(--color-dark);
  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;
  }
}



/*==========================
42. 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: var(--color-dark);
  font-weight: 700;
}

.blog-sidebar .widget .widget-title::before {
  position: absolute;
  content: '';
  width: 15px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 0;
}

.blog-sidebar .widget .widget-title::after {
  position: absolute;
  content: '';
  width: 30px;
  border-bottom: 3px solid var(--theme-color);
  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: var(--theme-color);
}

/* category widget */
.blog-sidebar .widget .category-list a {
  display: block;
  padding: 10px 0;
  font-weight: 500;
  color: var(--color-dark);
  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: var(--theme-color);
}

.blog-sidebar .widget .category-list a i {
  margin-right: 5px;
  color: var(--theme-color);
}

.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: var(--theme-color);
  font-weight: 500;
}

.blog-sidebar .widget .recent-post-info span i {
  margin-right: 5px;
}

.blog-sidebar .widget .recent-post-info h6 a:hover {
  color: var(--theme-color);
}

/* social widget */
.blog-sidebar .widget .social-link a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  text-align: center;
  margin-right: 5px;
  border-radius: 50px;
  transition: var(--transition);
}

.blog-sidebar .widget .social-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/* tag widget */
.blog-sidebar .widget .tag-list a {
  background: var(--color-white);
  color: var(--color-dark);
  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: var(--theme-color);
  color: var(--color-white);
}




/*====================
43. 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: var(--color-dark);
  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: var(--theme-color);
  color: var(--color-white);
}



/*====================
44. Faq css 
======================*/

.faq-area .accordion-item {
  border: none;
  background: var(--color-white);
  border-radius: 40px 40px 40px 0;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
}

.faq-area .accordion-button {
  border-radius: 0px;
  background: transparent;
  font-weight: 700;
  font-size: 17px;
  color: var(--color-dark);
  box-shadow: none;
}

.faq-area .accordion-button::after {
  content: "\f107";
  background: none;
  color: var(--theme-color);
  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: var(--theme-color);
  background: transparent;
  border-bottom: 1px dashed var(--theme-color);
  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 50px 50px 0;
  background: var(--theme-color);
  text-align: center;
  color: var(--color-white);
}

.faq-area .accordion-body {
  color: var(--color-dark);
  font-weight: 500;
}

@media all and (max-width: 991px) {
  .faq-area .faq-content {
    margin-bottom: 50px;
  }

  .faq-area .accordion-button {
    font-size: 16px;
  }
}




/*===================
45. 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: 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: var(--theme-color);
}

.contact-info .content h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-dark);
}

.contact-info .content p {
  color: var(--color-dark);
  font-weight: 500;
  font-size: 16px;
}

.contact-img img {
  width: 100%;
  border-radius: 40px;
}

.contact-form {
  background: var(--theme-bg-light);
  padding: 30px;
  border-radius: 40px;
}

.contact-form-header {
  margin-bottom: 30px;
}

.contact-form-header h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.contact-form-header p {
  color: var(--body-text-color);
}

.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;
}



/*====================
46. 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: var(--theme-color);
  margin-bottom: 5px;
  font-weight: 800;
}

.auth-form .auth-header p {
  color: var(--color-dark);
  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: var(--color-dark);
  font-weight: 500;
}

.auth-group .auth-group-link {
  color: var(--theme-color);
  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: var(--color-dark);
  text-align: center;
}

.auth-form .auth-bottom a {
  color: var(--theme-color);
  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: var(--color-dark);
  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: var(--theme-color);
  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;
  }
}



/*====================
47. 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: var(--theme-color);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
}

.coming-countdown .time .unit {
  color: var(--color-dark);
  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: var(--color-dark);
}

.coming-newsletter-form .form-control::placeholder {
  color: var(--color-dark);
}

.coming-newsletter-form .form-control:focus {
  border-color: var(--theme-color);
}

.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: var(--theme-color);
  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;
  }
}



/*====================
48. Error css 
======================*/

.error-wrap {
  text-align: center;
}

.error-wrap h1 {
  font-size: 250px;
  letter-spacing: 5px;
  font-weight: bold;
  color: var(--theme-color);
}

.error-wrap h1 span {
  color: var(--color-dark);
}

.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;
  }
}



/*====================
49. 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;
}



/*====================
50. 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: var(--theme-color);
  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;
  }
}



/*====================
51. Footer css 
======================*/

.footer-area {
  background: var(--footer-bg);
  position: relative;
  z-index: 1;
}

.footer-shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .1;
  z-index: -1;
}

.footer-widget {
  position: relative;
}

.footer-widget-box.about-us {
  margin-right: 0px;
}

.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: var(--theme-color);
  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: var(--theme-color);
  opacity: 0;
  transition: var(--transition);
}

.footer-list li a:hover {
  margin-left: 0px;
  color: var(--theme-color);
}

.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: var(--theme-color);
  transition: var(--transition);
}

.footer-social li a i:hover {
  background: var(--theme-color);
  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: var(--theme-color);
  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-control {
  padding-right: 145px;
  border-radius: 50px;
}

.footer-newsletter .newsletter-form .theme-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  border-radius: 50px;
  padding: 5px 15px;
}

.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: var(--theme-color);
}

.copyright .copyright-text {
  color: var(--footer-text-color);
  margin-bottom: 0px;
  font-size: 16px;
}

.copyright .copyright-text a {
  color: var(--theme-color);
  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: center;
    margin-top: 20px;
  }
}


/* footer light */
.footer-area.light {
  background: var(--theme-bg-light);
}

.footer-area.light .footer-widget-title {
  color: var(--color-dark);
  font-weight: 800;
}

.footer-area.light .footer-widget-box p {
  color: var(--body-text-color);
}

.footer-area.light .footer-newsletter h6 {
  color: var(--color-dark);
  font-weight: 700;
}

.footer-area.light .newsletter-form .form-control {
  color: var(--color-dark);
  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: var(--theme-color);
}

.footer-area.light .footer-list li a {
  color: var(--body-text-color);
}

.footer-area.light .footer-list li a:hover {
  color: var(--theme-color);
}

.footer-area.light .footer-contact .content h6 {
  color: var(--color-dark);
  font-weight: 700;
}

.footer-area.light .footer-contact .content a {
  color: var(--body-text-color);
}

.footer-area.light .footer-social li a i {
  background: var(--color-dark);
  color: var(--color-white);
}

.footer-area.light .footer-social li a i:hover {
  background: var(--theme-color);
}

.footer-area.light .copyright {
  border-top-color: var(--border-info-color);
}

.footer-area.light .copyright .copyright-text {
  color: var(--body-text-color);
}


/*====================
52. Home-2 css 
======================*/

.home-2 .header {
  position: relative;
  background: var(--theme-color2);
}

.home-2 .header::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  background: var(--theme-color);
}

.home-2 .header-top {
  background: transparent;
}

.home-2 .header-top::before {
  display: none;
}

.home-2 .header-top-social a:hover {
  color: var(--theme-color);
}

.home-2 .header-top-list a:hover {
  color: var(--color-white);
}

.home-2 .header-top-list a i {
  color: var(--color-white);
}

.home-2 .navbar {
  padding-right: 10px;
}

.home-2 .navbar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 89.4%;
  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-sub-title {
  padding: 2px 15px;
}

.home-2 .hero-single .hero-content .hero-sub-title::before {
  height: 100%;
  transform: skewX(-25deg);
  border-radius: 10px;
  clip-path: unset;
}

.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 .hero-slider .owl-nav .owl-prev,
  .home-2 .hero-slider .owl-nav .owl-next {
    bottom: 15px;
  }

  .home-2 .navbar::before {
    width: 100%;
    border-radius: 0;
  }
}


@media all and (max-width: 991px) {
  .home-2 .header::before {
    width: 52%;
  }
}

@media all and (max-width: 767px) {
  .home-2 .header::before {
    display: none;
  }
}



/*====================
53. Home-3 css 
======================*/

.home-3 .header-top {
  background: var(--theme-color);
}

.home-3 .header-top-social a:hover {
  color: var(--theme-color2);
}

.home-3 .header-top::before {
  background: var(--theme-color2);
  left: unset;
  right: 6%;
}

.home-3 .header-top::after {
  display: none;
}

.home-3 .hero-single {
  padding-top: 80px;
  padding-bottom: 130px;
}

.home-3 .hero-single::before {
  background: var(--theme-color2);
  opacity: .85;
}

.home-3 .hero-single .hero-img {
  position: relative;
  width: 80%;
  margin-left: auto;
}

.home-3 .hero-single .hero-img::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -20px;
  width: 95%;
  height: 95%;
  border-radius: 50% 30px 30px 30px;
  border: 5px solid var(--theme-color);
  z-index: -1;
}

.home-3 .hero-single .hero-img img {
  border-radius: 50% 30px 30px 30px;
}


@media all and (max-width: 991px) {
  .home-3 .hero-single .hero-img {
    width: 90%;
    margin-top: 60px;
  }
}


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



.pb-150 {
  padding-bottom: 150px;
}

@media(max-width:767px) {

  .site-title {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 30px;
    color: var(--color-dark);
    margin-bottom: 0;
  }
}


/*=====================================================
About Us page (about.php)
Uses the home page colour tokens from style.css:
  --theme-color  #77af12 (lime)   --theme-color2 #024e2f (deep green)
  --theme-bg-light #F6F6F6        --body-text-color #757F95
Table of contents
1. Page tokens
2. Layout helpers (section, titles, text)
3. Hex shape
4. Hero + breadcrumb
5. Intro (arch image + stats band)
6. Frame image
7. Service area cards
8. What we buy
9. Why choose us
10. Selling process
11. Commitment (recycling loop)
12. Contact panel
13. Responsive
14. Accessibility
15. Motion and hover effects
=======================================================*/

/*====================
1. Page tokens
======================*/
.abp {
  --abp-green: var(--theme-color2, #024e2f);
  --abp-lime: var(--theme-color, #77af12);
  --abp-light: var(--theme-bg-light, #F6F6F6);
  --abp-text: var(--body-text-color, #757F95);
  --abp-tint: #e8f0ea;
  --abp-radius: 18px;
  --abp-cut: 34px;
  --abp-hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  overflow: hidden;
  overflow: clip;
}

/*====================
2. Layout helpers
======================*/
.abp-section {
  padding: 60px 0px 60px;
  position: relative;
}

.abp-section--light {
  background: var(--abp-light);
}

.abp-section--dark {
  background: var(--abp-green);
  color: var(--color-white, #fff);
}

.abp-title {
  font-family: var(--heading-font);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--abp-green);
  letter-spacing: -0.01em;
  margin: 0px 0 15px;
}

.abp-title--light {
  color: var(--color-white, #fff);
}

.abp-title--center {
  text-align: center;
  margin-bottom: 60px;
}

.abp-title--tight {
  margin-bottom: 14px;
  font-size: clamp(24px, 2.6vw, 32px);
}

.abp-text {
  font-size: 17px;
  line-height: 1.8;
  color: var(--abp-text);
  margin: 0 0 18px;
  text-align: justify;
}

.abp-text:last-child {
  margin-bottom: 0;
}

.abp-text--light {
  color: rgba(255, 255, 255, 0.86);
}

.abp-lead {
  font-family: var(--heading-font);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.7;
  font-weight: 500;
  color: var(--abp-green);
  margin: 0 0 22px;
  padding-left: 22px;
  border-left: 4px solid var(--abp-lime);
}

/*====================
3. Hex shape (hex-nut motif)
======================*/
.abp-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  background: var(--abp-green);
  color: var(--color-white, #fff);
  font-size: 24px;
  clip-path: var(--abp-hex);
  position: relative;
}

.abp-hex--lime {
  background: var(--abp-lime);
  margin-bottom: 22px;
}

/*====================
4. Hero + breadcrumb
======================*/
.abp-hero {
  position: relative;
  padding: 80px 0 80px;
  background: url("../images/bg/1.jpg") center / cover no-repeat;
  color: var(--color-white, #fff);
  isolation: isolate;
}

.abp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 78, 47, 0.96) 25%, rgba(2, 78, 47, 0.7) 100%);
  z-index: -1;
}

.abp-hero__title {
  font-family: var(--heading-font);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white, #fff);
  margin: 0;
}

.abp-breadcrumb {
  margin-bottom: 26px;
}

.abp-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
}

.abp-breadcrumb__item+.abp-breadcrumb__item::before {
  content: "/";
  margin-right: 10px;
  color: var(--abp-lime);
}

.abp-breadcrumb__item a {
  color: var(--color-white, #fff);
  transition: var(--transition2);
}

.abp-breadcrumb__item a:hover {
  color: var(--abp-lime);
}

/*====================
5. Intro (arch image, seal, stats band)
======================*/
.abp-intro {
  padding: 60px 0px 60px;
}

.abp-intro__media {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 70px 70px 0;
}

/* dotted grid behind the images */
.abp-intro__media::before {
  content: "";
  position: absolute;
  left: -24px;
  bottom: 24px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, var(--abp-lime) 2.5px, transparent 3px) 0 0 / 18px 18px;
  opacity: 0.55;
}

.abp-arch {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  box-shadow: 0 30px 60px rgba(2, 78, 47, 0.22);
}

.abp-arch img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.abp-arch::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease, inset 0.5s ease;
  pointer-events: none;
}

.abp-round {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 52%;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 10px solid var(--color-white, #fff);
  box-shadow: 0 20px 45px rgba(2, 78, 47, 0.28);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.abp-round img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.abp-seal {
  position: absolute;
  z-index: 3;
  top: 56px;
  right: 8px;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--abp-lime);
  color: var(--color-white, #fff);
  font-size: 38px;
  box-shadow: 0 0 0 8px var(--color-white, #fff), 0 16px 34px rgba(119, 175, 18, 0.45);
}

.abp-seal::before {
  content: "";
  position: absolute;
  inset: -20px;
  border: 2px dashed var(--abp-lime);
  border-radius: 50%;
  animation: abp-spin 18s linear infinite;
}

.abp-seal i {
  transition: transform 0.7s ease;
}

.abp-intro__media:hover .abp-arch img,
.abp-intro__media:hover .abp-round img {
  transform: scale(1.08);
}

.abp-intro__media:hover .abp-arch::after {
  opacity: 1;
  inset: 20px;
}

.abp-intro__media:hover .abp-round {
  transform: translate(-10px, -10px) rotate(-4deg);
}

.abp-intro__media:hover .abp-seal i {
  transform: rotate(360deg) scale(1.12);
}

/* stats band */
.abp-stats {
  position: relative;
  list-style: none;
  margin: 90px 0 0;
  padding: 0;
  overflow: hidden;
  background: var(--abp-green);
  border-radius: 26px;
  box-shadow: 0 30px 60px rgba(2, 78, 47, 0.25);
}

.abp-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.abp-stat:last-child {
  border-right: 0;
}

.abp-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--abp-lime);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.abp-stat:hover::before {
  transform: translateY(0);
}

.abp-stat__icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 52px;
  height: 52px;
  filter: brightness(0) invert(1);
  opacity: 0.22;
  transition: transform 0.7s ease, opacity 0.4s ease;
}

.abp-stat:hover .abp-stat__icon {
  opacity: 0.6;
  transform: rotate(360deg) scale(1.15);
}

.abp-stat__number {
  font-family: var(--heading-font);
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  font-weight: 700;
  color: var(--color-white, #fff);
  margin: 0 0 10px;
  transition: color 0.4s ease;
}

.abp-stat__unit {
  color: var(--abp-lime);
  transition: color 0.4s ease;
}

.abp-stat:hover .abp-stat__number,
.abp-stat:hover .abp-stat__label {
  color: var(--abp-green);
}

.abp-stat:hover .abp-stat__unit {
  color: var(--color-white, #fff);
}

.abp-stat__label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  transition: color 0.4s ease;
}

/*====================
6. Frame image
======================*/
.abp-frame {
  position: relative;
  margin: 0;
  padding: 0 0 24px 24px;
}

.abp-frame::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 78%;
  height: 78%;
  border: 3px solid var(--abp-lime);
  border-radius: var(--abp-radius);
  z-index: 0;
}

.abp-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--abp-radius);
  border-top-right-radius: var(--abp-cut);
  border-bottom-left-radius: var(--abp-cut);
}

.abp-frame--light::before {
  border-color: var(--abp-lime);
}

/*====================
7. Service area split cards
======================*/
.abp-zones {
  padding: 60px 0px 60px;
}

.abp-zones__list {
  display: grid;
  gap: 40px;
}

.abp-zone {
  display: grid;
  grid-template-columns: 5fr 7fr;
  overflow: hidden;
  background: var(--color-white, #fff);
  border: 1px solid rgba(2, 78, 47, 0.12);
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(2, 78, 47, 0.08);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.abp-zone:hover {
  border-color: var(--abp-lime);
  box-shadow: 0 24px 56px rgba(2, 78, 47, 0.16);
}

.abp-zone:nth-child(even) .abp-zone__media {
  order: 2;
}

.abp-zone__media {
  position: relative;
  margin: 0;
  min-height: 360px;
  overflow: hidden;
}

.abp-zone__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.abp-zone:hover .abp-zone__media img {
  transform: scale(1.06);
}

/* soft green fade at the bottom of the photo */
.abp-zone__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 78, 47, 0.55), transparent 45%);
  pointer-events: none;
}

.abp-zone__pin {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--abp-lime);
  color: var(--color-white, #fff);
  font-size: 20px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.28);
}

.abp-zone__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 52px;
}

.abp-zone__no {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--abp-lime);
}

.abp-zone__no::after {
  content: "";
  width: 56px;
  height: 2px;
  background: var(--abp-lime);
}

.abp-zone__title {
  font-family: var(--heading-font);
  font-size: 25px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--abp-green);
}

.abp-zone .abp-text {
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 991px) {
  .abp-zone {
    grid-template-columns: 1fr;
  }

  .abp-zone:nth-child(even) .abp-zone__media {
    order: 0;
  }

  .abp-zone__media {
    min-height: 260px;
  }

  .abp-zone__body {
    padding: 34px 30px;
  }
}

@media (max-width: 575px) {
  .abp-zones__list {
    gap: 28px;
  }

  .abp-zone {
    border-radius: 18px;
  }

  .abp-zone__media {
    min-height: 220px;
  }

  .abp-zone__body {
    padding: 28px 22px;
  }

  .abp-zone__title {
    font-size: 22px;
  }
}

/*====================
Office dismantling (uses .abp-frame)
======================*/

/*====================
8. What we buy (tall image cards, reveal on hover)
======================*/
.abp-buy__grid {
  margin-top: 20px;
}

.abp-buy-card {
  position: relative;
  height: 440px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--abp-green);
  isolation: isolate;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.55s ease;
}

.abp-buy-card:hover,
.abp-buy-card:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 28px 50px rgba(2, 78, 47, 0.3);
}

.abp-buy-card__img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.abp-buy-card:hover .abp-buy-card__img,
.abp-buy-card:focus-visible .abp-buy-card__img {
  transform: scale(1.12) rotate(1.5deg);
}

.abp-buy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to top, rgba(2, 78, 47, 0.95) 0%, rgba(2, 78, 47, 0.35) 45%, rgba(2, 78, 47, 0) 75%);
}

.abp-buy-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--abp-green);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.abp-buy-card:hover::after,
.abp-buy-card:focus-visible::after {
  opacity: 0.82;
}

.abp-buy-card__icon {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  font-size: 22px;
  background: var(--abp-lime);
  transition: transform 0.8s ease, background 0.4s ease, color 0.4s ease;
}

.abp-buy-card:hover .abp-buy-card__icon,
.abp-buy-card:focus-visible .abp-buy-card__icon {
  transform: rotate(360deg);
  background: var(--color-white, #fff);
  color: var(--abp-green);
}

.abp-buy-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 22px 26px;
}

.abp-buy-card__title {
  position: relative;
  font-family: var(--heading-font);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-white, #fff);
  margin: 0;
  padding-bottom: 12px;
}

.abp-buy-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--abp-lime);
  transition: width 0.55s ease;
}

.abp-buy-card:hover .abp-buy-card__title::after,
.abp-buy-card:focus-visible .abp-buy-card__title::after {
  width: 100%;
}

.abp-buy-card__text {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  opacity: 0;
  transform: translateY(14px);
  transition: max-height 0.55s ease, opacity 0.5s ease, transform 0.5s ease, margin 0.5s ease;
}

.abp-buy-card:hover .abp-buy-card__text,
.abp-buy-card:focus-visible .abp-buy-card__text {
  max-height: 150px;
  margin-top: 12px;
  opacity: 1;
  transform: none;
}

/* touch screens and phones have no hover: show the text */
@media (hover: none),
(max-width: 767.98px) {
  .abp-buy-card {
    height: 340px;
  }

  .abp-buy-card::after {
    opacity: 0.5;
  }

  .abp-buy-card__text {
    max-height: none;
    margin-top: 12px;
    opacity: 1;
    transform: none;
  }
}

/*====================
9. Why choose us (bento cards, no images)
======================*/
.abp-why__head {
  max-width: 720px;
  margin: 0 auto 56px;
}

.abp-why__head .abp-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: 22px auto 0;
  border-radius: 5px;
  background: var(--abp-lime);
}

.abp-why-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.abp-why-card--1,
.abp-why-card--2,
.abp-why-card--3 {
  grid-column: span 2;
}

.abp-why-card--4,
.abp-why-card--5 {
  grid-column: span 3;
}

.abp-why-card {
  position: relative;
  overflow: hidden;
  padding: 90px 32px 34px;
  background: var(--color-white, #fff);
  border: 1px solid rgba(2, 78, 47, 0.1);
  border-radius: 6px var(--abp-cut) 6px var(--abp-cut);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

/* growing lime underline */


.abp-why-card__no {
  position: absolute;
  top: 12px;
  right: 22px;
  font-family: var(--heading-font);
  font-size: 84px;
  line-height: 1;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px rgba(2, 78, 47, 0.14);
  transition: -webkit-text-stroke-color 0.4s ease;
}

.abp-why-card__icon {
  position: absolute;
  top: 26px;
  left: 32px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--abp-tint);
  color: var(--abp-green);
  font-size: 21px;
  box-shadow: 0 0 0 6px rgba(119, 175, 18, 0.18);
  transition: background 0.4s ease, color 0.4s ease, transform 0.5s ease;
}

.abp-why-card__title {
  font-family: var(--heading-font);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--abp-green);
  margin: 0 0 12px;
  transition: color 0.4s ease;
}

.abp-why-card__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--abp-text);
  margin: 0;
  transition: color 0.4s ease;
}

.abp-why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px rgba(2, 78, 47, 0.16);
}

.abp-why-card:hover::after {
  width: 100%;
}

.abp-why-card:hover .abp-why-card__icon {
  background: var(--abp-lime);
  color: var(--color-white, #fff);
  transform: rotate(-12deg) scale(1.08);
}

/* featured card */
.abp-why-card--3 {
  background: var(--abp-green);
  border-color: var(--abp-green);
}

.abp-why-card--3 .abp-why-card__title {
  color: var(--color-white, #fff);
}

.abp-why-card--3 .abp-why-card__text {
  color: rgba(255, 255, 255, 0.85);
}

.abp-why-card--3 .abp-why-card__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.22);
}

.abp-why-card--3 .abp-why-card__icon {
  background: var(--abp-lime);
  color: var(--color-white, #fff);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14);
}

@media (max-width: 991px) {
  .abp-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .abp-why-card--1,
  .abp-why-card--2,
  .abp-why-card--3,
  .abp-why-card--4 {
    grid-column: span 1;
  }

  .abp-why-card--5 {
    grid-column: span 2;
  }
}

@media (max-width: 575px) {
  .abp-why__head {
    margin-bottom: 40px;
  }

  .abp-why-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .abp-why-card,
  .abp-why-card--5 {
    grid-column: span 1;
    padding: 84px 15px 30px;
  }

  .abp-why-card__icon {
    left: 24px;
  }
}

/*====================
10. Selling process (track + numbered nodes + cards)
======================*/
.abp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.abp-step {
  position: relative;
  padding-top: 70px;
}

.abp-step__no {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--abp-green);
  color: var(--color-white, #fff);
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--color-white, #fff), 0 0 0 8px var(--abp-lime);
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.4s ease;
}

.abp-step:hover .abp-step__no {
  background: var(--abp-lime);
  transform: scale(1.15);
}

.abp-step__card {
  position: relative;
  height: 100%;
  padding: 38px 26px 32px;
  text-align: center;
  background: var(--abp-light);
  border: 1px solid rgba(2, 78, 47, 0.06);
  border-radius: 22px;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.5s ease, box-shadow 0.5s ease;
}

/* small notch pointing at the node */
.abp-step__card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 3px;
  background: inherit;
  transform: rotate(45deg);
}

.abp-step:hover .abp-step__card {
  transform: translateY(-10px);
  background: var(--abp-green);
  box-shadow: 0 26px 46px rgba(2, 78, 47, 0.25);
}

.abp-step__icon {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  margin: 0 auto 20px;
  font-size: 26px;
  transition: background 0.4s ease, transform 0.8s ease;
}

.abp-step:hover .abp-step__icon {
  background: var(--abp-lime);
  transform: rotate(360deg);
}

.abp-step__text {
  max-width: 26ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--abp-green);
  transition: color 0.4s ease;
}

.abp-step:hover .abp-step__text {
  color: var(--color-white, #fff);
}

/* progress track between the nodes (desktop) */
@media (min-width: 992px) {

  .abp-step::before,
  .abp-step::after {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    height: 4px;
    border-radius: 4px;
  }

  .abp-step::before {
    background: rgba(2, 78, 47, 0.12);
  }

  .abp-step::after {
    background: var(--abp-lime);
    transform-origin: left center;
  }

  .abp-step:first-child::before,
  .abp-step:first-child::after {
    left: 50%;
  }

  .abp-step:last-child::before,
  .abp-step:last-child::after {
    right: 50%;
  }

  /* the track fills node by node when the list scrolls into view */
  .abp-steps.animated .abp-step::after {
    animation: abp-fill 0.7s ease backwards;
  }

  .abp-steps.animated .abp-step:nth-child(2)::after {
    animation-delay: 0.6s;
  }

  .abp-steps.animated .abp-step:nth-child(3)::after {
    animation-delay: 1.2s;
  }

  .abp-steps.animated .abp-step:nth-child(4)::after {
    animation-delay: 1.8s;
  }
}

.abp-steps.animated .abp-step__no {
  animation: abp-pop 0.5s ease backwards;
}

.abp-steps.animated .abp-step:nth-child(2) .abp-step__no {
  animation-delay: 0.6s;
}

.abp-steps.animated .abp-step:nth-child(3) .abp-step__no {
  animation-delay: 1.2s;
}

.abp-steps.animated .abp-step:nth-child(4) .abp-step__no {
  animation-delay: 1.8s;
}

/*====================
11. Commitment (recycling loop)
======================*/
.abp-green {
  padding: 60px 0 200px;
  background: url("../images/footer-bg.webp") center / cover no-repeat;
  isolation: isolate;
}

.abp-green::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, 0.97) 35%, rgba(2, 78, 47, 0.78) 100%);
}

.abp-green__content .abp-title {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 24px;
}

.abp-green__content .abp-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 5px;
  border-radius: 5px;
  background: var(--abp-lime);
  transition: width 0.6s ease;
}

.abp-green__content:hover .abp-title::after {
  width: 160px;
}

.abp-green__content .abp-text {
  max-width: 58ch;
  padding-left: 22px;
  font-size: 18px;
  border-left: 4px solid rgba(119, 175, 18, 0.6);
  transition: border-color 0.4s ease;
}

.abp-green__content:hover .abp-text {
  border-color: var(--abp-lime);
}

.abp-loop {
  --abp-loop: 400px;
  --r: calc(var(--abp-loop) / 2);
  position: relative;
  width: var(--abp-loop);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}

.abp-loop__ring {
  position: absolute;
  border-radius: 50%;
}

.abp-loop__ring--outer {
  inset: 0;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  animation: abp-spin 70s linear infinite reverse;
  transition: border-color 0.5s ease;
}

.abp-loop__ring--inner {
  inset: 15%;
  border: 2px solid rgba(119, 175, 18, 0.6);
  box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.05);
}

.abp-loop__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--abp-lime);
  color: var(--color-white, #fff);
  font-size: clamp(40px, 6vw, 64px);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 14px rgba(119, 175, 18, 0.25), 0 0 60px rgba(119, 175, 18, 0.5);
  animation: abp-pulse 3.2s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.abp-loop__core i {
  transition: transform 0.9s ease;
}

.abp-loop__orbit {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: abp-spin 40s linear infinite;
}

.abp-loop__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1));
}

.abp-loop__chip {
  position: absolute;
  width: 60px;
  height: 60px;
  flex-basis: auto;
  margin: -30px 0 0 -30px;
  font-size: 22px;
  background: var(--abp-lime);
  rotate: calc(var(--a) * -1);
  animation: abp-spin 40s linear infinite reverse;
  transition: background 0.4s ease;
}

.abp-loop:hover .abp-loop__orbit,
.abp-loop:hover .abp-loop__chip {
  animation-play-state: paused;
}

.abp-loop:hover .abp-loop__core {
  transform: translate(-50%, -50%) scale(1.1);
}

.abp-loop:hover .abp-loop__core i {
  transform: rotate(360deg);
}

.abp-loop:hover .abp-loop__ring--outer {
  border-color: var(--abp-lime);
}

.abp-loop:hover .abp-loop__chip {
  background: var(--color-white, #fff);
  color: var(--abp-green);
}

/*====================
12. Contact panel
======================*/
.abp-contact {
  position: relative;
  z-index: 2;
  margin-top: -100px;
  padding-bottom: 100px;
}

.abp-contact__panel {
  background: var(--color-white, #fff);
  border-radius: var(--abp-radius);
  border-top: 8px solid var(--abp-lime);
  padding: 50px 54px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
}

.abp-contact__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.abp-contact__actions .theme-btn,
.abp-contact__actions .theme-btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 16px;
  text-transform: none;
  word-break: break-word;
}

.abp-contact__actions .theme-btn2 {
  background: var(--abp-green);
}

/* keep the phone / mail icons upright (style.css rotates icons inside buttons) */
.abp-contact__actions i,
.abp-contact__actions .theme-btn:hover i,
.abp-contact__actions .theme-btn2:hover i {
  margin-left: 0;
  transform: none;
}

/*====================
13. Responsive
======================*/
@media (max-width: 991.98px) {
  .abp-section {
    padding: 70px 0;
  }

  .abp-hero {
    padding: 90px 0 130px;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 36px)); */
  }

  .abp-hero__deco {
    display: none;
  }

  .abp-intro {
    margin-top: -36px;
    padding-top: 70px;
  }

  .abp-stats {
    margin-top: 60px;
  }

  .abp-stat:nth-child(2n) {
    border-right: 0;
  }

  .abp-stat:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .abp-green {
    padding: 80px 0 150px;
  }

  .abp-loop {
    --abp-loop: 360px;
  }

  .abp-contact {
    margin-top: -80px;
    padding-bottom: 70px;
  }

  .abp-contact__panel {
    padding: 38px 32px;
  }

  .abp-dismantle .abp-title {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .abp-hero {
    padding: 70px 0 70px;
  }

  .abp-intro__media {
    padding: 0 44px 50px 0;
  }

  .abp-seal {
    top: 34px;
    width: 78px;
    height: 78px;
    font-size: 28px;
  }

  .abp-stat {
    padding: 28px 20px;
  }

  .abp-stat__icon {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
  }

  .abp-frame {
    padding: 0 0 16px 16px;
  }

  .abp-step__icon {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 24px;
  }

  .abp-loop {
    --abp-loop: 270px;
  }

  .abp-loop__chip {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    font-size: 18px;
  }

  .abp-contact__panel {
    padding: 30px 22px;
  }
}

/*====================
14. Accessibility
======================*/
.abp a:focus-visible {
  outline: 3px solid var(--abp-lime);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  .abp *,
  .abp *::before,
  .abp *::after {
    transition: none !important;
    animation: none !important;
  }
}

/*====================
15. Motion and hover effects
======================*/
@keyframes abp-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes abp-pulse {
  50% {
    box-shadow: 0 0 0 26px rgba(119, 175, 18, 0.12), 0 0 80px rgba(119, 175, 18, 0.55);
  }
}

@keyframes abp-float {
  50% {
    transform: translateY(-22px) rotate(12deg);
  }
}

@keyframes abp-fill {
  from {
    transform: scaleX(0);
  }
}

@keyframes abp-pop {
  from {
    transform: scale(0);
  }
}

@keyframes abp-bounce {
  40% {
    transform: translateY(-9px);
  }

  70% {
    transform: translateY(2px);
  }
}

/* hero: floating hex shapes */
.abp-hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.abp-hero__hex {
  position: absolute;
  clip-path: var(--abp-hex);
  animation: abp-float 9s ease-in-out infinite;
}

.abp-hero__hex--1 {
  top: 14%;
  right: 6%;
  width: 260px;
  height: 260px;
  background: linear-gradient(135deg, rgba(119, 175, 18, 0.55), rgba(119, 175, 18, 0.05));
}

.abp-hero__hex--2 {
  right: 26%;
  bottom: 26%;
  width: 110px;
  height: 110px;
  background: rgba(119, 175, 18, 0.9);
  animation-duration: 7s;
  animation-delay: -2s;
}

.abp-hero__hex--3 {
  right: 13%;
  bottom: 22%;
  width: 62px;
  height: 62px;
  background: rgba(255, 255, 255, 0.25);
  animation-duration: 11s;
  animation-delay: -4s;
}

/* framed images: the lime outline and the photo drift apart */
.abp-frame::before,
.abp-frame img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.abp-frame:hover::before {
  transform: translate(-8px, 8px);
}

.abp-frame:hover img {
  transform: translate(6px, -6px);
}

/* service area cards */
.abp-zone {
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.abp-zone:hover {
  transform: translateY(-8px);
}

.abp-zone:hover .abp-zone__pin {
  animation: abp-bounce 0.7s ease;
}

.abp-zone__title {
  display: inline;
  transition: background-size 0.6s ease;
}

.abp-zone:hover .abp-zone__title {
  background-size: 100% 3px;
}

.abp-zone__body .abp-zone__title+.abp-text {
  margin-top: 14px;
}

/* contact panel */
.abp-contact__panel {
  transition: box-shadow 0.5s ease;
}

.abp-contact__panel:hover {
  box-shadow: 0 40px 80px rgba(2, 78, 47, 0.28);
}

.abp-intro h2.title {
  font-size: 25px;
  font-weight: 700;
  padding-bottom: 10px;
  line-height: 1.4;
}

.abp-section.abp-buy .abp-title {
  font-family: var(--heading-font);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--abp-green);
  letter-spacing: -0.01em;
  margin: 0px 0 15px;
  text-align: center;
}

.abp-contact #contact-title {
  font-size: 25px;
}

/*=======================================================
METAL SCRAP BUYERS PAGE  (.msb)
File: metal-scrap-buyers-chennai.php
Class prefix: msb-   (banner re-uses the About page .abp-hero)
Colours come from the site tokens in :root:
  --theme-color  #77af12 (lime)    --theme-color2 #024e2f (deep green)
  --theme-bg-light #F6F6F6         --body-text-color #757F95

Contents
 1. Page tokens
 2. Layout helpers (section, title, text, hex, buttons)
 3. Intro (arch image, circle image, years badge)
 4. Marquee band
 5. Types of scrap (image cards)
 6. Heavy iron (offset frame)
 7. Machinery (dashed ring portrait)
 8. Industrial hubs (location cards)
 9. Price factors
10. Collection process (timeline)
11. Why choose us (dark tiles)
12. Areas we serve
13. Environment banner
14. Call to action panel
15. FAQ accordion
16. Keyframes
17. Responsive
18. Reduced motion

Note: scroll animations (wow) sit on the column / wrapper,
hover effects sit on the inner element, so they never clash.
=======================================================*/

/*====================
1. Page tokens
======================*/
.msb {
  --msb-green: var(--theme-color2, #024e2f);
  --msb-lime: var(--theme-color, #77af12);
  --msb-light: var(--theme-bg-light, #F6F6F6);
  --msb-text: var(--body-text-color, #757F95);
  --msb-tint: #e8f0ea;
  --msb-white: var(--color-white, #ffffff);
  --msb-radius: 18px;
  --msb-hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --msb-shadow: 0 12px 40px rgba(2, 78, 47, 0.10);
  --msb-shadow-lg: 0 26px 60px rgba(2, 78, 47, 0.22);
  --msb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
  overflow: clip;
}

/*====================
2. Layout helpers
======================*/
.msb-section {
  position: relative;
  padding: 60px 0;
}

.msb-section--light {
  background: var(--msb-light);
}

.msb-section--dark {
  background: var(--msb-green);
  color: var(--msb-white);
}

.msb-head {
  margin-bottom: 50px;
}

.msb-head--center {
  justify-content: center;
  text-align: center;
}

.msb-head--center .msb-title::after {
  left: 50%;
  transform: translateX(-50%);
}

.msb-head--center .msb-text {
  margin-bottom: 0;
  text-align: center;
}

.msb-title {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 16px;
  font-family: var(--heading-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--msb-green);
}

.msb-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--msb-lime);
  transition: width 0.5s var(--msb-ease);
}

.msb-title:hover::after {
  width: 110px;
}

.msb-title--sub {
  font-size: 25px;
}

.msb-title--light {
  color: var(--msb-white);
}

.msb-title--center {
  text-align: center;
  margin-bottom: 56px;
}

.msb-title--center::after {
  left: 50%;
  transform: translateX(-50%);
}

.msb-title--tight {
  margin-bottom: 14px;
}

.msb-text {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--msb-text);
  text-align: justify;
}

.msb-text:last-child {
  margin-bottom: 0;
}

.msb-text--light {
  color: rgba(255, 255, 255, 0.86);
}

/* hex-nut icon shape */
.msb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--msb-white);
  background: var(--msb-green);
  clip-path: var(--msb-hex);
  transition: background 0.4s var(--msb-ease), transform 0.6s var(--msb-ease);
}

.msb-hex--lime {
  background: var(--msb-lime);
}

/* outline button (pairs with .theme-btn) */
.msb-btn-outline {
  display: inline-block;
  padding: 9px 20px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--msb-green);
  border: 2px solid var(--msb-green);
  border-radius: 10px;
  transition: var(--transition2);
}

.msb-btn-outline i {
  margin-right: 6px;
  transition: transform 0.4s var(--msb-ease);
}

.msb-btn-outline:hover {
  color: var(--msb-white);
  background: var(--msb-green);
  transform: translateY(-3px);
  box-shadow: var(--msb-shadow);
}

.msb-btn-outline:hover i {
  transform: rotate(-12deg) scale(1.15);
}

.msb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.msb-actions .theme-btn {
  padding: 12px 22px;
}

.msb-actions .theme-btn i {
  margin: 0 6px 0 0;
  transform: none;
}

.msb-actions .msb-btn-outline {
  padding: 10px 22px;
}

/*====================
3. Intro
======================*/
.msb-intro {
  padding: 60px 0 60px;
}

.msb-intro__media {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 80px 60px 0;
}

.msb-intro__media::before {
  content: "";
  position: absolute;
  left: -22px;
  bottom: 30px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--msb-lime) 2.5px, transparent 3px) 0 0 / 18px 18px;
  opacity: 0.55;
}

.msb-arch {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  box-shadow: var(--msb-shadow-lg);
}

.msb-arch img,
.msb-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--msb-ease);
}

.msb-intro__media:hover .msb-arch img {
  transform: scale(1.08);
}

.msb-circle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 52%;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 8px solid var(--msb-white);
  border-radius: 50%;
  box-shadow: var(--msb-shadow-lg);
  animation: msbFloat 6s ease-in-out infinite;
}

.msb-intro__media:hover .msb-circle img {
  transform: scale(1.12) rotate(3deg);
}

.msb-badge {
  position: absolute;
  top: 40px;
  left: -16px;
  z-index: 3;
  max-width: 172px;
  padding: 16px 20px;
  text-align: center;
  color: var(--msb-white);
  background: var(--msb-lime);
  border-radius: 16px;
  box-shadow: var(--msb-shadow-lg);
  animation: msbFloat 7s ease-in-out -2s infinite;
}

.msb-badge__icon {
  display: block;
  font-size: 22px;
}

.msb-badge__number {
  margin: 2px 0;
  font-family: var(--heading-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.msb-badge__label {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

/*====================
4. Marquee band
======================*/
.msb-marquee {
  overflow: hidden;
  padding: 16px 0;
  background: var(--msb-green);
}

.msb-marquee__track {
  display: flex;
  width: max-content;
  animation: msbMarquee 32s linear infinite;
}

.msb-marquee:hover .msb-marquee__track {
  animation-play-state: paused;
}

.msb-marquee__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msb-marquee__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 48px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--msb-white);
}

.msb-marquee__item i {
  color: var(--msb-lime);
  animation: msbSpin 6s linear infinite;
}

/*====================
5. Types of scrap
======================*/
.msb-type {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--msb-white);
  border-radius: var(--msb-radius);
  box-shadow: var(--msb-shadow);
  transition: transform 0.45s var(--msb-ease), box-shadow 0.45s var(--msb-ease);
}

.msb-type::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--msb-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--msb-ease);
}

.msb-type:hover {
  transform: translateY(-10px);
  box-shadow: var(--msb-shadow-lg);
}

.msb-type:hover::after {
  transform: scaleX(1);
}

.msb-type__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.msb-type__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 78, 47, 0.6), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--msb-ease);
}

.msb-type__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--msb-ease);
}

.msb-type:hover .msb-type__media img {
  transform: scale(1.1);
}

.msb-type:hover .msb-type__media::after {
  opacity: 1;
}

.msb-type__body {
  position: relative;
  padding: 46px 22px 28px;
}

.msb-type__icon {
  position: absolute;
  top: -32px;
  left: 22px;
  width: 60px;
  height: 60px;
  flex-basis: 60px;
  font-size: 22px;
}

.msb-type:hover .msb-type__icon {
  background: var(--msb-lime);
  transform: rotateY(360deg);
}

.msb-type__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--msb-green);
  transition: color 0.3s;
}

.msb-type:hover .msb-type__title {
  color: var(--msb-lime);
}

.msb-type__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--msb-text);
}

.msb-type__text::first-letter,
.msb-factor__text::first-letter,
.msb-step__text::first-letter {
  text-transform: uppercase;
}

.msb-note {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 56px;
  padding: 22px 28px;
  background: var(--msb-tint);
  border-left: 5px solid var(--msb-lime);
  border-radius: 14px;
}

.msb-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  font-size: 20px;
  color: var(--msb-white);
  background: var(--msb-lime);
  border-radius: 50%;
  animation: msbPulse 2.4s ease-out infinite;
}

.msb-note__text {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--msb-green);
}

/*====================
6. Heavy iron
======================*/
.msb-heavy::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -130px;
  width: 420px;
  height: 420px;
  background: rgba(119, 175, 18, 0.12);
  clip-path: var(--msb-hex);
  animation: msbSpin 40s linear infinite;
}

.msb-frame {
  position: relative;
  margin: 0 0 0 20px;
}

.msb-frame::before {
  content: "";
  position: absolute;
  inset: 20px auto auto -20px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--msb-lime);
  border-radius: var(--msb-radius);
  transition: transform 0.6s var(--msb-ease);
}

.msb-frame__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--msb-radius);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  transition: transform 0.6s var(--msb-ease);
}

.msb-frame__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--msb-ease);
}

.msb-frame:hover::before {
  transform: translate(-8px, 8px);
}

.msb-frame:hover .msb-frame__photo {
  transform: translate(6px, -6px);
}

.msb-frame:hover .msb-frame__photo img {
  transform: scale(1.06);
}

.msb-frame__badge {
  position: absolute;
  right: -20px;
  bottom: -24px;
  z-index: 2;
  width: 84px;
  height: 84px;
  flex-basis: 84px;
  font-size: 30px;
  animation: msbPulse 2.6s ease-out infinite;
}

.msb-heavy__content,
.msb-machine__content {
  position: relative;
}

/*====================
7. Machinery
======================*/
.msb-portrait {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  padding: 26px;
}

.msb-portrait__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118%;
  aspect-ratio: 1;
  border: 2px dashed var(--msb-lime);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: msbSpinCenter 34s linear infinite;
}

.msb-portrait__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 999px 999px 22px 22px;
  box-shadow: var(--msb-shadow-lg);
}

.msb-portrait__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--msb-ease);
}

.msb-portrait:hover .msb-portrait__photo img {
  transform: scale(1.08);
}

.msb-portrait__gear {
  position: absolute;
  right: -6px;
  bottom: 60px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px;
}

.msb-portrait__gear i {
  animation: msbSpin 8s linear infinite;
}

/*====================
8. Industrial hubs
======================*/
.msb-hub {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--msb-white);
  border-radius: var(--msb-radius);
  box-shadow: var(--msb-shadow);
  transition: transform 0.45s var(--msb-ease), box-shadow 0.45s var(--msb-ease);
}

.msb-hub:hover {
  transform: translateY(-10px);
  box-shadow: var(--msb-shadow-lg);
}

.msb-hub__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.msb-hub__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--msb-ease);
}

.msb-hub:hover .msb-hub__media img {
  transform: scale(1.08);
}

.msb-hub__body {
  position: relative;
  flex: 1;
  padding: 46px 30px 32px;
  border-bottom: 5px solid var(--msb-lime);
}

.msb-hub__pin {
  position: absolute;
  top: -34px;
  right: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--msb-lime);
  box-shadow: none;
}

.msb-hub:hover .msb-hub__pin {
  background: var(--msb-green);
  animation: msbBounce 0.9s ease;
}

.msb-hub__title {
  margin: 0 0 14px;
  font-family: var(--heading-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--msb-green);
}

/*====================
9. Price factors
======================*/
.msb-price__media {
  position: relative;
  margin: 30px 0 0;
  overflow: hidden;
  border-radius: var(--msb-radius);
  box-shadow: var(--msb-shadow-lg);
}

.msb-price__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s var(--msb-ease);
}

.msb-price__media:hover img {
  transform: scale(1.08);
}

.msb-price__caption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--msb-white);
  background: rgba(2, 78, 47, 0.93);
  border-radius: 14px;
  transition: transform 0.5s var(--msb-ease);
}

.msb-price__media:hover .msb-price__caption {
  transform: translateY(-6px);
}

.msb-price__caption-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  background: var(--msb-lime);
  border-radius: 50%;
}

.msb-price__caption-text {
  font-size: 14.5px;
  line-height: 1.5;
}

.msb-factors {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.msb-factor {
  position: relative;
  height: 100%;
  padding: 30px 26px;
  overflow: hidden;
  background: var(--msb-white);
  border: 1px solid rgba(2, 78, 47, 0.08);
  border-radius: 16px;
  box-shadow: var(--msb-shadow);
  transition: transform 0.45s var(--msb-ease), box-shadow 0.45s var(--msb-ease), border-color 0.3s;
}

.msb-factor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--msb-lime);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--msb-ease);
}

.msb-factor:hover {
  transform: translateY(-8px);
  border-color: var(--msb-lime);
  box-shadow: var(--msb-shadow-lg);
}

.msb-factor:hover::before {
  transform: scaleY(1);
}

.msb-factor:hover .msb-factor__icon {
  background: var(--msb-lime);
  transform: rotate(60deg);
}

.msb-factor:hover .msb-factor__icon i {
  transform: rotate(-60deg);
}

.msb-factor__icon i {
  transition: transform 0.6s var(--msb-ease);
}

.msb-factor__icon {
  margin-bottom: 18px;
}

.msb-factor__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 21px;
  font-weight: 600;
  color: var(--msb-green);
}

.msb-factor__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--msb-text);
}

/*====================
10. Collection process
======================*/
.msb-steps {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.msb-step {
  position: relative;
  padding: 0 6px;
  text-align: center;
}

.msb-step::after {
  content: "";
  position: absolute;
  top: 46px;
  left: calc(50% + 56px);
  right: calc(30px - 50%);
  border-top: 2px dashed var(--msb-lime);
}

.msb-steps>li:last-child .msb-step::after {
  display: none;
}

.msb-step__node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 20px;
  font-size: 30px;
  color: var(--msb-green);
  background: var(--msb-white);
  border: 3px solid var(--msb-lime);
  border-radius: 50%;
  box-shadow: var(--msb-shadow);
  transition: transform 0.5s var(--msb-ease), background 0.4s, color 0.4s;
}

.msb-step__no {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--msb-white);
  background: var(--msb-green);
  border-radius: 50%;
}

.msb-step:hover .msb-step__node {
  color: var(--msb-white);
  background: var(--msb-lime);
  transform: translateY(-8px) scale(1.08);
}

.msb-step:hover .msb-step__node i {
  animation: msbBounce 0.9s ease;
}

.msb-step__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--msb-green);
}

.msb-step__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--msb-text);
}

/*====================
11. Why choose us
======================*/
/* .msb-why {
  background: var(--msb-green) radial-gradient(circle at 12% 18%, rgba(119, 175, 18, 0.16), transparent 42%),
    radial-gradient(circle at 90% 88%, rgba(119, 175, 18, 0.14), transparent 40%);
} */

.msb-why__grid {
  counter-reset: msbWhy;
}

.msb-why-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 26px 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  counter-increment: msbWhy;
  transition: transform 0.45s var(--msb-ease), background 0.4s, border-color 0.4s;
}

/* .msb-why-card::after {
  content: counter(msbWhy, decimal-leading-zero);
  position: absolute;
  right: 16px;
  bottom: -8px;
  font-family: var(--heading-font);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transition: color 0.4s, transform 0.5s var(--msb-ease);
} */

.msb-why-card:hover {
  transform: translateY(-8px);
  background: rgba(119, 175, 18, 0.2);
  border-color: var(--msb-lime);
}

.msb-why-card:hover::after {
  color: rgba(255, 255, 255, 0.16);
  transform: translateY(-6px);
}

.msb-why-card:hover .msb-why-card__icon {
  background: var(--msb-white);
  color: var(--msb-green);
  transform: rotate(60deg);
}

.msb-why-card__icon i {
  transition: transform 0.6s var(--msb-ease);
}

.msb-why-card:hover .msb-why-card__icon i {
  transform: rotate(-60deg);
}

.msb-why-card__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--msb-white);
}

/*====================
12. Areas we serve
======================*/
.msb-areas__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.msb-area {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 16px;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--msb-green);
  background: var(--msb-light);
  border: 1px solid rgba(2, 78, 47, 0.1);
  border-radius: 12px;
  cursor: default;
  transition: transform 0.4s var(--msb-ease), background 0.3s, color 0.3s, box-shadow 0.4s;
}

.msb-area i {
  color: var(--msb-lime);
  transition: color 0.3s, transform 0.4s var(--msb-ease);
}

.msb-area:hover {
  color: var(--msb-white);
  background: var(--msb-green);
  transform: translateY(-5px);
  box-shadow: var(--msb-shadow);
}

.msb-area:hover i {
  color: var(--msb-white);
  animation: msbBounce 0.8s ease;
}

/*====================
13. Environment banner
======================*/
.msb-eco {
  position: relative;
  padding: 90px 0 150px;
  color: var(--msb-white);
  background: url("../images/metal-scrap/recycling-bg.webp") center / cover no-repeat;
  isolation: isolate;
}

.msb-eco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, 0.96) 30%, rgba(2, 78, 47, 0.72) 100%);
}

.msb-eco__visual {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.msb-eco__ring {
  position: absolute;
  border-radius: 50%;
}

.msb-eco__ring--outer {
  inset: 0;
  border: 2px dashed rgba(255, 255, 255, 0.45);
  animation: msbSpin 26s linear infinite;
}

.msb-eco__ring--inner {
  inset: 16%;
  border: 2px solid rgba(119, 175, 18, 0.75);
  animation: msbSpin 18s linear infinite reverse;
}

.msb-eco__core {
  position: absolute;
  inset: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: var(--msb-white);
  background: var(--msb-lime);
  border-radius: 50%;
  animation: msbPulse 2.8s ease-out infinite;
}

.msb-eco__chip {
  position: absolute;
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  font-size: 20px;
  animation: msbFloat 6s ease-in-out infinite;
}

.msb-eco__chip--1 {
  top: -8px;
  left: 42%;
  background: var(--msb-lime);
}

.msb-eco__chip--2 {
  right: -6px;
  bottom: 22%;
  background: var(--msb-white);
  color: var(--msb-green);
  animation-delay: -2s;
}

.msb-eco__chip--3 {
  bottom: 2%;
  left: 6%;
  background: var(--msb-lime);
  animation-delay: -4s;
}

/*====================
14. Call to action
======================*/
.msb-cta {
  position: relative;
  z-index: 2;
  margin-top: -76px;
}

.msb-cta__panel {
  position: relative;
  padding: 44px 48px;
  overflow: hidden;
  background: var(--msb-white);
  border-bottom: 6px solid var(--msb-lime);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(2, 78, 47, 0.22);
}

.msb-cta__panel::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 210px;
  height: 210px;
  background: rgba(119, 175, 18, 0.12);
  clip-path: var(--msb-hex);
  animation: msbSpin 30s linear infinite;
}

.msb-cta__panel .row {
  position: relative;
}

.msb-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msb-cta__actions .theme-btn {
  padding: 12px 20px;
}

.msb-cta__actions .theme-btn i {
  margin: 0 6px 0 0;
  transform: none;
}

.msb-cta__actions .msb-btn-outline {
  padding: 10px 16px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/*====================
15. FAQ accordion
======================*/
.msb-faq__media {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px;
}

.msb-faq__media::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--msb-lime);
  border-radius: 26px;
  transition: transform 0.6s var(--msb-ease);
}

.msb-faq__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--msb-shadow-lg);
}

.msb-faq__photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s var(--msb-ease);
}

.msb-faq__media:hover::before {
  transform: translate(-8px, 8px);
}

.msb-faq__media:hover .msb-faq__photo img {
  transform: scale(1.07);
}

.msb-faq__badge {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  background: var(--msb-green);
  animation: msbFloat 6s ease-in-out infinite;
}

.msb-accordion__item {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--msb-white);
  border: 1px solid rgba(2, 78, 47, 0.12);
  border-radius: 14px;
  box-shadow: var(--msb-shadow);
  transition: border-color 0.3s, box-shadow 0.4s;
}

.msb-accordion__item:hover {
  border-color: var(--msb-lime);
}

.msb-accordion__head {
  margin: 0;
}

.msb-accordion__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 64px 20px 24px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--msb-white);
  background: var(--msb-green);
  border: 0;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.msb-accordion__btn.collapsed {
  color: var(--msb-green);
  background: var(--msb-white);
}

.msb-accordion__btn::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 22px;
  line-height: 1;
  color: var(--msb-white);
  background: var(--msb-lime);
  border-radius: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.4s var(--msb-ease);
}

.msb-accordion__btn.collapsed::after {
  transform: translateY(-50%) rotate(0);
}

.msb-accordion__btn.collapsed:hover {
  color: var(--msb-lime);
}

.msb-accordion__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--msb-text);
}

/*====================
16. Keyframes
======================*/
@keyframes msbSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes msbSpinCenter {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes msbFloat {
  50% {
    transform: translateY(-14px);
  }
}

@keyframes msbPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0);
  }
}

@keyframes msbBounce {
  40% {
    transform: translateY(-9px);
  }

  70% {
    transform: translateY(2px);
  }
}

@keyframes msbMarquee {
  to {
    transform: translateX(-50%);
  }
}

/*====================
17. Responsive
======================*/
@media (max-width: 1199.98px) {
  .msb-step::after {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .msb-section {
    padding: 64px 0;
  }

  /* the About banner is cut at an angle on tablet, pull the next block under it */
  .msb-intro {
    margin-top: -36px;
    padding-top: 84px;
  }

  .msb-head {
    margin-bottom: 36px;
  }

  .msb-text {
            text-align: justify;
  }

  .msb-frame {
    margin-left: 14px;
  }

  .msb-eco {
    padding: 70px 0 130px;
  }

  .msb-cta {
    margin-top: -70px;
  }

  .msb-cta__panel {
    padding: 36px 30px;
  }

  .msb-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .msb-section {
    padding: 52px 0;
  }

  .msb-intro__media {
    padding: 0 44px 44px 0;
  }

  .msb-badge {
    top: 24px;
    left: -6px;
    max-width: 138px;
    padding: 12px 14px;
  }

  .msb-badge__number {
    font-size: 28px;
  }

  .msb-badge__label {
    font-size: 12px;
  }

  .msb-actions .theme-btn,
  .msb-actions .msb-btn-outline,
  .msb-cta__actions .theme-btn,
  .msb-cta__actions .msb-btn-outline {
    width: 100%;
  }

  .msb-marquee__item {
    font-size: 16px;
  }

  .msb-note {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .msb-frame {
    margin-left: 10px;
  }

  .msb-frame::before {
    inset: 14px auto auto -10px;
  }

  .msb-frame__badge {
    right: -6px;
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    font-size: 24px;
  }

  .msb-portrait {
    padding: 16px;
  }

  .msb-portrait__ring {
    width: 112%;
  }

  .msb-hub__body {
    padding: 42px 22px 26px;
  }

  .msb-hub__pin {
    right: 22px;
  }

  .msb-hub__title {
    font-size: 21px;
  }

  .msb-factor {
    padding: 26px 22px;
  }

  .msb-why-card {
    padding: 22px 20px;
  }

  .msb-eco {
    padding: 60px 0 120px;
  }

  .msb-eco__visual {
    width: min(100%, 260px);
  }

  .msb-cta__panel {
    padding: 30px 22px;
  }

  .msb-faq__media {
    padding: 0 0 20px 20px;
  }

  .msb-faq__badge {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px;
  }

  .msb-accordion__btn {
    padding: 18px 58px 18px 18px;
    font-size: 16.5px;
  }

  .msb-accordion__body {
    padding: 16px 18px 20px;
  }
}

/*====================
18. Reduced motion
======================*/
@media (prefers-reduced-motion: reduce) {

  .msb *,
  .msb *::before,
  .msb *::after {
    animation: none !important;
    transition: none !important;
  }
}

.msb-section.msb-hubs .msb-hub__body .msb-hub__title {
  margin: 0 0 14px;
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--msb-green);
}

.msb-factor__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--msb-green);
}


/*=======================================================
COPPER SCRAP BUYERS PAGE (.cpb)  File: copper-scrap-buyers-chennai.php
Banner re-uses About page .abp-hero. Colours = site tokens:
--theme-color #77af12 (lime), --theme-color2 #024e2f (green),
--theme-bg-light #F6F6F6, --body-text-color #757F95
Note: wow scroll animation sits on the column, hover on the inner block.
=======================================================*/
.cpb {
  --g: var(--theme-color2, #024e2f);
  --l: var(--theme-color, #77af12);
  --soft: var(--theme-bg-light, #F6F6F6);
  --tx: var(--body-text-color, #757F95);
  --w: #fff;
  --r: 20px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --sh: 0 12px 40px rgba(2, 78, 47, .10);
  --shl: 0 26px 60px rgba(2, 78, 47, .22);
  --e: cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
  overflow: clip
}

/* helpers */
.cpb-sec {
  position: relative;
  padding: 60px 0
}

.cpb-sec--soft {
  background: var(--soft)
}

.cpb-sec--dark {
  background: var(--g);
  color: var(--w)
}

.cpb-head {
  margin-bottom: 50px
}

.cpb-head .cpb-p {
  text-align: center;
  margin: 0
}

.cpb-h {
  position: relative;
  margin: 0 0 22px;
  padding-left: 18px;
  font: 700 28px/1.35 var(--heading-font);
  letter-spacing: -.01em;
  color: var(--g)
}

.cpb-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 5px;
  border-radius: 5px;
  background: var(--l);
  transition: top .4s, bottom .4s, width .4s
}

.cpb-h:hover::before {
  top: 0;
  bottom: 0;
  width: 9px
}

.cpb-h--sub {
  font-size: 25px
}

.cpb-h--lt {
  color: var(--w)
}

.cpb-h--c {
  padding: 0 0 16px;
  text-align: center
}

.cpb-h--c::before,
.cpb-h--c:hover::before {
  top: auto;
  bottom: 0;
  left: 50%;
  width: 64px;
  height: 4px;
  transform: translateX(-50%)
}

.cpb-h--c:hover::before {
  width: 120px
}

.cpb-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tx);
  text-align: justify
}

.cpb-p:last-child {
  margin-bottom: 0
}

.cpb-p--lt {
  color: rgba(255, 255, 255, .86)
}

.cpb-p--lead {
  font-size: 16px
}

.cpb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--w);
  background: var(--g);
  clip-path: var(--hex);
  transition: background .4s, transform .6s var(--e)
}

.cpb-hex--l {
  background: var(--l)
}

.cpb-btns,
.cpb-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.cpb-btns {
  margin-top: 28px
}

.cpb-btns .theme-btn,
.cpb-cta__btns .theme-btn {
  padding: 12px 22px
}

.cpb-btns .theme-btn i,
.cpb-cta__btns .theme-btn i {
  margin: 0 6px 0 0;
  transform: none
}

.cpb-ghost {
  display: inline-block;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--g);
  border: 2px solid var(--g);
  border-radius: 10px;
  overflow-wrap: anywhere;
  transition: var(--transition2)
}

.cpb-ghost i {
  margin-right: 6px;
  transition: transform .4s var(--e)
}

.cpb-ghost:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.cpb-ghost:hover i {
  transform: rotate(-12deg) scale(1.15)
}

.cpb-ghost--w {
  color: var(--w);
  border-color: var(--w)
}

.cpb-ghost--w:hover {
  color: var(--g);
  background: var(--w)
}

.cpb-link {
  font-weight: 600;
  color: var(--w);
  border-bottom: 2px solid var(--l);
  overflow-wrap: anywhere;
  transition: color .3s
}

.cpb-link:hover {
  color: var(--l)
}

/* intro: tilted photo stack */
.cpb-intro {
  padding: 60px 0 60px
}

.cpb-stack {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 0 70px
}

.cpb-stack figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl);
  transition: transform .6s var(--e)
}

.cpb-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cpb-stack__a {
  width: 80%;
  aspect-ratio: 4/5;
  border-radius: 28px;
  transform: rotate(-4deg)
}

.cpb-stack__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  aspect-ratio: 4/3;
  border: 8px solid var(--w);
  border-radius: 22px;
  transform: rotate(5deg);
  animation: cpbFloat 6s ease-in-out infinite
}

.cpb-stack:hover .cpb-stack__a,
.cpb-stack:hover .cpb-stack__b {
  transform: rotate(0)
}

.cpb-stack:hover img {
  transform: scale(1.08)
}

.cpb-seal {
  position: absolute;
  top: 6px;
  right: -4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  color: var(--w);
  text-align: center;
  background: var(--l);
  clip-path: var(--hex);
  animation: cpbFloat 7s ease-in-out -2s infinite
}

.cpb-seal b {
  font: 700 30px/1 var(--heading-font)
}

.cpb-seal span {
  max-width: 80px;
  font-size: 11px;
  line-height: 1.25
}

/* ribbon */
.cpb-ribbon {
  overflow: hidden;
  margin: 12px -12px;
  padding: 16px 0;
  background: var(--l);
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 30px rgba(2, 78, 47, .15)
}

.cpb-ribbon__track {
  display: flex;
  width: max-content;
  animation: cpbMarq 30s linear infinite
}

.cpb-ribbon:hover .cpb-ribbon__track {
  animation-play-state: paused
}

.cpb-ribbon__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none
}

.cpb-ribbon__list li {
  padding-right: 48px;
  font: 600 18px var(--heading-font);
  white-space: nowrap;
  color: var(--g)
}

.cpb-ribbon__list i {
  margin-right: 10px;
  color: var(--w);
  animation: cpbBounce 2.4s ease infinite
}

/* tiles: slide-up green fill */
.cpb-tile {
  position: relative;
  height: 100%;
  padding: 34px 24px 28px;
  overflow: hidden;
  background: var(--w);
  border-radius: var(--r);
  box-shadow: var(--sh);
  isolation: isolate;
  transition: transform .45s var(--e), box-shadow .45s
}

.cpb-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g);
  transform: translateY(101%);
  transition: transform .55s var(--e)
}

.cpb-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.cpb-tile:hover::before {
  transform: none
}

.cpb-tile__no {
  position: absolute;
  top: 10px;
  right: 18px;
  font: 700 56px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 78, 47, .18);
  transition: -webkit-text-stroke-color .4s, transform .5s var(--e)
}

.cpb-tile:hover .cpb-tile__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4);
  transform: translateY(6px)
}

.cpb-tile__ico {
  margin-bottom: 20px
}

.cpb-tile:hover .cpb-tile__ico {
  background: var(--l);
  transform: rotateY(360deg)
}

.cpb-tile__t {
  margin: 0 0 8px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.cpb-tile__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.cpb-tile__p::first-letter {
  text-transform: uppercase
}

.cpb-tile:hover .cpb-tile__t {
  color: var(--w)
}

.cpb-tile:hover .cpb-tile__p {
  color: rgba(255, 255, 255, .88)
}

/* brass pill */
.cpb-brass {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 10px 36px 10px 10px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: 999px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s
}

.cpb-brass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.cpb-brass__img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--l)
}

.cpb-brass__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cpb-brass:hover .cpb-brass__img img {
  transform: scale(1.15) rotate(4deg)
}

.cpb-brass__ico {
  animation: cpbPulse 2.6s ease-out infinite
}

.cpb-brass__p {
  margin: 0;
  font: 500 20px/1.55 var(--heading-font);
  color: var(--g)
}

/* shared photo */
.cpb-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shl)
}

.cpb-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cpb-shot:hover img {
  transform: scale(1.08)
}

.cpb-shot--tall img {
  aspect-ratio: 4/5
}

.cpb-shot__cap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--w);
  background: rgba(2, 78, 47, .93);
  border-radius: 14px;
  transition: transform .5s var(--e)
}

.cpb-shot:hover .cpb-shot__cap {
  transform: translateY(-6px)
}

.cpb-shot__ico {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  background: var(--l);
  border-radius: 50%
}

/* wire: overlapping card */
.cpb-card {
  position: relative;
  z-index: 2;
  padding: 46px 38px 38px;
  background: var(--w);
  border-top: 6px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.cpb-card:hover {
  transform: translateY(-8px)
}

.cpb-card__ico {
  position: absolute;
  top: -36px;
  right: 28px;
  animation: cpbPulse 2.6s ease-out infinite
}

.cpb-card:hover .cpb-card__ico {
  background: var(--g);
  transform: rotate(60deg)
}

/* industrial: cut-corner image */
.cpb-ind::before {
  content: "";
  position: absolute;
  top: -130px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: rgba(119, 175, 18, .12);
  clip-path: var(--hex);
  animation: cpbSpin 40s linear infinite
}

.cpb-ind__txt {
  position: relative;
  padding-left: 28px;
  border-left: 4px solid var(--l)
}

.cpb-ind__txt .cpb-h {
  padding-left: 0
}

.cpb-ind__txt .cpb-h::before {
  display: none
}

.cpb-ind__wrap {
  position: relative;
  padding: 0 0 26px 26px
}

.cpb-ind__wrap::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  border: 3px solid var(--l);
  border-radius: var(--r);
  transition: transform .6s var(--e)
}

.cpb-ind__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%)
}

.cpb-ind__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cpb-ind__wrap:hover .cpb-ind__img img {
  transform: scale(1.1) rotate(1deg)
}

.cpb-ind__wrap:hover::before {
  transform: translate(-8px, 8px)
}

.cpb-ind__ico {
  position: absolute;
  right: -10px;
  top: -24px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  animation: cpbFloat 6s ease-in-out infinite
}

/* Ambattur: photo background + glass card */
.cpb-hub {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--g)
}

.cpb-hub__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s linear
}

.cpb-hub:hover .cpb-hub__bg {
  transform: scale(1.1)
}

.cpb-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, .92) 35%, rgba(2, 78, 47, .25))
}

.cpb-hub__card {
  position: relative;
  padding: 48px 38px 38px;
  background: rgba(255, 255, 255, .96);
  border-left: 8px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.cpb-hub__card:hover {
  transform: translateX(10px)
}

.cpb-hub__pin {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--l)
}

.cpb-hub__card:hover .cpb-hub__pin {
  background: var(--g);
  animation: cpbBounce .9s ease
}

/* machinery: morphing blob */
.cpb-blob {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px
}

.cpb-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--l);
  border-radius: 50%;
  animation: cpbSpin 30s linear infinite
}

.cpb-blob__img {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 58% 42% 55% 45%/50% 55% 45% 50%;
  box-shadow: var(--shl);
  animation: cpbBlob 10s ease-in-out infinite
}

.cpb-blob__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cpb-blob:hover .cpb-blob__img img {
  transform: scale(1.1)
}

.cpb-blob__ico {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px
}

.cpb-blob__ico i {
  animation: cpbSpin 8s linear infinite
}

/* price factors */
.cpb-factors {
  margin: 0;
  padding: 0;
  list-style: none
}

.cpb-factor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.cpb-factor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--l);
  transition: width .6s var(--e)
}

.cpb-factor:hover {
  transform: translateX(10px);
  border-color: var(--l);
  box-shadow: var(--shl)
}

.cpb-factor:hover::after {
  width: 100%
}

.cpb-factor:hover .cpb-factor__ico {
  background: var(--l);
  transform: rotate(60deg)
}

.cpb-factor__ico i {
  transition: transform .6s var(--e)
}

.cpb-factor:hover .cpb-factor__ico i {
  transform: rotate(-60deg)
}

.cpb-factor__t {
  margin: 0 0 6px;
  font: 700 18px var(--heading-font);
  color: var(--g)
}

.cpb-factor__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tx)
}

.cpb-factor__p::first-letter {
  text-transform: uppercase
}

/* tips: sticky notes */
.cpb-notes {
  margin: 0;
  padding: 0;
  list-style: none
}

.cpb-note {
  position: relative;
  height: 100%;
  padding: 34px 22px 34px;
  text-align: center;
  background: var(--soft);
  border-radius: 8px 8px 30px 8px;
  box-shadow: var(--sh);
  transform: rotate(-2deg);
  transition: transform .45s var(--e), box-shadow .45s, background .4s
}

.cpb-notes>li:nth-child(even) .cpb-note {
  transform: rotate(2deg)
}

.cpb-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--w) 50%, var(--l) 50%);
  border-top-left-radius: 12px
}

.cpb-note:hover,
.cpb-notes>li:nth-child(even) .cpb-note:hover {
  transform: rotate(0) translateY(-10px);
  background: var(--w);
  box-shadow: var(--shl)
}

.cpb-note__ico {
  margin-bottom: 16px
}

.cpb-note:hover .cpb-note__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.cpb-note__ico i {
  transition: transform .6s var(--e)
}

.cpb-note:hover .cpb-note__ico i {
  transform: rotate(-60deg)
}

.cpb-note__p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--g)
}

/* process: diamond nodes on a moving dashed rail */
.cpb-rail {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.cpb-stage {
  text-align: center
}

.cpb-node {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 12px 0 34px;
  font-size: 28px;
  color: var(--g);
  background: var(--w);
  border: 3px solid var(--l);
  border-radius: 22px;
  box-shadow: var(--sh);
  transform: rotate(45deg);
  transition: transform .6s var(--e), background .4s, color .4s
}

.cpb-node i {
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.cpb-node b {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 600 14px var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.cpb-stage:hover .cpb-node {
  color: var(--w);
  background: var(--l);
  transform: rotate(225deg) scale(1.1)
}

.cpb-stage:hover .cpb-node i,
.cpb-stage:hover .cpb-node b {
  transform: rotate(-225deg)
}

.cpb-stage__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.cpb-stage:hover .cpb-stage__p {
  color: var(--g)
}

/* why: fill-sweep rows */
.cpb-perks {
  margin: 0;
  padding: 0;
  list-style: none
}

.cpb-perk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 24px 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  isolation: isolate;
  transition: transform .45s var(--e)
}

.cpb-perk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e)
}

.cpb-perk:hover {
  transform: translateY(-6px)
}

.cpb-perk:hover::before {
  transform: none
}

.cpb-perk:hover .cpb-perk__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.cpb-perk__ico i {
  transition: transform .6s var(--e)
}

.cpb-perk:hover .cpb-perk__ico i {
  transform: rotate(-60deg)
}

.cpb-perk__p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--w);
  transition: color .3s
}

.cpb-perk:hover .cpb-perk__p {
  color: var(--g)
}

/* areas: radar */
.cpb-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto
}

.cpb-radar__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--l);
  border-radius: 50%;
  opacity: 0;
  animation: cpbRipple 3.6s ease-out infinite
}

.cpb-radar__ring:nth-child(2) {
  animation-delay: 1.2s
}

.cpb-radar__ring:nth-child(3) {
  animation-delay: 2.4s
}

.cpb-radar__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  font-size: 34px;
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(2, 78, 47, .12)
}

.cpb-radar__chip {
  position: absolute;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 18px;
  background: var(--l);
  animation: cpbFloat 6s ease-in-out infinite
}

.cpb-radar__chip--1 {
  top: 0;
  left: 44%
}

.cpb-radar__chip--2 {
  right: 2%;
  bottom: 22%;
  animation-delay: -2s
}

.cpb-radar__chip--3 {
  bottom: 6%;
  left: 8%;
  animation-delay: -4s
}

.cpb-area {
  padding: 40px 44px;
  background: var(--soft);
  border-bottom: 6px solid var(--l);
  border-radius: var(--r);
  transition: transform .45s var(--e), box-shadow .45s
}

.cpb-area:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.cpb-place {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 14px;
  font: 500 15px var(--heading-font);
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .14);
  border-radius: 30px;
  transition: background .3s, color .3s, transform .35s var(--e)
}

.cpb-place:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px)
}

/* cta */
.cpb-cta {
  padding: 10px 0 70px
}

.cpb-cta__box {
  position: relative;
  padding: 50px 48px;
  overflow: hidden;
  color: var(--w);
  background: var(--g) radial-gradient(circle at 100% 0, rgba(119, 175, 18, .45), transparent 55%);
  border-radius: 28px;
  box-shadow: var(--shl)
}

.cpb-cta__box::before {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, .07);
  clip-path: var(--hex);
  animation: cpbSpin 30s linear infinite
}

.cpb-cta__box .row {
  position: relative
}

.cpb-cta__btns {
  flex-direction: column
}

.cpb-cta__box .cpb-h::before {
  background: var(--l)
}

/* faq */
.cpb-photo {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px
}

.cpb-photo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--l);
  border-radius: 26px;
  transition: transform .6s var(--e)
}

.cpb-photo__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--shl)
}

.cpb-photo__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--e)
}

.cpb-photo:hover::before {
  transform: translate(-8px, 8px)
}

.cpb-photo:hover img {
  transform: scale(1.07)
}

.cpb-photo__ico {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  animation: cpbFloat 6s ease-in-out infinite
}

.cpb-accordion {
  counter-reset: cpbq
}

.cpb-qa {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .12);
  border-radius: 14px;
  box-shadow: var(--sh);
  counter-increment: cpbq;
  transition: border-color .3s, transform .4s var(--e)
}

.cpb-qa:hover {
  border-color: var(--l);
  transform: translateX(6px)
}

.cpb-qa__head {
  margin: 0
}

.cpb-qa__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  font: 600 18px/1.4 var(--heading-font);
  text-align: left;
  color: var(--w);
  background: var(--g);
  border: 0;
  cursor: pointer;
  transition: background .3s, color .3s
}

.cpb-qa__btn::before {
  content: counter(cpbq, decimal-leading-zero);
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  height: 38px;
  font-size: 14px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%
}

.cpb-qa__btn::after {
  content: "+";
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  transform: rotate(45deg);
  transition: transform .4s var(--e)
}

.cpb-qa__btn.collapsed {
  color: var(--g);
  background: var(--w)
}

.cpb-qa__btn.collapsed::after {
  transform: none
}

.cpb-qa__btn.collapsed:hover {
  color: var(--l)
}

.cpb-qa__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tx)
}

/* keyframes */
@keyframes cpbSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes cpbFloat {
  50% {
    translate: 0 -14px
  }
}

@keyframes cpbMarq {
  to {
    transform: translateX(-50%)
  }
}

@keyframes cpbBounce {
  40% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(2px)
  }
}

@keyframes cpbPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0)
  }
}

@keyframes cpbRipple {
  0% {
    transform: scale(.4);
    opacity: .9
  }

  100% {
    transform: scale(1);
    opacity: 0
  }
}

@keyframes cpbBlob {
  50% {
    border-radius: 42% 58% 45% 55%/55% 45% 55% 45%
  }
}

@keyframes cpbDash {
  to {
    background-position: 22px 0
  }
}

/* responsive */
@media (min-width:1200px) {
  .cpb-card {
    margin-left: -110px
  }

  .cpb-rail::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--l) 0 12px, transparent 12px 22px);
    animation: cpbDash 1s linear infinite
  }
}

@media (min-width:992px) and (max-width:1199.98px) {
  .cpb-card {
    margin-left: -70px;
    padding: 40px 28px 30px
  }
}

@media (max-width:991.98px) {
  .cpb-sec {
    padding: 64px 0
  }

  .cpb-intro {
    margin-top: -36px;
    padding-top: 84px
  }

  .cpb-head {
    margin-bottom: 36px
  }

  .cpb-p {
    text-align: justify;
  }

  .cpb-card {
    margin: -50px 18px 0
  }

  .cpb-hub {
    padding: 80px 0
  }

  .cpb-cta__btns {
    flex-direction: row
  }

  .cpb-area {
    padding: 32px 28px
  }
}

@media (max-width:767.98px) {
  .cpb-brass {
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
    border-radius: 26px
  }
}

@media (max-width:575.98px) {
  .cpb-sec {
    padding: 52px 0
  }

  .cpb-h {
    font-size: 23px
  }

  .cpb-h--sub {
    font-size: 17px
  }

  .cpb-stack {
    padding-bottom: 44px
  }

  .cpb-seal {
    width: 108px;
    height: 108px;
    right: 0
  }

  .cpb-seal b {
    font-size: 24px
  }

  .cpb-seal span {
    font-size: 10px
  }

  .cpb-btns .theme-btn,
  .cpb-btns .cpb-ghost,
  .cpb-cta__btns .theme-btn,
  .cpb-cta__btns .cpb-ghost {
    width: 100%
  }

  .cpb-ribbon__list li {
    font-size: 16px
  }

  .cpb-brass__p {
    font-size: 16px
  }

  .cpb-card {
    margin: -40px 8px 0;
    padding: 44px 22px 28px
  }

  .cpb-ind__txt {
    padding-left: 18px
  }

  .cpb-ind__ico {
    right: -4px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .cpb-hub__card {
    padding: 46px 22px 28px
  }

  .cpb-factor {
    padding: 20px;
    gap: 14px
  }

  .cpb-factor:hover {
    transform: translateY(-6px)
  }

  .cpb-cta__box {
    padding: 34px 22px
  }

  .cpb-area {
    padding: 28px 20px
  }

  .cpb-photo {
    padding: 0 0 20px 20px
  }

  .cpb-photo__ico {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .cpb-qa__btn {
        padding: 16px;
        font-size: 15px;
        line-height: 1.5;
  }

  .cpb-qa__body {
    padding: 16px 18px 20px
  }
}

@media (prefers-reduced-motion:reduce) {

  .cpb *,
  .cpb *::before,
  .cpb *::after {
    animation: none !important;
    transition: none !important
  }
}

.cpb-intro .title {
  font-size: 25px;
  line-height: 1.4;
  font-weight: 700;
  padding-bottom: 15px;
}


/*=======================================================
BRASS SCRAP BUYERS PAGE (.bsb)  File: brass-scrap-buyers-chennai.php
Banner re-uses About page .abp-hero. Colours = site tokens:
--theme-color #77af12 (lime), --theme-color2 #024e2f (green),
--theme-bg-light #F6F6F6, --body-text-color #757F95
Note: wow scroll animation sits on the column, hover on the inner block.
=======================================================*/
.bsb {
  --g: var(--theme-color2, #024e2f);
  --l: var(--theme-color, #77af12);
  --soft: var(--theme-bg-light, #F6F6F6);
  --tx: var(--body-text-color, #757F95);
  --w: #fff;
  --r: 20px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --sh: 0 12px 40px rgba(2, 78, 47, .10);
  --shl: 0 26px 60px rgba(2, 78, 47, .22);
  --e: cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
  overflow: clip
}

/* helpers */
.bsb-sec {
  position: relative;
  padding: 60px 0
}

.bsb-sec--soft {
  background: var(--soft)
}

.bsb-sec--dark {
  background: var(--g);
  color: var(--w)
}

.bsb-head {
  margin-bottom: 50px
}

.bsb-head .bsb-p {
  text-align: center;
  margin: 0
}

.bsb-h {
  position: relative;
  margin: 0 0 22px;
  padding-left: 18px;
  font: 700 28px/1.35 var(--heading-font);
  letter-spacing: -.01em;
  color: var(--g)
}

.bsb-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 5px;
  border-radius: 5px;
  background: var(--l);
  transition: top .4s, bottom .4s, width .4s
}

.bsb-h:hover::before {
  top: 0;
  bottom: 0;
  width: 9px
}

.bsb-h--sub {
  font-size: 25px
}

.bsb-h--lt {
  color: var(--w)
}

.bsb-h--c {
  padding: 0 0 16px;
  text-align: center
}

.bsb-h--c::before,
.bsb-h--c:hover::before {
  top: auto;
  bottom: 0;
  left: 50%;
  width: 64px;
  height: 4px;
  transform: translateX(-50%)
}

.bsb-h--c:hover::before {
  width: 120px
}

.bsb-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tx);
  text-align: justify
}

.bsb-p:last-child {
  margin-bottom: 0
}

.bsb-p--lt {
  color: rgba(255, 255, 255, .86)
}

.bsb-p--lead {
  font-size: 16px
}

.bsb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--w);
  background: var(--g);
  clip-path: var(--hex);
  transition: background .4s, transform .6s var(--e)
}

.bsb-hex--l {
  background: var(--l)
}

.bsb-btns,
.bsb-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.bsb-btns {
  margin-top: 28px
}

.bsb-btns .theme-btn,
.bsb-cta__btns .theme-btn {
  padding: 12px 22px
}

.bsb-btns .theme-btn i,
.bsb-cta__btns .theme-btn i {
  margin: 0 6px 0 0;
  transform: none
}

.bsb-ghost {
  display: inline-block;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--g);
  border: 2px solid var(--g);
  border-radius: 10px;
  overflow-wrap: anywhere;
  transition: var(--transition2)
}

.bsb-ghost i {
  margin-right: 6px;
  transition: transform .4s var(--e)
}

.bsb-ghost:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.bsb-ghost:hover i {
  transform: rotate(-12deg) scale(1.15)
}

.bsb-ghost--w {
  color: var(--w);
  border-color: var(--w)
}

.bsb-ghost--w:hover {
  color: var(--g);
  background: var(--w)
}

.bsb-link {
  font-weight: 600;
  color: var(--w);
  border-bottom: 2px solid var(--l);
  overflow-wrap: anywhere;
  transition: color .3s
}

.bsb-link:hover {
  color: var(--l)
}

/* intro: tilted photo stack */
.bsb-intro {
  padding: 60px 0 60px
}

.bsb-stack {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 0 70px
}

.bsb-stack figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl);
  transition: transform .6s var(--e)
}

.bsb-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.bsb-stack__a {
  width: 80%;
  aspect-ratio: 4/5;
  border-radius: 28px;
  transform: rotate(-4deg)
}

.bsb-stack__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  aspect-ratio: 4/3;
  border: 8px solid var(--w);
  border-radius: 22px;
  transform: rotate(5deg);
  animation: bsbFloat 6s ease-in-out infinite
}

.bsb-stack:hover .bsb-stack__a,
.bsb-stack:hover .bsb-stack__b {
  transform: rotate(0)
}

.bsb-stack:hover img {
  transform: scale(1.08)
}

.bsb-seal {
  position: absolute;
  top: 6px;
  right: -4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  color: var(--w);
  text-align: center;
  background: var(--l);
  clip-path: var(--hex);
  animation: bsbFloat 7s ease-in-out -2s infinite
}

.bsb-seal b {
  font: 700 30px/1 var(--heading-font)
}

.bsb-seal span {
  max-width: 80px;
  font-size: 11px;
  line-height: 1.25
}

/* ribbon */
.bsb-ribbon {
  overflow: hidden;
  margin: 12px -12px;
  padding: 16px 0;
  background: var(--l);
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 30px rgba(2, 78, 47, .15)
}

.bsb-ribbon__track {
  display: flex;
  width: max-content;
  animation: bsbMarq 30s linear infinite
}

.bsb-ribbon:hover .bsb-ribbon__track {
  animation-play-state: paused
}

.bsb-ribbon__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none
}

.bsb-ribbon__list li {
  padding-right: 48px;
  font: 600 18px var(--heading-font);
  white-space: nowrap;
  color: var(--g)
}

.bsb-ribbon__list i {
  margin-right: 10px;
  color: var(--w);
  animation: bsbBounce 2.4s ease infinite
}

/* tiles: slide-up green fill */
.bsb-tile {
  position: relative;
  height: 100%;
  padding: 34px 24px 28px;
  overflow: hidden;
  background: var(--w);
  border-radius: var(--r);
  box-shadow: var(--sh);
  isolation: isolate;
  transition: transform .45s var(--e), box-shadow .45s
}

.bsb-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g);
  transform: translateY(101%);
  transition: transform .55s var(--e)
}

.bsb-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.bsb-tile:hover::before {
  transform: none
}

.bsb-tile__no {
  position: absolute;
  top: 10px;
  right: 18px;
  font: 700 56px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 78, 47, .18);
  transition: -webkit-text-stroke-color .4s, transform .5s var(--e)
}

.bsb-tile:hover .bsb-tile__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4);
  transform: translateY(6px)
}

.bsb-tile__ico {
  margin-bottom: 20px
}

.bsb-tile:hover .bsb-tile__ico {
  background: var(--l);
  transform: rotateY(360deg)
}

.bsb-tile__t {
  margin: 0 0 8px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.bsb-tile__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.bsb-tile__p::first-letter {
  text-transform: uppercase
}

.bsb-tile:hover .bsb-tile__t {
  color: var(--w)
}

.bsb-tile:hover .bsb-tile__p {
  color: rgba(255, 255, 255, .88)
}

/* brass pill */
.bsb-brass {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 10px 36px 10px 10px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: 999px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s
}

.bsb-brass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.bsb-brass__img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--l)
}

.bsb-brass__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.bsb-brass:hover .bsb-brass__img img {
  transform: scale(1.15) rotate(4deg)
}

.bsb-brass__ico {
  animation: bsbPulse 2.6s ease-out infinite
}

.bsb-brass__p {
  margin: 0;
  font: 500 20px/1.55 var(--heading-font);
  color: var(--g)
}

/* shared photo */
.bsb-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shl)
}

.bsb-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.bsb-shot:hover img {
  transform: scale(1.08)
}

.bsb-shot--tall img {
  aspect-ratio: 4/5
}

.bsb-shot__cap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--w);
  background: rgba(2, 78, 47, .93);
  border-radius: 14px;
  transition: transform .5s var(--e)
}

.bsb-shot:hover .bsb-shot__cap {
  transform: translateY(-6px)
}

.bsb-shot__ico {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  background: var(--l);
  border-radius: 50%
}

/* wire: overlapping card */
.bsb-card {
  position: relative;
  z-index: 2;
  padding: 46px 38px 38px;
  background: var(--w);
  border-top: 6px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.bsb-card:hover {
  transform: translateY(-8px)
}

.bsb-card__ico {
  position: absolute;
  top: -36px;
  right: 28px;
  animation: bsbPulse 2.6s ease-out infinite
}

.bsb-card:hover .bsb-card__ico {
  background: var(--g);
  transform: rotate(60deg)
}

/* industrial: cut-corner image */
.bsb-ind::before {
  content: "";
  position: absolute;
  top: -130px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: rgba(119, 175, 18, .12);
  clip-path: var(--hex);
  animation: bsbSpin 40s linear infinite
}

.bsb-ind__txt {
  position: relative;
  padding-left: 28px;
  border-left: 4px solid var(--l)
}

.bsb-ind__txt .bsb-h {
  padding-left: 0
}

.bsb-ind__txt .bsb-h::before {
  display: none
}

.bsb-ind__wrap {
  position: relative;
  padding: 0 0 26px 26px
}

.bsb-ind__wrap::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  border: 3px solid var(--l);
  border-radius: var(--r);
  transition: transform .6s var(--e)
}

.bsb-ind__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%)
}

.bsb-ind__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.bsb-ind__wrap:hover .bsb-ind__img img {
  transform: scale(1.1) rotate(1deg)
}

.bsb-ind__wrap:hover::before {
  transform: translate(-8px, 8px)
}

.bsb-ind__ico {
  position: absolute;
  right: -10px;
  top: -24px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  animation: bsbFloat 6s ease-in-out infinite
}

/* Ambattur: photo background + glass card */
.bsb-hub {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--g)
}

.bsb-hub__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s linear
}

.bsb-hub:hover .bsb-hub__bg {
  transform: scale(1.1)
}

.bsb-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, .92) 35%, rgba(2, 78, 47, .25))
}

.bsb-hub__card {
  position: relative;
  padding: 48px 38px 38px;
  background: rgba(255, 255, 255, .96);
  border-left: 8px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.bsb-hub__card:hover {
  transform: translateX(10px)
}

.bsb-hub__pin {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--l)
}

.bsb-hub__card:hover .bsb-hub__pin {
  background: var(--g);
  animation: bsbBounce .9s ease
}

/* machinery: morphing blob */
.bsb-blob {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px
}

.bsb-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--l);
  border-radius: 50%;
  animation: bsbSpin 30s linear infinite
}

.bsb-blob__img {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 58% 42% 55% 45%/50% 55% 45% 50%;
  box-shadow: var(--shl);
  animation: bsbBlob 10s ease-in-out infinite
}

.bsb-blob__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.bsb-blob:hover .bsb-blob__img img {
  transform: scale(1.1)
}

.bsb-blob__ico {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px
}

.bsb-blob__ico i {
  animation: bsbSpin 8s linear infinite
}

/* price factors */
.bsb-factors {
  margin: 0;
  padding: 0;
  list-style: none
}

.bsb-factor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.bsb-factor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--l);
  transition: width .6s var(--e)
}

.bsb-factor:hover {
  transform: translateX(10px);
  border-color: var(--l);
  box-shadow: var(--shl)
}

.bsb-factor:hover::after {
  width: 100%
}

.bsb-factor:hover .bsb-factor__ico {
  background: var(--l);
  transform: rotate(60deg)
}

.bsb-factor__ico i {
  transition: transform .6s var(--e)
}

.bsb-factor:hover .bsb-factor__ico i {
  transform: rotate(-60deg)
}

.bsb-factor__t {
  margin: 0 0 6px;
  font: 700 18px var(--heading-font);
  color: var(--g)
}

.bsb-factor__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tx)
}

.bsb-factor__p::first-letter {
  text-transform: uppercase
}

/* tips: sticky notes */
.bsb-notes {
  margin: 0;
  padding: 0;
  list-style: none
}

.bsb-note {
  position: relative;
  height: 100%;
  padding: 34px 22px 34px;
  text-align: center;
  background: var(--soft);
  border-radius: 8px 8px 30px 8px;
  box-shadow: var(--sh);
  transform: rotate(-2deg);
  transition: transform .45s var(--e), box-shadow .45s, background .4s
}

.bsb-notes>li:nth-child(even) .bsb-note {
  transform: rotate(2deg)
}

.bsb-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--w) 50%, var(--l) 50%);
  border-top-left-radius: 12px
}

.bsb-note:hover,
.bsb-notes>li:nth-child(even) .bsb-note:hover {
  transform: rotate(0) translateY(-10px);
  background: var(--w);
  box-shadow: var(--shl)
}

.bsb-note__ico {
  margin-bottom: 16px
}

.bsb-note:hover .bsb-note__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.bsb-note__ico i {
  transition: transform .6s var(--e)
}

.bsb-note:hover .bsb-note__ico i {
  transform: rotate(-60deg)
}

.bsb-note__p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--g)
}

/* process: diamond nodes on a moving dashed rail */
.bsb-rail {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.bsb-stage {
  text-align: center
}

.bsb-node {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 12px 0 34px;
  font-size: 28px;
  color: var(--g);
  background: var(--w);
  border: 3px solid var(--l);
  border-radius: 22px;
  box-shadow: var(--sh);
  transform: rotate(45deg);
  transition: transform .6s var(--e), background .4s, color .4s
}

.bsb-node i {
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.bsb-node b {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 600 14px var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.bsb-stage:hover .bsb-node {
  color: var(--w);
  background: var(--l);
  transform: rotate(225deg) scale(1.1)
}

.bsb-stage:hover .bsb-node i,
.bsb-stage:hover .bsb-node b {
  transform: rotate(-225deg)
}

.bsb-stage__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.bsb-stage:hover .bsb-stage__p {
  color: var(--g)
}

/* why: fill-sweep rows */
.bsb-perks {
  margin: 0;
  padding: 0;
  list-style: none
}

.bsb-perk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 24px 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  isolation: isolate;
  transition: transform .45s var(--e)
}

.bsb-perk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e)
}

.bsb-perk:hover {
  transform: translateY(-6px)
}

.bsb-perk:hover::before {
  transform: none
}

.bsb-perk:hover .bsb-perk__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.bsb-perk__ico i {
  transition: transform .6s var(--e)
}

.bsb-perk:hover .bsb-perk__ico i {
  transform: rotate(-60deg)
}

.bsb-perk__p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--w);
  transition: color .3s
}

.bsb-perk:hover .bsb-perk__p {
  color: var(--g)
}

/* areas: radar */
.bsb-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto
}

.bsb-radar__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--l);
  border-radius: 50%;
  opacity: 0;
  animation: bsbRipple 3.6s ease-out infinite
}

.bsb-radar__ring:nth-child(2) {
  animation-delay: 1.2s
}

.bsb-radar__ring:nth-child(3) {
  animation-delay: 2.4s
}

.bsb-radar__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  font-size: 34px;
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(2, 78, 47, .12)
}

.bsb-radar__chip {
  position: absolute;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 18px;
  background: var(--l);
  animation: bsbFloat 6s ease-in-out infinite
}

.bsb-radar__chip--1 {
  top: 0;
  left: 44%
}

.bsb-radar__chip--2 {
  right: 2%;
  bottom: 22%;
  animation-delay: -2s
}

.bsb-radar__chip--3 {
  bottom: 6%;
  left: 8%;
  animation-delay: -4s
}

.bsb-area {
  padding: 40px 44px;
  background: var(--soft);
  border-bottom: 6px solid var(--l);
  border-radius: var(--r);
  transition: transform .45s var(--e), box-shadow .45s
}

.bsb-area:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.bsb-place {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 14px;
  font: 500 15px var(--heading-font);
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .14);
  border-radius: 30px;
  transition: background .3s, color .3s, transform .35s var(--e)
}

.bsb-place:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px)
}

/* cta */
.bsb-cta {
  padding: 10px 0 70px
}

.bsb-cta__box {
  position: relative;
  padding: 50px 48px;
  overflow: hidden;
  color: var(--w);
  background: var(--g) radial-gradient(circle at 100% 0, rgba(119, 175, 18, .45), transparent 55%);
  border-radius: 28px;
  box-shadow: var(--shl)
}

.bsb-cta__box::before {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, .07);
  clip-path: var(--hex);
  animation: bsbSpin 30s linear infinite
}

.bsb-cta__box .row {
  position: relative
}

.bsb-cta__btns {
  flex-direction: column
}

.bsb-cta__box .bsb-h::before {
  background: var(--l)
}

/* faq */
.bsb-photo {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px
}

.bsb-photo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--l);
  border-radius: 26px;
  transition: transform .6s var(--e)
}

.bsb-photo__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--shl)
}

.bsb-photo__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--e)
}

.bsb-photo:hover::before {
  transform: translate(-8px, 8px)
}

.bsb-photo:hover img {
  transform: scale(1.07)
}

.bsb-photo__ico {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  animation: bsbFloat 6s ease-in-out infinite
}

.bsb-accordion {
  counter-reset: bsbq
}

.bsb-qa {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .12);
  border-radius: 14px;
  box-shadow: var(--sh);
  counter-increment: bsbq;
  transition: border-color .3s, transform .4s var(--e)
}

.bsb-qa:hover {
  border-color: var(--l);
  transform: translateX(6px)
}

.bsb-qa__head {
  margin: 0
}

.bsb-qa__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  font: 600 18px/1.4 var(--heading-font);
  text-align: left;
  color: var(--w);
  background: var(--g);
  border: 0;
  cursor: pointer;
  transition: background .3s, color .3s
}

.bsb-qa__btn::before {
  content: counter(bsbq, decimal-leading-zero);
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  height: 38px;
  font-size: 14px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%
}

.bsb-qa__btn::after {
  content: "+";
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  transform: rotate(45deg);
  transition: transform .4s var(--e)
}

.bsb-qa__btn.collapsed {
  color: var(--g);
  background: var(--w)
}

.bsb-qa__btn.collapsed::after {
  transform: none
}

.bsb-qa__btn.collapsed:hover {
  color: var(--l)
}

.bsb-qa__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tx)
}

/* keyframes */
@keyframes bsbSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes bsbFloat {
  50% {
    translate: 0 -14px
  }
}

@keyframes bsbMarq {
  to {
    transform: translateX(-50%)
  }
}

@keyframes bsbBounce {
  40% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(2px)
  }
}

@keyframes bsbPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0)
  }
}

@keyframes bsbRipple {
  0% {
    transform: scale(.4);
    opacity: .9
  }

  100% {
    transform: scale(1);
    opacity: 0
  }
}

@keyframes bsbBlob {
  50% {
    border-radius: 42% 58% 45% 55%/55% 45% 55% 45%
  }
}

@keyframes bsbDash {
  to {
    background-position: 22px 0
  }
}

/* responsive */
@media (min-width:1200px) {
  .bsb-card {
    margin-left: -110px
  }

  .bsb-rail::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--l) 0 12px, transparent 12px 22px);
    animation: bsbDash 1s linear infinite
  }
}

@media (min-width:992px) and (max-width:1199.98px) {
  .bsb-card {
    margin-left: -70px;
    padding: 40px 28px 30px
  }
}

@media (max-width:991.98px) {
  .bsb-sec {
    padding: 64px 0
  }

  .bsb-intro {
    margin-top: -36px;
    padding-top: 84px
  }

  .bsb-head {
    margin-bottom: 36px
  }

  .bsb-p {
    text-align: justify;
  }

  .bsb-card {
    margin: -50px 18px 0
  }

  .bsb-hub {
    padding: 80px 0
  }

  .bsb-cta__btns {
    flex-direction: row
  }

  .bsb-area {
    padding: 32px 28px
  }
}

@media (max-width:767.98px) {
  .bsb-brass {
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
    border-radius: 26px
  }
}

@media (max-width:575.98px) {
  .bsb-sec {
    padding: 52px 0
  }

  .bsb-h {
    font-size: 23px
  }

  .bsb-h--sub {
    font-size: 22px
  }

  .bsb-stack {
    padding-bottom: 44px
  }

  .bsb-seal {
    width: 108px;
    height: 108px;
    right: 0
  }

  .bsb-seal b {
    font-size: 24px
  }

  .bsb-seal span {
    font-size: 10px
  }

  .bsb-btns .theme-btn,
  .bsb-btns .bsb-ghost,
  .bsb-cta__btns .theme-btn,
  .bsb-cta__btns .bsb-ghost {
    width: 100%
  }

  .bsb-ribbon__list li {
    font-size: 16px
  }

  .bsb-brass__p {
    font-size: 17px
  }

  .bsb-card {
    margin: -40px 8px 0;
    padding: 44px 22px 28px
  }

  .bsb-ind__txt {
    padding-left: 18px
  }

  .bsb-ind__ico {
    right: -4px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .bsb-hub__card {
    padding: 46px 22px 28px
  }

  .bsb-factor {
    padding: 20px;
    gap: 14px
  }

  .bsb-factor:hover {
    transform: translateY(-6px)
  }

  .bsb-cta__box {
    padding: 34px 22px
  }

  .bsb-area {
    padding: 28px 20px
  }

  .bsb-photo {
    padding: 0 0 20px 20px
  }

  .bsb-photo__ico {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .bsb-qa__btn {
    padding: 16px;
    font-size: 16.5px
  }

  .bsb-qa__body {
    padding: 16px 18px 20px
  }
}

@media (prefers-reduced-motion:reduce) {

  .bsb *,
  .bsb *::before,
  .bsb *::after {
    animation: none !important;
    transition: none !important
  }
}

.bsb-intro .title {
  font-size: 25px;
  line-height: 1.4;
  font-weight: 700;
  padding-bottom: 15px;
}

/* brass: mirrored card (image right, text left) for the Ambattur section */
@media (min-width:992px) {
  .bsb-card.bsb-card--rev {
    margin-left: 0;
    margin-right: -70px
  }
}

@media (min-width:1200px) {
  .bsb-card.bsb-card--rev {
    margin-left: 0;
    margin-right: -110px
  }
}

@media (max-width:991.98px) {
  .bsb-card.bsb-card--rev {
    margin: -50px 18px 0
  }
}

@media (max-width:575.98px) {
  .bsb-card.bsb-card--rev {
    margin: -40px 8px 0
  }
}



/*=======================================================
ALUMINIUM SCRAP BUYERS PAGE (.alb)  File: aluminium-scrap-buyers-chennai.php
Banner re-uses About page .abp-hero. Colours = site tokens:
--theme-color #77af12 (lime), --theme-color2 #024e2f (green),
--theme-bg-light #F6F6F6, --body-text-color #757F95
Note: wow scroll animation sits on the column, hover on the inner block.
=======================================================*/
.alb {
  --g: var(--theme-color2, #024e2f);
  --l: var(--theme-color, #77af12);
  --soft: var(--theme-bg-light, #F6F6F6);
  --tx: var(--body-text-color, #757F95);
  --w: #fff;
  --r: 20px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --sh: 0 12px 40px rgba(2, 78, 47, .10);
  --shl: 0 26px 60px rgba(2, 78, 47, .22);
  --e: cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
  overflow: clip
}

/* helpers */
.alb-sec {
  position: relative;
  padding: 60px 0
}

.alb-sec--soft {
  background: var(--soft)
}

.alb-sec--dark {
  background: var(--g);
  color: var(--w)
}

.alb-head {
  margin-bottom: 50px
}

.alb-head .alb-p {
  text-align: center;
  margin: 0
}

.alb-h {
  position: relative;
  margin: 0 0 22px;
  padding-left: 18px;
  font: 700 28px/1.35 var(--heading-font);
  letter-spacing: -.01em;
  color: var(--g)
}

.alb-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 5px;
  border-radius: 5px;
  background: var(--l);
  transition: top .4s, bottom .4s, width .4s
}

.alb-h:hover::before {
  top: 0;
  bottom: 0;
  width: 9px
}

.alb-h--sub {
  font-size: 25px
}

.alb-h--lt {
  color: var(--w)
}

.alb-h--c {
  padding: 0 0 16px;
  text-align: center
}

.alb-h--c::before,
.alb-h--c:hover::before {
  top: auto;
  bottom: 0;
  left: 50%;
  width: 64px;
  height: 4px;
  transform: translateX(-50%)
}

.alb-h--c:hover::before {
  width: 120px
}

.alb-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tx);
  text-align: justify
}

.alb-p:last-child {
  margin-bottom: 0
}

.alb-p--lt {
  color: rgba(255, 255, 255, .86)
}

.alb-p--lead {
  font-size: 16px
}

.alb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--w);
  background: var(--g);
  clip-path: var(--hex);
  transition: background .4s, transform .6s var(--e)
}

.alb-hex--l {
  background: var(--l)
}

.alb-btns,
.alb-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.alb-btns {
  margin-top: 28px
}

.alb-btns .theme-btn,
.alb-cta__btns .theme-btn {
  padding: 12px 22px
}

.alb-btns .theme-btn i,
.alb-cta__btns .theme-btn i {
  margin: 0 6px 0 0;
  transform: none
}

.alb-ghost {
  display: inline-block;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--g);
  border: 2px solid var(--g);
  border-radius: 10px;
  overflow-wrap: anywhere;
  transition: var(--transition2)
}

.alb-ghost i {
  margin-right: 6px;
  transition: transform .4s var(--e)
}

.alb-ghost:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.alb-ghost:hover i {
  transform: rotate(-12deg) scale(1.15)
}

.alb-ghost--w {
  color: var(--w);
  border-color: var(--w)
}

.alb-ghost--w:hover {
  color: var(--g);
  background: var(--w)
}

.alb-link {
  font-weight: 600;
  color: var(--w);
  border-bottom: 2px solid var(--l);
  overflow-wrap: anywhere;
  transition: color .3s
}

.alb-link:hover {
  color: var(--l)
}

/* intro: tilted photo stack */
.alb-intro {
  padding: 60px 0 60px
}

.alb-stack {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 0 70px
}

.alb-stack figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl);
  transition: transform .6s var(--e)
}

.alb-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.alb-stack__a {
  width: 80%;
  aspect-ratio: 4/5;
  border-radius: 28px;
  transform: rotate(-4deg)
}

.alb-stack__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  aspect-ratio: 4/3;
  border: 8px solid var(--w);
  border-radius: 22px;
  transform: rotate(5deg);
  animation: albFloat 6s ease-in-out infinite
}

.alb-stack:hover .alb-stack__a,
.alb-stack:hover .alb-stack__b {
  transform: rotate(0)
}

.alb-stack:hover img {
  transform: scale(1.08)
}

.alb-seal {
  position: absolute;
  top: 6px;
  right: -4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  color: var(--w);
  text-align: center;
  background: var(--l);
  clip-path: var(--hex);
  animation: albFloat 7s ease-in-out -2s infinite
}

.alb-seal b {
  font: 700 30px/1 var(--heading-font)
}

.alb-seal span {
  max-width: 80px;
  font-size: 11px;
  line-height: 1.25
}

/* ribbon */
.alb-ribbon {
  overflow: hidden;
  margin: 12px -12px;
  padding: 16px 0;
  background: var(--l);
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 30px rgba(2, 78, 47, .15)
}

.alb-ribbon__track {
  display: flex;
  width: max-content;
  animation: albMarq 30s linear infinite
}

.alb-ribbon:hover .alb-ribbon__track {
  animation-play-state: paused
}

.alb-ribbon__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none
}

.alb-ribbon__list li {
  padding-right: 48px;
  font: 600 18px var(--heading-font);
  white-space: nowrap;
  color: var(--g)
}

.alb-ribbon__list i {
  margin-right: 10px;
  color: var(--w);
  animation: albBounce 2.4s ease infinite
}

/* tiles: slide-up green fill */
.alb-tile {
  position: relative;
  height: 100%;
  padding: 34px 24px 28px;
  overflow: hidden;
  background: var(--w);
  border-radius: var(--r);
  box-shadow: var(--sh);
  isolation: isolate;
  transition: transform .45s var(--e), box-shadow .45s
}

.alb-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g);
  transform: translateY(101%);
  transition: transform .55s var(--e)
}

.alb-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.alb-tile:hover::before {
  transform: none
}

.alb-tile__no {
  position: absolute;
  top: 10px;
  right: 18px;
  font: 700 56px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 78, 47, .18);
  transition: -webkit-text-stroke-color .4s, transform .5s var(--e)
}

.alb-tile:hover .alb-tile__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4);
  transform: translateY(6px)
}

.alb-tile__ico {
  margin-bottom: 20px
}

.alb-tile:hover .alb-tile__ico {
  background: var(--l);
  transform: rotateY(360deg)
}

.alb-tile__t {
  margin: 0 0 8px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.alb-tile__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.alb-tile__p::first-letter {
  text-transform: uppercase
}

.alb-tile:hover .alb-tile__t {
  color: var(--w)
}

.alb-tile:hover .alb-tile__p {
  color: rgba(255, 255, 255, .88)
}

/* brass pill */
.alb-brass {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 10px 36px 10px 10px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: 999px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s
}

.alb-brass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.alb-brass__img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--l)
}

.alb-brass__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.alb-brass:hover .alb-brass__img img {
  transform: scale(1.15) rotate(4deg)
}

.alb-brass__ico {
  animation: albPulse 2.6s ease-out infinite
}

.alb-brass__p {
  margin: 0;
  font: 500 20px/1.55 var(--heading-font);
  color: var(--g)
}

/* shared photo */
.alb-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shl)
}

.alb-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.alb-shot:hover img {
  transform: scale(1.08)
}

.alb-shot--tall img {
  aspect-ratio: 4/5
}

.alb-shot__cap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--w);
  background: rgba(2, 78, 47, .93);
  border-radius: 14px;
  transition: transform .5s var(--e)
}

.alb-shot:hover .alb-shot__cap {
  transform: translateY(-6px)
}

.alb-shot__ico {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  background: var(--l);
  border-radius: 50%
}

/* wire: overlapping card */
.alb-card {
  position: relative;
  z-index: 2;
  padding: 46px 38px 38px;
  background: var(--w);
  border-top: 6px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.alb-card:hover {
  transform: translateY(-8px)
}

.alb-card__ico {
  position: absolute;
  top: -36px;
  right: 28px;
  animation: albPulse 2.6s ease-out infinite
}

.alb-card:hover .alb-card__ico {
  background: var(--g);
  transform: rotate(60deg)
}

/* industrial: cut-corner image */
.alb-ind::before {
  content: "";
  position: absolute;
  top: -130px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: rgba(119, 175, 18, .12);
  clip-path: var(--hex);
  animation: albSpin 40s linear infinite
}

.alb-ind__txt {
  position: relative;
  padding-left: 28px;
  border-left: 4px solid var(--l)
}

.alb-ind__txt .alb-h {
  padding-left: 0
}

.alb-ind__txt .alb-h::before {
  display: none
}

.alb-ind__wrap {
  position: relative;
  padding: 0 0 26px 26px
}

.alb-ind__wrap::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  border: 3px solid var(--l);
  border-radius: var(--r);
  transition: transform .6s var(--e)
}

.alb-ind__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%)
}

.alb-ind__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.alb-ind__wrap:hover .alb-ind__img img {
  transform: scale(1.1) rotate(1deg)
}

.alb-ind__wrap:hover::before {
  transform: translate(-8px, 8px)
}

.alb-ind__ico {
  position: absolute;
  right: -10px;
  top: -24px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  animation: albFloat 6s ease-in-out infinite
}

/* Ambattur: photo background + glass card */
.alb-hub {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--g)
}

.alb-hub__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s linear
}

.alb-hub:hover .alb-hub__bg {
  transform: scale(1.1)
}

.alb-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, .92) 35%, rgba(2, 78, 47, .25))
}

.alb-hub__card {
  position: relative;
  padding: 48px 38px 38px;
  background: rgba(255, 255, 255, .96);
  border-left: 8px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.alb-hub__card:hover {
  transform: translateX(10px)
}

.alb-hub__pin {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--l)
}

.alb-hub__card:hover .alb-hub__pin {
  background: var(--g);
  animation: albBounce .9s ease
}

/* machinery: morphing blob */
.alb-blob {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px
}

.alb-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 30s linear infinite
}

.alb-blob__img {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 58% 42% 55% 45%/50% 55% 45% 50%;
  box-shadow: var(--shl);
  animation: albBlob 10s ease-in-out infinite
}

.alb-blob__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.alb-blob:hover .alb-blob__img img {
  transform: scale(1.1)
}

.alb-blob__ico {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px
}

.alb-blob__ico i {
  animation: albSpin 8s linear infinite
}

/* price factors */
.alb-factors {
  margin: 0;
  padding: 0;
  list-style: none
}

.alb-factor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.alb-factor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--l);
  transition: width .6s var(--e)
}

.alb-factor:hover {
  transform: translateX(10px);
  border-color: var(--l);
  box-shadow: var(--shl)
}

.alb-factor:hover::after {
  width: 100%
}

.alb-factor:hover .alb-factor__ico {
  background: var(--l);
  transform: rotate(60deg)
}

.alb-factor__ico i {
  transition: transform .6s var(--e)
}

.alb-factor:hover .alb-factor__ico i {
  transform: rotate(-60deg)
}

.alb-factor__t {
  margin: 0 0 6px;
  font: 700 18px var(--heading-font);
  color: var(--g)
}

.alb-factor__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tx)
}

.alb-factor__p::first-letter {
  text-transform: uppercase
}

/* tips: sticky notes */
.alb-notes {
  margin: 0;
  padding: 0;
  list-style: none
}

.alb-note {
  position: relative;
  height: 100%;
  padding: 34px 22px 34px;
  text-align: center;
  background: var(--soft);
  border-radius: 8px 8px 30px 8px;
  box-shadow: var(--sh);
  transform: rotate(-2deg);
  transition: transform .45s var(--e), box-shadow .45s, background .4s
}

.alb-notes>li:nth-child(even) .alb-note {
  transform: rotate(2deg)
}

.alb-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--w) 50%, var(--l) 50%);
  border-top-left-radius: 12px
}

.alb-note:hover,
.alb-notes>li:nth-child(even) .alb-note:hover {
  transform: rotate(0) translateY(-10px);
  background: var(--w);
  box-shadow: var(--shl)
}

.alb-note__ico {
  margin-bottom: 16px
}

.alb-note:hover .alb-note__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.alb-note__ico i {
  transition: transform .6s var(--e)
}

.alb-note:hover .alb-note__ico i {
  transform: rotate(-60deg)
}

.alb-note__p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--g)
}

/* process: diamond nodes on a moving dashed rail */
.alb-rail {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.alb-stage {
  text-align: center
}

.alb-node {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 12px 0 34px;
  font-size: 28px;
  color: var(--g);
  background: var(--w);
  border: 3px solid var(--l);
  border-radius: 22px;
  box-shadow: var(--sh);
  transform: rotate(45deg);
  transition: transform .6s var(--e), background .4s, color .4s
}

.alb-node i {
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.alb-node b {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 600 14px var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.alb-stage:hover .alb-node {
  color: var(--w);
  background: var(--l);
  transform: rotate(225deg) scale(1.1)
}

.alb-stage:hover .alb-node i,
.alb-stage:hover .alb-node b {
  transform: rotate(-225deg)
}

.alb-stage__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.alb-stage:hover .alb-stage__p {
  color: var(--g)
}

/* why: fill-sweep rows */
.alb-perks {
  margin: 0;
  padding: 0;
  list-style: none
}

.alb-perk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 24px 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  isolation: isolate;
  transition: transform .45s var(--e)
}

.alb-perk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e)
}

.alb-perk:hover {
  transform: translateY(-6px)
}

.alb-perk:hover::before {
  transform: none
}

.alb-perk:hover .alb-perk__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.alb-perk__ico i {
  transition: transform .6s var(--e)
}

.alb-perk:hover .alb-perk__ico i {
  transform: rotate(-60deg)
}

.alb-perk__p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--w);
  transition: color .3s
}

.alb-perk:hover .alb-perk__p {
  color: var(--g)
}

/* areas: radar */
.alb-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto
}

.alb-radar__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--l);
  border-radius: 50%;
  opacity: 0;
  animation: albRipple 3.6s ease-out infinite
}

.alb-radar__ring:nth-child(2) {
  animation-delay: 1.2s
}

.alb-radar__ring:nth-child(3) {
  animation-delay: 2.4s
}

.alb-radar__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  font-size: 34px;
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(2, 78, 47, .12)
}

.alb-radar__chip {
  position: absolute;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 18px;
  background: var(--l);
  animation: albFloat 6s ease-in-out infinite
}

.alb-radar__chip--1 {
  top: 0;
  left: 44%
}

.alb-radar__chip--2 {
  right: 2%;
  bottom: 22%;
  animation-delay: -2s
}

.alb-radar__chip--3 {
  bottom: 6%;
  left: 8%;
  animation-delay: -4s
}

.alb-area {
  padding: 40px 44px;
  background: var(--soft);
  border-bottom: 6px solid var(--l);
  border-radius: var(--r);
  transition: transform .45s var(--e), box-shadow .45s
}

.alb-area:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.alb-place {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 14px;
  font: 500 15px var(--heading-font);
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .14);
  border-radius: 30px;
  transition: background .3s, color .3s, transform .35s var(--e)
}

.alb-place:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px)
}

/* cta */
.alb-cta {
  padding: 10px 0 70px
}

.alb-cta__box {
  position: relative;
  padding: 50px 48px;
  overflow: hidden;
  color: var(--w);
  background: var(--g) radial-gradient(circle at 100% 0, rgba(119, 175, 18, .45), transparent 55%);
  border-radius: 28px;
  box-shadow: var(--shl)
}

.alb-cta__box::before {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, .07);
  clip-path: var(--hex);
  animation: albSpin 30s linear infinite
}

.alb-cta__box .row {
  position: relative
}

.alb-cta__btns {
  flex-direction: column
}

.alb-cta__box .alb-h::before {
  background: var(--l)
}

/* faq */
.alb-photo {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px
}

.alb-photo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--l);
  border-radius: 26px;
  transition: transform .6s var(--e)
}

.alb-photo__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--shl)
}

.alb-photo__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--e)
}

.alb-photo:hover::before {
  transform: translate(-8px, 8px)
}

.alb-photo:hover img {
  transform: scale(1.07)
}

.alb-photo__ico {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  animation: albFloat 6s ease-in-out infinite
}

.alb-accordion {
  counter-reset: albq
}

.alb-qa {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .12);
  border-radius: 14px;
  box-shadow: var(--sh);
  counter-increment: albq;
  transition: border-color .3s, transform .4s var(--e)
}

.alb-qa:hover {
  border-color: var(--l);
  transform: translateX(6px)
}

.alb-qa__head {
  margin: 0
}

.alb-qa__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  font: 600 18px/1.4 var(--heading-font);
  text-align: left;
  color: var(--w);
  background: var(--g);
  border: 0;
  cursor: pointer;
  transition: background .3s, color .3s
}

.alb-qa__btn::before {
  content: counter(albq, decimal-leading-zero);
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  height: 38px;
  font-size: 14px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%
}

.alb-qa__btn::after {
  content: "+";
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  transform: rotate(45deg);
  transition: transform .4s var(--e)
}

.alb-qa__btn.collapsed {
  color: var(--g);
  background: var(--w)
}

.alb-qa__btn.collapsed::after {
  transform: none
}

.alb-qa__btn.collapsed:hover {
  color: var(--l)
}

.alb-qa__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tx)
}

/* keyframes */
@keyframes albSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes albFloat {
  50% {
    translate: 0 -14px
  }
}

@keyframes albMarq {
  to {
    transform: translateX(-50%)
  }
}

@keyframes albBounce {
  40% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(2px)
  }
}

@keyframes albPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0)
  }
}

@keyframes albRipple {
  0% {
    transform: scale(.4);
    opacity: .9
  }

  100% {
    transform: scale(1);
    opacity: 0
  }
}

@keyframes albBlob {
  50% {
    border-radius: 42% 58% 45% 55%/55% 45% 55% 45%
  }
}

@keyframes albDash {
  to {
    background-position: 22px 0
  }
}

/* responsive */
@media (min-width:1200px) {
  .alb-card {
    margin-left: -110px
  }

  .alb-rail::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--l) 0 12px, transparent 12px 22px);
    animation: albDash 1s linear infinite
  }
}

@media (min-width:992px) and (max-width:1199.98px) {
  .alb-card {
    margin-left: -70px;
    padding: 40px 28px 30px
  }
}

@media (max-width:991.98px) {
  .alb-sec {
    padding: 64px 0
  }

  .alb-intro {
    margin-top: -36px;
    padding-top: 84px
  }

  .alb-head {
    margin-bottom: 36px
  }

  .alb-p {
    text-align: justify;
  }

  .alb-card {
    margin: -50px 18px 0
  }

  .alb-hub {
    padding: 80px 0
  }

  .alb-cta__btns {
    flex-direction: row
  }

  .alb-area {
    padding: 32px 28px
  }
}

@media (max-width:767.98px) {
  .alb-brass {
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
    border-radius: 26px
  }
}

@media (max-width:575.98px) {
  .alb-sec {
    padding: 52px 0
  }

  .alb-h {
    font-size: 23px;
  }

  .alb-h--sub {
            font-size: 20px;
        line-height: 1.4;
  }

  .alb-stack {
    padding-bottom: 44px
  }

  .alb-seal {
    width: 108px;
    height: 108px;
    right: 0
  }

  .alb-seal b {
    font-size: 24px
  }

  .alb-seal span {
    font-size: 10px
  }

  .alb-btns .theme-btn,
  .alb-btns .alb-ghost,
  .alb-cta__btns .theme-btn,
  .alb-cta__btns .alb-ghost {
    width: 100%
  }

  .alb-ribbon__list li {
    font-size: 16px
  }

  .alb-brass__p {
    font-size: 17px
  }

  .alb-card {
    margin: -40px 8px 0;
    padding: 44px 22px 28px
  }

  .alb-ind__txt {
    padding-left: 18px
  }

  .alb-ind__ico {
    right: -4px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .alb-hub__card {
    padding: 46px 22px 28px
  }

  .alb-factor {
    padding: 20px;
    gap: 14px
  }

  .alb-factor:hover {
    transform: translateY(-6px)
  }

  .alb-cta__box {
    padding: 34px 22px
  }

  .alb-area {
    padding: 28px 20px
  }

  .alb-photo {
    padding: 0 0 20px 20px
  }

  .alb-photo__ico {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .alb-qa__btn {
    padding: 16px;
    font-size: 16.5px
  }

  .alb-qa__body {
    padding: 16px 18px 20px
  }
}

@media (prefers-reduced-motion:reduce) {

  .alb *,
  .alb *::before,
  .alb *::after {
    animation: none !important;
    transition: none !important
  }
}


/* ---- aluminium-only additions ---- */
.alb-note-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 820px;
  margin: 44px auto 0;
  padding: 20px 26px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.alb-note-photo:hover {
  transform: translateY(-5px);
  border-color: var(--g);
  box-shadow: var(--shl)
}

.alb-note-photo:hover .alb-hex {
  background: var(--l);
  transform: rotateY(360deg)
}

.alb-note-photo__p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--g)
}

.alb-duo {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 34px 46px 0
}

.alb-duo figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl)
}

.alb-duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.alb-duo__a {
  aspect-ratio: 4/3;
  border-radius: 26px 26px 26px 90px
}

.alb-duo__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1/1;
  border: 8px solid var(--w);
  border-radius: 50%;
  animation: albFloat 6s ease-in-out infinite
}

.alb-duo:hover img {
  transform: scale(1.08)
}

.alb-duo__ico {
  position: absolute;
  top: -18px;
  right: 10px;
  z-index: 2;
  animation: albFloat 7s ease-in-out -2s infinite
}

.alb-eco {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  color: var(--w);
  background: linear-gradient(120deg, var(--g) 0%, #01381f 100%)
}

.alb-eco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 2px, transparent 2.5px) 0 0 / 26px 26px;
  pointer-events: none
}

.alb-eco .container {
  position: relative
}

.alb-loop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 260px;
  margin: 0 auto
}

.alb-loop__ring {
  position: absolute;
  inset: 0;
  border: 3px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 22s linear infinite
}

.alb-loop__ring:nth-child(2) {
  inset: 34px;
  border-color: rgba(255, 255, 255, .45);
  animation-direction: reverse;
  animation-duration: 16s
}

.alb-loop__core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  font-size: 46px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%;
  transition: transform .6s var(--e)
}

.alb-eco:hover .alb-loop__core {
  transform: rotate(360deg) scale(1.08)
}

@media (max-width:991.98px) {
  .alb-eco {
    padding: 64px 0
  }

  .alb-duo {
    padding: 0 20px 40px 0
  }
}

@media (max-width:575.98px) {
  .alb-eco {
    padding: 52px 0
  }

  .alb-note-photo {
    flex-direction: column;
    text-align: center
  }

  .alb-loop {
    width: 210px;
    height: 210px
  }

  .alb-loop__core {
    width: 90px;
    height: 90px;
    font-size: 38px
  }
}

.alb-intro .alb-p--lead {
  font-size: 16px
}

/* process step heading (H4) */
.alb-stage__t {
  margin: 0 0 6px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.alb-stage:hover .alb-stage__t {
  color: var(--l)
}


/*=======================================================
TV SCRAP BUYERS PAGE  (.tvb)
File: tv-scrap-buyers-chennai.php
Class prefix: tvb-   (banner re-uses the About page .abp-hero)
Colours come from the site tokens in :root:
  --theme-color  #77af12 (lime)    --theme-color2 #024e2f (deep green)
  --theme-bg-light #F6F6F6         --body-text-color #757F95

Contents
 1. Page tokens
 2. Layout helpers (section, title, text, hex, buttons)
 3. Intro (arch image, circle image, years badge)
 4. Marquee band
 5. Types of scrap (image cards)
 6. Heavy iron (offset frame)
 7. Machinery (dashed ring portrait)
 8. Industrial hubs (location cards)
 9. Price factors
10. Collection process (timeline)
11. Why choose us (dark tiles)
12. Areas we serve
13. Environment banner
14. Call to action panel
15. FAQ accordion
16. Keyframes
17. Responsive
18. Reduced motion

Note: scroll animations (wow) sit on the column / wrapper,
hover effects sit on the inner element, so they never clash.
=======================================================*/

/*====================
1. Page tokens
======================*/
.tvb {
  --tvb-green: var(--theme-color2, #024e2f);
  --tvb-lime: var(--theme-color, #77af12);
  --tvb-light: var(--theme-bg-light, #F6F6F6);
  --tvb-text: var(--body-text-color, #757F95);
  --tvb-tint: #e8f0ea;
  --tvb-white: var(--color-white, #ffffff);
  --tvb-radius: 18px;
  --tvb-hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --tvb-shadow: 0 12px 40px rgba(2, 78, 47, 0.10);
  --tvb-shadow-lg: 0 26px 60px rgba(2, 78, 47, 0.22);
  --tvb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
  overflow: clip;
}

/*====================
2. Layout helpers
======================*/
.tvb-section {
  position: relative;
  padding: 60px 0;
}

.tvb-section--light {
  background: var(--tvb-light);
}

.tvb-section--dark {
  background: var(--tvb-green);
  color: var(--tvb-white);
}

.tvb-head {
  margin-bottom: 50px;
}

.tvb-head--center {
  justify-content: center;
  text-align: center;
}

.tvb-head--center .tvb-title::after {
  left: 50%;
  transform: translateX(-50%);
}

.tvb-head--center .tvb-text {
  margin-bottom: 0;
  text-align: center;
}

.tvb-title {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 16px;
  font-family: var(--heading-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--tvb-green);
}

.tvb-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--tvb-lime);
  transition: width 0.5s var(--tvb-ease);
}

.tvb-title:hover::after {
  width: 110px;
}

.tvb-title--sub {
  font-size: 25px;
}

.tvb-title--light {
  color: var(--tvb-white);
}

.tvb-title--center {
  text-align: center;
  margin-bottom: 56px;
}

.tvb-title--center::after {
  left: 50%;
  transform: translateX(-50%);
}

.tvb-title--tight {
  margin-bottom: 14px;
}

.tvb-text {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tvb-text);
  text-align: justify;
}

.tvb-text:last-child {
  margin-bottom: 0;
}

.tvb-text--light {
  color: rgba(255, 255, 255, 0.86);
}

/* hex-nut icon shape */
.tvb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--tvb-white);
  background: var(--tvb-green);
  clip-path: var(--tvb-hex);
  transition: background 0.4s var(--tvb-ease), transform 0.6s var(--tvb-ease);
}

.tvb-hex--lime {
  background: var(--tvb-lime);
}

/* outline button (pairs with .theme-btn) */
.tvb-btn-outline {
  display: inline-block;
  padding: 9px 20px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--tvb-green);
  border: 2px solid var(--tvb-green);
  border-radius: 10px;
  transition: var(--transition2);
}

.tvb-btn-outline i {
  margin-right: 6px;
  transition: transform 0.4s var(--tvb-ease);
}

.tvb-btn-outline:hover {
  color: var(--tvb-white);
  background: var(--tvb-green);
  transform: translateY(-3px);
  box-shadow: var(--tvb-shadow);
}

.tvb-btn-outline:hover i {
  transform: rotate(-12deg) scale(1.15);
}

.tvb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.tvb-actions .theme-btn {
  padding: 12px 22px;
}

.tvb-actions .theme-btn i {
  margin: 0 6px 0 0;
  transform: none;
}

.tvb-actions .tvb-btn-outline {
  padding: 10px 22px;
}

/*====================
3. Intro
======================*/
.tvb-intro {
  padding: 60px 0 60px;
}

.tvb-intro__media {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 80px 60px 0;
}

.tvb-intro__media::before {
  content: "";
  position: absolute;
  left: -22px;
  bottom: 30px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--tvb-lime) 2.5px, transparent 3px) 0 0 / 18px 18px;
  opacity: 0.55;
}

.tvb-arch {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  box-shadow: var(--tvb-shadow-lg);
}

.tvb-arch img,
.tvb-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--tvb-ease);
}

.tvb-intro__media:hover .tvb-arch img {
  transform: scale(1.08);
}

.tvb-circle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 52%;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 8px solid var(--tvb-white);
  border-radius: 50%;
  box-shadow: var(--tvb-shadow-lg);
  animation: tvbFloat 6s ease-in-out infinite;
}

.tvb-intro__media:hover .tvb-circle img {
  transform: scale(1.12) rotate(3deg);
}

.tvb-badge {
  position: absolute;
  top: 40px;
  left: -16px;
  z-index: 3;
  max-width: 172px;
  padding: 16px 20px;
  text-align: center;
  color: var(--tvb-white);
  background: var(--tvb-lime);
  border-radius: 16px;
  box-shadow: var(--tvb-shadow-lg);
  animation: tvbFloat 7s ease-in-out -2s infinite;
}

.tvb-badge__icon {
  display: block;
  font-size: 22px;
}

.tvb-badge__number {
  margin: 2px 0;
  font-family: var(--heading-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.tvb-badge__label {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

/*====================
4. Marquee band
======================*/
.tvb-marquee {
  overflow: hidden;
  padding: 16px 0;
  background: var(--tvb-green);
}

.tvb-marquee__track {
  display: flex;
  width: max-content;
  animation: tvbMarquee 32s linear infinite;
}

.tvb-marquee:hover .tvb-marquee__track {
  animation-play-state: paused;
}

.tvb-marquee__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tvb-marquee__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 48px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tvb-white);
}

.tvb-marquee__item i {
  color: var(--tvb-lime);
  animation: tvbSpin 6s linear infinite;
}

/*====================
5. Types of scrap
======================*/
.tvb-type {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--tvb-white);
  border-radius: var(--tvb-radius);
  box-shadow: var(--tvb-shadow);
  transition: transform 0.45s var(--tvb-ease), box-shadow 0.45s var(--tvb-ease);
}

.tvb-type::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--tvb-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--tvb-ease);
}

.tvb-type:hover {
  transform: translateY(-10px);
  box-shadow: var(--tvb-shadow-lg);
}

.tvb-type:hover::after {
  transform: scaleX(1);
}

.tvb-type__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tvb-type__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 78, 47, 0.6), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--tvb-ease);
}

.tvb-type__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--tvb-ease);
}

.tvb-type:hover .tvb-type__media img {
  transform: scale(1.1);
}

.tvb-type:hover .tvb-type__media::after {
  opacity: 1;
}

.tvb-type__body {
  position: relative;
  padding: 46px 22px 28px;
}

.tvb-type__icon {
  position: absolute;
  top: -32px;
  left: 22px;
  width: 60px;
  height: 60px;
  flex-basis: 60px;
  font-size: 22px;
}

.tvb-type:hover .tvb-type__icon {
  background: var(--tvb-lime);
  transform: rotateY(360deg);
}

.tvb-type__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tvb-green);
  transition: color 0.3s;
}

.tvb-type:hover .tvb-type__title {
  color: var(--tvb-lime);
}

.tvb-type__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tvb-text);
}

.tvb-type__text::first-letter,
.tvb-factor__text::first-letter,
.tvb-step__text::first-letter {
  text-transform: uppercase;
}

.tvb-note {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 56px;
  padding: 22px 28px;
  background: var(--tvb-tint);
  border-left: 5px solid var(--tvb-lime);
  border-radius: 14px;
}

.tvb-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  font-size: 20px;
  color: var(--tvb-white);
  background: var(--tvb-lime);
  border-radius: 50%;
  animation: tvbPulse 2.4s ease-out infinite;
}

.tvb-note__text {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--tvb-green);
}

/*====================
6. Heavy iron
======================*/
.tvb-heavy::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -130px;
  width: 420px;
  height: 420px;
  background: rgba(119, 175, 18, 0.12);
  clip-path: var(--tvb-hex);
  animation: tvbSpin 40s linear infinite;
}

.tvb-frame {
  position: relative;
  margin: 0 0 0 20px;
}

.tvb-frame::before {
  content: "";
  position: absolute;
  inset: 20px auto auto -20px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--tvb-lime);
  border-radius: var(--tvb-radius);
  transition: transform 0.6s var(--tvb-ease);
}

.tvb-frame__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--tvb-radius);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  transition: transform 0.6s var(--tvb-ease);
}

.tvb-frame__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--tvb-ease);
}

.tvb-frame:hover::before {
  transform: translate(-8px, 8px);
}

.tvb-frame:hover .tvb-frame__photo {
  transform: translate(6px, -6px);
}

.tvb-frame:hover .tvb-frame__photo img {
  transform: scale(1.06);
}

.tvb-frame__badge {
  position: absolute;
  right: -20px;
  bottom: -24px;
  z-index: 2;
  width: 84px;
  height: 84px;
  flex-basis: 84px;
  font-size: 30px;
  animation: tvbPulse 2.6s ease-out infinite;
}

.tvb-heavy__content,
.tvb-machine__content {
  position: relative;
}

/*====================
7. Machinery
======================*/
.tvb-portrait {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  padding: 26px;
}

.tvb-portrait__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118%;
  aspect-ratio: 1;
  border: 2px dashed var(--tvb-lime);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: tvbSpinCenter 34s linear infinite;
}

.tvb-portrait__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 999px 999px 22px 22px;
  box-shadow: var(--tvb-shadow-lg);
}

.tvb-portrait__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--tvb-ease);
}

.tvb-portrait:hover .tvb-portrait__photo img {
  transform: scale(1.08);
}

.tvb-portrait__gear {
  position: absolute;
  right: -6px;
  bottom: 60px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px;
}

.tvb-portrait__gear i {
  animation: tvbSpin 8s linear infinite;
}

/*====================
8. Industrial hubs
======================*/
.tvb-hub {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--tvb-white);
  border-radius: var(--tvb-radius);
  box-shadow: var(--tvb-shadow);
  transition: transform 0.45s var(--tvb-ease), box-shadow 0.45s var(--tvb-ease);
}

.tvb-hub:hover {
  transform: translateY(-10px);
  box-shadow: var(--tvb-shadow-lg);
}

.tvb-hub__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tvb-hub__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--tvb-ease);
}

.tvb-hub:hover .tvb-hub__media img {
  transform: scale(1.08);
}

.tvb-hub__body {
  position: relative;
  flex: 1;
  padding: 46px 30px 32px;
  border-bottom: 5px solid var(--tvb-lime);
}

.tvb-hub__pin {
  position: absolute;
  top: -34px;
  right: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--tvb-lime);
  box-shadow: none;
}

.tvb-hub:hover .tvb-hub__pin {
  background: var(--tvb-green);
  animation: tvbBounce 0.9s ease;
}

.tvb-hub__title {
  margin: 0 0 14px;
  font-family: var(--heading-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tvb-green);
}

/*====================
9. Price factors
======================*/
.tvb-price__media {
  position: relative;
  margin: 30px 0 0;
  overflow: hidden;
  border-radius: var(--tvb-radius);
  box-shadow: var(--tvb-shadow-lg);
}

.tvb-price__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s var(--tvb-ease);
}

.tvb-price__media:hover img {
  transform: scale(1.08);
}

.tvb-price__caption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--tvb-white);
  background: rgba(2, 78, 47, 0.93);
  border-radius: 14px;
  transition: transform 0.5s var(--tvb-ease);
}

.tvb-price__media:hover .tvb-price__caption {
  transform: translateY(-6px);
}

.tvb-price__caption-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  background: var(--tvb-lime);
  border-radius: 50%;
}

.tvb-price__caption-text {
  font-size: 14.5px;
  line-height: 1.5;
}

.tvb-factors {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.tvb-factor {
  position: relative;
  height: 100%;
  padding: 30px 26px;
  overflow: hidden;
  background: var(--tvb-white);
  border: 1px solid rgba(2, 78, 47, 0.08);
  border-radius: 16px;
  box-shadow: var(--tvb-shadow);
  transition: transform 0.45s var(--tvb-ease), box-shadow 0.45s var(--tvb-ease), border-color 0.3s;
}

.tvb-factor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--tvb-lime);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--tvb-ease);
}

.tvb-factor:hover {
  transform: translateY(-8px);
  border-color: var(--tvb-lime);
  box-shadow: var(--tvb-shadow-lg);
}

.tvb-factor:hover::before {
  transform: scaleY(1);
}

.tvb-factor:hover .tvb-factor__icon {
  background: var(--tvb-lime);
  transform: rotate(60deg);
}

.tvb-factor:hover .tvb-factor__icon i {
  transform: rotate(-60deg);
}

.tvb-factor__icon i {
  transition: transform 0.6s var(--tvb-ease);
}

.tvb-factor__icon {
  margin-bottom: 18px;
}

.tvb-factor__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 21px;
  font-weight: 600;
  color: var(--tvb-green);
}

.tvb-factor__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tvb-text);
}

/*====================
10. Collection process
======================*/
.tvb-steps {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.tvb-step {
  position: relative;
  padding: 0 6px;
  text-align: center;
}

.tvb-step::after {
  content: "";
  position: absolute;
  top: 46px;
  left: calc(50% + 56px);
  right: calc(30px - 50%);
  border-top: 2px dashed var(--tvb-lime);
}

.tvb-steps>li:last-child .tvb-step::after {
  display: none;
}

.tvb-step__node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 20px;
  font-size: 30px;
  color: var(--tvb-green);
  background: var(--tvb-white);
  border: 3px solid var(--tvb-lime);
  border-radius: 50%;
  box-shadow: var(--tvb-shadow);
  transition: transform 0.5s var(--tvb-ease), background 0.4s, color 0.4s;
}

.tvb-step__no {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--tvb-white);
  background: var(--tvb-green);
  border-radius: 50%;
}

.tvb-step:hover .tvb-step__node {
  color: var(--tvb-white);
  background: var(--tvb-lime);
  transform: translateY(-8px) scale(1.08);
}

.tvb-step:hover .tvb-step__node i {
  animation: tvbBounce 0.9s ease;
}

.tvb-step__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tvb-green);
}

.tvb-step__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tvb-text);
}

/*====================
11. Why choose us
======================*/
/* .tvb-why {
  background: var(--tvb-green) radial-gradient(circle at 12% 18%, rgba(119, 175, 18, 0.16), transparent 42%),
    radial-gradient(circle at 90% 88%, rgba(119, 175, 18, 0.14), transparent 40%);
} */

.tvb-why__grid {
  counter-reset: tvbWhy;
}

.tvb-why-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 26px 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  counter-increment: tvbWhy;
  transition: transform 0.45s var(--tvb-ease), background 0.4s, border-color 0.4s;
}

/* .tvb-why-card::after {
  content: counter(tvbWhy, decimal-leading-zero);
  position: absolute;
  right: 16px;
  bottom: -8px;
  font-family: var(--heading-font);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  transition: color 0.4s, transform 0.5s var(--tvb-ease);
} */

.tvb-why-card:hover {
  transform: translateY(-8px);
  background: rgba(119, 175, 18, 0.2);
  border-color: var(--tvb-lime);
}

.tvb-why-card:hover::after {
  color: rgba(255, 255, 255, 0.16);
  transform: translateY(-6px);
}

.tvb-why-card:hover .tvb-why-card__icon {
  background: var(--tvb-white);
  color: var(--tvb-green);
  transform: rotate(60deg);
}

.tvb-why-card__icon i {
  transition: transform 0.6s var(--tvb-ease);
}

.tvb-why-card:hover .tvb-why-card__icon i {
  transform: rotate(-60deg);
}

.tvb-why-card__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--tvb-white);
}

/*====================
12. Areas we serve
======================*/
.tvb-areas__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.tvb-area {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 16px;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--tvb-green);
  background: var(--tvb-light);
  border: 1px solid rgba(2, 78, 47, 0.1);
  border-radius: 12px;
  cursor: default;
  transition: transform 0.4s var(--tvb-ease), background 0.3s, color 0.3s, box-shadow 0.4s;
}

.tvb-area i {
  color: var(--tvb-lime);
  transition: color 0.3s, transform 0.4s var(--tvb-ease);
}

.tvb-area:hover {
  color: var(--tvb-white);
  background: var(--tvb-green);
  transform: translateY(-5px);
  box-shadow: var(--tvb-shadow);
}

.tvb-area:hover i {
  color: var(--tvb-white);
  animation: tvbBounce 0.8s ease;
}

/*====================
13. Environment banner
======================*/
.tvb-eco {
  position: relative;
  padding: 90px 0 150px;
  color: var(--tvb-white);
  background: url("../images/metal-scrap/recycling-bg.webp") center / cover no-repeat;
  isolation: isolate;
}

.tvb-eco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, 0.96) 30%, rgba(2, 78, 47, 0.72) 100%);
}

.tvb-eco__visual {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.tvb-eco__ring {
  position: absolute;
  border-radius: 50%;
}

.tvb-eco__ring--outer {
  inset: 0;
  border: 2px dashed rgba(255, 255, 255, 0.45);
  animation: tvbSpin 26s linear infinite;
}

.tvb-eco__ring--inner {
  inset: 16%;
  border: 2px solid rgba(119, 175, 18, 0.75);
  animation: tvbSpin 18s linear infinite reverse;
}

.tvb-eco__core {
  position: absolute;
  inset: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: var(--tvb-white);
  background: var(--tvb-lime);
  border-radius: 50%;
  animation: tvbPulse 2.8s ease-out infinite;
}

.tvb-eco__chip {
  position: absolute;
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  font-size: 20px;
  animation: tvbFloat 6s ease-in-out infinite;
}

.tvb-eco__chip--1 {
  top: -8px;
  left: 42%;
  background: var(--tvb-lime);
}

.tvb-eco__chip--2 {
  right: -6px;
  bottom: 22%;
  background: var(--tvb-white);
  color: var(--tvb-green);
  animation-delay: -2s;
}

.tvb-eco__chip--3 {
  bottom: 2%;
  left: 6%;
  background: var(--tvb-lime);
  animation-delay: -4s;
}

/*====================
14. Call to action
======================*/
.tvb-cta {
  position: relative;
  z-index: 2;
  margin-top: -76px;
}

.tvb-cta__panel {
  position: relative;
  padding: 44px 48px;
  overflow: hidden;
  background: var(--tvb-white);
  border-bottom: 6px solid var(--tvb-lime);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(2, 78, 47, 0.22);
}

.tvb-cta__panel::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 210px;
  height: 210px;
  background: rgba(119, 175, 18, 0.12);
  clip-path: var(--tvb-hex);
  animation: tvbSpin 30s linear infinite;
}

.tvb-cta__panel .row {
  position: relative;
}

.tvb-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tvb-cta__actions .theme-btn {
  padding: 12px 20px;
}

.tvb-cta__actions .theme-btn i {
  margin: 0 6px 0 0;
  transform: none;
}

.tvb-cta__actions .tvb-btn-outline {
  padding: 10px 16px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/*====================
15. FAQ accordion
======================*/
.tvb-faq__media {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px;
}

.tvb-faq__media::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--tvb-lime);
  border-radius: 26px;
  transition: transform 0.6s var(--tvb-ease);
}

.tvb-faq__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--tvb-shadow-lg);
}

.tvb-faq__photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s var(--tvb-ease);
}

.tvb-faq__media:hover::before {
  transform: translate(-8px, 8px);
}

.tvb-faq__media:hover .tvb-faq__photo img {
  transform: scale(1.07);
}

.tvb-faq__badge {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  background: var(--tvb-green);
  animation: tvbFloat 6s ease-in-out infinite;
}

.tvb-accordion__item {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--tvb-white);
  border: 1px solid rgba(2, 78, 47, 0.12);
  border-radius: 14px;
  box-shadow: var(--tvb-shadow);
  transition: border-color 0.3s, box-shadow 0.4s;
}

.tvb-accordion__item:hover {
  border-color: var(--tvb-lime);
}

.tvb-accordion__head {
  margin: 0;
}

.tvb-accordion__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 64px 20px 24px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--tvb-white);
  background: var(--tvb-green);
  border: 0;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.tvb-accordion__btn.collapsed {
  color: var(--tvb-green);
  background: var(--tvb-white);
}

.tvb-accordion__btn::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 22px;
  line-height: 1;
  color: var(--tvb-white);
  background: var(--tvb-lime);
  border-radius: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.4s var(--tvb-ease);
}

.tvb-accordion__btn.collapsed::after {
  transform: translateY(-50%) rotate(0);
}

.tvb-accordion__btn.collapsed:hover {
  color: var(--tvb-lime);
}

.tvb-accordion__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tvb-text);
}

/*====================
16. Keyframes
======================*/
@keyframes tvbSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes tvbSpinCenter {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes tvbFloat {
  50% {
    transform: translateY(-14px);
  }
}

@keyframes tvbPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0);
  }
}

@keyframes tvbBounce {
  40% {
    transform: translateY(-9px);
  }

  70% {
    transform: translateY(2px);
  }
}

@keyframes tvbMarquee {
  to {
    transform: translateX(-50%);
  }
}

/*====================
17. Responsive
======================*/
@media (max-width: 1199.98px) {
  .tvb-step::after {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .tvb-section {
    padding: 64px 0;
  }

  /* the About banner is cut at an angle on tablet, pull the next block under it */
  .tvb-intro {
    margin-top: -36px;
    padding-top: 84px;
  }

  .tvb-head {
    margin-bottom: 36px;
  }

  .tvb-text {
      text-align: justify;
  }

  .tvb-frame {
    margin-left: 14px;
  }

  .tvb-eco {
    padding: 70px 0 130px;
  }

  .tvb-cta {
    margin-top: -70px;
  }

  .tvb-cta__panel {
    padding: 36px 30px;
  }

  .tvb-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .tvb-section {
    padding: 52px 0;
  }

  .tvb-intro__media {
    padding: 0 44px 44px 0;
  }

  .tvb-badge {
    top: 24px;
    left: -6px;
    max-width: 138px;
    padding: 12px 14px;
  }

  .tvb-badge__number {
    font-size: 28px;
  }

  .tvb-badge__label {
    font-size: 12px;
  }

  .tvb-actions .theme-btn,
  .tvb-actions .tvb-btn-outline,
  .tvb-cta__actions .theme-btn,
  .tvb-cta__actions .tvb-btn-outline {
    width: 100%;
  }

  .tvb-marquee__item {
    font-size: 16px;
  }

  .tvb-note {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .tvb-frame {
    margin-left: 10px;
  }

  .tvb-frame::before {
    inset: 14px auto auto -10px;
  }

  .tvb-frame__badge {
    right: -6px;
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    font-size: 24px;
  }

  .tvb-portrait {
    padding: 16px;
  }

  .tvb-portrait__ring {
    width: 112%;
  }

  .tvb-hub__body {
    padding: 42px 22px 26px;
  }

  .tvb-hub__pin {
    right: 22px;
  }

  .tvb-hub__title {
    font-size: 21px;
  }

  .tvb-factor {
    padding: 26px 22px;
  }

  .tvb-why-card {
    padding: 22px 10px;
  }

  .tvb-eco {
    padding: 60px 0 120px;
  }

  .tvb-eco__visual {
    width: min(100%, 260px);
  }

  .tvb-cta__panel {
    padding: 30px 22px;
  }

  .tvb-faq__media {
    padding: 0 0 20px 20px;
  }

  .tvb-faq__badge {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px;
  }

  .tvb-accordion__btn {
    padding: 18px 58px 18px 18px;
    font-size: 16.5px;
  }

  .tvb-accordion__body {
    padding: 16px 18px 20px;
  }
}

/*====================
18. Reduced motion
======================*/
@media (prefers-reduced-motion: reduce) {

  .tvb *,
  .tvb *::before,
  .tvb *::after {
    animation: none !important;
    transition: none !important;
  }
}

.tvb-section.tvb-hubs .tvb-hub__body .tvb-hub__title {
  margin: 0 0 14px;
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tvb-green);
}

.tvb-factor__title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--tvb-green);
}


/*====================
19. TV page additions
======================*/
/* type tiles (H3 in H2 grid) */
.tvb-tile {
  position: relative;
  height: 100%;
  padding: 32px 24px 26px;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  border-bottom: 4px solid var(--tvb-lime);
  box-shadow: 0 12px 40px rgba(2, 78, 47, .10);
  isolation: isolate;
  transition: transform .45s ease, box-shadow .45s ease
}

.tvb-tile::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  z-index: -1;
  width: 130px;
  height: 130px;
  background: var(--tvb-tint, #e8f0ea);
  border-radius: 50%;
  transition: transform .6s ease, background .4s
}

.tvb-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(2, 78, 47, .22)
}

.tvb-tile:hover::before {
  background: var(--tvb-lime);
  opacity: .22;
  transform: scale(3.2)
}

.tvb-tile__icon {
  margin-bottom: 18px
}

.tvb-tile:hover .tvb-tile__icon {
  background: var(--tvb-lime);
  transform: rotateY(360deg)
}

.tvb-tile__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--tvb-green)
}

.tvb-section .tvb-text.tvb-areas__more.wow.fadeInUp {
    padding-bottom: 40px;
}

.tvb-tile__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tvb-text, #757F95)
}

.tvb-tile__text::first-letter {
  text-transform: uppercase
}

/* e-waste twin photos */
.tvb-twin {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 0 56px 40px
}

.tvb-twin figure {
  margin: 0;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(2, 78, 47, .22)
}

.tvb-twin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease
}

.tvb-twin__main {
  aspect-ratio: 4/3;
  border-radius: 90px 26px 26px 26px
}

.tvb-twin__sub {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
  aspect-ratio: 1/1;
  border: 8px solid #fff;
  border-radius: 24px;
  animation: tvbFloat 6s ease-in-out infinite
}

.tvb-twin:hover img {
  transform: scale(1.08)
}

.tvb-twin__gear {
  position: absolute;
  top: -16px;
  right: 8px;
  z-index: 2;
  animation: tvbFloat 7s ease-in-out -2s infinite
}

/* sub-paragraph inside a content block */
.tvb-text+.tvb-text {
  margin-top: 16px
}

/* why-sell benefit rows */
.tvb-benefit {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 22px 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(2, 78, 47, .10);
  transition: transform .4s ease, box-shadow .4s ease, background .4s
}

.tvb-benefit:hover {
  transform: translateX(8px);
  background: var(--tvb-green);
  box-shadow: 0 22px 50px rgba(2, 78, 47, .25)
}

.tvb-benefit:hover .tvb-hex {
  background: var(--tvb-lime);
  transform: rotate(360deg)
}

.tvb-benefit__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--tvb-green);
  transition: color .3s
}

.tvb-benefit__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tvb-text, #757F95);
  transition: color .3s
}

.tvb-benefit:hover .tvb-benefit__title {
  color: #fff
}

.tvb-benefit:hover .tvb-benefit__text {
  color: rgba(255, 255, 255, .85)
}

/* pre-sale tips */
.tvb-tip {
  position: relative;
  height: 100%;
  padding: 26px 22px 22px;
  background: #fff;
  border: 2px dashed var(--tvb-lime);
  border-radius: 18px;
  text-align: center;
  transition: transform .4s ease, box-shadow .4s ease, border-color .3s
}

.tvb-tip:hover {
  transform: translateY(-8px) rotate(-1deg);
  border-color: var(--tvb-green);
  box-shadow: 0 22px 50px rgba(2, 78, 47, .18)
}

.tvb-tip .tvb-hex {
  margin-bottom: 14px
}

.tvb-tip:hover .tvb-hex {
  background: var(--tvb-lime);
  transform: rotateY(360deg)
}

.tvb-tip__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tvb-green)
}

/* layout hooks used by tv-scrap-buyers-chennai.php */
.tvb-bulk__content,
.tvb-ewaste__content,
.tvb-sell__intro,
.tvb-price__intro {
  position: relative
}

.tvb-tips__list {
  margin: 0;
  padding: 0;
  list-style: none
}

.tvb-areas__more {
  margin: 22px 0 0;
  font-weight: 600;
  color: var(--tvb-green)
}

.tvb-sell .tvb-price__media {
  margin-top: 26px
}

.tvb-sell .tvb-price__media img,
.tvb-price .tvb-price__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .8s ease
}

.tvb-sell .tvb-price__media:hover img,
.tvb-price .tvb-price__media:hover img {
  transform: scale(1.07)
}

@media (max-width: 991.98px) {
  .tvb-twin {
    padding: 0 0 46px 20px
  }
}

@media (max-width: 575.98px) {
  .tvb-benefit {
    flex-direction: column;
    text-align: center
  }

  .tvb-benefit:hover {
    transform: translateY(-6px)
  }
}


/*====================
Header: active menu states (set by header.php)
======================*/
.navbar .nav-item .dropdown-menu .dropdown-item.active,
.navbar .nav-item .dropdown-menu .dropdown-item.active:hover {
  color: var(--theme-color);
  background: transparent;
  font-weight: 600
}


/*=======================================================
COMPUTER SCRAP BUYERS PAGE (.csb)  File: computer-scrap-buyers-chennai.php
Banner re-uses About page .abp-hero. Colours = site tokens:
--theme-color #77af12 (lime), --theme-color2 #024e2f (green),
--theme-bg-light #F6F6F6, --body-text-color #757F95
Note: wow scroll animation sits on the column, hover on the inner block.
=======================================================*/
.csb {
  --g: var(--theme-color2, #024e2f);
  --l: var(--theme-color, #77af12);
  --soft: var(--theme-bg-light, #F6F6F6);
  --tx: var(--body-text-color, #757F95);
  --w: #fff;
  --r: 20px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --sh: 0 12px 40px rgba(2, 78, 47, .10);
  --shl: 0 26px 60px rgba(2, 78, 47, .22);
  --e: cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
  overflow: clip
}

/* helpers */
.csb-sec {
  position: relative;
  padding: 60px 0
}

.csb-sec--soft {
  background: var(--soft)
}

.csb-sec--dark {
  background: var(--g);
  color: var(--w)
}

.csb-head {
  margin-bottom: 50px
}

.csb-head .csb-p {
  text-align: center;
  margin: 0;
  padding-bottom: 30px;
}

.csb-h {
  position: relative;
  margin: 0 0 22px;
  padding-left: 18px;
  font: 700 28px/1.35 var(--heading-font);
  letter-spacing: -.01em;
  color: var(--g)
}

.csb-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 5px;
  border-radius: 5px;
  background: var(--l);
  transition: top .4s, bottom .4s, width .4s
}

.csb-h:hover::before {
  top: 0;
  bottom: 0;
  width: 9px
}

.csb-h--sub {
  font-size: 22px;
}

.csb-h--lt {
  color: var(--w)
}

.csb-h--c {
  padding: 0 0 16px;
  text-align: center
}

.csb-h--c::before,
.csb-h--c:hover::before {
  top: auto;
  bottom: 0;
  left: 50%;
  width: 64px;
  height: 4px;
  transform: translateX(-50%)
}

.csb-h--c:hover::before {
  width: 120px
}

.csb-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tx);
  text-align: justify
}

.csb-p:last-child {
  margin-bottom: 0
}

.csb-p--lt {
  color: rgba(255, 255, 255, .86)
}

.csb-p--lead {
  font-size: 16px
}

.csb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--w);
  background: var(--g);
  clip-path: var(--hex);
  transition: background .4s, transform .6s var(--e)
}

.csb-hex--l {
  background: var(--l)
}

.csb-btns,
.csb-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.csb-btns {
  margin-top: 28px
}

.csb-btns .theme-btn,
.csb-cta__btns .theme-btn {
  padding: 12px 22px
}

.csb-btns .theme-btn i,
.csb-cta__btns .theme-btn i {
  margin: 0 6px 0 0;
  transform: none
}

.csb-ghost {
  display: inline-block;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--g);
  border: 2px solid var(--g);
  border-radius: 10px;
  overflow-wrap: anywhere;
  transition: var(--transition2)
}

.csb-ghost i {
  margin-right: 6px;
  transition: transform .4s var(--e)
}

.csb-ghost:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.csb-ghost:hover i {
  transform: rotate(-12deg) scale(1.15)
}

.csb-ghost--w {
  color: var(--w);
  border-color: var(--w)
}

.csb-ghost--w:hover {
  color: var(--g);
  background: var(--w)
}

.csb-link {
  font-weight: 600;
  color: var(--w);
  border-bottom: 2px solid var(--l);
  overflow-wrap: anywhere;
  transition: color .3s
}

.csb-link:hover {
  color: var(--l)
}

/* intro: tilted photo stack */
.csb-intro {
  padding: 60px 0 60px
}

.csb-stack {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 0 70px
}

.csb-stack figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl);
  transition: transform .6s var(--e)
}

.csb-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.csb-stack__a {
  width: 80%;
  aspect-ratio: 4/5;
  border-radius: 28px;
  transform: rotate(-4deg)
}

.csb-stack__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  aspect-ratio: 4/3;
  border: 8px solid var(--w);
  border-radius: 22px;
  transform: rotate(5deg);
  animation: albFloat 6s ease-in-out infinite
}

.csb-stack:hover .csb-stack__a,
.csb-stack:hover .csb-stack__b {
  transform: rotate(0)
}

.csb-stack:hover img {
  transform: scale(1.08)
}

.csb-seal {
  position: absolute;
  top: 6px;
  right: -4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  color: var(--w);
  text-align: center;
  background: var(--l);
  clip-path: var(--hex);
  animation: albFloat 7s ease-in-out -2s infinite
}

.csb-seal b {
  font: 700 30px/1 var(--heading-font)
}

.csb-seal span {
  max-width: 80px;
  font-size: 11px;
  line-height: 1.25
}

/* ribbon */
.csb-ribbon {
  overflow: hidden;
  margin: 12px -12px;
  padding: 16px 0;
  background: var(--l);
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 30px rgba(2, 78, 47, .15)
}

.csb-ribbon__track {
  display: flex;
  width: max-content;
  animation: albMarq 30s linear infinite
}

.csb-ribbon:hover .csb-ribbon__track {
  animation-play-state: paused
}

.csb-ribbon__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none
}

.csb-ribbon__list li {
  padding-right: 48px;
  font: 600 18px var(--heading-font);
  white-space: nowrap;
  color: var(--g)
}

.csb-ribbon__list i {
  margin-right: 10px;
  color: var(--w);
  animation: albBounce 2.4s ease infinite
}

/* tiles: slide-up green fill */
.csb-tile {
  position: relative;
  height: 100%;
  padding: 34px 24px 28px;
  overflow: hidden;
  background: var(--w);
  border-radius: var(--r);
  box-shadow: var(--sh);
  isolation: isolate;
  transition: transform .45s var(--e), box-shadow .45s
}

.csb-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g);
  transform: translateY(101%);
  transition: transform .55s var(--e)
}

.csb-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.csb-tile:hover::before {
  transform: none
}

.csb-tile__no {
  position: absolute;
  top: 10px;
  right: 18px;
  font: 700 56px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 78, 47, .18);
  transition: -webkit-text-stroke-color .4s, transform .5s var(--e)
}

.csb-tile:hover .csb-tile__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4);
  transform: translateY(6px)
}

.csb-tile__ico {
  margin-bottom: 20px
}

.csb-tile:hover .csb-tile__ico {
  background: var(--l);
  transform: rotateY(360deg)
}

.csb-tile__t {
  margin: 0 0 8px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.csb-tile__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.csb-tile__p::first-letter {
  text-transform: uppercase
}

.csb-tile:hover .csb-tile__t {
  color: var(--w)
}

.csb-tile:hover .csb-tile__p {
  color: rgba(255, 255, 255, .88)
}

/* brass pill */
.csb-brass {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 10px 36px 10px 10px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: 999px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s
}

.csb-brass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.csb-brass__img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--l)
}

.csb-brass__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.csb-brass:hover .csb-brass__img img {
  transform: scale(1.15) rotate(4deg)
}

.csb-brass__ico {
  animation: albPulse 2.6s ease-out infinite
}

.csb-brass__p {
  margin: 0;
  font: 500 20px/1.55 var(--heading-font);
  color: var(--g)
}

/* shared photo */
.csb-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shl)
}

.csb-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.csb-shot:hover img {
  transform: scale(1.08)
}

.csb-shot--tall img {
  aspect-ratio: 4/5
}

.csb-shot__cap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--w);
  background: rgba(2, 78, 47, .93);
  border-radius: 14px;
  transition: transform .5s var(--e)
}

.csb-shot:hover .csb-shot__cap {
  transform: translateY(-6px)
}

.csb-shot__ico {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  background: var(--l);
  border-radius: 50%
}

/* wire: overlapping card */
.csb-card {
  position: relative;
  z-index: 2;
  padding: 46px 38px 38px;
  background: var(--w);
  border-top: 6px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.csb-card:hover {
  transform: translateY(-8px)
}

.csb-card__ico {
  position: absolute;
  top: -36px;
  right: 28px;
  animation: albPulse 2.6s ease-out infinite
}

.csb-card:hover .csb-card__ico {
  background: var(--g);
  transform: rotate(60deg)
}

/* industrial: cut-corner image */
.csb-ind::before {
  content: "";
  position: absolute;
  top: -130px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: rgba(119, 175, 18, .12);
  clip-path: var(--hex);
  animation: albSpin 40s linear infinite
}

.csb-ind__txt {
  position: relative;
  padding-left: 28px;
  border-left: 4px solid var(--l)
}

.csb-ind__txt .csb-h {
  padding-left: 0
}

.csb-ind__txt .csb-h::before {
  display: none
}

.csb-ind__wrap {
  position: relative;
  padding: 0 0 26px 26px
}

.csb-ind__wrap::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  border: 3px solid var(--l);
  border-radius: var(--r);
  transition: transform .6s var(--e)
}

.csb-ind__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%)
}

.csb-ind__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.csb-ind__wrap:hover .csb-ind__img img {
  transform: scale(1.1) rotate(1deg)
}

.csb-ind__wrap:hover::before {
  transform: translate(-8px, 8px)
}

.csb-ind__ico {
  position: absolute;
  right: -10px;
  top: -24px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  animation: albFloat 6s ease-in-out infinite
}

/* Ambattur: photo background + glass card */
.csb-hub {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--g)
}

.csb-hub__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s linear
}

.csb-hub:hover .csb-hub__bg {
  transform: scale(1.1)
}

.csb-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, .92) 35%, rgba(2, 78, 47, .25))
}

.csb-hub__card {
  position: relative;
  padding: 48px 38px 38px;
  background: rgba(255, 255, 255, .96);
  border-left: 8px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.csb-hub__card:hover {
  transform: translateX(10px)
}

.csb-hub__pin {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--l)
}

.csb-hub__card:hover .csb-hub__pin {
  background: var(--g);
  animation: albBounce .9s ease
}

/* machinery: morphing blob */
.csb-blob {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px
}

.csb-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 30s linear infinite
}

.csb-blob__img {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 58% 42% 55% 45%/50% 55% 45% 50%;
  box-shadow: var(--shl);
  animation: albBlob 10s ease-in-out infinite
}

.csb-blob__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.csb-blob:hover .csb-blob__img img {
  transform: scale(1.1)
}

.csb-blob__ico {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px
}

.csb-blob__ico i {
  animation: albSpin 8s linear infinite
}

/* price factors */
.csb-factors {
  margin: 0;
  padding: 0;
  list-style: none
}

.csb-factor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.csb-factor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--l);
  transition: width .6s var(--e)
}

.csb-factor:hover {
  transform: translateX(10px);
  border-color: var(--l);
  box-shadow: var(--shl)
}

.csb-factor:hover::after {
  width: 100%
}

.csb-factor:hover .csb-factor__ico {
  background: var(--l);
  transform: rotate(60deg)
}

.csb-factor__ico i {
  transition: transform .6s var(--e)
}

.csb-factor:hover .csb-factor__ico i {
  transform: rotate(-60deg)
}

.csb-factor__t {
  margin: 0 0 6px;
  font: 700 18px var(--heading-font);
  color: var(--g)
}

.csb-factor__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tx)
}

.csb-factor__p::first-letter {
  text-transform: uppercase
}

/* tips: sticky notes */
.csb-notes {
  margin: 0;
  padding: 0;
  list-style: none
}

.csb-note {
  position: relative;
  height: 100%;
  padding: 34px 22px 34px;
  text-align: center;
  background: var(--soft);
  border-radius: 8px 8px 30px 8px;
  box-shadow: var(--sh);
  transform: rotate(-2deg);
  transition: transform .45s var(--e), box-shadow .45s, background .4s
}

.csb-notes>li:nth-child(even) .csb-note {
  transform: rotate(2deg)
}

.csb-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--w) 50%, var(--l) 50%);
  border-top-left-radius: 12px
}

.csb-note:hover,
.csb-notes>li:nth-child(even) .csb-note:hover {
  transform: rotate(0) translateY(-10px);
  background: var(--w);
  box-shadow: var(--shl)
}

.csb-note__ico {
  margin-bottom: 16px
}

.csb-note:hover .csb-note__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.csb-note__ico i {
  transition: transform .6s var(--e)
}

.csb-note:hover .csb-note__ico i {
  transform: rotate(-60deg)
}

.csb-note__p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--g)
}

/* process: diamond nodes on a moving dashed rail */
.csb-rail {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.csb-stage {
  text-align: center
}

.csb-node {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 12px 0 34px;
  font-size: 28px;
  color: var(--g);
  background: var(--w);
  border: 3px solid var(--l);
  border-radius: 22px;
  box-shadow: var(--sh);
  transform: rotate(45deg);
  transition: transform .6s var(--e), background .4s, color .4s
}

.csb-node i {
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.csb-node b {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 600 14px var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.csb-stage:hover .csb-node {
  color: var(--w);
  background: var(--l);
  transform: rotate(225deg) scale(1.1)
}

.csb-stage:hover .csb-node i,
.csb-stage:hover .csb-node b {
  transform: rotate(-225deg)
}

.csb-stage__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.csb-stage:hover .csb-stage__p {
  color: var(--g)
}

/* why: fill-sweep rows */
.csb-perks {
  margin: 0;
  padding: 0;
  list-style: none
}

.csb-perk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 24px 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  isolation: isolate;
  transition: transform .45s var(--e)
}

.csb-perk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e)
}

.csb-perk:hover {
  transform: translateY(-6px)
}

.csb-perk:hover::before {
  transform: none
}

.csb-perk:hover .csb-perk__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.csb-perk__ico i {
  transition: transform .6s var(--e)
}

.csb-perk:hover .csb-perk__ico i {
  transform: rotate(-60deg)
}

.csb-perk__p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--w);
  transition: color .3s
}

.csb-perk:hover .csb-perk__p {
  color: var(--g)
}

/* areas: radar */
.csb-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto
}

.csb-radar__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--l);
  border-radius: 50%;
  opacity: 0;
  animation: albRipple 3.6s ease-out infinite
}

.csb-radar__ring:nth-child(2) {
  animation-delay: 1.2s
}

.csb-radar__ring:nth-child(3) {
  animation-delay: 2.4s
}

.csb-radar__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  font-size: 34px;
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(2, 78, 47, .12)
}

.csb-radar__chip {
  position: absolute;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 18px;
  background: var(--l);
  animation: albFloat 6s ease-in-out infinite
}

.csb-radar__chip--1 {
  top: 0;
  left: 44%
}

.csb-radar__chip--2 {
  right: 2%;
  bottom: 22%;
  animation-delay: -2s
}

.csb-radar__chip--3 {
  bottom: 6%;
  left: 8%;
  animation-delay: -4s
}

.csb-area {
  padding: 40px 44px;
  background: var(--soft);
  border-bottom: 6px solid var(--l);
  border-radius: var(--r);
  transition: transform .45s var(--e), box-shadow .45s
}

.csb-area:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.csb-place {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 14px;
  font: 500 15px var(--heading-font);
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .14);
  border-radius: 30px;
  transition: background .3s, color .3s, transform .35s var(--e)
}

.csb-place:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px)
}

/* cta */
.csb-cta {
  padding: 10px 0 70px
}

.csb-cta__box {
  position: relative;
  padding: 50px 48px;
  overflow: hidden;
  color: var(--w);
  background: var(--g) radial-gradient(circle at 100% 0, rgba(119, 175, 18, .45), transparent 55%);
  border-radius: 28px;
  box-shadow: var(--shl)
}

.csb-cta__box::before {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, .07);
  clip-path: var(--hex);
  animation: albSpin 30s linear infinite
}

.csb-cta__box .row {
  position: relative
}

.csb-cta__btns {
  flex-direction: column
}

.csb-cta__box .csb-h::before {
  background: var(--l)
}

/* faq */
.csb-photo {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px
}

.csb-photo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--l);
  border-radius: 26px;
  transition: transform .6s var(--e)
}

.csb-photo__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--shl)
}

.csb-photo__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--e)
}

.csb-photo:hover::before {
  transform: translate(-8px, 8px)
}

.csb-photo:hover img {
  transform: scale(1.07)
}

.csb-photo__ico {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  animation: albFloat 6s ease-in-out infinite
}

.csb-accordion {
  counter-reset: albq
}

.csb-qa {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .12);
  border-radius: 14px;
  box-shadow: var(--sh);
  counter-increment: albq;
  transition: border-color .3s, transform .4s var(--e)
}

.csb-qa:hover {
  border-color: var(--l);
  transform: translateX(6px)
}

.csb-qa__head {
  margin: 0
}

.csb-qa__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  font: 600 18px/1.4 var(--heading-font);
  text-align: left;
  color: var(--w);
  background: var(--g);
  border: 0;
  cursor: pointer;
  transition: background .3s, color .3s
}

.csb-qa__btn::before {
  content: counter(albq, decimal-leading-zero);
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  height: 38px;
  font-size: 14px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%
}

.csb-qa__btn::after {
  content: "+";
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  transform: rotate(45deg);
  transition: transform .4s var(--e)
}

.csb-qa__btn.collapsed {
  color: var(--g);
  background: var(--w)
}

.csb-qa__btn.collapsed::after {
  transform: none
}

.csb-qa__btn.collapsed:hover {
  color: var(--l)
}

.csb-qa__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tx)
}

/* keyframes */
@keyframes albSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes albFloat {
  50% {
    translate: 0 -14px
  }
}

@keyframes albMarq {
  to {
    transform: translateX(-50%)
  }
}

@keyframes albBounce {
  40% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(2px)
  }
}

@keyframes albPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0)
  }
}

@keyframes albRipple {
  0% {
    transform: scale(.4);
    opacity: .9
  }

  100% {
    transform: scale(1);
    opacity: 0
  }
}

@keyframes albBlob {
  50% {
    border-radius: 42% 58% 45% 55%/55% 45% 55% 45%
  }
}

@keyframes albDash {
  to {
    background-position: 22px 0
  }
}

/* responsive */
@media (min-width:1200px) {
  .csb-card {
    margin-left: -110px
  }

  .csb-rail::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--l) 0 12px, transparent 12px 22px);
    animation: albDash 1s linear infinite
  }
}

@media (min-width:992px) and (max-width:1199.98px) {
  .csb-card {
    margin-left: -70px;
    padding: 40px 28px 30px
  }
}

@media (max-width:991.98px) {
  .csb-sec {
    padding: 64px 0
  }

  .csb-intro {
    margin-top: -36px;
    padding-top: 84px
  }

  .csb-head {
    margin-bottom: 36px
  }

  .csb-p {
   text-align: justify;
  }

  .csb-card {
    margin: -50px 18px 0
  }

  .csb-hub {
    padding: 80px 0
  }

  .csb-cta__btns {
    flex-direction: row
  }

  .csb-area {
    padding: 32px 28px
  }
}

@media (max-width:767.98px) {
  .csb-brass {
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
    border-radius: 26px
  }
}

@media (max-width:575.98px) {
  .csb-sec {
    padding: 52px 0
  }

  .csb-h {
    font-size: 23px
  }

  .csb-h--sub {
    font-size: 18px;
        line-height: 1.4;
  }

  .csb-stack {
    padding-bottom: 44px
  }

  .csb-seal {
    width: 108px;
    height: 108px;
    right: 0
  }

  .csb-seal b {
    font-size: 24px
  }

  .csb-seal span {
    font-size: 10px
  }

  .csb-btns .theme-btn,
  .csb-btns .csb-ghost,
  .csb-cta__btns .theme-btn,
  .csb-cta__btns .csb-ghost {
    width: 100%
  }

  .csb-ribbon__list li {
    font-size: 16px
  }

  .csb-brass__p {
    font-size: 17px
  }

  .csb-card {
    margin: -40px 8px 0;
    padding: 44px 22px 28px
  }

  .csb-ind__txt {
    padding-left: 18px
  }

  .csb-ind__ico {
    right: -4px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .csb-hub__card {
    padding: 46px 22px 28px
  }

  .csb-factor {
    padding: 14px;
    gap: 14px
  }

  .csb-factor:hover {
    transform: translateY(-6px)
  }

  .csb-cta__box {
    padding: 34px 22px
  }

  .csb-area {
    padding: 28px 20px
  }

  .csb-photo {
    padding: 0 0 20px 20px
  }

  .csb-photo__ico {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .csb-qa__btn {
    padding: 16px;
    font-size: 16.5px
  }

  .csb-qa__body {
    padding: 16px 18px 20px
  }
}

@media (prefers-reduced-motion:reduce) {

  .csb *,
  .csb *::before,
  .csb *::after {
    animation: none !important;
    transition: none !important
  }
}


/* ---- aluminium-only additions ---- */
.csb-note-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 820px;
  margin: 44px auto 0;
  padding: 20px 26px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.csb-note-photo:hover {
  transform: translateY(-5px);
  border-color: var(--g);
  box-shadow: var(--shl)
}

.csb-note-photo:hover .csb-hex {
  background: var(--l);
  transform: rotateY(360deg)
}

.csb-note-photo__p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--g)
}

.csb-duo {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 34px 46px 0
}

.csb-duo figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl)
}

.csb-duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.csb-duo__a {
  aspect-ratio: 4/3;
  border-radius: 26px 26px 26px 90px
}

.csb-duo__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1/1;
  border: 8px solid var(--w);
  border-radius: 50%;
  animation: albFloat 6s ease-in-out infinite
}

.csb-duo:hover img {
  transform: scale(1.08)
}

.csb-duo__ico {
  position: absolute;
  top: -18px;
  right: 10px;
  z-index: 2;
  animation: albFloat 7s ease-in-out -2s infinite
}

.csb-eco {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  color: var(--w);
  background: linear-gradient(120deg, var(--g) 0%, #01381f 100%)
}

.csb-eco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 2px, transparent 2.5px) 0 0 / 26px 26px;
  pointer-events: none
}

.csb-eco .container {
  position: relative
}

.csb-loop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 260px;
  margin: 0 auto
}

.csb-loop__ring {
  position: absolute;
  inset: 0;
  border: 3px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 22s linear infinite
}

.csb-loop__ring:nth-child(2) {
  inset: 34px;
  border-color: rgba(255, 255, 255, .45);
  animation-direction: reverse;
  animation-duration: 16s
}

.csb-loop__core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  font-size: 46px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%;
  transition: transform .6s var(--e)
}

.csb-eco:hover .csb-loop__core {
  transform: rotate(360deg) scale(1.08)
}

@media (max-width:991.98px) {
  .csb-eco {
    padding: 64px 0
  }

  .csb-duo {
    padding: 0 20px 40px 0
  }
}

@media (max-width:575.98px) {
  .csb-eco {
    padding: 52px 0
  }

  .csb-note-photo {
    flex-direction: column;
    text-align: center
  }

  .csb-loop {
    width: 210px;
    height: 210px
  }

  .csb-loop__core {
    width: 90px;
    height: 90px;
    font-size: 38px
  }
}

.csb-intro .csb-p--lead {
  font-size: 16px
}

/* process step heading (H4) */
.csb-stage__t {
  margin: 0 0 6px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.csb-stage:hover .csb-stage__t {
  color: var(--l)
}


/*=======================================================
HOME APPLIANCES SCRAP BUYERS PAGE (.hab)  File: home-appliances-scrap-buyers-chennai.php
Banner re-uses About page .abp-hero. Colours = site tokens:
--theme-color #77af12 (lime), --theme-color2 #024e2f (green),
--theme-bg-light #F6F6F6, --body-text-color #757F95
Note: wow scroll animation sits on the column, hover on the inner block.
=======================================================*/
.hab {
  --g: var(--theme-color2, #024e2f);
  --l: var(--theme-color, #77af12);
  --soft: var(--theme-bg-light, #F6F6F6);
  --tx: var(--body-text-color, #757F95);
  --w: #fff;
  --r: 20px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --sh: 0 12px 40px rgba(2, 78, 47, .10);
  --shl: 0 26px 60px rgba(2, 78, 47, .22);
  --e: cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
  overflow: clip
}

/* helpers */
.hab-sec {
  position: relative;
  padding: 60px 0
}

.hab-sec--soft {
  background: var(--soft)
}

.hab-sec--dark {
  background: var(--g);
  color: var(--w)
}

.hab-head {
  margin-bottom: 50px
}

.hab-head .hab-p {
  text-align: center;
  margin: 0
}

.hab-h {
  position: relative;
  margin: 0 0 22px;
  padding-left: 18px;
  font: 700 28px/1.35 var(--heading-font);
  letter-spacing: -.01em;
  color: var(--g)
}

.hab-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 5px;
  border-radius: 5px;
  background: var(--l);
  transition: top .4s, bottom .4s, width .4s
}

.hab-h:hover::before {
  top: 0;
  bottom: 0;
  width: 9px
}

.hab-h--sub {
  font-size: 25px
}

.hab-h--lt {
  color: var(--w)
}

.hab-h--c {
  padding: 0 0 16px;
  text-align: center
}

.hab-h--c::before,
.hab-h--c:hover::before {
  top: auto;
  bottom: 0;
  left: 50%;
  width: 64px;
  height: 4px;
  transform: translateX(-50%)
}

.hab-h--c:hover::before {
  width: 120px
}

.hab-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tx);
  text-align: justify
}

.hab-p:last-child {
  margin-bottom: 0
}

.hab-p--lt {
  color: rgba(255, 255, 255, .86)
}

.hab-p--lead {
  font-size: 16px
}

.hab-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--w);
  background: var(--g);
  clip-path: var(--hex);
  transition: background .4s, transform .6s var(--e)
}

.hab-hex--l {
  background: var(--l)
}

.hab-btns,
.hab-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.hab-btns {
  margin-top: 28px
}

.hab-btns .theme-btn,
.hab-cta__btns .theme-btn {
  padding: 12px 22px
}

.hab-btns .theme-btn i,
.hab-cta__btns .theme-btn i {
  margin: 0 6px 0 0;
  transform: none
}

.hab-ghost {
  display: inline-block;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--g);
  border: 2px solid var(--g);
  border-radius: 10px;
  overflow-wrap: anywhere;
  transition: var(--transition2)
}

.hab-ghost i {
  margin-right: 6px;
  transition: transform .4s var(--e)
}

.hab-ghost:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.hab-ghost:hover i {
  transform: rotate(-12deg) scale(1.15)
}

.hab-ghost--w {
  color: var(--w);
  border-color: var(--w)
}

.hab-ghost--w:hover {
  color: var(--g);
  background: var(--w)
}

.hab-link {
  font-weight: 600;
  color: var(--w);
  border-bottom: 2px solid var(--l);
  overflow-wrap: anywhere;
  transition: color .3s
}

.hab-link:hover {
  color: var(--l)
}

/* intro: tilted photo stack */
.hab-intro {
  padding: 60px 0 60px
}

.hab-stack {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 0 70px
}

.hab-stack figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl);
  transition: transform .6s var(--e)
}

.hab-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.hab-stack__a {
  width: 80%;
  aspect-ratio: 4/5;
  border-radius: 28px;
  transform: rotate(-4deg)
}

.hab-stack__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  aspect-ratio: 4/3;
  border: 8px solid var(--w);
  border-radius: 22px;
  transform: rotate(5deg);
  animation: albFloat 6s ease-in-out infinite
}

.hab-stack:hover .hab-stack__a,
.hab-stack:hover .hab-stack__b {
  transform: rotate(0)
}

.hab-stack:hover img {
  transform: scale(1.08)
}

.hab-seal {
  position: absolute;
  top: 6px;
  right: -4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  color: var(--w);
  text-align: center;
  background: var(--l);
  clip-path: var(--hex);
  animation: albFloat 7s ease-in-out -2s infinite
}

.hab-seal b {
  font: 700 30px/1 var(--heading-font)
}

.hab-seal span {
  max-width: 80px;
  font-size: 11px;
  line-height: 1.25
}

/* ribbon */
.hab-ribbon {
  overflow: hidden;
  margin: 12px -12px;
  padding: 16px 0;
  background: var(--l);
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 30px rgba(2, 78, 47, .15)
}

.hab-ribbon__track {
  display: flex;
  width: max-content;
  animation: albMarq 30s linear infinite
}

.hab-ribbon:hover .hab-ribbon__track {
  animation-play-state: paused
}

.hab-ribbon__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none
}

.hab-ribbon__list li {
  padding-right: 48px;
  font: 600 18px var(--heading-font);
  white-space: nowrap;
  color: var(--g)
}

.hab-ribbon__list i {
  margin-right: 10px;
  color: var(--w);
  animation: albBounce 2.4s ease infinite
}

/* tiles: slide-up green fill */
.hab-tile {
  position: relative;
  height: 100%;
  padding: 34px 24px 28px;
  overflow: hidden;
  background: var(--w);
  border-radius: var(--r);
  box-shadow: var(--sh);
  isolation: isolate;
  transition: transform .45s var(--e), box-shadow .45s
}

.hab-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g);
  transform: translateY(101%);
  transition: transform .55s var(--e)
}

.hab-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.hab-tile:hover::before {
  transform: none
}

.hab-tile__no {
  position: absolute;
  top: 10px;
  right: 18px;
  font: 700 56px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 78, 47, .18);
  transition: -webkit-text-stroke-color .4s, transform .5s var(--e)
}

.hab-tile:hover .hab-tile__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4);
  transform: translateY(6px)
}

.hab-tile__ico {
  margin-bottom: 20px
}

.hab-tile:hover .hab-tile__ico {
  background: var(--l);
  transform: rotateY(360deg)
}

.hab-tile__t {
  margin: 0 0 8px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.hab-tile__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.hab-tile__p::first-letter {
  text-transform: uppercase
}

.hab-tile:hover .hab-tile__t {
  color: var(--w)
}

.hab-tile:hover .hab-tile__p {
  color: rgba(255, 255, 255, .88)
}

/* brass pill */
.hab-brass {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 10px 36px 10px 10px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: 999px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s
}

.hab-brass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.hab-brass__img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--l)
}

.hab-brass__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.hab-brass:hover .hab-brass__img img {
  transform: scale(1.15) rotate(4deg)
}

.hab-brass__ico {
  animation: albPulse 2.6s ease-out infinite
}

.hab-brass__p {
  margin: 0;
  font: 500 20px/1.55 var(--heading-font);
  color: var(--g)
}

/* shared photo */
.hab-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shl)
}

.hab-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.hab-shot:hover img {
  transform: scale(1.08)
}

.hab-shot--tall img {
  aspect-ratio: 4/5
}

.hab-shot__cap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--w);
  background: rgba(2, 78, 47, .93);
  border-radius: 14px;
  transition: transform .5s var(--e)
}

.hab-shot:hover .hab-shot__cap {
  transform: translateY(-6px)
}

.hab-shot__ico {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  background: var(--l);
  border-radius: 50%
}

/* wire: overlapping card */
.hab-card {
  position: relative;
  z-index: 2;
  padding: 46px 38px 38px;
  background: var(--w);
  border-top: 6px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.hab-card:hover {
  transform: translateY(-8px)
}

.hab-card__ico {
  position: absolute;
  top: -36px;
  right: 28px;
  animation: albPulse 2.6s ease-out infinite
}

.hab-card:hover .hab-card__ico {
  background: var(--g);
  transform: rotate(60deg)
}

/* industrial: cut-corner image */
.hab-ind::before {
  content: "";
  position: absolute;
  top: -130px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: rgba(119, 175, 18, .12);
  clip-path: var(--hex);
  animation: albSpin 40s linear infinite
}

.hab-ind__txt {
  position: relative;
  padding-left: 28px;
  border-left: 4px solid var(--l)
}

.hab-ind__txt .hab-h {
  padding-left: 0
}

.hab-ind__txt .hab-h::before {
  display: none
}

.hab-ind__wrap {
  position: relative;
  padding: 0 0 26px 26px
}

.hab-ind__wrap::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  border: 3px solid var(--l);
  border-radius: var(--r);
  transition: transform .6s var(--e)
}

.hab-ind__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%)
}

.hab-ind__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.hab-ind__wrap:hover .hab-ind__img img {
  transform: scale(1.1) rotate(1deg)
}

.hab-ind__wrap:hover::before {
  transform: translate(-8px, 8px)
}

.hab-ind__ico {
  position: absolute;
  right: -10px;
  top: -24px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  animation: albFloat 6s ease-in-out infinite
}

/* Ambattur: photo background + glass card */
.hab-hub {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--g)
}

.hab-hub__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s linear
}

.hab-hub:hover .hab-hub__bg {
  transform: scale(1.1)
}

.hab-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, .92) 35%, rgba(2, 78, 47, .25))
}

.hab-hub__card {
  position: relative;
  padding: 48px 38px 38px;
  background: rgba(255, 255, 255, .96);
  border-left: 8px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.hab-hub__card:hover {
  transform: translateX(10px)
}

.hab-hub__pin {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--l)
}

.hab-hub__card:hover .hab-hub__pin {
  background: var(--g);
  animation: albBounce .9s ease
}

/* machinery: morphing blob */
.hab-blob {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px
}

.hab-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 30s linear infinite
}

.hab-blob__img {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 58% 42% 55% 45%/50% 55% 45% 50%;
  box-shadow: var(--shl);
  animation: albBlob 10s ease-in-out infinite
}

.hab-blob__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.hab-blob:hover .hab-blob__img img {
  transform: scale(1.1)
}

.hab-blob__ico {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px
}

.hab-blob__ico i {
  animation: albSpin 8s linear infinite
}

/* price factors */
.hab-factors {
  margin: 0;
  padding: 0;
  list-style: none
}

.hab-factor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.hab-factor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--l);
  transition: width .6s var(--e)
}

.hab-factor:hover {
  transform: translateX(10px);
  border-color: var(--l);
  box-shadow: var(--shl)
}

.hab-factor:hover::after {
  width: 100%
}

.hab-factor:hover .hab-factor__ico {
  background: var(--l);
  transform: rotate(60deg)
}

.hab-factor__ico i {
  transition: transform .6s var(--e)
}

.hab-factor:hover .hab-factor__ico i {
  transform: rotate(-60deg)
}

.hab-factor__t {
  margin: 0 0 6px;
  font: 700 18px var(--heading-font);
  color: var(--g)
}

.hab-factor__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tx)
}

.hab-factor__p::first-letter {
  text-transform: uppercase
}

/* tips: sticky notes */
.hab-notes {
  margin: 0;
  padding: 0;
  list-style: none
}

.hab-note {
  position: relative;
  height: 100%;
  padding: 34px 22px 34px;
  text-align: center;
  background: var(--soft);
  border-radius: 8px 8px 30px 8px;
  box-shadow: var(--sh);
  transform: rotate(-2deg);
  transition: transform .45s var(--e), box-shadow .45s, background .4s
}

.hab-notes>li:nth-child(even) .hab-note {
  transform: rotate(2deg)
}

.hab-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--w) 50%, var(--l) 50%);
  border-top-left-radius: 12px
}

.hab-note:hover,
.hab-notes>li:nth-child(even) .hab-note:hover {
  transform: rotate(0) translateY(-10px);
  background: var(--w);
  box-shadow: var(--shl)
}

.hab-note__ico {
  margin-bottom: 16px
}

.hab-note:hover .hab-note__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.hab-note__ico i {
  transition: transform .6s var(--e)
}

.hab-note:hover .hab-note__ico i {
  transform: rotate(-60deg)
}

.hab-note__p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--g)
}

/* process: diamond nodes on a moving dashed rail */
.hab-rail {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.hab-stage {
  text-align: center
}

.hab-node {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 12px 0 34px;
  font-size: 28px;
  color: var(--g);
  background: var(--w);
  border: 3px solid var(--l);
  border-radius: 22px;
  box-shadow: var(--sh);
  transform: rotate(45deg);
  transition: transform .6s var(--e), background .4s, color .4s
}

.hab-node i {
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.hab-node b {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 600 14px var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.hab-stage:hover .hab-node {
  color: var(--w);
  background: var(--l);
  transform: rotate(225deg) scale(1.1)
}

.hab-stage:hover .hab-node i,
.hab-stage:hover .hab-node b {
  transform: rotate(-225deg)
}

.hab-stage__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.hab-stage:hover .hab-stage__p {
  color: var(--g)
}

/* why: fill-sweep rows */
.hab-perks {
  margin: 0;
  padding: 0;
  list-style: none
}

.hab-perk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 24px 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  isolation: isolate;
  transition: transform .45s var(--e)
}

.hab-perk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e)
}

.hab-perk:hover {
  transform: translateY(-6px)
}

.hab-perk:hover::before {
  transform: none
}

.hab-perk:hover .hab-perk__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.hab-perk__ico i {
  transition: transform .6s var(--e)
}

.hab-perk:hover .hab-perk__ico i {
  transform: rotate(-60deg)
}

.hab-perk__p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--w);
  transition: color .3s
}

.hab-perk:hover .hab-perk__p {
  color: var(--g)
}

/* areas: radar */
.hab-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto
}

.hab-radar__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--l);
  border-radius: 50%;
  opacity: 0;
  animation: albRipple 3.6s ease-out infinite
}

.hab-radar__ring:nth-child(2) {
  animation-delay: 1.2s
}

.hab-radar__ring:nth-child(3) {
  animation-delay: 2.4s
}

.hab-radar__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  font-size: 34px;
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(2, 78, 47, .12)
}

.hab-radar__chip {
  position: absolute;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 18px;
  background: var(--l);
  animation: albFloat 6s ease-in-out infinite
}

.hab-radar__chip--1 {
  top: 0;
  left: 44%
}

.hab-radar__chip--2 {
  right: 2%;
  bottom: 22%;
  animation-delay: -2s
}

.hab-radar__chip--3 {
  bottom: 6%;
  left: 8%;
  animation-delay: -4s
}

.hab-area {
  padding: 40px 44px;
  background: var(--soft);
  border-bottom: 6px solid var(--l);
  border-radius: var(--r);
  transition: transform .45s var(--e), box-shadow .45s
}

.hab-area:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.hab-place {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 14px;
  font: 500 15px var(--heading-font);
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .14);
  border-radius: 30px;
  transition: background .3s, color .3s, transform .35s var(--e)
}

.hab-place:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px)
}

/* cta */
.hab-cta {
  padding: 10px 0 70px
}

.hab-cta__box {
  position: relative;
  padding: 50px 48px;
  overflow: hidden;
  color: var(--w);
  background: var(--g) radial-gradient(circle at 100% 0, rgba(119, 175, 18, .45), transparent 55%);
  border-radius: 28px;
  box-shadow: var(--shl)
}

.hab-cta__box::before {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, .07);
  clip-path: var(--hex);
  animation: albSpin 30s linear infinite
}

.hab-cta__box .row {
  position: relative
}

.hab-cta__btns {
  flex-direction: column
}

.hab-cta__box .hab-h::before {
  background: var(--l)
}

/* faq */
.hab-photo {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px
}

.hab-photo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--l);
  border-radius: 26px;
  transition: transform .6s var(--e)
}

.hab-photo__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--shl)
}

.hab-photo__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--e)
}

.hab-photo:hover::before {
  transform: translate(-8px, 8px)
}

.hab-photo:hover img {
  transform: scale(1.07)
}

.hab-photo__ico {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  animation: albFloat 6s ease-in-out infinite
}

.hab-accordion {
  counter-reset: albq
}

.hab-qa {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .12);
  border-radius: 14px;
  box-shadow: var(--sh);
  counter-increment: albq;
  transition: border-color .3s, transform .4s var(--e)
}

.hab-qa:hover {
  border-color: var(--l);
  transform: translateX(6px)
}

.hab-qa__head {
  margin: 0
}

.hab-qa__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  font: 600 18px/1.4 var(--heading-font);
  text-align: left;
  color: var(--w);
  background: var(--g);
  border: 0;
  cursor: pointer;
  transition: background .3s, color .3s
}

.hab-qa__btn::before {
  content: counter(albq, decimal-leading-zero);
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  height: 38px;
  font-size: 14px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%
}

.hab-qa__btn::after {
  content: "+";
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  transform: rotate(45deg);
  transition: transform .4s var(--e)
}

.hab-qa__btn.collapsed {
  color: var(--g);
  background: var(--w)
}

.hab-qa__btn.collapsed::after {
  transform: none
}

.hab-qa__btn.collapsed:hover {
  color: var(--l)
}

.hab-qa__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tx)
}

/* keyframes */
@keyframes albSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes albFloat {
  50% {
    translate: 0 -14px
  }
}

@keyframes albMarq {
  to {
    transform: translateX(-50%)
  }
}

@keyframes albBounce {
  40% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(2px)
  }
}

@keyframes albPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0)
  }
}

@keyframes albRipple {
  0% {
    transform: scale(.4);
    opacity: .9
  }

  100% {
    transform: scale(1);
    opacity: 0
  }
}

@keyframes albBlob {
  50% {
    border-radius: 42% 58% 45% 55%/55% 45% 55% 45%
  }
}

@keyframes albDash {
  to {
    background-position: 22px 0
  }
}

/* responsive */
@media (min-width:1200px) {
  .hab-card {
    margin-left: -110px
  }

  .hab-rail::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--l) 0 12px, transparent 12px 22px);
    animation: albDash 1s linear infinite
  }
}

@media (min-width:992px) and (max-width:1199.98px) {
  .hab-card {
    margin-left: -70px;
    padding: 40px 28px 30px
  }
}

@media (max-width:991.98px) {
  .hab-sec {
    padding: 64px 0
  }

  .hab-intro {
    margin-top: -36px;
    padding-top: 84px
  }

  .hab-head {
    margin-bottom: 36px
  }

  .hab-p {
   text-align: justify;
  }

  .hab-card {
    margin: -50px 18px 0
  }

  .hab-hub {
    padding: 80px 0
  }

  .hab-cta__btns {
    flex-direction: row
  }

  .hab-area {
    padding: 32px 28px
  }
}

@media (max-width:767.98px) {
  .hab-brass {
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
    border-radius: 26px
  }
}

@media (max-width:575.98px) {
  .hab-sec {
    padding: 52px 0
  }

  .hab-h {
    font-size: 23px
  }

  .hab-h--sub {
            font-size: 18px;
        line-height: 1.4;
  }

  .hab-stack {
    padding-bottom: 44px
  }

  .hab-seal {
    width: 108px;
    height: 108px;
    right: 0
  }

  .hab-seal b {
    font-size: 24px
  }

  .hab-seal span {
    font-size: 10px
  }

  .hab-btns .theme-btn,
  .hab-btns .hab-ghost,
  .hab-cta__btns .theme-btn,
  .hab-cta__btns .hab-ghost {
    width: 100%
  }

  .hab-ribbon__list li {
    font-size: 16px
  }

  .hab-brass__p {
    font-size: 17px
  }

  .hab-card {
    margin: -40px 8px 0;
    padding: 44px 22px 28px
  }

  .hab-ind__txt {
    padding-left: 18px
  }

  .hab-ind__ico {
    right: -4px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .hab-hub__card {
    padding: 46px 22px 28px
  }

  .hab-factor {
    padding: 14px;
    gap: 14px
  }

  .hab-factor:hover {
    transform: translateY(-6px)
  }

  .hab-cta__box {
    padding: 34px 22px
  }

  .hab-area {
    padding: 28px 20px
  }

  .hab-photo {
    padding: 0 0 20px 20px
  }

  .hab-photo__ico {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .hab-qa__btn {
    padding: 16px;
    font-size: 16.5px
  }

  .hab-qa__body {
    padding: 16px 18px 20px
  }
}

@media (prefers-reduced-motion:reduce) {

  .hab *,
  .hab *::before,
  .hab *::after {
    animation: none !important;
    transition: none !important
  }
}


/* ---- aluminium-only additions ---- */
.hab-note-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 820px;
  margin: 44px auto 0;
  padding: 20px 26px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.hab-note-photo:hover {
  transform: translateY(-5px);
  border-color: var(--g);
  box-shadow: var(--shl)
}

.hab-note-photo:hover .hab-hex {
  background: var(--l);
  transform: rotateY(360deg)
}

.hab-note-photo__p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--g)
}

.hab-duo {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 34px 46px 0
}

.hab-duo figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl)
}

.hab-duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.hab-duo__a {
  aspect-ratio: 4/3;
  border-radius: 26px 26px 26px 90px
}

.hab-duo__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1/1;
  border: 8px solid var(--w);
  border-radius: 50%;
  animation: albFloat 6s ease-in-out infinite
}

.hab-duo:hover img {
  transform: scale(1.08)
}

.hab-duo__ico {
  position: absolute;
  top: -18px;
  right: 10px;
  z-index: 2;
  animation: albFloat 7s ease-in-out -2s infinite
}

.hab-eco {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  color: var(--w);
  background: linear-gradient(120deg, var(--g) 0%, #01381f 100%)
}

.hab-eco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 2px, transparent 2.5px) 0 0 / 26px 26px;
  pointer-events: none
}

.hab-eco .container {
  position: relative
}

.hab-loop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 260px;
  margin: 0 auto
}

.hab-loop__ring {
  position: absolute;
  inset: 0;
  border: 3px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 22s linear infinite
}

.hab-loop__ring:nth-child(2) {
  inset: 34px;
  border-color: rgba(255, 255, 255, .45);
  animation-direction: reverse;
  animation-duration: 16s
}

.hab-loop__core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  font-size: 46px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%;
  transition: transform .6s var(--e)
}

.hab-eco:hover .hab-loop__core {
  transform: rotate(360deg) scale(1.08)
}

@media (max-width:991.98px) {
  .hab-eco {
    padding: 64px 0
  }

  .hab-duo {
    padding: 0 20px 40px 0
  }
}

@media (max-width:575.98px) {
  .hab-eco {
    padding: 52px 0
  }

  .hab-note-photo {
    flex-direction: column;
    text-align: center
  }

  .hab-loop {
    width: 210px;
    height: 210px
  }

  .hab-loop__core {
    width: 90px;
    height: 90px;
    font-size: 38px
  }
}

.hab-intro .hab-p--lead {
  font-size: 16px
}

/* process step heading (H4) */
.hab-stage__t {
  margin: 0 0 6px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.hab-stage:hover .hab-stage__t {
  color: var(--l)
}


/*=======================================================
CABLE WIRE SCRAP BUYERS PAGE (.cwb)  File: cable-wire-scrap-buyers-chennai.php
Banner re-uses About page .abp-hero. Colours = site tokens:
--theme-color #77af12 (lime), --theme-color2 #024e2f (green),
--theme-bg-light #F6F6F6, --body-text-color #757F95
Note: wow scroll animation sits on the column, hover on the inner block.
=======================================================*/
.cwb {
  --g: var(--theme-color2, #024e2f);
  --l: var(--theme-color, #77af12);
  --soft: var(--theme-bg-light, #F6F6F6);
  --tx: var(--body-text-color, #757F95);
  --w: #fff;
  --r: 20px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --sh: 0 12px 40px rgba(2, 78, 47, .10);
  --shl: 0 26px 60px rgba(2, 78, 47, .22);
  --e: cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
  overflow: clip
}

/* helpers */
.cwb-sec {
  position: relative;
  padding: 60px 0
}

.cwb-sec--soft {
  background: var(--soft)
}

.cwb-sec--dark {
  background: var(--g);
  color: var(--w)
}

.cwb-head {
  margin-bottom: 50px
}

.cwb-head .cwb-p {
  text-align: center;
  margin: 0
}

.cwb-h {
  position: relative;
  margin: 0 0 22px;
  padding-left: 18px;
  font: 700 28px/1.35 var(--heading-font);
  letter-spacing: -.01em;
  color: var(--g)
}

.cwb-h::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 5px;
  border-radius: 5px;
  background: var(--l);
  transition: top .4s, bottom .4s, width .4s
}

.cwb-h:hover::before {
  top: 0;
  bottom: 0;
  width: 9px
}

.cwb-h--sub {
  font-size: 25px
}

.cwb-h--lt {
  color: var(--w)
}

.cwb-h--c {
  padding: 0 0 16px;
  text-align: center
}

.cwb-h--c::before,
.cwb-h--c:hover::before {
  top: auto;
  bottom: 0;
  left: 50%;
  width: 64px;
  height: 4px;
  transform: translateX(-50%)
}

.cwb-h--c:hover::before {
  width: 120px
}

.cwb-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tx);
  text-align: justify
}

.cwb-p:last-child {
  margin-bottom: 0
}

.cwb-p--lt {
  color: rgba(255, 255, 255, .86)
}

.cwb-p--lead {
  font-size: 16px
}

.cwb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 24px;
  color: var(--w);
  background: var(--g);
  clip-path: var(--hex);
  transition: background .4s, transform .6s var(--e)
}

.cwb-hex--l {
  background: var(--l)
}

.cwb-btns,
.cwb-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

.cwb-btns {
  margin-top: 28px
}

.cwb-btns .theme-btn,
.cwb-cta__btns .theme-btn {
  padding: 12px 22px
}

.cwb-btns .theme-btn i,
.cwb-cta__btns .theme-btn i {
  margin: 0 6px 0 0;
  transform: none
}

.cwb-ghost {
  display: inline-block;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--g);
  border: 2px solid var(--g);
  border-radius: 10px;
  overflow-wrap: anywhere;
  transition: var(--transition2)
}

.cwb-ghost i {
  margin-right: 6px;
  transition: transform .4s var(--e)
}

.cwb-ghost:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.cwb-ghost:hover i {
  transform: rotate(-12deg) scale(1.15)
}

.cwb-ghost--w {
  color: var(--w);
  border-color: var(--w)
}

.cwb-ghost--w:hover {
  color: var(--g);
  background: var(--w)
}

.cwb-link {
  font-weight: 600;
  color: var(--w);
  border-bottom: 2px solid var(--l);
  overflow-wrap: anywhere;
  transition: color .3s
}

.cwb-link:hover {
  color: var(--l)
}

/* intro: tilted photo stack */
.cwb-intro {
  padding: 60px 0 60px
}

.cwb-stack {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 0 0 70px
}

.cwb-stack figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl);
  transition: transform .6s var(--e)
}

.cwb-stack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cwb-stack__a {
  width: 80%;
  aspect-ratio: 4/5;
  border-radius: 28px;
  transform: rotate(-4deg)
}

.cwb-stack__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  aspect-ratio: 4/3;
  border: 8px solid var(--w);
  border-radius: 22px;
  transform: rotate(5deg);
  animation: albFloat 6s ease-in-out infinite
}

.cwb-stack:hover .cwb-stack__a,
.cwb-stack:hover .cwb-stack__b {
  transform: rotate(0)
}

.cwb-stack:hover img {
  transform: scale(1.08)
}

.cwb-seal {
  position: absolute;
  top: 6px;
  right: -4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  color: var(--w);
  text-align: center;
  background: var(--l);
  clip-path: var(--hex);
  animation: albFloat 7s ease-in-out -2s infinite
}

.cwb-seal b {
  font: 700 30px/1 var(--heading-font)
}

.cwb-seal span {
  max-width: 80px;
  font-size: 11px;
  line-height: 1.25
}

/* ribbon */
.cwb-ribbon {
  overflow: hidden;
  margin: 12px -12px;
  padding: 16px 0;
  background: var(--l);
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 30px rgba(2, 78, 47, .15)
}

.cwb-ribbon__track {
  display: flex;
  width: max-content;
  animation: albMarq 30s linear infinite
}

.cwb-ribbon:hover .cwb-ribbon__track {
  animation-play-state: paused
}

.cwb-ribbon__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none
}

.cwb-ribbon__list li {
  padding-right: 48px;
  font: 600 18px var(--heading-font);
  white-space: nowrap;
  color: var(--g)
}

.cwb-ribbon__list i {
  margin-right: 10px;
  color: var(--w);
  animation: albBounce 2.4s ease infinite
}

/* tiles: slide-up green fill */
.cwb-tile {
  position: relative;
  height: 100%;
  padding: 34px 24px 28px;
  overflow: hidden;
  background: var(--w);
  border-radius: var(--r);
  box-shadow: var(--sh);
  isolation: isolate;
  transition: transform .45s var(--e), box-shadow .45s
}

.cwb-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g);
  transform: translateY(101%);
  transition: transform .55s var(--e)
}

.cwb-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.cwb-tile:hover::before {
  transform: none
}

.cwb-tile__no {
  position: absolute;
  top: 10px;
  right: 18px;
  font: 700 56px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 78, 47, .18);
  transition: -webkit-text-stroke-color .4s, transform .5s var(--e)
}

.cwb-tile:hover .cwb-tile__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4);
  transform: translateY(6px)
}

.cwb-tile__ico {
  margin-bottom: 20px
}

.cwb-tile:hover .cwb-tile__ico {
  background: var(--l);
  transform: rotateY(360deg)
}

.cwb-tile__t {
  margin: 0 0 8px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.cwb-tile__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.cwb-tile__p::first-letter {
  text-transform: uppercase
}

.cwb-tile:hover .cwb-tile__t {
  color: var(--w)
}

.cwb-tile:hover .cwb-tile__p {
  color: rgba(255, 255, 255, .88)
}

/* brass pill */
.cwb-brass {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 10px 36px 10px 10px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: 999px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s
}

.cwb-brass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.cwb-brass__img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--l)
}

.cwb-brass__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cwb-brass:hover .cwb-brass__img img {
  transform: scale(1.15) rotate(4deg)
}

.cwb-brass__ico {
  animation: albPulse 2.6s ease-out infinite
}

.cwb-brass__p {
  margin: 0;
  font: 500 20px/1.55 var(--heading-font);
  color: var(--g)
}

/* shared photo */
.cwb-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: var(--shl)
}

.cwb-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cwb-shot:hover img {
  transform: scale(1.08)
}

.cwb-shot--tall img {
  aspect-ratio: 4/5
}

.cwb-shot__cap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--w);
  background: rgba(2, 78, 47, .93);
  border-radius: 14px;
  transition: transform .5s var(--e)
}

.cwb-shot:hover .cwb-shot__cap {
  transform: translateY(-6px)
}

.cwb-shot__ico {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  background: var(--l);
  border-radius: 50%
}

/* wire: overlapping card */
.cwb-card {
  position: relative;
  z-index: 2;
  padding: 46px 38px 38px;
  background: var(--w);
  border-top: 6px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.cwb-card:hover {
  transform: translateY(-8px)
}

.cwb-card__ico {
  position: absolute;
  top: -36px;
  right: 28px;
  animation: albPulse 2.6s ease-out infinite
}

.cwb-card:hover .cwb-card__ico {
  background: var(--g);
  transform: rotate(60deg)
}

/* industrial: cut-corner image */
.cwb-ind::before {
  content: "";
  position: absolute;
  top: -130px;
  left: -130px;
  width: 380px;
  height: 380px;
  background: rgba(119, 175, 18, .12);
  clip-path: var(--hex);
  animation: albSpin 40s linear infinite
}

.cwb-ind__txt {
  position: relative;
  padding-left: 28px;
  border-left: 4px solid var(--l)
}

.cwb-ind__txt .cwb-h {
  padding-left: 0
}

.cwb-ind__txt .cwb-h::before {
  display: none
}

.cwb-ind__wrap {
  position: relative;
  padding: 0 0 26px 26px
}

.cwb-ind__wrap::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  border: 3px solid var(--l);
  border-radius: var(--r);
  transition: transform .6s var(--e)
}

.cwb-ind__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/2;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%)
}

.cwb-ind__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cwb-ind__wrap:hover .cwb-ind__img img {
  transform: scale(1.1) rotate(1deg)
}

.cwb-ind__wrap:hover::before {
  transform: translate(-8px, 8px)
}

.cwb-ind__ico {
  position: absolute;
  right: -10px;
  top: -24px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  animation: albFloat 6s ease-in-out infinite
}

/* Ambattur: photo background + glass card */
.cwb-hub {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--g)
}

.cwb-hub__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s linear
}

.cwb-hub:hover .cwb-hub__bg {
  transform: scale(1.1)
}

.cwb-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(2, 78, 47, .92) 35%, rgba(2, 78, 47, .25))
}

.cwb-hub__card {
  position: relative;
  padding: 48px 38px 38px;
  background: rgba(255, 255, 255, .96);
  border-left: 8px solid var(--l);
  border-radius: var(--r);
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.cwb-hub__card:hover {
  transform: translateX(10px)
}

.cwb-hub__pin {
  position: absolute;
  top: -34px;
  left: 30px;
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  background: var(--l)
}

.cwb-hub__card:hover .cwb-hub__pin {
  background: var(--g);
  animation: albBounce .9s ease
}

/* machinery: morphing blob */
.cwb-blob {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px
}

.cwb-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 30s linear infinite
}

.cwb-blob__img {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 58% 42% 55% 45%/50% 55% 45% 50%;
  box-shadow: var(--shl);
  animation: albBlob 10s ease-in-out infinite
}

.cwb-blob__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cwb-blob:hover .cwb-blob__img img {
  transform: scale(1.1)
}

.cwb-blob__ico {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 2;
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  font-size: 28px
}

.cwb-blob__ico i {
  animation: albSpin 8s linear infinite
}

/* price factors */
.cwb-factors {
  margin: 0;
  padding: 0;
  list-style: none
}

.cwb-factor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.cwb-factor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--l);
  transition: width .6s var(--e)
}

.cwb-factor:hover {
  transform: translateX(10px);
  border-color: var(--l);
  box-shadow: var(--shl)
}

.cwb-factor:hover::after {
  width: 100%
}

.cwb-factor:hover .cwb-factor__ico {
  background: var(--l);
  transform: rotate(60deg)
}

.cwb-factor__ico i {
  transition: transform .6s var(--e)
}

.cwb-factor:hover .cwb-factor__ico i {
  transform: rotate(-60deg)
}

.cwb-factor__t {
  margin: 0 0 6px;
  font: 700 18px var(--heading-font);
  color: var(--g)
}

.cwb-factor__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tx)
}

.cwb-factor__p::first-letter {
  text-transform: uppercase
}

/* tips: sticky notes */
.cwb-notes {
  margin: 0;
  padding: 0;
  list-style: none
}

.cwb-note {
  position: relative;
  height: 100%;
  padding: 34px 22px 34px;
  text-align: center;
  background: var(--soft);
  border-radius: 8px 8px 30px 8px;
  box-shadow: var(--sh);
  transform: rotate(-2deg);
  transition: transform .45s var(--e), box-shadow .45s, background .4s
}

.cwb-notes>li:nth-child(even) .cwb-note {
  transform: rotate(2deg)
}

.cwb-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--w) 50%, var(--l) 50%);
  border-top-left-radius: 12px
}

.cwb-note:hover,
.cwb-notes>li:nth-child(even) .cwb-note:hover {
  transform: rotate(0) translateY(-10px);
  background: var(--w);
  box-shadow: var(--shl)
}

.cwb-note__ico {
  margin-bottom: 16px
}

.cwb-note:hover .cwb-note__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.cwb-note__ico i {
  transition: transform .6s var(--e)
}

.cwb-note:hover .cwb-note__ico i {
  transform: rotate(-60deg)
}

.cwb-note__p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--g)
}

/* process: diamond nodes on a moving dashed rail */
.cwb-rail {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.cwb-stage {
  text-align: center
}

.cwb-node {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 12px 0 34px;
  font-size: 28px;
  color: var(--g);
  background: var(--w);
  border: 3px solid var(--l);
  border-radius: 22px;
  box-shadow: var(--sh);
  transform: rotate(45deg);
  transition: transform .6s var(--e), background .4s, color .4s
}

.cwb-node i {
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.cwb-node b {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 600 14px var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  transform: rotate(-45deg);
  transition: transform .6s var(--e)
}

.cwb-stage:hover .cwb-node {
  color: var(--w);
  background: var(--l);
  transform: rotate(225deg) scale(1.1)
}

.cwb-stage:hover .cwb-node i,
.cwb-stage:hover .cwb-node b {
  transform: rotate(-225deg)
}

.cwb-stage__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx);
  transition: color .3s
}

.cwb-stage:hover .cwb-stage__p {
  color: var(--g)
}

/* why: fill-sweep rows */
.cwb-perks {
  margin: 0;
  padding: 0;
  list-style: none
}

.cwb-perk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 24px 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  isolation: isolate;
  transition: transform .45s var(--e)
}

.cwb-perk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e)
}

.cwb-perk:hover {
  transform: translateY(-6px)
}

.cwb-perk:hover::before {
  transform: none
}

.cwb-perk:hover .cwb-perk__ico {
  background: var(--g);
  transform: rotate(60deg)
}

.cwb-perk__ico i {
  transition: transform .6s var(--e)
}

.cwb-perk:hover .cwb-perk__ico i {
  transform: rotate(-60deg)
}

.cwb-perk__p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--w);
  transition: color .3s
}

.cwb-perk:hover .cwb-perk__p {
  color: var(--g)
}

/* areas: radar */
.cwb-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto
}

.cwb-radar__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--l);
  border-radius: 50%;
  opacity: 0;
  animation: albRipple 3.6s ease-out infinite
}

.cwb-radar__ring:nth-child(2) {
  animation-delay: 1.2s
}

.cwb-radar__ring:nth-child(3) {
  animation-delay: 2.4s
}

.cwb-radar__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  font-size: 34px;
  color: var(--w);
  background: var(--g);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(2, 78, 47, .12)
}

.cwb-radar__chip {
  position: absolute;
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 18px;
  background: var(--l);
  animation: albFloat 6s ease-in-out infinite
}

.cwb-radar__chip--1 {
  top: 0;
  left: 44%
}

.cwb-radar__chip--2 {
  right: 2%;
  bottom: 22%;
  animation-delay: -2s
}

.cwb-radar__chip--3 {
  bottom: 6%;
  left: 8%;
  animation-delay: -4s
}

.cwb-area {
  padding: 40px 44px;
  background: var(--soft);
  border-bottom: 6px solid var(--l);
  border-radius: var(--r);
  transition: transform .45s var(--e), box-shadow .45s
}

.cwb-area:hover {
  transform: translateY(-6px);
  box-shadow: var(--shl)
}

.cwb-place {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 14px;
  font: 500 15px var(--heading-font);
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .14);
  border-radius: 30px;
  transition: background .3s, color .3s, transform .35s var(--e)
}

.cwb-place:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px)
}

/* cta */
.cwb-cta {
  padding: 10px 0 70px
}

.cwb-cta__box {
  position: relative;
  padding: 50px 48px;
  overflow: hidden;
  color: var(--w);
  background: var(--g) radial-gradient(circle at 100% 0, rgba(119, 175, 18, .45), transparent 55%);
  border-radius: 28px;
  box-shadow: var(--shl)
}

.cwb-cta__box::before {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, .07);
  clip-path: var(--hex);
  animation: albSpin 30s linear infinite
}

.cwb-cta__box .row {
  position: relative
}

.cwb-cta__btns {
  flex-direction: column
}

.cwb-cta__box .cwb-h::before {
  background: var(--l)
}

/* faq */
.cwb-photo {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 0 26px 26px
}

.cwb-photo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78%;
  height: 78%;
  background: var(--l);
  border-radius: 26px;
  transition: transform .6s var(--e)
}

.cwb-photo__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--shl)
}

.cwb-photo__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--e)
}

.cwb-photo:hover::before {
  transform: translate(-8px, 8px)
}

.cwb-photo:hover img {
  transform: scale(1.07)
}

.cwb-photo__ico {
  position: absolute;
  top: 24px;
  right: -14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  flex-basis: 76px;
  font-size: 28px;
  animation: albFloat 6s ease-in-out infinite
}

.cwb-accordion {
  counter-reset: albq
}

.cwb-qa {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .12);
  border-radius: 14px;
  box-shadow: var(--sh);
  counter-increment: albq;
  transition: border-color .3s, transform .4s var(--e)
}

.cwb-qa:hover {
  border-color: var(--l);
  transform: translateX(6px)
}

.cwb-qa__head {
  margin: 0
}

.cwb-qa__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  font: 600 18px/1.4 var(--heading-font);
  text-align: left;
  color: var(--w);
  background: var(--g);
  border: 0;
  cursor: pointer;
  transition: background .3s, color .3s
}

.cwb-qa__btn::before {
  content: counter(albq, decimal-leading-zero);
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  height: 38px;
  font-size: 14px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%
}

.cwb-qa__btn::after {
  content: "+";
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  transform: rotate(45deg);
  transition: transform .4s var(--e)
}

.cwb-qa__btn.collapsed {
  color: var(--g);
  background: var(--w)
}

.cwb-qa__btn.collapsed::after {
  transform: none
}

.cwb-qa__btn.collapsed:hover {
  color: var(--l)
}

.cwb-qa__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--tx)
}

/* keyframes */
@keyframes albSpin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes albFloat {
  50% {
    translate: 0 -14px
  }
}

@keyframes albMarq {
  to {
    transform: translateX(-50%)
  }
}

@keyframes albBounce {
  40% {
    transform: translateY(-8px)
  }

  70% {
    transform: translateY(2px)
  }
}

@keyframes albPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(119, 175, 18, 0)
  }
}

@keyframes albRipple {
  0% {
    transform: scale(.4);
    opacity: .9
  }

  100% {
    transform: scale(1);
    opacity: 0
  }
}

@keyframes albBlob {
  50% {
    border-radius: 42% 58% 45% 55%/55% 45% 55% 45%
  }
}

@keyframes albDash {
  to {
    background-position: 22px 0
  }
}

/* responsive */
@media (min-width:1200px) {
  .cwb-card {
    margin-left: -110px
  }

  .cwb-rail::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--l) 0 12px, transparent 12px 22px);
    animation: albDash 1s linear infinite
  }
}

@media (min-width:992px) and (max-width:1199.98px) {
  .cwb-card {
    margin-left: -70px;
    padding: 40px 28px 30px
  }
}

@media (max-width:991.98px) {
  .cwb-sec {
    padding: 64px 0
  }

  .cwb-intro {
    margin-top: -36px;
    padding-top: 84px
  }

  .cwb-head {
    margin-bottom: 36px
  }

  .cwb-p {
    text-align: justify;
  }

  .cwb-card {
    margin: -50px 18px 0
  }

  .cwb-hub {
    padding: 80px 0
  }

  .cwb-cta__btns {
    flex-direction: row
  }

  .cwb-area {
    padding: 32px 28px
  }
}

@media (max-width:767.98px) {
  .cwb-brass {
    flex-direction: column;
    padding: 26px 22px;
    text-align: center;
    border-radius: 26px
  }
}

@media (max-width:575.98px) {
  .cwb-sec {
    padding: 52px 0
  }

  .cwb-h {
    font-size: 23px
  }

  .cwb-h--sub {
          font-size: 20px;
        line-height: 1.4;
  }

  .cwb-stack {
    padding-bottom: 44px
  }

  .cwb-seal {
    width: 108px;
    height: 108px;
    right: 0
  }

  .cwb-seal b {
    font-size: 24px
  }

  .cwb-seal span {
    font-size: 10px
  }

  .cwb-btns .theme-btn,
  .cwb-btns .cwb-ghost,
  .cwb-cta__btns .theme-btn,
  .cwb-cta__btns .cwb-ghost {
    width: 100%
  }

  .cwb-ribbon__list li {
    font-size: 16px
  }

  .cwb-brass__p {
    font-size: 17px
  }

  .cwb-card {
    margin: -40px 8px 0;
    padding: 44px 22px 28px
  }

  .cwb-ind__txt {
    padding-left: 18px
  }

  .cwb-ind__ico {
    right: -4px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .cwb-hub__card {
    padding: 46px 22px 28px
  }

  .cwb-factor {
    padding: 12px;
    gap: 14px
  }

  .cwb-factor:hover {
    transform: translateY(-6px)
  }

  .cwb-cta__box {
    padding: 34px 22px
  }

  .cwb-area {
    padding: 28px 20px
  }

  .cwb-photo {
    padding: 0 0 20px 20px
  }

  .cwb-photo__ico {
    right: -6px;
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 22px
  }

  .cwb-qa__btn {
    padding: 16px;
    font-size: 16.5px
  }

  .cwb-qa__body {
    padding: 16px 18px 20px
  }
}

@media (prefers-reduced-motion:reduce) {

  .cwb *,
  .cwb *::before,
  .cwb *::after {
    animation: none !important;
    transition: none !important
  }
}


/* ---- aluminium-only additions ---- */
.cwb-note-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 820px;
  margin: 44px auto 0;
  padding: 20px 26px;
  background: var(--w);
  border: 2px dashed var(--l);
  border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s, border-color .3s
}

.cwb-note-photo:hover {
  transform: translateY(-5px);
  border-color: var(--g);
  box-shadow: var(--shl)
}

.cwb-note-photo:hover .cwb-hex {
  background: var(--l);
  transform: rotateY(360deg)
}

.cwb-note-photo__p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--g)
}

.cwb-duo {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 34px 46px 0
}

.cwb-duo figure {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shl)
}

.cwb-duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.cwb-duo__a {
  aspect-ratio: 4/3;
  border-radius: 26px 26px 26px 90px
}

.cwb-duo__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1/1;
  border: 8px solid var(--w);
  border-radius: 50%;
  animation: albFloat 6s ease-in-out infinite
}

.cwb-duo:hover img {
  transform: scale(1.08)
}

.cwb-duo__ico {
  position: absolute;
  top: -18px;
  right: 10px;
  z-index: 2;
  animation: albFloat 7s ease-in-out -2s infinite
}

.cwb-eco {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  color: var(--w);
  background: linear-gradient(120deg, var(--g) 0%, #01381f 100%)
}

.cwb-eco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 2px, transparent 2.5px) 0 0 / 26px 26px;
  pointer-events: none
}

.cwb-eco .container {
  position: relative
}

.cwb-loop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 260px;
  margin: 0 auto
}

.cwb-loop__ring {
  position: absolute;
  inset: 0;
  border: 3px dashed var(--l);
  border-radius: 50%;
  animation: albSpin 22s linear infinite
}

.cwb-loop__ring:nth-child(2) {
  inset: 34px;
  border-color: rgba(255, 255, 255, .45);
  animation-direction: reverse;
  animation-duration: 16s
}

.cwb-loop__core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  font-size: 46px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%;
  transition: transform .6s var(--e)
}

.cwb-eco:hover .cwb-loop__core {
  transform: rotate(360deg) scale(1.08)
}

@media (max-width:991.98px) {
  .cwb-eco {
    padding: 64px 0
  }

  .cwb-duo {
    padding: 0 20px 40px 0
  }
}

@media (max-width:575.98px) {
  .cwb-eco {
    padding: 52px 0
  }

  .cwb-note-photo {
    flex-direction: column;
    text-align: center
  }

  .cwb-loop {
    width: 210px;
    height: 210px
  }

  .cwb-loop__core {
    width: 90px;
    height: 90px;
    font-size: 38px
  }
}

.cwb-intro .cwb-p--lead {
  font-size: 16px
}

/* process step heading (H4) */
.cwb-stage__t {
  margin: 0 0 6px;
  font: 700 18px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s
}

.cwb-stage:hover .cwb-stage__t {
  color: var(--l)
}


/*=======================================================
OTHER SCRAP BUYERS PAGE (.osb)  File: other-scrap-buyers-chennai.php
Unique layout: bento category grid, alternating route timeline,
receipt-style pricing, glass "why" cards, link-card CTA.
Banner re-uses About page .abp-hero. Colours = site tokens:
--theme-color #77af12 (lime), --theme-color2 #024e2f (green),
--theme-bg-light #F6F6F6, --body-text-color #757F95
Note: wow scroll animation sits on the column, hover on the inner block.
=======================================================*/
.osb {
  --g: var(--theme-color2, #024e2f);
  --l: var(--theme-color, #77af12);
  --soft: var(--theme-bg-light, #F6F6F6);
  --tx: var(--body-text-color, #757F95);
  --ink: #23323a;
  --w: #fff;
  --r: 22px;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  --sh: 0 14px 44px rgba(2, 78, 47, .10);
  --shl: 0 28px 64px rgba(2, 78, 47, .22);
  --e: cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
  overflow: clip
}

/* helpers */
.osb-sec {
  position: relative;
  padding: 60px 0
}

.osb-sec--soft {
  background: var(--soft)
}

.osb-sec--dark {
  background: var(--g);
  color: var(--w);
  isolation: isolate
}

.osb-sec--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(119, 175, 18, .28), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(119, 175, 18, .18), transparent 40%)
}

.osb-head {
  margin-bottom: 52px;
  text-align: center
}

.osb-h {
  position: relative;
  margin: 0 0 18px;
  font: 700 clamp(28px, 3.4vw, 42px)/1.2 var(--heading-font);
  color: var(--g);
      font-size: 28px;
}

.osb-h--c::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin: 16px auto 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--l), var(--g))
}

.osb-h--sub {
  font-size: clamp(22px, 2.4vw, 30px)
}

.osb-h--lt {
  color: var(--w)
}

.osb-p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--tx)
}

.osb-p:last-child {
  margin-bottom: 0;
      text-align: justify;
}

.osb-p--lead {
    font-size: 17px;
    color: #585858;
    text-align: justify;
}

.osb-p--lt {
  color: rgba(255, 255, 255, .86)
}

.osb-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  color: var(--w);
  background: var(--g);
  clip-path: var(--hex);
  font-size: 22px;
  transition: background .4s var(--e), transform .5s var(--e)
}

.osb-hex--l {
  background: var(--l)
}

.osb-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px
}

.osb-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font: 600 15px/1 var(--heading-font);
  color: var(--g);
  border: 2px solid var(--g);
  border-radius: 50px;
  transition: all .35s var(--e)
}

.osb-ghost:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-3px)
}

.osb-ghost--w {
  color: var(--w);
  border-color: rgba(255, 255, 255, .7)
}

.osb-ghost--w:hover {
  color: var(--g);
  background: var(--w);
  border-color: var(--w)
}

.osb-link {
  color: var(--l);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color .3s
}

.osb-link:hover {
  color: var(--w);
  border-color: var(--l)
}

/* intro */
.osb-intro {
  padding-bottom: 40px
}

.osb-visual {
  position: relative;
  padding: 0 30px 30px 0
}

.osb-visual__main {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r) var(--r) 120px var(--r);
  box-shadow: var(--shl)
}

.osb-visual__main img {
  display: block;
  width: 100%;
  height: 430px;
  object-fit: cover;
  transition: transform 1.2s var(--e)
}

.osb-visual:hover .osb-visual__main img {
  transform: scale(1.07)
}

.osb-visual__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  margin: 0;
  overflow: hidden;
  border: 8px solid var(--w);
  border-radius: var(--r);
  box-shadow: var(--sh);
  animation: osbFloat 6s ease-in-out infinite
}

.osb-visual__sub img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover
}

.osb-visual__tag {
  position: absolute;
  top: 26px;
  left: -14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  color: var(--w);
  background: var(--g);
  border-radius: 60px;
  box-shadow: var(--sh);
  font: 600 14px/1.3 var(--heading-font)
}

.osb-visual__tag i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--g);
  background: var(--l);
  border-radius: 50%
}

.osb-stats {
  margin-top: 64px
}

.osb-stat {
  position: relative;
  height: 100%;
  padding: 30px 28px;
  text-align: center;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
  transition: transform .45s var(--e), box-shadow .45s var(--e)
}

.osb-stat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--l), var(--g));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--e)
}

.osb-stat:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.osb-stat:hover::before {
  transform: scaleX(1)
}

.osb-stat__no {
  display: block;
  font: 800 clamp(38px, 4vw, 52px)/1 var(--heading-font);
  color: var(--g)
}

.osb-stat__no em {
  font-style: normal;
  color: var(--l)
}

.osb-stat__lb {
  display: block;
  margin-top: 8px;
  font: 500 15px/1.4 var(--body-font);
  color: var(--tx)
}

/* H2 #1 : bento categories */
.osb-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 250px;
  padding: 32px 30px;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--e), box-shadow .45s var(--e)
}

.osb-cat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--g), #03683f);
  transform: translateY(101%);
  transition: transform .55s var(--e)
}

.osb-cat:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.osb-cat:hover::before {
  transform: translateY(0)
}

.osb-cat__no {
  position: absolute;
  top: 14px;
  right: 22px;
  font: 800 54px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 78, 47, .16);
  transition: -webkit-text-stroke-color .4s
}

.osb-cat:hover .osb-cat__no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .35)
}

.osb-cat:hover .osb-hex {
  background: var(--l);
  transform: rotate(-12deg) scale(1.08)
}

.osb-cat__t {
  margin: 6px 0 0;
  font: 700 21px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .35s;
  font-size: 18px;
}

.osb-cat__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--tx);
  transition: color .35s
}

.osb-cat:hover .osb-cat__t {
  color: var(--w)
}

.osb-cat:hover .osb-cat__p {
  color: rgba(255, 255, 255, .85)
}

.osb-cat--wide {
  flex-direction: row;
  align-items: center;
  gap: 26px
}

.osb-cat--wide .osb-cat__body {
  flex: 1
}

.osb-cat--wide .osb-cat__t {
  margin-top: 0
}

.osb-ask {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 46px;
  padding: 22px 26px 22px 22px;
  color: var(--w);
  background: var(--g);
  border-radius: 80px;
  box-shadow: var(--shl);
  transition: transform .45s var(--e)
}

.osb-ask:hover {
  transform: translateY(-5px)
}

.osb-ask__p {
  flex: 1;
  margin: 0;
  font: 500 17px/1.6 var(--body-font)
}

/* H3 route timeline */
.osb-route-head {
  margin: 100px 0 56px;
  text-align: center
}

.osb-route {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.osb-route::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--l) 0 12px, transparent 12px 22px)
}

.osb-stop {
  position: relative;
  padding-bottom: 46px
}

.osb-stop:last-child {
  padding-bottom: 0
}

.osb-stop__node {
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 2;
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  transform: translateX(-50%);
  font-size: 20px;
  background: var(--l)
}

.osb-stop__node::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--l);
  opacity: .5;
  animation: osbPulse 2.4s ease-out infinite
}

.osb-stop__card {
  overflow: hidden;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .5s var(--e), box-shadow .5s var(--e)
}

.osb-stop__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shl)
}

.osb-stop__fig {
  position: relative;
  margin: 0;
  overflow: hidden
}

.osb-stop__fig img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform .9s var(--e)
}

.osb-stop__card:hover .osb-stop__fig img {
  transform: scale(1.09)
}

.osb-stop__tag {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 7px 16px;
  font: 600 13px/1 var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 40px;
  transition: background .35s
}

.osb-stop__card:hover .osb-stop__tag {
  background: var(--l)
}

.osb-stop__body {
  padding: 28px 30px 32px
}

.osb-stop__t {
  margin: 0 0 12px;
  font: 700 22px/1.3 var(--heading-font);
  color: var(--g);
  transition: color .3s;
      font-size: 20px;
}

.osb-stop__card:hover .osb-stop__t {
  color: var(--l)
}

/* H2 #2 : pricing receipt */
.osb-receipt {
  position: relative;
  max-width: 420px;
  margin: 0 auto 14px;
  padding: 36px 32px 40px;
  background: var(--w);
  border-top: 8px solid var(--l);
  box-shadow: var(--shl);
  transform: rotate(-2.5deg);
  transition: transform .6s var(--e)
}

.osb-receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: linear-gradient(135deg, var(--w) 25%, transparent 25%) -8px 0, linear-gradient(225deg, var(--w) 25%, transparent 25%) -8px 0;
  background-size: 16px 16px
}

.osb-receipt:hover {
  transform: rotate(0) translateY(-6px)
}

.osb-receipt__t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding-bottom: 16px;
  font: 700 17px/1.2 var(--heading-font);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--g);
  border-bottom: 2px dashed rgba(2, 78, 47, .25)
}

.osb-receipt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 11px 0;
  font: 500 15px/1.3 var(--body-font);
  color: var(--ink);
  border-bottom: 1px dotted rgba(2, 78, 47, .22)
}

.osb-receipt__row i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  color: var(--w);
  background: var(--l);
  border-radius: 50%;
  animation: osbTick 3.6s ease-in-out infinite
}

.osb-receipt__row:nth-of-type(2) i {
  animation-delay: .3s
}

.osb-receipt__row:nth-of-type(3) i {
  animation-delay: .6s
}

.osb-receipt__row:nth-of-type(4) i {
  animation-delay: .9s
}

.osb-receipt__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding: 14px 18px;
  font: 700 16px/1.2 var(--heading-font);
  color: var(--w);
  background: var(--g);
  border-radius: 12px
}

.osb-step {
  display: flex;
  gap: 22px;
  height: 100%;
  padding: 26px 26px 26px 22px;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-left: 6px solid var(--l);
  border-radius: 16px;
  box-shadow: var(--sh);
  transition: transform .45s var(--e), border-color .45s, box-shadow .45s var(--e)
}

.osb-step:hover {
  transform: translateX(10px);
  border-left-color: var(--g);
  box-shadow: var(--shl)
}

.osb-step__no {
  flex: 0 0 auto;
  font: 800 40px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--l);
  transition: color .35s
}

.osb-step:hover .osb-step__no {
  color: var(--l)
}

.osb-step__t {
  margin: 0 0 6px;
  font: 700 19px/1.3 var(--heading-font);
  color: var(--g)
}

.osb-step__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tx)
}

/* why choose us */
.osb-perk {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 34px 30px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r);
  backdrop-filter: blur(6px);
  transition: transform .45s var(--e), border-color .4s, background .4s
}

.osb-perk:hover {
  transform: translateY(-9px);
  border-color: var(--l);
  background: rgba(255, 255, 255, .11)
}

.osb-perk:hover .osb-hex {
  transform: rotate(14deg) scale(1.08)
}

.osb-perk__p {
  margin: 0;
  font: 600 17px/1.6 var(--heading-font);
  color: var(--w)
}

.osb-perk__no {
  position: absolute;
  top: 14px;
  right: 20px;
  font: 800 46px/1 var(--heading-font);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22)
}

/* areas */
.osb-area {
  position: relative;
  padding: 54px 50px;
  background: var(--soft);
  border-radius: 34px;
  overflow: hidden
}

.osb-area::after {
  content: "\f5a0";
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
  font-weight: 900;
  position: absolute;
  right: -20px;
  bottom: -46px;
  font-size: 210px;
  line-height: 1;
  color: rgba(2, 78, 47, .06);
  pointer-events: none
}

.osb-places {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none
}

.osb-place {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px 10px 16px;
  font: 600 15px/1 var(--heading-font);
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .14);
  border-radius: 40px;
  transition: all .35s var(--e)
}

.osb-place::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--l);
  border-radius: 50%;
  animation: osbDot 2s ease-in-out infinite
}

.osb-place:hover {
  color: var(--w);
  background: var(--g);
  transform: translateY(-4px)
}

/* CTA + link cards */
.osb-cta {
  padding: 0 0 90px
}

.osb-cta__box {
  position: relative;
  padding: 62px 54px;
  color: var(--w);
  background: linear-gradient(120deg, var(--g), #03683f);
  border-radius: 34px;
  box-shadow: var(--shl);
  overflow: hidden;
  isolation: isolate
}

.osb-cta__box::before,
.osb-cta__box::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(119, 175, 18, .22);
  clip-path: var(--hex);
  animation: osbFloat 7s ease-in-out infinite
}

.osb-cta__box::before {
  top: -60px;
  right: 8%;
  width: 240px;
  height: 240px
}

.osb-cta__box::after {
  bottom: -70px;
  left: 42%;
  width: 170px;
  height: 170px;
  animation-delay: -3s
}

.osb-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.osb-cta__btns .theme-btn,
.osb-cta__btns .osb-ghost {
  justify-content: center;
  text-align: center
}

.osb-links {
  margin-top: 46px
}

.osb-lc {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 22px 24px;
  color: var(--g);
  background: var(--w);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 18px;
  transition: transform .4s var(--e), background .4s, color .4s
}

.osb-lc:hover {
  color: var(--w);
  background: var(--l);
  transform: translateY(-6px)
}

.osb-lc .osb-hex {
  flex-basis: 52px;
  width: 52px;
  height: 52px;
  font-size: 19px
}

.osb-lc:hover .osb-hex {
  background: var(--g)
}

.osb-lc__t {
  flex: 1;
  margin: 0;
  font: 700 17px/1.3 var(--heading-font)
}

.osb-lc__ar {
  transition: transform .35s var(--e)
}

.osb-lc:hover .osb-lc__ar {
  transform: translateX(7px)
}

/* faq */
.osb-qa {
  position: relative;
  height: 100%;
  padding: 34px 32px 34px 92px;
  background: var(--w);
  border: 1px solid rgba(2, 78, 47, .1);
  border-radius: var(--r);
  box-shadow: var(--sh);
  transition: transform .45s var(--e), box-shadow .45s var(--e)
}

.osb-qa:hover {
  transform: translateY(-7px);
  box-shadow: var(--shl)
}

.osb-qa__q {
  position: absolute;
  top: 30px;
  left: 26px;
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  font: 800 22px/1 var(--heading-font)
}

.osb-qa:hover .osb-qa__q {
  background: var(--g);
  transform: rotate(-10deg)
}

.osb-qa__t {
  margin: 0 0 10px;
  font: 700 19px/1.4 var(--heading-font);
  color: var(--g)
}

.osb-qa__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--tx)
}

@keyframes osbFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-14px)
  }
}

@keyframes osbPulse {
  0% {
    transform: scale(1);
    opacity: .5
  }

  100% {
    transform: scale(1.9);
    opacity: 0
  }
}

@keyframes osbDot {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(119, 175, 18, .55)
  }

  50% {
    box-shadow: 0 0 0 7px rgba(119, 175, 18, 0)
  }
}

@keyframes osbTick {

  0%,
  60%,
  100% {
    transform: scale(1)
  }

  30% {
    transform: scale(1.25)
  }
}

/* responsive */
@media (max-width: 991.98px) {
  .osb-sec {
    padding: 64px 0
  }

  .osb-cta {
    padding-bottom: 64px
  }

  .osb-visual__main img {
    height: 340px
  }

  .osb-route-head {
    margin: 70px 0 40px
  }

  .osb-route::before {
    left: 28px;
    transform: none
  }

  .osb-stop {
    padding-left: 76px
  }

  .osb-stop__node {
    left: 28px
  }

  .osb-ask {
    border-radius: 26px;
    flex-wrap: wrap
  }

  .osb-cta__box {
    padding: 46px 32px
  }

  .osb-area {
    padding: 40px 30px
  }

  .osb-receipt {
    margin-bottom: 30px
  }
}

@media (max-width: 575.98px) {
  .osb-cat--wide {
    flex-direction: column;
    align-items: flex-start
  }

  .osb-cat {
    min-height: 0;
    padding: 28px 24px
  }

  .osb-visual {
    padding: 0 14px 24px 0
  }

  .osb-visual__tag {
    left: 6px
  }

  .osb-visual__sub img {
    height: 110px
  }

  .osb-qa {
    padding: 88px 24px 28px
  }

  .osb-qa__q {
    top: 24px
  }

  .osb-step {
    flex-direction: column;
    gap: 8px
  }

  .osb-stop {
    padding-left: 62px
  }

  .osb-route::before {
    left: 20px
  }

  .osb-stop__node {
    left: 20px;
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 16px
  }

  .osb-btns .theme-btn,
  .osb-btns .osb-ghost {
    width: 100%;
    justify-content: center
  }
}

@media (prefers-reduced-motion: reduce) {

  .osb *,
  .osb *::before,
  .osb *::after {
    animation: none !important;
    transition: none !important
  }
}

/* ---- heading hierarchy support (same look, semantic tags) ---- */
.service-content h3 {
  font-size: 18px;
  font-weight: 800;
}

.service-content h3 a {
  color: var(--color-dark);
}

.service-content h3 a:hover {
  color: var(--theme-color);
}

.cta-content h3 {
  color: var(--color-white);
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  .cta-content h3 {
    font-size: 2.5rem;
  }
}

.counter-item p.title {
  margin-bottom: 0;
}

.footer-contact .content h5 {
  color: var(--color-white);
  margin-bottom: 5px;
  font-size: 1rem;
}

.footer-area.light .footer-contact .content h5 {
  color: var(--color-dark);
}

.contact-info .content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-dark);
}

.about-experience .exp-number {
  color: var(--color-white);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .5rem;
}

/* main */
.hero-single .hero-content .hero-title{
    color: var(--color-white);
    font-size: 55px;
    font-weight: 800;
    margin: 20px 0;
    text-transform: capitalize;
    line-height: 1.2;
}

.service-area .site-heading.mb-0 {
    text-align: center;
    padding-bottom: 20px;
}

.ct-negative .title {
    font-size: 30px;
    font-weight: 800;
}

.alb-sec.alb-intro .title {
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 20px;
    line-height: 1.4;
}

.tvb-intro .title {
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 15px;
    line-height: 1.4;
}

.cwb-intro .title {
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 15px;
}

.csb-intro .title {
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 15px;
    line-height: 1.4;
}

.hab-intro .title{
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 15px;
    line-height: 1.4;
}

.osb-intro .title {
  font-size: 25px;
    font-weight: 700;
    padding-bottom: 15px;
        line-height: 1.4;
}


/*====================
Floating contact icons (WhatsApp + Call)
======================*/

.float-contact {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 999;
  padding: 0;
  width: auto;
}

.float-contact .container-fluid {
  padding: 0;
}

.float-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.float-contact-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--color-white);
  font-size: 26px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: var(--transition);
}

.float-contact-link:hover,
.float-contact-link:focus-visible {
  color: var(--color-white);
  transform: scale(1.1);
}

.float-contact-whatsapp {
  background: #25d366;
}

.float-contact-phone {
  background: #0d6efd;
  font-size: 22px;
}

/* pulse ring */
.float-contact-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  z-index: -1;
  animation: float-contact-pulse 2s ease-out infinite;
}

.float-contact-phone::before {
  animation-delay: 1s;
}

@keyframes float-contact-pulse {
  0% {
    transform: scale(1);
    opacity: .6;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* text label slides out on hover (desktop) */
.float-contact-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(10px, -50%);
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
}

.float-contact-link:hover .float-contact-label,
.float-contact-link:focus-visible .float-contact-label {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

@media (max-width: 767px) {
  .float-contact {
    right: 12px;
  }

  .float-contact-link {
    width: 48px;
    height: 48px;
    font-size: 23px;
  }

  .float-contact-phone {
    font-size: 19px;
  }

  .float-contact-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-contact-link::before {
    animation: none;
  }
}

/*====================
Contact form validation
======================*/

.contact-form .form-group {
  position: relative;
}

.contact-form .form-control.is-invalid {
  border-color: #d93025;
}

.contact-form .form-control.is-valid {
  border-color: var(--theme-color);
}

.contact-form .field-error {
  display: none;
  margin-top: 6px;
  color: #d93025;
  font-size: 14px;
  line-height: 1.4;
}

.contact-form .field-error.show {
  display: block;
}

.contact-form .form-message.success {
  color: #1e7e4f;
  background: rgba(65, 190, 125, .12);
}

.contact-form .form-message.error {
  color: #d93025;
  background: rgba(217, 48, 37, .08);
}

.contact-form .theme-btn.is-loading {
  opacity: .7;
  pointer-events: none;
}


/* mobile view */

@media (max-width: 767px) {
    .header-top-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        width: 100%;
    }

    .hero-single .hero-content .hero-title{
      font-size: 25px;
    }
    .hero-single .hero-content a.theme-btn{
      padding: 10px 15px;
    }
    .hero-single .hero-content p{
      font-size: 16px;
    }
    .about-area .site-heading .site-title {
    font-size: 22px;
}
.counter-item .counter{
  font-size: 35px;
}
.service-area .site-heading.mb-0 .site-title {
    font-size: 22px;
}
.service-content p{
  text-align: justify;
}
.portfolio-area .site-heading .site-title.text-white {
    font-size: 22px;
    line-height: 1.5;
}
.ct-negative .title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
}
.choose-area .site-heading .site-title {
    font-size: 22px;
    line-height: 1.5;
}
.choose-area p {
    text-align: justify;
}
.choose-item-info h4{
  font-size: 16px;
}
.testimonial-area   .site-heading .site-title.text-white {
    font-size: 22px;
    line-height: 1.4;
}
.testimonial-quote p {
    position: relative;
    color: var(--color-dark);
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    z-index: 1;
    text-align: justify;
}
.faq-area .site-heading .site-title.my-3 {
    font-size: 22px;
    line-height: 1.4;
}
    .faq-area .accordion-button {
        font-size: 15px;
        line-height: 1.4;
    }
    .faq-area .accordion-body {
    color: var(--color-dark);
    font-weight: 500;
    font-size: 14px;
}
.footer-widget-box p {
    color: var(--color-white);
    padding-right: 0px;
    font-size: 15px;
    text-align: justify;
}
.footer-widget-box {
        margin-bottom: 0px;
    }
.copyright .copyright-text{
      text-align: center;
}
.abp-intro h2.title {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 10px;
    line-height: 1.4;
}
.abp-stat__label{
  font-size: 12px;
}
.abp-title{
          font-size: 22px;
        line-height: 1.5;
}
.abp-zone__title{
  font-size: 16px;
    line-height: 1.5;
}
.abp-section.abp-buy .abp-title{
  font-size: 25px;
}
.abp-why-card__text{
  text-align: justify;
}
.abp-why-card--3 .abp-why-card__title {
    color: var(--color-white, #fff);
    font-size: 17px;
    padding-top: 18px;
}
.abp-why-card__title{
      padding-top: 15px;
}
.abp-green__content .abp-text{
      font-size: 16px;
}
.abp-contact #contact-title {
    font-size: 18px;
    text-align: center;
}
.abp-text{
      font-size: 16px;
}

.abp-hero__title{
      font-size: 22px;
}
.msb-title{
      font-size: 20px;
}
.msb-section.msb-hubs .msb-hub__body .msb-hub__title{
  font-size: 17px;
  line-height: 1.4;
}
.cpb-intro .title{
  font-size: 20px;
}
.bsb-intro .title{
  font-size: 20px;
}
.bsb-sec #bsb-srip-title {
    font-size: 18px;
}
.bsb-sec .bsb-h--sub {
        font-size: 18px;
    }
.bsb-perk{
      padding: 24px 9px;
      text-align: justify;
}
.alb-sec.alb-intro .title{
      font-size: 20px;
}
.alb-factor__p{
      margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--tx);
    text-align: justify;
}
.alb-perk{
      padding: 20px 8px;
}
.tvb-intro .title{
  font-size: 20px;
}
.tvb-title{
  font-size: 22px;
}
.tvb-title--sub {
    font-size: 20px;
}
.cwb-intro .title {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 15px;
    line-height: 1.4;
}
.cwb-intro .cwb-p--lead {
    font-size: 16px;
    text-align: justify;
}
.cwb-perk{
      padding: 24px 8px;
}
.csb-intro .title {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 15px;
    line-height: 1.4;
    text-align: justify;
}
.csb-perk{
      padding: 24px 9px;
}
.hab-intro .title{
  font-size: 20px;
}
.hab-perk{
  padding: 24px 9px;
}
.osb-intro .title{
      font-size: 20px;
}
.osb-sec #osb-types-title {
    font-size: 18px;
    line-height: 1.4;
}
.osb-stop__t{
      font-size: 14px;
    line-height: 1.5;
}
.osb-h{
  font-size: 20px;
}
.osb-cta #osb-cta-title {
    font-size: 18px;
    line-height: 1.4;
}

.osb-lc{
      display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 14px 11px;
    color: var(--g);
    background: var(--w);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 18px;
    transition: transform .4s var(--e), background .4s, color .4s;
}
.osb-lc__t{
  font-size: 14px;
    line-height: 1.4;
}
.contact-form-header h2{
font-size: 25px;
}
.contact-form-header p {
    text-align: justify;
}


}