:root {
--navy-900: #0F1B2D;
--navy-800: #1B2A3D;
--navy-700: #253B52;
--navy-600: #334D6E;
--red-600: #C62828;
--red-500: #E53935;
--red-400: #EF5350;
--orange-500: #F57C00;
--orange-400: #FF9800;
--green-600: #2E7D32;
--green-500: #43A047;
--blue-600: #1565C0;
--blue-500: #1E88E5;
--gray-50: #F8FAFC;
--warm-50: #FFFBF5;
--warm-100: #FFF3E0;
--shadow-sm: 0 1px 3px rgba(15,27,45,0.06);
--shadow-md: 0 4px 16px rgba(15,27,45,0.08);
--shadow-lg: 0 12px 40px rgba(15,27,45,0.12);
--shadow-xl: 0 20px 60px rgba(15,27,45,0.16);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
--bs-body-font-family: 'Inter', -apple-system, sans-serif;
--bs-body-color: #1B2A3D;
--bs-body-bg: #fff;
--bs-body-line-height: 1.65;
min-width: 380px;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Montserrat', sans-serif;
line-height: 1.2;
}
a{
text-decoration: none;
color: inherit;
}
img{
max-width: 100%;
display: block;
}
ul{
list-style: none;
}
/*
* Button
*/
.btn{
--bs-btn-font-family: 'Montserrat', sans-serif;
--bs-btn-font-weight: 700;
--bs-btn-border-radius: var(--radius-sm);
white-space: nowrap;
transform: translateY(0);
transition: var(--transition);
}
.btn:hover{
box-shadow: var(--bs-btn-hover-box-shadow);
transform: translateY(-2px);
transition: var(--transition);
}
.btn-lg {
--bs-btn-padding-x: 36px;
--bs-btn-padding-y: 16px;
--bs-btn-font-size: 15px;
}
.btn-md {
--bs-btn-padding-x: 28px;
--bs-btn-padding-y: 13px;
--bs-btn-font-size: 14px;
}
.btn-sm {
--bs-btn-padding-x: 20px;
--bs-btn-padding-y: 10px;
--bs-btn-font-size: 13px;
}
.btn-red{
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--red-500);
--bs-btn-border-color: var(--red-500);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: var(--red-600);
--bs-btn-hover-border-color: var(--red-600);
--bs-btn-hover-box-shadow: 0 6px 20px rgba(229,57,53,0.35);
--bs-btn-active-color: var(--bs-white);
--bs-btn-active-bg: var(--red-600);
--bs-btn-active-border-color: var(--red-600);
--bs-btn-focus-box-shadow: 0 6px 20px rgba(229,57,53,0.35);
}
.btn-outline-white {
--bs-btn-color: var(--bs-white);
--bs-btn-bg: transparent;
--bs-btn-border-color: rgba(255,255,255,0.35);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: rgba(255,255,255,0.08);
--bs-btn-hover-border-color: var(--bs-white);
--bs-btn-active-color: var(--bs-white);
--bs-btn-active-bg: rgba(255,255,255,0.08);
--bs-btn-active-border-color: var(--bs-white);
}
.btn-outline-dark {
--bs-btn-color: var(--navy-800);
--bs-btn-bg: transparent;
--bs-btn-border-color: var(--bs-gray-300);
--bs-btn-hover-color: var(--navy-800);
--bs-btn-hover-bg: transparent;
--bs-btn-hover-border-color: var(--navy-800);
--bs-btn-active-color: var(--navy-800);
--bs-btn-active-bg: transparent;
--bs-btn-active-border-color: var(--navy-800);
}
.btn-white {
--bs-btn-color: var(--red-500);
--bs-btn-bg: var(--bs-white);
--bs-btn-border-color: var(--bs-white);
--bs-btn-hover-color: var(--red-500);
--bs-btn-hover-bg: var(--bs-white);
--bs-btn-hover-border-color: var(--bs-white);
--bs-btn-hover-box-shadow: 0 6px 20px rgba(0,0,0,0.15);
--bs-btn-active-color: var(--red-500);
--bs-btn-active-bg: var(--bs-white);
--bs-btn-active-border-color: var(--bs-white);
--bs-btn-focus-box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.offcanvas{
--bs-offcanvas-bg: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(12px);
}
.offcanvas-header{
background: var(--navy-900);
}
.offcanvas-title{
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 22px;
color: var(--bs-white);
letter-spacing: 0.5px;
}
.offcanvas-title span {
color: var(--red-400);
}
.offcanvas .navbar-nav{
--bs-nav-link-padding-x: 14px;
--bs-nav-link-padding-y: 8px;
--bs-nav-link-font-size: 16px;
--bs-nav-link-font-weight: 500;
}
.offcanvas-footer{
display: flex;
flex-direction: column;
gap: 10px;
padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
font-size: 16px;
line-height: 1.4;
border-top: 1px solid var(--bs-gray-200);
background: var(--gray-50);
}
.offcanvas-footer-phone,
.offcanvas-footer-email{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--navy-800);
white-space: nowrap;
}
.offcanvas-footer-phone{
font-size: 18px;
}
.offcanvas-footer-messenger{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.offcanvas-footer-messenger a {
color: var(--red-400);
transition: var(--transition);
}
.offcanvas-footer-messenger a:hover {
color: var(--bs-white);
}
.offcanvas-footer-messenger .messenger {
display: flex;
align-items: center;
gap: 5px;
color: var(--red-500)
}
.offcanvas-footer-messenger .messenger:hover{
color: var(--bs-white);
}
.offcanvas-footer-messenger .messenger svg{
width: 24px;
height: 24px;
fill: currentColor;
}
.modal{
--bs-modal-bg: rgb(0 0 0 / 22%);
--bs-modal-padding: 24px;
--bs-modal-border-color: rgba(255, 255, 255, 0.12);
--bs-modal-header-padding: 24px;
--bs-modal-header-border-width: 0;
backdrop-filter: blur(12px);
}
.modal-header{
padding-bottom: 0;
}
.modal-title{
color: var(--bs-white);
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.modal-subtitle{
display: flex;
margin-top: 10px;
font-size: 14px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.7);
}
.btn-close{
--bs-btn-close-focus-shadow: none;
--bs-btn-close-color: var(--bs-white);
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.modal-body{
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
.modal .form-group{
margin-bottom: 14px;
}
.modal .form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modal .form-group .form-control,
.modal .form-group .form-select{
width: 100%;
padding: 11px 14px;
color: var(--bs-white);
font-size: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
transition: var(--transition);
}
.modal .form-group .form-control::placeholder {
color: rgba(255,255,255,0.3);
}
.modal .form-group .form-control:focus,
.modal .form-group .form-select:focus,
.modal .form-group .form-control.is-invalid,
.modal .form-group .form-select.is-invalid{
outline: none;
border-color: var(--red-400);
background: rgba(255,255,255,0.12);
box-shadow: none;
}
.modal .form-group .form-select{
appearance: none;
cursor: pointer;
}
.modal .form-group .form-select option {
background: var(--navy-800);
color: var(--bs-white);
}
.modal .btn-submit{
margin-top: 6px;
}
.modal .form-note{
font-size: 11px;
color: rgba(255,255,255,0.35);
text-align: center;
margin-top: 12px;
line-height: 1.4;
}
/*
* Top bar
*/
.top-bar {
background: var(--navy-900);
padding: 8px 0;
font-size: 13px;
color: rgba(255,255,255,0.7);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.top-bar>.container{
display: flex;
align-items: center;
justify-content: space-between;
}
.top-bar-left {
display: flex;
align-items: center;
gap: 24px;
}
.top-bar-right {
display: flex;
align-items: center;
gap: 20px;
}
.top-bar a {
color: rgba(255,255,255,0.7);
transition: var(--transition);
}
.top-bar a:hover {
color: var(--bs-white);
}
.top-bar .messenger {
display: flex;
align-items: center;
gap: 5px;
color: rgba(255,255,255,0.7);
}
.top-bar .messenger:hover{
color: var(--bs-white);
}
.top-bar .messenger svg{
width: 16px;
height: 16px;
fill: currentColor;
}
/*
* Header
*/
.header{
--bs-navbar-brand-margin-end: 0;
--bs-navbar-brand-padding-y: 0;
--bs-navbar-brand-font-size: 21px;
--bs-navbar-brand-color: var(--navy-800);
--bs-navbar-nav-link-padding-x: 10px;
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--bs-gray-200);
transition: var(--transition);
}
.header.scrolled {
box-shadow: var(--shadow-md);
}
.header>.container{
height: 50px;
}
.header .navbar-brand{
display: flex;
align-items: center;
flex: 0 0 auto;
/*gap: 3px;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
letter-spacing: 0.5px;*/
}
.header .navbar-brand img{
margin: calc(-1 * var(--bs-navbar-padding-y)) 0;
height: calc(50px + (var(--bs-navbar-padding-y) * 2));
object-fit: contain;
object-position: center;
}
.header .navbar-brand>span{
color: var(--red-500);
}
.header .navbar-nav {
--bs-nav-link-padding-x: 14px;
--bs-nav-link-padding-y: 8px;
--bs-nav-link-font-size: 14px;
--bs-nav-link-font-weight: 500;
--bs-nav-link-color: var(--bs-gray-600);
--bs-nav-link-hover-color: var(--navy-800);
--bs-navbar-active-color: var(--navy-800);
display: flex;
flex-direction: row;
gap: 4px;
}
.header .nav-link {
position: relative;
border-radius: 6px;
transition: var(--transition);
}
.header .nav-link:hover,
.header .nav-link.active {
background: var(--bs-gray-100);
transition: var(--transition);
}
.header .nav-link.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 14px;
right: 14px;
height: 2px;
background: var(--red-500);
border-radius: 1px;
}
.header-actions{
display: flex;
align-items: center;
gap: 16px;
}
.header-phone{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.header-phone-number{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--navy-800);
white-space: nowrap;
}
.header-phone-number:hover{
color: var(--red-500);
}
.header-phone-label{
font-size: 11px;
color: var(--bs-gray-400);
font-weight: 500;
white-space: nowrap;
}
.header-callback{
--bs-btn-padding-x: 15px;
--bs-btn-padding-y: 5px;
height: 40px;
}
.header-callback>svg{
width: 20px;
height: 20px;
fill: currentColor;
}
.header-callback>span{
display: none;
}
.header .navbar-toggler{
height: 40px;
}
.header .navbar-toggler:focus{
box-shadow: none;
}
@media (min-width: 1200px) {
.header{
--bs-navbar-nav-link-padding-x: 14px;
}
.header>.container{
height: 72px;
}
.header .navbar-brand img{
height: calc(72px + (var(--bs-navbar-padding-y) * 2));
}
.header-callback{
--bs-btn-padding-x: 20px;
--bs-btn-padding-y: 10px;
height: auto;
}
.header-callback>svg{
display: none;
}
.header-callback>span{
display: inline-block;
}
}
@media (max-width: 500px) {
.header{
--bs-navbar-brand-font-size: 16px;
--bs-navbar-toggler-padding-x: 7px;
}
.header>.container{
flex-wrap: nowrap;
}
.header .navbar-brand{
flex-direction: column;
line-height: 0.5;
}
.header-actions{
gap: 10px;
}
.header-callback{
--bs-btn-padding-x: 10px;
}
}
/*
* Breadcrumbs
*/
.breadcrumbs-section {
background: var(--gray-50);
border-bottom: 1px solid var(--bs-gray-200);
padding: 14px 0;
}
.breadcrumb{
--bs-breadcrumb-margin-bottom: 0;
--bs-breadcrumb-font-size: 14px;
--bs-breadcrumb-divider: "";
--bs-breadcrumb-divider-color:#000;
--bs-breadcrumb-item-active-color: var(--red-500);
font-weight: 500;
}
.breadcrumb-item+.breadcrumb-item::before{
display: inline-block;
width: 10px;
height: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: 15px;
float: none;
padding-right: 0;
opacity: 0.5;
margin-right: var(--bs-breadcrumb-item-padding-x);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");
}
.breadcrumb a:hover{
color: var(--red-500);
}
/*
* Hero
*/
.hero-section {
position: relative;
background: var(--navy-900);
}
.hero-section>.container{
position: relative;
z-index: 2;
padding-top:40px;
padding-bottom:40px;
}
.hero-section-bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg,
rgba(15,27,45,0.92) 0%,
rgba(27,42,61,0.85) 50%,
rgba(37,59,82,0.78) 100%
),
url('data:image/svg+xml,');
background-size: cover;
z-index: 1;
}
.hero-section-bg::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at 70% 50%, rgba(229,57,53,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(30,136,229,0.06) 0%, transparent 50%);
pointer-events: none;
}
.hero-section-bg::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px; z-index: 1;
}
.hero-section-bg>img{
position: absolute;
z-index: 3;
left:0;
right: 0;
bottom: 0;
width: 100%;
height: 45%;
object-fit: cover;
object-position: center;
opacity: 0.25;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}
.hero-section-badges{
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.hero-section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(229,57,53,0.15);
border: 1px solid rgba(229,57,53,0.3);
color: var(--red-400);
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 20px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.hero-section-badge.white{
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.35);
color: var(--bs-white);
}
.hero-section-badge svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.hero-section-inner{
position: relative;
z-index: 1;
width: 100%;
}
.hero-section-title>*{
font-size: 32px;
font-weight: 900;
color: var(--bs-white);
margin-bottom: 20px;
letter-spacing: -1px;
line-height: 1.1;
}
.hero-section-title>* .accent{
color: var(--red-400);
}
.hero-section-subtitle{
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin-bottom: 24px;
max-width: 540px;
}
.hero-section-stats {
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.hero-section-stat {
display: flex;
flex-direction: column;
text-align: left;
}
.hero-section-stat-value {
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 800;
color: var(--bs-white);
line-height: 1;
margin-bottom: 4px;
}
.hero-section-stat-value span {
color: var(--red-500)
}
.hero-section-stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.hero-section-buttons {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
@media (min-width: 576px) {
.hero-section>.container {
padding-top: 40px;
padding-bottom: 80px;
}
.hero-section-bg>img{
height: 55%;
}
.hero-section-title>*{
font-size: 38px;
}
.hero-section-subtitle{
font-size: 18px;
}
.hero-section-stat-value{
font-size: 32px;
}
}
@media (min-width: 768px) {
.hero-section-bg>img{
top: 0;
right: 0;
left:auto;
width: 50%;
height: 100%;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 100%);
}
.hero-section-subtitle{
margin-bottom: 36px;
}
}
@media (min-width: 992px) {
.hero-section>.container{
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (max-width: 768px) {
.hero-section-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
.hero-section-scroll{
position: absolute;
bottom: 30px;
left: 50%;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.4);
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
animation: float 2s ease-in-out infinite;
transform: translateX(-50%);
}
@keyframes float {
0%,100%{
transform: translateX(-50%) translateY(0);
}
50%{
transform: translateX(-50%) translateY(6px);
}
}
.hero-section-scroll svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
}
/*
* Hero-form
*/
.hero-section-form{
width: 100%;
background: rgba(255,255,255,0.06);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 32px;
}
.hero-section-form h3{
font-size: 18px;
font-weight: 700;
color: var(--bs-white);
margin-bottom: 6px;
}
.hero-section-form form.loading{
position: relative;
pointer-events: none;
}
.hero-section-form form.loading>*{
position: relative;
z-index: 1!important;
opacity: 0.25;
}
.hero-section-form form.loading::after{
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='135' height='140' viewBox='0 0 135 140' fill='%23e01839'%3E%3Crect y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.5s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite'/%3E%3Canimate attributeName='y' begin='0.5s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='30' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.25s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite'/%3E%3Canimate attributeName='y' begin='0.25s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='60' width='15' height='140' rx='6'%3E%3Canimate attributeName='height' begin='0s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite'/%3E%3Canimate attributeName='y' begin='0s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='90' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.25s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite'/%3E%3Canimate attributeName='y' begin='0.25s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='120' y='10' width='15' height='120' rx='6'%3E%3Canimate attributeName='height' begin='0.5s' dur='1s' values='120;110;100;90;80;70;60;50;40;140;120' calcMode='linear' repeatCount='indefinite'/%3E%3Canimate attributeName='y' begin='0.5s' dur='1s' values='10;15;20;25;30;35;40;45;50;0;10' calcMode='linear' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
}
.hero-section-form .form-subtitle {
font-size: 13px;
color: rgba(255,255,255,0.5);
margin-bottom: 24px;
}
.hero-section-form .form-group{
margin-bottom: 14px;
}
.hero-section-form .form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-section-form .form-group .form-control,
.hero-section-form .form-group .form-select{
width: 100%;
padding: 11px 14px;
color: var(--bs-white);
font-size: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
transition: var(--transition);
}
.hero-section-form .form-group .form-control::placeholder {
color: rgba(255,255,255,0.3);
}
.hero-section-form .form-group .form-control:focus,
.hero-section-form .form-group .form-select:focus,
.hero-section-form .form-group .form-control.is-invalid,
.hero-section-form .form-group .form-select.is-invalid{
outline: none;
border-color: var(--red-400);
background: rgba(255,255,255,0.12);
box-shadow: none;
}
.hero-section-form .form-group .form-select{
appearance: none;
cursor: pointer;
}
.hero-section-form .form-group .form-select option {
background: var(--navy-800);
color: var(--bs-white);
}
.hero-section-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.hero-section-form .btn-submit{
margin-top: 6px;
}
.hero-section-form .form-note{
font-size: 11px;
color: rgba(255,255,255,0.35);
text-align: center;
margin-top: 12px;
line-height: 1.4;
}
@media (max-width: 576px) {
.hero-section-form{
padding: 20px;
}
}
/*
* Hero-home
*/
.hero-section.home {
position: relative;
min-height: 680px;
display: flex;
align-items: center;
background: var(--navy-900);
overflow: hidden;
}
.hero-section.home>.container{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
padding-top: 32px;
padding-bottom: 32px;
}
.hero-section.home .hero-section-inner{
width: 100%;
}
@media (min-width: 576px) {
.hero-section.home>.container{
padding: 32px 0;
}
.hero-section.home>.container{
gap: 32px
}
}
@media (min-width: 768px) {
.hero-section.home>.container{
padding-top: 40px
padding-bottom: 90px;
}
.hero-section.home>.container{
gap: 40px
}
}
@media (min-width: 992px) {
.hero-section.home>.container{
padding-top: 80px;
padding-bottom: 0;
display: grid;
grid-template-columns: 1fr 380px;
gap: 60px;
}
}
/*
* Hero-project
*/
.hero-section.project>.container{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
padding-top: 32px;
padding-bottom: 32px;
}
.hero-section-project{
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
padding: 32px;
}
.hero-section-project>.row{
--bs-gutter-x: 15px;
--bs-gutter-y: 15px;
}
.hero-section-project-items.weight{
}
.hero-section-project-items{
}
@media (min-width: 576px) {
.hero-section.project>.container{
padding-top: 32px;
padding-bottom: 32px;
gap: 32px;
}
}
@media (min-width: 768px) {
.hero-section.project>.container{
padding-top: 40px;
padding-bottom: 80px;
gap: 40px;
}
}
@media (min-width: 992px) {
.hero-section.project>.container{
padding-top: 80px;
padding-bottom: 80px;
display: grid;
grid-template-columns: 1fr 500px;
gap: 60px;
}
}
/*
* Hero-contacts
*/
.hero-section.contacts>.container{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
padding-top: 32px;
padding-bottom: 32px;
}
.hero-section-contacts>.row{
--bs-gutter-x: 15px;
--bs-gutter-y: 15px;
}
.hero-section-contacts-item{
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
padding: 20px;
transition: var(--transition);
}
.hero-section-contacts-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
}
.hero-section-contacts-item-icon{
padding-bottom: 5px;
}
.hero-section-contacts-item-icon svg{
width: 30px;
height: 30px;
fill: var(--red-400);
}
.hero-section-contacts-item-lable{
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
font-weight: 300;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-section-contacts-item-value{
color: var(--bs-white);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
}
@media (min-width: 576px) {
.hero-section.contacts>.container{
padding-top: 32px;
padding-bottom: 32px;
gap: 32px;
}
}
@media (min-width: 768px) {
.hero-section.contacts>.container{
padding-top: 40px;
padding-bottom: 80px;
gap: 40px;
}
}
@media (min-width: 992px) {
.hero-section.contacts>.container{
padding-top: 80px;
padding-bottom: 80px;
display: grid;
grid-template-columns: 1fr 500px;
gap: 60px;
}
}
/*
* Clients bar
*/
.clients-bar {
background: var(--gray-50);
border-bottom: 1px solid var(--bs-gray-200);
padding: 20px 0;
}
.clients-bar>.container{
display: flex;
align-items: center;
gap: 48px;
}
.clients-bar-label{
font-size: 12px;
font-weight: 700;
color: var(--bs-gray-400);
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
}
.clients-logos{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
flex: 1;
overflow: hidden;
}
.client-logo{
height: 32px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.4;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--bs-gray-600);
white-space: nowrap;
filter: grayscale(1);
transition: var(--transition);
}
.client-logo:hover{
opacity: 0.8;
filter: grayscale(0);
}
@media (min-width: 992px) {
.clients-bar {
padding: 36px 0;
}
}
@media (max-width: 1200px) {
.clients-bar>.container{
gap: 20px;
flex-direction: column;
}
.clients-logos{
gap: 10px 20px;
}
}
/*
* Section heading
*/
.section-head {
margin-bottom: 32px;
}
.section-head-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.section-head h2{
font-size: 26px;
font-weight: 800;
color: var(--navy-800);
letter-spacing: -0.5px;
}
.section-head h2 .red{
color: var(--red-500);
}
.section-head .subtitle{
font-size: 14px;
color: var(--bs-gray-500);
margin-top: 8px;
margin-bottom: 0;
font-weight: 400;
}
.section-head .link-all {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--red-500);
transition: var(--transition);
white-space: nowrap;
flex-shrink: 0;
}
.section-head .link-all:hover {
gap: 10px;
}
.section-head .link-all svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
@media (min-width: 768px) {
.section-head h2{
font-size: 32px;
}
}
@media (min-width: 992px) {
.section-head {
margin-bottom: 48px;
}
.section-head h2{
font-size: 38px;
}
.section-head .subtitle{
font-size: 16px;
}
}
/*
* Services
*/
.services-section{
padding: 32px 0;
background: var(--bs-white);
}
.services-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.service-card{
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 32px 28px 28px;
overflow: hidden;
height: 100%;
transition: var(--transition);
}
.service-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red-500), var(--orange-500));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover{
border-color: transparent;
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.service-card:hover::before{
transform: scaleX(1);
}
.service-card .card-number{
font-family: 'Montserrat', sans-serif;
font-size: 56px;
font-weight: 900;
color: var(--bs-gray-100);
position: absolute;
top: 16px;
right: 24px;
line-height: 1;
transition: var(--transition);
}
.service-card:hover .card-number{
color: rgba(229,57,53,0.08);
}
.service-icon-wrap {
width: 56px;
height: 56px;
background: var(--warm-100);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: var(--transition);
}
.service-card:hover .service-icon-wrap {
background: var(--red-500);
}
.service-icon-wrap svg {
width: 26px;
height: 26px;
stroke: var(--orange-500);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: var(--transition);
}
.service-card:hover .service-icon-wrap svg{
stroke: var(--bs-white);
}
.service-card h3{
font-size: 19px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 10px;
}
.service-card p{
font-size: 14px;
color: var(--bs-gray-500);
line-height: 1.7;
margin-bottom: 24px;
}
.service-card .card-footer{
display: flex;
align-items: center;
gap: 12px;
}
.service-card .card-link{
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 600;
color: var(--red-500);
transition: var(--transition);
}
.service-card .card-link:hover{
gap: 8px;
}
.service-card .card-link svg{
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.service-card .card-price{
font-size: 12px;
color: var(--bs-gray-400);
font-weight: 500;
}
@media (min-width: 992px) {
.services-section{
padding: 88px 0;
}
}
@media (max-width: 576px) {
.service-card{
padding: 15px;
}
.service-card .card-number{
font-size: 34px;
}
.service-card h3 {
font-size: 14px;
}
.service-card p{
font-size: 13px;
line-height: 1.4;
margin-bottom: 15px;
}
}
/*
* Advantages
*/
.advantages-section {
padding: 32px 0;
background: var(--navy-900);
position: relative;
overflow: hidden;
}
.advantages-section::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.advantages-section .section-head h2 {
color: var(--bs-white);
}
.advantages-section .section-head .subtitle {
color: rgba(255,255,255,0.5);
}
.advantages-row>.row {
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.adv-card{
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 32px 24px;
text-align: center;
transition: var(--transition);
position: relative;
height: 100%;
}
.adv-card:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.15);
transform: translateY(-4px);
}
.adv-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
}
.adv-icon.green {
background: rgba(67,160,71,0.15);
}
.adv-icon.blue {
background: rgba(30,136,229,0.15);
}
.adv-icon.red {
background: rgba(229,57,53,0.15);
}
.adv-icon.orange {
background: rgba(245,124,0,0.15);
}
.adv-icon svg {
width: 26px;
height: 26px;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.adv-icon.green svg {
stroke: var(--green-500);
}
.adv-icon.blue svg {
stroke: var(--blue-500);
}
.adv-icon.red svg {
stroke: var(--red-400);
}
.adv-icon.orange svg {
stroke: var(--orange-500);
}
.adv-value {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 800;
color: var(--bs-white);
margin-bottom: 6px;
}
.adv-card h3 {
font-size: 15px;
font-weight: 700;
color: var(--bs-white);
margin-bottom: 8px;
}
.adv-card p {
font-size: 13px;
color: rgba(255,255,255,0.45);
line-height: 1.6;
}
@media (min-width: 768px) {
.adv-value{
font-size: 28px;
}
}
@media (min-width: 992px) {
.advantages-section{
padding: 88px 0;
}
}
@media (max-width: 576px) {
.adv-card{
padding: 20px 20px;
}
}
/*
* Projects
*/
.projects-section {
padding: 32px 0;
background: var(--bs-white);
}
@media (min-width: 992px) {
.projects-section{
padding: 88px 0;
}
}
.projects-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.project-card[data-type="1"]{
display: flex;
flex-direction: column;
/*background: var(--bs-white);*/
background: var(--gray-50);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
box-shadow: var(--shadow-sm);
border: 1px solid var(--bs-gray-200);
height: 100%;
}
.project-card[data-type="1"]:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.project-card[data-type="1"] .project-card-img {
height: 220px;
background: var(--bs-gray-200);
position: relative;
overflow: hidden;
}
.project-card[data-type="1"] .project-card-img>img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.project-card[data-type="1"] .project-card-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
color: var(--bs-gray-400);
font-weight: 500;
position: relative;
}
.project-card[data-type="1"] .project-card-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(15,27,45,0.4) 0%, transparent 50%);
pointer-events: none;
}
.project-card[data-type="1"] .project-card-badge {
position: absolute;
bottom: 12px;
left: 12px;
z-index: 2;
background: var(--red-500);
color: var(--bs-white);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
}
.project-card[data-type="1"] .project-card-body {
display: flex;
flex-direction: column;
padding: 22px 24px;
flex-grow: 1;
}
.project-card[data-type="1"] .project-card-title>* {
font-size: 16px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 10px;
line-height: 1.4;
}
.project-card[data-type="1"] .project-card-meta {
display: flex;
align-items: center;
margin-top: auto;
gap: 16px;
font-size: 13px;
color: var(--bs-gray-500);
}
.project-card[data-type="1"] .project-card-meta svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.project-card[data-type="1"] .project-card-meta-item {
display: flex;
align-items: center;
gap: 5px;
}
/*
* Projects-page-section
*/
.projects-page-section{
padding: 32px 0;
}
.projects-page-filter{
padding: 20px 0;
background: var(--bs-white);
border-bottom: 1px solid var(--bs-gray-200);
}
.projects-page-filter>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.projects-page-filter>.row>*{
flex: 0 0 auto;
}
.projects-page-filter>.row>*.city{
width: 300px;
}
.projects-page-filter-select-city{
}
.projects-page-filter>.row>*.worktype{
width: calc(100% - 300px);
}
.projects-page-filter-items.worktype{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
height: 100%;
}
.projects-page-filter>.row>*.branch{
width: 100%;
}
.projects-page-filter-items.branch{
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.projects-page-filter-item.checkbox .form-check{
min-height: 18px;
padding-left: 25px;
}
.projects-page-filter-item.checkbox .form-check-input{
--bs-border-color: var(--bs-gray-200);
width: 18px;
height: 18px;
margin-left: -25px;
}
.projects-page-filter-item.checkbox .form-check-input:focus{
border-color: var(--bs-gray-200);
box-shadow: none;
}
.projects-page-filter-item.checkbox .form-check-input:checked{
background-color: var(--red-500);
border-color: var(--red-500);
}
.projects-page-filter-item.checkbox .form-check-label{
cursor: pointer;
}
.projects-page-filter-item.button .btn{
--bs-btn-color: var(--navy-900);
--bs-btn-bg: var(--bs-white);
--bs-btn-border-color: var(--bs-gray-200);
--bs-btn-hover-color: var(--navy-900);
--bs-btn-hover-bg: var(--bs-white);
--bs-btn-hover-border-color: var(--red-500);
--bs-btn-hover-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
--bs-btn-active-color: var(--bs-white);
--bs-btn-active-bg: var(--red-500);
--bs-btn-active-border-color: var(--red-500);
--bs-btn-active-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
--bs-btn-font-size: 14px;
}
.projects-page-filter-item.button input:checked~label{
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--red-500);
--bs-btn-border-color: var(--red-500);
--bs-btn-focus-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.projects-page-filter-dropdown-city .dropdown-toggle{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 11px 14px;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: left;
text-decoration: none;
vertical-align: middle;
color: var(--navy-900)
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: var(--bs-white);
background-clip: padding-box;
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-sm);
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.projects-page-filter-dropdown-city .dropdown-menu{
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0;
--bs-dropdown-border-color: var(--bs-gray-200);
}
.projects-page-filter-dropdown-city .dropdown-menu.show{
display: flex;
flex-direction: column;
}
.projects-page-filter-dropdown-city .dropdown-menu-search{
padding: 10px 15px 0;
}
.projects-page-filter-dropdown-city .dropdown-menu-search input{
padding: 5px 10px;
font-size: 14px;
}
.projects-page-filter-dropdown-city .dropdown-menu-search input:focus{
border-color: var(--red-500);
box-shadow: none;
}
.projects-page-filter-dropdown-city .dropdown-menu-items input{
display: none;
}
.projects-page-filter-dropdown-city .dropdown-menu-items label{
width: 100%;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
}
.projects-page-filter-dropdown-city .dropdown-menu-items input:checked~label{
color: var(--red-500);
}
.projects-page-filter-dropdown-city .dropdown-menu-items{
display: flex;
flex-direction: column;
margin: 0;
padding: 10px 15px;
gap: 5px;
min-width: 275px;
overflow-y: auto;
max-height: 320px;
list-style: none;
}
.projects-page-filter-dropdown-city .dropdown-menu-items::-webkit-scrollbar,
.projects-page-filter-dropdown-city .dropdown-menu-items::-webkit-scrollbar-thumb{
height: 16px;
width: 16px;
border-radius: 50rem;
background-color: transparent;
border: 4px solid transparent;
}
.projects-page-filter-dropdown-city .dropdown-menu-items::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 16px var(--red-500);
opacity: 0.2;
}
.projects-page-filter-dropdown-city .dropdown-menu-items::-webkit-scrollbar-thumb:hover,
.projects-page-filter-dropdown-city .dropdown-menu-items::-webkit-scrollbar-thumb:active{
opacity: 0.3;
}
.projects-page-filter-dropdown-city .dropdown-menu-items::-webkit-resizer,
.projects-page-filter-dropdown-city .dropdown-menu-items::-webkit-scrollbar-corner {
background-color: transparent;
}
.projects-page-filter-offcanvas-toggler{
--bs-btn-padding-x: 15px;
--bs-btn-padding-y: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.projects-page-filter-offcanvas-toggler svg{
width: 20px;
height: 20px;
fill: #fff;
}
@media (max-width: 992px) {
.projects-page-filter{
padding: 0;
background: transparent;
}
.projects-page-filter>.row>*.city{
width: 100%;
}
.projects-page-filter-dropdown-city .dropdown-menu.show {
--bs-dropdown-min-width: 345px;
}
}
@media (min-width: 992px) {
.projects-page-filter-offcanvas-toggler{
display:none;
}
.projects-page-filter-offcanvas{
position: relative;
z-index: 2;
flex-grow: 1;
width: auto !important;
height: auto !important;
visibility: visible !important;
background-color: transparent !important;
border: 0 !important;
transform: none !important;
box-shadow: none;
transition: none;
}
.projects-page-filter-offcanvas .offcanvas-header {
display: none;
}
.projects-page-filter-offcanvas .offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
.projects-page-filter-offcanvas .offcanvas-footer{
display: none;
}
}
.projects-page-content{
position: relative;
z-index: 1;
margin-top: 24px;
}
.projects-page-row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.projects-page-error{
display: flex;
justify-content: center;
align-items: center;
}
.projects-page-error:not(.active){
display: none;
}
.projects-page-pagination .pagination{
margin-top: 12px;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 0;
}
.projects-page-pagination .page-item .page-link{
width: 40px;
height: 40px;
padding: 0;
margin: 10px;
color: var(--navy-800);
box-shadow: var(--shadow-sm);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-sm);
background-color: var(--gray-50);
transition: var(--transition);
}
.projects-page-pagination .page-item .page-link:focus{
outline: 0;
box-shadow: none;
}
.projects-page-pagination .page-item .page-link:hover{
color: #fff;
background-color: var(--red-500);
box-shadow: var(--bs-btn-hover-box-shadow);
transform: translateY(-2px);
transition: var(--transition);
}
.projects-page-pagination .page-item.active .page-link{
color: #fff;
background-color: var(--red-500);
}
@media (min-width: 992px) {
.projects-page-content {
margin-top: 48px;
}
.projects-page-pagination .pagination{
margin-top: 24px;
}
}
/*
* Project 2
*/
.project-card[data-type="2"]{
display: flex;
flex-direction: column;
background: var(--gray-50);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
box-shadow: var(--shadow-sm);
border: 1px solid var(--bs-gray-200);
height: 100%;
}
.project-card[data-type="2"]:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.project-card[data-type="2"] .project-card-img {
height: 220px;
background: var(--bs-gray-200);
position: relative;
overflow: hidden;
}
.project-card[data-type="2"] .project-card-img>img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.project-card[data-type="2"] .project-card-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(15,27,45,0.4) 0%, transparent 50%);
pointer-events: none;
}
.project-card[data-type="2"] .project-card-worktype {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
background: var(--red-500);
color: var(--bs-white);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
}
.project-card[data-type="2"] .project-card-branch {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
background: rgb(0 0 0 / 30%);
color: var(--bs-white);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
border: 1px solid var(--bs-gray-200);
backdrop-filter: blur(16px);
}
.project-card[data-type="2"] .project-card-weight{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
backdrop-filter: blur(5px);
background-color: rgb(0 0 0 / 20%);
opacity: 1;
transition: var(--transition);
}
.project-card[data-type="2"]:hover .project-card-weight{
opacity: 0;
transition: var(--transition);
}
.project-card[data-type="2"] .project-card-weight>*{
display: flex;
flex-direction: column;
align-items: center;
}
.project-card[data-type="2"] .project-card-weight>*>*:first-child{
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 1.2;
font-weight: 800;
color: var(--red-500);
}
.project-card[data-type="2"] .project-card-weight>*>*:last-child{
font-size: 14px;
line-height: 1.2;
font-weight: 200;
color: var(--bs-white);
letter-spacing: 2px;
}
.project-card[data-type="2"] .project-card-body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px 24px;
flex-grow: 1;
}
.project-card[data-type="2"] .project-card-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 13px;
color: var(--bs-gray-500);
}
.project-card[data-type="2"] .project-card-meta svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.project-card[data-type="2"] .project-card-meta-item {
display: flex;
align-items: center;
gap: 5px;
}
.project-card[data-type="2"] .project-card-title>* {
font-size: 16px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 0;
line-height: 1.4;
}
.project-card-text{
font-size: 14px;
color: var(--bs-gray-500);
line-height: 1.4;
}
.project-card[data-type="2"] .project-card-link{
display: flex;
align-items: center;
gap: 4px;
margin-top: auto;
font-size: 14px;
font-weight: 600;
color: var(--red-500);
transition: var(--transition);
}
.project-card[data-type="2"] .project-card-link:hover{
gap: 8px;
}
.project-card[data-type="2"] .project-card-link svg{
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
/*
* Calculator
*/
.calc-section {
padding: 32px 0;
background: var(--bs-white);
position: relative;
}
.calc-wrapper {
background: linear-gradient(135deg, var(--warm-50) 0%, var(--gray-50) 100%);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-xl);
padding: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.calc-left h3 {
font-size: 28px;
font-weight: 800;
color: var(--navy-800);
margin-bottom: 12px;
}
.calc-left .calc-desc {
font-size: 16px;
color: var(--bs-gray-500);
line-height: 1.7;
margin-bottom: 28px;
}
.calc-features {
display: flex;
flex-direction: column;
gap: 16px;
}
.calc-feature {
display: flex;
align-items: flex-start;
gap: 12px;
}
.calc-feature-icon {
width: 36px;
height: 36px;
background: var(--green-500);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.calc-feature-icon svg {
width: 18px;
height: 18px;
stroke: var(--bs-white);
fill: none;
stroke-width: 2.5;
}
.calc-feature-text {
font-size: 14px;
color: var(--bs-gray-600);
line-height: 1.6;
}
.calc-feature-text strong {
color: var(--navy-800);
display: block;
margin-bottom: 2px;
}
.calc-right {
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow-md);
}
.calc-right h4 {
font-size: 18px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 24px;
}
.calc-select {
width: 100%;
padding: 11px 14px;
background: var(--gray-50);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-sm);
font-size: 14px;
margin-bottom: 14px;
}
.calc-result {
margin-top: 20px;
padding: 20px;
background: var(--gray-50);
border-radius: var(--radius-md);
text-align: center;
}
.calc-result .result-label {
font-size: 13px;
color: var(--bs-gray-500);
margin-bottom: 4px;
}
.calc-result .result-value {
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 800;
color: var(--red-500);
}
.calc-result .result-note {
font-size: 12px;
color: var(--bs-gray-400);
margin-top: 4px;
}
@media (min-width: 992px) {
.calc-section{
padding: 88px 0;
}
}
/*
* TESTIMONIALS
*/
.testimonials-section {
padding: 32px 0;
background: var(--gray-50);
}
.testimonials-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.testimonial-card{
display: flex;
flex-direction: column;
background: var(--bs-white);
border-radius: var(--radius-lg);
padding: 32px;
height: 100%;
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
}
.testimonial-card:hover{
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.testimonial-card .quote-mark{
font-family: Georgia, serif;
font-size: 48px;
color: var(--red-500);
line-height: 1;
margin-bottom: 12px;
opacity: 0.3;
}
.testimonial-card .quote-text{
font-size: 14px;
color: var(--bs-gray-600);
line-height: 1.7;
margin-bottom: 20px;
font-style: italic;
}
.testimonial-author{
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bs-gray-200);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--bs-gray-500);
}
.testimonial-info .name {
font-size: 14px;
font-weight: 600;
color: var(--navy-800);
}
.testimonial-info .role {
font-size: 12px;
color: var(--bs-gray-400);
}
@media (min-width: 992px) {
.testimonials-section {
padding: 88px 0;
}
}
@media (max-width: 576px) {
.testimonial-card{
padding: 20px;
}
.testimonial-card .quote-mark{
line-height: 0.5;
}
}
/*
* Equipment
*/
.equipment-section {
padding: 32px 0;
background: var(--bs-white);
}
.equipment-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.equip-card {
display: flex;
flex-direction: column;
background: var(--gray-50);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
height: 100%;
}
.equip-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: transparent;
}
.equip-img {
height: 180px;
background: var(--bs-gray-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-gray-400);
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
}
.equip-img>img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background-color: white;
}
.equip-body {
display: flex;
flex-direction: column;
padding: 20px;
flex-grow: 1;
}
.equip-body h4 {
font-size: 15px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 6px;
}
.equip-body p {
font-size: 13px;
color: var(--bs-gray-500);
line-height: 1.5;
margin-bottom: 12px;
}
.equip-specs {
margin-top: auto;
display: flex;
gap: 12px;
font-size: 12px;
}
.equip-spec {
background: var(--bs-white);
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
color: var(--navy-700);
}
@media (min-width: 992px) {
.equipment-section {
padding: 88px 0;
}
}
/*
* Blog
*/
.blog-section {
padding: 32px 0;
background: var(--gray-50);
}
.blog-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.blog-card {
display: flex;
flex-direction: column;
background: var(--bs-white);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
box-shadow: var(--shadow-sm);
height: 100%;
}
.blog-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.blog-img {
height: 180px;
background: var(--bs-gray-200);
position: relative;
}
.blog-img>img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom right;
background-color: white;
}
.blog-img .blog-tag {
position: absolute;
top: 12px;
left: 12px;
background: var(--red-500);
color: var(--bs-white);
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog-body {
display: flex;
flex-direction: column;
padding: 24px;
flex-grow: 1;
}
.blog-date {
font-size: 12px;
color: var(--bs-gray-400);
font-weight: 500;
margin-bottom: 10px;
}
.blog-title{
display: block;
}
.blog-title>*{
font-size: 16px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 10px;
line-height: 1.4;
}
.blog-text {
font-size: 14px;
color: var(--bs-gray-500);
line-height: 1.6;
margin-bottom: 16px;
}
.blog-link {
margin-top: auto;
font-size: 13px;
font-weight: 600;
color: var(--red-500);
display: flex;
align-items: center;
gap: 4px;
transition: var(--transition);
}
.blog-link:hover {
gap: 8px;
}
.blog-link svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
@media (min-width: 992px) {
.blog-section {
padding: 88px 0;
}
}
/*
* Services-page
*/
.services-page-section{
padding: 32px 0;
background: var(--bs-white);
}
.services-page-section-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
@media (min-width: 992px) {
.services-page-section{
padding: 88px 0;
}
}
.services-page-section-row>.row>*:not(.active){
display: none;
}
.services-page-card {
display: flex;
flex-direction: column;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
height: 100%;
}
.services-page-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: transparent;
}
.services-page-card-img {
position: relative;
height: 220px;
background: var(--bs-gray-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-gray-400);
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
}
.services-page-card-badge {
position: absolute;
bottom: 12px;
left: 12px;
z-index: 2;
background: var(--red-500);
color: var(--bs-white);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
}
.services-page-card-badge.blue{
background: var(--blue-600);
}
.services-page-card-badge.green{
background: var(--green-600);
}
.services-page-card-img>img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background-color: var(--bs-white);
}
.services-page-card-body {
display: flex;
flex-direction: column;
padding: 20px;
flex-grow: 1;
}
.services-page-card-category{
margin-bottom: 12px;
font-size: 15px;
line-height: 1.2;
font-weight: 400;
color: var(--red-500);
}
.services-page-card-body h3,
.services-page-card-body h4 {
font-size: 15px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 6px;
}
.services-page-card-body p {
font-size: 13px;
color: var(--bs-gray-500);
line-height: 1.5;
margin-bottom: 12px;
}
.services-page-card-tags {
margin-top: auto;
display: flex;
gap: 12px;
font-size: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.services-page-card-tag {
background: var(--gray-50);
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
color: var(--navy-700);
border: 1px solid var(--bs-gray-200);
}
.services-page-card-footer{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--bs-gray-200);
}
.services-page-card-price{
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 1.2;
font-weight: 700;
color: var(--navy-900);
}
.services-page-card-link{
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
line-height: 1.2;
font-weight: 600;
color: var(--red-500);
transition: var(--transition);
}
.services-page-card-link:hover{
gap: 8px;
}
.services-page-card-link>svg{
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
@media (min-width: 992px) {
.services-page-section {
padding: 88px 0;
}
}
/*
* Services-detail-page
*/
.services-detail-page-section{
padding: 32px 0;
background: var(--bs-white);
border-bottom: 1px solid var(--bs-gray-200);
}
@media (min-width: 992px) {
.services-detail-page-section{
padding: 88px 0;
}
.services-detail-page-section-inner{
display: grid;
grid-template-columns: 1fr 360px;
gap: 48px;
align-items: start;
}
}
@media (max-width: 992px) {
.services-detail-page-section-inner{
display: flex;
flex-direction: column;
gap: 32px;
}
}
/*
* Contacts
*/
.contacts-section{
padding: 32px 0;
background: var(--bs-white);
}
.contacts-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.contacts-form{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
background: var(--navy-900);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 32px;
overflow: hidden;
}
@media (max-width: 576px) {
.contacts-form{
padding: 1rem;
}
}
.contacts-form-bg {
position: absolute; inset: 0;
background:
linear-gradient(135deg,
rgba(15,27,45,0.92) 0%,
rgba(27,42,61,0.85) 50%,
rgba(37,59,82,0.78) 100%
),
url('data:image/svg+xml,');
background-size: cover;
z-index: 1;
}
.contacts-form-bg::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 70% 50%, rgba(229,57,53,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(30,136,229,0.06) 0%, transparent 50%);
pointer-events: none;
}
.contacts-form-bg::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px; z-index: 1;
}
.contacts-form form{
position: relative;
z-index: 2;
}
.contacts-form h3{
font-size: 18px;
font-weight: 700;
color: var(--bs-white);
margin-bottom: 6px;
}
.contacts-form .form-subtitle {
font-size: 13px;
color: rgba(255,255,255,0.5);
margin-bottom: 24px;
}
.contacts-form .form-group{
margin-bottom: 14px;
}
.contacts-form .form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contacts-form .form-group .form-control,
.contacts-form .form-group .form-select{
width: 100%;
padding: 11px 14px;
color: var(--bs-white);
font-size: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
transition: var(--transition);
}
.contacts-form .form-group .form-control::placeholder {
color: rgba(255,255,255,0.3);
}
.contacts-form .form-group .form-control:focus,
.contacts-form .form-group .form-select:focus,
.contacts-form .form-group .form-control.is-invalid,
.contacts-form .form-group .form-select.is-invalid{
outline: none;
border-color: var(--red-400);
background: rgba(255,255,255,0.12);
box-shadow: none;
}
.contacts-form .form-group .form-select{
appearance: none;
cursor: pointer;
}
.contacts-form .form-group .form-select option {
background: var(--navy-800);
color: var(--bs-white);
}
.contacts-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.contacts-form .btn-submit{
margin-top: 6px;
}
.contacts-form .form-note{
font-size: 11px;
color: rgba(255,255,255,0.35);
text-align: center;
margin-top: 12px;
line-height: 1.4;
}
.contacts-info{
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 15px;
overflow: hidden;
height: 100%;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
@media (min-width: 576px) {
.contacts-info{
padding: 24px;
}
}
@media (min-width: 768px) {
.contacts-info{
padding: 32px;
}
}
.contacts-address{
display: flex;
flex-direction: column;
gap: 10px;
}
.contacts-address-title{
font-size: 16px;
font-weight: 800;
color: var(--navy-800);
letter-spacing: -0.5px;
}
.contacts-address-text{
font-size: 18px;
font-weight: 600;
line-height: 1.2;
color: var(--red-500);
}
.contacts-address-time{
font-size: 14px;
font-weight: 600;
line-height: 1.2;
color: var(--bs-gray-500);
}
.contacts-address-messenger{
display: flex;
gap: 10px;
}
.contacts-address-messenger>*{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gray-50);
transition: var(--transition);
}
.contacts-address-messenger>*:hover {
background: var(--red-500);
}
.contacts-address-messenger svg {
width: 18px;
height: 18px;
fill: var(--navy-800);
}
.contacts-address-messenger>*:hover svg {
fill: var(--bs-white);
}
.contacts-map{
width: 100%;
height: 100%;
min-height: 250px;
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.contacts-map>*{
width: 100%;
height: 100%;
}
@media (min-width: 576px) {
.contacts-map{
min-height: 350px;
}
}
@media (min-width: 768px) {
.contacts-map{
min-height: auto;
}
}
@media (min-width: 992px) {
.contacts-section{
padding: 88px 0;
}
}
/*
* Content
*/
.content-section{
padding: 32px 0;
background: var(--bs-white);
}
.contacts-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.content-inner{
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 15px;
overflow: hidden;
height: 100%;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
@media (min-width: 768px) {
.content-inner{
padding: 32px;
}
}
@media (min-width: 992px) {
.content-section{
padding: 88px 0;
}
}
/*
* Regional-offices
*/
.regional-offices-section{
padding: 32px 0;
background: var(--gray-50);
}
.regional-offices-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.regional-offices-card{
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 28px;
height: 100%;
transition: var(--transition);
}
.regional-offices-card-badge{
position: absolute;
top: calc(-0.5 * 25px);
left: 28px;
display: flex;
align-items: center;
justify-content: center;
height: 25px;
padding: 5px 10px;
color: var(--bs-white);
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
text-transform: uppercase;
border-radius: var(--radius-sm);
background: var(--red-500);
}
.regional-offices-card-title>*{
margin-bottom: 0;
font-size: 26px;
font-weight: 800;
color: var(--red-500);
letter-spacing: -0.5px;
}
.regional-offices-card-subtitle{
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: var(--bs-gray-500);
}
.regional-offices-card hr{
margin: 0;
margin-top: auto;
}
.regional-offices-card-address,
.regional-offices-card-phone,
.regional-offices-card-email{
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 10px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: var(--navy-800);
}
.regional-offices-card-address svg,
.regional-offices-card-phone svg,
.regional-offices-card-email svg{
flex: 0 0 auto;
width: 25px;
height: 25px;
fill: var(--red-400);
}
.regional-offices-card-phone{
align-items: center;
font-size: 18px;
font-weight: 900;
text-transform: uppercase;
}
.regional-offices-card-email{
align-items: center;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.regional-offices-card-address{
cursor: pointer;
}
.regional-offices-card-map{
margin-top: 5px;
font-size: 13px;
font-weight: 600;
color: var(--red-500);
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: var(--transition);
}
.regional-offices-card-address:hover .regional-offices-card-map{
gap: 8px;
}
.regional-offices-card-map svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
@media (min-width: 992px) {
.regional-offices-section{
padding: 88px 0;
}
}
@media (max-width: 576px) {
.regional-offices-card{
padding: 15px;
}
.regional-offices-card-number{
font-size: 34px;
}
.regional-offices-card h3 {
font-size: 14px;
}
.regional-offices-card p{
font-size: 13px;
line-height: 1.4;
margin-bottom: 15px;
}
}
/*
* Technical-specification
*/
.technical-specification-section{
padding: 32px 0;
background: var(--white);
}
.technical-specification-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.technical-specification-card{
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 32px 28px 28px;
overflow: hidden;
height: 100%;
transition: var(--transition);
}
.technical-specification-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red-500), var(--orange-500));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.technical-specification-card:hover{
border-color: transparent;
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.technical-specification-card:hover::before{
transform: scaleX(1);
}
.technical-specification-card-number{
font-family: 'Montserrat', sans-serif;
font-size: 56px;
font-weight: 900;
color: var(--bs-gray-100);
position: absolute;
top: 16px;
right: 24px;
line-height: 1;
transition: var(--transition);
}
.technical-specification-card:hover .technical-specification-card-number{
color: rgba(229,57,53,0.08);
}
.technical-specification-card-icon{
width: 56px;
height: 56px;
background: var(--warm-100);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: var(--transition);
}
.technical-specification-card:hover .technical-specification-card-icon {
background: var(--red-500);
}
.technical-specification-card-icon svg {
width: 26px;
height: 26px;
fill: var(--orange-500);
transition: var(--transition);
}
.technical-specification-card:hover .technical-specification-card-icon svg{
fill: var(--bs-white);
}
.technical-specification-card h3{
font-size: 18px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 10px;
}
.technical-specification-card p{
font-size: 14px;
color: var(--bs-gray-500);
line-height: 1.7;
margin-bottom: 24px;
}
@media (min-width: 992px) {
.technical-specification-section{
padding: 88px 0;
}
}
@media (max-width: 576px) {
.technical-specification-card{
padding: 15px;
}
.technical-specification-card-number{
font-size: 34px;
}
.technical-specification-card h3 {
font-size: 14px;
}
.technical-specification-card p{
font-size: 13px;
line-height: 1.4;
margin-bottom: 15px;
}
}
/*
* Regional-offices
*/
.director-section{
padding: 32px 0;
background: var(--gray-50);
}
.director-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.director-row>.row>*:first-child {
flex: 0 0 auto;
width: 100%;
}
.director-row>.row>*:last-child {
flex: 0 0 auto;
width: 100%;
}
.director-info{
display: flex;
flex-direction: column;
gap: 24px;
}
.director-info-img{
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
width: 100%;
height: 100%;
flex: 0 0 auto;
}
.director-info-img>img{
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.director-info-connection{
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 15px;
overflow: hidden;
flex-grow: 1;
}
.director-info-connection-phone,
.director-info-connection-email{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 900;
line-height: 1.4;
color: var(--navy-800);
text-transform: uppercase;
}
.director-info-connection-phone{
font-size: 18px;
}
.director-info-connection-phone svg,
.director-info-connection-email svg {
flex: 0 0 auto;
width: 25px;
height: 25px;
fill: var(--red-400);
}
.director-info-connection-messenger{
display: flex;
gap: 10px;
}
.director-info-connection-messenger>*{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gray-50);
transition: var(--transition);
}
.director-info-connection-messenger>*:hover {
background: var(--red-500);
}
.director-info-connection-messenger svg {
width: 18px;
height: 18px;
fill: var(--navy-800);
}
.director-info-connection-messenger>*:hover svg {
fill: var(--bs-white);
}
.director-content{
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 15px;
overflow: hidden;
height: 100%;
transition: var(--transition);
}
.director-content-title{
margin-bottom: 24px;
font-size: 20px;
font-weight: 800;
line-height: 1.2;
color: var(--navy-800);
letter-spacing: -0.5px;
}
@media (min-width: 480px) {
.director-info {
flex-direction: row;
}
.director-info-img{
width: 150px;
}
}
@media (min-width: 550px) {
.director-info-img{
width: 180px;
}
}
@media (min-width: 576px) {
.director-content{
padding: 28px;
}
.director-info-connection{
padding: 28px;
}
.director-content-title{
font-size: 22px;
}
}
@media (min-width: 992px) {
.director-section{
padding: 88px 0;
}
.director-row>.row>*:first-child {
flex: 0 0 auto;
width: 350px;
}
.director-row>.row>*:last-child {
flex: 0 0 auto;
width: calc(100% - 350px);
}
.director-info{
display: flex;
flex-direction: column;
gap: 24px;
}
.director-info-img{
width: 100%;
flex-grow: 1;
}
.director-content-title{
font-size: 26px;
}
}
/*
* Verified-projects
*/
.verified-projects-section{
padding: 32px 0;
background: var(--gray-50);
}
.verified-projects-row>.row{
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
.verified-projects-card{
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 32px 28px 28px;
overflow: hidden;
height: 100%;
transition: var(--transition);
}
.verified-projects-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red-500), var(--orange-500));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.verified-projects-card:hover{
border-color: transparent;
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.verified-projects-card:hover::before{
transform: scaleX(1);
}
.verified-projects-card-number{
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
margin-bottom: 12px;
font-size: 24px;
font-weight: 900;
line-height: 1;
color: var(--bs-gray-100);
background: var(--red-500);
border-radius: var(--radius-md);
transition: var(--transition);
}
.verified-projects-card:hover .verified-projects-card-number{
color: var(--red-500);
background: var(--warm-100);
}
.verified-projects-card h3{
font-size: 18px;
font-weight: 700;
color: var(--navy-800);
margin-bottom: 10px;
}
.verified-projects-card p{
font-size: 14px;
color: var(--bs-gray-500);
line-height: 1.7;
margin-bottom: 24px;
}
@media (min-width: 992px) {
.verified-projects-section{
padding: 88px 0;
}
.verified-projects-card-number{
margin-bottom: 20px;
width: 56px;
height: 56px;
font-size: 28px;
font-weight: 900;
}
}
@media (max-width: 576px) {
.verified-projects-card{
padding: 15px;
}
.verified-projects-card h3 {
font-size: 14px;
}
.verified-projects-card p{
font-size: 13px;
line-height: 1.4;
margin-bottom: 15px;
}
}
/*
* Sidebar
*/
.sidebar{
/*position: sticky;
top:0;*/
display: flex;
flex-direction: column;
gap: 24px;
}
.sidebar-form{
position: relative;
z-index: 1;
width: 100%;
background: var(--navy-900);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 32px;
overflow: hidden;
}
@media (max-width: 576px) {
.sidebar-form{
padding: 1rem;
}
}
.sidebar-form-bg {
position: absolute; inset: 0;
background:
linear-gradient(135deg,
rgba(15,27,45,0.92) 0%,
rgba(27,42,61,0.85) 50%,
rgba(37,59,82,0.78) 100%
),
url('data:image/svg+xml,');
background-size: cover;
z-index: 1;
}
.sidebar-form-bg::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 70% 50%, rgba(229,57,53,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(30,136,229,0.06) 0%, transparent 50%);
pointer-events: none;
}
.sidebar-form-bg::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px; z-index: 1;
}
.sidebar-form form{
position: relative;
z-index: 2;
}
.sidebar-form h3{
font-size: 18px;
font-weight: 700;
color: var(--bs-white);
margin-bottom: 6px;
}
.sidebar-form .form-subtitle {
font-size: 13px;
color: rgba(255,255,255,0.5);
margin-bottom: 24px;
}
.sidebar-form .form-group{
margin-bottom: 14px;
}
.sidebar-form .form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sidebar-form .form-group .form-control,
.sidebar-form .form-group .form-select{
width: 100%;
padding: 11px 14px;
color: var(--bs-white);
font-size: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
transition: var(--transition);
}
.sidebar-form .form-group .form-control::placeholder {
color: rgba(255,255,255,0.3);
}
.sidebar-form .form-group .form-control:focus,
.sidebar-form .form-group .form-select:focus,
.sidebar-form .form-group .form-control.is-invalid,
.sidebar-form .form-group .form-select.is-invalid{
outline: none;
border-color: var(--red-400);
background: rgba(255,255,255,0.12);
box-shadow: none;
}
.sidebar-form .form-group .form-select{
appearance: none;
cursor: pointer;
}
.sidebar-form .form-group .form-select option {
background: var(--navy-800);
color: var(--bs-white);
}
.sidebar-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.sidebar-form .btn-submit{
margin-top: 6px;
}
.sidebar-form .form-note{
font-size: 11px;
color: rgba(255,255,255,0.35);
text-align: center;
margin-top: 12px;
line-height: 1.4;
}
.sidebar-phone{
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 32px;
overflow: hidden;
height: 100%;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
@media (max-width: 576px) {
.sidebar-phone{
padding: 1rem;
}
}
.sidebar-phone-label{
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.sidebar-phone-label small{
font-weight: 500;
}
.sidebar-phone-number{
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--red-500);
transition: var(--transition);
}
.sidebar-phone-number:hover{
color: var(--red-600);
transition: var(--transition);
}
.sidebar-phone-hint{
font-size: 14px;
}
.sidebar-services{
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
background: var(--gray-50);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 32px 20px;
overflow: hidden;
height: 100%;
box-shadow: var(--shadow-sm);
}
.sidebar-services-label{
margin-bottom: 24px;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
@media (max-width: 576px) {
.sidebar-services{
padding: 1rem;
}
.sidebar-services-label{
margin-bottom: 1rem;
}
}
.sidebar-services-list{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.sidebar-services-item{
display: flex;
align-items: center;
gap: 15px;
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 10px;
overflow: hidden;
height: 100%;
transition: var(--transition);
background: var(--bs-white);
}
.sidebar-services-item-icon{
width: 45px;
height: 45px;
background: var(--warm-100);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.sidebar-services-item:hover .sidebar-services-item-icon{
background: var(--red-500);
}
.sidebar-services-item-icon svg {
width: 26px;
height: 26px;
stroke: var(--orange-500);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: var(--transition);
}
.sidebar-services-item:hover .sidebar-services-item-icon svg{
stroke: var(--bs-white);
}
.sidebar-services-item-title{
font-size: 16px;
font-weight: 700;
color: var(--navy-800);
transition: var(--transition);
}
.sidebar-services-item:hover .sidebar-services-item-title{
color: var(--red-500);
transition: var(--transition);
}
/*
* block-items
*/
.block-items{
}
.block-item{
display: flex;
flex-direction: column;
}
.block-item:last-child {
margin-bottom: 0 !important;
}
.block-item-title>*{
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
line-height: 1.1;
font-size: 36px;
font-weight: 900;
letter-spacing: -1px;
}
@media (max-width: 576px) {
.block-item-title>*{
font-size: 26px;
}
}
.block-item.gray .block-item-center{
padding: 20px;
background: var(--gray-50);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.block-item-center>.row{
--bs-gutter-x: 20px;
--bs-gutter-y: 20px;
}
.block-item-img>img{
max-width: 100%;
height: auto;
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-md);
object-fit: contain;
object-position: center;
box-shadow: var(--shadow-sm);
}
.block-item-text{
display: flex;
flex-direction: column;
}
.block-item-text-top{
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
line-height: 1.1;
font-size: 26px;
font-weight: 900;
letter-spacing: -1px;
}
@media (max-width: 576px) {
.block-item-text-top{
font-size: 22px;
}
}
.block-item-text-bottom{
font-size: 14px;
}
.block-item-text-bottom>*:last-child{
margin-bottom: 0 !important;
}
.block-item-form-1{
position: relative;
z-index: 1;
width: 100%;
background: var(--navy-900);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 32px;
overflow: hidden;
}
@media (max-width: 576px) {
.block-item-form-1{
padding: 1rem;
}
}
.block-item-form-bg{
position: absolute; inset: 0;
background:
linear-gradient(135deg,
rgba(15,27,45,0.92) 0%,
rgba(27,42,61,0.85) 50%,
rgba(37,59,82,0.78) 100%
),
url('data:image/svg+xml,');
background-size: cover;
z-index: 1;
}
.block-item-form-bg::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 70% 50%, rgba(229,57,53,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(30,136,229,0.06) 0%, transparent 50%);
pointer-events: none;
}
.block-item-form-bg::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px; z-index: 1;
}
.block-item-form-1 form{
position: relative;
z-index: 2;
}
.block-item-form-1 h3{
font-size: 18px;
font-weight: 700;
color: var(--bs-white);
margin-bottom: 6px;
}
.block-item-form-1 .form-subtitle {
font-size: 13px;
color: rgba(255,255,255,0.5);
margin-bottom: 24px;
}
.block-item-form-1 .form-subtitle>*:last-child{
margin-bottom: 0 !important;
}
.block-item-form-1 .form-group{
margin-bottom: 14px;
}
.block-item-form-1 .form-group label{
display: block;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.block-item-form-1 .form-group .form-control,
.block-item-form-1 .form-group .form-select,
.block-item-form-1 .form-group .form-check-input{
width: 100%;
padding: 11px 14px;
color: var(--bs-white);
font-size: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
transition: var(--transition);
}
.block-item-form-1 .form-group .form-control::placeholder {
color: rgba(255,255,255,0.3);
}
.block-item-form-1 .form-group .form-control:focus,
.block-item-form-1 .form-group .form-select:focus,
.block-item-form-1 .form-group .form-control.is-invalid,
.block-item-form-1 .form-group .form-select.is-invalid,
.block-item-form-1 .form-group .form-check-input.is-invalid{
outline: none;
border-color: var(--red-400);
background: rgba(255,255,255,0.12);
box-shadow: none;
}
.block-item-form-1 .form-group .form-select{
appearance: none;
cursor: pointer;
}
.block-item-form-1 .form-group .form-select option {
background: var(--navy-800);
color: var(--bs-white);
}
.block-item-form-1 .form-group .form-check{
padding-left: 30px;
min-height: 20px;
}
.block-item-form-1 .form-group .form-check-list{
display: flex;
flex-direction: column;
gap: 5px;
}
.block-item-form-1 .form-group .form-check-list-title{
display: block;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.block-item-form-1 .form-group .form-check-input{
width: 20px;
height: 20px;
padding: 0;
margin-top: 0;
margin-left: -30px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.08);
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
cursor: pointer;
}
.block-item-form-1 .form-group .form-check-input:focus{
border-color: rgba(255,255,255,0.12);
outline: 0;
box-shadow: none;
}
.block-item-form-1 .form-group .form-check-input:checked{
background-color: var(--red-600);
border-color: var(--red-600);
}
.block-item-form-1 .form-group .form-check-input:checked[type=checkbox] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.block-item-form-1 .form-group .form-check-input[type=radio]{
border-radius: 50%;
}
.block-item-form-1 .form-group .form-check-label{
margin-bottom: 0;
min-height: 20px;
}
.block-item-form-1 .form-group hr{
color: rgba(255, 255, 255, 0.6);
}
.block-item-form-1 .form-group .form-file{
position: relative;
}
.block-item-form-1 .form-group .form-file:before{
content:"";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40px;
opacity: 0.8;
background-size: 40% auto;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-277.5c0-17-6.7-33.3-18.7-45.3L258.7 18.7C246.7 6.7 230.5 0 213.5 0L64 0zM325.5 176L232 176c-13.3 0-24-10.7-24-24L208 58.5 325.5 176z'/%3E%3C/svg%3E");
}
.block-item-form-1 .form-group .form-file-input{
display: none;
}
.block-item-form-1 .form-group .form-file-text{
padding-left: 40px;
font-size: 14px;
font-weight: 400;
text-transform: none;
}
.block-item-form-1 .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.block-item-form-1 .btn-submit{
margin-top: 6px;
}
.block-item-form-1 .form-note{
font-size: 11px;
color: rgba(255,255,255,0.35);
text-align: center;
margin-top: 12px;
line-height: 1.4;
}
.block-item[data-type="1"] .block-item-img>img{
width: 100%;
}
.block-item[data-type="10"] .block-item-center{
display: flex;
align-items: center;
justify-content: center;
}
.block-item-swiper .swiper{
display: flex;
max-width: 100%;
}
.block-item-swiper .swiper-slide{
width: auto;
max-width: 100%;
}
.block-item-swiper .swiper-slide-item>img{
width: 240px;
height: 150px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
object-fit: cover;
object-position: center;
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-md);
}
/*
* Block
*/
.type-list-block{
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
background: var(--gray-50);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 32px;
overflow: hidden;
height: 100%;
box-shadow: var(--shadow-sm);
}
.type-list-block-title>*{
margin-bottom: 32px;
font-size: 26px;
font-weight: 900;
text-align: center;
color: var(--navy-800);
letter-spacing: -0.5px;
}
.type-list-block-items{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.type-list-block-item{
display: flex;
align-items: center;
gap: 15px;
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-gray-200);
border-radius: var(--radius-lg);
padding: 10px;
overflow: hidden;
height: 100%;
transition: var(--transition);
background: var(--bs-white);
}
.type-list-block-item-number,
.type-list-block-item-icon{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
color: var(--red-500);
font-family: 'Montserrat', sans-serif;
font-size: 20px;
line-height: 1;
font-weight: 900;
background: var(--warm-100);
border-radius: var(--radius-md);
}
.type-list-block-item-icon svg {
width: 26px;
height: 26px;
fill: var(--red-500);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.type-list-block-item-info{
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
}
.type-list-block-item-title{
font-size: 16px;
font-weight: 700;
color: var(--navy-800);
transition: var(--transition);
}
@media (max-width: 576px) {
.type-list-block{
padding: 1rem;
}
.type-list-block-title>*{
margin-bottom: 1rem;
}
}
/*.process-work-block{
margin: 48px 0;
}*/
.process-work-block-title>*{
margin-bottom: 32px;
font-size: 26px;
font-weight: 900;
text-align: center;
color: var(--navy-800);
letter-spacing: -0.5px;
}
.process-work-block-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}
.process-work-block-steps::before {
content: '';
position: absolute;
top: 36px;
left: 12%;
right: 12%;
height: 2px;
background: var(--bs-gray-200);
z-index: 0;
}
.process-work-block-step {
display: flex;
flex-direction: column;
gap: 10px;
text-align: center;
position: relative;
z-index: 1;
}
.process-work-block-step-number {
flex: 0 0 auto;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--bs-white);
border: 2px solid var(--bs-gray-200);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 800;
color: var(--red-500);
transition: var(--transition);
}
.process-work-block-step:hover .process-work-block-step-number {
background: var(--red-500);
color: var(--bs-white);
border-color: var(--red-500);
transition: var(--transition);
}
.process-work-block-step-info{
display: flex;
flex-direction: column;
gap: 10px;
}
.process-work-block-step-title>*{
margin: 0;
font-size: 16px;
font-weight: 700;
}
.process-work-block-step-text{
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 768px) {
.process-work-block-steps{
grid-template-rows: repeat(4, 1fr);
grid-template-columns: auto;
}
.process-work-block-steps::before {
top: 12%;
bottom: 12%;
left: 36px;
right: auto;
width: 2px;
height: auto;
}
.process-work-block-step{
flex-direction: row;
align-items: center;
text-align: left;
}
.process-work-block-step-number{
margin: 0;
}
.process-work-block-step-info{
align-items: flex-start;
gap: 5px;
}
.process-work-block-step-text{
line-height: 1.2;
}
}
/*
* Editor-content
*/
.editor-content{
font-size: 14px;
line-height: 1.4;
}
@media (min-width: 768px) {
.editor-content{
font-size: 16px;
line-height: 1.6;
}
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6{
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
line-height: 1.1;
font-weight: 900;
letter-spacing: -1px;
}
.editor-content h1{
font-size: 30px;
}
.editor-content h2{
font-size: 26px;
}
.editor-content h3{
font-size: 24px;
}
.editor-content h4{
font-size: 22px;
}
.editor-content h5{
font-size: 18px;
}
.editor-content h6{
font-size: 16px;
}
@media (min-width: 768px) {
.editor-content h1{
font-size: 36px;
}
.editor-content h2{
font-size: 32px;
}
.editor-content h3{
font-size: 30px;
}
.editor-content h4{
font-size: 28px;
}
.editor-content h5{
font-size: 26px;
}
.editor-content h6{
font-size: 24px;
}
}
@media (min-width: 992px) {
.editor-content h1{
font-size: 40px;
}
.editor-content h2{
font-size: 38px;
}
.editor-content h3{
font-size: 34px;
}
.editor-content h4{
font-size: 32px;
}
.editor-content h5{
font-size: 28px;
}
.editor-content h6{
font-size: 26px;
}
}
.editor-content p{
margin-bottom: 1rem;
}
.editor-content ul{
padding-left: 1rem;
list-style: inside;
}
.editor-content a{
color: var(--red-500);
text-decoration: underline;
}
.editor-content a:hover{
color: var(--red-600);
text-decoration: none;
}
.editor-content img{
max-width:100%;
height: auto;
border-radius: var(--radius-md);
margin-bottom: 1rem;
}
.editor-content hr{
width: 100%;
color: var(--bs-gray-200);
opacity: 1;
margin-top: 0;
}
.editor-content>*:last-child {
margin-bottom: 0;
}
.editor-content .text-navy-900{
color: var(--navy-900);
}
.editor-content .text-navy-800{
color: var(--navy-800);
}
.editor-content .text-navy-700{
color: var(--navy-700);
}
.editor-content .text-navy-600{
color: var(--navy-600);
}
.editor-content .text-red-400{
color: var(--red-400);
}
.editor-content .text-red-500{
color: var(--red-500);
}
.editor-content .text-red-600{
color: var(--red-600);
}
.editor-content .text-orange-500{
color: var(--orange-500);
}
.editor-content .text-orange-400{
color: var(--orange-400);
}
.editor-content .text-green-600{
color: var(--green-600);
}
.editor-content .text-green-500{
color: var(--green-500);
}
.editor-content .text-blue-600{
color: var(--blue-600);
}
.editor-content .text-blue-500{
color: var(--blue-500);
}
.editor-content .text-gray-50{
color: var(--gray-50);
}
.editor-content .text-warm-50{
color: var(--warm-50);
}
.editor-content .text-warm-100{
color: var(--warm-100);
}
.editor-content .btn{
--bs-btn-padding-x: 20px;
--bs-btn-padding-y: 10px;
height: auto;
}
/*
* CTA BANNER
*/
.cta-banner {
padding: 32px 0;
background: linear-gradient(135deg, var(--red-600) 0%, var(--red-500) 50%, var(--orange-500) 100%);
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.cta-banner>.container{
position: relative;
z-index: 2;
max-width: 700px;
text-align: center;
}
.cta-banner>.container h2 {
font-size: 36px;
font-weight: 800;
color: var(--bs-white);
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.cta-banner>.container p {
font-size: 18px;
color: rgba(255,255,255,0.85);
margin-bottom: 36px;
line-height: 1.6;
}
.cta-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.cta-phone-big {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 800;
color: var(--bs-white);
}
@media (min-width: 992px) {
.cta-banner {
padding: 88px 0;
}
}
@media (max-width: 576px) {
.cta-banner>.container h2 {
font-size: 28px;
}
.cta-buttons{
flex-direction: column;
gap: 15px;
}
}
/*
* Footer
*/
.footer {
background: var(--navy-900);
padding: 64px 0 0;
color: rgba(255,255,255,0.7);
}
.footer-top {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-info{
order: 2;
}
.footer-logo {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 22px;
color: var(--bs-white);
margin-bottom: 16px;
letter-spacing: 0.5px;
}
.footer-logo .logo-dash {
color: var(--red-400);
}
.footer-desc {
font-size: 14px;
line-height: 1.7;
margin-bottom: 24px;
color: rgba(255,255,255,0.5);
}
.footer-menu h4,
.footer-contacts h4{
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--bs-white);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-menu{
display: flex;
flex-direction: column;
order: 1;
}
.footer-menu ul{
margin: 0;
padding: 0;
}
.footer-menu ul li {
margin-bottom: 10px;
}
.footer-menu ul li a {
font-size: 14px;
color: rgba(255,255,255,0.5);
transition: var(--transition);
}
.footer-menu ul li a:hover {
color: var(--bs-white);
}
.footer-contacts{
display: flex;
flex-direction: column;
order: 3;
}
.footer-contacts .phone-big {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--bs-white);
margin-bottom: 14px;
}
.footer-contacts p {
font-size: 14px;
color: rgba(255,255,255,0.5);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.footer-contacts p svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
flex-shrink: 0;
}
.social-links {
display: flex;
gap: 10px;
margin-top: 20px;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.social-link:hover {
background: var(--red-500);
}
.social-link svg {
width: 18px;
height: 18px;
fill: rgba(255,255,255,0.7);
}
.social-link:hover svg {
fill: var(--bs-white);
}
.footer-bottom {
padding: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: rgba(255,255,255,0.3);
}
@media (min-width: 992px) {
.footer-top{
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 48px;
padding-bottom: 48px;
}
.footer-info{
order: 1;
}
.footer-menu{
order: 2;
}
.footer-contacts{
order: 3;
}
}
@media (max-width: 500px) {
.footer{
padding: 32px 0 0;
}
.footer-top{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, .5fr);
gap: 30px;
}
.footer-menu:nth-child(2){ grid-area: 1 / 1 / 2 / 2; }
.footer-menu:nth-child(3){ grid-area: 1 / 2 / 2 / 3; }
.footer-info { grid-area: 2 / 1 / 3 / 3; }
.footer-contacts { grid-area: 3 / 1 / 4 / 3; }
}
/*
* Floating buttons
*/
.floating-buttons {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 90;
display: flex;
flex-direction: column;
gap: 10px;
}
.float-btn {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: var(--transition);
cursor: pointer;
border: none;
}
.float-btn:hover {
transform: scale(1.08);
}
.float-btn svg {
width: 24px;
height: 24px;
fill: var(--bs-white);
}
.float-btn.telegram {
background: #2AABEE;
}
.float-btn.whatsapp {
background: #25D366;
}
.float-btn.callback {
background: var(--red-500);
}