/*==================================================
MEDORBIT RESPONSIVE CSS
Version: 1.0
Purpose:
Global responsive behaviour for all MedOrbit pages
==================================================*/


/*==================================================
GLOBAL RESPONSIVE SAFETY
==================================================*/

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  min-width:320px;
}

img,
video,
iframe,
canvas,
svg{
  max-width:100%;
  height:auto;
}

table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
}

input,
select,
textarea,
button{
  max-width:100%;
}

pre,
code{
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

a,
p,
span,
strong,
small,
label,
li,
h1,
h2,
h3,
h4,
h5,
h6{
  overflow-wrap:anywhere;
}

.container{
  width:min(
    calc(100% - 32px),
    var(--container)
  );
  margin-inline:auto;
}

main,
section,
article,
aside,
header,
footer,
nav,
div{
  min-width:0;
}


/*==================================================
LARGE DESKTOP
1600PX AND ABOVE
==================================================*/

@media (min-width:1600px){

  :root{
    --container:1480px;
  }

  body{
    font-size:1.04rem;
  }

  main > section{
    padding-block:110px;
  }

  .header-wrapper{
    min-height:88px;
  }

  .main-navigation > a,
  .navigation-dropdown-button{
    padding-inline:15px;
    font-size:.88rem;
  }

  .hero-layout{
    gap:96px;
  }

  .hero-content h1{
    max-width:850px;
  }

  .hero-description{
    max-width:760px;
  }

  .popular-course-grid,
  .job-sector-grid{
    gap:26px;
  }

}


/*==================================================
STANDARD DESKTOP
1200PX TO 1599PX
==================================================*/

@media (min-width:1200px) and (max-width:1599px){

  :root{
    --container:1320px;
  }

  main > section{
    padding-block:90px;
  }

  .hero-layout{
    gap:70px;
  }

}


/*==================================================
SMALL LAPTOP
1024PX TO 1199PX
==================================================*/

@media (min-width:1024px) and (max-width:1199px){

  :root{
    --container:1120px;
  }

  .container{
    width:min(
      calc(100% - 28px),
      var(--container)
    );
  }

  main > section{
    padding-block:78px;
  }

  .header-wrapper{
    gap:18px;
  }

  .brand-logo-content small{
    font-size:.56rem;
  }

  .main-navigation{
    gap:2px;
  }

  .main-navigation > a,
  .navigation-dropdown-button{
    padding:9px 9px;
    font-size:.74rem;
  }

  .main-navigation .navigation-cta{
    padding-inline:14px;
  }

  .hero-layout{
    grid-template-columns:
      minmax(0,1fr)
      minmax(330px,.82fr);

    gap:42px;
  }

  .hero-content h1{
    font-size:clamp(2.7rem,5vw,4.2rem);
  }

  .pathway-grid,
  .education-overview-layout,
  .study-abroad-layout,
  .career-overview-layout,
  .employer-services-layout{
    gap:36px;
  }

  .popular-course-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .job-sector-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .latest-job-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/*==================================================
TABLET LANDSCAPE
900PX TO 1023PX
==================================================*/

@media (min-width:900px) and (max-width:1023px){

  :root{
    --container:960px;
  }

  .container{
    width:min(
      calc(100% - 26px),
      var(--container)
    );
  }

  main > section{
    padding-block:72px;
  }

  .top-information-wrapper{
    min-height:36px;
  }

  .top-information-wrapper p{
    font-size:.67rem;
  }

  .top-information-links a{
    font-size:.65rem;
  }

  .header-wrapper{
    min-height:76px;
    gap:14px;
  }

  .brand-logo-mark{
    width:46px;
    height:46px;
  }

  .brand-logo-content strong{
    font-size:1.08rem;
  }

  .brand-logo-content small{
    font-size:.53rem;
  }

  .main-navigation > a,
  .navigation-dropdown-button{
    padding:8px 8px;
    font-size:.69rem;
  }

  .main-navigation .navigation-cta{
    padding-inline:12px;
    margin-left:2px;
  }

  .hero-layout{
    grid-template-columns:
      minmax(0,1fr)
      minmax(315px,.85fr);

    gap:30px;
  }

  .hero-guidance-card{
    padding:23px;
  }

  .hero-mini-statistics{
    gap:8px;
  }

  .trust-strip-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .pathway-grid{
    gap:20px;
  }

  .pathway-card{
    padding:26px;
  }

  .education-overview-layout{
    grid-template-columns:
      minmax(0,.95fr)
      minmax(0,1.05fr);

    gap:34px;
  }

  .education-overview-visual,
  .study-abroad-visual{
    min-height:455px;
  }

  .study-india-layout{
    grid-template-columns:
      minmax(0,1fr)
      minmax(280px,.72fr);

    gap:22px;
  }

  .popular-course-grid,
  .job-sector-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .latest-job-grid,
  .why-choose-grid,
  .journey-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/*==================================================
TABLET PORTRAIT
768PX TO 899PX
==================================================*/

@media (min-width:768px) and (max-width:899px){

  :root{
    --container:840px;
  }

  .container{
    width:min(
      calc(100% - 24px),
      var(--container)
    );
  }

  main > section{
    padding-block:68px;
  }

  .top-information-wrapper{
    gap:12px;
  }

  .top-information-wrapper p{
    font-size:.64rem;
  }

  .top-information-links{
    gap:3px;
  }

  .top-information-links a{
    padding:5px 7px;
    font-size:.61rem;
  }

  .menu-toggle{
    display:flex;
  }

  .main-navigation{
    position:fixed;
    z-index:1000;
    top:0;
    right:0;

    width:min(360px,88vw);
    height:100dvh;

    padding:
      92px 18px
      28px;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;

    overflow-y:auto;

    background:
      linear-gradient(
        145deg,
        #eadfe4,
        #dce9ed
      );

    box-shadow:
      -24px 0 60px rgba(35,27,41,.22);

    transform:translateX(110%);
    transition:transform .3s ease;
  }

  .main-navigation.active{
    transform:translateX(0);
  }

  .main-navigation > a,
  .navigation-dropdown-button{
    width:100%;
    min-height:48px;

    justify-content:space-between;

    padding:12px 14px;

    border:
      1px solid rgba(143,35,65,.11);
    border-radius:12px;

    background:
      rgba(232,221,225,.72);

    font-size:.78rem;
  }

  .main-navigation .navigation-cta{
    margin:4px 0 0;

    justify-content:center;

    color:#fff;
    background:
      linear-gradient(
        145deg,
        var(--primary),
        #65182f
      );
  }

  .navigation-dropdown{
    width:100%;
  }

  .navigation-dropdown-menu{
    position:static;

    width:100%;
    margin-top:5px;
    padding:7px;

    display:none;

    opacity:1;
    visibility:visible;

    transform:none;

    box-shadow:none;
  }

  .navigation-dropdown.open
  .navigation-dropdown-menu{
    display:grid;
  }

  .navigation-dropdown-menu::before{
    display:none;
  }

  .navigation-dropdown-menu a{
    padding:10px 11px;
  }

  .hero-layout{
    grid-template-columns:1fr;
    gap:36px;
  }

  .hero-content{
    max-width:760px;
  }

  .hero-guidance-card{
    width:min(100%,680px);
  }

  .trust-strip-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .pathway-grid,
  .education-overview-layout,
  .study-abroad-layout,
  .career-overview-layout,
  .employer-services-layout,
  .training-layout,
  .documents-layout,
  .faq-layout,
  .mobile-app-layout,
  .final-guidance-card{
    grid-template-columns:1fr;
  }

  .education-overview-visual,
  .study-abroad-visual,
  .employer-services-visual{
    order:2;
  }

  .education-overview-content,
  .study-abroad-content,
  .employer-services-content{
    order:1;
  }

  .study-india-layout{
    grid-template-columns:1fr;
  }

  .study-india-information-card{
    position:relative;
    top:auto;
  }

  .popular-course-grid,
  .job-sector-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .latest-job-grid,
  .why-choose-grid,
  .journey-card-grid,
  .institution-category-grid,
  .destination-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .platform-statistics-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/*==================================================
REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

}


/*==================================================
HIGH CONTRAST SUPPORT
==================================================*/

@media (prefers-contrast:more){

  .button,
  .card,
  .pathway-card,
  .popular-course-card,
  .job-sector-card,
  .latest-job-card,
  .why-choose-card,
  .journey-card{
    border-width:2px;
  }

}


/*==================================================
PRINT SUPPORT
==================================================*/

@media print{

  .top-information-bar,
  .site-header,
  .mobile-quick-actions,
  .menu-toggle,
  .button,
  .footer-update-form{
    display:none !important;
  }

  body{
    color:#000;
    background:#fff;
  }

  main > section{
    padding:20px 0;
    break-inside:avoid;
  }

  a{
    color:#000;
    text-decoration:none;
  }

}


/*==================================================
MOBILE DEVICES
320PX TO 767PX
==================================================*/

@media (max-width:767px){

  :root{
    --container:100%;
  }

  body{
    padding-bottom:74px;
  }

  .container{
    width:min(
      calc(100% - 20px),
      100%
    );
  }

  main > section{
    padding-block:56px;
  }

  .section-heading{
    margin-bottom:34px;
  }

  .section-heading h2{
    font-size:
      clamp(1.65rem,8vw,2.25rem);
  }

  .section-heading p{
    font-size:.86rem;
    line-height:1.65;
  }

  .section-kicker{
    margin-bottom:13px;
    padding:8px 12px;

    font-size:.63rem;
    letter-spacing:.09em;
  }


  /*================================================
  TOP INFORMATION BAR
  ================================================*/

  .top-information-bar{
    display:none;
  }


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

  .site-header{
    position:relative;
  }

  .header-wrapper{
    min-height:70px;
    gap:12px;
  }

  .brand-logo{
    gap:9px;
  }

  .brand-logo-mark{
    width:43px;
    height:43px;

    border-radius:13px;

    font-size:1.05rem;
  }

  .brand-logo-content strong{
    font-size:1rem;
  }

  .brand-logo-content small{
    margin-top:3px;

    font-size:.48rem;
    letter-spacing:.03em;
  }

  .menu-toggle{
    display:flex;

    width:43px;
    height:43px;

    flex-basis:43px;
  }


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

  .main-navigation{
    position:fixed;
    z-index:2000;
    top:0;
    right:0;

    width:min(350px,90vw);
    height:100dvh;

    padding:
      86px 14px
      28px;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;

    overflow-y:auto;
    overscroll-behavior:contain;

    background:
      radial-gradient(
        circle at 90% 8%,
        rgba(213,163,45,.15),
        transparent 24%
      ),
      linear-gradient(
        145deg,
        #eadde3,
        #dce9ed
      );

    box-shadow:
      -24px 0 60px rgba(35,27,41,.28);

    transform:translateX(110%);

    transition:
      transform .3s ease;
  }

  .main-navigation.active{
    transform:translateX(0);
  }

  .main-navigation > a,
  .navigation-dropdown-button{
    width:100%;
    min-height:47px;

    justify-content:space-between;

    padding:11px 13px;

    border:
      1px solid rgba(143,35,65,.11);
    border-radius:12px;

    color:#5f4c55;

    background:
      rgba(232,221,225,.78);

    font-size:.74rem;
  }

  .main-navigation > a.active{
    color:var(--primary);

    background:
      rgba(143,35,65,.11);
  }

  .main-navigation .navigation-cta{
    margin:5px 0 0;

    justify-content:center;

    color:#fff;

    background:
      linear-gradient(
        145deg,
        var(--primary),
        #64182f
      );
  }

  .navigation-dropdown{
    width:100%;
  }

  .navigation-dropdown-menu{
    position:static;

    width:100%;
    margin-top:5px;
    padding:7px;

    display:none;

    opacity:1;
    visibility:visible;

    transform:none;

    border-radius:12px;

    box-shadow:none;
  }

  .navigation-dropdown.open
  .navigation-dropdown-menu{
    display:grid;
  }

  .navigation-dropdown-menu::before{
    display:none;
  }

  .navigation-dropdown-menu a{
    padding:9px 10px;

    font-size:.68rem;
  }


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

  .hero-section{
    padding:
      54px
      0
      58px;
  }

  .hero-layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .hero-content{
    text-align:left;
  }

  .hero-badge{
    margin-bottom:16px;
    padding:8px 12px;

    font-size:.61rem;
  }

  .hero-badge-icon{
    width:21px;
    height:21px;
  }

  .hero-content h1{
    margin-bottom:16px;

    font-size:
      clamp(2.05rem,11vw,3.1rem);
    line-height:1.03;
    letter-spacing:-.05em;
  }

  .hero-description{
    font-size:.88rem;
    line-height:1.65;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;

    margin-top:24px;
  }

  .hero-actions .button{
    width:100%;
  }

  .hero-trust-list{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:8px;
    margin-top:22px;
  }

  .hero-trust-item{
    min-height:39px;
    padding:8px 9px;

    font-size:.62rem;
  }

  .hero-trust-icon{
    width:21px;
    height:21px;

    flex-basis:21px;
  }

  .hero-mini-statistics{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:7px;
    margin-top:18px;
  }

  .hero-mini-statistic{
    padding:11px 7px;

    border-radius:12px;
  }

  .hero-mini-statistic strong{
    font-size:.68rem;
  }

  .hero-mini-statistic span{
    font-size:.51rem;
  }

  .hero-guidance-card{
    padding:20px;

    border-radius:22px;
  }

  .guidance-card-header{
    margin-bottom:18px;
  }

  .guidance-card-header h2{
    font-size:1.45rem;
  }

  .guidance-card-header p{
    font-size:.72rem;
  }


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

  .button{
    min-height:49px;
    padding:0 20px;

    border-radius:14px;

    font-size:.78rem;
  }


  /*================================================
  FORMS
  ================================================*/

  .guidance-form{
    gap:11px;
  }

  .form-field label{
    margin-bottom:6px;

    font-size:.66rem;
  }

  .form-field input,
  .form-field select,
  .form-field textarea{
    min-height:47px;
    padding:11px 12px;

    border-radius:12px;

    font-size:.78rem;
  }

  .form-field textarea{
    min-height:105px;
  }

  .form-consent{
    padding:10px;

    border-radius:11px;
  }

  .form-consent label{
    font-size:.61rem;
  }


  /*================================================
  TRUST STRIP
  ================================================*/

  .trust-strip-section{
    padding:20px 0;
  }

  .trust-strip-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:9px;
  }

  .trust-strip-card{
    grid-template-columns:1fr;
    align-items:start;

    padding:13px;

    border-radius:15px;

    text-align:left;
  }

  .trust-strip-icon{
    width:42px;
    height:42px;

    font-size:1.1rem;
  }

  .trust-strip-card strong{
    font-size:.72rem;
  }

  .trust-strip-card p{
    font-size:.58rem;
  }


  /*================================================
  PATHWAYS
  ================================================*/

  .pathway-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .pathway-card{
    padding:21px;

    border-radius:22px;
  }

  .pathway-card-top{
    margin-bottom:18px;
  }

  .pathway-card-icon{
    width:58px;
    height:58px;

    border-radius:17px;

    font-size:1.55rem;
  }

  .pathway-card-badge{
    padding:7px 10px;

    font-size:.53rem;
  }

  .pathway-card h3{
    font-size:1.45rem;
  }

  .pathway-card > p{
    font-size:.75rem;
  }

  .pathway-feature-grid{
    grid-template-columns:1fr;

    gap:8px;
    margin-top:19px;
  }

  .pathway-feature-item{
    padding:10px;

    font-size:.65rem;
  }

  .pathway-card-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;

    margin-top:21px;
  }


  /*================================================
  EDUCATION OVERVIEW
  ================================================*/

  .education-overview-layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .education-overview-visual{
    min-height:410px;
    order:2;
  }

  .education-overview-content{
    order:1;
  }

  .education-visual-main-card{
    width:calc(100% - 20px);
    min-height:275px;
    padding:24px;

    border-radius:25px;
  }

  .education-visual-main-card::before{
    top:22px;
    right:20px;

    font-size:4.8rem;
  }

  .education-floating-card{
    min-width:165px;
    padding:11px;

    border-radius:14px;
  }

  .education-floating-card > span{
    width:39px;
    height:39px;

    border-radius:12px;
  }

  .education-floating-card strong{
    font-size:.66rem;
  }

  .education-floating-card small{
    font-size:.51rem;
  }

  .education-floating-card-one{
    top:18px;
    left:0;
  }

  .education-floating-card-two{
    top:110px;
    right:0;
  }

  .education-floating-card-three{
    right:8px;
    bottom:8px;
  }

  .education-overview-content > h2{
    font-size:
      clamp(1.75rem,8.5vw,2.4rem);
  }

  .education-overview-content > p{
    font-size:.8rem;
  }

  .education-service-list{
    gap:10px;
    margin:21px 0;
  }

  .education-service-item{
    gap:12px;
    padding:14px;

    border-radius:15px;
  }

  .education-service-number{
    width:42px;
    height:42px;

    border-radius:13px;
  }

  .education-service-item h3{
    font-size:.85rem;
  }

  .education-service-item p{
    font-size:.64rem;
  }


  /*================================================
  STUDY INDIA
  ================================================*/

  .study-india-layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  .study-india-highlight-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .study-india-highlight-card{
    min-height:225px;
    padding:16px;

    border-radius:18px;
  }

  .highlight-card-icon{
    width:52px;
    height:52px;
    margin-bottom:14px;

    border-radius:15px;

    font-size:1.4rem;
  }

  .study-india-highlight-card h3{
    font-size:.9rem;
  }

  .study-india-highlight-card p{
    font-size:.63rem;
  }

  .study-india-highlight-card a{
    font-size:.62rem;
  }

  .study-india-information-card{
    position:relative;
    top:auto;

    padding:20px;

    border-radius:21px;
  }


  /*================================================
  STUDY ABROAD
  ================================================*/

  .study-abroad-layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .study-abroad-content{
    order:1;
  }

  .study-abroad-visual{
    min-height:430px;
    order:2;
  }

  .study-abroad-feature-grid{
    grid-template-columns:1fr;

    gap:9px;
    margin-top:21px;
  }

  .study-abroad-feature{
    padding:13px;

    border-radius:14px;
  }

  .study-abroad-feature-icon{
    width:42px;
    height:42px;

    font-size:1.1rem;
  }

  .study-abroad-feature h3{
    font-size:.82rem;
  }

  .study-abroad-feature p{
    font-size:.61rem;
  }

  .study-abroad-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .abroad-main-card{
    width:calc(100% - 20px);
    min-height:285px;
    padding:24px;

    border-radius:25px;
  }

  .abroad-main-icon{
    width:58px;
    height:58px;

    border-radius:17px;

    font-size:1.55rem;
  }

  .abroad-destination-card{
    min-width:130px;
    padding:10px 12px;

    border-radius:13px;

    font-size:.64rem;
  }

  .destination-card-one{
    top:20px;
    left:0;
  }

  .destination-card-two{
    top:105px;
    right:0;
  }

  .destination-card-three{
    bottom:60px;
    left:0;
  }

  .destination-card-four{
    right:6px;
    bottom:5px;
  }


  /*================================================
  POPULAR COURSES
  ================================================*/

  .popular-course-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .popular-course-card{
    min-height:235px;
    padding:16px;

    border-radius:18px;
  }

  .popular-course-icon{
    width:52px;
    height:52px;
    margin-bottom:14px;

    border-radius:15px;

    font-size:1.4rem;
  }

  .popular-course-card h3{
    font-size:.9rem;
  }

  .popular-course-card p{
    font-size:.62rem;
  }

  .popular-course-card a{
    font-size:.61rem;
  }

  .section-button-wrapper{
    margin-top:25px;
  }

}


/*==================================================
SMALL MOBILE
320PX TO 389PX
==================================================*/

@media (max-width:389px){

  .container{
    width:min(
      calc(100% - 16px),
      100%
    );
  }

  .brand-logo-content small{
    display:none;
  }

  .hero-trust-list,
  .study-india-highlight-grid,
  .popular-course-grid{
    grid-template-columns:1fr;
  }

  .hero-mini-statistics{
    grid-template-columns:1fr;
  }

  .hero-mini-statistic{
    text-align:left;
  }

  .education-overview-visual,
  .study-abroad-visual{
    min-height:455px;
  }

  .education-floating-card,
  .abroad-destination-card{
    min-width:145px;
  }

}

/*==================================================
TABLET AND MOBILE:
INSTITUTIONS, DESTINATIONS, PROCESSES, CAREERS
==================================================*/

@media (max-width:1023px){

  .institution-category-grid,
  .destination-grid,
  .admission-process-grid,
  .job-sector-grid,
  .latest-job-grid,
  .why-choose-grid,
  .journey-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .institution-search-banner,
  .documents-layout,
  .career-overview-layout,
  .training-layout,
  .employer-services-layout,
  .faq-layout,
  .mobile-app-layout,
  .final-guidance-card{
    grid-template-columns:1fr;
  }

  .employment-process-wrapper{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:16px;
  }

  .employment-process-arrow{
    display:none;
  }

  .platform-statistics-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .footer-top-layout,
  .footer-main-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/*==================================================
MOBILE: INSTITUTIONS
==================================================*/

@media (max-width:767px){

  .institution-category-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .institution-category-card{
    min-height:235px;
    padding:16px;

    border-radius:18px;
  }

  .institution-category-icon{
    width:52px;
    height:52px;
    margin-bottom:14px;

    border-radius:15px;

    font-size:1.4rem;
  }

  .institution-category-card h3{
    font-size:.9rem;
  }

  .institution-category-card p{
    font-size:.62rem;
    line-height:1.5;
  }

  .institution-category-card ul{
    gap:6px;
    margin-top:12px;
  }

  .institution-category-card li{
    font-size:.58rem;
  }

  .institution-category-card .text-link{
    margin-top:auto;

    font-size:.61rem;
  }

  .institution-search-banner{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;

    margin-top:24px;
    padding:20px;

    border-radius:20px;
  }

  .institution-search-banner h3{
    font-size:1.25rem;
  }

  .institution-search-banner p{
    font-size:.68rem;
  }

  .institution-search-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }


  /*================================================
  DESTINATIONS
  ================================================*/

  .destination-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .destination-card{
    min-height:230px;
    padding:16px;

    border-radius:18px;
  }

  .destination-flag{
    width:54px;
    height:54px;
    margin-bottom:13px;

    border-radius:16px;

    font-size:1.5rem;
  }

  .destination-card h3{
    font-size:.9rem;
  }

  .destination-card p{
    font-size:.62rem;
    line-height:1.5;
  }

  .destination-card a{
    margin-top:auto;

    font-size:.61rem;
  }


  /*================================================
  ADMISSION PROCESS
  ================================================*/

  .admission-process-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .admission-process-card{
    min-height:220px;
    padding:16px;

    border-radius:18px;
  }

  .admission-process-number{
    font-size:.58rem;
  }

  .admission-process-icon{
    width:52px;
    height:52px;
    margin:13px 0;

    border-radius:15px;

    font-size:1.35rem;
  }

  .admission-process-card h3{
    font-size:.88rem;
  }

  .admission-process-card p{
    font-size:.61rem;
  }

  .admission-process-note{
    grid-template-columns:auto minmax(0,1fr);

    gap:10px;

    padding:14px;
    margin-top:20px;

    border-radius:14px;
  }

  .admission-process-note p{
    font-size:.62rem;
  }


  /*================================================
  DOCUMENTS
  ================================================*/

  .documents-layout{
    grid-template-columns:1fr;
    gap:22px;
  }

  .document-list-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:8px;
  }

  .document-list-item{
    min-height:48px;
    padding:10px;

    border-radius:12px;

    font-size:.61rem;
  }

  .document-checklist-card{
    padding:20px;

    border-radius:20px;
  }

  .document-checklist-header{
    grid-template-columns:auto minmax(0,1fr);

    gap:11px;
  }

  .document-checklist-icon{
    width:48px;
    height:48px;

    border-radius:14px;

    font-size:1.25rem;
  }

  .document-checklist-header h3{
    font-size:1.05rem;
  }

  .document-checklist-step{
    padding:11px;

    border-radius:12px;

    font-size:.63rem;
  }


  /*================================================
  CAREER OVERVIEW
  ================================================*/

  .career-overview-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .career-overview-features{
    grid-template-columns:1fr;

    gap:9px;
  }

  .career-overview-feature{
    padding:13px;

    border-radius:14px;
  }

  .career-feature-icon{
    width:44px;
    height:44px;

    border-radius:13px;

    font-size:1.15rem;
  }

  .career-overview-feature h3{
    font-size:.82rem;
  }

  .career-overview-feature p{
    font-size:.61rem;
  }

  .career-overview-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .career-profile-card{
    padding:20px;

    border-radius:21px;
  }

  .career-profile-card-header{
    gap:11px;
  }

  .career-profile-card-icon{
    width:50px;
    height:50px;

    border-radius:15px;

    font-size:1.35rem;
  }

  .career-profile-card-header h3{
    font-size:1.1rem;
  }

  .career-qualification-list{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:8px;
  }

  .career-qualification-item{
    padding:11px;

    border-radius:12px;
  }

  .career-qualification-item strong{
    font-size:.7rem;
  }

  .career-qualification-item span{
    font-size:.53rem;
  }


  /*================================================
  JOB SECTORS
  ================================================*/

  .job-sector-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .job-sector-card{
    min-height:240px;
    padding:16px;

    border-radius:18px;
  }

  .job-sector-icon{
    width:52px;
    height:52px;
    margin-bottom:14px;

    border-radius:15px;

    font-size:1.4rem;
  }

  .job-sector-card h3{
    font-size:.88rem;
  }

  .job-sector-card p{
    font-size:.61rem;
    line-height:1.5;
  }

  .job-sector-tag{
    margin-top:auto;
    padding:6px 8px;

    font-size:.5rem;
  }

  .job-sector-card a{
    margin-top:auto;

    font-size:.6rem;
  }


  /*================================================
  LATEST JOBS
  ================================================*/

  .latest-job-grid{
    grid-template-columns:1fr;

    gap:12px;
  }

  .latest-job-card{
    min-height:auto;
    padding:18px;

    border-radius:19px;
  }

  .latest-job-header{
    gap:10px;
  }

  .latest-job-icon{
    width:50px;
    height:50px;

    border-radius:15px;

    font-size:1.3rem;
  }

  .latest-job-status{
    padding:6px 9px;

    font-size:.51rem;
  }

  .latest-job-card h3{
    font-size:1rem;
  }

  .latest-job-company{
    font-size:.62rem;
  }

  .latest-job-details{
    gap:6px;
  }

  .latest-job-details span{
    padding:7px 8px;

    border-radius:9px;

    font-size:.55rem;
  }

  .latest-job-card > p{
    font-size:.66rem;
  }

  .latest-job-card a{
    font-size:.63rem;
  }

  .latest-jobs-note{
    grid-template-columns:1fr;

    gap:8px;

    padding:14px;

    border-radius:14px;
  }

  .latest-jobs-note span{
    width:max-content;
  }

  .latest-jobs-note p{
    font-size:.61rem;
  }


  /*================================================
  EMPLOYMENT PROCESS
  ================================================*/

  .employment-process-wrapper{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .employment-process-step{
    min-height:220px;
    padding:16px;

    border-radius:18px;
  }

  .employment-step-number{
    font-size:.55rem;
  }

  .employment-step-icon{
    width:50px;
    height:50px;
    margin:12px 0;

    border-radius:15px;

    font-size:1.3rem;
  }

  .employment-process-step h3{
    font-size:.86rem;
  }

  .employment-process-step p{
    font-size:.6rem;
  }

  .employment-process-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;

    margin-top:23px;
  }


  /*================================================
  TRAINING AND INTERVIEW
  ================================================*/

  .training-layout{
    grid-template-columns:1fr;
    gap:22px;
  }

  .training-feature-list{
    gap:9px;
  }

  .training-feature-item{
    padding:13px;

    border-radius:14px;
  }

  .training-feature-icon{
    width:43px;
    height:43px;

    border-radius:13px;

    font-size:1.12rem;
  }

  .training-feature-item h3{
    font-size:.8rem;
  }

  .training-feature-item p{
    font-size:.6rem;
  }

  .interview-checklist-card{
    padding:20px;

    border-radius:20px;
  }

  .interview-checklist-card h3{
    font-size:1.15rem;
  }

  .interview-checklist-item{
    gap:9px;

    padding:10px;

    border-radius:11px;
  }

  .interview-checklist-item p{
    font-size:.61rem;
  }


  /*================================================
  EMPLOYER SERVICES
  ================================================*/

  .employer-services-layout{
    grid-template-columns:1fr;
    gap:26px;
  }

  .employer-services-visual{
    min-height:390px;
    order:2;
  }

  .employer-services-content{
    order:1;
  }

  .employer-visual-card{
    width:calc(100% - 20px);
    min-height:280px;
    padding:22px;

    border-radius:24px;
  }

  .employer-visual-icon{
    width:58px;
    height:58px;

    border-radius:17px;

    font-size:1.5rem;
  }

  .employer-small-card{
    min-width:145px;
    padding:11px;

    border-radius:13px;
  }

  .employer-small-card strong{
    font-size:.65rem;
  }

  .employer-small-card span{
    font-size:.51rem;
  }

  .employer-service-grid{
    grid-template-columns:1fr;

    gap:9px;
  }

  .employer-service-item{
    padding:13px;

    border-radius:14px;
  }

  .employer-service-item > span{
    width:42px;
    height:42px;

    border-radius:13px;

    font-size:.62rem;
  }

  .employer-service-item h3{
    font-size:.82rem;
  }

  .employer-service-item p{
    font-size:.61rem;
  }

  .employer-services-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

}


/*==================================================
EXTRA SMALL MOBILE
==================================================*/

@media (max-width:389px){

  .institution-category-grid,
  .destination-grid,
  .admission-process-grid,
  .document-list-grid,
  .career-qualification-list,
  .job-sector-grid,
  .employment-process-wrapper{
    grid-template-columns:1fr;
  }

  .institution-category-card,
  .destination-card,
  .admission-process-card,
  .job-sector-card,
  .employment-process-step{
    min-height:auto;
  }

}


/*==================================================
WHY CHOOSE, JOURNEYS, FAQ, APP, FOOTER
==================================================*/

@media (max-width:1023px){

  .why-choose-grid,
  .journey-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .counsellor-support-card{
    grid-template-columns:
      minmax(0,1fr)
      auto;
  }

  .faq-layout,
  .mobile-app-layout,
  .final-guidance-card{
    grid-template-columns:1fr;
  }

  .mobile-app-preview{
    order:2;
  }

  .mobile-app-content{
    order:1;
  }

}


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

@media (max-width:767px){

  /*================================================
  WHY CHOOSE
  ================================================*/

  .why-choose-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .why-choose-card{
    min-height:225px;
    padding:16px;

    border-radius:18px;
  }

  .why-choose-icon{
    width:52px;
    height:52px;
    margin-bottom:14px;

    border-radius:15px;

    font-size:1.35rem;
  }

  .why-choose-card h3{
    font-size:.88rem;
  }

  .why-choose-card p{
    font-size:.61rem;
    line-height:1.52;
  }


  /*================================================
  COUNSELLOR SUPPORT
  ================================================*/

  .counsellor-support-card{
    grid-template-columns:1fr;
    gap:20px;

    padding:22px;

    border-radius:22px;
  }

  .counsellor-support-content h2{
    font-size:
      clamp(1.55rem,8vw,2.15rem);
  }

  .counsellor-support-content p{
    font-size:.75rem;
  }

  .counsellor-support-tags{
    gap:7px;
  }

  .counsellor-support-tags span{
    padding:7px 9px;

    font-size:.54rem;
  }

  .counsellor-support-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }


  /*================================================
  JOURNEYS
  ================================================*/

  .journey-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .journey-card{
    min-height:235px;
    padding:16px;

    border-radius:18px;
  }

  .journey-card-top{
    grid-template-columns:
      auto minmax(0,1fr);

    gap:10px;
  }

  .journey-avatar{
    width:48px;
    height:48px;

    border-radius:14px;

    font-size:1.25rem;
  }

  .journey-type{
    font-size:.48rem;
  }

  .journey-card h3{
    font-size:.84rem;
  }

  .journey-card > p{
    font-size:.61rem;
    line-height:1.5;
  }

  .journey-tags{
    gap:5px;
  }

  .journey-tags span{
    padding:5px 7px;

    font-size:.48rem;
  }


  /*================================================
  PLATFORM STATISTICS
  ================================================*/

  .platform-statistics-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .platform-statistic-card{
    min-height:170px;
    padding:16px;

    border-radius:18px;
  }

  .platform-statistic-icon{
    width:50px;
    height:50px;
    margin-bottom:13px;

    border-radius:15px;

    font-size:1.3rem;
  }

  .platform-statistic-card strong{
    font-size:.84rem;
  }

  .platform-statistic-card p{
    font-size:.58rem;
  }


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

  .faq-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .faq-introduction{
    position:relative;
    top:auto;
  }

  .faq-support-card{
    padding:18px;

    border-radius:18px;
  }

  .faq-support-icon{
    width:50px;
    height:50px;

    border-radius:15px;

    font-size:1.25rem;
  }

  .faq-support-card h3{
    font-size:1rem;
  }

  .faq-support-card p{
    font-size:.65rem;
  }

  .faq-list{
    gap:9px;
  }

  .faq-item{
    border-radius:15px;
  }

  .faq-question{
    min-height:58px;
    padding:14px;

    gap:12px;

    font-size:.7rem;
    line-height:1.4;
  }

  .faq-toggle-icon{
    width:30px;
    height:30px;

    flex:0 0 30px;

    border-radius:10px;

    font-size:1rem;
  }

  .faq-answer{
    padding:
      0
      14px
      14px;
  }

  .faq-answer p{
    font-size:.63rem;
    line-height:1.58;
  }


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

  .mobile-app-layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .mobile-app-content{
    order:1;
  }

  .mobile-app-preview{
    order:2;

    min-height:520px;
  }

  .mobile-app-badge{
    padding:7px 10px;

    font-size:.52rem;
  }

  .mobile-app-content h2{
    font-size:
      clamp(1.75rem,8.5vw,2.45rem);
  }

  .mobile-app-content > p{
    font-size:.76rem;
  }

  .mobile-app-feature-grid{
    grid-template-columns:1fr;

    gap:9px;
  }

  .mobile-app-feature{
    padding:13px;

    border-radius:14px;
  }

  .mobile-app-feature > span{
    width:43px;
    height:43px;

    border-radius:13px;

    font-size:1.1rem;
  }

  .mobile-app-feature h3{
    font-size:.8rem;
  }

  .mobile-app-feature p{
    font-size:.59rem;
  }

  .mobile-app-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .app-store-placeholder-row{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:8px;
  }

  .app-store-placeholder{
    padding:11px;

    border-radius:13px;
  }

  .app-store-placeholder > span{
    font-size:1.1rem;
  }

  .app-store-placeholder small{
    font-size:.47rem;
  }

  .app-store-placeholder strong{
    font-size:.65rem;
  }

  .mobile-phone-frame{
    width:min(285px,82vw);
    padding:12px;

    border-radius:36px;
  }

  .mobile-phone-screen{
    min-height:485px;
    padding:18px 14px;

    border-radius:27px;
  }

  .app-preview-logo{
    width:42px;
    height:42px;

    border-radius:13px;
  }

  .app-preview-header strong{
    font-size:.78rem;
  }

  .app-preview-header small{
    font-size:.49rem;
  }

  .app-preview-greeting h3{
    font-size:1.08rem;
  }

  .app-preview-search{
    min-height:45px;
    padding:10px;

    border-radius:12px;
  }

  .app-preview-search p{
    font-size:.56rem;
  }

  .app-preview-choice-grid{
    gap:8px;
  }

  .app-preview-choice{
    min-height:85px;
    padding:10px;

    border-radius:14px;
  }

  .app-preview-choice span{
    font-size:1.25rem;
  }

  .app-preview-choice strong{
    font-size:.58rem;
  }

  .app-preview-notice{
    padding:11px;

    border-radius:13px;
  }

  .app-preview-notice strong{
    font-size:.65rem;
  }

  .app-preview-notice p{
    font-size:.5rem;
  }

  .app-preview-button{
    min-height:43px;

    border-radius:12px;

    font-size:.65rem;
  }


  /*================================================
  FINAL GUIDANCE FORM
  ================================================*/

  .final-guidance-card{
    grid-template-columns:1fr;
    gap:24px;

    padding:22px;

    border-radius:23px;
  }

  .final-guidance-content h2{
    font-size:
      clamp(1.65rem,8vw,2.3rem);
  }

  .final-guidance-content p{
    font-size:.75rem;
  }

  .final-guidance-points{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
  }

  .final-guidance-points span{
    font-size:.62rem;
  }

  .final-guidance-form{
    padding:18px;

    border-radius:18px;
  }

  .final-form-grid{
    grid-template-columns:1fr;
    gap:10px;
  }


  /*================================================
  IMPORTANT NOTICE
  ================================================*/

  .important-notice-card{
    grid-template-columns:
      auto minmax(0,1fr);

    gap:12px;

    padding:17px;

    border-radius:18px;
  }

  .important-notice-icon{
    width:46px;
    height:46px;

    border-radius:14px;

    font-size:1.2rem;
  }

  .important-notice-card h2{
    font-size:.92rem;
  }

  .important-notice-card p{
    font-size:.6rem;
    line-height:1.55;
  }


  /*================================================
  DISCLAIMER
  ================================================*/

  .legal-disclaimer-content{
    padding:20px;

    border-radius:19px;
  }

  .legal-disclaimer-content h2{
    font-size:1.08rem;
  }

  .legal-disclaimer-content p{
    font-size:.61rem;
    line-height:1.6;
  }


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

  .footer-top-section{
    padding:
      44px
      0
      28px;
  }

  .footer-top-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .footer-brand-column p{
    max-width:100%;

    font-size:.68rem;
  }

  .footer-service-badges{
    gap:6px;
  }

  .footer-service-badges span{
    padding:6px 8px;

    font-size:.5rem;
  }

  .footer-main-section{
    padding:
      26px
      0
      34px;
  }

  .footer-main-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:22px 14px;
  }

  .footer-link-column h3{
    margin-bottom:12px;

    font-size:.78rem;
  }

  .footer-link-column a{
    padding-block:5px;

    font-size:.61rem;
  }

  .footer-catalog-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:7px;
  }

  .footer-catalog-grid a{
    min-height:58px;
    padding:8px;

    border-radius:11px;

    font-size:.52rem;
  }

  .footer-bottom-wrapper{
    min-height:64px;

    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    gap:6px;

    padding:12px 0;

    text-align:center;
  }

  .footer-bottom-wrapper p{
    font-size:.55rem;
  }

  .footer-bottom-links{
    justify-content:center;
    gap:12px;
  }

  .footer-bottom-links a{
    font-size:.54rem;
  }


  /*================================================
  MOBILE QUICK ACTIONS
  ================================================*/

  .mobile-quick-actions{
    position:fixed;
    z-index:1900;
    right:0;
    bottom:0;
    left:0;

    min-height:68px;
    padding:
      7px
      max(8px,env(safe-area-inset-right))
      calc(7px + env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left));

    display:grid;
    grid-template-columns:
      repeat(5,minmax(0,1fr));

    align-items:end;
    gap:4px;

    border-top:
      1px solid rgba(143,35,65,.15);

    background:
      linear-gradient(
        145deg,
        rgba(235,222,228,.97),
        rgba(220,233,237,.97)
      );

    box-shadow:
      0 -14px 36px rgba(40,30,46,.17);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .mobile-quick-actions a{
    min-width:0;
    min-height:51px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;

    border-radius:12px;

    color:#66525b;

    font-size:1rem;
    font-weight:800;
  }

  .mobile-quick-actions a:hover,
  .mobile-quick-actions a.active{
    color:var(--primary);

    background:
      rgba(143,35,65,.08);
  }

  .mobile-quick-actions small{
    font-size:.49rem;
    line-height:1;
  }

  .mobile-quick-action-main{
    position:relative;

    top:-14px;

    width:58px;
    height:58px;
    min-height:58px !important;
    margin-inline:auto;

    border:
      4px solid #e5e2e5;
    border-radius:50% !important;

    color:#fff !important;

    background:
      linear-gradient(
        145deg,
        var(--primary),
        #64182f
      ) !important;

    box-shadow:
      0 14px 30px rgba(143,35,65,.30);
  }

  .mobile-quick-action-main > span{
    font-size:1.25rem;
    line-height:1;
  }

  .mobile-quick-action-main small{
    color:#fff;
  }

}


