#middle-body {
  /* border: 1px solid red; */
  /* margin-top: 10px; */
  box-sizing: border-box;
  width: 100vw;
}

/* ===================================================== */
/* HERO SECTION */
/* ===================================================== */

#hero-section {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 7%;
  gap: 60px;

  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92)),
    url("../imgs/bg.jpg");

  background-size: cover;
  background-position: center;
  color: #fff;

  position: relative;
  overflow: hidden;
}

/* ===================================================== */
/* LEFT */
/* ===================================================== */

.hero-content {
  width: 52%;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 18px;
  border-radius: 100px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);

  font-size: 14px;
  font-weight: 600;

  margin-bottom: 25px;
}

#hero-title {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

#hero-caption {
  font-size: 1.3rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);

  max-width: 700px;
  margin-bottom: 35px;

  transition: opacity 0.4s ease;
}

/* ===================================================== */
/* BUTTONS */
/* ===================================================== */

.hero-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.hero-btn {
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;

  transition: all 0.3s ease;
}

.primary-btn {
  background: #2563eb;
  color: #fff;
}

.primary-btn:hover {
  transform: translateY(-3px);
  background: #1d4ed8;
}

.secondary-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

/* ===================================================== */
/* RIGHT */
/* ===================================================== */

.hero-showcase {
  width: 40%;
  display: flex;
  justify-content: center;
}

.feature-spotlight {
  width: 100%;
  width: 400px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 28px;
  padding: 35px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);

  transition: all 0.4s ease;
}

.feature-spotlight:hover {
  transform: translateY(-6px);
}

.spotlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.spotlight-icon {
  width: 75px;
  height: 75px;

  border-radius: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 32px;

  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
}

.spotlight-rating {
  color: #facc15;
  font-size: 15px;
}

#spotlight-title {
  font-size: 2rem;
  margin-bottom: 15px;
}

#spotlight-text {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.8;
  font-size: 1.05rem;
  margin-bottom: 30px;
}

.spotlight-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;
  border-radius: 100px;

  background: rgba(16, 185, 129, 0.12);
  color: #34d399;

  font-size: 14px;
  font-weight: 600;
}

/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media (max-width: 950px) {
  #hero-section {
    flex-direction: column;
    padding: 60px 20px;
    text-align: center;
  }

  .hero-content,
  .hero-showcase {
    width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-showcase {
    margin-top: 20px;
  }
}
/* --END OF HERO SECTION-- */

/* ===================================================== */
/* ABOUT SECTION */
/* ===================================================== */

#about-section{
	position:relative;
	width:100%;
	padding:120px 6%;
	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f8fbff 100%
		);

	overflow:hidden;
}


/* ===================================================== */
/* BACKGROUND GLOW */
/* ===================================================== */

.zs-about-glow{
	position:absolute;
	border-radius:50%;
	filter:blur(90px);
	opacity:0.15;
	pointer-events:none;
}

.zs-about-glow-1{
	width:320px;
	height:320px;
	background:#2563eb;

	top:-100px;
	left:-120px;
}

.zs-about-glow-2{
	width:260px;
	height:260px;
	background:#06b6d4;

	right:-80px;
	bottom:-80px;
}


/* ===================================================== */
/* MAIN WRAPPER */
/* ===================================================== */

.zs-about-wrapper{
	position:relative;
	z-index:2;

	display:grid;
	grid-template-columns:1fr 1fr;
	gap:80px;
	align-items:center;

	max-width:1400px;
	margin:auto;
}


/* ===================================================== */
/* LEFT CONTENT */
/* ===================================================== */

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

.zs-about-badge{
	display:inline-flex;
	align-items:center;
	gap:10px;

	padding:12px 20px;

	border-radius:100px;

	background:rgba(37,99,235,0.08);

	color:var(--primary);

	font-size:0.95rem;
	font-weight:700;

	margin-bottom:28px;
}

.zs-about-content h2{
	font-size:clamp(2.6rem, 4vw, 4.6rem);
	font-weight:800;
	line-height:1.08;
	letter-spacing:-1.5px;

	color:#0f172a;

	margin-bottom:28px;
}

.zs-about-description{
	font-size:1.08rem;
	line-height:1.9;
	color:#64748b;

	margin-bottom:50px;

	max-width:700px;
}


/* ===================================================== */
/* FEATURES */
/* ===================================================== */

.zs-about-features{
	display:flex;
	flex-direction:column;
	gap:24px;

	margin-bottom:45px;
}

