:root {
    --navy: #0c1c3c;
    --ink: #0b1640;
    --blue: #211964;
    --gold: #F36F21;
    --text: #5b6473;
    --line: #e6e9f2;
    --light: #f5f6fc;
    --blue-light: #eef4ff
}

* {
    box-sizing: border-box
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--text);
    line-height: 1.65;
    background: #fff
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--ink);
    font-weight: 700
}
.container {
	max-width: 1230px;
}
a {
    text-decoration: none !important
}

.topbar {
    background: #eaf1fb;
    font-size: 14px
}

.topbar a {
    color: #27406b;
}
.topbar a:focus-visible{
    outline: 0 !important;
}
.socials a {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #27406b;
    margin-left: 8px;
    font-weight: 700
}

.logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    overflow: hidden
}

.logo-mark i:nth-child(1),
.logo-mark i:nth-child(4) {
    background: #1b6fc0
}

.logo-mark i:nth-child(2) {
    background: #5aa9e6
}

.logo-mark i:nth-child(3) {
    background: #f5b417
}

.navbar {
    padding: 14px 0;
    background: rgba(255, 255, 255, .95) !important
}

.navbar .nav-link {
    font-family: 'Poppins';
    font-size: 15px;
    font-weight: 500;
    color: #26324d !important;
    padding-left: 15px !important;
    padding-right: 15px !important
}

.btn {
    font-family: 'Poppins';
    font-weight: 600;
    border-radius: 10px;
    padding: 12px 24px
}

.btn-gold {
    background: var(--gold);
    color: #fff !important;
    box-shadow: 0 14px 28px -12px rgba(240, 164, 20, .8);
    padding: 7px 15px;
    font-size: 16px;
    font-weight: 500;  
}

.btn-primary-custom {
    background: var(--blue);
    color: #fff !important;
    box-shadow: 0 14px 28px -12px rgba(37, 70, 200, .7)
}

.btn-light-custom {
    background: #3a59d8;
    color: #fff !important
}
.buy_now {
    background: #1b6fc0;
}

.hero-home {
    border-bottom: 0 !important;
    background: #fef6e8;
}

.hero-shape {
    position: absolute;
    right: 0;
    width: 48%;
}
.stack-graphic {
    max-width: 460px !important;
}
.country-card{
    display: flex;
    gap: 15px;
    align-items: center;
}
.country-card img{
    width: 45px;
}
.badge-pill-custom {
    background: #eef3ff;
    border: 1px solid #dbe5ff;
    color: #27406b;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 40px
}

.hero-home h1 {
    font-size: 52px;
    line-height: 1.12;
    margin-bottom: 22px
}

.hero-home h1 span {
    color: var(--blue)
}

.lead-text {
    font-size: 16.5px;
    max-width: 570px
}

.hero-card {
    max-width: 420px;
    height: 330px;
    background: rgba(255, 255, 255, .16);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.window-card {
    width: 280px;
    height: 180px;
    background: rgba(255, 255, 255, .9);
    border-radius: 14px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .15)
}

.window-card:before {
    content: "";
    position: absolute;
    left: 25px;
    top: 35px;
    width: 110px;
    height: 8px;
    background: #2546c8;
    border-radius: 5px;
    box-shadow: 0 22px 0 #c9d6ff, 0 44px 0 #c9d6ff
}

.chart-line {
    position: absolute;
    right: 30px;
    top: 60px;
    width: 90px;
    height: 70px;
    border-bottom: 5px solid var(--gold);
    border-left: 5px solid var(--gold);
    transform: skew(-20deg)
}

.tick-round {
    position: absolute;
    right: -25px;
    top: -25px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    font-size: 35px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center
}

.section {
    padding: 88px 0
}

.bg-light-soft {
    background: var(--light)
}

.bg-blue-soft {
    background: var(--blue-light)
}

.section-lead {
    max-width: 760px;
    font-size: 16.5px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px
}

.eyebrow:before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px
}
.eyebrow:after {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px
}


.country-card,
.feature-card,
.icon-card,
.uae-card,
.industry {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 12px 24px -18px rgba(13, 27, 70, .35);
    height: 100%
}

.feature-card span {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eaf0ff;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-weight: 700
}

.feature-card h5 {
    font-size: 16px;
    margin-bottom: 8px
}

.feature-card p {
    font-size: 14px;
    color: #8a93a3;
    margin: 0
}

.platform_imge,
.stack-graphic,
.dashboard-graphic,
.screen-graphic,
.faq-graphic {
    width: 100%;
    max-width: 360px;
    position: relative;
}
.stack-graphic img{
    width: 100%;
}
.dashboard-graphic img {
    width: 100%;
}

.screen-graphic img {
    width: 100%;
}
.laptop-card img{
    width: 100%;
}
.check-list {
    padding: 0;
    list-style: none
}

.check-list li {
    margin-bottom: 10px;
    color: #3a4356;
    font-size: 15px
}

.check-list li:before {
    content: "✓";
    font-weight: 700;
    color: var(--blue);
    margin-right: 8px
}

.payslip {
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px -20px rgba(13, 27, 70, .25)
}