/*==================================================
EXTRA SMALL MOBILE
==================================================*/

@media (max-width:389px){

  .why-choose-grid,
  .journey-card-grid{
    grid-template-columns:1fr;
  }

  .why-choose-card,
  .journey-card{
    min-height:auto;
  }

  .platform-statistics-grid{
    grid-template-columns:1fr;
  }

  .platform-statistic-card{
    min-height:auto;
  }

  .app-store-placeholder-row{
    grid-template-columns:1fr;
  }

  .footer-main-grid{
    grid-template-columns:1fr;
  }

  .mobile-quick-actions small{
    font-size:.44rem;
  }

}


/*==================================================
TABLES AND DATA AREAS
==================================================*/

.table-wrapper,
.data-table-wrapper,
.dashboard-table-wrapper{
  width:100%;
  max-width:100%;

  overflow-x:auto;

  border:
    1px solid rgba(143,35,65,.12);
  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #e9dfe3,
      #dfeaed
    );

  -webkit-overflow-scrolling:touch;
}

.table-wrapper table,
.data-table-wrapper table,
.dashboard-table-wrapper table{
  min-width:760px;
}

@media (max-width:767px){

  .table-wrapper,
  .data-table-wrapper,
  .dashboard-table-wrapper{
    border-radius:14px;
  }

  .table-wrapper table,
  .data-table-wrapper table,
  .dashboard-table-wrapper table{
    min-width:680px;
  }

  table th,
  table td{
    padding:10px;

    font-size:.62rem;
  }

}


