/* ===== Dashboard container ===== */
.dashboard-container{
  display:flex;
  justify-content:space-around;
  align-items:center;
  width:92%;
  margin: 0 auto;
  margin-top: 120px;
  /* add top padding so it clears the fixed header */
  padding:20px 0 60px;   /* 120px ≈ header height + extra space */
  min-height:500px;
  position:relative;
  background:#fff;
  overflow:hidden;
  z-index:0;
}

/* ✅ Grid line background (img1) */
.dashboard-container::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/img/dashboard-img1.png") center/cover no-repeat;
  opacity:0.05;
  z-index:-2;
}

/* ===== Left text column ===== */
.left-section{
  flex:1 1 50%;
  padding-left:30px;     /* breathing room from page left */
}

.dash-p1{
 font-style:italic;
  font-size:14px;
  color:#555;
  margin-bottom:10px;
}
.decor-bar{
  height:4px;
  width:125px;
  background:#dcf1d9;
  margin-bottom:20px;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

.dash-h1{
  font-size:60px;
  line-height:70px;
  color:#2a2a0f;
  margin-bottom:20px;
  max-width:600px;
  line-height: 4rem;
}

.dash-p{
  font-size:20px;
  margin-bottom:25px;
  padding-bottom: 20px;
  color:#333;
  max-width:800px;
  text-align: justify;
}

.contact-btn{
  text-decoration: none;
  background-color: #2a2a0f;
  color: #B8D4AD;
  padding: 20px 60px;
  border-radius: 10px;
  margin-top: 20px;
}

.contact-btn:hover{
  background: transparent;
  border: 3px solid #2a2a0f;
  color: #2a2a0f;
}
/* ===== Right image column ===== */
.right-section{
  flex:1 1 50%;
  display:flex;
  justify-content:center;    
  align-items:center;
  position:relative;
  padding:0; margin:0;
}



/* Laptop image */
.contact-img{
  position:relative;
  z-index:1;
  width: 400px;
  height:420px;
  margin-top:-60px;
  margin-right:10px;
}

.about-soft{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 70px;
}


.about-soft h1{
  font-size: 40px;
  font-weight: 800;
  color: #2a2a0f;
}

.about-soft p{
  font-size: 18px;
  max-width: 800px;
  text-align: center;
}

.value-card{
  display: flex;
  max-width: 1200px;
  height: 400px;
  justify-content: space-around;
  background-color: #ecfae4;
  margin: 0 auto;
  padding: 10px;
  border-radius: 30px;
  box-shadow: 5px 10px 10px 10px rgba(0,0,0,0.09);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover{
   transform: translateY(-8px);
}

.flex-container{
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.left-img img{
  height: 90%;
  padding: 20px 20px;
}

.right-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.right-text h1{
  font-size: 38px;
  margin-top: -20px;
  color: #2a2a0f;
}

.right-text ul{
  margin-left: 45px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 30px;
}



.intel-section{
  padding: 80px 80px 0 80px;
margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 0px;
  /* add top padding so it clears the fixed header */
  padding:20px 0 0px;   /* 120px ≈ header height + extra space */
  min-height:400px;
  position:relative;
  background:#fff;
  overflow:hidden;
  z-index:0;
}

/* ✅ Grid line background (img1) */
.intel-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/img/Mask-group.png") center/contain no-repeat;
  opacity:1;
  z-index:-2;
  margin-right: -1090px;
  margin-top: 25px;
  height: 600px;
  transform: rotate(180deg);
}

.intel-content{
  display: flex;
  gap: 200px;
  margin-left: 50px;
}

.left-intel{
  padding: 100px 100px 0 100px;
}

.left-intel h1{
  font-size: 38px;
  max-width: 600px;
  color: #2a2a0f;
}

.left-intel p{
  font-size: 22px;
  padding-top: 20px;
  max-width: 690px;
  text-align: left;
  color: #181818;
}

.what-del{
  margin-left: 152px;
  margin-bottom: 90px;
}

.what-del h4{
  font-size: 28px;
  color: #2a2a0f;
}

.what-del ul{
  padding-left: 40px;
  padding-top: 10px;
  font-size: 22px;
  max-width: 1200px;
  color: #181818;
}


.right-intel{
  padding-top: 140px;
  justify-items: flex-end;
}

.how-work{
  background-color: #ecfae4;
  padding: 40px;
}

.how-title{
  text-align: center;
  margin-bottom: 50px;
}

.how-title h1{
  font-size: 40px;
  font-weight: 800;
  color: #2a2a0f;
}

.how-title p{
  font-size: 20px;
}

.working-container{
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 0 auto;
  justify-content: flex-start;
  max-width: 900px;
  margin-top: 80px;
}

.workings{
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.work-img img{
  height: 40px;
}


.work-text h1{
  font-size: 30px;
  color: #2a2a0f;
}

.work-text p{
  font-size: 18px;
}


.work-btn{
  display: flex;
  flex: 1fr;
  justify-content: center;
  margin-top: 120px;
}

.work-bt{
  text-decoration: none;
  background: transparent;
  border: 3px solid #2a2a0f;
  padding: 18px 50px;
  border-radius: 8px;
  color: #2a2a0f;
  font-weight: 700;
}

.work-bt:hover{
  background-color: #2a2a0f;
  color: #B8D4AD;
}

.analytic{
    padding: 80px 80px 0 80px;
margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 0px;
  /* add top padding so it clears the fixed header */
  padding:20px 0 0px;   /* 120px ≈ header height + extra space */
  min-height:700px;
  position:relative;
  background:#fff;
  overflow:hidden;
  z-index:0;
}


.analytic::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/img/Mask-group.png") center/contain no-repeat;
  opacity:1.3;
  z-index:-2;
  margin-left: -1190px;
  margin-top: 90px;
  height: 500px;
  transform: rotate(360deg);
}

.analytic-container{
  display: flex;
  flex-direction: row;
  gap: 120px;
  margin: 0 auto;
}


.right-analytic{
  padding-top: 90px;
}

.right-analytic h1{
  font-size: 40px;
  max-width: 600px;
  line-height: 3.1rem;
  margin-bottom: 10px;
  color: #2a2a0f;
}

.right-analytic p{
  font-size: 20px;
  max-width: 520px;
  margin-bottom: 20px;
}

.right-analytic h4{
  font-size: 22px;
  margin-bottom: 20px;
}

.right-analytic ul{
  margin-left: 30px;
  font-size: 20px;
}


.analytic-img img{
  height: 400px;
  margin-left: 120px;
  margin-top: 150px;
}


.detail-container{
  display: flex;
  flex-direction: column;
  background-color: #f2f9ef;
  margin-bottom: 120px;
  max-width: 1300px;
  height: 300px;
  gap: 50px;
  justify-content: center;
  align-items: center;
  padding: 50px;
  border-radius: 30px;
  margin: 20px auto;
  margin-bottom: 120px;
  box-shadow: 0 0 20px rgba(0,0,0,0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-container:hover{
  transform: translateY(-8px);                  /* move up 8px */
}

.detail-container p{
  font-size: 24px;
  max-width: 950px;
  text-align: center;
}

.detail-container a{
  text-decoration: none;
  background: transparent;
  border: 3px solid #2a2a0f;
  color: #2a2a0f;
  padding: 15px 25px;
  border-radius: 10px;
  font-weight: 700;
}


.detail-container a:hover{
  background-color: #2a2a0f;
  color: #B8D4AD;
}



/*===================================Media Queries==========================================*/
@media(max-width: 1030px){
.value-card{
  max-width: 900px;
}

.intel-section{
  padding: 80px 20px 0 40px;
margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 0px;
  /* add top padding so it clears the fixed header */
  padding:20px 0 0px;   /* 120px ≈ header height + extra space */
  min-height:400px;
  position:relative;
  background:#fff;
  overflow:hidden;
  z-index:0;
}

/* ✅ Grid line background (img1) */
.intel-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/img/Mask-group.png") center/contain no-repeat;
  opacity:1;
  z-index:-2;
  margin-right: -800px;
  margin-top: 25px;
  height: 600px;
  transform: rotate(180deg);
}

.intel-content{
  display: flex;
  gap: 60px;
  margin-left: 20px;
}

.left-intel{
  padding: 100px 50px 0 100px;
}

.left-intel h1{
  font-size: 50px;
  max-width: 400px;
}

.left-intel p{
  font-size: 22px;
  padding-top: 20px;
  max-width: 690px;
  text-align: left;
}

.what-del{
  margin-left: 122px;
  margin-bottom: 90px;
}

.what-del h4{
  font-size: 22px;
}

.what-del ul{
  padding-left: 40px;
  padding-top: 10px;
  font-size: 22px;
  max-width: 1200px;
}


.right-intel{
  padding-top: 140px;
  justify-items: flex-end;
}



.how-title h1{
  font-size: 45px;
  font-family: poppins, sans-serif;
  font-weight: 800;
}

.how-title p{
  font-size: 22px;
}

.working-container{
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 0 auto;
  justify-content: flex-start;
  max-width: 600px;
  margin-top: 80px;
}

.analytic{
    padding: 80px 20px 0 20px;
margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 0px;
  /* add top padding so it clears the fixed header */
  padding:20px 0 0px;   /* 120px ≈ header height + extra space */
  min-height:600px;
  position:relative;
  background:#fff;
  overflow:hidden;
  z-index:0;
}


.analytic::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/img/Mask-group.png") center/contain no-repeat;
  opacity:1.3;
  z-index:-2;
  margin-left: -900px;
  margin-top: 90px;
  height: 500px;
  transform: rotate(360deg);
}

.analytic-container{
  display: flex;
  flex-direction: row;
  gap: 50px;
  margin: 0 auto;
}


.right-analytic{
  padding-top: 90px;
}
.right-analytic h1{
  font-size: 45px;
  max-width: 600px;
  line-height: 3.1rem;
  margin-bottom: 10px;
}
.right-analytic p{
  font-size: 22px;
  max-width: 520px;
  margin-bottom: 20px;
}
.right-analytic h4{
  font-size: 20px;
  margin-bottom: 20px;
}
.right-analytic ul{
  margin-left: 30px;
  font-size: 20px;
}
.analytic-img img{
  height: 370px;
  margin-left: 50px;
  margin-top: 150px;
}
.detail-container{
  display: flex;
  flex-direction: column;
  background-color: #f2f9ef;
  margin-bottom: 120px;
  max-width: 800px;
  height: 250px;
  gap: 30px;
}

.detail-container p{
  font-size: 22px;
  max-width: 950px;
  text-align: center;
}

.detail-container a{
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
}
}

@media(max-width: 770px){
/* ===== Dashboard container ===== */
.dashboard-container{
  margin-top: 70px;
  padding:20px 0 30px;   /* 120px ≈ header height + extra space */
  min-height:400px;
}
/* ===== Left text column ===== */
.left-section{
  flex:1 1 50%;
  padding-left:10px;     /* breathing room from page left */
  max-width: 900px;
}

.dash-p1{
  font-size: 18px;
  font-weight: 600;
}

.dash-h1{
  font-size:25px;
  line-height:30px;
  margin-bottom:10px;
  max-width:900px;
}

.dash-p{
  font-size:16px;
  margin-bottom:20px;
  padding-bottom: 10px;
  max-width:600px;
}

.contact-btn{
  padding: 10px 20px;
  border-radius: 8px;
  margin-top: 5px;
}

.right-section{
  flex:1 1 50%;
  padding:0; margin:0;
}


.contact-img{
  width: 260px;
  height:200px;
  margin-top:-60px;
  margin-right:2px;
}


.about-soft{
  margin: 50px;
}


.about-soft h1{
  font-size: 40px;
  font-weight: 800;
}

.about-soft p{
  font-size: 16px;
  max-width: 500px;
}
 
  .value-card{
  max-width: 700px;
  height: 300px;
}


.flex-container{
  gap: 30px;
}

.left-img img{
  height: 70%;
  padding: 20px 20px;
}

.right-text{
  padding-top: 50px;
}

.right-text h1{
  font-size: 30px;
  margin-top: -80px;
}

.right-text ul{
  margin-left: 45px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 30px;
}


.intel-section{
  padding: 60px 20px 0 20px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:300px;
}

.intel-section::before{
  margin-right: -600px;
  margin-top: 25px;
  height: 600px;
}

.intel-content{
  display: flex;
  gap: 40px;
  margin-left: 10px;
}

.left-intel{
  padding: 100px 20px 0 30px;
}

.left-intel h1{
  font-size: 40px;
  max-width: 400px;
}

.left-intel p{
  font-size: 18px;
  padding-top: 20px;
  max-width: 690px;
  text-align: left;
}

.what-del{
  margin-left: 42px;
  margin-bottom: 90px;
}

.what-del h4{
  font-size: 22px;
}

.what-del ul{
  padding-left: 40px;
  padding-top: 10px;
  font-size: 16px;
  max-width: 1200px;
}

.right-intel{
  padding-top: 140px;
  justify-items: flex-end;
}

.how-title h1{
  font-size: 40px;
  font-weight: 800;
}

.how-title p{
  font-size: 16px;
}

.working-container{
  gap: 30px;
  margin: 0 auto;
  max-width: 600px;
  margin-top: 60px;
}

.workings{
  gap: 30px;
}

.work-img img{
  height: 30px;
}


.work-text h1{
  font-size: 28px;
}

.work-text p{
  font-size: 16px;
}


.work-btn{
  flex: 1fr;
  margin-top: 60px;
}

.work-bt{
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
}

.analytic{
  padding: 80px 20px 0 20px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:500px;
}


.analytic::before{
  margin-left: -430px;
  margin-top: 90px;
  height: 500px;
}

.analytic-container{
  gap: 20px;
  margin: 0 auto;
}


.right-analytic{
  padding-top: 90px;
}
.right-analytic h1{
  font-size: 35px;
  max-width: 600px;
  line-height: 2.6rem;
  margin-bottom: 10px;
}
.right-analytic p{
  font-size: 16px;
  max-width: 520px;
  margin-bottom: 10px;
}
.right-analytic h4{
  font-size: 18px;
  margin-bottom: 10px;
}
.right-analytic ul{
  margin-left: 30px;
  font-size: 16px;
}
.analytic-img img{
  height: 310px;
  margin-left: 30px;
  margin-top: 150px;
}
.detail-container{
  margin-bottom: 120px;
  margin-top: 80px;
  max-width: 650px;
  height: 220px;
  gap: 20px;
}

.detail-container p{
  font-size: 18px;
  max-width: 950px;
  text-align: center;
}

.detail-container a{
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
}
}

@media(max-width: 430px){
.dashboard-container{
  margin-top: 90px;
  padding:20px 0 30px;   
  min-height:300px;
  gap: 20px;
}

.left-section{
  flex:1 1 60%;
  padding-left:10px;     /* breathing room from page left */
  max-width: 500px;
}

.dash-p1{
  font-size: 13px;
  font-weight: 600;
}

.dash-h1{
  font-size:18px;
  line-height:20px;
  margin-bottom:10px;
  max-width:900px;
}

.dash-p{
  font-size:13px;
  margin-bottom:10px;
  padding-bottom: 5px;
  max-width:600px;
}

.contact-btn{
  padding: 8px 20px;
  font-size: 10px;
  border-radius: 8px;
  margin-top: 0px;
}

.right-section{
  flex:1 1 40%;
  padding:0; margin:0;
}


.contact-img{
  width: 150px;
  height:130px;
  margin-top:-60px;
  margin-right:2px;
}


.about-soft{
  margin: 30px;
}


.about-soft h1{
  font-size: 28px;
  font-weight: 800;
}

.about-soft p{
  font-size: 12px;
  max-width: 300px;
}
 
  .value-card{
  max-width: 370px;
  height: 240px;
}


.flex-container{
  gap: 10px;
}

.left-img img{
  height: 80%;
  padding: 20px 20px;
}

.right-text{
  padding-top: 10px;
}

.right-text h1{
  font-size: 16px;
  margin-top: 0px;
}

.right-text ul{
  margin-left: 25px;
  margin-top: 10px;
  font-size: 10px;
  line-height: 20px;
}


.intel-section{
  padding: 30px 20px 0 20px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:300px;
}

.intel-section::before{
  margin-right: -300px;
  margin-top: 25px;
  height: 300px;
}

.intel-content{
  display: flex;
  gap: 20px;
  margin-left: 5px;
}

.left-intel{
  padding: 50px 20px 0 30px;
}

.left-intel h1{
  font-size: 25px;
  max-width: 400px;
}

.left-intel p{
  font-size: 12px;
  padding-top: 10px;
  max-width: 690px;
  text-align: left;
}

.what-del{
  margin-left: 32px;
  margin-bottom: 30px;
}

.what-del h4{
  font-size: 20px;
}

.what-del ul{
  padding-left: 40px;
  padding-top: 10px;
  font-size: 12px;
  max-width: 1200px;
}

.right-intel{
  padding-top: 40px;
  justify-items: flex-end;
}

.right-intel img{
  height: 200px;
}


.how-title h1{
  font-size: 30px;
  font-weight: 800;
}

.how-title p{
  font-size: 12px;
}

.working-container{
  gap: 20px;
  margin: 0 auto;
  max-width: 400px;
  margin-top: 30px;
}

.workings{
  gap: 20px;
}

.work-img img{
  height: 20px;
}


.work-text h1{
  font-size: 18px;
}

.work-text p{
  font-size: 10px;
}


.work-btn{
  flex: 1fr;
  margin-top: 30px;
}

.work-bt{
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.analytic{
  padding: 30px 20px 0 20px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:300px;
}


.analytic::before{
  margin-left: -330px;
  margin-top: 20px;
  height: 300px;
}

.analytic-container{
  gap: 10px;
  margin: 0 auto;
}


.right-analytic{
  padding-top: 20px;
}
.right-analytic h1{
  font-size: 18px;
  max-width: 600px;
  line-height: 2.2rem;
  margin-bottom: 10px;
}
.right-analytic p{
  font-size: 10px;
  max-width: 520px;
  margin-bottom: 10px;
}
.right-analytic h4{
  font-size: 14px;
  margin-bottom: 10px;
}
.right-analytic ul{
  margin-left: 30px;
  font-size: 10px;
}
.analytic-img img{
  height: 110px;
  margin-left: 20px;
  margin-top: 90px;
}
.detail-container{
  margin-bottom: 120px;
  margin-top: 60px;
  max-width: 350px;
  height: 120px;
  gap: 20px;
}

.detail-container p{
  font-size: 12px;
  max-width: 600px;
  text-align: center;
}

.detail-container a{
  padding: 8px 10px;
  font-size: 8px;
  border-radius: 8px;
  font-weight: 700;
}
}

@media(max-width: 380px){
  .dashboard-container{
  margin-top: 90px;
  padding:20px 0 30px;   
  min-height:230px;
  gap: 20px;
}

.left-section{
  flex:1 1 60%;
  padding-left:10px;     /* breathing room from page left */
  max-width: 500px;
}

.dash-p1{
  font-size: 10px;
  font-weight: 600;
}

.dash-h1{
  font-size:14px;
  line-height:15px;
  margin-bottom:5px;
  max-width:900px;
}

.dash-p{
  font-size:10px;
  margin-bottom:10px;
  padding-bottom: 5px;
  max-width:600px;
}

.contact-btn{
  padding: 8px 10px;
  font-size: 8px;
  border-radius: 4px;
  margin-top: 0px;
}

.right-section{
  flex:1 1 40%;
  padding:0; margin:0;
}


.contact-img{
  width: 120px;
  height:110px;
  margin-top:-60px;
  margin-right:2px;
}


.about-soft{
  margin: 20px;
}


.about-soft h1{
  font-size: 20px;
  font-weight: 800;
}

.about-soft p{
  font-size: 8px;
  max-width: 300px;
}
 
  .value-card{
  max-width: 330px;
  height: 200px;
}


.flex-container{
  gap: 2px;
}

.left-img img{
  height: 70%;
  padding: 20px 20px;
}

.right-text{
  padding-top: 5px;
}

.right-text h1{
  font-size: 14px;
  margin-top: 0px;
}

.right-text ul{
  margin-left: 20px;
  margin-top: 5px;
  font-size: 8px;
  line-height: 15px;
}


.intel-section{
  padding: 30px 20px 0 20px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:250px;
}

.intel-section::before{
  margin-right: -200px;
  margin-top: 25px;
  height: 250px;
}

.intel-content{
  display: flex;
  gap: 10px;
  margin-left: 5px;
}

.left-intel{
  padding: 50px 20px 0 20px;
}

.left-intel h1{
  font-size: 20px;
  max-width: 400px;
}

.left-intel p{
  font-size: 8px;
  padding-top: 5px;
  max-width: 690px;
  text-align: left;
}

.what-del{
  margin-left: 32px;
  margin-bottom: 30px;
}

.what-del h4{
  font-size: 18px;
}

.what-del ul{
  padding-left: 40px;
  padding-top: 10px;
  font-size: 8px;
  max-width: 1200px;
}

.right-intel{
  padding-top: 40px;
  justify-items: flex-end;
}

.right-intel img{
  height: 150px;
}


.how-title h1{
  font-size: 25px;
  font-weight: 800;
}

.how-title p{
  font-size: 10px;
}

.working-container{
  gap: 30px;
  margin: 0 auto;
  max-width: 300px;
  margin-top: 30px;
}

.workings{
  gap: 10px;
}

.work-img img{
  height: 20px;
}


.work-text h1{
  font-size: 14px;
}

.work-text p{
  font-size: 10px;
}


.work-btn{
  flex: 1fr;
  margin-top: 30px;
}

.work-bt{
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 700;
}

.analytic{
  padding: 30px 20px 0 20px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:200px;
}


.analytic::before{
  margin-left: -280px;
  margin-top: 20px;
  height: 200px;
}

.analytic-container{
  gap: 8px;
  margin: 0 auto;
}


.right-analytic{
  padding-top: 20px;
}
.right-analytic h1{
  font-size: 15px;
  max-width: 600px;
  line-height: 1.2rem;
  margin-bottom: 5px;
}
.right-analytic p{
  font-size: 8px;
  max-width: 520px;
  margin-bottom: 10px;
}
.right-analytic h4{
  font-size: 12px;
  margin-bottom: 10px;
}
.right-analytic ul{
  margin-left: 20px;
  font-size: 8px;
}
.analytic-img img{
  height: 100px;
  margin-left: 20px;
  margin-top: 50px;
}
.detail-container{
  margin-bottom: 90px;
  margin-top: 60px;
  max-width: 300px;
  height: 110px;
  gap: 10px;
}

.detail-container p{
  font-size: 10px;
  padding-top: 5px;
  max-width: 800px;
  text-align: center;
}

.detail-container a{
  padding: 8px 10px;
  font-size: 6px;
  border-radius: 8px;
  font-weight: 700;
}
}

@media(max-width: 325px){
  .dashboard-container{
  margin-top: 90px;
  padding:20px 0 30px;   
  min-height:230px;
  gap: 20px;
}

.left-section{
  flex:1 1 60%;
  padding-left:10px;     /* breathing room from page left */
  max-width: 500px;
}

.dash-p1{
  font-size: 8px;
  font-weight: 600;
}

.dash-h1{
  font-size:12px;
  line-height:15px;
  margin-bottom:5px;
  max-width:900px;
}

.dash-p{
  font-size:8px;
  margin-bottom:5px;
  padding-bottom: 2px;
  max-width:600px;
}

.contact-btn{
  padding: 8px 10px;
  font-size: 6px;
  border-radius: 4px;
  margin-top: 0px;
}

.right-section{
  flex:1 1 40%;
  padding:0; margin:0;
}


.contact-img{
  width: 100px;
  height:90px;
  margin-top:-60px;
  margin-right:2px;
}


.about-soft{
  margin: 20px;
}


.about-soft h1{
  font-size: 16px;
  font-weight: 800;
}

.about-soft p{
  font-size: 8px;
  max-width: 260px;
}
 
  .value-card{
  max-width: 280px;
  height: 180px;
}


.flex-container{
  gap: 2px;
}

.left-img img{
  height: 70%;
  padding: 20px 20px;
}

.right-text{
  padding-top: 5px;
}

.right-text h1{
  font-size: 12px;
  margin-top: 0px;
}

.right-text ul{
  margin-left: 20px;
  margin-top: 5px;
  font-size: 7px;
  line-height: 12px;
}


.intel-section{
  padding: 30px 20px 0 20px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:250px;
}

.intel-section::before{
  margin-right: -200px;
  margin-top: 25px;
  height: 250px;
}

.intel-content{
  display: flex;
  gap: 10px;
  margin-left: 5px;
}

.left-intel{
  padding: 50px 20px 0 20px;
}

.left-intel h1{
  font-size: 18px;
  max-width: 400px;
}

.left-intel p{
  font-size: 8px;
  padding-top: 5px;
  max-width: 690px;
  text-align: left;
}

.what-del{
  margin-left: 32px;
  margin-bottom: 30px;
}

.what-del h4{
  font-size: 16px;
}

.what-del ul{
  padding-left: 40px;
  padding-top: 5px;
  font-size: 8px;
  max-width: 1200px;
}

.right-intel{
  padding-top: 40px;
  justify-items: flex-end;
}

.right-intel img{
  height: 120px;
  margin-right: 10px;
}


.how-title h1{
  font-size: 20px;
  font-weight: 800;
}

.how-title p{
  font-size: 10px;
}

.working-container{
  gap: 30px;
  margin: 0 auto;
  max-width: 300px;
  margin-top: 30px;
}

.workings{
  gap: 10px;
}

.work-img img{
  height: 18px;
}


.work-text h1{
  font-size: 12px;
}

.work-text p{
  font-size: 8px;
}


.work-btn{
  flex: 1fr;
  margin-top: 30px;
}

.work-bt{
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 6px;
  font-weight: 700;
}

.analytic{
  padding: 30px 20px 0 20px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 0px;
  padding:20px 0 0px;   
  min-height:200px;
}


.analytic::before{
  margin-left: -280px;
  margin-top: 20px;
  height: 200px;
}

.analytic-container{
  gap: 8px;
  margin: 0 auto;
}


.right-analytic{
  padding-top: 20px;
}
.right-analytic h1{
  font-size: 13px;
  max-width: 600px;
  line-height: 1rem;
  margin-bottom: 5px;
}
.right-analytic p{
  font-size: 8px;
  max-width: 520px;
  margin-bottom: 10px;
}
.right-analytic h4{
  font-size: 12px;
  margin-bottom: 10px;
}
.right-analytic ul{
  margin-left: 20px;
  font-size: 8px;
}
.analytic-img img{
  height: 100px;
  margin-left: 8px;
  margin-top: 50px;
}
.detail-container{
  margin-bottom: 90px;
  margin-top: 60px;
  max-width: 270px;
  height: 100px;
  border-radius: 16px;
  gap: 10px;
}

.detail-container p{
  font-size: 9px;
  padding-top: 5px;
  max-width: 900px;
  text-align: center;
}

.detail-container a{
  padding: 5px 10px;
  font-size: 6px;
  border-radius: 4px;
  font-weight: 700;
}
}