.contact-p-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    border-bottom: 1px solid #eceff3;
    padding-bottom: 32px;
    margin-top: 50px;
}

.contact-p-top .contact-p-left h1{
    font-family: 'ClashGrotesk-medium';
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -1%;
}

.contact-p-top .contact-p-left{
    display: flex;
    flex-direction: column;
    width: 44%;
    padding: 0 20px 0 0;
}

.contact-p-top .contact-p-left p{
    font-size: 14px;
    color: #666D80;
}

.contact-sss-cta{
    display: flex;
    padding: 24px 16px;
    gap: 20px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #0D0D12;
    box-shadow: 0 1px 2px 0 rgba(164, 172, 185, 0.24), 0 0 0 1px rgba(18, 55, 105, 0.08);
    position: relative;
    overflow: hidden;
    justify-content: end;
    height: 84px;
    text-decoration: none;
    transition: 200ms;
    cursor: pointer;
}

.contact-sss-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 12% 195%, #00161e 0%, #00B7FD 5%, #00B7FD 12%,#0D0D12 35%);
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 450px) {
    .contact-sss-cta-bg {
        background: radial-gradient(circle at 15% 155%, #00161e 0%, #00B7FD 0%, #00B7FD 8%,#0D0D12 40%);
    }
}

.contact-sss-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px 0 rgba(164, 172, 185, 0.32), 0 0 0 1px rgba(18, 55, 105, 0.12);
}