.zs-about-feature-item{
	display:flex;
	align-items:flex-start;
	gap:18px;

	padding:24px;

	border-radius:28px;

	background:#ffffff;

	border:1px solid #e2e8f0;

	box-shadow:
		0 10px 35px rgba(15,23,42,0.04);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.zs-about-feature-item:hover{
	transform:translateY(-6px);

	border-color:rgba(37,99,235,0.22);

	box-shadow:
		0 20px 45px rgba(37,99,235,0.08);
}

.zs-about-feature-icon{
	min-width:62px;
	width:62px;
	height:62px;

	border-radius:20px;

	display:flex;
	align-items:center;
	justify-content:center;

	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	color:#ffffff;
	font-size:1.25rem;
}

.zs-about-feature-texts h3{
	font-size:1.08rem;
	font-weight:700;
	color:#0f172a;

	margin-bottom:8px;
}

.zs-about-feature-texts p{
	font-size:0.96rem;
	line-height:1.8;
	color:#64748b;
}


/* ===================================================== */
/* CTA BUTTONS */
/* ===================================================== */

.zs-about-actions{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
}

.zs-about-primary-btn,
.zs-about-secondary-btn{
	display:inline-flex;
	align-items:center;
	gap:12px;

	padding:16px 28px;

	border-radius:18px;

	font-weight:700;
	font-size:1rem;

	text-decoration:none;

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

.zs-about-primary-btn{
	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	color:#ffffff;

	box-shadow:
		0 15px 35px rgba(37,99,235,0.25);
}

.zs-about-primary-btn:hover{
	transform:translateY(-4px);

	box-shadow:
		0 20px 45px rgba(37,99,235,0.32);
}

.zs-about-secondary-btn{
	background:#ffffff;

	border:1px solid #e2e8f0;

	color:#0f172a;
}

.zs-about-secondary-btn:hover{
	transform:translateY(-4px);

	border-color:rgba(37,99,235,0.22);

	box-shadow:
		0 15px 35px rgba(15,23,42,0.06);
}


/* ===================================================== */
/* VISUAL AREA */
/* ===================================================== */

.zs-about-visual-area{
	position:relative;

	display:flex;
	align-items:center;
	justify-content:center;

	min-height:700px;
}


/* ===================================================== */
/* DASHBOARD CARD */
/* ===================================================== */

.zs-about-dashboard-card{
	width:100%;
	max-width:640px;

	background:#ffffff;

	border-radius:36px;

	padding:18px;

	border:1px solid #e2e8f0;

	box-shadow:
		0 40px 80px rgba(15,23,42,0.08);
}

.zs-about-dashboard-topbar{
	display:flex;
	gap:8px;

	padding-bottom:16px;
}

.zs-about-dashboard-topbar span{
	width:10px;
	height:10px;

	border-radius:50%;

	background:#cbd5e1;
}

.zs-about-dashboard-content{
	display:flex;
	min-height:420px;

	border-radius:24px;
	overflow:hidden;

	background:#f8fafc;
}


/* SIDEBAR */

.zs-about-sidebar{
	width:100px;

	background:#0f172a;

	padding:24px 18px;
}

.zs-about-sidebar-logo{
	width:52px;
	height:52px;

	border-radius:18px;

	display:flex;
	align-items:center;
	justify-content:center;

	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	color:#ffffff;
	font-size:1.3rem;

	margin-bottom:38px;
}

.zs-about-sidebar-lines{
	display:flex;
	flex-direction:column;
	gap:18px;
}

.zs-about-sidebar-lines span{
	height:12px;
	border-radius:20px;

	background:#334155;
}


/* MAIN PREVIEW */

.zs-about-main-preview{
	flex:1;
	padding:28px;
}

.zs-about-preview-header{
	height:24px;
	width:50%;

	border-radius:30px;

	background:#dbeafe;

	margin-bottom:28px;
}

.zs-about-preview-stats{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;

	margin-bottom:24px;
}

.zs-about-preview-stats div{
	height:90px;

	border-radius:22px;

	background:
		linear-gradient(
			135deg,
			#dbeafe,
			#eff6ff
		);
}

.zs-about-preview-chart{
	height:150px;

	border-radius:26px;

	background:
		linear-gradient(
			135deg,
			#eff6ff,
			#f8fafc
		);

	margin-bottom:24px;
}

.zs-about-preview-table{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.zs-about-preview-table span{
	height:16px;

	border-radius:20px;

	background:#e2e8f0;
}


/* ===================================================== */
/* FLOATING CARD */
/* ===================================================== */

.zs-about-floating-card{
	position:absolute;
	left:-20px;
	top:80px;

	display:flex;
	align-items:center;
	gap:14px;

	padding:18px 22px;

	background:#ffffff;

	border-radius:24px;

	box-shadow:
		0 20px 50px rgba(15,23,42,0.08);

	animation:zsAboutFloat 4s ease-in-out infinite;
}

.zs-about-floating-icon{
	width:62px;
	height:62px;

	border-radius:20px;

	display:flex;
	align-items:center;
	justify-content:center;

	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	color:#ffffff;
	font-size:1.3rem;
}

.zs-about-floating-texts h4{
	font-size:1rem;
	font-weight:700;
	color:#0f172a;

	margin-bottom:4px;
}

.zs-about-floating-texts p{
	font-size:0.92rem;
	color:#64748b;
}


/* ===================================================== */
/* MINI STATUS */
/* ===================================================== */

.zs-about-mini-stat{
	position:absolute;
	right:20px;
	bottom:70px;

	display:flex;
	align-items:center;
	gap:12px;

	padding:14px 22px;

	border-radius:100px;

	background:#ffffff;

	box-shadow:
		0 15px 40px rgba(15,23,42,0.08);

	font-weight:700;
	color:#0f172a;

	animation:zsAboutFloat 5s ease-in-out infinite;
}

.zs-about-mini-pulse{
	width:12px;
	height:12px;

	border-radius:50%;

	background:#22c55e;

	box-shadow:
		0 0 14px rgba(34,197,94,0.8);
}


/* ===================================================== */
/* FLOAT ANIMATION */
/* ===================================================== */

@keyframes zsAboutFloat{

	0%{
		transform:translateY(0px);
	}

	50%{
		transform:translateY(-10px);
	}

	100%{
		transform:translateY(0px);
	}
}


/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width: 1200px){

	.zs-about-wrapper{
		grid-template-columns:1fr;
	}

	.zs-about-visual-area{
		order:2;
	}

	.zs-about-content{
		order:1;
	}
}

@media (max-width: 768px){

	#about-section{
		padding:90px 5%;
	}

	.zs-about-content h2{
		font-size:2.5rem;
	}

	.zs-about-dashboard-content{
		flex-direction:column;
	}

	.zs-about-sidebar{
		width:100%;

		display:flex;
		align-items:center;
		gap:25px;
	}

	.zs-about-sidebar-lines{
		flex:1;
	}

	.zs-about-preview-stats{
		grid-template-columns:1fr;
	}

	.zs-about-floating-card{
		left:0;
		top:30px;

		transform:scale(0.9);
	}

	.zs-about-mini-stat{
		right:0;
		bottom:20px;

		transform:scale(0.9);
	}

	.zs-about-actions{
		flex-direction:column;
	}
}

/* --END OF ABOUT SECTION-- */




/* =====================================================
   FEATURES SECTION
===================================================== */

#features-section{
	position: relative;

	padding: 120px 6vw;

	background:
		linear-gradient(
			to bottom,
			#f8fbff,
			#ffffff
		);

	overflow: hidden;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.features-top{
	max-width: 850px;
	margin: auto;
	text-align: center;
	margin-bottom: 70px;
}

.section-badge{
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 10px 18px;

	background: rgba(37,99,235,0.08);

	color: #2563eb;

	border-radius: 999px;

	font-size: .95rem;
	font-weight: 600;

	margin-bottom: 24px;
}

.features-top h2{
	font-size: clamp(2.3rem, 4vw, 4rem);
	font-weight: 800;
	line-height: 1.15;

	color: #0f172a;

	margin-bottom: 24px;
}

.features-top h2 span{
	color: #2563eb;
	display: block;
}

.features-top p{
	font-size: 1.1rem;
	line-height: 1.9;

	color: #64748b;

	max-width: 760px;
	margin: auto;
}


/* =====================================================
   FEATURES GRID
===================================================== */

.features-grid{
	display: grid;

	grid-template-columns:
		repeat(auto-fit, minmax(280px, 1fr));

	gap: 24px;
}


/* =====================================================
   FEATURE CARD
===================================================== */

.feature-box{
	position: relative;

	background: #fff;

	border-radius: 26px;

	padding: 32px 28px;

	border: 1px solid #e2e8f0;

	transition:
		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease;

	overflow: hidden;
}

.feature-box::before{
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 4px;

	background: linear-gradient(
		to right,
		#2563eb,
		#4f46e5
	);

	transform: scaleX(0);

	transform-origin: left;

	transition: transform .35s ease;
}

.feature-box:hover{
	transform: translateY(-8px);

	border-color: rgba(37,99,235,.18);

	box-shadow:
		0 20px 45px rgba(15,23,42,.08);
}

.feature-box:hover::before{
	transform: scaleX(1);
}


/* =====================================================
   ICON
===================================================== */

.feature-icon{
	width: 68px;
	height: 68px;

	border-radius: 20px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.5rem;

	margin-bottom: 24px;
}


/* COLOR VARIANTS */

.blue{
	background: rgba(37,99,235,.12);
	color: #2563eb;
}

.indigo{
	background: rgba(79,70,229,.12);
	color: #4f46e5;
}

.emerald{
	background: rgba(16,185,129,.12);
	color: #10b981;
}

.orange{
	background: rgba(249,115,22,.12);
	color: #f97316;
}

.purple{
	background: rgba(168,85,247,.12);
	color: #a855f7;
}

.cyan{
	background: rgba(6,182,212,.12);
	color: #06b6d4;
}

.red{
	background: rgba(239,68,68,.12);
	color: #ef4444;
}

.teal{
	background: rgba(20,184,166,.12);
	color: #14b8a6;
}


/* =====================================================
   CARD CONTENT
===================================================== */

.feature-content h3{
	font-size: 1.35rem;
	font-weight: 700;

	color: #0f172a;

	margin-bottom: 14px;
}

.feature-content p{
	color: #64748b;

	line-height: 1.8;

	font-size: .98rem;
}


/* =====================================================
   CTA
===================================================== */

.features-cta{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;

	margin-top: 70px;

	flex-wrap: wrap;
}

.primary-cta,
.secondary-cta{
	display: inline-flex;
	align-items: center;
	gap: 12px;

	padding: 16px 28px;

	border-radius: 16px;

	text-decoration: none;

	font-weight: 700;

	transition:
		transform .3s ease,
		box-shadow .3s ease;
}


/* PRIMARY */

.primary-cta{
	background: linear-gradient(
		135deg,
		#2563eb,
		#4f46e5
	);

	color: #fff;
}

.primary-cta:hover{
	transform: translateY(-3px);

	box-shadow:
		0 15px 35px rgba(37,99,235,.28);
}


/* SECONDARY */

.secondary-cta{
	background: #fff;

	color: #0f172a;

	border: 1px solid #e2e8f0;
}

.secondary-cta:hover{
	transform: translateY(-3px);

	border-color: #2563eb;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width: 768px){

	#features-section{
		padding: 90px 20px;
	}

	.features-grid{
		grid-template-columns: 1fr;
	}

	.feature-box{
		padding: 28px 22px;
	}

	.features-cta{
		flex-direction: column;
	}

	.primary-cta,
	.secondary-cta{
		width: 100%;
		justify-content: center;
	}
}

