/* CSS Document */

@font-face {
  font-family: 'MegaSans-Bold';
  src: url('../fonts/MegaSans-Bold.ttf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


html {
    overflow-x: hidden;
}

a {
    transition: 0.3s ease !important;
}

a:hover {
    filter: brightness(0.8);
}

.button {
    filter: none !important;
}

.h2 {
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #fff;
    position: relative;
    z-index: 1;
}

.page-link {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 500;
    color: #ffffff !important;
    position: relative;
    z-index: 1;
}

.page-link a {
    color: #aaaaaa !important;
}

.bottom-page {
    margin-top: auto !important;
}

html {
  scrollbar-color: #424242 #000000; 
  scrollbar-width: thin; 
}

::-webkit-scrollbar {
  width: 10px; 
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 8px;
  border: 2px solid #000000; 
  transition: 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #494949;
}

::-webkit-scrollbar-thumb:active {
  background: #494949;
}

::-webkit-scrollbar-corner {
  background: #000000;
}

body {
    font-family: Montserrat;
    background-color: black;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden;
}

.body-cont {
    margin-bottom: 100px;
}

::selection {
    background: rgba(131, 131, 131, 0.5);
}

.pad {
    padding: 0 150px;
}

@media (max-width: 1440px) {
    .pad {
        padding: 0 20px !important;
    }
    .main-content {
        margin-bottom: 100px;
    }
    .portfolio-block {
        margin-top: 100px;
    }
    .reviews-block{
        margin-top: 100px;
    }
    .page-block{
        margin-top: 100px;
    }
}

@media (min-width: 1441px) {
    .portfolio-block .background-yellow {
        width: 10vw;
        filter: blur(90px) !important;
        margin-right: 100px !important;
    }

    div#home .portfolio-block {
        margin-top: 200px !important;
    }
    div#home .main-content {
        margin-bottom: 200px !important;
    }
    div#home.body-cont {
        margin-bottom: 200px !important;
    }
    div#home .reviews-block{
        margin-top: 200px !important;
    }
    .page-block{
        margin-top: 100px;
    }
    .portfolio-block {
        margin-top: 100px;
    }
    .main-content {
        margin-bottom: 100px;
    }
    .body-cont {
        margin-bottom: 100px;
    }
    .reviews-block{
        margin-top: 100px;
    }
    .heading {
        font-size: 24px !important;
    }
    .hide-info {
        font-size: 20px !important;
    }
}

.dropdown-menu-custom li {
    position: relative;
}

.color-red {
    color: #ff0044 !important;
}

.color-yellow {
    color: #ffca1b !important;
}

.main-content {
    height: auto;
    position: relative;
}

.main-background-logo {
    font-family: "Zen Dots";
    position: absolute;
    z-index: 0;
    justify-self: center;
    bottom: 0;
    color: #1a1a1a;
    font-size: 13.7vw;
    overflow: hidden;
    line-height: normal;
    pointer-events: none;
}

.logo {
    font-family: "Zen Dots";
    color: #ffffff;
}

.main-content__title {
    padding-top: 130px;
    color: white;
    text-align: center;
}

.main-logo {
    color: #ffca1b !important;
    font-family: "Zen Dots";
}

.main-content__title span {
    font-weight: 600;
    font-size: 100px;
    line-height: 100px;
}

.main-content__title h1 {
    font-weight: 600;
    font-size: 100px;
    line-height: 100px;
}

.main-content__buttons {
    display: flex;
    padding-top: 70px;
    justify-content: center;
    gap: 20px;
}

.main-content__buttons .button {
    width: 300px;
}

.button {
    text-decoration: none !important;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
    transition: 0.3s ease;
}

.border-btn {
    border: 1px solid #fff;
    background: none;
    color: #fff !important;
    font-size: 20px;
    transition: 0.3s ease;
}

.background-btn {
    border: 1px solid #fff;
    background: #fff;
    color: #000 !important;
    font-size: 20px;
    transition: 0.3s ease;
}

.border-btn:hover {
    text-shadow: 0px 0px 5px #fff;
    box-shadow: 0px 0px 13px 0px #ffffffea, inset 0px 0px 10px 0px #ffffffea;
}

.background-btn:hover {
    box-shadow: 0px 0px 13px 0px #ffffffea;
}


.slider-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #363636 !important;
    box-shadow: none !important;
    color: #fff !important;
    transform: none !important;
}

.main-content__slider {
    position: relative;
}

