/* =========================
   GLOBAL SETTINGS
========================= */

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

html {
  font-family: "Lucida Sans", sans-serif;
}

body {
  background: #ffffff;
}

/* Column System */
[class*="col-"] {
  float: left;
  padding: 0.5% 0 0.5% 1%;
}

/* =========================
   FONTS
========================= */

@font-face {
  font-family: 'Kruti Dev';
  src: url('https://topmostservices.co.in/Kruti_Dev_010_Regular.ttf') format('truetype');
}

.hnd {
  font-family: 'Kruti Dev';
  color: #800060;
  font-size: 80%;
}

.plnh{
margin: 7% 0 2% 4%;
position: absolute;
}
.polpara {
position: absolute;
font-family: arial 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 95%;
text-align: justify;
margin: 10% 3% 0 6%;
}

.hanging-indent {
    padding-left: 2em;   /* Indents the entire block by 2em */
    text-indent: -2em;  /* Pulls the first line back by the same 2em negative value */
}

.ppay {
 position: absolute;
 margin: 14% 1% 0 6%;
}

.eage {
  width: 17%;
  border: 2px solid blue;
  border-radius: 3%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 90%;
  padding: 1em 0.5em 1em 5.5em;
  text-indent: -5em;
  margin: 0 0 1% 0.25%;
  text-align: left;
  float: left;
}
.mage {
  width: 18%;
}

.ppr {
  width: 31.55%;
  padding-left: 10em;
  text-indent: -8.5em;
}

.ppm {
  width: 32.5%;
  padding-left: 6em;
  clear: left;
}

.prep {
  width: 18%;
  border: 2px solid blue;
  border-radius: 3%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 90%;
  padding: 1em 0.5em 1em 1em;
  margin: 0 0 1% 0.25%;
  text-align: left;
  float: left;
}

.ben {
 position: absolute;
 margin: 37% 2% 0 6%;
 align-items: center;
 }

.wb {
  padding: 1em 0.5em 1em 1em;
  text-indent: 0;
  font-size: 100%;
}

.hlth {
  width: 30%;
}

.wbap {
  width: 55.25%;
}

.wf {
  width: 14%;
  font-size: 100%;
}

.tpoo {
  width:100%;
  font-size: 100%;
}

.pdb {
  width: 50.2%;
}

.adb {
  width: 35%;
}
.pcal {
  width: 48%;
  padding: 0.25em 1em 0.25em 0.5em;
  text-indent: 0;
}

.brch {
  position:absolute;
  margin: 90% 0 0 6%;
  font-size: 150%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  text-align: center;
}

th, td {
  font-size: 90%;
  width: 1%;
  border: 1px solid #000;
  padding: 0.25%;
}

th {
  background-color: #e6e6e6;
}

.a-btn{
    height:3.5vh;
    width: 15%;
    font-size:110%;
    border:2px solid;
    border-radius:4%;
    text-align:center;
    color: aqua;
    background:red;
}

.b-btn{
    height:3.5vh;
    width: 35%;
    font-size:100%;
    border:2px solid;
    border-radius:4%;
    text-align:center;
    color: aqua;
    background:red;
}
/* =========================
   HEADER + NAVIGATION
========================= */

.hddr {
  display: flex;
  background-color: #EC3237;
  color: #ffffff;
  width: 50%;
  height: 8vh;
  float: left;
}

.top-nav {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: #870C4F;
  color: #ffffff;
  padding: 1.5% 0 1.1% 0;
  width: 50%;
  height: 8vh;
  float: left;
}

.top-nav a {
  text-decoration: none;
  color: white;
}

.top-nav a:hover {
  font-style: italic;
  color: #83C50F;
}

.active {
  background-color: #04AA6D;
}

/* Dropdown */

.dropdown {
float:left;
width:20%;
margin: 0 0 0 0;
align-content: center;
height:4vh;
text-align:center;
background: green;
}

.dropbtn{
font-weight:bold;
color:white;
padding:1% 2%;
border:none;
cursor:pointer;
font-size:100%;
width:100%;
text-decoration:none;
}

