/* Existing desktop styles remain untouched */

/* === Mobile Responsive Styles === */
@media screen and (max-width: 768px) {
  /* ✅ Add uniform padding around entire blog section */
  #blog-section .blogs {
    padding: 32px 16px !important;
box-sizing: border-box;	/* Top/Bottom = 32px, Left/Right = 16px */
  }

  /* ✅ Optional: Let blog title and description center on mobile */
  #blog-section .blogs .blog-text-wrapper,
  #blog-section .blogs .blog-div {
    text-align: center;
    align-self: center;
  }

  /* ✅ Existing horizontal slider cleanup (no size override) */
  #blog-section .blogs .blog-frame-2 {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 0 8px; /* smaller internal edge */
    gap: 16px;
    scroll-padding-left: 8px;
    scroll-padding-right: 8px;
  }

  #blog-section .blogs .blog-post,
  #blog-section .blogs .blog-posts-wrapper,
  #blog-section .blogs .blog-post-2,
  #blog-section .blogs .blog-post-3,
  #blog-section .blogs .blog-post-4 {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 450px;
    height: auto;
  }

  #blog-section .blogs .blog-scrollers {
    display: none !important;
  }
 /* Fix the container that holds the second heading */
  #blog-section .blogs .blog-contents {
    width: 100% !important;
    max-width: 90vw !important;
    margin: 0 auto;
    box-sizing: border-box;
  }


 #blog-section .blogs .blog-post:first-child {
    margin-left: -5px; /* Adjust as needed: -8px to -16px works well */
	width: 445px;
  max-width: 445px;
  }
  /* Optional: fix text wrapper too */
  #blog-section .blogs .blog-text-wrapper {
    text-align: center;
    width: 100%;
    white-space: normal;
    word-break: break-word;
  }
}



@media screen and (min-width: 769px) {
	 #blog-section {
    transform: translateX(-48px); /* shift left by 32px */
  }
  #blog-section .blogs .blog-frame-2 {
    justify-content: center;
    overflow-x: hidden;
    max-width: calc((450px * 2) + 64px);
    padding: 0 16px;
    margin: 0 auto;
    box-sizing: border-box;
	margin-left: -10px;
	scroll-padding-right: 16px;
	
  }

  /* ✅ Shift the first card slightly to the right */
  #blog-section .blogs .blog-post:first-child {
    margin-left: 8px; /* Adjust to 12px or 16px if needed */
  }


}

		   /* START BLOG STYLES*/
		 
        #blog-section .blog-feature-2 a {
            text-decoration: none;
            color: #333;
            transition: all 0.3s ease;
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        /* Hover effect: pop out */
        #blog-section .blog-feature-2 a:hover {
            color: #FFFFFF;
            transform: scale(1.05);
	
		}
            

            #blog-section .blogs .blog-frame-2 {
                display: flex;
                /* instead of overflow-x scroll on a static container */
                overflow-x: auto;
                gap: 24px;
                /* space between posts */
                padding-bottom: 8px;
                /* optional to avoid scrollbar overlap */
            }

            /* let each post size itself and flow inline */
            #blog-section .blogs .blog-post {
                position: relative;
                /* reset from absolute */
                flex: 0 0 450px;
                /* fixed width slides */
                max-width: 450px;
                padding: 24px;
                margin: 0;
                /* reset any absolute offsets */
                background-color: #ffffff33;
                border-radius: 24px;
                box-shadow: 0px 4px 4px #00000040;
                backdrop-filter: blur(15px) brightness(100%);
                display: flex;
                flex-direction: column;
            }

            #blog-section img {
                transition: opacity 0.5s ease;
            }

            #blog-section .blog-frame-wrapper,
#blog-section .blog-post-5 {
  opacity: 1;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