/* ===================================================== */
/* TRUSTED SCHOOLS SECTION */
/* ===================================================== */

#school-segment{
    padding: 100px 6%;
    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}

/* ===================================================== */
/* HEADER */
/* ===================================================== */

.school-section-header{
    text-align: center;
    max-width: 850px;
    margin: auto auto 70px;
}

.section-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    background: rgba(37,99,235,0.08);

    border: 1px solid rgba(37,99,235,0.12);

    color: #2563eb;

    border-radius: 100px;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 22px;
}

.school-section-header h2{
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 22px;
    color: #0f172a;
}

.school-section-header p{
    font-size: 1.08rem;
    line-height: 1.9;
    color: #64748b;
}

/* ===================================================== */
/* GRID */
/* ===================================================== */

#school-container{
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 28px;
}

/* ===================================================== */
/* SCHOOL CARD */
/* ===================================================== */

.school-card{
    position: relative;

    background: rgba(255,255,255,0.78);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(148,163,184,0.14);

    border-radius: 28px;

    padding: 35px 28px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Hover Effect */
.school-card:hover{
    transform: translateY(-8px);

    border-color: rgba(37,99,235,0.25);

    box-shadow:
        0 20px 50px rgba(15,23,42,0.08);
}

/* Glow Accent */
.school-card::before{
    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 220px;
    height: 220px;

    background:
        radial-gradient(
            rgba(37,99,235,0.10),
            transparent 70%
        );

    pointer-events: none;
}

/* ===================================================== */
/* LOGO */
/* ===================================================== */

.school-logo-wrap{
    width: 110px;
    height: 110px;

    border-radius: 28px;

    background: #f8fafc;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;

    margin-bottom: 28px;

    border: 1px solid rgba(148,163,184,0.14);
}

.school-logo{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===================================================== */
/* TEXT */
/* ===================================================== */

.school-details h3{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    color: #0f172a;
    margin-bottom: 18px;
}

/* ===================================================== */
/* TAG */
/* ===================================================== */

.school-tag{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px;

    background: #f8fafc;

    border-radius: 100px;

    color: #475569;

    font-size: 14px;
    font-weight: 600;
}

.school-tag i{
    color: #22c55e;
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:768px){

    #school-segment{
        padding: 80px 20px;
    }

    .school-card{
        padding: 28px 22px;
    }

    .school-logo-wrap{
        width: 95px;
        height: 95px;
    }

}



/* ===================================================== */
/* WHY ZUOSOFT SECTION */
/* ===================================================== */

#why-zuosoft{
    position: relative;

    padding: 110px 6%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

/* ===================================================== */
/* BACKGROUND GLOWS */
/* ===================================================== */

.why-bg-glow{
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.15;

    pointer-events: none;
}

.glow-one{
    width: 350px;
    height: 350px;

    background: #2563eb;

    top: -120px;
    left: -120px;
}

.glow-two{
    width: 300px;
    height: 300px;

    background: #7c3aed;

    right: -100px;
    bottom: -100px;
}

/* ===================================================== */
/* HEADER */
/* ===================================================== */

.why-header{
    position: relative;

    max-width: 900px;

    margin: auto auto 80px;

    text-align: center;

    z-index: 2;
}

.why-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    border-radius: 100px;

    background: rgba(37,99,235,0.08);

    border: 1px solid rgba(37,99,235,0.12);

    color: #2563eb;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 24px;
}

.why-header h2{
    font-size: clamp(2.3rem, 5vw, 3.8rem);

    line-height: 1.2;

    color: #0f172a;

    margin-bottom: 24px;
}

.why-header p{
    font-size: 1.08rem;

    line-height: 1.9;

    color: #64748b;
}

/* ===================================================== */
/* GRID */
/* ===================================================== */

.why-grid{
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: 28px;

    z-index: 2;
}

/* ===================================================== */
/* CARD */
/* ===================================================== */

.why-card{
    position: relative;

    background: rgba(255,255,255,0.82);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(148,163,184,0.12);

    border-radius: 30px;

    padding: 38px 34px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Hover */
.why-card:hover{
    transform: translateY(-10px);

    border-color: rgba(37,99,235,0.18);

    box-shadow:
        0 20px 50px rgba(15,23,42,0.08);
}

/* Gradient Glow */
.why-card::before{
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    background:
        radial-gradient(
            rgba(37,99,235,0.08),
            transparent 70%
        );

    pointer-events: none;
}

/* ===================================================== */
/* ICON */
/* ===================================================== */

.why-icon{
    width: 72px;
    height: 72px;

    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: white;

    font-size: 1.6rem;

    box-shadow:
        0 10px 25px rgba(37,99,235,0.22);
}

/* ===================================================== */
/* TEXT */
/* ===================================================== */

.why-card h3{
    font-size: 1.35rem;

    color: #0f172a;

    margin-bottom: 18px;

    line-height: 1.4;
}

.why-card p{
    color: #64748b;

    line-height: 1.9;

    font-size: 1rem;
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:768px){

    #why-zuosoft{
        padding: 85px 20px;
    }

    .why-header{
        margin-bottom: 60px;
    }

    .why-card{
        padding: 30px 24px;
    }

    .why-icon{
        width: 64px;
        height: 64px;
    }

}


/* ===================================================== */
/* PREVIEW SECTION */
/* ===================================================== */

#preview-section{
    position: relative;

    padding: 110px 6%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}

/* ===================================================== */
/* GLOW */
/* ===================================================== */

.preview-glow{
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.12;

    pointer-events: none;
}

.preview-glow-one{
    width: 320px;
    height: 320px;

    background: #2563eb;

    top: -120px;
    left: -100px;
}

.preview-glow-two{
    width: 260px;
    height: 260px;

    background: #7c3aed;

    bottom: -100px;
    right: -80px;
}

/* ===================================================== */
/* HEADER */
/* ===================================================== */

.preview-header{
    position: relative;

    max-width: 850px;

    margin: auto auto 80px;

    text-align: center;

    z-index: 2;
}

.preview-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    border-radius: 100px;

    background: rgba(37,99,235,0.08);

    border: 1px solid rgba(37,99,235,0.12);

    color: #2563eb;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 24px;
}

.preview-header h2{
    font-size: clamp(2.3rem, 5vw, 3.8rem);

    line-height: 1.2;

    color: #0f172a;

    margin-bottom: 24px;
}

.preview-header p{
    font-size: 1.08rem;

    line-height: 1.9;

    color: #64748b;
}

/* ===================================================== */
/* WRAPPER */
/* ===================================================== */

