/** feature-section **/

.feature-section{
  position: relative;
}

/* --- Feature Block One --- */
.feature-block-one .inner-box{
  position: relative;
  display: block;
  background: #fff;
  box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  overflow: visible; /* Changed from hidden to allow arrow visibility */
  padding: 0px 0px 0px 0px;
  z-index: 1;
  margin-bottom: 30px;
  transition: all 500ms ease;
  /* Specific styles for layout */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  text-align: center; /* Ensure text is centered */
  height: 100%; /* Make sure it fills the container */
  width: 250px; /* Added example width */
}

.feature-block-one .inner-box:before{
  position: absolute;
  content: '';
  width: 100%;
  height: 0%;
  left: 0px;
  bottom: 0px;
  z-index: -1;
  transition: all 500ms ease;
  /* Assuming a theme color variable exists */
  /* background: var(--theme-color, #f9313b); */ /* Example fallback */
}

.feature-block-one .inner-box:hover:before{
  height: 100%;
  top: 0px;
}

.feature-block-one .inner-box .icon-box{
  position: relative;
  display: inline-block;
  width: 100%; /* Takes full width */
  height: 120px; /* Adjusted height container for image */
  line-height: normal; /* Reset line-height if not needed for icon centering */
  font-size: 50px; /* Keep if icons are used as fallback */
  color: var(--secondary-color);
  background: rgba(249, 49, 59, 0.05); /* Example background */
  text-align: center;
  transition: all 500ms ease;
  /* Remove padding/margin if image handles spacing */
}

.feature-block-one .inner-box .icon-box img {
    width: 100%; /* Make the image fill the container */
    height: 120px; /* Match the icon-box height */
    object-fit: cover; /* Ensure it covers the box properly */
    display: block; /* Prevents extra space below image */
}

.feature-block-one .inner-box:hover .icon-box{
  background: #fff; /* Or transparent if image should show through */
}

.feature-block-one .inner-box h3 {
  font-size: 23px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 15px;
  text-align: center; /* Ensure the text itself is centered */
  /* Add some top margin for spacing from icon/image */
  margin-top: 20px;
  padding: 0 15px; /* Add padding if text gets too close to edges */
}

.feature-block-one .inner-box h3 a{
  display: inline-block;
  color: var(--title-color);
  transition: color 500ms ease; /* Add transition */
}

.feature-block-one .inner-box h3 a:hover{
  text-decoration: underline;
  /* color: #fff; */ /* Color change handled by hover below */
}

.feature-block-one .inner-box p{
  position: relative;
  transition: all 500ms ease;
  padding: 0 20px; /* Add padding for readability */
  margin-bottom: 20px; /* Add spacing at the bottom */
}

.feature-block-one .inner-box:hover h3 a,
.feature-block-one .inner-box:hover p{
  color: #fff;
}


/* --- Feature Block Two --- */
.feature-block-two .inner-box{
  position: relative;
  display: block;
  background: #fff;
  box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  overflow: hidden; /* Keep hidden if desired */
  padding: 0px 0px 0px 0px;
  z-index: 1;
  margin-bottom: 30px;
  transition: all 500ms ease;
}

.feature-block-two .inner-box:before{
  position: absolute;
  content: '';
  width: 100%;
  height: 0%;
  left: 0px;
  bottom: 0px;
  z-index: -1;
  transition: all 500ms ease;
    /* Assuming a theme color variable exists */
  /* background: var(--theme-color, #f9313b); */ /* Example fallback */
}

.feature-block-two .inner-box:hover:before{
  height: 100%;
  top: 0px;
}

.feature-block-two .inner-box .icon-box {
    position: relative;
    display: block; /* Changed to block */
    width: 100%;
    height: auto; /* Allow height to be determined by image */
    line-height: normal; /* Reset line-height */
    font-size: 50px; /* Keep for potential icon fallback */
    color: var(--secondary-color);
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
    text-align: center;
    transition: all 500ms ease;
    /* Padding applied directly to img now */
}

.feature-block-two .inner-box .icon-box img {
    width: 100%; /* Make the image fill the container */
    height: 180px; /* Maintain aspect ratio */
    object-fit: cover;
    padding: 10px; /* Padding around the image */
    border-radius: 30px; /* Rounded corners for image */
    box-sizing: border-box; /* Include padding in width/height */
    display: block; /* Prevents extra space below image */
}

.feature-block-two .inner-box:hover .icon-box{
  /* Background change on hover might not be desired if image covers it */
  /* background: #fff; */
   color: #fff; /* Example: change icon color if used */
}

