Website/public/assets/scss/layout/_call-back.scss
2025-04-08 14:37:17 +07:00

101 lines
2.7 KiB
SCSS

@use "../utils" as *;
/*=============================
18. Call-back
===============================*/
.call-back {
&-area {
background: var(--tg-color-dark-blue);
padding: 80px 0 85px;
position: relative;
z-index: 1;
overflow: hidden;
&-two {
background: transparent;
padding: 70px;
z-index: 2;
}
}
&-wrap {
background: var(--tg-theme-secondary);
padding: 90px 80px 75px;
@include border-radius(15px);
@media #{$lg} {
padding: 50px 25px 50px;
}
}
&-content {
@media #{$md} {
text-align: center;
margin-bottom: 30px;
}
& .shape {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
filter: grayscale(45%);
@media #{$md} {
display: none;
}
}
& p {
margin-bottom: 0;
color: #d0d0dd;
font-weight: 500;
width: 90%;
@media #{$lg} {
width: 100%;
}
}
}
&-form {
& form {
& .row {
--bs-gutter-x: 15px;
}
& .form-grp {
margin-bottom: 15px;
& input {
width: 100%;
border: none;
@include border-radius(4px);
color: var(--tg-heading-color);
background: var(--tg-color-white-default);
font-size: 15px;
font-weight: 500;
padding: 15px 18px;
height: 50px;
&::placeholder {
font-size: 15px;
font-weight: 500;
color: #475569;
}
}
}
& .btn {
width: 100%;
justify-content: center;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
padding: 17px 24px;
@include border-radius(4px);
&::before {
background: var(--tg-color-gray-3);
}
&::after {
display: none;
}
&:hover {
color: var(--tg-heading-color);
background-color: var(--tg-theme-primary);
}
&:disabled {
background-color: var(--tg-theme-primary);
}
}
}
}
}