.preview-wrapper{
    position: relative;

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 60px;

    align-items: center;

    z-index: 2;
}

/* ===================================================== */
/* TABS */
/* ===================================================== */

.preview-tabs{
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 40px;
}

.preview-tab{
    border: none;

    background: white;

    padding: 14px 22px;

    border-radius: 16px;

    font-size: 15px;
    font-weight: 600;

    color: #475569;

    cursor: pointer;

    border: 1px solid rgba(148,163,184,0.18);

    transition: all 0.3s ease;
}

.preview-tab i{
    margin-right: 10px;
}

.preview-tab.active,
.preview-tab:hover{
    background: linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    );

    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(37,99,235,0.20);
}

/* ===================================================== */
/* CONTENT */
/* ===================================================== */

.preview-content{
    position: relative;

    min-height: 280px;
}

.preview-text{
    display: none;

    animation: fadePreview 0.5s ease;
}

.preview-text.active{
    display: block;
}

.preview-text h3{
    font-size: 2rem;

    line-height: 1.3;

    color: #0f172a;

    margin-bottom: 22px;
}

.preview-text p{
    font-size: 1.02rem;

    line-height: 1.9;

    color: #64748b;

    margin-bottom: 28px;
}

.preview-list{
    list-style: none;

    padding: 0;
    margin: 0;
}

.preview-list li{
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;

    color: #334155;

    font-weight: 500;
}

.preview-list i{
    color: #22c55e;
}

/* ===================================================== */
/* LAPTOP */
/* ===================================================== */

.laptop-frame{
    background: #0f172a;

    border-radius: 28px;

    padding: 18px;

    box-shadow:
        0 30px 70px rgba(15,23,42,0.18);
}

.laptop-topbar{
    display: flex;

    gap: 8px;

    margin-bottom: 16px;
}

.laptop-topbar span{
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: rgba(255,255,255,0.35);
}

.laptop-screen{
    position: relative;

    border-radius: 18px;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    background: #e2e8f0;
}

.preview-image{
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 0.45s ease;
}

.preview-image.active{
    opacity: 1;
}

/* ===================================================== */
/* ANIMATION */
/* ===================================================== */

@keyframes fadePreview{
    from{
        opacity: 0;
        transform: translateY(10px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:980px){

    .preview-wrapper{
        grid-template-columns: 1fr;

        gap: 50px;
    }

}

@media(max-width:768px){

    #preview-section{
        padding: 85px 20px;
    }

    .preview-text h3{
        font-size: 1.7rem;
    }

    .preview-tabs{
        gap: 10px;
    }

    .preview-tab{
        width: 100%;
    }

}


/* ===================================================== */
/* TESTIMONIAL SECTION */
/* ===================================================== */

#testimonial-section{
    position: relative;

    padding: 110px 6%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

/* ===================================================== */
/* BACKGROUND GLOW */
/* ===================================================== */

.testimonial-glow{
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.12;

    pointer-events: none;
}

.glow-left{
    width: 320px;
    height: 320px;

    background: #2563eb;

    top: -120px;
    left: -100px;
}

.glow-right{
    width: 280px;
    height: 280px;

    background: #7c3aed;

    bottom: -100px;
    right: -80px;
}

/* ===================================================== */
/* HEADER */
/* ===================================================== */

.testimonial-header{
    position: relative;

    max-width: 850px;

    margin: auto auto 80px;

    text-align: center;

    z-index: 2;
}

.testimonial-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    border-radius: 100px;

    background: rgba(37,99,235,0.08);

    border: 1px solid rgba(37,99,235,0.12);

    color: #2563eb;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 24px;
}

.testimonial-header h2{
    font-size: clamp(2.3rem, 5vw, 3.8rem);

    line-height: 1.2;

    color: #0f172a;

    margin-bottom: 24px;
}

.testimonial-header p{
    font-size: 1.08rem;

    line-height: 1.9;

    color: #64748b;
}

/* ===================================================== */
/* GRID */
/* ===================================================== */

.testimonial-grid{
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;

    z-index: 2;
}

/* ===================================================== */
/* CARD */
/* ===================================================== */

.testimonial-card{
    position: relative;

    background: rgba(255,255,255,0.82);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(148,163,184,0.12);

    border-radius: 30px;

    padding: 40px 34px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Hover */
.testimonial-card:hover{
    transform: translateY(-10px);

    border-color: rgba(37,99,235,0.18);

    box-shadow:
        0 20px 50px rgba(15,23,42,0.08);
}

/* Decorative Glow */
.testimonial-card::before{
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    background:
        radial-gradient(
            rgba(37,99,235,0.08),
            transparent 70%
        );

    pointer-events: none;
}

/* ===================================================== */
/* QUOTE ICON */
/* ===================================================== */

.quote-icon{
    width: 70px;
    height: 70px;

    border-radius: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: white;

    font-size: 1.5rem;

    box-shadow:
        0 10px 25px rgba(37,99,235,0.22);
}

/* ===================================================== */
/* TEXT */
/* ===================================================== */

.testimonial-text{
    font-size: 1.02rem;

    line-height: 2;

    color: #475569;

    margin-bottom: 28px;
}

/* ===================================================== */
/* RATING */
/* ===================================================== */

.testimonial-rating{
    display: flex;

    gap: 6px;

    margin-bottom: 30px;
}

.testimonial-rating i{
    color: #fbbf24;

    font-size: 1rem;
}

/* ===================================================== */
/* PROFILE */
/* ===================================================== */

.testimonial-profile{
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Avatar */
.testimonial-avatar{
    width: 68px;
    height: 68px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

    border: 3px solid rgba(37,99,235,0.10);
}

.testimonial-avatar img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Details */
.testimonial-details h3{
    font-size: 1.08rem;

    color: #0f172a;

    margin-bottom: 6px;
}

.testimonial-details span{
    color: #64748b;

    font-size: 0.95rem;

    line-height: 1.6;
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:768px){

    #testimonial-section{
        padding: 85px 20px;
    }

    .testimonial-card{
        padding: 32px 24px;
    }

    .quote-icon{
        width: 62px;
        height: 62px;
    }

}


/* ===================================================== */
/* HOW IT WORKS SECTION */
/* ===================================================== */

#how-it-works-section{
	width:100%;
	padding:100px 6%;
	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f8fbff 100%
		);
	position:relative;
	overflow:hidden;
}


/* ===================================================== */
/* HEADER */
/* ===================================================== */

.how-header{
	text-align:center;
	max-width:800px;
	margin:0 auto 70px auto;
}

.how-badge{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:10px 18px;
	border-radius:100px;
	background:rgba(37,99,235,0.08);
	color:var(--primary);
	font-weight:600;
	font-size:0.95rem;
	margin-bottom:22px;
}

.how-header h2{
	font-size:clamp(2.3rem, 4vw, 4rem);
	font-weight:800;
	color:var(--dark);
	line-height:1.1;
	margin-bottom:18px;
	letter-spacing:-1px;
}

.how-header p{
	font-size:1.1rem;
	line-height:1.8;
	color:#64748b;
	max-width:720px;
	margin:auto;
}


/* ===================================================== */
/* STEPS CONTAINER */
/* ===================================================== */

.how-steps-container{
	position:relative;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:35px;
	z-index:2;
}


/* ===================================================== */
/* STEP CARD */
/* ===================================================== */

.how-step-card{
	position:relative;
	background:#ffffff;
	border-radius:30px;
	padding:38px 32px;
	border:1px solid rgba(226,232,240,0.9);

	box-shadow:
		0 10px 35px rgba(15,23,42,0.05);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;

	overflow:hidden;
}

