*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root
{
	--primary:#FE7146;
	--second-color:#40f7d9;
	--second-color-dark:#0CB99D;
	--top-header:#f07959;
	--top-header:#6823c2;

	--top-header-hover:#f2e96d;
	--text-color:#4A4A4A;

}
a 
{
	text-decoration: none;

}
ol,ul 
{
	margin: 0;
	padding: 0;
}
ul li
{
	list-style: none;
}
.side-padding
{
	padding-inline: 100px;
/*	 font-family: "Poppins", sans-serif;*/
}

/* Scrollbar ko thin aur custom color dene ke liye */
body::-webkit-scrollbar {
  width: 6px; /* Scrollbar ki width */
}

/* Scrollbar track (background) */
body::-webkit-scrollbar-track {
  background: #f1f1f1; /* Light gray background */
  border-radius: 10px;
  overflow-x: hidden;
}

/**{
	border: 1px solid red;
}*/
/* Scrollbar thumb (jo move hota hai) */
body::-webkit-scrollbar-thumb {
  background: #ff6600; /* Orange color */
  border-radius: 10px;
}

/* Jab hover kare toh color change ho */
body::-webkit-scrollbar-thumb:hover {
  background: #cc5500; /* Darker orange */
}
body 
{
    overflow-x: hidden;
}

/*.....................................................................*/


.header-top
{
	height: 5.5vh;
/*	background:var(--top-header) ;*/
background:linear-gradient(90deg,#6823c2 40%,#941885);
/*	padding-inline: 100px;*/
	display: flex;
	align-items: center;
}
.top-contact ul
{
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
}
.top-contact ul li
{
	color: #fff;
	display: flex;
	align-items: center;
	gap: 5px;
}
.top-contact ul li a 
{
	color: #fff;
	font-size: 14px;
	transition: 0.5s;

}
.top-contact ul li a:hover
{
	color: var(--top-header-hover);
}
.top-contact,.top-social
{
	flex: 1;
}
.top-social ul
{
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
}
.top-social
{
	display: flex;
	justify-content: flex-end;
}
.top-social ul li a 
{
	color: #fff;
	font-size: 18px;
	transition: 0.5s;
}
.top-social ul li a:hover
{
	color: var(--top-header-hover);
}
/*.fa-linkedin-in:hover
{
	color:#0A66C2;
}*/
/*.......................................*/
header
{
	height: 13vh;
	widows: 100%;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
/*	padding-inline: 100px;*/
	position: relative;

}

.logo 
{
	flex:1;
}
nav
{
	flex: 4;
	display: flex;
	align-items: center;

/*	background: #000;*/

}
nav ul 
{
	display: flex;
	align-items: center;
	margin: 0;
	gap: 50px;
}

nav ul li a 
{
	
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-color);
}
header .logo img 
{
	width: 90px;
}

.cursor {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 111;
    border: 1px solid #fff;
    transition: all 0.2s ease-out;
    animation: moveCursor1 .5s infinite alternate;
}
.cusror_color
{
	border: 1px solid var(--primary);
}
.expand {
    background: transparent;
    animation: moveCursor2 .5s forwards;
    border: 1px solid var(--second-color);
}

@keyframes moveCursor1 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(.8);
    }
}

@keyframes moveCursor2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2.5);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/*...................................................*/
.hero-section
{
	height: 70vh;
	background: url(../images/background2.webp);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position:relative;


/*	padding-inline: 100px;*/
}

.hero-section video
{
	    position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            object-fit: cover;
}

.content {
            position: relative;
            z-index: 2;
             
}

.overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 102%;
            background: rgba(255, 255, 255, 0.95); /* Dark overlay */
            z-index: 1;
            top: -5px;
}
.hero-section .content
{
	display: flex;
	padding-top: 50px;
}
.hero-section .content .left-side,.hero-section .content .right-side
{
	flex: 1;
	width: 50%;
}
.hero-section .content h1 
{
	color: #2B2323;
	font-size:48px;
	font-weight: bold;

}

