@media (max-width: 1440px) {
    #gift .container:before {
        width: 100%;
    }
}

@media (max-width: 1280px) {
    #gift:before {
        left: 60px;
    }

    #gift .container:before {
        width: calc(100% - 160px);
        left: 80px;
    }

    #gift .container:after {
        left: 164px;
    }
}

@media (max-width: 1199px) {
    .openings-section {
        flex-direction: column;
        gap: 24px;
    }

    .opening {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .edge-benefits {
        gap: 40px 32px;
    }

    .edge-security {
        gap: 40px 32px;
    }
}

@media (max-width: 992px) {
    section {
        padding: 24px 40px;
    }

    header {
        padding: 31px 40px 31px 40px;
    }

    header .nav {
        display: none;
        flex-direction: column;
        position: absolute;
        height: 100vh;
        width: 100%;
        top: 0;
        left: 0;
        background: #fff;
        padding: 116px 16px 16px;
        text-align: center;
        transition: 0.3s ease-in-out;
    }

    header .nav:after {
        content: "";
        background: url('../images/menu-animation.svg') no-repeat;
        background-size: cover;
        position: absolute;
        bottom: 0;
        margin-left: -16px;
        margin-right: -16px;
        width: 100vw;
        height: 289px;
    }

    header .nav.active {
        display: flex;
    }

    header .nav a {
        padding: 20px 0;
        display: block;
        margin-right: 0;
        box-shadow: none;
        font-size: 3.2rem;
        line-height: 1;
        color: #1D2289;
        font-weight: 700;
    }

    header .nav a:first-of-type {
        display: block;
    }

    header .nav a.blue-text {
        background: #23A0FB;
        border-radius: 59px;
        margin-top: 20px;
        padding: 17px 24px;
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.5;
        color: #fff;
        max-width: fit-content;
        margin: 20px auto 0;
    }

    .hamburger {
        display: flex;
        z-index: 1;
    }

    .hamburger .open {
        display: block;
    }

    .hamburger .close {
        display: none;
    }

    .hamburger.active .open {
        display: none;
    }

    .hamburger.active .close {
        display: block;
    }

    #home .container {
        flex-direction: column;
        align-items: center;
    }

    .home-content {
        text-align: center;
    }

    .home-content p {
        margin: auto;
    }

    #home .button:first-of-type {
        display: none;
    }

    #home .button:last-of-type {
        display: inline-flex;
    }

    .desktop-feature {
        display: none;
    }

    .mobile-feature {
        display: block;
    }

    #features .button.primary {
        display: inline-flex;
        margin-top: 0px;
        /* align-items: center; */
    }

    #features .container > p {
        max-width: 310px;
        margin: auto;
    }

    .features-hero {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .features-hero-content {
        width: 100%;
        max-width: 295px;
        margin: auto;
    }

    .features-hero-content h3 {
        border-bottom: solid 0.5px #232323;
        text-align: center;
        font-size: 1.2rem;
    }

    .features-image {
        width: 160px;
        height: 335px;
        margin: auto;
        overflow: hidden;
    }

    .feature.feature.active p {
        display: none;
    }

    .feature.active h3 {
        font-size: 1.8rem;
    }

    .feature h4 {
        font-size: 1.4rem;
        text-align: center;
        font-weight: 500;
        line-height: 1.5;
    }

    /* New Classes for features sections for revised animation */
    .wrapper {
        flex-direction: column-reverse;
        gap: 24px;
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .info-column {
        width: 100%;
        max-width: 320px;
        margin: auto;
        align-items: center;
        gap: 10px;
        padding-bottom: 30px;
    }

    .info-box h3 {
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.3;
        color: #232323;  /*#1D2289 */
        opacity: 0.5;       /* 0.4 */
        text-align: center;
        border-bottom: solid 0.5px #232323;  /* solid 0.5px  #1D2289 */
    }

    .mobile-wrapper {
        width: 180px;
        height: 380px;
        margin: auto;
        overflow: hidden;
    }

    .info-box h4 {
        font-size: 1.4rem;
        text-align: center;
        font-weight: 500;
        line-height: 1.5;
    }

    .info-box ul li{
      list-style-type: square;
      list-style-position: outside;
      font-size: 12px;
      font-weight: 400;
      padding-left: 12px;
      margin: 8px 0px 8px 30px;
      color: #1D2289;
    }

    .info-box ol {
      padding-left: 12px;
      margin: 0;
      color: #1D2289
    }

    .info-box h4,
    .info-box ul,
    .info-box ol {
      display: none;
    }

    .info-box:hover h4,
    .info-box:hover ul,
    .info-box:hover ol {
      display: block;
    }



    .info-box.expanded h4,
    .info-box.expanded ul {
      display: block;
    }


    /* New classes for feature section for revised animation end here*/



    #benefits {
        border-radius: 0 0 50px 50px;
    }

    .benefits {
        gap: 40px;
    }

    .benefit-img {
        height: 128px;
    }

    .benefit-img img {
        margin: auto;
    }

    .benefit p {
        font-size: 1.6rem;
    }

    #security {
        border-radius: 0 0 50px 50px;
    }

    .security {
        gap: 40px;
    }

    .secure-img {
        height: 128px;
    }

    .secure-img img {
        margin: auto;
    }

    .secure p {
        font-size: 1.6rem;
    }

    #budget .container {
        flex-direction: column;
        gap: 32px;
    }

    .budget-content {
        padding: 40px 24px 0;
        text-align: center;
    }

    .budget-content h2 {
        text-align: center;
    }

    .budget-content h3 {
        text-align: center;
    }

    .budget-content p {
        padding-top: 12px;
        padding-bottom: 24px;
        margin: auto;
    }

    .budget-content p.center {
        padding-bottom: 0;
        margin: auto;
    }

    #download .container {
        width: 100%;
        margin: auto;
    }

    #download h2 {
        text-align: center;
        /* font-size: 3rem;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: normal; */
    }

    #download .container>p {
        text-align: center;
        margin: auto;
    }

    .qr-code {
        display: none;
    }

    .mobile-download-link {
        padding-top: 20px;
    }

    .download-link {
        display: none;
    }

    .mobile-download-link {
        display: block;
    }

    .download-app {
        padding: 16px;
        margin: auto;
        margin-bottom: 16px;
        gap: 16px;
        border: 1px solid #D9D9D9;
        border-radius: 16px;
        width: 238px;
    }

    .download-app img {
        width: 64px;
        height: 64px;
    }

    .download-app p {
        padding-top: 0;
        font-size: 2rem;
        line-height: 1.3;
        font-weight: 600;
        text-align: left;
    }

    .form-container {
        margin: 32px auto 0;
        text-align: center;
    }

    .form-group label {
        text-align: left;
    }

    .bottom-banner {
        position: static;
        background: #fff;
    }

    .bottom-banner > img:first-of-type,
    .bottom-banner > picture:first-of-type > img {
        margin-top: 90px;
        margin-right: -80px;
        height: 360px;
    }

    .bottom-banner > img:nth-of-type(2),
    .bottom-banner > picture:nth-of-type(2) > img {
        z-index: 1;
        height: 450px;
    }

    .bottom-banner > img:last-of-type,
    .bottom-banner > picture:last-of-type > img {
        margin-top: 90px;
        margin-left: -80px;
        height: 360px;
    }

    footer {
        padding: 40px;
    }

    footer .container {
        flex-direction: column;
        gap: 40px;
    }

    .footer-left {
        justify-content: space-between;
    }

    .footer-right {
        flex-direction: row;
    }

    #faq,
    #plans {
        padding: 40px;
    }

    #plans .button {
        display: inline-flex;
        margin-top: 24px;
    }

    .plan-head {
        padding: 24px;
    }

    .plan-head h3,
    .gift-plan h3 {
        font-size: 3.2rem;
    }

    #plans .plan-head p,
    .plan-body ul li {
        font-size: 1.6rem;
    }

    .plan-body {
        padding: 24px;
    }

    #gift::before {
        width: 165px;
        height: 91px;
        top: 0;
        left: 9px;
    }

    #gift .container {
        padding: 60px 30px 20px 80px;
    }

    #gift .container:before {
        width: calc(100% - 80px);
        top: 48px;
        left: 40px;
    }

    #gift .container:after {
        height: calc(100% - 48px);
        top: 24px;
        left: 72px;
    }

    .gift-plan {
        padding: 24px 9px 53px 24px;
    }

    #about-home .container {
        flex-direction: column;
    }

    #about-home .button.primary {
        display: inline-flex;
        margin-top: 16px;
    }

    .mission h3 {
        font-size: 1.8rem;
    }

    #founders, #contact-hr {
        padding-bottom: 60px;
    }

    .founder-content h3 {
        font-size: 2.4rem;
    }

    .founder-content p {
        font-size: 1.8rem;
    }

    #join-home .container {
        flex-direction: column;
        gap: 32px;
    }

    #contact-hr .container {
        flex-direction: column;
        gap: 32px;
    }

    .hr-content h2,
    .hr-content p {
        text-align: center;
    }

    .hr-content p.mail {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 1.2rem;
    }

    section {
        padding: 24px 16px;
    }

    .container.white-bg {
        padding: 40px 24px;
    }

    h1 {
        font-size: 4rem; /* 4.8rem */
        line-height: 1.3; /* 1.0*/
    }

    h2 {
        font-size: 2.4rem;
    }

    h3 {
        font-size: 1.8rem;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    header {
        padding: 24px 16px 16px;      /* diff: 64px 16px 16px */
    }

    header .nav:after {
        height: 145px;
    }

    #home .flex {
        flex-direction: column;
        gap: 14px;
        align-items: center;
    }

    .home-content {
        min-width: unset;
    }

    .home-content h1 {
        max-width: 300px;   /* 259px; */
        margin: auto;
        text-align: center;
    }

    .home-content p {
        text-align: center;
        max-width: 230px;
        margin: auto;
        padding-top: 24px;
    }

    .join-waitlist-button {
        display: block;           /* Allow centering with margin */
        width: fit-content;       /* Shrink to fit content */
        margin: 16px auto;        /* Center horizontally */
        /*font-weight:400;
        font-size: 18px;*/

    }

    #home .button {
        margin-top: 24px;
        margin-bottom: 24px;        /* new parameter entry */
    }

    #intro {
        padding-left: 0;
        padding-right: 0;
    }

    #intro .container {
        background: url('../images/intro-banner-bg-mb.svg') no-repeat;
        background-size: 200%;
        background-position: bottom -80px center;
    }

    #intro h3 {
        font-size: 1.7rem;  /* 1.2rem */
        line-height: 1.5;   /* 1.5 */
        max-width: 340px;    /* 261px */
        margin: auto;
        padding-top: 10px;
    }

    .intro-logo {
        height: 24px; /* 11.5px */
    }

    .intro-banner {
        padding-top: 24px;
    }

    .intro-banner > img:first-of-type,
    .intro-banner > picture:first-of-type > img,
    .intro-banner > img:last-of-type,
    .intro-banner > picture:last-of-type > img {
        margin-top: 50px;
        height: 190px;
    }

    .intro-banner > img:nth-of-type(2),
    .intro-banner > picture:nth-of-type(2) > img {
        height: 240px;
    }

    #benefits {
        margin-bottom: 40px;
    }

    #benefits h2 {
        max-width: 210px;
        margin: auto;
    }

    .benefits {
        flex-direction: column;
        padding-top: 32px;
    }

    .benefit-img {
        margin-bottom: 8px;
    }

    .benefit-img img {
        width: auto;
        height: 128px;
    }

    .benefit p {
        padding-top: 8px;
    }

    #edge .container > p {
        max-width: 310px;
        margin: auto;
    }

    .edge-benefits {
        gap: 40px 32px;
        padding-top: 32px;
    }

    .edge-benefit {
        width: 124px;
    }

    /* Classes inserted for new security section */
    .edge-security {
        gap: 30px 24px;
        padding: 32px 0px 16px 0px;
    }

    .edge-secure {
        width: 186px;
        margin: auto;
        background: #fff;
        padding: 24px 8px; /* padding: 60px 66px;*/
        border-radius: 32px;
    }

    .edge-secure p {
        font-size: 12px;
        line-height: 1.2;
        margin: 0px;
    }

    #security {
        margin-bottom: 40px;
    }

    #security .container > p {
        max-width: 320px;
        margin: auto;
    }

    #security h2 {
        max-width: 320px;
        margin: auto;
    }

    .security {
        flex-direction: column;
        padding-top: 32px;
    }

    .secure-img {
        margin-bottom: 8px;
    }

    .secure-img img {
        width: auto;
        height: 128px;
    }

    .secure p {
        padding-top: 8px;
    }
    /* security section classes end */

    #testimonials>p {
        margin: 16px auto 32px;
    }

    #testimonials-swiper .swiper-slide {
        width: 360px;
    }

    .testimonial {
        border-radius: 32px;
        padding: 100px 24px 36px;
        position: relative;
    }

    .testimonial::before {
        top: 24px;
        left: 24px;
    }

    .testimonial::after {
        width: 0;
        height: 0;
        display: none;
    }

    .quote {
        font-size: 2rem;
    }

    .speaker {
        gap: 16px;
        padding-top: 6px;
    }

    .speaker-name {
        font-size: 1.8rem;
    }

    #download .white-bg {
        padding: 40px 24px;
    }

    #download .container>p {
        padding-top: 16px;
    }

    .download-section {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    .buttons-section {
        align-items: center;
    }

    form .button.primary {
        font-size: 1.4rem;
    }

    .bottom-banner > img:first-of-type,
    .bottom-banner > picture:first-of-type > img {
        margin-top: 50px;
        margin-right: -40px;
        height: 190px;
    }

    .bottom-banner > img:last-of-type,
    .bottom-banner > picture:last-of-type > img {
        margin-top: 50px;
        margin-left: -40px;
        height: 190px;
    }

    .bottom-banner > img:nth-of-type(2),
    .bottom-banner > picture:nth-of-type(2) > img {
        height: 240px;
    }

    footer {
        padding: 32px 16px 64px;
        text-align: center;
    }

    footer .container,
    .footer-left {
        flex-direction: column;
        gap: 32px
    }

    footer h3 {
        font-size: 1.2rem;
        text-align: center;
    }

    .footer-left ul,
    .footer-left p {
        padding-top: 16px;
        font-size: 1.4rem;
    }

    .social-links {
        display: flex;
        flex-wrap: nowrap;
        width: 248px;
        margin: auto;
    }

    .footer-right {
        flex-direction: column;
        gap: 8px;
    }

    .footer-right img {
        max-width: 207px;
        margin: auto;
    }

    .footer-right p {
        text-align: center;
    }

    #faq,
    #plans {
        padding: 40px 16px;
    }

    #faq h2 {
        padding-bottom: 16px;
        font-size: 2.8rem;
        line-height: 1.2;
        color: #1D2289;
    }

    .search .form-group {
        padding: 10px 40px;
    }

    .search .form-group::before {
        height: 16px;
        width: 16px;
    }

    .search .form-group .form-control {
        height: 18px;
        font-size: 1.2rem;
    }

    .trigger {
        text-align: left;
        margin: 32px -16px 24px;
        white-space: nowrap;
        overflow: auto;
        scrollbar-width: none;
    }

    .trigger::-webkit-scrollbar {
        display: none;
    }

    .trigger li:first-child {
        margin-left: 16px;
    }

    .trigger li:last-child {
        margin-right: 16px;
    }

    .faq-item {
        border-radius: 8px;
        padding: 16px 18px;
    }

    .faq-question {
        font-size: 1.4rem;
        line-height: 1.5;
        margin-right: 24px;
    }

    .faq-question::after {
        height: 24px;
        width: 24px;
        right: -24px;
        top: 0;
    }

    .faq-answer {
        font-size: 1.2rem;
    }

    .faq-answer p {
        padding-top: 16px;
    }

    .faq-answer .button.primary {
        margin-top: 16px;
    }

    #plans h1 {
        font-size: 3.6rem;
    }

    .plans {
        flex-direction: column;
        gap: 24px;
    }

    .plan {
        width: 100%;
    }

    .plan-head {
        padding: 24px 48px;
    }

    #plans .plan-head p,
    .plan-body ul li {
        font-size: 1.8rem;
    }

    .plan-body {
        padding: 24px 36px 32px 48px;
    }

    #gift {
        padding-top: 32px;
    }

    #gift::before {
        top: 5px;
        left: calc(50% - 82px);
        background: url('../images/bow-mb.svg') no-repeat;
        background-size: contain;
    }

    #gift .container {
        padding: 80px 24px 32px;
    }

    #gift .container:before {
        width: calc(100% - 32px);
        top: 60px;
        left: 16px;
    }

    #gift .container:after {
        display: none;
    }

    #gift h2,
    #gift p {
        text-align: center;
    }

    #gift p:nth-of-type(2) {
        padding-top: 32px;
    }

    .gift-plans {
        flex-direction: column;
        gap: 16px;
    }

    .gift-plan {
        padding: 24px 24px 45px;
    }

    #gift .form-group {
        flex-direction: column;
    }

    #gift .form-group label {
        font-size: 1.2rem;
        text-align: center;
    }

    #gift form .button.primary {
        width: 100%;
        justify-content: center;
    }

    #about-home .home-content {
        min-width: unset;
    }

    #about-home .home-content h1 {
        font-size: 3.2rem;
        line-height: 1.2;
        max-width: unset;
    }

    #about-home .home-content p {
        padding-top: 16px;
    }

    .mission-container {
        flex-direction: column;
        gap: 40px;
    }

    .mission {
        max-width: 200px;
        margin: auto;
    }

    .mission h3 {
        padding-top: 16px;
    }

    .founders {
        flex-direction: column;
        gap: 16px;
    }

    #join-home .home-content h1 {
        font-size: 2.8rem;
        max-width: unset;
        line-height: 1.2;
    }

    #join-home .home-content p {
        padding-top: 16px;
    }

    .openings-section {
        padding: 24px 0;
    }

    .openings-section h3, .profile, .apply a {
        font-size: 1.8rem;
    }

    .opening-head, .opening-body {
        padding: 16px;
    }

    .opening {
        margin-bottom: 16px;
    }

    .location::before {
        height: 16px;
        width: 16px;
    }

    .experience::before {
        height: 16px;
        width: 16px;
    }

    .qualification-trigger {
        font-size: 1.2rem;
        align-items: center;
    }

    .qualification-trigger::after {
        height: 20px;
        width: 20px;
    }

    .qualification-content ul {
        padding-left: 16px;
    }

    #contact-hr .container {
        padding: 40px 24px;
    }

    .hr-content h2 {
        max-width: 180px;
        margin: auto;
    }

    .hr-content p.mail {
        font-size: 1.4rem;
    }

    
   /* New Classes for TnC and Privacy Policy pages */    
    
    #tnc .container {
        padding: 20px 0px;
    }
    
    #tnc .tnc-content h1 {
        font-size: 28px;  /* diff: 6rem */
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: normal;
    }

    #ppolicy .tnc-content h1 {
        font-size: 28px;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: normal;
    }

    .tnc-content ol {
        margin-top:4pt;
        padding-left:0pt;
    }

    .tnc-content ul {
        font-weight: normal;
        margin-top:4pt; 
        padding-left:16pt;
    }

    .tnc-content p {
        font-size: 9pt;
        font-family: Instrument Sans, serif;
        text-align:left; 
        padding-left:20pt; 
        padding-right:8pt;
    }

    li {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-left: 12px;
    }

    .Footer {
        margin-bottom: 0pt;
        line-height: normal;
        font-size: 11pt;
        -aw-style-name: footer
    }

    .Header {
        margin-bottom: 0pt;
        line-height: normal;
        font-size: 11pt;
        -aw-style-name: header
    }

    .BodyText {
        margin-bottom: 0pt;
        line-height: normal;
        widows: 0;
        orphans: 0;
        font-family: Instrument Sans, serif;   /* Arial, MT */
        /* font-size: 10.5pt; */
        -aw-style-name: body-text
    }
    
   .tnc-content li {
        margin-top: 12px;
        margin-bottom: 0px;
        padding-left: 6px;
        padding-right: 6px;
    }
    
    .ListParagraph {
        line-height: 108%;
        font-size: 12pt;
        font-family: Instrument Sans, serif;
        font-weight:bold;
        margin-left: 18pt;
        margin-right: 6px; 
        
        -aw-style-name: list-paragraph;
        text-align:left; 
        padding-left:3.83pt; 
    }

    .ListParagraph >p {
        text-align:left;
        line-height: 1.3;
        padding-left: 0pt; 
        padding-right:0pt;
        text-indent: 0pt;
    }
    

    .awlist1 {
        padding-left:12px;  /* 42px */
        padding-right: 6px;  /* ?? */
    }

    .awlist1 >li {
        font-size: 9pt;
        margin-top: 12pt;
        margin-bottom: 0pt;
        padding-left:16pt;
        padding-right: 0px;
        text-indent: -16px;
    }

    .awlist1 >p {
        padding-left: 18pt;
        padding-right: 0px;
        line-height: 1.3;
    }

    .awlist2 {
        padding-left:18px;  /* 42px */
        counter-reset: awlistcounter3_0;
    }

    .awlist2 >li {
        /* font-family: Instrument Sans, serif;
        font-weight: normal; */
        font-size: 9pt;
        margin-top: 2pt;
        margin-bottom: 0pt;
        padding-left:16pt; /* 42pt */
        text-indent: -16px;
    }

    .awlist2 >p {
        padding-left: 16pt;
        font-size: 9pt;
        text-align:left; 
        text-indent: 0pt;
    }


    .awlist3 {
        padding-left:24px;  /* 42px */
        counter-reset: awlistcounter3_0;
    }

    .awlist3 >li {
        margin-top: 2pt;
        margin-bottom: 2pt;
        padding-left:24pt; /* 42pt */
        text-indent: -24px;
    }


}

@media (max-width: 767px) and (max-height: 720px) {
    header .nav a {
        padding: 14px 0;
    }

    header .nav a.blue-text {
        margin: 14px auto 0;
    }
}