.how-step-card:hover{
	transform:translateY(-10px);

	border-color:rgba(37,99,235,0.25);

	box-shadow:
		0 20px 60px rgba(37,99,235,0.12);
}


/* SOFT GLOW */
.how-step-card::before{
	content:"";
	position:absolute;
	top:-120px;
	right:-120px;
	width:220px;
	height:220px;
	background:rgba(37,99,235,0.05);
	border-radius:50%;
}


/* ===================================================== */
/* TOP AREA */
/* ===================================================== */

.step-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:35px;
}

.step-number{
	font-size:1rem;
	font-weight:800;
	color:var(--primary);

	background:rgba(37,99,235,0.08);

	width:55px;
	height:55px;
	border-radius:16px;

	display:flex;
	align-items:center;
	justify-content:center;
}

.step-icon{
	width:72px;
	height:72px;
	border-radius:22px;

	background:
		linear-gradient(
			135deg,
			var(--primary),
			var(--secondary)
		);

	display:flex;
	align-items:center;
	justify-content:center;

	color:#fff;
	font-size:1.8rem;

	box-shadow:
		0 15px 30px rgba(37,99,235,0.25);
}


/* ===================================================== */
/* TEXT */
/* ===================================================== */

.how-step-card h3{
	font-size:1.45rem;
	font-weight:700;
	color:var(--dark);
	margin-bottom:18px;
	line-height:1.3;
}

.how-step-card p{
	font-size:1rem;
	line-height:1.9;
	color:#64748b;
	margin-bottom:28px;
}


/* ===================================================== */
/* FOOTER */
/* ===================================================== */

.step-footer{
	display:flex;
	align-items:center;
}

.step-footer span{
	display:inline-flex;
	align-items:center;
	gap:10px;

	padding:10px 18px;

	border-radius:100px;

	background:#f8fafc;

	font-size:0.92rem;
	font-weight:600;
	color:#334155;
}

.step-footer i{
	color:#10b981;
}


/* ===================================================== */
/* CONNECTING LINE */
/* ===================================================== */

.how-line{
	position:absolute;
	top:53%;
	left:15%;
	width:70%;
	height:2px;

	background:
		repeating-linear-gradient(
			to right,
			rgba(37,99,235,0.2),
			rgba(37,99,235,0.2) 10px,
			transparent 10px,
			transparent 20px
		);

	z-index:1;
}


/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width: 1100px){

	.how-steps-container{
		grid-template-columns:1fr;
		max-width:700px;
		margin:auto;
	}

	.how-line{
		display:none;
	}
}

@media (max-width: 768px){

	#how-it-works-section{
		padding:80px 5%;
	}

	.how-step-card{
		padding:30px 24px;
		border-radius:24px;
	}

	.step-icon{
		width:62px;
		height:62px;
		font-size:1.5rem;
	}

	.step-number{
		width:50px;
		height:50px;
		font-size:0.95rem;
	}
}



/* ===================================================== */
/* SECURITY & RELIABILITY SECTION */
/* ===================================================== */

#security-section{
	position:relative;
	width:100%;
	padding:110px 6%;
	background:
		linear-gradient(
			180deg,
			#07111f 0%,
			#0f172a 100%
		);

	overflow:hidden;
}


/* ===================================================== */
/* BACKGROUND GLOWS */
/* ===================================================== */

.security-glow{
	position:absolute;
	border-radius:50%;
	filter:blur(80px);
	opacity:0.18;
	pointer-events:none;
}

.security-glow-1{
	width:350px;
	height:350px;
	background:#2563eb;
	top:-120px;
	left:-80px;
}

.security-glow-2{
	width:320px;
	height:320px;
	background:#06b6d4;
	right:-120px;
	bottom:-120px;
}


/* ===================================================== */
/* MAIN WRAPPER */
/* ===================================================== */

.security-wrapper{
	position:relative;
	z-index:2;

	display:grid;
	grid-template-columns:1.1fr 0.9fr;
	gap:60px;
	align-items:center;
}


/* ===================================================== */
/* LEFT CONTENT */
/* ===================================================== */

.security-content{
	color:#fff;
}

.security-badge{
	display:inline-flex;
	align-items:center;
	gap:10px;

	padding:10px 18px;

	border-radius:100px;

	background:rgba(255,255,255,0.08);

	border:1px solid rgba(255,255,255,0.1);

	font-size:0.95rem;
	font-weight:600;

	color:#cbd5e1;

	margin-bottom:24px;

	backdrop-filter:blur(10px);
}

.security-badge i{
	color:#38bdf8;
}

.security-content h2{
	font-size:clamp(2.5rem, 4vw, 4.5rem);
	line-height:1.08;
	font-weight:800;
	letter-spacing:-1px;

	margin-bottom:24px;

	max-width:700px;
}

.security-intro{
	font-size:1.08rem;
	line-height:1.9;
	color:#94a3b8;

	max-width:700px;

	margin-bottom:50px;
}


/* ===================================================== */
/* FEATURES GRID */
/* ===================================================== */

.security-features{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:24px;
}


/* ===================================================== */
/* FEATURE CARD */
/* ===================================================== */

.security-feature-card{
	position:relative;

	display:flex;
	align-items:flex-start;
	gap:18px;

	padding:28px;

	border-radius:28px;

	background:
		rgba(255,255,255,0.05);

	border:
		1px solid rgba(255,255,255,0.08);

	backdrop-filter:blur(18px);

	transition:
		transform 0.35s ease,
		border-color 0.35s ease,
		background 0.35s ease;
}

.security-feature-card:hover{
	transform:translateY(-8px);

	background:
		rgba(255,255,255,0.07);

	border-color:
		rgba(56,189,248,0.3);
}


/* ICON */
.security-icon-box{
	min-width:65px;
	width:65px;
	height:65px;

	border-radius:20px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:1.5rem;

	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	color:#fff;

	box-shadow:
		0 12px 30px rgba(37,99,235,0.35);
}


/* TEXT */
.security-texts h3{
	font-size:1.2rem;
	font-weight:700;
	color:#ffffff;
	margin-bottom:10px;
}

.security-texts p{
	font-size:0.96rem;
	line-height:1.8;
	color:#cbd5e1;
}


/* ===================================================== */
/* RIGHT VISUAL CARD */
/* ===================================================== */

.security-visual{
	display:flex;
	justify-content:center;
	align-items:center;
}

.security-main-card{
	position:relative;

	width:100%;
	max-width:480px;

	padding:38px;

	border-radius:34px;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,0.08),
			rgba(255,255,255,0.04)
		);

	border:
		1px solid rgba(255,255,255,0.12);

	backdrop-filter:blur(25px);

	box-shadow:
		0 25px 80px rgba(0,0,0,0.35);

	overflow:hidden;
}


/* LIGHT EFFECT */
.security-main-card::before{
	content:"";

	position:absolute;
	top:-140px;
	right:-140px;

	width:260px;
	height:260px;

	border-radius:50%;

	background:
		rgba(56,189,248,0.08);
}


/* ===================================================== */
/* CARD TOP */
/* ===================================================== */

.security-card-top{
	position:relative;
	z-index:2;

	text-align:center;

	margin-bottom:40px;
}

.shield-circle{
	width:100px;
	height:100px;

	margin:0 auto 24px auto;

	border-radius:50%;

	display:flex;
	align-items:center;
	justify-content:center;

	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	font-size:2.5rem;
	color:#fff;

	box-shadow:
		0 20px 50px rgba(37,99,235,0.35);
}

.security-card-top h3{
	font-size:1.7rem;
	font-weight:800;
	color:#fff;
	margin-bottom:12px;
}