/* This :before rule was for an icon hover effect, may not apply well with images */
.feature-block-two .inner-box .icon-box:before{
  position: absolute;
  content: '';
  background: var(--theme-color);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  border-radius: 50%;
  transform: scale(0,0);
  transition: all 500ms ease;
}
.feature-block-two .inner-box:hover .icon-box:before{
  transform: scale(1,1);
}

.feature-block-two .inner-box h3 {
  font-size: 23px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 15px;
  text-align: center;
  padding: 0 15px; /* Add padding */
  margin-top: 20px; /* Add spacing */
}

.feature-block-two .inner-box h3 a{
  display: inline-block;
  color: var(--title-color);
  transition: color 500ms ease; /* Add transition */
}

.feature-block-two .inner-box h3 a:hover{
  /* text-decoration: underline; */ /* Original style */
   color: var(--theme-color); /* Original hover style */
}

.feature-block-two .inner-box p{
  position: relative;
  transition: all 500ms ease;
  padding: 0 20px; /* Add padding */
  margin-bottom: 20px; /* Add spacing */
}

.feature-block-two .inner-box:hover h3 a,
.feature-block-two .inner-box:hover p{
  color: #fff;
}


/* --- Feature Block Three (Based on One, No Arrows) --- */
.feature-block-three .inner-box{
  position: relative;
  display: block;
  background: #fff;
  box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  /* overflow: hidden; */ /* Can be hidden as no arrow needs to show */
  overflow: visible; /* Or visible if needed for other effects */
  padding: 0px 0px 0px 0px;
  z-index: 1;
  margin-bottom: 30px;
  transition: all 500ms ease;
  /* Specific styles for layout copied from feature-block-one */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  text-align: center; /* Ensure text is centered */
  height: 100%; /* Make sure it fills the container */
  width: 250px; /* Added example width */
}

.feature-block-three .inner-box:before{
  position: absolute;
  content: '';
  width: 100%;
  height: 0%;
  left: 0px;
  bottom: 0px;
  z-index: -1;
  transition: all 500ms ease;
  /* Assuming a theme color variable exists */
  /* background: var(--theme-color, #f9313b); */ /* Example fallback */
}

.feature-block-three .inner-box:hover:before{
  height: 100%;
  top: 0px;
}

.feature-block-three .inner-box .icon-box{
  position: relative;
  display: inline-block;
  width: 100%; /* Takes full width */
  height: 120px; /* Adjusted height container for image */
  line-height: normal; /* Reset line-height if not needed for icon centering */
  font-size: 50px; /* Keep if icons are used as fallback */
  color: var(--secondary-color);
  background: rgba(249, 49, 59, 0.05); /* Example background */
  text-align: center;
  transition: all 500ms ease;
  /* Remove padding/margin if image handles spacing */
}

.feature-block-three .inner-box .icon-box img {
    width: 100%; /* Make the image fill the container */
    height: 120px; /* Match the icon-box height */
    object-fit: cover; /* Ensure it covers the box properly */
    display: block; /* Prevents extra space below image */
}

.feature-block-three .inner-box:hover .icon-box{
  background: #fff; /* Or transparent if image should show through */
}

.feature-block-three .inner-box h3 {
  font-size: 23px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 15px;
  text-align: center; /* Ensure the text itself is centered */
  /* Add some top margin for spacing from icon/image */
  margin-top: 20px;
  padding: 0 15px; /* Add padding if text gets too close to edges */
}

.feature-block-three .inner-box h3 a{
  display: inline-block;
  color: var(--title-color);
  transition: color 500ms ease; /* Add transition */
}

.feature-block-three .inner-box h3 a:hover{
  text-decoration: underline;
  /* color: #fff; */ /* Color change handled by hover below */
}

.feature-block-three .inner-box p{
  position: relative;
  transition: all 500ms ease;
  padding: 0 20px; /* Add padding for readability */
  margin-bottom: 20px; /* Add spacing at the bottom */
}

.feature-block-three .inner-box:hover h3 a,
.feature-block-three .inner-box:hover p{
  color: #fff;
}

/* --- General Arrow Styling & Rules --- */
.feature-block {
  position: relative; /* Needed for ::after positioning */
}