.contact-sss-cta-content{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

.contact-sss-cta > img{
    position: absolute;
    left: 0;
    width: 190px;
    top: 0;
    z-index: 2;
}

.contact-p-top .contact-p-right{
    width: 44%;
    align-self: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #666d80;
}

.contact-p-bottom{
    display: flex;
    justify-content: space-between;
    margin-bottom: 162px;
}

.contact-form-btn{
    padding: 8px 15px 8px 10px;
    margin-top: -16px;
}

.contact-options-bodyElem{
    display: none;
}
.contact-options-bodyElem.--active{
    display: flex;
    flex-direction: column;
}

.contact-options-selector{
    display: flex;
    gap: 8px;
    padding: 12px 24px;
}

.contact-selector-item{
    padding: 10px 12px;
    display: flex;
    gap: 4px;
    font-size: 14px;
    color: #818898;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.contact-selector-item.--active{
    background-color: #000005F2;
    color: #fff;
}

.contact-options-container{
    border: 1px solid #eceff3;
    border-radius: 12px;
}

.contact-options-body{
    padding: 24px;
    border-bottom: 1px solid #eceff3;
}

.contact-p-bottom .contact-p-left{
    width: 44%;
}

.contact-p-bottom .contact-p-right{
    width: 44%;
}

.contact-options-bodyElem .cobe-icon{
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    margin-bottom: 24px;
}

.contact-options-bodyElem .cobe-icon.--blue{
    background-color: rgba(102, 212, 254, 1);
    box-shadow: 0px 4.400000095367432px 4.400000095367432px 0px rgba(255, 255, 255, 0.32) inset;
}


.contact-options-bodyElem .cobe-icon.--orange{
    background-color: #FD8700;
    box-shadow: 0px 4.400000095367432px 4.400000095367432px 0px rgba(255, 255, 255, 0.32) inset;
}
.contact-options-bodyElem .cobe-icon.--yellow{
    background-color: #f5cd00;
    box-shadow: 0px 4.400000095367432px 4.400000095367432px 0px rgba(255, 255, 255, 0.32) inset;
}
.contact-options-bodyElem .cobe-icon.--pink{
    background-color: #f40060;
    box-shadow: 0px 4.400000095367432px 4.400000095367432px 0px rgba(255, 255, 255, 0.32) inset;
}


.contact-options-bodyElem .cobe-title{
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #0d0d12;
    margin-bottom: 4px;
}

.contact-options-bodyElem .cobe-text{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #36394A;
    margin-bottom: 16px;
}

.contact-options-bodyElem .cobe-link{
    color: #0d0d12;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    gap: 6px;
}

@media only screen and (max-width: 991px) {
    .contact-p-top{
        flex-direction: column;
        align-items: center;
        border: none;
        margin-bottom: 0;
        padding-bottom: 5px;
        margin-top: 0;
    }
    .contact-p-bottom{
        flex-direction: column;
        align-items: center;
        margin-bottom: 48px;
    }
    .contact-p-top .contact-p-left{
        width: 100%;
        padding: 0;
    }
    .contact-p-top .contact-p-right{
        width: 100%;
        padding: 0;
    }
    .contact-p-bottom .contact-p-left{
        width: 100%;
      
    }
    .contact-p-bottom .contact-p-right{
        width: 100%;
        margin-top: 32px;
    }
    .contact-options-selector{
        overflow-x: auto;
    }
    .contact-selector-item {
        white-space: nowrap;
    }

}

.contact-p-left-paragraph {
    color: var(--text-normal-500, #666D80);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 991px) {
    .contact-p-left-paragraph {
        font-size: 16px;
        line-height: 24px;
    }
}

.contact-form-disabled {
    pointer-events: none;
}

.contact-form-disabled .contact-textInput-İnnerWrapper input,
.contact-form-disabled textarea,
.contact-form-disabled select,
.contact-form-disabled .captcha,
.contact-form-disabled iframe {
    border: none !important;
    box-shadow: none !important;
    background-color: #F8FAFB !important;
    color: #A4ACB9 !important;
    opacity: 1 !important;
}

.contact-form-disabled .contact-form-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.contact-form-disabled .alert {
    opacity: 1 !important;
    pointer-events: auto !important;
    color: inherit !important;
}

.contact-form-disabled .textInput-name,
.contact-form-disabled .reqInput__label {
    opacity: 1 !important;
    color: inherit !important;
}

.contact-form-disabled .contact-textInput-İnnerWrapper input,
.contact-form-disabled textarea,
.contact-form-disabled select,
.contact-form-disabled .captcha {
    background-color: #F8FAFB !important;
    color: #A4ACB9 !important;
    cursor: not-allowed !important;
    border: none !important;
    box-shadow: none !important;
}

.contact-form-disabled .textInput-innerWrapper,
.contact-form-disabled .contact-textArea-innerWrapper {
    background-color: #F8FAFB !important;
    border: none !important;
    box-shadow: none !important;
}

.contact-form-disabled .textInput-innerWrapper::after,
.contact-form-disabled .contact-textArea-innerWrapper::after {
    display: none !important;
}

.contact-form-disabled iframe {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.contact-form-disabled .textInput-name {
    color: #A4ACB9 !important;
}

.contact-form-btn.btnLink-wIcon {
    background: var(--background-white, #FFF);
    box-shadow: 0px 0px 0px 1px rgba(18, 55, 105, 0.08), 0px 1px 2px 0px rgba(164, 172, 185, 0.24);
    color: #0D0D12 !important;
    border-radius: 62px;
    padding: 8px 20px;
    font-size: 14px;
    line-height: 20px;
    transition: 300ms;
    border: none;
    outline: none;
    width: 100%;
}

.contact-form-btn.btnLink-wIcon:hover {
    color: #00a0df !important;
    box-shadow: 0px 0px 0px 1px #00a0df, 0px 1px 2px 0px #00a0df;
}

.contact-form-error {
    display: none;
    align-items: center;
    gap: 4px;
    color: #dc3545;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    height: 0;
    overflow: hidden;
}

.contact-form-error.show {
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.contact-form-error i {
    font-size: 14px;
}

.mt-3 .contact-form-error {
    margin-top: 0;
    margin-bottom: 0;
}

.mt-3:has(.g-recaptcha) .contact-form-error,
.mt-3:has(iframe[src*="recaptcha"]) .contact-form-error {
    margin-top: 8px;
    margin-bottom: 0;
}

.textInput-innerWrapper.error,
.contact-textArea-innerWrapper.error {
    border-color: #dc3545 !important;
    box-shadow: 0px 0px 0px 1px #dc3545 !important;
}

.contact-textArea-innerWrapper.error::after,
.contact-textArea-innerWrapper.error::after {
    border-color: #dc3545 !important;
}



.textInput-container textarea.error {
    box-shadow: 0 0 0 1px #dc3545 !important;
}

.contact-form .contact-textInput-İnnerWrapper input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown),
.contact-form .form-control:invalid:not(:placeholder-shown) {
    border-color: #dc3545;
}

.contact-textInput-İnnerWrapper {
    padding: 0!important;
}

.contact-textInput-İnnerWrapper input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    color: var(--text-loud-900, #0D0D12);
    z-index: 1;
    border-radius: 62px!important;
    padding: 8px 16px!important;
}

.contact-textInput-İnnerWrapper input::placeholder {
    font-weight: 400;
    color: #818898!important;
    font-size: 14px!important;
}
.contact-form textarea,
.contact-form .form-control {
    font-weight: 400;
}

.form-control::placeholder {
    color: #818898 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.club-application-form input::placeholder,
.club-application-form textarea::placeholder {
    font-weight: 400 !important;
    font-size: 14px !important;
}

.contact-textInput-İnnerWrapper.focus,
.contact-form .contact-textArea-innerWrapper .focus {
    box-shadow: 0 1px 2px 0 rgba(44, 127, 160, 0.40), 0 0 0 1px #57CFFF, 0 0 0 2px #FFF, 0 0 0 3px rgba(87, 207, 255, 0.32)!important;
}

.contact-form textarea:focus,
.contact-form .form-control:focus {
    box-shadow: 0 1px 2px 0 rgba(44, 127, 160, 0.40), 0 0 0 1px #57CFFF, 0 0 0 2px #FFF, 0 0 0 3px rgba(87, 207, 255, 0.32)!important;
    outline: none;
    border: none;
}

.contact-form textarea.form-control::placeholder {
    color: #818898 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}

@media (max-width: 768px) {
    .contact-p-top {
        margin-bottom: 20px;
    }
}

.club-application-form input:-webkit-autofill,
.club-application-form input:-webkit-autofill:hover,
.club-application-form input:-webkit-autofill:focus,
.club-application-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.club-application-form textarea:-webkit-autofill,
.club-application-form textarea:-webkit-autofill:hover,
.club-application-form textarea:-webkit-autofill:focus,
.club-application-form textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.club-application-form.contact-form-disabled input:-webkit-autofill,
.club-application-form.contact-form-disabled input:-webkit-autofill:hover,
.club-application-form.contact-form-disabled input:-webkit-autofill:focus,
.club-application-form.contact-form-disabled input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px #F8FAFB inset !important;
    -webkit-text-fill-color: #A4ACB9 !important;
    background-color: #F8FAFB !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.club-application-form.contact-form-disabled textarea:-webkit-autofill,
.club-application-form.contact-form-disabled textarea:-webkit-autofill:hover,
.club-application-form.contact-form-disabled textarea:-webkit-autofill:focus,
.club-application-form.contact-form-disabled textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px #F8FAFB inset !important;
    -webkit-text-fill-color: #A4ACB9 !important;
    background-color: #F8FAFB !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

#contact-form.contact-form-disabled input:-webkit-autofill,
#contact-form.contact-form-disabled input:-webkit-autofill:hover,
#contact-form.contact-form-disabled input:-webkit-autofill:focus,
#contact-form.contact-form-disabled input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px #F8FAFB inset !important;
    -webkit-text-fill-color: #A4ACB9 !important;
    background-color: #F8FAFB !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.club-application-form input:-moz-autofill,
.club-application-form input:-moz-autofill:focus {
    background-color: transparent !important;
    color: inherit !important;
}

.club-application-form textarea:-moz-autofill,
.club-application-form textarea:-moz-autofill:focus {
    background-color: transparent !important;
    color: inherit !important;
}

.club-application-form input:-ms-input-placeholder {
    background-color: transparent !important;
    color: inherit !important;
}

.club-application-form textarea:-ms-input-placeholder {
    background-color: transparent !important;
    color: inherit !important;
}

.club-application-form.contact-form-disabled input,
.club-application-form.contact-form-disabled textarea,
.club-application-form.contact-form-disabled select,
.club-application-form.contact-form-disabled .captcha,
.club-application-form.contact-form-disabled iframe {
    opacity: 1 !important;
    pointer-events: none !important;
    background-color: #F8FAFB !important;
    color: #A4ACB9 !important;
    cursor: not-allowed !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: none !important;
}

.club-application-form.contact-form-disabled .textInput-innerWrapper,
.club-application-form.contact-form-disabled .contact-textArea-innerWrapper {
    background-color: #F8FAFB !important;
    border: none !important;
    box-shadow: none !important;
}

.club-application-form .alert {
    padding: 0 !important;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.contact-form .alert,
.contact-p-left .alert,
#contact-form .alert,
#contact-messages .alert {
    padding: 0 !important;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

#contact-form input:-webkit-autofill,
#contact-form input:-webkit-autofill:hover,
#contact-form input:-webkit-autofill:focus,
#contact-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

#contact-form textarea:-webkit-autofill,
#contact-form textarea:-webkit-autofill:hover,
#contact-form textarea:-webkit-autofill:focus,
#contact-form textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.contact-form input:-moz-autofill,
.contact-form input:-moz-autofill:focus,
#contact-form input:-moz-autofill,
#contact-form input:-moz-autofill:focus,
.contact-p-left input:-moz-autofill,
.contact-p-left input:-moz-autofill:focus,
.contact-textInput-İnnerWrapper input:-moz-autofill,
.contact-textInput-İnnerWrapper input:-moz-autofill:focus,
.textInput-innerWrapper input:-moz-autofill,
.textInput-innerWrapper input:-moz-autofill:focus {
    background-color: transparent !important;
    color: inherit !important;
}

.contact-form textarea:-moz-autofill,
.contact-form textarea:-moz-autofill:focus,
#contact-form textarea:-moz-autofill,
#contact-form textarea:-moz-autofill:focus,
.contact-p-left textarea:-moz-autofill,
.contact-p-left textarea:-moz-autofill:focus {
    background-color: transparent !important;
    color: inherit !important;
}

.contact-form input:-ms-input-placeholder,
#contact-form input:-ms-input-placeholder,
.contact-p-left input:-ms-input-placeholder,
.contact-textInput-İnnerWrapper input:-ms-input-placeholder,
.textInput-innerWrapper input:-ms-input-placeholder {
    background-color: transparent !important;
    color: inherit !important;
}

.contact-form textarea:-ms-input-placeholder,
#contact-form textarea:-ms-input-placeholder,
.contact-p-left textarea:-ms-input-placeholder {
    background-color: transparent !important;
    color: inherit !important;
}

.contact-p-left .textInput-container #contact-messages .alert,
.contact-p-left #contact-form #contact-messages .alert,
.contact-p-left .contact-form #contact-messages .alert {
    padding: 0 !important;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.contact-form .textInput-innerWrapper.error,
.contact-form .contact-textArea-innerWrapper.error,
.contact-form textarea.error {
    box-shadow: 0 0 0 1px #dc3545 !important;
    border-color: #dc3545 !important;
}

.contact-form .textInput-innerWrapper.error:focus-within,
.contact-form .contact-textArea-innerWrapper.error:focus-within {
    box-shadow: 0 0 0 1px #dc3545 !important;
}

.contact-textArea-innerWrapper {
    border: none;
    box-shadow: 0 1px 2px 0 rgba(18, 55, 105, 0.08), 0 0 0 1px rgba(9, 25, 72, 0.13);
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    display: flex;
}

.contact-textArea-innerWrapper input::placeholder {
    font-weight: 400!important;
    color: #818898 !important;
    font-size: 14px !important;
}

.contact-textArea-innerWrapper::placeholder {
    font-size: 14px !important;
  }