.security-card-top p{
	color:#cbd5e1;
	line-height:1.8;
}


/* ===================================================== */
/* STATUS LIST */
/* ===================================================== */

.security-status-list{
	display:flex;
	flex-direction:column;
	gap:16px;

	margin-bottom:35px;
}

.security-status-item{
	display:flex;
	align-items:center;
	gap:14px;

	padding:16px 18px;

	border-radius:18px;

	background:
		rgba(255,255,255,0.05);

	border:
		1px solid rgba(255,255,255,0.06);

	color:#e2e8f0;

	font-weight:500;
}

.status-dot{
	width:12px;
	height:12px;
	border-radius:50%;

	background:#22c55e;

	box-shadow:
		0 0 12px rgba(34,197,94,0.7);
}


/* ===================================================== */
/* FOOTER */
/* ===================================================== */

.security-card-footer{
	display:flex;
	justify-content:center;
}

.footer-badge{
	display:inline-flex;
	align-items:center;
	gap:10px;

	padding:12px 20px;

	border-radius:100px;

	background:
		rgba(34,197,94,0.12);

	border:
		1px solid rgba(34,197,94,0.2);

	color:#bbf7d0;

	font-size:0.95rem;
	font-weight:600;
}


/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width: 1100px){

	.security-wrapper{
		grid-template-columns:1fr;
	}

	.security-main-card{
		max-width:700px;
	}
}

@media (max-width: 768px){

	#security-section{
		padding:90px 5%;
	}

	.security-features{
		grid-template-columns:1fr;
	}

	.security-content h2{
		font-size:2.4rem;
	}

	.security-main-card{
		padding:30px 24px;
		border-radius:28px;
	}

	.shield-circle{
		width:85px;
		height:85px;
		font-size:2rem;
	}
}


/* MOBILE ACCESS */
/* ===================================================== */
/* MOBILE ACCESS SECTION */
/* ===================================================== */

#mobile-access-section{
	position:relative;
	width:100%;
	padding:120px 6%;
	background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
	overflow:hidden;
	box-sizing:border-box;
}


/* ===================================================== */
/* GLOW EFFECTS */
/* ===================================================== */

.ma-glow{
	position:absolute;
	border-radius:50%;
	filter:blur(90px);
	opacity:0.18;
	pointer-events:none;
}

.ma-glow-left{
	width:320px;
	height:320px;
	background:#2563eb;
	top:-100px;
	left:-100px;
}

.ma-glow-right{
	width:280px;
	height:280px;
	background:#06b6d4;
	right:-80px;
	bottom:-100px;
}


/* ===================================================== */
/* WRAPPER */
/* ===================================================== */

.ma-wrapper{
	position:relative;
	z-index:2;

	display:grid;
	grid-template-columns:1fr 1fr;
	gap:70px;
	align-items:center;
}


/* ===================================================== */
/* VISUAL AREA */
/* ===================================================== */

.ma-visual-area{
	display:flex;
	align-items:center;
	justify-content:center;
}

.ma-device-showcase{
	position:relative;
	width:100%;
	max-width:700px;
	min-height:650px;
}


/* ===================================================== */
/* LAPTOP */
/* ===================================================== */

.ma-laptop-device{
	position:relative;
	width:100%;
	max-width:620px;
	margin:auto;
}

.ma-laptop-screen{
	background:#0f172a;
	padding:16px;
	border-radius:28px 28px 14px 14px;

	box-shadow:
		0 30px 80px rgba(15,23,42,0.15);
}

.ma-device-topbar{
	display:flex;
	gap:8px;
	padding-bottom:12px;
}

.ma-device-topbar span{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#64748b;
}


/* ===================================================== */
/* DASHBOARD */
/* ===================================================== */

.ma-dashboard-preview{
	background:#ffffff;
	border-radius:18px;
	min-height:360px;
	display:flex;
	overflow:hidden;
}

.ma-dashboard-sidebar{
	width:90px;
	background:#0f172a;
	padding:22px 16px;
}

.ma-sidebar-logo{
	width:48px;
	height:48px;
	border-radius:16px;

	background:linear-gradient(135deg,#2563eb,#06b6d4);

	display:flex;
	align-items:center;
	justify-content:center;

	color:#fff;
	font-size:1.2rem;

	margin-bottom:35px;
}

.ma-sidebar-items{
	display:flex;
	flex-direction:column;
	gap:18px;
}

.ma-sidebar-items span{
	height:12px;
	border-radius:20px;
	background:#334155;
}

.ma-dashboard-main{
	flex:1;
	padding:25px;
}

.ma-preview-header{
	height:22px;
	width:45%;
	border-radius:20px;
	background:#e2e8f0;
	margin-bottom:28px;
}

.ma-preview-cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
	margin-bottom:24px;
}