.dropdown:hover .dropbtn{
background:red;
color:yellow;
}

/* Mega Menu FULL WIDTH */

.mega-menu{
display:none;
position:absolute;
left:0;
width:100%;
background:#6fe62b;
opacity: 1;
box-shadow:0 0.5% 1% rgba(0,0,0,0.2);
padding:2% 0;
text-align:left;
z-index: 9999;
}

/* Show menu */

.dropdown:hover .mega-menu{
display:block;
}

/* Menu container */

.menu-content{
width:80%;
margin:auto;
text-align:left;
}

/* Menu links */

.mega-menu a{
display:inline-block;
padding:1% 2%;
margin:1%;
text-decoration:none;
background:#6fe62b;
color:#002060;
font-weight:bold;
}

.mega-menu a:hover{
background:yellow;
color:red;
}

.mega-column{
flex:1;
padding:1% 1%;
float:left;
word-wrap: break-word;
}

.mega-column h3{
border-bottom:2px solid #eee;
padding-bottom:10px;
}


.mega-column a{
display:block;
color:#333;
padding:6px 0;
text-decoration: none;
}

.mega-column a:hover{
font-weight: bold;
background:yellow;
color:red;
}

/* =========================
   TOP SECTION (Plan Boxes)
========================= */

.top {
  width: 100%;
  background: linear-gradient(90deg, rgb(255, 217, 0), orangered 60%, orange);
  height: 20vh;
  position: relative;
}

.hl {
  display: flex;
  width: 100%;
  height: 25%;
  justify-content: center;
  align-items: center;
  font-family: verdana, sans-serif;
  font-size: 200%;
}

.pln {
  width: 19.5%;
  height: 68%;
  display: flex;
  border: 2px solid aqua;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 130%;
  color: black;
  justify-content: center;
  align-items: center;
  margin: 0.5% 0 0 0.5%;
  float: left;
}

.tpb {

  width: 15.5%;
  height: 85%;
  display: flex;
  border: 2px solid aqua;
  border-radius: 8px;
  font-family: arial, sans-serif;
  font-size: 68%;
  color: black;
  align-items: center; 
  margin: 0.75% 0 0 0.9%;
padding: 2%;
  float: right;
}


.pdg {
  padding-left: 1%;
}

/* =========================
   PAGE TITLE / ADDRESS BOX
========================= */

.pgttl {
  width: 100%;
  padding: 1%;
  background: linear-gradient(90deg, rgb(255, 217, 0), orangered 60%, orange);
  color: aqua;
  font-size: 180%;
}

.pby,
.addr {
  background: linear-gradient(90deg, rgb(255, 217, 0), orangered 60%, orange);
  width: 25%;
  margin: 2% 0 0 0.5%;
  padding: 1.5% 0 1.5% 1%;
  border: 2px solid aqua;
  border-radius: 8px;
  color: blue;
  line-height: 1;
}

/* =========================
   KOTAK STATS SECTION
========================= */

.bc {
  padding: 10px;
}

.section {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
}

/* Left image */
.left img {
  width: 300px;
  border-radius: 20px;
}

/* Right content */
.right h1 {
  font-size: 36px;
  margin-bottom: 15px;
}

.right p {
  color: #555;
  line-height: 1.5;
  margin-bottom: 30px;
  max-width: 600px;
}

/* Stats row */
.stats {
  display: flex;
  gap: 40px;
}

.stat {
  text-align: center;

}

.stat h2 {
  font-size: 22px;
  color: #000;
  margin: 5px 0;
}

.stat small {
  color: #666;
  font-size: 14px;
}

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

/* Mobile */
@media (max-width: 768px) {

  .section {
    flex-direction: column;
    text-align: center;
  }

  .stats {
    flex-direction: column;
    gap: 20px;
  }

  .pln {
    width: 100%;
    margin: 10px 0;
  }

  [class*="col-"] {
    width: 100%;
  }
}