/*==================================================
SEARCH AND FILTER PANELS
==================================================*/

.search-filter-panel,
.filter-panel,
.catalogue-filter-panel,
.job-filter-panel,
.college-search-panel{
  width:100%;
  max-width:100%;
}

.search-filter-grid,
.filter-grid,
.catalogue-filter-grid,
.job-filter-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}

@media (max-width:1199px){

  .search-filter-grid,
  .filter-grid,
  .catalogue-filter-grid,
  .job-filter-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}

@media (max-width:899px){

  .search-filter-grid,
  .filter-grid,
  .catalogue-filter-grid,
  .job-filter-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media (max-width:767px){

  .search-filter-panel,
  .filter-panel,
  .catalogue-filter-panel,
  .job-filter-panel,
  .college-search-panel{
    padding:17px;

    border-radius:18px;
  }

  .search-filter-grid,
  .filter-grid,
  .catalogue-filter-grid,
  .job-filter-grid{
    grid-template-columns:1fr;

    gap:9px;
  }

  .search-filter-panel input,
  .search-filter-panel select,
  .filter-panel input,
  .filter-panel select,
  .catalogue-filter-panel input,
  .catalogue-filter-panel select,
  .job-filter-panel input,
  .job-filter-panel select{
    min-height:47px;

    font-size:.74rem;
  }

}


/*==================================================
MODALS AND DIALOGS
==================================================*/

.modal,
.dialog-overlay,
.login-modal,
.form-modal{
  padding:
    max(14px,env(safe-area-inset-top))
    max(14px,env(safe-area-inset-right))
    max(14px,env(safe-area-inset-bottom))
    max(14px,env(safe-area-inset-left));
}

.modal-dialog,
.dialog-card,
.login-modal-card,
.form-modal-card{
  width:min(760px,100%);
  max-height:
    calc(
      100dvh -
      28px
    );

  overflow-y:auto;
  overscroll-behavior:contain;
}

@media (max-width:767px){

  .modal,
  .dialog-overlay,
  .login-modal,
  .form-modal{
    align-items:flex-end;

    padding:8px;
  }

  .modal-dialog,
  .dialog-card,
  .login-modal-card,
  .form-modal-card{
    width:100%;
    max-height:
      calc(
        100dvh -
        16px
      );

    padding:20px;

    border-radius:
      22px
      22px
      16px
      16px;
  }

  .modal-header,
  .dialog-header{
    padding-right:44px;
  }

  .modal-close,
  .dialog-close{
    width:39px;
    height:39px;

    top:11px;
    right:11px;
  }

}


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

.dashboard-layout{
  display:grid;
  grid-template-columns:
    270px
    minmax(0,1fr);

  gap:24px;
}

.dashboard-sidebar{
  min-width:0;
}

.dashboard-content{
  min-width:0;
}

.dashboard-stat-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;
}