.ma-preview-cards div{
	height:95px;
	border-radius:18px;
	background:linear-gradient(135deg,#dbeafe,#eff6ff);
}

.ma-preview-chart{
	height:150px;
	border-radius:24px;
	background:linear-gradient(135deg,#eff6ff,#f8fafc);
}


/* ===================================================== */
/* LAPTOP BASE */
/* ===================================================== */

.ma-laptop-base{
	width:110%;
	height:22px;
	margin:auto;
	transform:translateX(-5%);
	border-radius:0 0 30px 30px;

	background:linear-gradient(180deg,#cbd5e1,#94a3b8);
}


/* ===================================================== */
/* MOBILE DEVICE */
/* ===================================================== */

.ma-mobile-device{
	position:absolute;
	right:-10px;
	bottom:20px;

	width:210px;
	height:430px;

	background:#0f172a;

	border-radius:38px;

	padding:14px;

	box-shadow:
		0 30px 70px rgba(15,23,42,0.2);

	border:4px solid #1e293b;
}

.ma-mobile-notch{
	width:90px;
	height:18px;

	border-radius:0 0 14px 14px;

	background:#020617;

	margin:0 auto 18px auto;
}

.ma-mobile-screen{
	background:#ffffff;
	height:100%;
	border-radius:26px;

	padding:20px 16px;
}

.ma-mobile-header{
	height:18px;
	width:60%;
	border-radius:20px;
	background:#dbeafe;
	margin-bottom:20px;
}

.ma-mobile-card{
	height:65px;
	border-radius:18px;

	background:linear-gradient(135deg,#eff6ff,#f8fafc);

	margin-bottom:14px;
}

.ma-mobile-chart{
	height:120px;
	border-radius:22px;

	background:linear-gradient(135deg,#dbeafe,#eff6ff);
}


/* ===================================================== */
/* FLOATING CARDS */
/* ===================================================== */

.ma-cloud-card{
	position:absolute;
	left:0;
	top:80px;

	display:flex;
	align-items:center;
	gap:14px;

	padding:18px 22px;

	background:#ffffff;

	border-radius:24px;

	box-shadow:
		0 20px 50px rgba(15,23,42,0.08);

	animation:maFloat 4s ease-in-out infinite;
}

.ma-cloud-icon{
	width:60px;
	height:60px;

	border-radius:18px;

	display:flex;
	align-items:center;
	justify-content:center;

	background:linear-gradient(135deg,#2563eb,#06b6d4);

	color:#fff;
	font-size:1.4rem;
}

.ma-cloud-texts h4{
	font-size:1rem;
	font-weight:700;
	color:#0f172a;
	margin-bottom:4px;
}

.ma-cloud-texts p{
	font-size:0.92rem;
	color:#64748b;
}


/* ===================================================== */
/* STATUS */
/* ===================================================== */

.ma-status-card{
	position:absolute;
	right:20px;
	top:40px;

	display:flex;
	align-items:center;
	gap:12px;

	padding:14px 20px;

	border-radius:100px;

	background:#ffffff;

	box-shadow:
		0 15px 40px rgba(15,23,42,0.08);

	font-weight:600;
	color:#0f172a;

	animation:maFloat 5s ease-in-out infinite;
}

.ma-status-pulse{
	width:12px;
	height:12px;

	border-radius:50%;

	background:#22c55e;

	box-shadow:
		0 0 14px rgba(34,197,94,0.8);
}


/* ===================================================== */
/* FLOAT ANIMATION */
/* ===================================================== */

@keyframes maFloat{

	0%{
		transform:translateY(0px);
	}

	50%{
		transform:translateY(-10px);
	}

	100%{
		transform:translateY(0px);
	}
}


/* ===================================================== */
/* CONTENT AREA */
/* ===================================================== */

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

.ma-badge{
	display:inline-flex;
	align-items:center;
	gap:10px;

	padding:10px 18px;

	border-radius:100px;

	background:rgba(37,99,235,0.08);

	color:var(--primary);

	font-size:0.95rem;
	font-weight:600;

	margin-bottom:24px;
}

.ma-content-area h2{
	font-size:clamp(2.5rem,4vw,4.5rem);
	font-weight:800;
	line-height:1.08;
	letter-spacing:-1px;

	color:#0f172a;

	margin-bottom:24px;
}

.ma-description{
	font-size:1.08rem;
	line-height:1.9;
	color:#64748b;

	max-width:680px;

	margin-bottom:45px;
}


/* ===================================================== */
/* FEATURES */
/* ===================================================== */

.ma-features-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:22px;

	margin-bottom:40px;
}

.ma-feature-card{
	display:flex;
	align-items:flex-start;
	gap:16px;

	padding:24px;

	border-radius:28px;

	background:#ffffff;

	border:1px solid #e2e8f0;

	box-shadow:
		0 10px 30px rgba(15,23,42,0.04);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.ma-feature-card:hover{
	transform:translateY(-8px);

	border-color:rgba(37,99,235,0.25);

	box-shadow:
		0 20px 45px rgba(37,99,235,0.08);
}

.ma-feature-icon{
	min-width:60px;
	width:60px;
	height:60px;

	border-radius:20px;

	display:flex;
	align-items:center;
	justify-content:center;

	background:linear-gradient(135deg,#2563eb,#06b6d4);

	color:#fff;
	font-size:1.3rem;
}

.ma-feature-texts h3{
	font-size:1.08rem;
	font-weight:700;
	color:#0f172a;
	margin-bottom:8px;
}

.ma-feature-texts p{
	font-size:0.95rem;
	line-height:1.8;
	color:#64748b;
}


/* ===================================================== */
/* DEVICES */
/* ===================================================== */

.ma-supported-devices{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
}

.ma-supported-devices span{
	display:inline-flex;
	align-items:center;
	gap:10px;

	padding:12px 18px;

	border-radius:100px;

	background:#ffffff;

	border:1px solid #e2e8f0;

	font-size:0.95rem;
	font-weight:600;

	color:#334155;
}

.ma-supported-devices i{
	color:var(--primary);
}


/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width:1200px){

	.ma-wrapper{
		grid-template-columns:1fr;
	}

	.ma-visual-area{
		order:2;
	}

	.ma-content-area{
		order:1;
	}
}


@media (max-width:768px){

	#mobile-access-section{
		padding:90px 5%;
	}

	.ma-features-grid{
		grid-template-columns:1fr;
	}

	.ma-device-showcase{
		min-height:520px;
	}

	.ma-mobile-device{
		width:170px;
		height:360px;
		right:-5px;
	}

	.ma-cloud-card{
		left:10px;
		top:40px;
		padding:14px 18px;
	}

	.ma-status-card{
		right:0;
		top:10px;
		padding:12px 16px;
	}

	.ma-preview-cards{
		grid-template-columns:1fr;
	}
}
/* ---- */


/* ===================================================== */
/* FAQ SECTION */
/* ===================================================== */

#faq-section{
    padding: 110px 7%;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,0.08), transparent 35%),
        radial-gradient(circle at bottom right, rgba(99,102,241,0.08), transparent 35%),
        #f8fbff;
}

/* ===================================================== */
/* HEADER */
/* ===================================================== */

.faq-header{
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.faq-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(37,99,235,0.08);
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 22px;
    border: 1px solid rgba(37,99,235,0.15);
}

.faq-header h2{
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: 18px;
    font-weight: 800;
}

.faq-header p{
    font-size: 1.1rem;
    line-height: 1.8;
    color: #64748b;
}

/* ===================================================== */
/* FAQ CONTAINER */
/* ===================================================== */

.faq-container{
    max-width: 950px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===================================================== */
/* FAQ ITEM */
/* ===================================================== */

.faq-item{
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(148,163,184,0.16);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.faq-item:hover{
    transform: translateY(-4px);
    border-color: rgba(37,99,235,0.25);
    box-shadow:
        0 18px 45px rgba(15,23,42,0.08);
}

/* ===================================================== */
/* QUESTION */
/* ===================================================== */

.faq-question{
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
    cursor: pointer;
    text-align: left;
}

.faq-question span{
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.5;
}

.faq-question span i{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.faq-icon{
    color: #64748b;
    transition: transform .35s ease;
    flex-shrink: 0;
}

/* ===================================================== */
/* ANSWER */
/* ===================================================== */

.faq-answer{
    max-height: 0;
    overflow: hidden;
    transition:
        max-height .4s ease,
        padding .4s ease;
}

.faq-answer p{
    padding: 0 30px 28px 92px;
    color: #475569;
    line-height: 1.9;
    font-size: 1rem;
}

/* ===================================================== */
/* ACTIVE STATE */
/* ===================================================== */

.faq-item.active{
    border-color: rgba(37,99,235,0.28);
    box-shadow:
        0 20px 45px rgba(37,99,235,0.08);
}

.faq-item.active .faq-answer{
    max-height: 300px;
}

.faq-item.active .faq-icon{
    transform: rotate(180deg);
}

/* ===================================================== */
/* MOBILE */
/* ===================================================== */

@media (max-width: 768px){

    #faq-section{
        padding: 80px 20px;
    }

    .faq-question{
        padding: 22px 20px;
    }

    .faq-question span{
        font-size: 1rem;
        gap: 12px;
    }

    .faq-question span i{
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .faq-answer p{
        padding: 0 20px 24px 72px;
        font-size: .96rem;
    }

}


/* ===================================================== */
/* FINAL CTA SECTION */
/* ===================================================== */

#final-cta-section{
    position: relative;
    overflow: hidden;
    padding: 120px 7%;
    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #111827 40%,
            #172554 100%
        );
}

/* ===================================================== */
/* BACKGROUND GLOW EFFECTS */
/* ===================================================== */

.cta-glow{
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .25;
    pointer-events: none;
}

.cta-glow-1{
    width: 320px;
    height: 320px;
    background: #2563eb;
    top: -120px;
    left: -100px;
}

.cta-glow-2{
    width: 280px;
    height: 280px;
    background: #7c3aed;
    bottom: -100px;
    right: -80px;
}

/* ===================================================== */
/* MAIN CTA CONTAINER */
/* ===================================================== */

.final-cta-container{
    position: relative;
    z-index: 2;

    max-width: 1050px;
    margin: auto;

    background: rgba(255,255,255,0.06);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 34px;

    padding: 80px 60px;

    text-align: center;

    backdrop-filter: blur(12px);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.28);
}

/* ===================================================== */
/* BADGE */
/* ===================================================== */

.final-cta-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 20px;

    border-radius: 999px;

    background: rgba(255,255,255,0.08);

    color: #cbd5e1;

    border: 1px solid rgba(255,255,255,0.08);

    font-weight: 700;

    margin-bottom: 28px;
}

.final-cta-badge i{
    color: #60a5fa;
}

/* ===================================================== */
/* HEADING */
/* ===================================================== */

.final-cta-container h2{
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: 1.08;
    font-weight: 900;
    color: white;
    margin-bottom: 24px;
}

.final-cta-container h2 span{
    display: block;

    background: linear-gradient(
        135deg,
        #60a5fa,
        #818cf8
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===================================================== */
/* DESCRIPTION */
/* ===================================================== */

.final-cta-container p{
    max-width: 760px;
    margin: auto auto 45px;

    color: #cbd5e1;

    font-size: 1.15rem;
    line-height: 1.9;
}

/* ===================================================== */
/* CTA BUTTONS */
/* ===================================================== */

.final-cta-buttons{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;

    margin-bottom: 50px;
}

.final-cta-buttons a{
    text-decoration: none;
    transition: all .35s ease;
}

/* PRIMARY BUTTON */

.cta-primary-btn{
    background: linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    );

    color: white;

    padding: 18px 34px;

    border-radius: 18px;

    font-weight: 700;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    box-shadow:
        0 18px 40px rgba(37,99,235,0.35);
}

.cta-primary-btn:hover{
    transform: translateY(-4px) scale(1.02);

    box-shadow:
        0 25px 50px rgba(37,99,235,0.45);
}

/* SECONDARY BUTTON */

.cta-secondary-btn{
    padding: 18px 34px;

    border-radius: 18px;

    border: 1px solid rgba(255,255,255,0.15);

    color: white;

    background: rgba(255,255,255,0.05);

    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-weight: 700;
}

.cta-secondary-btn:hover{
    background: rgba(255,255,255,0.12);

    transform: translateY(-4px);
}

/* ===================================================== */
/* TRUST ITEMS */
/* ===================================================== */

.cta-trust-items{
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.trust-mini{
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 18px;

    border-radius: 14px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    color: #dbeafe;

    font-size: .95rem;
    font-weight: 600;
}

.trust-mini i{
    color: #60a5fa;
}

/* ===================================================== */
/* MOBILE RESPONSIVENESS */
/* ===================================================== */

@media (max-width: 768px){

    #final-cta-section{
        padding: 90px 20px;
    }

    .final-cta-container{
        padding: 60px 24px;
        border-radius: 28px;
    }

    .final-cta-container p{
        font-size: 1rem;
    }

    .final-cta-buttons{
        flex-direction: column;
        align-items: stretch;
    }

    .final-cta-buttons a{
        justify-content: center;
    }

    .cta-trust-items{
        gap: 12px;
    }

    .trust-mini{
        width: 100%;
        justify-content: center;
    }

}






/*PRICING SEGMENT*/
#pricing-segment {
  text-align: center;
  /*      padding: 40px;*/
}

#pricesegheader {
  font-size: 30px;
  font-weight: bold;
  color: #ff5733;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
  background-color: #f2f2f2;
  /*  border: 2px solid #FF5733;*/
  /*  border-radius: 10px;*/
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.pricing {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: aliceblue;
  padding-bottom: 20px;
  /*	border: 1px solid navy;*/
}

#promo_news {
  font-family: "Arial", sans-serif;
  font-size: 16px;
  color: #333; /* Adjust the color as needed */
  line-height: 1.2;
  margin: 10px 0;
  padding: 0 5px;
}

