:root {
  --body: #fff;
  --black: #000;
  --white: #fff;
  --theme: #DC3545;
  --header: #31251D;
  --text: #31251D;
  --border: #FCFCFC;
  --bg: #dc35450f;
}

.service-section {
  position: relative;
  z-index: 9;
}
.service-section::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  background: rgba(0, 0, 0, 0.9);
}
.service-section .service-slider {
  margin-right: -50%;
}
@media (max-width: 1199px) {
  .service-section .service-slider {
    margin-right: 0;
  }
}

.service-box-items {
  margin-top: 30px;
  background-color: #F2EEEA;
}
.service-box-items .thumb {
  position: relative;
}
.service-box-items .thumb img {
  width: 100%;
  height: 100%;
  /*clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%, 0 100%, 0% 50%);*/
}
.service-box-items .thumb .icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  background-color: var(--white);
  position: absolute;
  top: 30px;
  left: 30px;
}
.service-box-items .thumb .icon img {
  clip-path: none;
  width: initial;
  height: initial;
}
.service-box-items .thumb .number {
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0px 4px 60px 0px rgba(199, 132, 79, 0.2);
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--theme);
  display: inline-block;
  position: absolute;
  bottom: 55px;
  right: 30px;
}
.service-box-items .service-content .content {
  padding: 30px;
}
.service-box-items .service-content .content h3 {
  margin-bottom: 10px;
}
.service-box-items .service-content .content h3 a:hover {
  color: var(--theme);
}
.service-box-items .service-content .content p {
  color: #31251D;
}
.service-box-items .service-content .theme-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px;
  background-color: rgba(220, 53, 69, 0.0588235294);
  color: var(--header);
}
.service-box-items .service-content .theme-btn::before, .service-box-items .service-content .theme-btn::after {
  background: var(--theme);
}
.service-box-items .service-content .theme-btn:hover {
  color: var(--white);
}

.theme-btn:hover::before, .theme-btn:hover::after {
  width: 100%;
}

/* Section Title Styles */
.section-title {
  position: relative;
  z-index: 999;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 0;
  }
}
.section-title h6 {
  font-size: 20px;
  font-weight: 700;
  color: var(--theme);
  line-height: 1;
}
.section-title h6 img {
  margin-right: 10px;
}
.section-title h2 {
  text-transform: uppercase;
  position: relative;
}

/* Style 1 specific */
.section-title.style-1 {
  display: flex;
  align-items: center;
  gap: 30px;
}
.section-title.style-1 h6 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.section-title.style-1 h6 img {
  margin-right: 0;
  margin-top: 0px;
  margin-left: -6px;
  margin-bottom: 5px;
}

/* Section Title Area */
.section-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 9;
  margin-bottom: 30px;
}
.section-title-area .section-title {
  margin-bottom: 0;
}
@media (max-width: 1199px) {
  .section-title-area {
    flex-wrap: wrap;
    gap: 30px;
  }
}
@media (max-width: 767px) {
  .section-title-area {
    margin-bottom: 0;
  }
}

/* Global Layout Section Fix */
.abtbox-sec3 .cont {
    height: 100%;
	padding-top: 80px;
    /* Ensure the container centers its child */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff; /* Assuming white background for the gaps */
}

.hero-section {
    position: relative;
    /* Default State (Inactive): 80% width/height */
    width: 70%;
    height: 60%;
    /* overflow: hidden; */
    /* Transition for size change */
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 20px; /* Optional: smooth corners when small */
}

.hero-section.active {
    /* Active State: 100% width/height */
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.hero-section .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* Image scale animation */
    transform: scale(1.1);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-section.active .background-image {
    transform: scale(1);
}


.hero-section .content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Remove flex centering here to control position manually via .fz_font2 */
    display: block; 
    background: rgba(0, 0, 0, 0); /* Default transparent */
    transition: background 1s;
}

.hero-section.active .content-overlay {
    /* Add dimming only when active (full screen) if needed, or keep consistent */
    background: rgba(0, 0, 0, 0.3);
}

.hero-section .content-overlay .font.fz_font2 {
    max-width: 1000px;
    margin: 0 auto;
    /* Position control */
    position: absolute;
    left: 0;
    right: 0;
    /* Default State (Inactive): Top, Black Color */
    top: -30%;
    transform: translateY(0);
    color: #000;
    text-align: center;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-section.active .content-overlay .font.fz_font2 {
    /* Active State: Center, White Color */
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}


.hero-section .content-overlay .font.fz_font2 .but {
  display: none;
}

.hero-section.active .content-overlay .font.fz_font2 .but {
  display: block;
}


.hero-section .content-overlay .tit {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 30px;
	line-height: 1.1;
    color: inherit; /* Inherit from parent */
    letter-spacing: 2px;
}

.hero-section .content-overlay .text {
    font-size: 16px;
	color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    color: inherit; /* Inherit from parent */
}

.hero-section .content-overlay .but a {
    display: inline-block;
    padding: 15px 50px;
    background-color: transparent;
    border: 2px solid currentColor; /* Use currentColor to match text */
    color: inherit;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-section .content-overlay .but a:hover {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}