.dashboard-card-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;
}

@media (max-width:1199px){

  .dashboard-layout{
    grid-template-columns:
      230px
      minmax(0,1fr);
  }

  .dashboard-stat-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .dashboard-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media (max-width:899px){

  .dashboard-layout{
    grid-template-columns:1fr;
  }

  .dashboard-sidebar{
    position:relative;

    width:100%;
  }

  .dashboard-navigation{
    display:flex;

    overflow-x:auto;

    padding-bottom:6px;

    scrollbar-width:none;
  }

  .dashboard-navigation::-webkit-scrollbar{
    display:none;
  }

  .dashboard-navigation a{
    flex:0 0 auto;
  }

}

@media (max-width:767px){

  .dashboard-stat-grid,
  .dashboard-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:9px;
  }

  .dashboard-card,
  .dashboard-stat-card{
    padding:14px;

    border-radius:16px;
  }

  .dashboard-card h3,
  .dashboard-stat-card h3{
    font-size:.82rem;
  }

  .dashboard-card p,
  .dashboard-stat-card p{
    font-size:.58rem;
  }

}

@media (max-width:389px){

  .dashboard-stat-grid,
  .dashboard-card-grid{
    grid-template-columns:1fr;
  }

}


/*==================================================
LOGIN AND REGISTRATION PAGES
==================================================*/

