/* ========================== Extra large devices (desktops) min-width: 1200px==============================*/
.home-section .wrapper{width:65%;display:flex;justify-content: center; align-items: center; flex-direction:column;height: 60%; margin: 0em auto 4em auto;}
	.bg-black{background-color:black;color:white;border: 1px solid white;}
	.home-section{ display: flex;justify-content: center;align-items: center; position:relative; width:100%;}
	#section-1{height:75vh;}
	#section-2{}
	#section-3{}
	#profile-meta-info{width: 60%;display:grid; grid-template-areas:'profile_photo profile_info' 'profile_photo profile_icons';padding-bottom: 5em;}
	.home-section .wrapper{width:80%;display:flex;justify-content: center; align-items: center; flex-direction:column;height: 60%; margin: 4em auto;}
	#section-1 .img-area{grid-area: profile_photo; height: 300px; width: 300px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px dashed; position: relative; margin: 50px 50px 50px 50px;}
	#section-1 .social-icons{grid-area: profile_icons;
	position: relative;
	top: -2em;
	left: 15px; width: 11rem: height:1.5rem;}
	.fa-instagram:hover, .fa-twitter:hover, .fa-youtube:hover, .fa-facebook:hover, .fa-telegram:hover{color:#5b5b95;cursor:pointer;}
	#section-1 .inner-area{
	  height: calc(100% - 25px);
	  width: calc(100% - 25px);
	  border-radius: 50%;
	}
	#section-1 img{   height: 100%;   width: 100%;   border-radius: 50%;   object-fit: cover; }
	.info{position:relative;grid-area: profile_info; margin: 100px 10px auto 50px;position:relative;left:-40px;top-1.5em;width:100%;}
	.info h2{font-size:50px;}
	.info h3{font-size:30px; margin-top:-15px; color: #5d625e; font-weight: 100;}
	.info p{font-size:15px;margin: 4px auto 5px auto;}
	.button {padding: 5px 15px; text-align: center; text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;border-radius: 8px;}
	.cta{display:flex;}
	.resume {background-color: white;   color: black;   border: 1px solid #94999B;margin: 4px 12px 4px 2px;}
	.hire-me {background-color: #2f1717; color: #fffefe; border: 1px solid #94999B; margin: 4px 2px 4px 2px;}
	.section-2 > .wrapper > h2{margin:auto;}
	.portfolio-bar
	{
	border: 0px solid black;
	  border-radius: 12px;
	  padding: 10px 50px;
	  position: absolute;
	  top: -60px;
	  display: flex;
	  height: 120px;
	  background: white;
	  width: 65%;
	  justify-content: space-around;
	  box-shadow: 0px 0px 15px black;align-items: center;
	}
	.portfolio-box-1,.portfolio-box-2{display: flex;
	  height: 100%;  justify-content: center;
	  align-items: center;
	  column-gap: 5em;}
	.port-no-bar{display: flex;flex-direction: column;justify-content: center;
	  align-items: center;
	  text-align: center;}
	div span:first-child {
	  font-size: 35px;
	  font-weight: 600;
	}
	div span:nth-child(2) {
	  font-size: 18px;
	}
	.port-bar{border: 1px solid black;display: flex;height:70%;justify-content: center;
	  align-items: center;
	}

	.more-about{width: 100%;margin-top: 10em;display:flex;flex-direction:column;row-gap: 2em;justify-content: center;
	  align-items: center;}
	.more-about-heading{display:flex;flex-direction:column;justify-content: center;
	  align-items: center;}
	.left-more-bottom{column-gap: 5em;
	  display: flex;
	  width: 86%;justify-content: center;
	  align-items: center;}
	.left-more-about{width: 40%;
	  border-radius: 12px;
	  height: auto;
	  padding: 40px 30px;
	  row-gap: 12px;
	  display: flex;
	  flex-direction: column;}
	.profile-photo{position: relative;}
	.profile-photo img{width:100%;}
	.cta-buttons{position: absolute;bottom: 2em;
	  width: 100%;display: flex;column-gap: 10px;
	  justify-content: center;
	  align-items: center;}
	.social-icons{display: flex;
	  justify-content: center;}
	.right-more-about{width:60%;}

	.section-3 > .wrapper > h2{margin:auto;font-size: 30px;font-weight: 600;}
	.fa-brands, .fa-solid{font-size:20px;margin-right:10px; color: #4d4c4c;}
	.fa-brands:visited {
	  color: pink;
	}
	.articles-tab{display: flex; column-gap: 1em;margin-top: 1em;}
	.articles-container{width: 100%;}
	.home-carousel-wrapper{width: 100%;display:none;}

	.home-section-footer{display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;background: #caefca;
	}

	.services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            width: 100%;
            max-width: 700px;
        }

        /* The Flip Card Container */
        .flip-card {
            background-color: transparent;
              width: 30%;
            height: 220px; /* Fixed height for consistency */
            perspective: 1000px; /* Adds the 3D depth */
            cursor: pointer;
        }

        /* The Inner Container (What actually flips) */
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-radius: 15px;
        }

        /* The Hover Action */
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        /* Common Styling for Front and Back */
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }

        /* --- FRONT SIDE DESIGN --- */
        .flip-card-front {
            background-color: #ffffff;
            color: #333;
        }

        .icon-box {
            font-size: 40px;
            margin-bottom: 15px;
            color: #E65100; /* Orange accent */
        }

        .service-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .service-stat {
            font-size: 14px;
            color: #666;
            background: #f4f4f4;
            padding: 5px 12px;
            border-radius: 20px;
        }

        /* --- BACK SIDE DESIGN --- */
        .flip-card-back {
            background: linear-gradient(135deg, #2c3e50, #000000); /* Dark elegant back */
            color: white;
            transform: rotateY(180deg);
            gap: 15px;
        }

        .btn-portfolio {
            background-color: #ffffff;
            color: #000;
            border: 1px solid #fff;
			padding: 3px 10px;

        }
        .btn-portfolio:hover {
            background-color: #f0f0f0;
        }

        .btn-hire {
            background-color: transparent;
            color: #fff;
            border: 1px solid #fff;
			padding: 3px 10px;
        }
        .btn-hire:hover {
            background-color: #fff;
            color: #000;
        }


/* Small devices (phones) */
@media screen and (min-device-width: 350px) and (max-device-width: 767px)
{
	 #profile-meta-info{
    position: relative;
    top: 0em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;}
	#section-1{height:110vh;}
	.home-section{width: 100%;}
	.home-section .wrapper{margin:auto;justify-content: center;}
	.info{width: 90%; position:relative;display: grid; grid-template-columns: auto;justify-content: center;align-content: center;margin:auto;position:relative;left:0px;top: -2em;}
	.info h2{font-size:30px; text-align: center;}
	.info h3{font-size:20px; margin-top:-5px; color: #5d625e; font-weight: 100;text-align: center;}
	.info p{font-size:14px; text-align: center;color: #686868;}
	.cta{display: flex; justify-content: center;}
#section-1 .img-area {
  grid-area: profile_photo;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed;
  position: relative;
  margin: 50px 50px 50px 50px;
}
	#section-2>.wrapper{margin:auto;}
	#section-2>.wrapper>h2{margin-bottom:35px;}
	.portfolio-bar {
	border: 0px solid black;
		border-radius: 12px;
		padding: 10px 15px;
		position: absolute;
		top: -6em;
		display: flex;
		height: 12em;
		background: white;
		width: 85%;
		justify-content: space-around;
		box-shadow: 0px 0px 15px black;
		align-items: center;
		column-gap: 1em;}
	.portfolio-box-1, .portfolio-box-2 {
	  display: flex;width: 50%;
	  height: 100%;row-gap: 5px;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	.port-bar {
	border: 1px solid black;
	  display: flex;height: 0%;
	  justify-content: center;
	  align-items: center;}
	.port-bar-horizontal{width: 70%;}
	.port-bar-vertical{height: 70%;}

	div span:first-child {
	  font-size: 25px;
	  font-weight: 600;
	}

	div span:nth-child(2) {
	  font-size: 12px;
		top: -8px;
		display: flex;
		position: relative;
	}

	.left-more-bottom {
	  column-gap: 5em;
	  display: flex;
	  width: 100%;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}

	.left-more-about {
	  width: 100%;
	  border-radius: 12px;
	  height: auto;
	  padding: 0px 15px;
	  row-gap: 12px;
	  display: flex;
	  flex-direction: column;
	}
	.right-more-about {
	  width: 100%;
	}

	  .services-grid {
		display: flex; padding: 30px 0px 40px 0px;
		justify-content: center;
	  }

	.flip-card {
	  background-color: transparent;
	  width: 44%;
	  height: 132px;
	  perspective: 1000px;
	  cursor: pointer;
	}
	.icon-box {
	  font-size: 40px;
	  margin-bottom: 15px;
	  color: #E65100;
	  height: 20%;
	  display: flex;
	  justify-content: start;
	  align-items: center;}
	.service-title {
	  font-size: 13px;line-height: 18px;
	  font-weight: 600;height: 35%;
	  margin-bottom: 10px;
	}
	.service-stat {
	  font-size: 12px;
	  color: #666;
	  background: #f4f4f4;
	  padding: 5px 10px;
	  border-radius: 20px;height: 35%;line-height: 13px;
	}
	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	  border-radius: 15px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  padding: 20px 10px;
	  box-sizing: border-box;
	}

	.btn-portfolio {
	  background-color: #ffffff;
	  color: #000;
	  border: 1px solid #fff;
	  padding: 3px 10px;
	  font-size: 12px;
	}

	#section-3 {
	  padding:40px 10px 82px 10px;
	}
	#section-1 .social-icons{grid-area: profile_icons;
	position: relative;
	display: flex;
	align-content: center;
	justify-content: center;
	top: 20px;
	left: 5px;
	width: 60%;
	margin: auto;
	grid-gap: 8px;}
}

