@media (max-width: 1024px) {
  .hero h1 { font-size: 42px; }
  .hero p { font-size: 18px; }
  .quick-access h2 { font-size: 32px; }
  .quick-access .subtitle { font-size: 16px; }
  .faq-header h2 { font-size: 32px; }
  .container { padding: 0 40px; }
  .faq-wrapper .faq-box, .main-wrapper .help-box { padding: 0px 5em 1em; }
  .user-register-form .form-footer .login-link { width: 100%; margin-bottom: 1em !important;  }
  .page-route-hoya-common-feedback-confirm .webform-confirmation { width: 80%; }
  p.error-heading { font-size: 6em; }
  p.error-label { font-size: 2em; }
}
@media (max-width: 991px) {
  .right-header .user-buttons { margin-top: 1em; }
  .navbar-expand-lg .navbar-toggler { border: none; }
  .navbar-expand-lg .navbar-toggler:focus { box-shadow: none;}
  .page-route-hoya-common-feedback-confirm .webform-confirmation { width: 90%; padding: 0 5em; }
}
@media (max-width: 767px) {
  .nav-links, .nav-buttons { display: none; }
  .mobile-menu-btn { display: block; }
  .hero { min-height: 400px; padding: 60px 0; }
  .hero h1 { font-size: 32px; margin-bottom: 20px; }
  .hero p { font-size: 16px; }
  .quick-access { padding: 60px 0; }
  .quick-access h2 { font-size: 28px; }
  .access-options { gap: 30px; }
  .access-card { padding: 40px 25px; }
  .faq-section { padding: 60px 0; }
  .faq-header h2 { font-size: 28px; }
  .faq-question { padding: 20px 25px; font-size: 15px; }
  .faq-answer.active { padding: 0 25px 20px 25px; }
  .footer-right p { font-size: 14px;}
  #block-hfn-theme-footer ul { gap: 15px; text-align: center; }
  #block-hfn-theme-footer ul li { justify-content: center; }
  .main-wrapper { padding: 40px 24px; }
  .faq-wrapper .faq-box .parent-content-box, .help-box .accordion { padding: 16px 16px 8px; }
  .login-box .employee-box a { padding: 12px 58px !important; }
  .login-box { margin: 2em 0 0; }
  .login-box, .login-box .row { background-color: transparent !important; }
  .login-form-box { background-color: #fff; border-radius: 1rem; border-right: none !important; }
  .login-box .employee-box { background: #fff; margin-top: 2em; padding: 3em; border-radius: 1rem; }
  .registration-benefits, fieldset.basic-details { border-right: none !important;  margin-bottom: 0px !important; }
  fieldset.basic-details, fieldset.company-details { padding: 0 1em !important; width: 100%;}
  .confirm-parent, .password-parent { max-width: 100%; }
  fieldset.basic-details legend, fieldset.company-details legend { font-weight: bold; color: #000; font-size: 20px; }
  .user-register-form .form-footer { padding-top: 0 !important; margin-top: 0 !important; }
  .main-content.registration-block .registration-div .sing-up-button { padding: 10px 30px !important; }
  .forgot-pwd-box { height: 70vh; }
  .page-route-change-pwd-page-change-password-form .forgot-pwd-box { height: 90vh; }
  .webform-submission-feedback-form { padding: 16px 0 !important; }
  .view-id-recent_feedback .view-header .dashboard-button { top: 0 !important; right: 0 !important; }
  .page-route-entity-user-edit-form .form-actions {  margin-left: 1em; }
  .page-route-hoya-common-feedback-confirm .webform-confirmation { width: 100%; padding: 0 2em; }
  .page-route-hoya-common-feedback-confirm .main-content { padding: 0 10px 40px; }
  p.error-heading { font-size: 5em; }
  p.error-label { font-size: 2em; }
  .page-route-hoya-common-view-feedback .webform-view-wrapper { margin: 0 1em; }
  .page-route-hoya-common-view-feedback .webform-view-wrapper .webform-section { overflow: auto; }
}
@media (max-width: 480px) {
  .logo { font-size: 20px; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 15px; }
  .btn { padding: 10px 20px; font-size: 12px; }
  .mobile-nav-buttons .btn { width: 100%; text-align: center; }
  .hero-banner h2, .secondary-banner h2, .quick-access h2, .faq .view-header h4 { font-size: 24px; }
  .quick-access .subtitle { font-size: 15px; }
  .access-card { padding: 30px 20px; }
  .access-card h3 { font-size: 20px; }
  .container { padding: 0 16px; }
  .access-card p { font-size: 14px; }
  .access-btn { padding: 12px 24px; font-size: 12px; min-width: 180px; }
  .faq-header h2 { font-size: 24px; }
  .faq-question { padding: 18px 20px; font-size: 14px; }
  .faq-answer.active { padding: 0 20px 18px 20px; }
  .faq-answer p { font-size: 13px; }
  .navbar.navbar-expand-lg.fixed-top { padding-left: 0; padding-right: 0; }
  .main-content { padding: 0 16px 24px; }
  .main-wrapper { padding: 24px 0px; }
  .hero-banner p, .secondary-banner p, .faq .view-header p { font-size: 14px; }
  .hero-banner, .secondary-banner { height: auto; }
  .page-route-tfa-entry p { padding: 0 16px; }
  .tfa-entry-form { padding: 0 16px; }
  #block-hfn-theme-footer ul { flex-direction: column; }
  .main-content.registration-block .registration-div { padding: 32px 16px; }
  .login-form h2, .block-page-title-block h1 { margin: 16px 1em 24px 0; }
  .forgot-pwd-box { height: 60vh; }
  .feedback-submission .feedback-pages .disclaimer { margin-top: 1em; margin-bottom: 2em; }
  .feedback-submission .js-form-type-textfield, .feedback-submission .js-form-type-email, .feedback-submission .js-form-type-select, .feedback-submission .js-form-type-date { width: 100% !important; }
  .feedback-pages [id^="address-details-ajax-wrapper"] .fieldset-wrapper [id^="edit-address-details-country-code"] { width: 100%; }
  .main-content.feedback-submission { padding: 0 4px 24px; }
  .feedback-submission .feedback-pages { padding: 24px 16px; }
  .form-item-product-model, .form-item-product-serial-lot-number, .form-item-product-expiry-if-available, .form-item-product-expiry, .form-item-product-diopter, .form-item-product-diopter1 { padding-top: 0; margin-top: 0 !important; }
  .feedback-pages #edit-is-the-product-serial-number-available--wrapper { padding-right: 16px !important; padding-left: 16px !important; }
  .form-item-product-model, #edit-is-this-product-part-of-a-clinical-trial--wrapper, .form-item-clinical-trial-reference-number { padding-left: 16px !important; }
  .page-route-hoya-common-user-profile .main-wrapper { padding: 24px 16px; }
  .menu--footer .list-inline-item:after { content: none; }
  .page-route-hoya-common-feedback-confirm .webform-confirmation { padding: 0 1em; height: 60vh; width: 100%; }
  .page-route-hoya-common-feedback-confirm .main-content { padding: 0 4px 24px; }
  .page-route-hoya-common-feedback-confirm .webform-confirmation-heading h1 { margin-top: 1.5em; font-size: 24px; }
  .page-route-hoya-common-feedback-confirm .continue-button { margin-right: 0;}
  p.error-heading { font-size: 4em; }
  p.error-label { font-size: 2em; }
  .error-page .primary-button, .error-page .secondary-button { padding: 10px 25px !important; }
  .page-route-view-recent-feedback-page-1 .alert { margin: 0 1em 1em; }
  .page-route-tfa-overview .main-wrapper { padding: 24px 16px; }
  .page-route-tfa-overview details { padding: 10px 16px; }
  .page-route-tfa-overview details > .details-wrapper { padding: 0.5em 0.5em; }
  .page-route-tfa-validation-setup .main-wrapper { max-width: 600px; padding: 4em 1em; min-height: 55vh; }
  .page-route-hoya-common-submission-revisions .main-wrapper .region-content { margin: 0 1em; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 14px; }
  .access-options { grid-template-columns: 1fr; gap: 20px; }
  .faq-header h2 { font-size: 22px; }
}
@media (max-width: 768px) {
  .footer-content { flex-direction: column; gap: 15px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 15px; }
  .footer-divider { display: none; }
}
@media (max-width: 480px) {
  .footer { font-size: 11px; }
  .footer-links { gap: 12px; }
  .footer-content { padding: 0 15px; }
}

/* responsiveness styles  */
.form-item .description { padding-top: 0.375rem; }
.user-register-form label { margin-bottom: 0.375rem; font-weight: 600; }
.login-form label { font-weight: 600; }
#tfa-base-overview .details-wrapper.card-body { margin: 14px 0; }
form .button--primary { background-color: #0057b8; }
.field--name-field-customer-type { width: 100%; }
.webform-submission-contact-form { padding: 24px 16px; }
.webform-submission-feedback-form { padding: 24px 0; }
.webform-submission-contact-form label { margin-bottom: 0.375rem; font-weight: 600; }
.views-exposed-form label { margin-bottom: 0.375rem; font-weight: 600; }
.webform-submission-contact-form .button--primary { background-color: #0057b8; }
.progress-tracker { max-width: 800px; margin: 0 auto; }
.access-cards { gap: 24px; }
.secondary-banner { height: auto !important; }
.js-form-type-password { position: relative; }
.login-box .form-type-password input.error ~ label.error ~ button { margin-left:0px; right: 12px; }

@media (max-width: 768px) {
  .progress-tracker--center{
    margin: 2em 0px 0px 0px;
      gap:10px;
   },
    .feedback-submission .feedback-block .progress-step{
        margin:0px;
        gap:10px;
    }
    .feedback-submission .feedback-block .progress-step .progress-title{
        text-wrap:no-wrap;
    }
     .form-item-date-of-event {
        width: 100% !important;
  }
    .feedback-pages [id^="address-details-ajax-wrapper"] {
        width:100%;
    }
    .feedback-pages [id^="address-details-ajax-wrapper"] .fieldset-wrapper .js-form-item.form-item{
        width:100%;
    }
     #edit-clinical-trial-reference-number {
        width: 100% !important;
  }
  .feedback-pages fieldset .fieldset-wrapper > * {
      flex-shrink: 1;
      margin-right:0%;
    }
    .form-textarea-wrapper textarea{
       width:100% !important; 
    }
	  .progress-tracker--center{
    margin: 2em 0px 0px 0px;
      gap:10px;
   }
   .feedback-submission .feedback-block .progress-step {
   margin : 0;
   }
   .view-id-recent_feedback .view-header .dashboard-button {
	top: -94px;
	right: 0px;
}
.view-recent-feedback {
	padding: 77px 24px 24px;
}
.faq-wrapper .faq-box, .main-wrapper .help-box {
	padding: 0px 16px;
}

.form-item-lang-dropdown-select {
margin-bottom: 12px;
display:block;
}
}

 /* feedback form  */
form label {

	margin-bottom: 0.375rem;
	font-weight: 600;
}
.view-recent-feedback {
	position: relative;
}
.view-id-recent_feedback .view-header {
	position:static;
}
.view-id-recent_feedback .view-header .dashboard-button {
	top: -50px;
	right: 0px;
}

.main-wrapper .help-box .accordion-body  {
	padding-top: 14px;
}

   
   
   @media screen and (max-width: 430px) {
   .feedback-submission .feedback-block .progress-step {
	border:none;
	font-size: 10.5px;
	background:none;
   }
   .feedback-submission .feedback-block .progress-step .progress-title {
	   font-size: 8px;
   
   }
   .feedback-submission .feedback-block .progress-step.is-active {
	   border: none;
		border-bottom: 2px solid #0057b8;
        border-radius: 0px;
	}
	.feedback-submission .feedback-block .progress-step.is-complete {
	   border: none;
		border-bottom: 2px solid #00a46a;
        border-radius: 0px;
	}	
	.webform-progress-tracker .progress-text {
	display: block;
	}
	.feedback-submission .feedback-pages {
		margin-top: 0px;
	}
	.progress-tracker--center {
	margin: 0 1em;
	gap: 0px;
	}
	.feedback-submission .js-form-type-date {
    	width:100% !important;
    }
	
	.feedback-submission .form-select,
.feedback-submission .form-text	{
		width: 100% !important;
	}
	.feedback-submission .form-select
	.feedback-submission .fieldset-wrapper [id^="edit-address-details-country-code"] {
		width : 100% !important;
	}
	
	.registration-form .js-form-type-select, 
	.registration-form .js-form-type-textfield	{
		width:  100%;
	}
	#views-exposed-form-recent-feedback-page-1 #edit-completed-wrapper {
		min-width: 100%
	}
	.view-recent-feedback .view-filters .js-form-type-select,
.view-recent-feedback .view-filters .js-form-type-textfield	,
.view-recent-feedback .view-filters .js-form-type-date{ 
		width: 100%;
	}
		
		.faq-wrapper .faq-box .accordion-item.parent-item {
			padding: 20px 14px;
		}

   }
   
   @media screen and (max-width: 600px) {
	.webform-progress-tracker .progress-text {
		display: block;
   }
   }