#promo_news::before {
  content: "\201C"; /* Unicode character for opening double quotation mark */
  font-size: 24px;
  margin-right: 5px;
}

#promo_news::after {
  content: "\201D"; /* Unicode character for closing double quotation mark */
  font-size: 24px;
  margin-left: 5px;
}

.pricinghouses {
  width: 300px;
  /*	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";*/
  font-family: "Tahoma";
  font-size: 16px;
  /*	border: 1px solid red;*/
  /*	padding: 10px;*/
  margin-top: 10px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.pricetitles {
  background-color: #2152a3;
  color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.costspans {
  display: flex;
  justify-content: center;
  align-items: baseline;
  /*	border: 1px solid red;*/
}

.costs {
  font-size: 28px;
  color: #2152a3;
}

.costtexts {
  font-size: 16px;
  color: #555;
}
.strikethrough {
  text-decoration-line: line-through;
  color: red;
}
.offeredservicesspan {
  /*	border: 3px solid blue;*/
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*	justify-content: space-between;*/
  min-height: 200px;
  margin: 20px;
}
.offeredservices {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  /*	border: 1px solid gray;*/
  width: 100%;
}

.of_ticks {
  color: #2152a3;
  margin-right: 10px;
}

.of_texts {
  font-size: 18px;
  /*	color: #555;*/
}

/*__*/


/* </style> */

/* #school-segment{
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 10px;
}

#schheader {
  font-size: 36px;
  font-weight: 700;
  color: #1c2331;
  text-align: center;
  margin-bottom: 40px;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
#school-container{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.logospans{
	height: 150px;
}

.schlogos{
	width: 150px;
}

.schhouses{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	width: 150px;
}

.schhouses:hover{
	background-color: yellow;
	cursor: pointer;
}

.schnamespans{
	font-weight: 500;
	text-align: center;
} */

/*ASSOCIATES*/
#associates-segment {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

#associateheader {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

#associates-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.associatehouses {
  width: 20%;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.associatehouses img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.associatetext {
  font-size: 18px;
  color: #555;
}

@media (max-width: 1100px) {
  #mainheader {
    font-size: 40px;
  }
  #captiontext {
    /*		font-size: 25px;*/
  }
  .ratings {
    font-size: 50px;
  }
  .review_texts {
    font-size: 30px;
  }

  .review_card_icons {
    width: 130px;
  }
}

@media (max-width: 1000px) {
  /*SLIDE*/
  #slide_container {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
  }

  #slidetext_container {
    /* width: calc(100% - 80px); */
    width: 100%;
  }
  #services_container {
    width: 100%;
    /* max-width: 420px;
    min-width: 420px; */
  }
  /*__*/
  /*SETUP SEG*/
  #setup-segment {
    flex-direction: column;
    width: auto;
    margin: 0;
    /*		border: 1px solid red;*/
  }
  #setupheader {
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    /*		font-size: 1.5rem;*/
  }
  #setup-container {
    width: auto;
  }
  /*__*/
}

@media (max-width: 767px) {
  #schheader {
    font-size: 28px;
    margin-bottom: 30px;
  }
}

@media (max-width: 600px) {
  /*ASSOCIATES*/
  #associates-container {
    flex-direction: column;
    align-items: center;
  }
  .associatehouses {
    width: 50%;
  }
  /*__*/
}

@media (max-width: 500px) {
  #mainheader {
    font-size: 20px;
  }
  #captiontext {
    font-size: 14px;
  }

  #slide-container {
    padding: 0;
    min-height: 10vh;
  }
  #services_container {
    margin-top: 10px;
  }
  .review_containers {
    margin-left: 3px;
    padding: 3px;
  }

  .review_card_icons {
    width: 100px;
  }
  .ratings {
    font-size: 30px;
  }
  .review_texts {
    font-size: 14px;
  }

  /*SETUP SEG*/
  #setup-container {
    /*		flex-direction: column;*/
  }
  #setupheader {
    font-size: 1rem;
  }
  /*__*/
}