/* =========================================
   RESPONSIVENESS (Mobile First -> Desktop)
   ========================================= */



@media (max-width: 1199px) {


  body {
    overflow-x: hidden;
  }

  .clearunited-submenu ul {
    gap: 0.2rem;
  }

  .clearid-installation-text.installation-2 {
    right: 0
  }

  .clearid-installation-text.installation-2.arrow:after,
  .clearid-installation-text.installation-4.arrow:after {
    left: 77%
  }

  .clearid-installation-text.installation-4 {
    right: 0
  }

  .clearid-installation-text.installation-3 {
    left: 0
  }

  .clearid-installation-text.installation-3::after {
    left: 25px
  }

}

@media (max-width: 991px) {
  .same-heading {
    margin-bottom: 2rem;
  }

  .max-wid-80 {
    max-width: 100%;
  }

  .max-wid-50 {
    max-width: 100%;
  }

  .header .nav-links {
    display: none;
  }

  .header .nav-actions {
    display: none;
  }

  .header .nav-links.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--WhiteColor);
    z-index: 998;
    padding: 2rem;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    overflow-y: auto;
  }

  /* Style links for full screen */
  .header .nav-links a:not(.btn) {
    font-size: 1.3rem;
    text-align: center;
    border-bottom: none;
    font-weight: 500;
    color: var(--Dark);
    padding: 0.2rem 0;
  }

  .header .nav-links a:hover:not(.btn) {
    color: var(--PrimaryColor);
  }

  .header .nav-links .btn {
    font-size: 1rem;
  }

  /* Ensure toggle is above the menu */
  .header .mobile-toggle {
    display: block;
    position: relative;
    z-index: 1000;
  }

  .hero::before {
    width: 50%;
    height: 50%;
    top: 30%;
  }

  .same-section {
    padding: 3rem 0;
  }

  .footer .footer-companies {
    text-align: center;
  }

  .footer .footer-companies li a {
    padding: 0.1rem;
  }

  .footer .footer-logo {
    display: block;
    text-align: center;
    margin: 0 auto 2rem;
  }

  .footer .company-list {
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
  }

  .life-hero {
    min-height: 17rem;
  }

  .clear-devices-section .device-image img {
    margin: auto;
  }

  .life-economy-section .gradient-img-bx {
    margin-top: 2rem;
  }

  .what-clearUnited .same-heading h2 {
    font-size: 1.9rem;
  }

  .life-economy-section .economy-features {
    gap: 1rem;
  }

  .same-heading p br {
    display: none;
  }

  .how-it-works-section .timeline-item p {
    max-width: 100%;
  }

  /* Submenu Responsiveness */
  .clearunited-submenu {
    padding: 0.8rem 0;
  }

  .clearunited-submenu ul {
    gap: 0.8rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    justify-content: flex-start;
    padding-bottom: 5px;

    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .clearunited-submenu ul::-webkit-scrollbar {
    display: none;
  }

  .clearunited-submenu ul li {
    flex: 0 0 auto;
  }

  .clearunited-submenu ul li.buy-li {
    margin-left: auto;
    border-left: none;
    padding-left: 10px;
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 10;
  }

  .clearunited-submenu .dropdown-menu-custom-full {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    max-height: max-content;
    overflow-y: auto;

    padding: 1rem;

    transform: translateY(100%);
    /* Start hidden below */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
  }

  .clearunited-submenu .dropdown-menu-listing {
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Disable hover effect on mobile explicitly */
  .clearunited-submenu .specs-dropdwon-full:hover .dropdown-menu-custom-full {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    pointer-events: none;
  }

  /* Active State - Slide Up */
  .clearunited-submenu .specs-dropdwon-full.is-open .dropdown-menu-custom-full {
    transform: translateY(0);
    top: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .clearunited-submenu .dropdown-item-full {
    width: 45%;
    padding: 10px;
    font-size: 0.75rem;
  }

  .clearunited-submenu .dropdown-item-full img {
    max-height: 50px;
  }


  .purpose-driven-bx {
    max-width: 100%;
    margin: 2rem 0;
  }

  .purpose-driven-shape {
    display: none;
  }

  .purpose-driven-bx ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .purpose-driven-bx ul li {
    position: initial;
    -webkit-transform: none !important;
    text-align: center;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    bottom: unset !important;
    padding: 0.5rem;
    width: 30%;
  }

  .purpose-driven-bx .purpose-driven-title {
    margin: 0.8rem 0;
    float: none !important;
    text-align: center;
    display: block;
  }

  .inner-banner {
    padding: 4rem 0;
  }

  .purpose-banner {
    position: relative;
    background-position: right bottom !important;
  }

  .purpose-banner:after {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
  }

  .purpose-banner .hero-content {
    position: relative;
    z-index: 1;
  }



  .inner-banner .free-dots {
    width: 12rem;
    height: 12rem;

    left: -10rem;
  }

  .join-today-form .form-circle-bg {
    width: 100%;
    max-width: 90%;
    height: auto;
    margin: 1rem auto 2rem;
    padding: 1.5rem;
    border-radius: 2rem;
  }

  .join-today-form .form-circle-bg form {
    max-width: 100%;
  }

  .rewards-banner .same-heading {
    text-align: center;
    margin-bottom: 0;
  }

  .rewards-banner .same-heading h1 {
    font-size: calc(1.375rem + 1.5vw);
    margin-bottom: 0;
  }

  .be-empowered-section .all-services-outer {
    width: 28rem;
    height: 28rem;
  }

  .be-empowered-section .all-services-icon {
    width: 3.5rem;
    height: 3.5rem;
  }

  .phone-quick-specs li {
    width: 50%;
    border: 1px solid #d1d1d1 !important;
    min-height: -webkit-fill-available;
    height: 100%;
    padding: 1rem;
  }

  .s17-selfie-camera-section {
    display: none;
  }

  .s17-duble-unlock-section {
    min-height: inherit;
  }

  .same-ul ul li p {
    margin-bottom: 0;
  }

  .exceed-vision-section {
    background-image: none;
  }

  .clearphone-420-angle-section {
    min-height: inherit;
    background-size: 990px;
  }

  .wide-angle-bx {
    height: 190px;
    position: relative;
  }

  .wide-angle-bx p {
    position: absolute;
    bottom: -40px;
    right: 0;
    left: 0;
    text-align: center;
    color: #fff;
    margin-right: 0;
  }

  .wide-angle-bx p span {
    display: block;
  }

  .wide-angle-bx p span+span {
    margin-top: 30px;
    margin-left: 0;
  }

  .clearphone-420-faceId-section {
    padding: 3rem 0;
  }

  .series-620-battery-info h3 {
    font-size: 2rem;
  }

  .hawaiian-banner-wrapper .ClearPhoneHeading {
    text-align: center;
  }

  .hawaiian-banner-wrapper .ClearPhoneHeading h2 {
    font-size: 2rem;
  }

  .hawaiian-banner-wrapper .ClearPhoneHeading h3 .light-title {
    font-size: 1rem;
  }

  .hawaiian-banner-wrapper .ClearPhoneHeading h3 {
    font-size: 1.2rem;
  }

  .hawaiian-banner-wrapper .hawaiian-group-btn-list {
    justify-content: center;
  }

  .hawaiian-banner-wrapper .hawai-banner-img {
    margin-top: 1rem;
  }

  .hawaiian-banner-wrapper {
    background-image: none;
  }

  .hawai-morespace-section {
    min-height: inherit;
  }

  .features-ul.right-view li {
    text-align: left;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  }

  .features-ul.right-view .check-icon {
    left: 0;
    right: unset;
  }

  .os-video-section {
    min-height: 380px;
    padding: 3rem 0;
  }

  .stay-secure-section .why-data-colum {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    border-radius: 1rem;
  }

  .stay-secure-section .why-data-icon {
    position: relative;
    display: block;
    transform: unset;
    top: unset;
    left: unset !important;
    right: unset !important;
    margin: 0 auto 1rem;
  }

  .stay-secure-section .why-data-align-right {
    justify-content: start;
    text-align: left;
  }

  .stay-secure-section .why-data-colum p {
    text-align: center;
  }

  /* .stay-secure-section .why-data-align-right .why-data-icon{left: -15px; right: unset;} */
  .stay-secure-section .why-data-mid-img {
    margin: 0;
  }

  .clearweb-work-white-box:before {
    display: none;
  }

  .clearweb-work-white-box:after {
    display: none;
  }

  .clearweb-work-list-line {
    display: none;
    margin: 0;
  }

  .clearweb-work-white-box {
    padding: 1rem;
  }




  .clearmed-medication-bx ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .clearmed-medication-bx ul li {
    transform: inherit !important;
    width: 30%;
  }

  .clearmed-condition-section .clearmed-medication-img {
    margin-top: 2rem;
  }

  .order-last .includes-txt {
    border-left: 4px solid var(--PrimaryColor);
    border-right: none;
  }

  .clearmed-good-bx {
    margin: 2rem 0;
    height: auto;
  }

  .launcher-section .top-same-heading {
    margin-bottom: 2rem;
  }

  .launcher-section .home-launcher .img-box {
    margin-bottom: 2rem;
  }

  .launcher-section .home-launcher .img-box img {
    margin-top: 0;
  }

  .clearsignal-banner .img-box:after {
    display: none;
  }

  .clearEmail-plan-box-body ul {
    min-height: inherit;
  }

  .hero {
    min-height: inherit;
  }
}


@media (max-width: 767px) {

  .footer .footer-bottom {
    text-align: center;
  }

  .footer .footer-bottom .payment-imgs {
    text-align: center !important;
    margin-top: 1rem;

  }

  .footer .footer-bottom .payment-imgs img {
    margin: auto;
  }

  .section-bottom-btn {
    flex-wrap: wrap;
  }

  .gradient-img-bx::before {
    height: 30%;
  }

  .how-it-works-section .timeline::before {
    display: none;
  }

  .how-it-works-section .dot {
    display: none;
  }

  .how-it-works-section .timeline-item {
    top: unset !important;
  }

  .how-it-works-section .timeline {
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
  }

  .how-it-works-section .timeline-item {
    flex: 0 0 auto;
    width: 46%;
    background: #fafafa;
    padding: 1rem;
    margin: 0.2rem;
    height: 100%;

  }

  .how-it-works-section .timeline-item p {
    min-height: inherit;
  }

  .clearunited-section .foundation-title {
    margin-bottom: 2rem;
  }

  .clear-rewards-all {
    background: var(--WhiteColor);
  }

  .clear-rewards-all div[class*=col-],
  .clear-rewards-all::before {
    display: none;
  }

  .rewards-banner {
    height: 70vh;
  }

  .rewards-banner .rewards-menu {
    right: 2rem;
  }

  .project-clearone-table-section-mobile-scroll {
    overflow-y: hidden;
    overflow-x: auto;
    padding: 3rem 0;
  }

  .project-clearone-table-section-mobile {
    width: 1170px;
  }

  .clearid-installation-img {
    width: 100%
  }

  .clearid-installation-text {
    padding: 25px 15px 15px;
    width: 100%;
    position: relative;
    margin-top: 40px;
    top: initial !important;
    left: initial !important;
    right: initial !important;
    bottom: initial !important
  }

  .clearid-installation-img:after {
    bottom: -15px
  }

  .clearid-installation-text span {
    left: 0
  }

  .clearid-installation-text p {
    font-size: 14px
  }

  .clearid-installation-text p br {
    display: none
  }

  .clearid-installation-text div {
    padding-top: 15px
  }

  .clearid-installation-text:after {
    display: none
  }

  .decentralized-video-section .video-box {
    height: 300px;
  }
}

@media (max-width: 568px) {
  html {
    font-size: 15px;
  }

  .footer .footer-top {
    padding: 2rem 0;
  }

  .hero .hero-features {
    flex-wrap: wrap;
  }

  .life-insurance-section {
    min-height: inherit;
  }

  .purpose-driven-bx ul li {
    width: 50%;
  }

  .be-empowered-section .all-services-outer {
    margin: 2rem auto;
    transform: scale(0.8);
  }

  .selfie-camera-ul .progress-bar-div {
    display: none;
  }

  .selfie-camera-ul ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .selfie-camera-ul ul li {
    width: 45%;
  }

}

@media (max-width:420px) {
  .life-economy-section .economy-features {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }

  .same-heading h2 br {
    display: none;
  }
}