@media (max-width: 768px) {

   /* ===navbar== */
   /* .menu {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: #444;
      

     flex-direction: column;
     align-items: center;
     gap: 15px;

     overflow: hidden;
     max-height: 0;
     transition: max-height 0.35s ease;

     z-index: 1000;
   } */
   .menu {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: linear-gradient(90deg, rgb(11 44 77 / 37%) 0%, rgb(91 163 237 / 41%) 20%, rgb(64 112 159 / 40%) 40%, rgb(124 163 201 / 41%) 60%, rgb(35 118 201 / 44%) 80%, rgb(11 44 77 / 46%) 100%);

     flex-direction: column;
     align-items: center;
     gap: 15px;

     overflow: hidden;
     max-height: 0;
     transition: max-height 0.35s ease;

     z-index: 1000;
   }

   .menu.active {
     max-height: 350px;
     padding: 15px 0;
   }

   .hamburger {
     display: flex;
   }

   .right-btn {
     display: none;
   }

   /* ====trust and criteria sections==== */
   .trust-section {
     padding: 18px 0;
   }

   .trust-row {
     flex-direction: column;
     gap: 6px;
   }

   .trust-title {
     font-size: 17px;
   }

   .trust-description {
     font-size: 12.5px;
     line-height: 1.6;
     text-align: center;
   }

   .criteria-row {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px 20px;
     padding: 20px 0;
   }

   .criteria-item {
     font-size: 10.5px;
     line-height: 1.4;
   }

   .criteria-dot {
     width: 6px;
     height: 6px;
   }

   /* ====hero==== */
   .hero-proof {
     gap: 20px;
     padding-top: 20px;
     margin-top: 20px;
   }

   .hero-proof div b {
     font-size: 21px;
   }

   .hero-proof div span {
     font-size: 12px;
   }

 }


 @media (max-width:992px) {
   /* ===hero section== */

   .hero-text h1 {
     font-size: 42px;
   }

   .hero-text {
     max-width: 100%;
     text-align: center;
   }

   .hero-buttons {
     justify-content: center;
   }


   /* ===trust section and criteria section=== */

   .trust-wrap,
   .criteria-wrap {
     padding-left: 20px;
     padding-right: 20px;
   }

   .trust-row {
     gap: 8px 14px;
   }

   .trust-title {
     font-size: 18px;
   }

   .criteria-row {
     justify-content: center;
     gap: 14px 28px;
     padding: 22px 0;
   }

   .criteria-item {
     font-size: 11px;
   }

   /* ==== */
   /* ==for individuals page=== */
   .individuals-section {
     padding: 80px 0;
     height: auto;
   }

   .individuals-section {
     min-height: auto;
     padding: 80px 0;
   }

   .individuals-content {
     flex-direction: column;
     text-align: center;
     gap: 40px;
   }

   .individuals-text h1 {
     font-size: 40px;
   }

   .individuals-text p {
     max-width: 100%;
     margin: 20px auto 0;
   }

   .individuals-image img {
     max-width: 450px;
   }

 }




 @media (max-width:600px) {

   /* ===hero section== */
   .hero-text h1 {
     font-size: 32px;
   }

   .hero-buttons {
     flex-direction: column;
     gap: 15px;
   }

   .learn-btn,
   .discover-btn {
     width: 100%;
   }

   /* ===trust section and criteria section=== */
   .trust-wrap,
   .criteria-wrap {
     padding-left: 14px;
     padding-right: 14px;
   }

   .trust-section {
     padding: 16px 0;
   }

   .trust-title {
     font-size: 16px;
   }

   .trust-description {
     font-size: 12px;
     line-height: 1.5;
   }

   .criteria-row {
     grid-template-columns: 1fr;
     gap: 11px;
     padding: 18px 0;
   }

   .criteria-item {
     font-size: 10.5px;
   }

   /* ====8 pillar== */

   .framework-layout {
     gap: 35px;
   }




   .framework-radar {
     width: 100%;

     max-width: 320px;

     margin: 0 auto;
   }


   .pillar-circle {
     width: 320px;
     height: 320px;
   }




   .circle-pillar {
     width: 64px;
     height: 64px;

     margin: -32px 0 0 -32px;

     padding: 5px;
   }

   .pillar-1 {
     transform:
       rotate(0deg) translateX(120px);
   }

   .pillar-2 {
     transform:
       rotate(45deg) translateX(120px);
   }

   .pillar-3 {
     transform:
       rotate(90deg) translateX(120px);
   }

   .pillar-4 {
     transform:
       rotate(135deg) translateX(120px);
   }

   .pillar-5 {
     transform:
       rotate(180deg) translateX(120px);
   }

   .pillar-6 {
     transform:
       rotate(225deg) translateX(120px);
   }

   .pillar-7 {
     transform:
       rotate(270deg) translateX(120px);
   }

   .pillar-8 {
     transform:
       rotate(315deg) translateX(120px);
   }

   .circle-pillar span {
     font-size: 7px;

     margin-bottom: 2px;
   }


   .circle-pillar strong {
     font-size: 7.5px;

     line-height: 1.15;
   }

   .opportunity-center {
     width: 92px;
     height: 92px;
   }


   .opportunity-center span {
     font-size: 7px;

     letter-spacing: 1px;
   }


   .opportunity-center strong {
     font-size: 13px;
   }


   .pillar-grid {
     grid-template-columns: 1fr;

     gap: 14px;
   }


   .pillar {
     padding: 18px;

     grid-template-columns: 38px 1fr;

     gap: 12px;
   }


   .pillar h4 {
     font-size: 16px;
   }


   .pillar p {
     font-size: 13px;

     line-height: 1.55;
   }

 }

 @media (max-width: 980px) {

   /* ====8 pillar== */
   .framework-layout {
     grid-template-columns: 1fr;

     gap: 45px;
   }


   .framework-radar {
     max-width: 380px;

     margin: 0 auto;
   }


   .pillar-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }


 @media (max-width: 380px) {

   /* ==8 pillar== */
   .framework-radar {
     max-width: 285px;
   }


   .pillar-circle {
     width: 285px;
     height: 285px;
   }


   .circle-pillar {
     width: 58px;
     height: 58px;

     margin: -29px 0 0 -29px;
   }


   /* Small mobile radius */

   .pillar-1 {
     transform:
       rotate(0deg) translateX(106px);
   }

   .pillar-2 {
     transform:
       rotate(45deg) translateX(106px);
   }

   .pillar-3 {
     transform:
       rotate(90deg) translateX(106px);
   }

   .pillar-4 {
     transform:
       rotate(135deg) translateX(106px);
   }

   .pillar-5 {
     transform:
       rotate(180deg) translateX(106px);
   }

   .pillar-6 {
     transform:
       rotate(225deg) translateX(106px);
   }

   .pillar-7 {
     transform:
       rotate(270deg) translateX(106px);
   }

   .pillar-8 {
     transform:
       rotate(315deg) translateX(106px);
   }


   .circle-pillar span {
     font-size: 6px;
   }


   .circle-pillar strong {
     font-size: 6.5px;
   }


   .opportunity-center {
     width: 80px;
     height: 80px;
   }


   .opportunity-center span {
     font-size: 6px;
   }


   .opportunity-center strong {
     font-size: 11px;
   }

 }


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

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

   .pillar-orbit,
   .pillar-content {
     animation: none;
   }

 }