.auth-layout{
  display:grid;
  grid-template-columns:
    minmax(0,.92fr)
    minmax(360px,.72fr);

  align-items:center;
  gap:50px;
}

.auth-card{
  width:100%;
  max-width:560px;
}

@media (max-width:899px){

  .auth-layout{
    grid-template-columns:1fr;
    gap:30px;
  }

  .auth-card{
    max-width:680px;
  }

}

@media (max-width:767px){

  .auth-layout{
    gap:22px;
  }

  .auth-card{
    padding:20px;

    border-radius:21px;
  }

  .auth-card h1,
  .auth-card h2{
    font-size:
      clamp(1.6rem,8vw,2.2rem);
  }

  .auth-form-grid{
    grid-template-columns:1fr;
  }

}


/*==================================================
MULTI-STEP FORMS
==================================================*/

.form-step-navigation{
  display:grid;
  grid-template-columns:
    repeat(7,minmax(0,1fr));

  gap:8px;
}

.multi-step-form-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:15px;
}

@media (max-width:899px){

  .form-step-navigation{
    display:flex;

    overflow-x:auto;

    padding-bottom:7px;

    scrollbar-width:none;
  }

  .form-step-navigation::-webkit-scrollbar{
    display:none;
  }

  .form-step-navigation > *{
    flex:0 0 120px;
  }

}

