#price-block {
background-color: var(--colors-second);
padding-top: 100px;
padding-bottom: 100px;
margin-top: 100px;
}
#price-block .price__container .price__title {
color: var(--text-alt-head);
}
#price-block .price__container .price-block {
display: flex;
gap: 30px;
}
#price-block .price__container .price-block .price-left {
background: var(--bg-primary-main);
padding: 30px;
display: flex;
flex-direction: column;
gap: 15px;
min-width: 635px;
max-width: 700px;
}
#price-block .price__container .price-block .price-left .row {
display: flex;
justify-content: space-between;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--bg-primary-stroke);
}
#price-block .price__container .price-block .price-left .row .price-name {
color: var(--text-primary-main);
}
#price-block .price__container .price-block .price-left .row .price-number {
color: var(--text-primary-main);
white-space: nowrap;
}
#price-block
.price__container
.price-block
.price-left
.row
.price-number
span {
color: var(--colors-second);
font-family: inherit;
font-weight: 600;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
line-height: 110.00000000000001%;
letter-spacing: 0%;
}
#price-block .price__container .price-right {
background: var(--bg-primary-main);
max-width: 529px;
}
#price-block .price__container .price-right .form.form-v2 {
padding: 30px;
padding-top: 10px;
}
#price-block .price__container .price-right .form.form-v2 .price-form-desc {
color: var(--text-primary-main);
margin-top: 20px;
}
#price-block .price__container .price-right .form.form-v2 .inputs__holder {
margin-top: 30px;
gap: 15px;
}
#price-block .price__container .price-right .form.form-v2 .btn.invert {
margin-top: 30px;
border: 1px solid var(--colors-main);
background: transparent;
color: var(--colors-main);
position: relative;
z-index: 1;
transition: var(--transition);
}
#price-block .price__container .price-right .form.form-v2 .btn.invert:hover {
color: var(--text-alt-head);
transition: var(--transition);
}
#price-block .price__container .price-right .form.form-v2 .btn.invert::before {
content: "";
background: linear-gradient(260.8deg, #ff5700 8.5%, #ff874a 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: var(--transition);
border-radius: 10px;
opacity: 0;
}
#price-block
.price__container
.price-right
.form.form-v2
.btn.invert:hover::before {
opacity: 1;
transition: var(--transition);
}
#price-block .price__container .price-buttons {
display: flex;
gap: 15px;
align-items: center;
margin-top: 30px;
}
#price-block .price__container .price__btn {
padding: 15px 30px 15px 25px;
gap: 10px;
border-radius: 10px;
box-shadow: 0px 4px 0px 0px #cc4500;
position: relative;
z-index: 1;
transition: var(--transition);
background: var(--colors-main);
}
#price-block .price__container .price__btn:hover {
transition: var(--transition);
}
#price-block .price__container .price__btn::before {
content: "";
background: linear-gradient(260.8deg, #ff5700 8.5%, #ff874a 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: var(--transition);
border-radius: 10px;
}
#price-block .price__container .price__btn:hover::before {
transition: var(--transition);
opacity: 0;
}
#price-block .price__container .price__btn .btn__text {
color: var(--text-alt-head);
white-space: nowrap;
}
#price-block .price__container .price-buttons .btn-add__text {
color: var(--text-alt-main);
max-width: 200px;
margin-left: 15px;
}
#price-block .price__container .price-buttons .btn-add__text span {
position: relative;
display: inline-block;
z-index: 1;
}
#price-block .price__container .price-buttons .btn-add__text span::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: -2px;
height: 5px;
background-color: var(--colors-main);
z-index: -1;
}
#price-block .price__container .price-buttons .soc {
height: 80px;
width: 80px;
}
#price-block .price__container .price-buttons .soc svg {
width: 40px;
height: 40px;
}
@media (max-width: 1400px) {
#price-block .price__container .price-block .price-left {
min-width: unset;
}
}
@media (max-width: 1200px) {
#price-block .price__container .price-right .form.form-v2 {
padding: 15px;
}
#price-block .price__container .price-block .price-left {
width: 100%;
max-width: unset;
padding: 15px;
}
#price-block .price__container .price-block .price-right {
width: 100%;
max-width: unset;
}
}
@media (max-width: 1024px) {
#price-block .price__container .price-block {
flex-direction: column;
}
#price-block .price__container .price-block .price-right {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#price-block .price__container .price-block .price-right svg {
display: none;
}
#price-block .price__container .price-right .form.form-v2 .inputs__holder {
align-items: center;
}
#price-block
.price__container
.price-right
.form.form-v2
.inputs__holder
.input__wrapper {
min-width: 490px;
}
}
@media (max-width: 768px) {
#price-block {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
}
#price-block .price__container .price-right .form.form-v2 .btn.invert {
margin-top: 15px;
}
#price-block .price__container .price-right .form.form-v2 .price-form-desc {
margin-top: 15px;
}
#price-block .price__container .price-right .form.form-v2 .inputs__holder {
margin-top: 15px;
}
#price-block .price__container .price__btn {
padding: 10px;
}
#price-block .price__container .price-buttons .soc {
width: 70px;
height: 70px;
}
#price-block .price__container .price-buttons .btn-add__text {
display: none;
}
}
@media (max-width: 600px) {
#price-block
.price__container
.price-right
.form.form-v2
.inputs__holder
.input__wrapper {
min-width: unset;
width: 100%;
}
}
@media (max-width: 480px) {
#price-block .price__container .price-block .price-right {
text-align: unset;
}
#price-block .price__container .price-block .price-left .row {
flex-direction: column;
}
}
@media (max-width: 450px) {
#price-block .price__container .price-buttons .soc {
display: none;
}
}
#price-block .price-left .row.hidden {
display: none !important;
}
#price-block .price-left__toggle {
margin-top: 30px;
text-align: center;
}
#price-block .price-left .btn.invert {
background: transparent;
color: var(--text-primary-main);
border: none;
position: relative;
z-index: 1;
transition: var(--transition);
cursor: pointer;
font-weight: 600;
padding: 0;
}
#price-block .price-left .btn.invert:hover::before {
opacity: 1;
}
#price-block .price-left .btn.invert:hover {
color: var(--colors-main);
}