.payslip-top {
    padding: 13px 18px;
    background: #f7f8fc;
    border-bottom: 1px solid #eef0f6;
    font-size: 13px;
    color: #8a93a3
}

.payslip-body {
    padding: 22px
}

.payslip-body .col-6 {
    padding: 15px;
    border: 1px solid #f0f2f8
}

.payslip-body small {
    display: block;
    color: #8a93a3;
    text-transform: uppercase;
    font-size: 11px
}

.payslip-net {
    background: var(--navy);
    color: #fff;
    padding: 18px;
    font-family: 'Poppins';
    font-weight: 700;
    text-align: right
}

.dark-section {
    background: var(--navy);
    color: #c9d2e6
}

.dark-section h2,
.dark-section h5 {
    color: #fff
}

.gold-list {
    list-style: none;
    padding: 0;
    margin: 20px 0
}

.gold-list li {
    margin-bottom: 10px
}

.gold-list li:before {
    content: "✓";
    background: var(--gold);
    color: #111;
    border-radius: 5px;
    padding: 1px 5px;
    margin-right: 10px;
    font-weight: 700
}

.laptop-card {
    background: #fff;
    color: #2f6fb0;
    border-radius: 14px;
    padding: 10px 30px;
    font-family: 'Poppins';
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .2)
}

.secure-card {
    background: linear-gradient(120deg, #16348a, #0e2356);
    color: #fff;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 18px;
    font-family: 'Poppins';
    font-weight: 600
}

.mini-card {
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    font-weight: 600;
    color: var(--ink)
}

.uae-card {
    text-align: center;
    font-family: 'Poppins';
    font-weight: 600;
    min-height: 115px;
}


.why-section{
  padding:80px 0;
}

/* Tag */
.section-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:#3b5bff;
  display:inline-block;
  margin-bottom:10px;
}

/* Title */
.section-title{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
}

/* Card */
.why-card{
  background:#fff;
  border:1px solid #e6ecf7;
  border-radius:14px;
  padding:22px 18px;
  text-align:left;
  height:100%;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:0.3s;
}

/* Hover */
.why-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
}

/* Icon */
.why-card .icon{
  width:42px;
  height:42px;
  background:#eef3ff;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  margin-bottom:12px;
}

.why-card h6{
  font-size:15px;
  font-weight:600;
  color:#1e293b;
  margin:0;
}


.industries-section{
  background:#f6f8ff;
  padding:80px 0;
}

/* Tag */
.section-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:#2b59ff;
  display:block;
  margin-bottom:10px;
}

/* Title */
.section-title{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:10px;
}


/* Card */
.industry-card{
  background:#fff;
  border:1px solid #e8eef7;
  border-radius:14px;
  padding:18px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:600;
  color:#1e293b;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  transition:0.3s;
  cursor:pointer;
}

/* Hover */
.industry-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  border-color:#cdd9ff;
}

/* Icon */
.industry-card .icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef3ff;
  border-radius:10px;
  font-size:16px;
}
.icon-card:before,
.industry:before {
    content: "▣";
    color: var(--blue);
    margin-right: 10px
}

.video-card {
    border-radius: 14px;
    position: relative;
}

.video-card span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    background: #e0342b;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px
}

.callback-card {
	background: #ffffff;
	border-radius: 18px;
	padding: 28px;
	float: right;
	width: 85%;
}

.form-title{
  font-size:14px;
  font-weight:500;
  color:#64748b;
  margin-bottom:18px;
  line-height:1.5;
}

/* Labels */
.callback-form label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  color:#475569;
  margin-bottom:6px;
  display:block;
}

/* Inputs */
.callback-form .form-control {
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	font-size: 14px;
	background: #fff;
	transition: 0.3s;
	padding: 11px 14px;
  height: auto;
}

.callback-form .form-control:focus{
  border-color:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,0.15);
  outline:none;
}

/* Button */
.btn-submit{
  width:100%;
  margin-top:10px;
  background:#F36F21;
  border:none;
  padding:14px;
  border-radius:12px;
  font-weight:700;
  color:#1f2937;
  font-size:15px;
  cursor:pointer;
  transition:0.3s;
}

.btn-submit:hover{
  background:#e69008;
  transform:translateY(-1px);
}

/* Note */
.note{
  text-align:center;
  font-size:12px;
  color:#94a3b8;
  margin-top:12px;
}
.screen-section{
  background:#ffffff;
  padding:80px 0 50px;
}

/* Tag */
.section-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:#f5b417;
  display:block;
  margin-bottom:10px;
}

/* Title */
.section-title{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:10px;
}

