@font-face {
        font-family: 'Century Gothic';
        src: url('/source/fonts/centurygothic.ttf') format('truetype');
    }
    body, header, footer, article, .card-text, #opisMat, #opisAbout, #opisAboutStanok, #opis, #txtfot, #maintxt, #maintxt2, #maintxt3, #containerMain, #textTextureS, #textTexture, #opisAboutMDF, #navtxt, #phone-number {
        font-family: 'Century Gothic', sans-serif;
        font-weight: 500;
    }
    
    body, header, footer, article, .card-text, #opisMat, #opisAbout, #opisAboutStanok, #opis, #txtfot, #maintxt, #maintxt2, #maintxt3, #containerMain, #textTextureS, #textTexture, #opisAboutMDF, #navtxt, #phone-number {
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }
    
    #phone-number {
        color: white;
        font-size: 1.5vw;
        text-align: right;
        margin-right: 20px;
    }
    
    @media (max-width: 1024px) {
        #phone-number {
            font-size: 1.4rem;
        }
    }
    
    @media (max-width: 768px) {
        #phone-number {
            font-size: 1rem; 
        }
    }
    
    @media (max-width: 480px) {
        #phone-number {
            font-size: 1rem;
        }
    }

    body {
        background: rgb(91,78,78);
        background: linear-gradient(90deg, rgba(91,78,78,1) 0%, rgba(80,80,76,1) 16%, rgba(98,89,89,1) 36%, rgba(94,97,97,1) 57%, rgba(69,73,74,1) 75%, rgba(90,98,98,1) 91%);
    }   

    article {
        background: rgb(91,78,78);
        background: linear-gradient(90deg, rgba(91,78,78,1) 0%, rgba(80,80,76,1) 16%, rgba(98,89,89,1) 36%, rgba(94,97,97,1) 57%, rgba(69,73,74,1) 75%, rgba(90,98,98,1) 91%);
        padding: 0%;
        margin: 0%;
    }
    header, footer {
        background: rgb(91,78,78);
        background: linear-gradient(90deg, rgba(91,78,78,1) 0%, rgba(80,80,76,1) 16%, rgba(98,89,89,1) 36%, rgba(94,97,97,1) 57%, rgba(69,73,74,1) 75%, rgba(90,98,98,1) 91%);  
    }

    html {
        scroll-behavior: smooth;
    }
    #sslk {
        font-size: 25px;   
        text-decoration:none; 
    }
    #bgimg {
        background-image: url(../source/1_главная.jpg);
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        object-fit: cover;
        position: relative;
    }
    #navtxt {
        color: white;
        font-size: 1.5vw;
    }
    #maintxt {
        font-size: 3.5vw;
    }
    #containerMain {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: left;
        font-size: 1.8vw ;
        color: white;
        letter-spacing: 2px;
    }
    #fabric {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #maintxt2 {
        font-size: 2.3vw;
        position: absolute;
        top: 2%;
        left: 10%;
        text-align: center;
        width: 80%;

    }
    #maintxt3 {
        position: absolute;
        top: 2%;
        left: 20%;
        text-align: justify;

        letter-spacing: 0.1px;
        width: 78%;
        line-height: 1.3;
        font-size: 2.0vw ;
    }
    #relpos {
        position: relative;
        padding: 0%;
    }
    #opis {
        text-align: justify;
        font-size: 1.5vw ;
        color: white;


        letter-spacing: 1px;
    }
    #txtfot {
        text-align: justify;
        font: 0.9vw ;
        color: white;


        letter-spacing: 1px;
        
    }
    .col {
        padding: 0%;
    }
    body {
        overflow-x:hidden;
    }
    .card-img-top {
        width: 100%;
        height: 100%;
        max-width: 350px;
        max-height: 210px;
        object-fit: cover;
    }
    #colmat {
        padding: 0%; 
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
    .card-text {
        font-size: 1.5vw ;
        color: black;

    }
    a {
        width: 100%;
        height: 100%;
        max-width: 350px;
        max-height: 210px;
        object-fit: cover;
    }
    #opisMat {
        position: relative;
        text-align: justify;
        font-size: 1.3vw ;
        color: white;


        letter-spacing: 1px;
        width: 90%;
        left: 5%;
        
    }
    #opisAbout {
        position: relative;
        text-align: justify;
        font-size: 1.5vw ;
        color: white;


        letter-spacing: 1px;
        width: 80%;
        left: 10%;
    }
    #opisAboutStanok {
        position: relative;
        text-align: center;
        font-size: 1.6vw ;
        color: white;


        letter-spacing: 1px;
        width: 80%;
        left: 10%;
    }
    #stanok {
        position: relative;
        width: 97.5%;
        height: 95%;
        object-fit: cover;
        left: 2.5%;
        
    }
    #stanok2 {
        position: relative;
        width: 95%;
        height: 95%;
        object-fit: cover;
        left: 5%;
        padding: 0%;
    }
    #logoOur {
        width: 80%;
        height: 80%;
        object-fit: contain;
    }
    #caroIMG {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 500px;
        max-height: 500px;
        min-width: 250px;
        min-height: 250px;
    }

    .arrowUp {
        position: fixed;
        bottom: 5%;
        right: 3%;
        color: #fff;
        width: 10vw;
        height: 10vw;
        max-width: 70px;
        max-height: 70px;
        background: #a19e9e;
        -webkit-background-size: 300%;
        background-size: 300%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 50px;
        border-radius: 5px;
        transition: .5s;
        z-index: 1000;
    }
    .arrowUp:hover {
        background-position: 100% 0;
    }
    #texture {
        width: 100%;
        height: 100%;
        max-height: 150px;
        max-width: 250px;
        
    }
    #textTexture {
        font-size: 0.8vw ;
        text-align: center;
        max-width: 250px;
        color: white;
        margin-bottom: 5px;
        padding-top: 2%;
        padding-bottom: 5%;

    }
    #textureS {
        width: 100%;
        height: 100%;
        max-height: 900px;
        max-width: 650px;
        margin-bottom: 5px;
        
    }
    .decor-thumb-holder {
        padding-bottom: 70px;
    }
    #textTextureS {
        font-size: 1.5vw ;
        text-align: center;
        max-width: 425px;
        color: white;


        margin-bottom: 5px;
        padding-bottom: 5%;

    }
    #stanok3 {
        position: relative;
        width: 93%;
        height: 95%;
        object-fit: cover;
        left: 7%;
        padding: 0%;
        max-width: 440px;
        max-height: 440px;
    }
    #opisAboutMDF {
        position: relative;
        text-align: left;
        font-size: 1.8vw ;
        color: white;

        letter-spacing: 1px;
        width: 80%;
    }

    .container .img-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .container .img-container .img,
    .container .img-container .video {
        width: 420px;
        height: 350px;
        overflow: hidden;
    }

    .container .img-container .img img,
    .container .img-container .img video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: .5s;
        filter: brightness(1.3) contrast(1.2);
        @media (max-width: 768px) {
            transition: none; /* Отключаем эффект перехода */
            filter: brightness(1.3) contrast(1.2); /* Оставляем эффект фильтра для мобильных устройств */
        }
    }

    .container .img-container .img:hover img,
    .container .img-container .video:hover video {
        transform: scale(1.1);
        @media (max-width: 768px) {
            transform: none; /* Отключаем эффект перехода */
        }
    }

    .container .img-container .img img:hover ~ img,
    .container .img-container .video video:hover video ~ video {
        transform: scale(1);
        transition: transform 0.5s;
    }

    .container .pop-up {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
        display: none;
        z-index: 2000;
        
    }
    .container .pop-up img,
    .container .pop-up video  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 5px solid #fff;
        border-radius: 8px;
        max-width: 85%;
        max-height: 85%;
        user-select: none;
        z-index: 2000;
        filter: brightness(1.3) contrast(1.2);
    }
    .container .pop-up span {
        position: fixed;
        top: 10px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: #fff;
        font-size: 52px;
        z-index: 2000;
        text-align: center;
        line-height: 40px; 
        border-radius: 50%;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

    }
    .container .pop-up button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.5);
        border: none;
        color: #333;
        font-size: 24px;
        width: 50px;
        height: 50px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .container .pop-up button:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .container .pop-up button.prev {
        left: 20px;
    }

    .container .pop-up button.next {
        right: 20px;
    }
    @media (max-width: 1024px) {
        .card-text,
        #containerMain,
        #textTextureS,
        #textTexture,
        #opisAboutMDF {
            font-size: 1.3rem;
        }
        #textTexture {
            font-size: 1.6vw;
        }
        .modal-text
        {
            font-size: 1.4vw;
        }
    }

    @media (max-width: 768px) {
        .card-text,
        #containerMain,
        #textTextureS,
        #opisAboutMDF {
            font-size: 1.6rem; 
        }
        #textTexture {
            font-size: 1.9vw;
        }
        .modal-text
        {
            font-size: 1.4vw;
        }
    }

    @media (max-width: 575px) {
        .card-text,
        #containerMain,
        #textTextureS,
        #textTexture,
        #opisAboutMDF {
            font-size: 1.4rem;
        }
        #textTexture {
            font-size: 1.8vw;
        }
        .modal-text
        {
            font-size: 1.4vw;
        }
        .decor-thumb-holder 
        {
            max-width: 50%;
        }
        #card{
            max-width: 50%;
        }
    }

    @media (max-width: 1024px) {
        #mainl{
            font-size: 1.7rem;
        }
    }

    @media (max-width: 768px) {
        #mainl {
            font-size: 1.3rem; 
        }
    }

    @media (max-width: 480px) {
        #mainl {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 1024px) {
        #opis, #maintxt2, #maintxt3,
        #opisMat,
        #opisAbout,
        #opisAboutStanok {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 768px) {
        #opis, #maintxt2, #maintxt3,
        #opisMat,
        #opisAbout,
        #opisAboutStanok {
            font-size: 0.9rem; 
        }
    }

    @media (max-width: 480px) {
        #opis, #maintxt2, #maintxt3,
        #opisMat,
        #opisAbout,
        #opisAboutStanok {
            font-size: 0.7rem;
        }
    }

    @media (max-width: 1024px) {
        #maintxt {
            font-size: 1.9rem;
        }
    }

    @media (max-width: 768px) {
        #maintxt {
            font-size: 1.6rem; 
        }
    }

    @media (max-width: 480px) {
        #maintxt {
            font-size: 1.6rem;
        }
    }
    @media (max-width: 1024px) {
        #txtfot {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 768px) {
        #txtfot {
            font-size: 0.6rem; 
        }
    }

    @media (max-width: 480px) {
        #txtfot {
            font-size: 0.5rem;
        }
    }
    @media (max-width: 1024px) {
        #navtxt{
            font-size: 1.6rem;
        }
    }

    @media (max-width: 768px) {
        #navtxt{
            font-size: 1rem; 
        }
    }

    @media (max-width: 480px) {
        #navtxt{
            font-size: 1rem;
        }
    }

    .custom-header {
        background: rgb(91,78,78);
        background: linear-gradient(90deg, rgba(91,78,78,1) 0%, rgba(80,80,76,1) 16%, rgba(98,89,89,1) 36%, rgba(94,97,97,1) 57%, rgba(69,73,74,1) 75%, rgba(90,98,98,1) 91%);
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        font-family: 'Century Gothic', sans-serif;
        font-weight: 500;
        font-size: 1.5vw;
    }

    .navbar-nav .nav-link {
        color: #fff; /* Белый цвет текста для контраста */
        margin: 0 15px; /* Отступы между ссылками */
    }

    .navbar-brand img {
        margin-bottom: 10px; /* Добавить нижний отступ для логотипа */
    }

    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.1); /* Цвет бордера кнопки */
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar-text .nav-link {
        color: #fff; /* Белый цвет текста */
    }