/* ======================================================== Medium devices (tablets)  ========================================================*/
@media screen and (min-device-width: 768px) and (max-device-width: 1024px)
/*  ======================================================== Large devices (laptops)  ========================================================*/
@media screen and (min-device-width: 1025px) and (max-device-width: 1349px)
{
.home-section .wrapper{width:65%;display:flex;justify-content: center; align-items: center; flex-direction:column;height: 60%; margin: 0em auto 4em auto;}
	.bg-black{background-color:black;color:white;border: 1px solid white;}
	.home-section{ display: flex;justify-content: center;align-items: center; position:relative; width:100%;}
	#section-1{height:75vh;}
	#section-2{}
	#section-3{}
	#profile-meta-info{width: 60%;display:grid; grid-template-areas:'profile_photo profile_info' 'profile_photo profile_icons';padding-bottom: 5em;}
	.home-section .wrapper{width:80%;display:flex;justify-content: center; align-items: center; flex-direction:column;height: 60%; margin: 4em auto;}
	#section-1 .img-area{grid-area: profile_photo; height: 300px; width: 300px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px dashed; position: relative; margin: 50px 50px 50px 50px;}
	#section-1 .social-icons{grid-area: profile_icons;
	position: relative;
	top: -2em;
	left: 15px; width: 11rem: height:1.5rem;}
	.fa-instagram:hover, .fa-twitter:hover, .fa-youtube:hover, .fa-facebook:hover, .fa-telegram:hover{color:#5b5b95;cursor:pointer;}
	#section-1 .inner-area{
	  height: calc(100% - 25px);
	  width: calc(100% - 25px);
	  border-radius: 50%;
	}
	#section-1 img{   height: 100%;   width: 100%;   border-radius: 50%;   object-fit: cover; }
	.info{position:relative;grid-area: profile_info; margin: 100px 10px auto 50px;position:relative;left:-40px;top-1.5em;width:100%;}
	.info h2{font-size:50px;}
	.info h3{font-size:30px; margin-top:-15px; color: #5d625e; font-weight: 100;}
	.info p{font-size:15px;margin: 4px auto 5px auto;}
	#show{display:none;}
	.button {padding: 5px 15px; text-align: center; text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;border-radius: 8px;}
	.cta{display:flex;}
	.resume {background-color: white;   color: black;   border: 1px solid #94999B;margin: 4px 12px 4px 2px;}
	.hire-me {background-color: #2f1717; color: #fffefe; border: 1px solid #94999B; margin: 4px 2px 4px 2px;}
	.section-2 > .wrapper > h2{margin:auto;}
	.portfolio-bar
	{
	border: 0px solid black;
	  border-radius: 12px;
	  padding: 10px 50px;
	  position: absolute;
	  top: -60px;
	  display: flex;
	  height: 120px;
	  background: white;
	  width: 65%;
	  justify-content: space-around;
	  box-shadow: 0px 0px 15px black;align-items: center;
	}
	.portfolio-box-1,.portfolio-box-2{display: flex;
	  height: 100%;  justify-content: center;
	  align-items: center;
	  column-gap: 5em;}
	.port-no-bar{display: flex;flex-direction: column;justify-content: center;
	  align-items: center;
	  text-align: center;}
	div span:first-child {
	  font-size: 35px;
	  font-weight: 600;
	}
	div span:nth-child(2) {
	  font-size: 18px;
	}
	.port-bar{border: 1px solid black;display: flex;height:70%;justify-content: center;
	  align-items: center;
	}

	.more-about{width: 100%;margin-top: 10em;display:flex;flex-direction:column;row-gap: 2em;justify-content: center;
	  align-items: center;}
	.more-about-heading{display:flex;flex-direction:column;justify-content: center;
	  align-items: center;}
	.left-more-bottom{column-gap: 5em;
	  display: flex;
	  width: 86%;justify-content: center;
	  align-items: center;}
	.left-more-about{width: 40%;
	  border-radius: 12px;
	  height: auto;
	  padding: 40px 30px;
	  row-gap: 12px;
	  display: flex;
	  flex-direction: column;}
	.profile-photo{position: relative;}
	.profile-photo img{width:100%;}
	.cta-buttons{position: absolute;bottom: 2em;
	  width: 100%;display: flex;column-gap: 10px;
	  justify-content: center;
	  align-items: center;}
	.social-icons{display: flex;
	  justify-content: center;}
	.right-more-about{width:60%;}

	.section-3 > .wrapper > h2{margin:auto;font-size: 30px;font-weight: 600;}
	.fa-brands, .fa-solid{font-size:20px;margin-right:10px; color: #4d4c4c;}
	.fa-brands:visited {
	  color: pink;
	}
	.articles-tab{display: flex; column-gap: 1em;margin-top: 1em;}
	.articles-container{width: 100%;}
	.home-carousel-wrapper{width: 100%;display:none;}
	.home-section-footer{display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;background: #caefca;
	}
	.footer-wrapper{display: flex; flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 90%;
		margin: 2em auto;}
	.footer-top{display: grid;grid-template-columns: 1fr 1fr 1fr;}
	.footer-top .about{display: flex; flex-direction: column;padding:1em;}
	.footer-top .links{display: flex; flex-direction: column;text-align: center;padding:1em;border-left: 2px solid black;}
	.footer-top .social{display: flex; flex-direction: column;padding:1em;border-left: 2px solid black;}
	.footer-bottom{
		padding: 2em 0 1em 0;    display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		flex-direction: column;
		row-gap: 1em;}

	.services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            width: 100%;
            max-width: 700px;
        }

        /* The Flip Card Container */
        .flip-card {
            background-color: transparent;
              width: 30%;
            height: 220px; /* Fixed height for consistency */
            perspective: 1000px; /* Adds the 3D depth */
            cursor: pointer;
        }

        /* The Inner Container (What actually flips) */
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-radius: 15px;
        }

        /* The Hover Action */
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        /* Common Styling for Front and Back */
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }

        /* --- FRONT SIDE DESIGN --- */
        .flip-card-front {
            background-color: #ffffff;
            color: #333;
        }

        .icon-box {
            font-size: 40px;
            margin-bottom: 15px;
            color: #E65100; /* Orange accent */
        }

        .service-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .service-stat {
            font-size: 14px;
            color: #666;
            background: #f4f4f4;
            padding: 5px 12px;
            border-radius: 20px;
        }

        /* --- BACK SIDE DESIGN --- */
        .flip-card-back {
            background: linear-gradient(135deg, #2c3e50, #000000); /* Dark elegant back */
            color: white;
            transform: rotateY(180deg);
            gap: 15px;
        }

        .btn-portfolio {
            background-color: #ffffff;
            color: #000;
            border: 1px solid #fff;
			padding: 3px 10px;

        }
        .btn-portfolio:hover {
            background-color: #f0f0f0;
        }

        .btn-hire {
            background-color: transparent;
            color: #fff;
            border: 1px solid #fff;
			padding: 3px 10px;
        }
        .btn-hire:hover {
            background-color: #fff;
            color: #000;
        }
}
@media screen and (min-device-width:1350px) and (max-device-width: 1600px)
{
	.home-section .wrapper{display:flex;justify-content: center; align-items: center; flex-direction:column; margin: 0em auto 4em auto;}
	.bg-black{background-color:black;color:white;border: 1px solid white;}
	.home-section{ display: flex;justify-content: center;align-items: center; position:relative; width:100%;}
	#section-1{height:100vh;}
	#section-2{}
	#section-3{}
	#profile-meta-info{width:80%;display:grid; grid-template-areas:'profile_photo profile_info' 'profile_photo profile_icons';padding-bottom: 5em;}
	.home-section .wrapper{width:80%;display:flex;justify-content: center; align-items: center; flex-direction:column;height: 60%; margin: 4em auto;}
	#section-1 .img-area{grid-area: profile_photo; height: 300px; width: 300px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px dashed; position: relative; margin: 50px 50px 50px 50px;}
	#section-1 .social-icons{grid-area: profile_icons;
	position: relative;
	top: -2em;
	left: 15px; width: 11rem: height:1.5rem;}
	.fa-instagram:hover, .fa-twitter:hover, .fa-youtube:hover, .fa-facebook:hover, .fa-telegram:hover{color:#5b5b95;cursor:pointer;}
	#section-1 .inner-area{
	  height: calc(100% - 25px);
	  width: calc(100% - 25px);
	  border-radius: 50%;
	}
	#section-1 img{   height: 100%;   width: 100%;   border-radius: 50%;   object-fit: cover; }
	.info{position:relative;grid-area: profile_info; margin: 100px 10px auto 50px;position:relative;left:-40px;top-1.5em;width:100%;}
	.info h2{font-size:50px;}
	.info h3{font-size:30px; margin-top:-15px; color: #5d625e; font-weight: 100;}
	.info p{font-size:15px;margin: 4px auto 5px auto;}
	#show{display:none;}
	.button {padding: 5px 15px; text-align: center; text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;border-radius: 8px;}
	.cta{display:flex;}
	.resume {background-color: white;   color: black;   border: 1px solid #94999B;margin: 4px 12px 4px 2px;}
	.hire-me {background-color: #2f1717; color: #fffefe; border: 1px solid #94999B; margin: 4px 2px 4px 2px;}
	.section-2 > .wrapper > h2{margin:auto;}
	.portfolio-bar
	{
	border: 0px solid black;
	  border-radius: 12px;
	  padding: 10px 50px;
	  position: absolute;
	  top: -60px;
	  display: flex;
	  height: 120px;
	  background: white;
	  width:80%;
	  justify-content: space-around;
	  box-shadow: 0px 0px 15px black;align-items: center;
	}
	.portfolio-box-1,.portfolio-box-2{display: flex;
	  height: 100%;  justify-content: center;
	  align-items: center;
	  column-gap: 3em;}
	.port-no-bar{display: flex;flex-direction: column;justify-content: center;
	  align-items: center;
	  text-align: center;}
	div span:first-child {
	  font-size: 35px;
	  font-weight: 600;
	}
	div span:nth-child(2) {
	  font-size: 18px;
	}
	.port-bar{border: 1px solid black;display: flex;height:70%;justify-content: center;
	  align-items: center;
	}

	.more-about{width: 100%;margin-top: 10em;display:flex;flex-direction:column;row-gap: 2em;justify-content: center;
	  align-items: center;}
	.more-about-heading{display:flex;flex-direction:column;justify-content: center;
	  align-items: center;}
	.left-more-bottom{column-gap: 5em;
	  display: flex;
	  width: 100%;justify-content: center;
	  align-items: center;}
	.left-more-about{width: 40%;
	  border-radius: 12px;
	  height: auto;
	  padding: 40px 30px;
	  row-gap: 12px;
	  display: flex;
	  flex-direction: column;}
	.profile-photo{position: relative;}
	.profile-photo img{width:100%;}
	.cta-buttons{position: absolute;bottom: 2em;
	  width: 100%;display: flex;column-gap: 10px;
	  justify-content: center;
	  align-items: center;}
	.social-icons{display: flex;
	  justify-content: center;}
	.right-more-about{width:60%;}

	.section-3 > .wrapper > h2{margin:auto;font-size: 30px;font-weight: 600;}
	.fa-brands, .fa-solid{font-size:20px;margin-right:10px; color: #4d4c4c;}
	.fa-brands:visited {
	  color: pink;
	}
	.articles-tab{display: flex; column-gap: 1em;margin-top: 1em;}
	.articles-container{width: 100%;}
	.home-carousel-wrapper{width: 100%;display:none;}
	.home-section-footer{display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;background: #caefca;
	}

	.services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            width: 100%;
            max-width: 700px;
        }

        /* The Flip Card Container */
        .flip-card {
            background-color: transparent;
              width: 30%;
            height: 220px; /* Fixed height for consistency */
            perspective: 1000px; /* Adds the 3D depth */
            cursor: pointer;
        }

        /* The Inner Container (What actually flips) */
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-radius: 15px;
        }

        /* The Hover Action */
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        /* Common Styling for Front and Back */
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }

        /* --- FRONT SIDE DESIGN --- */
        .flip-card-front {
            background-color: #ffffff;
            color: #333;
        }

        .icon-box {
            font-size: 40px;
            margin-bottom: 15px;
            color: #E65100; /* Orange accent */
        }

        .service-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .service-stat {
            font-size: 14px;
            color: #666;
            background: #f4f4f4;
            padding: 5px 12px;
            border-radius: 20px;
        }

        /* --- BACK SIDE DESIGN --- */
        .flip-card-back {
            background: linear-gradient(135deg, #2c3e50, #000000); /* Dark elegant back */
            color: white;
            transform: rotateY(180deg);
            gap: 15px;
        }

        .btn-portfolio {
            background-color: #ffffff;
            color: #000;
            border: 1px solid #fff;
			padding: 3px 10px;

        }
        .btn-portfolio:hover {
            background-color: #f0f0f0;
        }

        .btn-hire {
            background-color: transparent;
            color: #fff;
            border: 1px solid #fff;
			padding: 3px 10px;
        }
        .btn-hire:hover {
            background-color: #fff;
            color: #000;
        }
}