@media (max-width:767px){

  .multi-step-form-grid{
    grid-template-columns:1fr;

    gap:10px;
  }

  .form-step{
    padding:18px;

    border-radius:19px;
  }

  .form-actions{
    display:grid;
    grid-template-columns:1fr;

    gap:9px;
  }

  .form-actions-right{
    display:grid;
    grid-template-columns:1fr;

    gap:9px;
  }

}


/*==================================================
UPLOAD CARDS
==================================================*/

.document-upload-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}

@media (max-width:767px){

  .document-upload-grid{
    grid-template-columns:1fr;

    gap:9px;
  }

  .document-upload-card{
    padding:14px;

    border-radius:15px;
  }

  .document-upload-card label{
    min-height:130px;
  }

}


/*==================================================
TOAST NOTIFICATIONS
==================================================*/

.toast-container{
  position:fixed;
  z-index:9999;
  top:18px;
  right:18px;

  width:min(380px,calc(100% - 36px));

  display:grid;
  gap:10px;
}

@media (max-width:767px){

  .toast-container{
    top:auto;
    right:10px;
    bottom:
      calc(
        82px +
        env(safe-area-inset-bottom)
      );
    left:10px;

    width:auto;
  }

  .toast{
    padding:13px;

    border-radius:14px;

    font-size:.66rem;
  }

}