/* Subtitle */
.section-subtitle{
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

/* Card */
.screen-card{
  text-align:center;
  padding:15px;
}

/* Image box */
.screen-img{
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  margin-bottom:15px;
  transition:0.3s;
}

.screen-img img{
  width:100%;
  display:block;
}

/* hover */
.screen-card:hover .screen-img{
  transform:translateY(-5px);
}

/* Title */
.screen-card h6{
  font-size:15px;
  font-weight:700;
  color:#1e293b;
  margin-bottom:6px;
}

/* Text */
.screen-card p{
  font-size:13px;
  color:#64748b;
  margin:0;
}

.faq-section{
  background: #ffffff;
}

.faq-tag{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #2b59ff;
  text-transform: uppercase;
}

.faq-title{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #0f172a;
}

/* Accordion Cards */
.faq-card{
  border: 1px solid #e8eef7 !important;
  border-radius: 14px !important;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.faq-card .card-header{
  background: #fff;
  border: none;
  padding: 0;
}

.faq-card .btn{
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
}

.faq-card .collapse.show + .card-body{
  border-top: 1px solid #eef2f7;
}

.faq-card .card-body{
  padding: 18px 20px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* LEFT IMAGE */
.faq-image img{
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}










/* =========================
   FAQ STYLING
   ========================= */

.faq-accordion .card {
  border: 1px solid #eef2f7;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  padding: 0;
}

/* BUTTON STYLE */
.faq-card .btn-link {
  width: 100%;
  text-align: left;
  position: relative;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
  padding: 18px 45px 18px 18px;
  background: #fff;
}

/* REMOVE BOOTSTRAP FOCUS */
.faq-card .btn-link:focus {
  outline: none;
  box-shadow: none;
}

/* ICON BOX */
.faq-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

/* PLUS ICON */
.faq-icon::before {
  content: "+";
  font-size: 22px;
  font-weight: 600;
  color: #2b59ff;
  transition: 0.3s ease;
}

/* OPEN STATE → MINUS ICON */
.faq-card .btn-link:not(.collapsed) .faq-icon::before {
  content: "−";
  font-size: 26px;
  color: #2b59ff;
}


/* SMOOTH COLLAPSE */
.collapse {
  transition: all 0.25s ease;
}

.secure-section{
  background:#f7f9ff;
  padding:80px 0;
}

/* Tag */
.section-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:#2b59ff;
  display:block;
  margin-bottom:10px;
  text-align: center;
}

/* Title */
.section-title{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:15px;
}


/* Checklist */
.checklist p{
  font-size:14px;
  color:#334155;
  margin-bottom:10px;
}

/* Button */
.btn-primary-custom{
  display:inline-block;
  background:#211964;
  color:#fff;
  padding:12px 22px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  margin-top:15px;
  transition:0.3s;
}

.btn-primary-custom:hover{
  background:#1e40af;
  transform:translateY(-2px);
}

/* MAIN DARK CARD */
.secure-main-card{
  background:linear-gradient(135deg,#0b3a82,#0f2d6b);
  color:#fff;
  padding:20px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.secure-main-card h5{
  margin:0;
  font-size:15px;
  font-weight:700;
  color: #fff;
}

.secure-main-card p{
  margin:0;
  font-size:13px;
  opacity:0.85;
}

/* ICON */
.secure-icon{
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:18px;
}

/* MINI BOX */
.mini-box{
  background:#fff;
  border:1px solid #e6ecf7;
  border-radius:12px;
  padding:15px 10px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.mini-icon{
  width:32px;
  height:32px;
  background:#eef3ff;
  border-radius:8px;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mini-box p{
  font-size:12px;
  margin:0;
  color:#475569;
}
.vat-section{
  background:#f6f9ff;
  padding:80px 0;
}

/* Title */
.section-title{
  font-size:34px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:12px;
}


/* Card */
.vat-card{
  background:#fff;
  border:1px solid #e6ecf7;
  border-radius:14px;
  padding:22px 16px;
  text-align:center;
  height:100%;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:0.3s;
}

/* Hover */
.vat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  border-color:#cfe0ff;
}

/* Icon */
.vat-card .icon{
  width:42px;
  height:42px;
  margin:0 auto 10px;
  background:#eef3ff;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

/* Text */
.vat-card h6{
  font-size:14px;
  font-weight:600;
  color:#1e293b;
  margin:0;
}
.tally_straight{
   padding-bottom: 30px;
}
footer .navbar-brand strong{
   color:#fff;
}
.footer-section{
  background:#0b1d3a;
  color:#cbd5e1;
  padding:70px 0 20px;
  font-family: 'Poppins', sans-serif;
}

/* Brand */
.footer-section .logo{
  width:34px;
  height:34px;
  background:linear-gradient(135deg,#2b59ff,#f5b417);
  border-radius:6px;
  margin-right:10px;
}

.footer-section .brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  width: 38%; 
}

.footer-section h5{
  color:#fff;
  font-weight:700;
}

/* Text */
.footer-section .text{
  font-size:14px;
  line-height:1.6;
  margin-bottom:15px;
}

/* Contact */
.footer-section .contact {
	font-size: 14px;
	color: #aab4c5;
	line-height: 31px;
}
.footer-section .contact i{
  margin-right: 10px;
}
/* Headings */
.footer-section h6 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}
.tally_video{
  width: 90%;
  margin: 0 auto;
}
.secure-section .section-tag{
  text-align: left !important;
}
.secure-section .section-title {
  text-align: left !important;
}
.secure-section .section-subtitle {
    text-align: left !important;
}
/* Lists */
.footer-section ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-section ul li{
  margin-bottom:15px;
}
.footer-section ul li a{
  font-size:14px;
  color:#cbd5e1;
  padding: 0;
}
.footer-section ul li a:hover {
  background-color: inherit;
}
.footer-section ul li a:hover{
  color:#F36F21;
}
.ftr_social{
  display: flex;
  gap: 23px;
  margin: 0;
}
/* CTA */
.cta-text{
  font-size:14px;
  color:#cbd5e1;
  margin-bottom:20px;
}

.btn-demo {
    display: inline-block;
    background: #F36F21;
    color: #fff;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

.btn-demo:hover{
  background:#ffbf2f;
  transform:translateY(-2px);
}

/* Divider */
.divider{
  border-color:rgba(255,255,255,0.1);
  margin:25px 0;
}
footer .divider {
    background: #0b1d3a !important;  
}
/* Bottom */
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#9aa7bd;
}

/* Social */
.social span{
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  background:#13284a;
  border-radius:50%;
  margin-left:8px;
  color:#fff;
  font-size:12px;
  cursor:pointer;
}

.social span:hover{
  background:#F36F21;
  color:#fff;
}
.uae-section{
  background:#f6f9ff;
  padding:80px 0;
}

/* Tag */
.section-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:#2b59ff;
  display:block;
  margin-bottom:12px;
}

/* Title */
.section-title{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:12px;
}

.section-subtitle{
  font-size:15px;
  color:#64748b;
  line-height:1.6;
  margin-bottom: 0 !important;
}
.businesses_operating{
  background: #f7f9ff !important;
  padding: 80px 0;
}
.main_logo{
  width: 10%;
  margin: 0;
  padding: 0;
}
.main_logo img{
  width: 100%;
}
.tch-step-number{
  color: rgb(0 0 0) !important;
}
.tch-step-block h3 {
  color: #000 !important;
}
/* Card */
.uae-card{
  background:#fff;
  border:1px solid #e8eef7;
  border-radius:16px;
  padding:22px 16px;
  text-align:center;
  height:100%;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:0.3s;
}

/* Hover */
.uae-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
}

/* Icon */
.uae-card .icon{
  width:48px;
  height:48px;
  background:#eef3ff;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  font-size:20px;
}

/* Heading */
.uae-card h6{
  font-size:14px;
  font-weight:700;
  color:#1e293b;
  margin-bottom:8px;
}

/* Text */
.uae-card p{
  font-size:13px;
  color:#64748b;
  margin:0;
  line-height:1.5;
}
@media(max-width:991px) {
    .hero-home h1 {
        font-size: 38px
    }

    .hero-shape {
        position: inherit;
        top: inherit;
        right: inherit;
        width: inherit;
        height: inherit;
    }
 .hero-shape img{
        width: 100%;
 }
    .section {
        padding: 65px 0
    }

    .hero-card {
        margin-top: 30px
    }
}

@media(max-width:575px) {
    .hero-home h1 {
        font-size: 32px
    }

    .topbar .container {
        display: block !important;
        text-align: center
    }

    .topbar a {
        display: block;
        margin: 2px 0 !important
    }

    .btn {
        padding: 11px 18px
    }
}


/* =========================
   SCROLL ANIMATION SYSTEM
   ========================= */

/* base hidden state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

/* active state */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* different animation types */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s ease;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s ease;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* stagger animation for cards */
.reveal-stagger {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.reveal-stagger.active {
  opacity: 1;
  transform: translateY(0);
}
body .btn:focus {
	outline: 0 !important;
	box-shadow: inherit !important;
}
.trust_partner ul {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 25px;
  align-items: center;
}
.trust_partner ul li {
	list-style: none;
	background: #fff;
	height: 60px;
	width: 115px;
	text-align: center;
	border-radius: 4px;
	align-items: center;
	display: flex;
	justify-content: center;
  padding: 10px 10px;
}
.trust_partner ul li img{
	width: auto !important;
}
.trust_partner h3 {
	font-size: 25px;
	font-weight: 400;
	margin: 35px 0 20px 0;
}
#faq {
	padding-top: 20px !important;
  padding-bottom: 65px !important;
}
.faq-image img {
    width: 45% !important;
    margin: 0 auto;
}
#gcc{
    padding-top: 65px;
    padding-bottom: 40px;
}


.pricing-section {
  position: relative;
  overflow: hidden;
  padding: 65px 20px 75px;
  background:
    radial-gradient(circle at 50% 45%, #edf4ff 0, transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
  font-family: Arial, Helvetica, sans-serif;
  color: #101f4f;
}

.pricing-section::before,
.pricing-section::after {
  position: absolute;
  width: 170px;
  height: 170px;
  content: "";
  pointer-events: none;
  opacity: 0.45;
  background-image: radial-gradient(#76a0ff 2px, transparent 2px);
  background-size: 18px 18px;
}

.pricing-section::before {
  top: 10px;
  left: 0;
}

.pricing-section::after {
  right: 0;
  bottom: 0;
}

.pricing-container {
  position: relative;
  z-index: 1;
  width: min(100%, 1320px);
  margin: 0 auto;
}

.pricing-heading {
  max-width: 1100px;
  margin: 0 auto 55px;
  text-align: center;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #1252e8;
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
}

.section-label::before,
.section-label::after {
  width: 45px;
  height: 1px;
  content: "";
  background: #bad0ff;
}

.pricing-heading h2 {
  margin: 0;
  color: #0c1d4c;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.13;
}

.pricing-heading h2 span {
  color: #1252e8;
}

.pricing-heading p {
  margin: 20px 0 0;
  color: #53617d;
  font-size: 19px;
  line-height: 1.6;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.12fr;
  align-items: stretch;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
}

.price-card,
.benefits-card {
  position: relative;
  border-radius: 24px;
}

.price-card {
  padding: 36px 44px 38px;
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #ccdaf7;
  box-shadow: 0 18px 45px rgba(30, 70, 145, 0.12);
}

.gold-card {
  border: 2px solid #e7a816;
  box-shadow:
    0 18px 45px rgba(30, 70, 145, 0.12),
    0 0 28px rgba(238, 174, 23, 0.16);
}

.popular-badge {
  position: absolute;
  top: -21px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 25px;
  color: #fff;
  white-space: nowrap;
  border-radius: 30px;
  background: linear-gradient(135deg, #e8ab20, #b97d00);
  box-shadow: 0 8px 18px rgba(190, 130, 0, 0.25);
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.tally_videopost video{
  width: 90%;
  margin: 0 auto;
}
.vat-invoicing{
  padding-bottom: 0;
}
.tally-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 112px;
  margin-bottom: 10px;
}

.tally-logo strong {
  position: relative;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-style: italic;
  line-height: 1;
}

.tally-logo strong::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 5px;
  content: "";
  border-radius: 5px;
  background: #02aaca;
  transform: skewX(-18deg);
}

.tally-logo span {
  margin-top: 14px;
  color: #111;
  font-size: 36px;
  line-height: 1;
}

.price-card h3 {
  margin: 4px 0 7px;
  color: #30384d;
  font-size: 28px;
}

.gold-card h3 {
  color: #c48908;
}

.user-type {
  margin: 0;
  color: #677087;
  font-size: 20px;
}

.divider {
  height: 1px;
  margin: 19px 0;
  background: #dce3ef;
}

.price {
  color: #104ccf;
  font-size: 23px;
  font-weight: 900;
}

.vat {
  margin: 8px 0 20px;
  color: #45506a;
  font-size: 17px;
}

.buy-button {
  display: block;
  padding: 10px 10px;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #1558ef, #002caf);
  box-shadow: 0 10px 20px rgba(17, 75, 210, 0.23);
  transition: 0.25s ease;
  font-size: 18px;
  font-weight: 800;
}

.buy-button:hover {
  box-shadow: 0 14px 26px rgba(17, 75, 210, 0.3);
  transform: translateY(-2px);
  color: #fff;
}

.features,
.benefits-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  background: inherit;
}

.features li {
  position: relative;
  padding: 8px 5px 8px 38px;
  color: #3c4861;
  border-bottom: 1px solid #e5eaf3;
  font-size: 15px;
}

.features li:last-child {
  border-bottom: 0;
}

.features li::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  width: 23px;
  height: 23px;
  content: "✓";
  place-items: center;
  color: #1560e8;
  border: 1.5px solid #4e84ec;
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 900;
}

.gold-card .features li::before {
  color: #d99700;
  border-color: #e9ad24;
}

.benefits-card {
  display: flex;
  flex-direction: column;
  padding: 28px 45px 38px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(52, 134, 255, 0.55), transparent 32%),
    linear-gradient(145deg, #06266a, #003cc7);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 46px rgba(0, 47, 150, 0.28);
}

.shield-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  place-items: center;
  color: #fff;
  border: 2px solid #e8ae27;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 30px;
  font-weight: 900;
}

.benefits-card h3 {
  margin: 0 0 20px;
  text-align: center;
  font-size: 26px;
  line-height: 1.25;
  color: #fff;
}

.benefits-card h3 span {
  color: #ffbd24;
}

.benefits-list {
  margin-top: 3px;
  background: 0;
}

.benefits-list li {
  position: relative;
  padding: 16px 0 16px 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 16px;
  font-weight: 600;
}

.benefits-list li::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  width: 32px;
  height: 32px;
  content: "✓";
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translateY(-50%);
  font-weight: 900;
}
.gold_logo{
  margin-left: 30px;
}
.limited-offer_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: auto;
  padding: 0 15px;
  color: #10245a;
  border: 2px solid #ffd66b;
  border-radius: 13px;
  background: linear-gradient(135deg, #ffc638, #f2a900);
  box-shadow: 0 10px 25px rgba(255, 176, 0, 0.25);
  font-size: 19px;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.timer-icon {
  font-size: 34px;
  font-style: normal;
}
.hero-shape-sec{
  width: 100% !important;
}
.hero_logo{
  width: 18%;
  margin-bottom: 25px;
}
/* Tablet */
@media (max-width: 1050px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits-card {
    grid-column: 1 / -1;
  }

  .benefits-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px;
  }

  .limited-offer {
    margin-top: 30px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .pricing-section {
    padding: 48px 15px;
  }

  .pricing-heading {
    margin-bottom: 45px;
  }

  .pricing-heading h2 {
    font-size: 31px;
    letter-spacing: -0.7px;
  }

  .pricing-heading p {
    font-size: 16px;
  }

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

  .price-card,
  .benefits-card {
    padding: 34px 24px;
  }

  .benefits-card {
    grid-column: auto;
  }

  .benefits-list {
    display: block;
  }

  .limited-offer {
    font-size: 20px;
  }
}
.hero_shape_mob{
    display: none;
}
@media(max-width:767px) {
.ftr_social {
    justify-content: center !important;  
}
.hero_shape_dsk{
     display: none;
}
.hero_shape_mob{
    display: block;
}
.main_logo {
    width: 25%;
}
.socials {
	display: flex;
	justify-content: center;
}
.navbar{
  padding: 14px 15px;
}
.navbar .navbar-toggler{
	padding: 3px 6px;
	font-size: 16px;
}
#mainNav {
	padding: 20px 0;
}
.btn-gold {
	padding: 10px 16px !important;
	font-size: 14px;
	font-weight: 500;
	margin: 15px 0 0 15px;
}
.badge-pill-custom {
	font-size: 13px;
  padding: 7px 18px;
}
#gcc {
	padding: 30px 0 0;
}
#gcc .row .col-6{
	padding: 0 10px;
}
#gcc .row .country-card {
	border-radius: 8px;
	padding: 12px;
  text-align: left;
}
.hero-row {
	padding-bottom: 0px !important;
	padding-top: 35px !important;
  min-height: inherit;
}
#gcc .row {
	margin-top: 30px !important;
	margin-bottom: 25px !important;
}
#platform{
  padding: 35px 0 30px 0;
}
.platform_imge img{
  width: 100%;
}
#platform .mb-4 {
	margin-bottom: 15px !important;
}
#accounting{
  padding: 45px 0 0 0;
}
#accounting p{
  margin-top: 25px;
}
#accounting .btn {
	padding: 11px 18px;
  font-size: 14px;
  margin-bottom: 20px;
  margin-top: 0;
}
#accounting .stack-graphic{
	margin-bottom: 35px;
}
.inventory_management{
  padding: 35px 0 30px 0;
}
.inventory_management h2{
	font-size: 26px;
	line-height: 35px;
}
.inventory_management .btn{
	font-size: 13px;
	padding: 11px 13px;
}
.payroll_management{
  padding: 35px 0 30px 0;
}
#vat{
  padding: 35px 0 30px 0;
}
.vat-section {
	padding: 40px 0 35px 0;
}
.section-title {
	font-size: 22px;
	line-height: 35px;
}
.vat-section .col-6 {
	padding-right: 5px;
	padding-left: 5px;
	margin-bottom: 10px !important;
}
.businesses_operating{
  padding: 35px 0 30px 0;
}
.businesses_operating h2{
	font-size: 25px;
	line-height: 36px;
}
.secure-section{
  padding: 35px 0 30px 0;
}
.secure-main-card {
	flex-direction: column;
  align-items: last baseline;
}
.secure-section .row.checklist .col-6{
  max-width: 100%;
  flex: 0 0 100%;
}
.secure-section .btn-primary-custom {
	font-size: 13px !important;
  padding: 12px 13px; 
}
.secure-section .row{
	gap: 8px;
	padding: 0 15px;
}
.secure-section .row .col-4{
  flex: 48%;
  max-width: 48%;
  padding: 0;
}
.uae-section {
	padding: 35px 0 30px 0;
}
.uae-section .col-6{
  flex: 100%;
  max-width: 100%;
}
.why-section {
	padding: 35px 0 30px 0;
}
.secure-main-card h5 {
	font-size: 16px;
	line-height: 25px;
}
.why-section .col-6{
  flex: 100%;
  max-width: 100%;
  margin-bottom: 10px !important;
}
.we_support .col-6{
  flex: 100%;
  max-width: 100%;
  margin-bottom: 10px !important;
}
.we_support {
	padding: 35px 0 30px 0;
}
.screen-section {
	padding: 35px 0 30px 0;
}
.we_support h2{
  font-size: 23px;
	line-height: 25px;
}
.callback-card {
	width: 100%;
  padding: 15px 15px 0 15px;
}
#contact{
  padding: 35px 0 40px 0;
}
#contact h2{
  font-size: 26px;
}
.tally_straight{
  padding: 35px 0 0 0;
}
#faq .row{
  flex-direction: column-reverse;
}