/* Медиа-запрос для уменьшения размера шрифта на маленьких экранах */
@media (max-width: 768px) {
    .custom-header {
        font-size: 5vw;
    }
}

/* Медиа-запрос для уменьшения размера шрифта на очень маленьких экранах */
@media (max-width: 576px) {
    .custom-header {
        font-size: 4vw;
    }
}

    .project-divider {
        border: none;
        border-top: 5px solid rgb(0, 0, 0); /* Увеличиваем толщину линии */
        margin: 20px; /* Расстояние между проектами */
        width: calc(100% - 40px); /* Ширина линии, учитывая отступы */
        max-width: calc(100% - 40px); /* Ограничиваем максимальную ширину линии */
        margin-left: 20px; /* Отступ слева */
    }
    

    .container .img-container .controls {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px;
        border-radius: 10px;
        margin-top: 10px;
        width: 100%;
    }
    
    .container .img-container .controls button {
        background-color: #fff;
        border: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
        font-size: 16px;
    }
    
    .container .img-container .controls button:hover {
        background-color: #ddd;
    }
    
    .container .img-container .controls input[type="range"] {
        flex-grow: 1;
        margin-right: 10px;
        height: 5px;
        cursor: pointer;
    }
    
    .container .img-container .controls span {
        color: #fff;
        font-size: 14px;
        margin-right: 10px;
    }