/*==================================================
PAGINATION
==================================================*/

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
}

@media (max-width:767px){

  .pagination{
    gap:5px;
  }

  .pagination button,
  .pagination a{
    min-width:37px;
    min-height:37px;
    padding:7px;

    border-radius:10px;

    font-size:.62rem;
  }

}


/*==================================================
BREADCRUMBS
==================================================*/

.breadcrumb-list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

@media (max-width:767px){

  .breadcrumb-list{
    gap:5px;
  }

  .breadcrumb-list a,
  .breadcrumb-list span{
    font-size:.57rem;
  }

}


/*==================================================
UTILITY RESPONSIVE CLASSES
==================================================*/

.desktop-only{
  display:block;
}

.mobile-only{
  display:none;
}

@media (max-width:767px){

  .desktop-only{
    display:none !important;
  }

  .mobile-only{
    display:block !important;
  }

  .mobile-full-width{
    width:100% !important;
  }

  .mobile-text-center{
    text-align:center !important;
  }

  .mobile-grid-one{
    grid-template-columns:1fr !important;
  }

  .mobile-order-first{
    order:-1 !important;
  }

  .mobile-order-last{
    order:99 !important;
  }

}


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

@media
(max-width:899px)
and
(orientation:landscape){

  body{
    padding-bottom:0;
  }

  .mobile-quick-actions{
    display:none;
  }

  .hero-section{
    padding-block:45px;
  }

  .main-navigation{
    width:min(390px,70vw);
  }

  .mobile-app-preview{
    min-height:460px;
  }

}


