/* ==========================================================
   MYJAT Layout System
========================================================== */


.myjat-hero {
   border-radius: var(--myjat-radius-1);
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   align-items: center;
   gap: 100px;
   min-height: 90vh;
   position: relative;
   z-index: 2;
}


.myjat-hero h1 {
   font-size: clamp(56px, 6vw, 84px);
   line-height: 1.20;
   font-weight: 1200;
   letter-spacing: -2px;
   margin: 15px;
   padding-inline: 15px;
   max-width: 720px;
}

.myjat-hero-left {
   position: relative;
   width: 100%;
   padding: 40px 20px 50px;
   border-radius: var(--myjat-radius-1);
   box-sizing: border-box;
}

.myjat-badge {


   align-self: center;
   padding: 5px 4px 1px 4px;



   border-radius: var(--myjat-radius-1);
   background: whitesmoke;


   font-size: 24px;
   font-weight: 800;
   margin-top: 25px;
   margin-bottom: 40px;
}



.home-para {
   font-size: 25px;
   text-align: justify;
   padding-inline: 15px;

   text-justify: inter-word;


}

.feature-para {
   font-size: 20px;
   text-align: justify;
   text-justify: inter-word;


}

/*==================================================
Buttons
==================================================*/
.myjat-buttons-box {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   gap: 15px;
   flex-wrap: wrap;
   margin-top: 30px;
   margin-bottom: 30px;

}


/* ==========================================================
   Statistics
==========================================================*/
.myjat-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 24px;
   margin-bottom: 30px;

}

.myjat-stat {
   border: 1px solid rgba(255, 255, 255, .8);
   border-radius: var(--myjat-radius-1);
   padding: 24px;
   text-align: center;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}



/*==========================================
Features Section
==========================================*/
.myjat-features {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   margin-top: 50px;

   margin-bottom: 50px;
}

.myjat-feature-card {
   position: relative;
   overflow: hidden;
   padding: 42px;
   border-radius: var(--myjat-radius-1);


}

.myjat-feature-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.myjat-feature-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 72px;
   height: 72px;
   border-radius: var(--myjat-radius-1);
   background: linear-gradient(135deg, white, #FFB35E);
   color: #fff;
   font-size: 28px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
   margin-bottom: 24px;
}