.contact-us .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    grid-auto-flow: dense;
}
.contact-us {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}



.contact-us .title-2-bold{
    margin-bottom: 16px;
  
}
.contact-us .contact-form .main-text-medium {
    color: var(--grey);
    margin-bottom: 40px;
    display: block;
}

.contact-us .contact-info{
   
    background: radial-gradient(110.69% 103.28% at 62.84% 100.1%, #B8B4ED 0%, #F4F4FF 100%);
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 40px;
}

.contact-us .contact-info::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(https://storage.googleapis.com/voka-shop-preview-303011/common/1948792f780bd026067e144b966f4ccb12ea68df.webp);
    background-position: center;
    background-size: cover;
    z-index: 1;
}

.contact-us .contact-info-content{
    position: relative;
    z-index: 10;
}

.contact-us .info-title{
    color: var(--black);
    font-weight: 700;
    font-size: 28px;
    line-height: 130%;
    margin-bottom: 32px;
}

.contact-us .contact-info-content .main-text-semibold{
    color: var(--black);
    margin-bottom: 24px;
}

.contact-us .info-items{
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.contact-us .info-items::before{
    content: '';
    display: block;
    width: 1px;
    height: 172px;
    position: absolute;
    background: var(--white);
    top: 0;
    left: 12px;
    z-index: -1;
}

.contact-us .info-items p{
    color: #363738;
}

.contact-us .info-item {
    display: flex;
    gap: 16px;
    align-items: center;
}

.contact-us .info-item span{
    color: #7B62B4;
    font-size: 14px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: var(--white);
    font-weight: 600;
}

.contact-us  label{
    font-weight: 400;
    color: var(--main-black);
    display: block;
    line-height: 1;
}
.contact-us .subject label{
    margin-bottom: 0;
    display: flex;
    align-items: flex-start;
}
.contact-us .top-fields{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 0;
    margin-bottom: 12px;
}

.contact-us .top-fields>p, .contact-us .top-fields+p, .contact-us .top-fields~p:nth-of-type(3), .contact-us form > p:nth-child(4) {
    position: relative;
    margin-bottom: 24px;
}

.contact-us label {
    position: absolute;
    top: 50%;
    left: 16px;
    font-size: 16px;
    transform: translateY(-50%);
    color: var(--n-grey);
    transition: all 0.25s ease-in-out;
}

.contact-us label::after{
    position: absolute;
    top: 0;
    right: -10px;
    display: block;
    content: '*';
    color: var(--black-60);
}

.contact-us label.focused {
    top: 15px;
    font-size: 12px;
    background: var(--white-bg);
    z-index: 2;
    color: #768394;
}

.contact-us.gray label.focused, .contact-us.image label.focused {
    background: var(--main-bg);
}

.contact-us label.area-label {
    position: absolute;
    top: 20px;
    left: 16px;
    font-size: 16px;
    color: var(--grey);
    transition: all 0.25s ease-in-out;
    transform: none;
    padding: 0;
    
}
.contact-us label.area-label::after {
    display: none;
}
.contact-us .wpcf7-form-control-wrap[data-name="your-DETAILS"]{
    display: block;
    min-height: 60px;
}

.contact-us label.area-label.focused {
    top: 9px;
    font-size: 12px;
    background: var(--white-bg);
    z-index: 2;
    color: #768394;
}

.contact-us.gray label.area-label.focused {
    background: var(--main-bg);
}

.contact-us.image label.area-label.focused {
    background: var(--main-bg);
}

.contact-us .wpcf7-not-valid-tip{
    font-size: 10px !important;
    position: absolute;
}

.contact-us .wpcf7 input[type="url"].wpcf7-not-valid, .contact-us .wpcf7 select.wpcf7-not-valid, .contact-us .wpcf7 input[type="email"].wpcf7-not-valid, .contact-us .wpcf7 input[type="tel"].wpcf7-not-valid, .contact-us input[type="text"].wpcf7-not-valid, .contact-us textarea.wpcf7-not-valid{
    border-color: #dc3232;
}

.contact-us .top-fields input, .contact-us select{
    padding: 27px 16px 9px 16px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    font-size: 16px;
    background: transparent;
    color: var(--dark-grey);
    width: 100%;
    font-weight: 500;
}
.contact-us .top-fields input::placeholder, .contact-us select::placeholder, .contact-us textarea::placeholder{
    color: var(--grey);
}

.contact-us select{
    appearance: none; /* Disable the default arrow */
    -webkit-appearance: none; /* For WebKit-based browsers */
    -moz-appearance: none; /* For Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
}

.contact-us #subj{
    margin-top: 36px;
    margin-bottom: 20px;
}

.contact-us .subject .wpcf7-radio{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 24px;
    row-gap: 20px;
}

/* CF7 radio chips for License and Quantity */

.contact-us .license, .contact-us .quantity{
    padding-top: 12px;
    margin-bottom: 20px;
}
.contact-us .license .wpcf7-form-control.wpcf7-radio,
.contact-us .quantity .wpcf7-form-control.wpcf7-radio{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.contact-us .license .wpcf7-list-item,
.contact-us .quantity .wpcf7-list-item{
    margin: 0;
}

.contact-us .license .wpcf7-list-item.first,
.contact-us .quantity .wpcf7-list-item.first,
.contact-us .license .wpcf7-list-item.last,
.contact-us .quantity .wpcf7-list-item.last,
.contact-us .license p > .custom-checkbox,
.contact-us .quantity p > .custom-checkbox{
    display: none;
}
.contact-us .license .custom-checkbox input,
.contact-us .quantity .custom-checkbox input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.contact-us .license .custom-checkbox,
.contact-us .quantity .custom-checkbox{
    position: static;
    transform: none;
}

.contact-us .license label::after, 
.contact-us .quantity label::after{
    display: none;
}
.contact-us .license .wpcf7-list-item-label,
.contact-us .quantity .wpcf7-list-item-label{
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--very-light-grey);
    border-radius: 9999px;
    color: var(--n-dark-grey);
    background: var(--white);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.contact-us .license .wpcf7-list-item-label:hover,
.contact-us .quantity .wpcf7-list-item-label:hover{
    border-color: var(--grey);
}
.contact-us .license .custom-checkbox input:focus-visible + .wpcf7-list-item-label,
.contact-us .quantity .custom-checkbox input:focus-visible + .wpcf7-list-item-label{
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.contact-us .license .custom-checkbox input:checked + .wpcf7-list-item-label,
.contact-us .quantity .custom-checkbox input:checked + .wpcf7-list-item-label{
    border-color: var(--main-black);
    font-weight: 600;
}

.contact-us .item-title{
    display: flex;
    align-items: center;
    gap: 6px;
}
.contact-us .tooltip {
    position: relative;
    cursor: pointer;
} 

.contact-us .tooltip:hover p svg > path:first-child{
    fill: var(--accent-1);
}

.contact-us .tooltip:hover p svg path:nth-child(2),
.contact-us .tooltip:hover p svg path:nth-child(3) {
    stroke: var(--accent-1);
}

.contact-us .tooltip:hover .tooltip-text {
    display: flex;
}
.contact-us .tooltip-text {
    position: absolute;
    top: 31px;
    z-index: 10;
    box-shadow: 0px -1px 10px 0px #00000026;
    border-radius: 8px;
    background: var(--white);
    padding: 12px; 
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    color: var(--grey);
    display: none;
}

.contact-us .tooltip-text .tooltip-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.contact-us .tooltip-text strong {
    color: var(--black);
}

.contact-us .tooltip-close{
    display: none;
}




.contact-us .tooltip-text::before{
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: 50%;
top: -6px;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #FFFFFF;
z-index: 1;
}

.contact-us .item-title > p{
    font-weight: 600;
    color: var(--main-black);
    display: flex;
    gap: 2px;
    align-items: flex-start;

}

.contact-us .item-title{
    margin-bottom: 16px;
}

.contact-us .subject{
    margin-bottom: 36px;
}

.contact-us textarea{
    height: 60px;
    min-height: 60px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    padding: 27px 16px 9px 16px;
    font-size: 16px;
    background: transparent;
    color: var(--dark-grey);
    width: 100%;
    resize: vertical;
}

.contact-us textarea::-webkit-resizer{
    background: linear-gradient(315deg,
        #6C6F77 16%,
        #0000 16% 26%,
        #6C6F77 26% 33%,
        #0000 33% 43%,
        #6C6F77 43% 50%,
        #0000 50% 100%) no-repeat;
    background-size: 90% 90%;
}

#form-agree{
    color: var(--secondary-black);
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 20px;
    padding-top: 10px;
}

#form-agree a{
    color: var(--accent-1);
    text-decoration: underline;
}

#form-agree>span.wpcf7-spinner{
    display: none;
}

.contact-mobile{
    display: none;
}

.contact-us.image{
    background: var(--main-bg);
}

.contact-us.white, .contact-us.gray, .contact-us.image{
    padding: 120px 0 140px 0;
}

.contact-us.white .info, .contact-us.contact-us.gray .info{
    margin-top: 34px;
}
.contact-us #subj{
    font-size: 20px;
    color: var(--main-black);
    font-weight: 600;
}

.contact-us .contact-form #form-agree .small-text{
    font-size: 14px;
    line-height: 140%;
    color: var(--secondary-black);
}
.contact-us .area-text{
margin-bottom: 16px;
    font-weight: 700;
    color: var(--black);
    padding-top: 12px;
}
.contact-us .contact-form #form-agree .small-text-semibold{
   background: var(--accent-1);
   color: var(--white);
   border: none;
   padding: 14px 20px;
   border-radius: 8px;
   cursor: pointer;
}