/*==================================================
SAFE AREA SUPPORT
==================================================*/

@supports
(padding:max(0px)){

  .site-header{
    padding-left:
      env(safe-area-inset-left);
    padding-right:
      env(safe-area-inset-right);
  }

  .main-navigation{
    padding-right:
      max(
        14px,
        env(safe-area-inset-right)
      );
  }

}


/*==================================================
FINAL OVERFLOW FIXES
==================================================*/

.hero-layout,
.pathway-grid,
.education-overview-layout,
.study-india-layout,
.study-abroad-layout,
.popular-course-grid,
.institution-category-grid,
.destination-grid,
.admission-process-grid,
.documents-layout,
.career-overview-layout,
.job-sector-grid,
.latest-job-grid,
.employment-process-wrapper,
.training-layout,
.employer-services-layout,
.why-choose-grid,
.journey-card-grid,
.platform-statistics-grid,
.faq-layout,
.mobile-app-layout,
.final-guidance-card,
.footer-top-layout,
.footer-main-grid{
  max-width:100%;
}

.hero-content,
.hero-guidance-card,
.pathway-card,
.education-overview-content,
.education-overview-visual,
.study-india-content,
.study-india-information-card,
.study-abroad-content,
.study-abroad-visual,
.popular-course-card,
.institution-category-card,
.destination-card,
.admission-process-card,
.documents-content,
.document-checklist-card,
.career-overview-content,
.career-profile-card,
.job-sector-card,
.latest-job-card,
.training-content,
.interview-checklist-card,
.employer-services-content,
.employer-services-visual,
.why-choose-card,
.journey-card,
.faq-introduction,
.faq-list,
.mobile-app-content,
.mobile-app-preview,
.final-guidance-content,
.final-guidance-form{
  min-width:0;
  max-width:100%;
}


/*==================================================
FINAL SMALL-SCREEN FIX
==================================================*/

@media (max-width:340px){

  body{
    min-width:280px;
  }

  .container{
    width:
      calc(
        100% -
        12px
      );
  }

  .brand-logo-mark{
    width:40px;
    height:40px;
  }

  .menu-toggle{
    width:40px;
    height:40px;

    flex-basis:40px;
  }

  .hero-content h1{
    font-size:1.9rem;
  }

  .mobile-quick-actions a{
    font-size:.9rem;
  }
/*==================================================
FINAL RESPONSIVE SAFETY PATCH
==================================================*/

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

img,
video,
iframe,
canvas,
svg{
  max-width:100%;
}

img,
video{
  object-fit:cover;
}

button,
input,
select,
textarea{
  min-width:0;
}

.grid,
[class*="-grid"],
[class*="-layout"]{
  min-width:0;
}

@media(max-width:767px){

  h1,
  h2,
  h3,
  h4,
  h5,
  h6{
    word-break:normal;
    overflow-wrap:normal;
    hyphens:none;
  }

  .button,
  .btn{
    white-space:normal;
  }

  .mobile-quick-actions{
    padding-bottom:
      calc(
        7px +
        env(safe-area-inset-bottom)
      );
  }

}