/* Common Arrow Styling (used by block one and two potentially) */
.feature-block::after {
  /* --- Definition --- */
  content: '';
  background-image: url('https://cdn-icons-png.freepik.com/512/32/32199.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 30px;
  height: 30px;

  /* --- Positioning --- */
  position: absolute;
  top: 50%;             /* Places top edge at vertical middle of parent */
  transform: translateY(-150%); /* Moves it UP by 1.5 * its own height (45px) */
  right: 10px;          /* Places right edge 10px from parent's right */

  /* --- Stacking & Interaction --- */
  z-index: 5;
  pointer-events: none;
  user-select: none;

  /* --- Display (handled elsewhere) --- */
  /* display: none; */ /* Base */
  /* display: block; */ /* In media query */

  /* Add a border for debugging (remove later) */
   /* border: 2px solid red !important; */ /* <-- Add this temporarily */
   /* background-color: yellow !important; */ /* <-- Or this */
}

/* --- Specific Arrow Hiding Rules --- */

.feature-block-three::after {
    display: none !important;
}

/* Rule to hide arrow on the last item in any row using .clearfix */
.row.clearfix > .feature-block:last-child::after {
   display: none !important;
}

/* Rule to hide arrows if using Bootstrap's justify-content-center */
.row.justify-content-center .feature-block::after {
    display: none !important;
}


.feature-section .shape{
  position: absolute;
  left: 80px;
  top: 10px;
  width: 210px;
  height: 268px;
  background-repeat: no-repeat;
}


/** feature-style-two **/
/* (Keep existing feature-style-two rules) */
.feature-style-two{
  position: relative;
}

.feature-style-two .inner-container{
  position: relative;
  display: block;
  background: #FFFFFF;
  box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  z-index: 1;
  margin-top: -167px;
  padding: 0px 30px;
}



/** RTL-CSS **/
/* (Keep existing RTL rules) */


/** RESPONSIVE-CSS **/

@media only screen and (max-width: 1200px){
  /* (Keep existing rules) */
}

@media only screen and (max-width: 991px){
   /* (Keep existing rules) */
}

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

  /* --- Style Feature Block One Arrow for Mobile --- */
  .feature-block-one::after {
    display: block !important; /* Ensure it's visible on mobile */

    /* --- !!! IMPORTANT: REPLACE with actual path to DOWN arrow !!! --- */
    background-image: url('../images/arrow-down.png'); /* Or path/to/your/arrow-down.png */

    /* --- Positioning Below & Centered --- */
    top: 100%;        /* Position top edge right below the parent block */
    left: 50%;         /* Position left edge at the center of the parent */
    bottom: auto;      /* Reset bottom property */
    right: auto;       /* Reset right property */
    transform: translateX(-50%); /* Center the arrow horizontally */

    /* --- Spacing --- */
    margin-top: 15px; /* Adjust space between block and arrow */

    /* --- Keep Size & Other Properties --- */
    width: 30px;       /* Or your desired width */
    height: 30px;      /* Or your desired height */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 5;
    pointer-events: none;
    user-select: none;
  }
  /* --- End Arrow Styling --- */


  /* --- Center Feature Block Three (Keep this fix) --- */
  .feature-block-three .inner-box {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 90%;
    height: auto;
  }
  /* --- End Center Feature Block Three --- */


  /* Keep other general mobile styles */
  .feature-section {
    padding: 70px 0px 40px 0px;
  }
  .feature-section .shape {
    display: none;
  }

  /* Ensure arrows are definitely hidden for blocks 2 and 3 on mobile */
  /* (This might be redundant if they inherit display:none, but safe to add) */
  .feature-block-two::after,
  .feature-block-three::after {
     display: none !important;
  }

}


@media only screen and (max-width: 599px){
 /* (Keep existing rules) */
}

@media only screen and (max-width: 499px){
 /* (Keep existing rules) */
}

@media (min-width: 992px) { /* Bootstrap lg breakpoint */
    /* Show arrows on large screens FOR BLOCKS THAT SHOULD HAVE THEM */
    /* Use more specific selectors if needed, e.g., .feature-block-one::after */
    .feature-block-one::after,
    .feature-block-two::after { /* Only apply to blocks that might show arrows */
        display: block;
    }

    /* Hide arrow on the 4th item of every row (adjust 4n if columns change) */
    /* Make sure this applies only to relevant blocks */
    .row.clearfix > .feature-block-one:nth-child(4n)::after,
    .row.clearfix > .feature-block-two:nth-child(4n)::after {
        display: none;
    }

     /* Ensure last item definitely has no arrow (already covered by :last-child rule above, but keep for clarity) */
    .row.clearfix > .feature-block:last-child::after {
        display: none !important; /* Keep important if needed */
    }

    /* The rule .feature-block-three::after { display: none !important; } will override the display:block here */
}