#blog-section .blog-frame-wrapper:hover,
#blog-section .blog-post-5:hover {
  opacity: 0.8; /* slightly transparent on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important; /* optional: keep this if you want shadow effect */
}
  #blog-section button{
  cursor: pointer;
}
            /* END BLOG STYLES*/
 
 #blog-section .blogs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
  padding: 48px 0px 48px 92px;
  position: relative;
  background-color: var(--erp-white-3);
}

 #blog-section .blogs .blog-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-text-wrapper {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Outfit-Medium", Helvetica;
  font-weight: 500;
  color: var(--erp-blk);
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

 #blog-section .blogs .blog-div-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-div {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  background: linear-gradient(
    130deg,
    rgba(244, 190, 25, 0.7) 33%,
    rgba(0, 111, 181, 1) 57%
  );
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: "Outfit-Medium", Helvetica;
  font-weight: 500;
  color: transparent;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 32px;
}



 #blog-section .blogs .blog-frame-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 566px;
  overflow: hidden;
  overflow-x: scroll;
}

 #blog-section .blogs .blog-frame-2::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-post {
  max-width: 450px;
  width: 450px;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  position: absolute;
  top: 4px;
  left: 0;
  background-color: #ffffff33;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
  display: flex;
  flex-direction: column;
}

 #blog-section .blogs .blog-post::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-posts {
  align-items: flex-start;
  padding: 16px 16px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

 #blog-section .blogs .blog-feature {
  height: 248px;
  border-radius: 16px;
  background-image: url(./img/feature-2.png);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-feature-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 32px 0px;
  flex: 0 0 auto;
  background-color: #ffffff;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-frame-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-p {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Outfit-Regular", Helvetica;
  font-weight: 400;
  color: var(--erp-blk);
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

 #blog-section .blogs .blog-text-wrapper-2 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Outfit-Regular", Helvetica;
  font-weight: 400;
  color: var(--erp-blk);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

 #blog-section .blogs .blog-frame-4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--erp-primary);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

 #blog-section .blogs .blog-ri-arrow-up-line {
  position: relative;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
}



 #blog-section .blogs .blog-posts-wrapper {
  max-width: 450px;
  width: 450px;
  padding: 24px;
  position: absolute;
  top: 4px;
  left: 490px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background-color: #ffffff33;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
}

 #blog-section .blogs .blog-posts-wrapper::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-feature-3 {
  height: 248px;
  border-radius: 16px;
  background-image: url(./img/feature-4.png);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-post-2 {
  max-width: 450px;
  width: 450px;
  padding: 24px;
  position: absolute;
  top: 4px;
  left: 980px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background-color: #ffffff33;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
}

 #blog-section .blogs .blog-post-2::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-feature-4 {
  height: 248px;
  border-radius: 16px;
  background-image: url(./img/feature-3.png);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-post-3 {
  max-width: 450px;
  width: 450px;
  padding: 24px;
  position: absolute;
  top: 4px;
  left: 1470px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background-color: #ffffff33;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
}

 #blog-section .blogs .blog-post-3::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-feature-5 {
  height: 248px;
  border-radius: 16px;
  background-image: url(./img/image.png);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-post-4 {
  max-width: 450px;
  width: 450px;
  padding: 24px;
  position: absolute;
  top: 4px;
  left: 1960px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background-color: #ffffff33;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
}

 #blog-section .blogs .blog-post-4::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-feature-6 {
  height: 248px;
  border-radius: 16px;
  background-image: url(./img/feature.png);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-scrollers {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-frame-wrapper {
  width: 52px;
  height: 52px;
  position: relative;
  border-radius: 5000px;
  transform: rotate(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background-color: #ffffff33;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
}

 #blog-section .blogs .blog-frame-wrapper::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-img-wrapper {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--erp-white-4);
  border-radius: 20px;
}

 #blog-section .blogs .blog-img {
  position: relative;
  width: 24px;
  height: 24px;
  transform: rotate(-180deg);
}

 #blog-section .blogs .blog-post-5 {
  width: 52px;
  height: 52px;
  position: relative;
  border-radius: 5000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background-color: #ffffff33;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
}

 #blog-section .blogs .blog-post-5::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-frame-5 {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--erp-white-3);
  border-radius: 20px;
}

 #blog-section .blogs .blog-frame-6 {
  position: relative;
  width: 24px;
  height: 24px;
}
/* Original CSS code */

 #blog-section .blogs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
  padding: 48px 0px 48px 92px;
  position: relative;
  background-color: var(--erp-white-3);
}

 #blog-section .blogs .blog-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-text-wrapper {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Outfit-Medium", Helvetica;
  font-weight: 500;
  color: var(--erp-blk);
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

 #blog-section .blogs .blog-div-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-div {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  background: linear-gradient(
    130deg,
    rgba(244, 190, 25, 0.7) 33%,
    rgba(0, 111, 181, 1) 57%
  );
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: "Outfit-Medium", Helvetica;
  font-weight: 500;
  color: transparent;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 32px;
}

