.container { width: 100%; margin: 0px auto; padding: 0px 15px; }
section { margin-bottom: 60px; background: white; border-radius: 12px; padding: 20px; box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px; }
h2 { font-size: 2.2rem; font-weight: bold; margin-bottom: 25px; color: rgb(44, 62, 80); text-align: center; position: relative; padding-bottom: 15px; text-transform: uppercase; }
h3 { font-size: 2rem; font-weight: bold; margin-bottom: 25px; color: rgb(33, 32, 32); text-align: center; position: relative; padding-bottom: 15px; }
.button-content {
  & button { font-size: 2rem; font-weight: bold; color: rgb(33, 32, 32); min-height: 70px; width: 50%; max-width: 250px; border-radius: 12px; }
  margin-top: 25px; text-align: center; position: relative; padding-bottom: 15px;
}
.button-catalogue button { background-color: rgb(251, 176, 210); max-width: 250px; }
.two-columns { display: flex; align-items: center; gap: 50px; }
.text-content { flex: 1 1 0%; }
.text-content h3 { font-size: 1.8rem; margin-bottom: 20px; color: rgb(41, 128, 185); }
.hero-section {
  & .two-columns { background: linear-gradient(to right, rgba(220, 220, 220, 0.21), rgb(169, 169, 169)); border-radius: 10px; }
  & .text-content { display: flex; flex-direction: column; }
  & p { text-align: center; font-size: 3rem; line-height: 1.5em; color: rgb(44, 62, 80); text-transform: uppercase; padding: 3% 12%; margin: 0px; }
}
.btn { display: inline-block; background: linear-gradient(to right, rgb(52, 152, 219), rgb(41, 128, 185)); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: 0.3s; border: none; cursor: pointer; font-size: 1rem; }
.btn:hover { background: linear-gradient(to right, rgb(41, 128, 185), rgb(28, 90, 122)); transform: translateY(-3px); box-shadow: rgba(41, 128, 185, 0.3) 0px 7px 15px; }
.image-content { flex: 1 1 0%; text-align: center; }
.image-content img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 25px; transition: transform 0.5s; }
.image-content img:hover { transform: scale(1.02); }
.five-columns { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 30px; }
.feature { flex: 1 1 0%; min-width: 200px; max-width: 200px; text-align: center; padding: 25px 15px; border-radius: 10px; background: rgb(248, 250, 252); transition: 0.3s; border: 1px solid rgb(234, 234, 234); }
.feature:hover { transform: translateY(-10px); box-shadow: rgba(0, 0, 0, 0.08) 0px 15px 30px; border-color: rgb(251, 176, 210); background: white; }
.feature-icon { font-size: 2.8rem; margin-bottom: 20px; color: rgb(52, 152, 219); display: inline-block; height: 80px; width: 80px; line-height: 80px; background: rgb(227, 242, 253); border-radius: 50%; }
.feature h4 { font-size: 1.4rem; margin-bottom: 12px; color: rgb(44, 62, 80); }
.main-block p { color: rgb(44, 62, 80); font-size: 1.6rem; margin-top: 20px; text-transform: uppercase; text-align: center; }
.feature img { display: block; margin-left: auto; margin-right: auto; max-width: 170px; }
.big_img { padding: 0px 10px 30px; }
.four-columns { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 30px; }
.four-columns p { color: rgb(37, 34, 34); font-size: 1.6rem; }
.feature4 { display: flex; flex-flow: column wrap; place-content: center flex-end; max-width: 256px; text-align: center; border-radius: 10px; transition: 0.3s; }
.feature4:hover { transform: translateY(-10px); box-shadow: rgba(0, 0, 0, 0.08) 0px 15px 30px; }
.feature4 p { color: rgb(37, 34, 34); font-size: 1.6rem; text-transform: uppercase; text-align: center; }
.feature4 img {display: block;margin-left: auto;margin-right: auto;max-width: 100%;border-radius: 5px;}
.features4-section .content { background: linear-gradient(to right, rgba(220, 220, 220, 0.21), rgb(169, 169, 169)); border-radius: 10px; padding: 10px; }
.content { }
.bottom-text { margin: 40px 20px 10px; }
.bottom-text p { color: rgb(44, 62, 80); font-size: 1.6rem; margin-top: 0px; text-transform: uppercase; text-align: center; }
.container2 { display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 20px; }
.dropdown { position: relative; display: inline-block; min-width: 250px; min-height: 150px; flex-basis: 30%; margin: 10px; }
.dropbtn { background-color: rgb(204, 204, 204); color: black; padding: 10px; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; width: 100%; justify-content: center; font-size: 2.4rem; height: 100%; border-radius: 12px; }
.dropbtn:hover, .dropbtn:focus { background-color: rgb(251, 176, 210); }
.arrow { margin-left: 10px; }
.dropdown-content { display: none; width: 30vw; position: absolute; background-color: rgb(249, 249, 249); min-width: 160px; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px; z-index: 1; border-radius: 10px; left: -5vw; }
.dropdown-content a, section p { font-size: 16px; color: black; padding: 10px 10px 0px; text-decoration: none; display: block; text-transform: uppercase; }
.dropdown.active .dropdown-content { display: block; }
.dropdown.active .arrow { transform: rotate(180deg); }
.button-content button { width: 60%; }
.button-content button:hover { background-color: rgb(251, 176, 210); cursor: pointer; }
.button-catalogue button:hover { background-color: rgb(220, 220, 220); cursor: pointer; }
.contacts-section {
  & .two-rows { display: flex; flex-flow: column wrap; align-items: center; }
}
.brand-parent { display: -webkit-flex; flex-wrap: nowrap; align-items: center; }
.brands-carousel {height: 140px;display: -webkit-flex;flex-wrap: nowrap;align-items: center;animation: 30s linear 0s infinite normal none running animate;}
.brands-carousel .slide-content {height: 100%;flex: 0 0 auto;display: flex;align-items: center;justify-content: center;width: 140px;}
.brands-carousel .slide-content div {height: 100%;display: -webkit-flex;align-items: center;justify-content: center;white-space: nowrap;color: rgb(128, 128, 128);text-transform: uppercase;padding: 10px;width: 100%;transition: 0.3s ease-in-out;}
.brands-carousel .slide-content div:hover, .brands-carousel .slide-content div:active { box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 25px; }
@keyframes animate { 
  0% { transform: translate3d(0px, 0px, 0px); }
  100% { transform: translate3d(-100%, 0px, 0px); }
}
@-webkit-keyframes animate { 
  0% { transform: translate3d(0px, 0px, 0px); }
  100% { transform: translate3d(-100%, 0px, 0px); }
}
.brands-carousel .slide-content div img { display: inline-block; width: auto; height: auto; max-height: 95%; transition: 0.3s ease-in-out; max-width: 100% !important; }
.brands-carousel .slide-content div:hover img, .brands-carousel .slide-content div:active img { opacity: 1; }
@media (max-width: 768px) {
  .two-columns { flex-direction: column; gap: 30px; }
  .text-content, .image-content { width: 100%; }
  .text-content h3 { text-align: center; }
  .btn { display: block; text-align: center; margin: 0px auto; width: fit-content; }
  .feature { flex: 0 0 calc(50% - 30px); }
  h2 { font-size: 1.8rem; }
  .container2 { flex: 0 0 calc(50% - 30px); }
  .dropbtn { font-size: 13px; }
  .dropdown { min-height: 100px; }
  .hero-section p { font-size: 2rem; }
}
@media (max-width: 576px) {
  body.wide .container:not(.inner-container) { padding-left: 20px; padding-right: 20px; }
  section {margin-bottom: 30px;}
  h1 {font-size: 15px;line-height: 1.1em;}
  h2 { margin-top: 5px; margin-bottom: 15px; padding-bottom: 5px; }
  .feature { max-width: 61px; }
  .feature img { max-width: 100%; }
  .five-columns { gap: 10px; }
  .five-columns .feature { min-width: 61px; max-width: 67px; padding: 4px; }
  .five-columns .feature p { font-size: 35%; font-weight: bold; line-height: 2em; padding: 10px 0px 0px; }
  .two-columns { gap: 15px; }
  .big_img { padding: 0px 0px 20px; }
  section {padding: 20px 15px;}
  body { padding: 10px; }
  .container2 { flex: 0 0 100%; }
  .dropbtn { font-size: 13px; }
  .hero-section p { font-size: 12px; }
  .dropdown-content { width: 100%; left: 0px; }
  .dropdown { min-height: 80px; }
  .dropdown-content a, section p { font-size: 13px; line-height: 1.6em; }
  .feature4 { flex-direction: column; max-width: 98%; }
  .feature4 p { font-size: 12px; }
  .bottom-text p { font-size: 12px; line-height: 1.6em; }
  .four-columns { gap: 8px; }
  .feature4 img { max-width: 100%; }
}


.big_img img {
    border-radius: 5px;
}