.contact-us .follow-mobile{
    display: none;
}


#your-DETAILS {
    overflow: hidden;
    resize: none;
  }


@media (max-width: 1919px) {


    .contact-us {
        padding: 100px 0;
    }

    .contact-us .contact-form #form-agree .small-text{
        font-size: 14px;
    }

    .contact-us .title-2-bold {
        margin-bottom: 12px;
    }
  
 
    .contact-us #subj {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .contact-us .subject .wpcf7-radio {
        column-gap: 16px;
        row-gap: 16px;
    }

 
 
    #form-agree {
        color: var(--secondary-black);
    }
    .contact-us.white, .contact-us.gray, .contact-us.image {
        padding: 80px 0 100px 0;
    }
    .contact-us.white .info, .contact-us.contact-us.gray .info, .contact-us.contact-us.image .info {
        margin-top: 24px;
    }
    .contact-us .contact-form{
     
    }


    .contact-us .contact-info{
        padding: 32px;
    }

    .contact-us .info-title{
        font-size: 24px;
        margin-bottom: 24px;
    }

    .contact-us .info-items::before{
        height: 168px;
    }

    .contact-us .contact-form .main-text-medium {
        margin-bottom: 32px;
    }
    
}
@media (max-width: 1439px) {

    .contact-us {
        padding: 80px 0;
    }
  
    #form-agree{
        gap: 16px;
    }
    .contact-us .contact-form #form-agree .small-text{
        font-size: 12px;
    }
  

    .contact-us .top-fields input, .contact-us select {
        padding: 14px 16px;
    }
    .contact-us .top-fields {
        column-gap: 24px;
    }
    .contact-us .subject .wpcf7-radio {
        column-gap: 20px;
        row-gap: 16px;
    }
    .contact-us .subject {
        margin-bottom: 30px;
    }
    .diseases .popular-title {
        margin-bottom: 24px;
    }

    .contact-us.white, .contact-us.gray, .contact-us.image{
        padding: 60px 0 80px 0;
    }

    .contact-us .contact-form #form-agree .default-button {
        font-size: 16px;
        line-height: 22px;
    }


    .app-confirm-popup .cta {
        margin-top: 32px;
        font-size: 16px;
        line-height: 22px;
    }

    .contact-us .contact-info {
        padding: 24px;
        border-radius: 16px;
    }

    .contact-us .info-title {
        font-size: 20px;
    }

    .contact-us .container {
        display: grid;
        grid-template-columns: 572px auto;
        gap: 60px;
    }

    .contact-us .contact-form .main-text-medium {
        margin-bottom: 24px;
    }
}