/*
 #blog-section .blogs .blog-contents {
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
*/
 #blog-section .blogs .blog-contents {
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 950px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

 #blog-section .blogs .blog-frame-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 566px;
  overflow: hidden;
  overflow-x: scroll;
}

 #blog-section .blogs .blog-frame-2::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-post,
 #blog-section .blogs .blog-posts-wrapper,
 #blog-section .blogs .blog-post-2,
 #blog-section .blogs .blog-post-3,
 #blog-section .blogs .blog-post-4 {
  max-width: 450px;
  width: 450px;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  position: absolute;
  top: 4px;
  background-color: #ffffff33;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
  display: flex;
  flex-direction: column;
}

 #blog-section .blogs .blog-post::-webkit-scrollbar,
 #blog-section .blogs .blog-posts-wrapper::-webkit-scrollbar,
 #blog-section .blogs .blog-post-2::-webkit-scrollbar,
 #blog-section .blogs .blog-post-3::-webkit-scrollbar,
 #blog-section .blogs .blog-post-4::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-post {
  left: 0;
}
 #blog-section .blogs .blog-posts-wrapper {
  left: 490px;
}
 #blog-section .blogs .blog-post-2 {
  left: 980px;
}
 #blog-section .blogs .blog-post-3 {
  left: 1470px;
}
 #blog-section .blogs .blog-post-4 {
  left: 1960px;
}

 #blog-section .blogs .blog-posts {
  align-items: flex-start;
  padding: 16px 16px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

 #blog-section .blogs .blog-feature,
 #blog-section .blogs .blog-feature-3,
 #blog-section .blogs .blog-feature-4,
 #blog-section .blogs .blog-feature-5,
 #blog-section .blogs .blog-feature-6 {
  height: 248px;
  border-radius: 16px;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-feature-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 32px 0px;
  flex: 0 0 auto;
  background-color: #ffffff;
  position: relative;
  align-self: stretch;
  width: 100%;
}

 #blog-section .blogs .blog-frame-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-p {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Outfit-Regular", Helvetica;
  font-weight: 400;
  color: var(--erp-blk);
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

 #blog-section .blogs .blog-text-wrapper-2 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Outfit-Regular", Helvetica;
  font-weight: 400;
  color: var(--erp-blk);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

 #blog-section .blogs .blog-frame-4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Outfit-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--erp-primary);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

 #blog-section .blogs .blog-ri-arrow-up-line {
  position: relative;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
}

 #blog-section .blogs .blog-vector {
  position: absolute;
  width: 30px;
  height: 33px;
  top: -17px;
  left: 1px;
  transform: rotate(-45deg);
}

 #blog-section .blogs .blog-scrollers {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

 #blog-section .blogs .blog-frame-wrapper,
 #blog-section .blogs .blog-post-5 {
  width: 52px;
  height: 52px;
  position: relative;
  border-radius: 5000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background-color: #ffffff33;
  overflow: hidden;
  box-shadow: 0px 4px 4px #00000040;
  backdrop-filter: blur(15px) brightness(100%);
  -webkit-backdrop-filter: blur(15px) brightness(100%);
  overflow-x: scroll;
}

 #blog-section .blogs .blog-frame-wrapper {
  transform: rotate(180deg);
}

 #blog-section .blogs .blog-frame-wrapper::-webkit-scrollbar,
 #blog-section .blogs .blog-post-5::-webkit-scrollbar {
  width: 0;
  display: none;
}

 #blog-section .blogs .blog-img-wrapper,
 #blog-section .blogs .blog-frame-5 {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--erp-white-4);
  border-radius: 20px;
}

 #blog-section .blogs .blog-img {
  position: relative;
  width: 24px;
  height: 24px;
  transform: rotate(-180deg);
}

 #blog-section .blogs .blog-frame-6 {
  position: relative;
  width: 24px;
  height: 24px;
}



/* Responsive improvements */
@media (max-width: 768px) {
   #blog-section .blogs {
    padding: 48px 16px;
  }

   #blog-section .blogs .blog-frame-2 {
    height: auto;
  }

   #blog-section .blogs .blog-post,
   #blog-section .blogs .blog-posts-wrapper,
   #blog-section .blogs .blog-post-2,
   #blog-section .blogs .blog-post-3,
   #blog-section .blogs .blog-post-4 {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    margin-bottom: 16px;
  }
}