.hero-section .content h2
{
	color: #2B2323;
	font-size:28px;
	
}
.website-development-text
{
	color: var(--primary);
	text-shadow: 2px 4px rgba(0, 0, 0, 0.1);
}
.seo-opt-text
{
	color: var(--top-header);
	text-shadow: 2px 4px rgba(0, 0, 0, 0.1);
}


    .swiper {
      width: 100%;
      height:50%;
    }

    .swiper-slide {
/*      text-align: center;*/
      font-size: 18px;
/*      background: #fff;*/
    /*  display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;*/
      height: auto;
    }

   /* .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }*/
.mySwiper .swiper-pagination {
	text-align: left;
}

 .star
 {
 	display: flex;
 	gap: 5px;
 }

.star .fa-star,.star .fa-star-half-stroke
{
	color: var(--primary);
	font-size: 14px;
}
.test-name
{
	color: var(--text-color);
}
.swiper-pagination-bullet-active
{
	background: var(--top-header);
}


/*......................................................*/
.hero-section .right-side
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.consultation-form
{
/*	border: 1px solid #000;*/
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-inline: 50px;
	padding-block: 50px;
	border-radius: 20px;
	width: 60%;
	background: var(--primary); /* Default background color */
    background-image: url("../images/form-bg.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain; /* Ya "cover" try kar sakte ho */
}
.consultation-form h3 
{
	text-align: center;
	color: #fff;
	font-weight: bold;
	letter-spacing: 1px;
}
.consultation-form form 
{
	width: 100%;
}
.consultation-form input 
{
/*	height: 50px;*/
	margin-block: 5px;
	border-radius: 40px;
	border: none;
	width: 100%;
	outline: none;
	padding: 15px;
	font-size: 14px;
}
.submit-btn
{
	font-size: 16px;
	transition: 0.5s;
}
/*.submit-btn:hover*/
/*{*/
	/*background:linear-gradient(90deg,#6823c2,#941885);
	color: #fff;*/
/*}*/
/*....................................................*/
.mobile-toggle
{
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;

}
.mobile-toggle .line 
{
	width: 30px;
	height: 3px;
	background: var(--primary);

}
/*.......................................................*/
.why-choose-us
{
	height: 100vh;
	display: flex;
	background:linear-gradient(90deg,#6823c2,#941885);
	color: #fff;
}
.why-choose-image dotlottie-player
{
	 transform: scaleX(-1);
	 margin: 0;
	 padding: 0;

}
.why-choose-image
{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}
.why-choose-content
{
	padding-top: 100px;
	flex: 1.5;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.brand-color
{
	text-shadow: 2px 4px rgba(0, 0, 0, 0.1);
}
.why-choose-content p 
{
	font-size: 18px;
}
.sub-heading
{
	font-size:36px;
	font-weight: bold;

}
.brand-color
{
	color: var(--primary);
}
.why-choose-content ul li 
{
	font-size: 18px;
/*	line-height: 60px;*/
	margin-block: 10px;
}
.why-choose-content .icon-box
{
	padding: 5px;
	width: 50px;
	height: 50px;
	min-width: 50px;
	min-height:50px;
/*	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);*/

	background-color: #fff;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	margin-top: -10px;

}
.why-choose-content .icon-box img 
{
	width: 90%;
}
/*.why-choose-list
{
	columns: 2;
}
.why-choose-list li 
{
	display: flex;
	align-items: center;
	gap: 10px;
}*/


.list-flex
{
	display: flex;
/*	align-items: center;*/
	gap: 10px;
/*	border: 1px solid red;*/
	align-items: center;
}
/*............................................................*/
.our-process
{
	padding-block: 50px;
}
.our-process h3 
{
	text-align: center;
}
.our-process .description
{
	text-align: center;
	font-size: 18px;
	padding-inline: 100px;
}
.our-process-describ
{
	display: flex;
	gap: 20px;
}
.our-process-describ .box
{	
	border-radius: 10px;
	position: relative;
	flex: 1;
	box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.1);
}
/* Box default styling */
.our-process-describ .effect-box {
    position: relative;
    padding-inline: 15px;
    padding-block: 15px;
    padding-top:60px;
    background: #fff; /* Default background */
    color: var(--text-color);
    border-radius: 10px;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    z-index: 1;
  

}
.some-shadow-text h4,.some-shadow-text p
{
    
}
/* Before element for hover effect */
.our-process-describ .effect-box::before {
    content: "";
    position: absolute;
    top: var(--yPos, 50%);
    left: var(--xPos, 50%);
    width: 10px;
    height: 10px;
    background: var(--primary); /* Hover color */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.7s ease-out;
    z-index: -1;
}

/* On hover, spread the color */
.our-process-describ .effect-box:hover::before {
    transform: translate(-50%, -50%) scale(100);
}
.our-process-describ .effect-box:hover 
{
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

/*.our-process-describ .effect-box.effect-box:hover */
/*{*/

/*}*/


.our-process-describ .box .icon 
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
    top: -50px; /* Thoda upar le jaane ke liye */
    left:15%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    overflow: visible; /* Isko hide mat karna */
    z-index: 2; /* Ensure upar dikhe */
}
.our-process-describ .box1 .icon
{
	border: 2px ridge var(--second-color-dark);
}

.our-process-describ .box1 .effect-box::before
{
	background: var(--second-color-dark);
} 
.our-process-describ .box2 .icon
{
	border: 2px ridge var(--primary);
}
.our-process-describ .box2 .effect-box::before
{
	background: var(--primary);
} 
.our-process-describ .box3 .icon
{
	border: 2px ridge var(--top-header);
/*	position: relative;*/
}

.our-process-describ .box3 .effect-box::before
{
	background: var(--top-header);
} 

.our-process-describ .box .icon img 
{
	width: 70%;
}

.our-process-describ .box3 .icon .rocket
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
	width: 20%;
}
/*.....................................................*/
.website-holding .box1 .icon
{
	border: 2px ridge var(--top-header);
}
.website-holding .box1 .effect-box::before
{
	background: var(--top-header);
}

.website-holding .box2 .icon
{
	border: 2px ridge var(--second-color-dark);
}
.website-holding .box2 .effect-box::before
{
	background: var(--second-color-dark);
}

.website-holding .box3 .icon
{
	border: 2px ridge var(--primary);
}
.website-holding .box3 .effect-box::before
{
	background: var(--primary);
}

.web-fix-btn 
{
	border-radius: 20px;
	padding: 6px 12px;
	font-weight: 500;
	transition: 0.5s ease-in-out;
	
}
.website-holding .box1 .web-fix-btn 
{
	border: 1px ridge var(--top-header);
	color: var(--top-header);

}
.website-holding .box2 .web-fix-btn 
{
	border: 1px ridge var(--second-color-dark);
	color: var(--second-color-dark);

}
.website-holding .box3 .web-fix-btn 
{
	border: 1px ridge var(--primary);
	color: var(--primary);

}
.website-holding .effect-box:hover .web-fix-btn  
{
	color: #fff;
	border-color: #ffff;
} 
/*........................................................*/
.our-work
{
	height: 105vh;
	background:linear-gradient(90deg,#6823c2,#941885);
	padding-block: 50px;
	text-align: center;
}
.our-work .sub-heading
{
	color: #fff;
}
.our-work .description
{
	font-size: 18px;
	color: #fff;
	padding-inline: 100px;
}
.portfolio
{
	width: 100%;
    height:80%;
/*    padding-top: 100px;*/
}
.portfolio .swiper-pagination-bullet-active
{
	background: #fff;
}
.swiper-pagination
{
	display: none;
}
.portfolio .swiper-button-next:after,.portfolio .swiper-button-prev:after
{
	font-size: 18px !important;
	color: #fff;
	
}
.portfolio .swiper-slide
{
	display: flex;
	flex-direction: column;

}
.portfolio .swiper-slide .top-side
{
	display: flex;
}
.portfolio .swiper-slide .left-side
{
	display: flex;

}
/*.portfolio .left-side
{
	display: flex;
}*/
.portfolio .right-side
{
	display: flex;
	align-items: center;

}
/*.portfolio .left-side img 
{
	width: 100%;
	object-fit: cover;
}*/
.laptop,.mobile
{
	position: relative;
}
.laptop img ,.mobile img 
{
	width: 100%;
	object-fit: cover;
}
.project-mockup
{
	width: 70%;
	aspect-ratio: 1.5;
/*	border: 1px solid red;*/
	position: absolute;
	left: 50%;
	top: 20px;
	z-index: -1;
	transform: translate(-50%);
	overflow: hidden;
}
.project-mockup-mobile
{
	width: 97%;
	aspect-ratio: 0.485;
/*	border: 1px solid red;*/
	position: absolute;
	left: 50%;
/*	top: 37px;*/
/*	top: 7.4%;*/
	top: 1%;
	z-index: -1;
	transform: translate(-50%);
	overflow: hidden;
	border-radius: 15px ;
}

.projects
{
	width: 100%;
	object-fit: cover;
}
.project-mobile
{
	border-radius: 10px ;
}


.swiper-slide-active .projects
{
	
	animation: project-scroll 15s linear ;
	animation-delay: 0.3s;
}
.swiper-slide-active .project-mobile
{
	animation: project-scroll 40s linear ;
	animation-delay: 0.3s;

}

@keyframes project-scroll{
	0%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(-85%);
	}
}
.portfolio-details
{
/*	border: 1px solid red;*/

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 30px;
	transition: 0.5s;
	transition-delay: 0.3s;
	opacity: 0;
	transform: translate(330px);

}
.portfolio-details h5
{
	font-size: 30px;
}
.portfolio-details h5 , .portfolio-details p 
{
	text-align: left;
	color: #fff;
}
.bottom-side
{
	padding-block: 20px;
	padding-inline: 10vw;
}
.project-describe
{
	margin: 0;
	padding: 5px;
/*	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction: row;*/
	text-align: center;

color:#fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	border-radius: 20px;

	transition: 0.5s;
	transition-delay: 0.3s;
	transform: translateY(100px);
	opacity: 0;


	

}
.swiper-slide-active .project-describe
{
	transform: translateY(0px);
	opacity: 1;
}
.swiper-slide-active .portfolio-details
{
	transform: translate(0px);
	opacity: 1;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}


/*..................................................*/
.clients-logo
{
	padding-block: 40px;
	text-align: center;
	background:linear-gradient(90deg,#6823c2,#941885);

	
}
.clients-logo .sub-heading
{
	color: #fff;
}
.clients-logo .description 
{
	color: #fff;
}
.clients
{
            width: 100%;
            height: 150px;
            overflow: hidden;
}
.clients .swiper-wrapper
{
            display: flex;
            transition-timing-function: linear !important; /* Smooth animation */
}
.clients .swiper-slide
{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 100px;
            margin-top: 10px;
            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
}
.clients .swiper-slide img 
{
            width: 100%;
            height: auto;
            object-fit: contain;
}
/*.....................................................*/
.faq
{
	/*height: 60vh;*/
	height: auto;
	display: flex;
	gap: 50px;
	align-items: center;
	padding-block: 50px;


}
.faq .left-side,.faq .right-side 
{
	flex: 1;

}
.faq dotlottie-player
{
	width: 80%;
	height: 80%px;
}
.faq .right-side 
{
	display: flex;
	justify-content: center;
}
/* Detail styling */
.details{
  --padding: 10px;
  border: 1px solid var(--top-header);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.details + .details{
  margin-top: 15px;
}

.details__title{
  --width: 20px;
  --height: 3px;
  --radius: 1px;
  --color: var(--primary);
  margin:0;
  padding: var(--padding) calc(var(--width) * 2) var(--padding) var(--padding);
  cursor: pointer;
  transition: all .2s ease-in-out;
  position: relative;
  font-size: 18px;
  color: var(--text-color);
}

.details__title:before,
.details__title:after{
  content:'';
  display: block;
  width: var(--width);
  height: var(--height);
  background-color: var(--color);
  position: absolute;
  border-radius: var(--radius);
  top: calc(50% - (var(--height) / 2));
  right: calc(var(--width) / 2);
  transition: all .2s ease-in-out;
}

.details__title:after{
  rotate: 90deg;
}

.details__container[open] .details__title:before{
  rotate: 45deg;
  /* rotate: 135deg; */
}

.details__container[open] .details__title:after{
  rotate: 135deg;
  /* rotate: 225deg; */
}

.details__container[open] .details__title{
  background-color: #f3f3f3;
}

.details__summary::marker{
  content:'';
}

.details__desc{
  visibility: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: all .2s ease-in-out;
  overflow: hidden;
  padding-inline: var(--padding);
  pointer-events: none;
}

.details__container[open] + .details__desc{
  visibility: visible;
  grid-template-rows: 1fr;
  padding-block: var(--padding);
}

.details__desc-inner{
  min-height: 0;
}









/*...................................................*/
.get-in-touch
{
	display: flex;
	padding-block: 50px;
	background:linear-gradient(90deg,#6823c2,#941885);

}
.get-in-touch .left-side,.get-in-touch .right-side
{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.get-in-touch .sub-heading
{
	color: #fff;
}
.get-in-touch .description
{
	font-size: 18px;
	color: #fff;
}

.get-in-touch .right-side a
{
	width: fit-content;
	padding: 12px 18px;
	background: none;
	outline: none;
	border: 2px ridge #fff;
	border-radius: 40px;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
}


/*........................................................*/
.world
{
	text-align: center;
}
.world img 
{
	margin-top: 40px;
}
/*............................................................*/
.whatsapp-btn {
  position: fixed;
  z-index: 999999;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 30px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* WhatsApp Icon Styling */
.whatsapp-btn i {
  position: relative;
  z-index: 3;
  color: #fff;
}

/* Pulse Effect */
.pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #25D366;
  border-radius: 50%;
  z-index: -1;
  animation: pulse-animation 1.5s infinite;
}

/* Keyframes for Pulse */
@keyframes pulse-animation {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/*.................................*/
.call-btn {
  position: fixed;
  z-index: 999999;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  background-color: #007BFF;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 30px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: none;
}

/* Call Icon Styling */
.call-btn i {
  position: relative;
  z-index: 2;
  color: white; /* Icon white hi rahega */
}

/* Pulse Effect */
.call-btn .pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #007BFF;
  border-radius: 50%;
  z-index: -1;
  animation: pulse-animation 1.5s infinite;
}

/* Keyframes for Pulse */
@keyframes pulse-animation {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Show only on screens below 992px */
@media screen and (max-width: 992px) {
  .call-btn {
    display: flex;
  }
}

.error-message
{
	color: #fff;
	background: var(--top-header);
	padding: 10px;
	position: absolute;
	top: 0px;
	border-radius: 5px;
	display: none;
}

.step
{
	width: 50px;
	object-fit: cover;
	margin-bottom: 5px;
	opacity: 0.8;
}

/*........................................................................*/
.bg-overlay
{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	z-index: 9999888;
	top: 0;
	left: 0;
	display: none;
}

 .custom-alert {
            position: fixed;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
/*           background:linear-gradient(35deg,#710C65, #5418A2 40%,#710C65);*/
           background:linear-gradient(35deg,#710C65,#710C65,#5418A2 );
            color: white;
/*            background-color: #56054C;*/
            padding: 25px;
            border-radius: 5px;
            display: none;
            z-index: 9999999;
            box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
        }
 .custom-alert h4 
 {

 }
   .custom-alert a 
   {
   		background: #056F05;
   		color: #fff;
   		padding: 8px 12px;
   		border-radius: 5px;
   		box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2);
   		font-size: 16px;
   }
.cut-btn {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 3px;
    top: 3px;
    cursor: pointer;
}

.cut-btn::before, .cut-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px; /* Line thickness */
    background-color: #fff; /* Color of the lines */
    top: 50%; /* Aligns to the middle */
    left: 0;
    transform-origin: center; /* Ensures the rotation happens around the center */
}

.cut-btn::before {
    transform: rotate(45deg); /* First diagonal line */
}

.cut-btn::after {
    transform: rotate(-45deg); /* Second diagonal line */
}