.slider-nav {
    display: none;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.slider-btn {
    background: #000;
    border: 1px solid #363636;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.slider-btn:hover {
    border-color: #ff0064;
    box-shadow: 0px 0px 10px 0px #ff0064;
    color: #ff0064;
}

.slider-btn:active {
    transform: scale(0.9);
}

img.slide-bg-image {
    position: absolute;
    height: 100px;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    pointer-events: none;
    transition: 0.4s ease;
    filter: contrast(0.8);
}

.slide-bg-gradient {
    position: absolute;
    height: 90px;
    width: 180px;
    bottom: -10px;
    right: -30px;
    z-index: 0;
    rotate: -5deg;
    filter: blur(100px);
    background: #ffffff30;
    pointer-events: none;
    transition: 0.3s ease;
}


.main-content__slider {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    display: flex;
    gap: 20px;
    padding-top: 70px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.slide {
    width: 33%;
    min-height: 200px;
    border: 1px solid #363636;
    padding: 20px;
    border-radius: 10px;
    background:
    linear-gradient(#1a1a1a, transparent 2px),
    linear-gradient(90deg, #1a1a1a, transparent 2px),
    linear-gradient(172deg, #000000, #000000);
    background-size: 15px 15px;
    background-position: center center; 

    transition: 0.3s ease;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

.slide-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.slide-desciption {
    color: #ececec;
    font-size: 18px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.main-background-colors {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: calc(100vw - 170px);
    top: 0;
    pointer-events: none;
}

.background-yellow {
    position: absolute;
    width: 33vw;
    height: 20vh;
    background: #ffe609cc;
    filter: blur(120px);
    margin-right: 500px;
    justify-self: center;
}

.background-red {
    position: absolute;
    width: 40vw;
    height: 20vh;
    background: #ff096fcc;
    rotate: -10deg;
    filter: blur(120px);
    margin-top: 430px;
    justify-self: center;
}

.request-block {
    display: flex;
    width: 100%;
    gap: 20px;
}

.request-block__title {
    width: 67%;
    align-content: center;
    position: relative;
    z-index: 1;
}

.request-block__form {
    width: 33%;
    background: black;
    border: 1px solid #363636;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(#363636, transparent 2px), linear-gradient(90deg, #363636, transparent 2px), linear-gradient(172deg, #000000, #000000);
    background-size: 15px 15px;
    background-position: center center;
    box-shadow: inset 0px 0px 5px 3px #000000e8;
    position: relative;
    z-index: 1;
    background: #000000 !important;
}

#request-page .request-block__form {
    justify-self: center;
}

.request-block__form .background-btn {
    width: 100%;
    display: block;
}

.request-block__title span {
    color: white;
    font-weight: 700;
    font-size: 5vw;
    line-height: 1;
}

input.input-contact {
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 20px;
    padding: 10px;
    outline: none !important;
}

.client-contact span {
    color: #fff;
    font-size: 18px;
}

.client-contact {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

textarea.textarea-comment {
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 20px;
    padding: 10px;
    outline: none !important;
    min-height: 52px;
    max-height: 300px;
}

.client-comment span {
    color: #fff;
    font-size: 18px;
}

.client-comment {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.request-block .background-red {
    margin-top: 200px;
    rotate: 20deg;
    margin-left: 50px;
    width: 30vw;
    justify-self: baseline;
}

.request-block .main-background-colors {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: fit-content;
    top: 0;
    pointer-events: none;
}

.back-connect {
    margin-bottom: 20px;
}

.back-connect span {
    font-size: 18px;
    color: #fff;
}

.back-connect__options {
    display: flex;
    width: 100%;
    gap: 10px;
}

.back-connect__options .connect-option  {
    height: 52px;
    width: 33%;
    border-radius: 5px;
    border: 1px solid #fff;
    transition: 0.3s ease;
}

.back-connect__options .connect-option a {
    height: 100%;
    width: 100%;
    padding: 10px;
    display: block;
    text-align: center;
}

.connect-option.active {
    background: #fff !important;
}

.connect-option.active a svg {
    filter: invert(1);
}

.connect-option:hover {
    box-shadow: 0px 0px 13px 0px #fff, inset 0px 0px 10px 0px #ffffffea;
}

.dropdown-toggle.show::after {
    rotate: -180deg;
}

.dropdown-toggle::after {
    transition: 0.3s ease;
}

.contact-block__title {
    color: white;
    font-weight: 700;
    font-size: 3.5vw;
    line-height: 1;
    width: 67%;
    align-content: center;
    position: relative;
    z-index: 1;
}

.contact-block__form {
    width: 33%;
    background: black;
    border: 1px solid #363636;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(#363636, transparent 2px), linear-gradient(90deg, #363636, transparent 2px), linear-gradient(172deg, #000000, #000000);
    background-size: 15px 15px;
    background-position: center center;
    box-shadow: inset 0px 0px 5px 3px #000000e8;
    position: relative;
    z-index: 1;
    background: #000000 !important;
}

.contact-block__form {
    align-content: center;
}

.contact-form-buttons {
    display: flex;
    gap: 10px;
}

.contact-block {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-top: 70px;
}

.contact-block .background-yellow {
    margin-right: 100px;
    top: -20px;
}


.contact-form-buttons .contact-button  {
    height: 52px;
    width: 33%;
    border-radius: 5px;
    border: 1px solid #fff;
    transition: 0.3s ease;
    background: #fff;
}

.contact-form-buttons .contact-button:hover  {
    box-shadow: 0px 0px 13px 0px #fff;
}

.contact-form-buttons .contact-button a {
    height: 100%;
    width: 100%;
    padding: 10px;
    display: block;
    filter: invert();
    text-align: center;
}

.contact-form-description {
    color: #fff;
    font-size: 18px;
}

.prices-block {
    margin-top: 200px;
}

.prices {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.prices-block__item {
    display: flex;
    width: 100%;
    padding: 10px;
    border: 1px solid #363636;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
    background: linear-gradient(#1a1a1a, transparent 2px), linear-gradient(90deg, #1a1a1a, transparent 2px), linear-gradient(172deg, #000000, #000000);
    background-size: 15px 15px;
    background-position: center center;
    box-shadow: inset 0px 0px 5px 3px #000000e8;
    
    opacity: 1;
    filter: blur(0px);
    max-height: 500px; 
    transition: opacity 0.3s ease, 
                filter 0.3s ease, 
                max-height 0.3s ease, 
                padding 0.3s ease,
                display 0.3s ease allow-discrete;
}

.item-price {
    color: #363636;
    font-size: 65px;
    width: 400px;
    /* border-right: 1px solid #ffffff90; */
    overflow-x: hidden;
    margin-right: 20px;
    text-wrap-mode: nowrap;
    position: relative;
    transition: 0.3s ease;
    font-family: 'Montserrat';
    font-weight: 600;
    align-items: center;
    align-content: center;
}

.item-price span {
    position: absolute;
    right: -10px;
    transition: 0.3s;
    font-family: "Zen Dots";
    /* font-weight: 100; */
    /* letter-spacing: 5px; */
    color: rgb(255 255 255 / 0%) !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}

.price-title {
    color: #fff;
    font-weight: 500;
    margin: 0;
    font-size: 2vw;
}

.price-description {
    color: #e1e1e1;
    font-size: 20px;
}

.prices-block__item:hover .item-price {
    width: 420px;
    color: #ffffff;
    text-shadow: 0px 0px 10px white;
    border-color: #fff;
}

.prices-block__item:hover .item-price span {
    right: 10px;
    text-shadow: rgb(255, 0, 100, 0) 0px 0px 5px;
    filter: drop-shadow(0px 0px 5px #ff0064);
    /* color: rgb(255, 0, 100, 0) !important; */
    -webkit-text-stroke: 2px #ff0064;
}

.prices-block__item:hover {
    border-color: #f90061;
    box-shadow: 0px 0px 15px 0px #ff0064;
}

.item-title {
    align-content: center;
    border-left: 1px solid #ffffff90;
    padding-left: 20px;
    max-width: calc(100% - 440px);
}

.prices-block__item.prices-block__item--hidden {
    display: none;
    opacity: 0;
    filter: blur(10px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

@starting-style {
    .prices-block__item {
        opacity: 0;
        filter: blur(10px);
        max-height: 0;
    }
}

.prices-more-block {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.prices-more-btn {
    display: inline-block;
    pointer-events: auto;
    text-align: center;
}






.background-yellow[data-aos="fade-right"] {
    transform: translateX(-20vw) !important;
    opacity: 0;
}

.background-yellow[data-aos="fade-right"].aos-animate {
    transform: translateX(0) !important;
    opacity: 1;
}

.background-red[data-aos="fade-left"] {
    transform: translateX(40vw) !important;
    opacity: 0;
}

.background-red[data-aos="fade-left"].aos-animate {
    transform: translateX(0) !important;
    opacity: 1;
}





.background-yellow[data-aos="fade-left"] {
    transform: translateX(-20vw) !important;
    opacity: 0;
}

.background-yellow[data-aos="fade-left"].aos-animate {
    transform: translateX(0) !important;
    opacity: 1;
}


.background-red[data-aos="fade-right"] {
    transform: translateX(40vw) !important;
    opacity: 0;
}

.background-red[data-aos="fade-right"].aos-animate {
    transform: translateX(0) !important;
    opacity: 1;
}



.portfolio {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.portfolio-item {
    width: calc(50% - 10px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 25vw;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid rgb(54, 54, 54);
    position: relative;
}

.portfolio-item__interface {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: 0.3s ease;
    opacity: 1;
}

.portfolio-preview {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    overflow-y: scroll;
    display: none;
}

.portfolio-preview-button.active + .portfolio-preview {
    display: block !important;
}

.portfolio-preview-button.active {
    background: none !important;
    color: #fff !important;
    box-shadow: none !important;
}

.portfolio-preview-button.active {
    opacity: 0.6;
}

.portfolio-preview-button.active:hover {
    opacity: 1;
}

.portfolio-item__interface.active::after {
    opacity: 1 !important;
}

.portfolio-preview {
  scrollbar-color: #424242 #000000; 
  scrollbar-width: thin; 
}

.portfolio-preview::-webkit-scrollbar {
  width: 10px; 
  height: 10px;
}

.portfolio-preview::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 10px;
}

.portfolio-preview::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 8px;
  border: 0px solid #000000; 
  transition: 0.3s ease;
}

.portfolio-preview::-webkit-scrollbar-thumb:hover {
  background: #494949;
}

.portfolio-preview::-webkit-scrollbar-thumb:active {
  background: #494949;
}

.portfolio-preview::-webkit-scrollbar-corner {
  background: #000000;
}

.portfolio-preview img {
    width: stretch;
}

.portfolio-item__interface .button {
    display: block;
    transition: 0.3s ease;
    position: relative;
    z-index: 3;
}

.portfolio-title {
    z-index: 3;
    position: relative;
    margin-bottom: 20px;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    opacity: 1;
    transition: 0.3s ease;
}

.portfolio-item:hover .button {
    background: none !important;
    color: #fff !important;
    box-shadow: none !important;
}

.portfolio-item__interface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(0deg, #000000, #10101080);
  opacity: 1;
  transition: 0.5s ease;
  pointer-events: none;
  z-index: 2;
}

.portfolio-item__interface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(0deg, #101010cc, #10101000, #10101000);
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
  z-index: 2;
}

.portfolio-item:hover .portfolio-title {
    opacity: 0;
}

.portfolio-item:hover .portfolio-item__interface::before {
    opacity: 0;
}

.portfolio-item:hover .portfolio-item__interface::after {
    opacity: 1;
}

.portfolio-view-all {
    width: calc(50% - 10px);
    font-size: 20px;
    align-content: center;
    text-align: center;
}

.portfolio-view-all a {
    padding: 10px 40px;
    display: inline-block;
}

.portfolio-block .background-yellow {
    margin-right: 200px !important;
    justify-self: end;
    bottom: 15vh;

}

@media (max-width: 1440px) {
    .portfolio-block .background-yellow {
        margin-right: 50px !important;
        justify-self: end;
        bottom: 0px;
    }
}




.reviews {
    display: flex;
    gap: 20px;
    width: 100%;
}

.reviews__item {
    width: 45%;
    min-height: 250px;
    background: black;
    border-radius: 10px;
    border: 1px solid #363636;
    padding: 10px;
    transition: 0.3s ease;
    overflow-x: hidden;
    background: linear-gradient(#1a1a1a, transparent 2px), linear-gradient(90deg, #1a1a1a, transparent 2px), linear-gradient(172deg, #000000, #000000);
    background-size: 15px 15px;
    background-position: center center;

}

.review-add {
    width: 10% !important;
    align-items: center;
    text-align: center;
    user-select: none;
    cursor: pointer;
    display: flex;
    transition: 0.3s ease;
    overflow-x: hidden;
    justify-content: center;
    overflow: hidden;
    background: none;
    border-color: #fff;
}

.review-add:hover {
    width: 20% !important;
    border-color: #fff;
    background: #fff;
    box-shadow: 0px 0px 13px 0px #ffffffea;
}

.review-add:hover + .reviews__item {
    width: 40% !important;
}

.review-add .add-text {
    color: #fff;
    transition: 0.3s ease;
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.3vw;
    line-height: 20px;

    max-width: 0;
    opacity: 0;
    filter: blur(5px);
}

.review-add:hover .add-text {
    max-width: stretch;
    opacity: 1;
    filter: blur(0px);
    color: #000;
}

.review-add:hover .plus-icon  {
    max-width: 0;
    opacity: 0;
    position: absolute;
    filter: blur(5px);
}


.review-add .plus-icon {
    color: #ffffff;
    font-size: 7vw;
    font-weight: 500;
    transition: 0.3s ease;
    position: relative;
    filter: blur(0px);
}

.all-reviews {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

.all-reviews-link {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    padding-left: 40px;
    padding-right: 40px;
}

.review {
    width: 36vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: 0.3s ease;
}

.negative {
    color: #c70000 !important;
    font-weight: 600 !important;
}

.positive {
    color: #35e200 !important;
    font-weight: 600 !important;
}

.review-title span {
    color: #e7e7e7;
    font-size: 20px;
    font-weight: 400;
}

.review-name span {
    color: #e7e7e7;
    font-size: 20px;
    font-weight: 400;
}

.name-client {
    color: #fff;
    font-weight: 600 !important;
}

.name-client {
    color: #fff;
    font-weight: 600 !important;
}

.review-service {
    height: stretch;
    align-content: end;
}

.review-service span {
    color: #e7e7e7;
    font-size: 20px;
    font-weight: 400;
    display: block;
}

.name-service {
    color: #fff;
    font-weight: 600 !important;
}

.review-comment span {
    color: #e7e7e7;
    font-size: 20px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
}

.comment {
    color: #fff;
    font-weight: 600 !important;
}

.modal-content {
    background: #000;
    border-radius: 10px;
    border: 1px solid #363636;
}

.modal-title {
    color: white;
}

button.btn-close {
    filter: invert(1);
}

.modal-header {
    padding: 10px;
}

.modal-body {
    padding: 10px;
    color: #fff;
}

.modal-header {
    padding: 10px;
    border-bottom: 0px solid #363636;
}

.modal-footer {
    padding: 10px;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    border-top: 0px solid #363636;
}

.modal-footer .button {
    width: 50%;
}

.modal-name label {
    color: #fff;
    font-size: 18px;
}

.modal-name input {
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
}

.modal-comment label {
    color: #fff;
    font-size: 18px;
}

.modal-comment textarea {
    min-height: 52px;
    max-height: 200px;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
}

.modal-service label {
    color: #fff;
    font-size: 18px;
}

.modal-service input {
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
}

.modal-review label {
    font-size: 18px;
}

.col-form-label {
    color: #fff;
}

.modal-review-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}

.modal-review-buttons .button {
    width: 50%;
    border-radius: 5px;
    border: 1px solid #363636;
    transition: 0.3s ease;
    font-size: 20px;
}

.modal-review-buttons .button.active {
    border: 1px solid #ffffff;
}

.modal.fade {
    backdrop-filter: blur(5px);
}

html:has(.modal.fade.show) {
    overflow-y: hidden;
}

.form-control:focus {
    box-shadow: none !important;
    border-color: white;
}

.btn-close:focus {
    box-shadow: none !important;
}


.modal-comment textarea {
  scrollbar-color: #363636 #ffffff; 
  scrollbar-width: thin; 
}

.modal-comment textarea::-webkit-scrollbar {
  width: 10px; 
  height: 10px;
}

.modal-comment textarea::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 8px;
}

.modal-comment textarea::-webkit-scrollbar-thumb {
  background: #363636;
  border-radius: 8px;
  border: 2px solid #ffffff; 
  transition: 0.3s ease;
}

.modal-comment textarea::-webkit-scrollbar-thumb:hover {
  background: #494949;
}

.modal-comment textarea::-webkit-scrollbar-thumb:active {
  background: #494949;
}

.modal-comment textarea::-webkit-scrollbar-corner {
  background: #ffffff;
}


.review-add .add-text {
    white-space: nowrap;
}


/* ==========================================================
   Navbar
   ========================================================== */

.position-fixed:has(.navbar) {
    width: 100%;
    z-index: 1000;
    top: 0;
}

.navbar {
    font-size: 1.25rem; 
}

.navbar .nav-link {
    color: #fff;
    font-size: 18px;
}

.nav-link .button {
    font-size: 18px;
}

.navbar-inner {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.navbar-brand {
    margin-right: 0.5rem;
    filter: none !important;
}

.navbar-brand .logo {
    transition: 0.3s ease;
}

.navbar-brand:hover .logo {
    filter: drop-shadow(0px 0px 5px #ffffff) !important
}



.navbar-toggler {
    margin: 0.5rem 0;
    box-shadow: none !important;
    outline: 0 !important;
    border: 0 !important;
}

.navbar-nav {
    margin-bottom: 0.5rem; /* was: mb-2 */
}

li.nav-item {
    transition: 0.3s ease;
}

@media (min-width: 768px) {
    .prices-more-btn {
        padding-left: 40px;
        padding-right: 40px;
    }
    .services-header__title {
        white-space: nowrap;
        padding-right: 10px;
        font-size: 40px;
        color: #F0F0F0;
    }
}

.navbar-nav .dropdown-menu {
    position: static;
    padding: 0px;
}

.glass {
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7); */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
}

.dropdown-menu-custom {
    background: none !important;
    border: none !important;
    font-size: 1.25rem; 
    border-radius: 1rem;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-item:last-of-type .nav-link {
        padding-right: 0px;
    }
    ul.dropdown-menu-custom {
        min-width: 250px;
    }
    li.nav-item {
        margin: 0px 5px;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        left: auto !important;
        right: 0px;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu li {
        place-self: center;
    }
    .navbar-expand-lg .navbar-collapse {
        justify-content: end;
    }
    nav.navbar {
        background: #101010;
        box-shadow: none;
        border-bottom: 1px solid rgb(54 54 54) !important;
    }
    ul.dropdown-menu.dropdown-menu-dark.dropdown-menu-custom {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
        padding: 10px;
        margin-top: 10px !important;
        border: 1px solid rgb(54 54 54) !important;
        background: rgb(16 16 16) !important;
        justify-items: end;
    }
    ul.dropdown-menu.dropdown-menu-dark.dropdown-menu-custom.show {
        opacity: 1 !important;
        visibility: visible !important;      
    }
    ul.dropdown-menu.dropdown-menu-dark.dropdown-menu-custom::before {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        display: block;
        margin-top: -15px;
        background: #101010;
        rotate: 45deg;
        border-top: 1px solid rgb(54 54 54);
        border-left: 1px solid rgb(54 54 54);
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .navbar-nav {
        margin-bottom: 0; /* was: mb-lg-0 */
    }

    .dropdown-menu-custom {
        display: none !important; /* was: d-lg-none */
    }

    .contact-hide {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        transform: translateX(-10px);
        display: block !important;
    }

    .contact-button.show ~ .contact-hide {
        max-height: 62px;
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .contact-button .dropdown-toggle::after {
        transition: 0.3s ease;
    }

    .contact-button.show .dropdown-toggle::after {
        transform: rotate(-90deg);
        transition: 0.3s ease;
    }

    .nav-item.contact-hide {
        display: inline-block;
    }
}

a.dropdown-item:active {
    background: none !important;
}

a.dropdown-item:hover {
    background: none !important;
}

.dropdown-item {
    padding-left: 0px !important;
    padding-right: 0px !important;
    font-size: 18px;
    color: white;
}

@media (min-width: 1025px) {
    .portfolio-block .background-yellow {
        width: 20vw;
        filter: blur(80px);
    }
}

@media (max-width: 1024px) {
    .review-add .add-text {
        font-size: 20px;
    }
    .nav-link {
        font-size: 18px;
    }
    .nav-link .button.background-btn {
        font-size: 18px;
    }
    a.dropdown-item {
        font-size: 18px;
    }
    .portfolio-block {
        margin-top: 70px;
    }
    .prices-block {
        margin-top: 70px;
    }
    .prices-block__item:hover .item-price span {
        right: 0px;
    }
    .prices-block__item:hover .item-price {
        width: calc(35% + 10px);
    }
    .prices-block__item .item-price {
        width: 35%;
    }
    .item-title {
        max-width: 58%;
    }
    .item-price {
        font-size: 50px;
    }
    .price-description {
        font-size: 16px;
    }
    .price-title {
        font-size: 20px;
    }
    .background-yellow {
        filter: blur(100px);
    }
    .background-red {
        filter: blur(100px);
        margin-top: 300px;
    }
    .main-content__buttons .button {
        width: 50%;
    }
    .slider-nav {
        display: flex;
    }
    .slide {
        width: stretch;
        min-width: calc(50% - 10px);
    }
    .main-content__title span {
        font-size: 50px;
        line-height: 50px;
    }
    .main-content__title h1 {
        font-size: 50px;
        line-height: 50px;
    }
}

@media (max-width: 991px) {
    .review-add .add-text {
        white-space: normal;
    }
    .request-block__form {
        width: 100%;
    }
    .request-block__title {
        width: 100%;
        text-align: center;
    }
    .request-block {
        flex-direction: column;
    }
    .contact-block__form {
        width: 100%;
    }
    .contact-block__title {
        width: 100%;
        text-align: center;
    }
    .contact-block {
        flex-direction: column;
    }
    .hide-info {
        font-size: 18px !important;
    }
    .icon-copied {
        left: 170px !important;
        right: auto !important;
    }
    .all-services {
        flex-wrap: wrap; 
    }
    .contact-block {
        margin-top: 30px;
    }
    .main-content {
        margin-bottom: 70px !important;
    }
    .request-block {
        margin-top: 70px;
    }
    .portfolio-block {
        margin-top: 70px;
    }
    .h2 {
        line-height: 26px;
        font-size: 26px;
    }
    .request-block__title span {
        line-height: 26px;
        font-size: 26px;
    }
    .contact-block__title {
        line-height: 26px;
        font-size: 26px;
    }
    li.nav-item:first-of-type {
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }
    li.nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    .dropdown-menu[data-bs-popper] {
        margin-top: 0px !important;
    }
    a.dropdown-item {
        padding: 8px 0 !important;
    }
    .navbar-collapse.show {
        height: 100vh;
    }
    html:has(.navbar-collapse.show) {
        overflow-y: hidden;
    }
    ul.navbar-nav {
        height: 100vh;
    }
    .navbar.glass:has(.navbar-collapse.show) {
        background: rgb(0 0 0 / 70%);
    }
    .navbar.glass:has(.navbar-collapse.collapsing) {
        background: rgb(0 0 0 / 70%);
    }
    .contact-hide {
        display: none;
    }
    .navbar {
        transition: all 0.4s ease;
        overflow: hidden;
        border-bottom: 1px solid rgb(54 54 54) !important;
    }
    .dropdown-menu-custom {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.4s ease;
        display: block !important;
    }
    .dropdown-menu-custom.show {
        max-height: 200px;
        opacity: 1;
    }
    .dropdown-item {
        transform: translateY(-10px);
        opacity: 0;
        transition: all 0.3s ease;
    }
    .dropdown-menu-custom.show .dropdown-item {
        transform: translateY(0);
        opacity: 1;
    }
    .dropdown-menu-custom.show .dropdown-item:nth-child(1) {
        transition-delay: 0.1s;
    }
    .dropdown-menu-custom.show .dropdown-item:nth-child(2) {
        transition-delay: 0.2s;
    }
}

@media (max-width: 768px) {
    .modal-review-buttons .button {
        font-size: 16px;
    }
    .modal-comment textarea {
        font-size: 16px;
    }
    .modal-name input {
        font-size: 16px;
    }
    .modal-service input {
        font-size: 16px;
    }
    .slide-title {
        font-size: 18px;
    }
    .slide-desciption {
        font-size: 16px;
    }
    .prices-more-btn {
        width: 100%;
    }
    .portfolio-block .background-red {
        margin-top: 100px;
    }
    .portfolio-item {
        width: 100%;
        height: 52vw;
    }
    .portfolio-view-all {
        width: 100%;
    }
    .portfolio-view-all a {
        display: block;
    }
    .request-block .background-red {
        margin-top: 60px;
        rotate: 20deg;
        margin-left: 50px;
        width: 50vw;
        justify-self: baseline;
        filter: blur(90px);
    }
    .navbar .nav-link a.button.background-btn {
        display: block;
    }
    input.input-contact {
        font-size: 16px;
    }
    .border-btn {
        font-size: 16px;
    }
    textarea.textarea-comment {
        font-size: 16px;
        min-height: 46px;
    }
    .background-btn {
        font-size: 16px;
    }
    .back-connect__options .connect-option {
        height: 46px;
    }
    .dropdown-menu-custom {
        top: 0px;
    }
    .heading {
        font-size: 22px !important;
    }
    .hide-info {
        font-size: 18px !important;
    }
    .contact-form-buttons .contact-button {
        height: 46px;
    }
    .contact-form-buttons .contact-button a {
        padding: 10px;
    }
}

/* ==========================================================
   Services section
   ========================================================== */

.services-header {
    display: flex;
    align-items: center;
    width: 100%;
    color: #fff;
    padding-top: 3rem; /* was: pt-5 */
}

.services-header__line {
    flex-grow: 1;
    height: 3px;
    background-color: #F0F0F0;
    opacity: 1;
}

.all-services {
    width: 100%;
    flex-direction: row;
    gap: 20px;
    display: flex;
}

@media (min-width: 992px) {
    .all-services {
        max-height: 600px;
        height: 600px;
        display: flex;
    }
}

@media (max-width: 767px) {
    .item-title {
        padding: 0;
        border: 0;
        padding-top: 15px !important;
    }
    .prices-block__item .item-price {
        width: 100%;
        font-size: 40px;
        border-right: 0px;
        border-bottom: 1px solid #ffffff90;
        height: 40px;
        overflow: hidden;
    }
    .item-title {
        max-width: 100%;
    }
    .prices-block__item {
        flex-direction: column;
    }
    .prices-block__item:hover .item-price {
        width: 100%;
        height: calc(40px + 20px);
    }
    .item-price span {
        right: 0px !important;
    }
    .services-header__title {
        white-space: nowrap;
        font-size: 30px;
        color: #F0F0F0;
        padding-right: 10px;
    }
    .all-services {
        height: auto;
    }
    .main-content__buttons .button {
        width: 100%;
    }
    .main-content__buttons {
        flex-wrap: wrap;
    }
    .slide {
        width: auto;
        min-width: stretch;
    }
    .main-content__title span {
        font-size: 30px;
        line-height: 30px;
    }
    .main-content__title h1 {
        font-size: 30px;
        line-height: 30px;
    }
    .main-content__title {
        padding-top: 90px;
    }
    .main-content__buttons {
        padding-top: 30px;
    }
    .main-content__slider {
        padding-top: 30px;
    }
    .background-red {
        position: absolute;
        width: 70vw;
        height: 20vh;
        rotate: -10deg;
        filter: blur(120px);
        margin-top: 270px;
        justify-self: center;
    }
    .background-yellow {
        position: absolute;
        width: 70vw;
        height: 20vh;
        background: #ffe609cc;
        filter: blur(120px);
        margin-left: -50px;
        margin-top: -50px;
        margin-right: auto;
        justify-self: left;
    }
}

.column-1,
.column-2,
.column-3 {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

@media (min-width: 992px) {
    .column-1,
    .column-2,
    .column-3 {
        width: 33.3333%; 
    }
}

.heading {
    cursor: pointer;
    user-select: none;
    width: 100%;
    padding: 20px;
    font-size: 22px;  
    transition: 0.3s ease;
    font-weight: 500;
    margin: 0;
    padding-right: 55px;
    display: flex;
    align-items: center;
}

.heading-img {
    filter: invert(1);
    position: absolute;
    height: 25px;
    right: 20;
    transition: 0.3s ease;
}

.services.active .heading-img {
    rotate: -180deg;
}

.services {
    transition: 0.3s ease;
    overflow: hidden;      
    width: 100%;              
    color: #fff;
    background: #000;
    border-radius: 10px;
    position: relative;
    border: 1px solid #363636;
}

.hide-info {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: 0.3s ease;
    width: 100%;        
    font-size: 1.6vw; 
    border-top: 1px solid rgba(54, 54, 54, 0);
    margin: 0;
    font-weight: 400;
    filter: blur(5px);
    opacity: 0.7;
}

.hide-info.active {
    opacity: 1;
    max-height: 300px;
    padding-bottom: 20px;
    border-top: 1px solid rgb(47, 47, 47);
    padding-top: 20px;
    filter: none;
    opacity: 1;
}

.services.active {
    border-color: #ff0064;
    box-shadow: 0px 0px 15px 0px #ff0064;
}





/* ==========================================================
   Footer
   ========================================================== */

.bottom-page {
    background: rgb(16 16 16);
    color: #cdcdcd;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgb(54 54 54) !important;
}

.bottom-page__inner {
    display: flex;    
    flex-wrap: wrap;  
}

.bottom-left,
.bottom-right {
    width: 100%;        
    display: flex;     
    flex-wrap: wrap;    
    padding: 1.5rem 0;  
}

.bottom-left {
    justify-content: flex-start; 
}

@media (min-width: 992px) {
    .bottom-left,
    .bottom-right {
        width: 50%; 
    }

    .bottom-right .bottom-title {
        text-align: end; 
    }

    .bottom-right .bottom-item {
        text-align: end; 
    }
}

.bottom-title {
    font-weight: 500;
    font-size: 24px; /* was: fs-3 */
    width: 100%;        /* was: w-100 */
}

.bottom-left .bottom-title {
    display: flex; /* was: d-flex */
}

.bottom-items {
    height: 80%;
    font-size: 18px;
    display: block;     
    width: 100%;       
}

.bottom-item a {
    color: #cdcdcd;
    text-decoration: none;
    transition: 0.2s ease;
}

.bottom-item a:hover {
    text-decoration: none;
}

.bottom-copy {
    color: #4d5359;
    font-family: "Zen Dots";
}

.bottom-item {
    position: relative;
}

.icon-copied {
    position: absolute;
    top: 2px;
    right: 170px;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s ease;
}

.tel-copy:hover + .icon-copied {
    opacity: 0.5;
}

.icon-copied.active {
    opacity: 1 !important;
}

.custom-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(16, 16, 16, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #ff0044;
    color: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    z-index: 10000;
    opacity: 0;
    transition: 0.3s ease;
    font-size: 16px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.custom-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.custom-toast::before {
    content: "⚠";
    color: #ff0044;
    font-size: 20px;
}

.input-contact.error {
    border-color: #ff0044 !important;
    animation: shake 0.3s ease;
}

.form-control.error,
.modal-review-buttons.error .button {
    border-color: #ff0044 !important;
    animation: shake 0.3s ease;
}

.required-star {
    color: #ff0044;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

#reviews-page .reviews {
    flex-wrap: wrap;
}

.reviews-empty {
    width: calc(90% - 20px);
    text-align: center;
    color: #aaaaaa;
    font-size: 18px;
    align-content: center;
    border: 1px solid #aaaaaa;
    border-radius: 10px;
    /* padding: 40px 0; */
    margin: 0;
    transition: 0.3s ease;
}

.review-add:hover + .reviews-empty {
    width: calc(80% - 20px);
}

#reviews-page .reviews .reviews__item:nth-child(2) {
    width: calc(45% - 20px) !important;
}

#reviews-page .reviews .reviews__item:nth-child(3) {
    width: calc(45% - 20px) !important;
}

#reviews-page .reviews .reviews__item {
    width: calc(50% - 10px);
}

#reviews-page .reviews .review-add:hover ~ .reviews__item:nth-child(2) {
    width: calc(40% - 20px) !important;
}

#reviews-page .reviews .review-add:hover ~ .reviews__item:nth-child(3) {
    width: calc(40% - 20px) !important;
}

@media (max-width: 767px) {
    .reviews-empty {
        width: 100%;
        height: 200px;
    }
    .reviews {
        flex-direction: column;
    }
    .reviews .reviews__item {
        width: 100% !important;
    }
    #reviews-page .reviews .reviews__item:nth-child(2),
    #reviews-page .reviews  .reviews__item:nth-child(3) {
        width: 100% !important;
    }
    #reviews-page .reviews .review-add:hover ~ .reviews__item:nth-child(2),
    #reviews-page .reviews .review-add:hover ~ .reviews__item:nth-child(3) {
        width: 100% !important;
    }
    .review-add .add-text {
        white-space: nowrap;
    }
    .reviews__item.review-add {
        min-height: 52px;
        border-radius: 5px;
    }
    span.plus-icon {
        position: absolute !important;
    }
    span.add-text {
        position: absolute;
    }
    .review-add .add-text {
        filter: blur(15px);
    }
    .review-add:hover .plus-icon {
        filter: blur(15px);
    }
    .review-add .plus-icon {
        font-size: 50px;
    }
    .review {
        width: 100%;
    }
    .review-add:hover + .reviews__item {
        width: 100% !important;
    }
}

.error-404 {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 0;
    position: relative;
    z-index: 1;
}

.error-404__code {
    font-family: "Zen Dots";
    font-size: 200px;
    line-height: 1;
    color: rgb(255 255 255 / 0%);
    -webkit-text-stroke: 3px rgba(255, 255, 255, 0.65);
    margin-bottom: 10px;
}

.error-404__title {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}

.error-404__text {
    font-size: 18px;
    color: #aaaaaa;
    max-width: 520px;
    margin-bottom: 40px;
}

.error-404__buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.error-404__buttons .button {
    width: 220px;
}

@media (max-width: 767px) {
    .error-404__code {
        font-size: 110px;
    }
    .error-404__title {
        font-size: 24px;
    }
    .error-404__text {
        font-size: 16px;
        padding: 0 10px;
    }
    .error-404__buttons .button {
        width: 100%;
        max-width: 280px;
    }
}