.footer-section {
	padding: 70px 0 0;
}
.footer-bottom {
	flex-direction: column-reverse;
	gap: 14px;
}
.tally_straight h2{
  font-size: 26px;
}
#faq h2{
  font-size: 26px;
}
.faq-image{
  margin: 40px 0 0 0;
}

.faq-image img {
  width:100%;
}





}



    .cloud-hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 84% 18%, rgba(61, 153, 255, .18), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 47%, #edf7ff 100%);
      border: 1px solid #dbeaff;
      padding: 10px 0 0 0;
    }

    .cloud-hero::before {
      content: "";
      position: absolute;
      right: -140px;
      bottom: -215px;
      width: 850px;
      height: 470px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .88);
      transform: rotate(-8deg);
      box-shadow: 0 0 90px rgba(35, 128, 238, .12);
    }

    .cloud-hero::after {
      content: "";
      position: absolute;
      left: 34%;
      bottom: -300px;
      width: 920px;
      height: 500px;
      border-radius: 50%;
      border-top: 2px solid rgba(35, 128, 238, .14);
      transform: rotate(-8deg);
    }

    .cloud-hero .hero-wrap {
      position: relative;
      z-index: 2;
      width: min(1460px, 92%);
      min-height: 580px;
      margin: auto;
      padding: 56px 0 0 0;
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      align-items: center;
      gap: 55px;
    }

    .cloud-hero .hero-copy {
      max-width: 780px;
    }

  

  
    .cloud-hero .subheading {
      max-width: 730px;
      margin-bottom: 44px;
      color: #515967;
      font-size: clamp(21px, 2vw, 30px);
      line-height: 1.45;
    }

    .cloud-hero .feature-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      margin-bottom: 47px;
    }

     .cloud-hero .feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 30px 7px 0;
    margin-right: 30px;
}

    .cloud-hero .feature:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 0;
    width: 1px;
    height: 40px;
    background: var(--line);
}

  .cloud-hero .feature-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 3px solid #8cc1f6;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--blue);
    font-size: 18px;
    box-shadow: 0 12px 25px rgba(31, 116, 219, .11);
}

      .cloud-hero .feature-text {
      color: var(--navy);
      font-size: 15px;
      line-height: 1.18;
      font-weight: 700;
    }

      .cloud-hero .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 17px;
      padding: 10px 20px;
      border-radius: 8px;
      background: linear-gradient(135deg, #ff8900, #ff6b00);
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      font-weight: 600;
      box-shadow: 0 17px 35px rgba(255, 116, 0, .26);
      transition: .25s ease;
    }

      .cloud-hero .cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 44px rgba(255, 116, 0, .33);
    }

      .cloud-hero .visual {
      position: relative;
      min-height: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

     .cloud-hero .cloud-shape {
    position: absolute;
    top: 59px;
    left: 50%;
    z-index: 5;
    width: 316px;
    height: 124px;
    transform: translateX(-50%);
    border: 8px solid var(--blue);
    border-radius: 85px;
    background: linear-gradient(#ffffff, #e9f5ff);
    box-shadow: 11px 13px 0 #19aef3,
        0 24px 44px rgba(29, 114, 217, .2);
}

      .cloud-hero .cloud-shape::before,
      .cloud-hero .cloud-shape::after {
      content: "";
      position: absolute;
      z-index: -1;
      background: linear-gradient(#ffffff, #e9f5ff);
      border: 8px solid var(--blue);
      border-bottom: 0;
    }

      .cloud-hero .cloud-shape::before {
      left: 48px;
      top: -71px;
      width: 140px;
      height: 118px;
      border-radius: 90px 90px 0 0;
    }

      .cloud-hero .cloud-shape::after {
      right: 45px;
      top: -52px;
      width: 128px;
      height: 98px;
      border-radius: 90px 90px 0 0;
    }

      .cloud-hero .cloud-brand {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 12px;
      color: var(--blue);
      font-size: 26px;
      font-weight: 700;
    }

      .cloud-hero .cloud-brand .brand-mark {
      width: 58px;
      height: 58px;
      margin-bottom: 8px;
    }

      .cloud-hero .server-stack {
      position: relative;
      z-index: 4;
      width: 300px;
      margin-top: 126px;
      filter: drop-shadow(0 30px 24px rgba(27, 69, 123, .25));
    }

      .cloud-hero .server {
      position: relative;
      height: 75px;
      margin-top: -8px;
      overflow: hidden;
      border: 5px solid #132d55;
      border-radius: 15px;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0 11px,
          rgba(22, 181, 255, .36) 12px 14px
        ),
        linear-gradient(180deg, #294b78 0%, #102745 58%, #071626 100%);
      box-shadow:
        inset 0 0 0 2px rgba(72, 153, 255, .4),
        inset 0 -14px 22px rgba(0, 0, 0, .34);
    }

      .cloud-hero .server::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 34px;
      width: 88px;
      height: 10px;
      background:
        radial-gradient(circle at 6px 5px, #19d5ff 0 4px, transparent 5px),
        radial-gradient(circle at 25px 5px, #3195ff 0 4px, transparent 5px);
    }

      .cloud-hero .server::after {
      content: "";
      position: absolute;
      right: 19px;
      top: 20px;
      width: 70px;
      height: 38px;
      border: 1px solid #3975b7;
      border-radius: 5px;
      background:
        radial-gradient(circle at 12px 10px, #1cd3ff 0 3px, transparent 4px),
        radial-gradient(circle at 31px 10px, #1cd3ff 0 3px, transparent 4px),
        radial-gradient(circle at 50px 10px, #1cd3ff 0 3px, transparent 4px);
    }

      .cloud-hero .platform {
      position: absolute;
      z-index: 2;
      bottom: 27px;
      width: 450px;
      height: 120px;
      border: 4px solid #bedcf8;
      border-radius: 50%;
      background: linear-gradient(#ffffff, #dcecff);
      box-shadow:
        inset 0 -15px 24px rgba(56, 146, 232, .14),
        0 26px 46px rgba(36, 97, 162, .2);
    }

      .cloud-hero .shield {
      position: absolute;
      right: 91px;
      bottom: 86px;
      z-index: 6;
      width: 118px;
      height: 140px;
      display: grid;
      place-items: center;
      clip-path: polygon(50% 0, 92% 17%, 85% 72%, 50% 100%, 15% 72%, 8% 17%);
      background: linear-gradient(160deg, #2d86ec, #0a4b9d);
      color: #fff;
      font-size: 45px;
      box-shadow: 0 18px 31px rgba(8, 58, 119, .31);
    }

      .cloud-hero  .shield::before {
      content: "";
      position: absolute;
      inset: 7px;
      clip-path: inherit;
      border: 4px solid #fff;
    }

      .cloud-hero .device {
      position: absolute;
      z-index: 5;
      width: 72px;
      height: 72px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: rgba(255, 255, 255, .95);
      color: var(--blue);
      font-size: 31px;
      box-shadow: 0 13px 30px rgba(42, 120, 214, .17);
    }

      .cloud-hero .device.desktop {
      left: 18px;
      top: 285px;
    }

      .cloud-hero .device.mobile {
      right: 0;
      top: 238px;
    }

      .cloud-hero .device.laptop {
      right: 5px;
      top: 370px;
    }

      .cloud-hero .line {
      position: absolute;
      z-index: 3;
      border-top: 3px dashed #32a8fb;
      opacity: .95;
    }

      .cloud-hero .line-left {
      left: 74px;
      top: 321px;
      width: 155px;
    }

      .cloud-hero .line-right-top {
      right: 62px;
      top: 274px;
      width: 112px;
    }

      .cloud-hero .line-right-bottom {
      right: 65px;
      top: 406px;
      width: 108px;
    }

      .cloud-hero .city {
      position: absolute;
      right: -65px;
      bottom: 78px;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      gap: 13px;
      opacity: .16;
    }

      .cloud-hero .building {
      width: 45px;
      border: 2px solid #2c8df0;
      background:
        repeating-linear-gradient(
          180deg,
          rgba(44, 141, 240, .55) 0 3px,
          transparent 3px 13px
        );
    }

    .b1 { height: 145px; }
    .b2 { height: 260px; width: 54px; }
    .b3 { height: 185px; }
    .b4 { height: 120px; }

    @media (max-width: 1100px) {
      .hero-wrap {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .hero-copy {
        margin: auto;
      }

      .brand {
        justify-content: center;
      }

      .feature-row {
        justify-content: center;
      }

      .visual {
        min-height: 560px;
      }
    }

    @media (max-width: 720px) {
      .cloud-hero {
        min-height: auto;
      }

        .cloud-hero .hero-wrap {
        width: min(92%, 620px);
        padding: 38px 0 45px;
      }

        .cloud-hero h1 {
        font-size: 48px;
        letter-spacing: -1px;
      }

        .cloud-hero .subheading {
        font-size: 20px;
      }

        .cloud-hero.feature-row {
        display: grid;
        gap: 16px;
      }

        .cloud-hero .feature {
        width: 100%;
        justify-content: flex-start;
        padding: 0;
        margin: 0;
      }

        .cloud-hero .feature::after {
        display: none;
      }

        .cloud-hero .cta {
        min-width: 0;
        width: 100%;
        font-size: 21px;
      }

        .cloud-hero .visual {
        transform: scale(.78);
        transform-origin: top center;
        margin-bottom: -95px;
      }
    }

    @media (max-width: 480px) {
       .cloud-hero h1 {
        font-size: 40px;
      }

        .cloud-hero .visual {
        transform: scale(.63);
        margin-bottom: -180px;
      }
    }


    .features{
      margin-bottom: 70px;
    }


@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide {
    min-height: 515px;
  }

}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero-slide {
    min-height: 570px;
  }

}

@media screen and (min-width: 1601px) and (max-width: 1700px) {
  .hero-slide {
    min-height: 625px;
  }

}

@media screen and (min-width: 1701px) and (max-width: 1800px) {
  .hero-slide {
    min-height: 645px;
  }

}


@media screen and (min-width: 1801px) and (max-width: 1900px) {
  .hero-slide {
    min-height: 645px;
  }

}

@media screen and (min-width: 1901px) and (max-width: 2200px) {
  .hero-slide {
    min-height: 733px;
  }

}
@media screen and (min-width: 2201px) and (max-width: 2500px) {
  .hero-slide {
    min-height: 775px;
  }

}
@media screen and (min-width: 2501px) and (max-width: 2600px) {
  .hero-slide {
    min-height: 735px;
  }

}
@media screen and (min-width: 2601px) and (max-width: 3000px) {
  .hero-slide {
    min-height: 1030px;
  }

}


@media screen and (min-width: 3001px) and (max-width: 4000px) {
  .hero-slide {
    min-height: 1600px;
  }

}
@media screen and (min-width: 4001px) and (max-width: 5000px) {
  .hero-slide {
    min-height: 1530px;
  }

}

@media screen and (min-width: 5001px) and (max-width: 7000px) {
  .hero-slide {
           min-height: 1950px;
  }

}