@media (max-width: 1279px) {
    .contact-us {
        padding: 60px 0 80px 0;
    }
   

    .contact-us .container{
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

  
    .contact-us .contact-form{
        padding: 0 40px;
    }
    .contact-us .subject .wpcf7-radio{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-us .subject {
        margin-bottom: 32px;
    }
   
    .contact-us .container{
        padding: 0;
    }

    .contact-us .contact-info{
        margin: 0 40px;
        padding: 32px;
    }

    .contact-us .info-title {
        font-size: 24px;
    }

    .contact-us .contact-form .main-text-medium {
        margin-bottom: 32px;
    }

 
}

@media (max-width: 1079px) {
    .contact-us .tooltip-text {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding: 24px 20px 40px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    .contact-us .tooltip:hover .tooltip-text {
        display: none;
    }
    
    .contact-us .tooltip-text.active {
        transform: translateY(0);
        display: flex !important;
        padding: 22px 16px;
        gap: 24px;
    }

    .contact-us .tooltip-text strong{
        display: block;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .contact-us .tooltip-text::before{
        display: none !important;
    }
    
    .contact-us .tooltip-close {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    
    .contact-us .tooltip-close:hover {
        background: #e0e0e0;
    }
    
    .contact-us .tooltip-text::before {
        display: none;
    }

        /* Overlay for active tooltip */
    .contact-us .tooltip-overlay{
        position: fixed;
        inset: 0;
        background: #1B1D1E66; /* 40% black per request */
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 999; /* below tooltip which is 1000 */
        display: none;
    }

    body.tooltip-open{
        overflow: hidden;
    }

  
}


@media (max-width: 577px) {
    .contact-us {
        padding: 40px 0 60px 0;
    }

    .contact-us .contact-form .main-text-medium {
        margin-bottom: 24px;
    }

    .contact-us .contact-form{
        padding: 0 16px 0 16px;
    }
    .contact-us .container{
        gap: 60px;
    }
    .contact-us .top-fields p {
        grid-column: 1 / span 2;
    }

    .contact-us .contact-mobile {
        margin-top: 60px;
    }


    .contact-us textarea{
        resize: none;
    }

    .contact-us textarea::-webkit-resizer{
        display: none;
    }

    #form-agree {
        gap: 16px;
        flex-direction: column;
    }

    .contact-us .contact-form #form-agree .small-text-semibold{
        width: 100%;
    }

    .contact-us .follow-mobile{
        margin-top: 32px;
    }

    .contact-us .socials{
        gap: 12px;
    }


    .contact-us .contact-info {
        margin: 0 16px;
        padding: 24px 20px;
    }

    .contact-us .info-title {
        font-size: 20px;
    }

    .contact-us .info-title br{
        display: none;
    }

    .contact-us .contact-info::before{
        background-position: top left;
    }

    .contact-us .info-items::before{
        height: 185px;
        top: 15px

    }

    .contact-us .top-fields{
        row-gap: 12px;
    }
    .contact-us .license .wpcf7-list-item-label, .contact-us .quantity .wpcf7-list-item-label {
        padding: 10px 14px;
    }
}

/*toast styles*/
.toast {
    position: fixed;
    top: 40px;
    border-radius: 10px;
    padding: 16px 18px;
    background-color: var(--white-bg);
    color: #363636;
    border:1px solid #dfdfe3;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 420px;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    opacity: 0;
    right: -450px;
}

.toast-content{
    display: flex;
    gap: 12px;
}

.toast-text{
    display:inline-block;
    padding-top: 6px;
}

#toast-close{
    cursor: pointer;
}

.toast.active{
    opacity: 1;
    right: 20px;
}

@media screen and (max-width: 1439px) {
    .toast {
        font-size: 12px;
    }
}

@media screen and (max-width: 1079px) {
    .toast {
        width: 400px;
        margin-right: 5%;
    }

    .toast.active{
        transform:translateX(10px);
    }
}

@media screen and (max-width: 576px) {
    .toast {
        width: 90%;
        max-width: 400px;
        margin-right: 1%;
    }

}





/* Custom Select (CF7) */
.contact-us .custom-select{
    position: relative;
}
.contact-us .custom-select__native{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.contact-us .custom-select__trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 27px 16px 9px 16px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    font-size: 16px;
    background: transparent;
    color: var(--dark-grey);
    cursor: pointer;
    font-weight: 500;
    min-height: 60px;
}
.contact-us .custom-select__text{
    text-align: left;
    color: var(--dark-grey);
    font-weight: 500;
}
.contact-us .custom-select__arrow{
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27" viewBox="0 0 26 27" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.7038 17.1179L18.6538 12.1679C19.0443 11.7774 19.0443 11.1443 18.6538 10.7539C18.2633 10.3634 17.6303 10.3634 17.2398 10.7539L12.9968 14.9969L8.75381 10.7539C8.36335 10.3634 7.73028 10.3634 7.33981 10.7539C6.94935 11.1443 6.94935 11.7774 7.33981 12.1679L12.2898 17.1179C12.4773 17.3053 12.7316 17.4107 12.9968 17.4107C13.262 17.4107 13.5163 17.3053 13.7038 17.1179Z" fill="%231B1D1E" fill-opacity="0.6"/></svg>') no-repeat center / contain;
    background: currentColor;
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
}

.contact-us .custom-select.is-open .custom-select__arrow{
    transform: translateY(-50%) rotate(180deg);
}
.contact-us .custom-select__list{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    background: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    display: none;
    overflow: auto;
}
.contact-us .custom-select.is-open .custom-select__list{
    display: block;
}
.contact-us .custom-select__option{
    padding: 12px 16px;
    cursor: pointer;
    color: var(--dark-grey);
    font-weight: 500;
    font-size: 16px;
}
.contact-us .custom-select__option:hover{
    background: var(--white-bg);
}
.contact-us .custom-select__option.is-selected{
    background: var(--white-bg);
    font-weight: 600;
}