/* Tablet */
@media (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

/* Desktop */
@media (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

@media only screen and (max-width: 1366px) {

.ppay {
 position: absolute;
 margin: 18% 1% 0 6%;
 align-items: left;
}

.ben {
 position: absolute;
 margin: 55% 2% 0 6%;
 align-items: center;
 }

.a-btn{
    height:3.5vh;
    width: 40%;
    font-size:110%;
    border:none;
    border-radius:8%;
    text-align:center;
    color: yellow;
    background:red;
}

.polpara {
position: absolute;
font-family: arial 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 75%;
text-align: justify;
margin: 10% 3% 0 6%;
}

.hanging-indent {
    padding-left: 2em;   /* Indents the entire block by 2em */
    text-indent: -2em;  /* Pulls the first line back by the same 2em negative value */
}

.ppay {
 position: absolute;
 margin: 14% 1% 0 6%;
}

.eage {
  width: 17%;
  border: 2px solid blue;
  border-radius: 3%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 65%;
  padding: 1em 0.5em 1em 5.5em;
  text-indent: -5em;
  margin: 0 0 1% 0.25%;
  text-align: left;
  float: left;
}
.mage {
  width: 19%;
}

.ppr {
  width: 31.3%;
  padding-left: 9em;
  text-indent: -8.5em;
}

.ppm {
  width: 32.5%;
  padding-left: 6em;
  clear: left;
}

.prep {
  width: 18%;
  border: 2px solid blue;
  border-radius: 3%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 70%;
  padding: 1em 0.5em 1em 1em;
  margin: 0 0 1% 0.25%;
  text-align: left;
  float: left;
}

.ben {
 position: absolute;
 margin: 37% 2% 0 6%;
 align-items: center;
 }

.wb {
  padding: 1em 0.5em 1em 1em;
  text-indent: 0;
  font-size: 75%;
}

.hlth {
  width: 30%;
}

.wbap {
  width: 55.25%;
}

.wf {
  width: 14%;
}

.tpoo {
  width:100%;
  font-size: 75%;
}

.pdb {
  width: 50.2%;
}

.adb {
  width: 35%;
}
.pcal {
  width: 48%;
  padding: 0.25em 1em 0.25em 0.5em;
  text-indent: 0;
}


table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  text-align: center;
}

th, td {
  font-size: 90%;
  width: 1%;
  border: 1px solid #000;
  padding: 0.25%;
}

th {
  background-color: #e6e6e6;
}

.brch {
  position:absolute;
  margin: 96% 0 0 6%;
  font-size: 150%;
}

.a-btn{
    height:5vh;
    width: 20%;
    font-size:100%;
    border:2px solid;
    border-radius:5%;
    text-align:center;
    color: aqua;
    background:red;
}
}

@media only screen and (max-width:412px){

/* GLOBAL RESET */

*{
box-sizing:border-box;
}

/* HEADER */

.hddr{
width:100%;
float:none;
display:block;
text-align:center;
padding:3% 0;
height:auto;
}

/* TOP NAVIGATION */

.top-nav{
width:100%;
float:none;
display:flex;
flex-direction:column;
align-items:center;
padding:3% 0;
height:auto;
}

.top-nav a{
display:block;
width:100%;
text-align:center;
padding:2% 0;
font-size:4vw;
}

/* MAIN MENU */

.dropdown{
width:100%;
float:none;
display:block;
text-align:center;
background:green;
border-bottom:1px solid #fff;
}

.dropbtn{
width:100%;
display:block;
padding:3% 0;
font-size:4vw;
}

/* MEGA MENU */

.mega-menu{
position:relative;
display:none;
width:100%;
background:#6fe62b;
box-shadow:none;
padding:2% 0;
}

.dropdown:hover .mega-menu{
display:block;
}

/* MENU CONTENT */

.menu-content{
width:100%;
margin:0;
padding:0;
}

/* MENU LINKS */

.mega-menu a{
display:block;
width:100%;
padding:3%;
margin:0;
border-bottom:1px solid #ddd;
font-size:3.8vw;
}

/* MEGA COLUMN */

.mega-column{
float:none;
width:100%;
padding:2%;
}

.plnh{
position:relative !important;
display:block;
width:94%;
margin:4% auto 2% auto !important;
font-size:5vw;
font-weight:bold;
line-height:1.3;
clear:both;
}

.polpara{
position:relative !important;
display:block;
width:94%;
margin:0 auto 4% auto !important;
font-size:4vw;
line-height:1.6;
text-align:justify;
clear:both;
}

/* PAGE CONTENT RESET */

.ppay,
.ben,
.brch{
position:relative !important;
width:95% !important;
margin:3% auto !important;
}

/* CONTENT BOXES */

.eage,
.prep,
.mage,
.ppr,
.ppm,
.hlth,
.wbap,
.wf,
.pdb,
.adb,
.pcal{
width:100% !important;
float:none !important;
clear:both !important;
padding:3% !important;
margin-bottom:3% !important;
text-indent:0 !important;
}

/* BOX DESIGN */

.eage,
.prep{
border:2px solid blue;
border-radius:6px;
font-size:3.8vw;
}

/* TEXT */

.polpara{
font-size:4vw;
line-height:1.5;
text-align:justify;
}

/* HEADING */

.brch{
font-size:5vw;
font-weight:bold;
}

/* TABLE */

table{
width:100%;
display:block;
overflow-x:auto;
border-collapse:collapse;
}

th,td{
border:1px solid black;
padding:2%;
font-size:3.5vw;
}

/* BUTTON */

.a-btn{
width:100%;
display:block;
padding:3%;
font-size:4vw;
border:none;
border-radius:6px;
background:red;
color:white;
margin-top:3%;
}

}

@media only screen and (max-width:430px){

/* GLOBAL RESET */
*{
box-sizing:border-box;
}

/* REMOVE DESKTOP POSITIONING */
.ppay,
.ben,
.plnh,
.polpara,
.brch{
position:static !important;
top:auto !important;
left:auto !important;
margin:4% auto !important;
width:94% !important;
}

/* HEADER */

.hddr{
width:100%;
height:auto;
display:block;
float:none;
text-align:center;
padding:4% 0;
}

/* TOP NAV */

.top-nav{
width:100%;
height:auto;
display:flex;
flex-direction:column;
align-items:center;
float:none;
padding:3% 0;
}

.top-nav a{
display:block;
width:100%;
text-align:center;
padding:3% 0;
font-size:4.5vw;
}

/* MENU */

.dropdown{
width:100%;
display:block;
float:none;
text-align:center;
background:green;
border-bottom:1px solid #fff;
}

.dropbtn{
display:block;
width:100%;
padding:3.5% 0;
font-size:4.5vw;
}

/* MEGA MENU */

.mega-menu{
position:static !important;
display:none;
width:100%;
background:#6fe62b;
box-shadow:none;
padding:2% 0;
}

.dropdown:hover .mega-menu{
display:block;
}

/* MENU LINKS */

.mega-menu a{
display:block;
width:100%;
padding:3.5%;
margin:0;
border-bottom:1px solid #ddd;
font-size:4vw;
}

/* PAGE TITLE */

.plnh{
font-size:5.5vw;
font-weight:bold;
line-height:1.3;
}

/* PARAGRAPH */

.polpara{
font-size:4.3vw;
line-height:1.6;
text-align:justify;
}

/* CONTENT BOXES */

.eage,
.prep,
.mage,
.ppr,
.ppm,
.hlth,
.wbap,
.wf,
.pdb,
.adb,
.pcal{
width:100% !important;
float:none !important;
clear:both !important;
padding:3% !important;
margin-bottom:4% !important;
text-indent:0 !important;
}

/* BOX DESIGN */

.eage,
.prep{
border:2px solid blue;
border-radius:6px;
font-size:4vw;
}

/* SECTION HEADING */

.brch{
font-size:5vw;
font-weight:bold;
}

/* TABLE */

table{
width:100%;
display:block;
overflow-x:auto;
border-collapse:collapse;
}

th,td{
border:1px solid black;
padding:2.5%;
font-size:3.8vw;
}

/* BUTTON */

.a-btn{
display:block;
width:100%;
padding:3.5%;
font-size:4.5vw;
border:none;
border-radius:6px;
background:red;
color:white;
margin-top:4%;
}

}