#textureLightbox {
  display: none; /* Скрыто по умолчанию */
  position: fixed; 
  z-index: 9999; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(255, 255, 255, 0.95);
}

#textureLightbox .modal-content {
  margin: 3% auto; 
  display: block; 
  width: 60vw;     /* 90% от ширины экрана */
  height: 35vw;
  align-items: center; /* Центрирование по горизонтали */
  justify-content: center; /* Центрирование по вертикали */
  text-align: center;
  object-fit: cover;
}
.modal-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрирование по горизонтали */
  justify-content: center; /* Центрирование по вертикали */
  text-align: center; /* Центрирование текста внутри */
}

#textureLightbox .close {
  position: absolute; 
  top: 20px; 
  right: 35px; 
  color: white; 
  font-size: 40px; 
  font-weight: bold; 
  color: #000;
  cursor: pointer;
}
#textureLightbox .modal-text {
  margin-top: 0px;
  font-size: 18px;
  color: #000000;
  text-align: center;
  max-width: 80%;
  align-items: center; /* Центрирование по горизонтали */
  justify-content: center; /* Центрирование по вертикали */
  text-align: center;
  font-size: 2.5vw;
}
@media (max-width: 575px) {
    #textureLightbox .modal-content {
        width: 65vw; 
        height: 80%;

    }
    .modal-content-wrapper
    {
        height: 90%;
    }
    #textureLightbox .modal-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    #textureLightbox .modal-content {
        width: 65vw; 
        height: 80%;

    }
    .modal-content-wrapper
    {
        height: 90%;
    }
    #textureLightbox .modal-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 1024px) {
    #textureLightbox .modal-content {
        width: 65vw; 
        height: 80%;

    }
    .modal-content-wrapper
    {
        height: 90%;
    }
    #textureLightbox .modal-text {
        font-size: 1.2rem;
    }
}