
/*РћР±РЅСѓР»РµРЅРёРµ*/
*{
	padding: 0;
	margin: 0;
	border: 0;
}
input {
    font-size: 18px;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
a { color: inherit; } 
nav,footer,header,aside{display: block;}

.contain, #p-menu{
    width: 40px;
}
#contain {
padding: 5px 0 0;
}
html {
scroll-behavior: smooth;
}

html,body{
	height: 100%;
	width: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
@font-face {
	font-family: 'Lora'; 
	src: url(../fonts/Lora.ttf);
	font-display: fallback;
}
@font-face {
	font-family: 'Lora-Italic'; 
	src: url(../fonts/Lora-Italic.ttf);
	font-display: fallback;
}
@font-face {
	font-family: 'Wallpoet'; 
	src: url(../fonts/Wallpoet-Regular.ttf);
	font-display: fallback;
}

@font-face {
	font-family: 'Segoe'; 
	src: url(../fonts/Segoe.ttf); 
	font-display: fallback;
}
@font-face {
	font-family: 'rokkitt'; 
	src: url(../fonts/rokkitt.ttf);
	font-display: fallback;
}
@font-face {
	font-family: 'Droid Arabic Naskh'; 
	src: url(../fonts/DroidNaskh-Regular.ttf);
	font-display: fallback;
}
@font-face {
	font-family: 'Roboto'; 
	src: url(../fonts/Roboto.ttf);
	font-display: fallback;
}

.body {
    overflow-x: hidden; 
}
#h1-page1 {
    font-family: "Lora";
    color: #fff;
    font-size: 44px;
    font-weight: 900;
    text-transform: uppercase;
}
p {
font-family: "Lora";
    
}
.bigred{
	font-size: 20px;
	color: red;
}
header {
	background: black;
	width: 100%;
	box-shadow: inset 0 -8px 12px -14px white;
	position: fixed;
    z-index:90;
}
.menu {
    width: 100%;
    color: #fff;
}

.menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 20px;
    flex-shrink: 0;
}

.logo img {
    width: 180px;
    display: block;
}

.menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    font: inherit;
    padding: 15px 7px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    font-family: "Lora";
}

.menu a {
    color: white;
    text-decoration: none;
}

.menu li:hover,
.menu li:active {
    background: #343434;
}

@media (max-width: 767px) {
    .menu { display: none; }
}

@media (min-width: 768px) {
    .menu-mobile { display: none; }
}

/* Мобильная версия */
@media (max-width: 767px) {
    .menu-mobile {
        display: block;
        width: 100%;
        background-color: #000;
    }
    
    .nav-menu-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
    }
    
    .logo-mobile {
        display: flex;
        align-items: center;
        text-decoration: none;
        flex-shrink: 0;
    }
    
    .logo-mobile img {
        width: 100px;
        display: block;
                margin-bottom: -6px;
    }
    
    .phone-mobile {
        color: #fff;
        text-decoration: none;
        font-size: 17px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .nav-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    
    #nav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
    }
    
    #nav li {
        padding: 15px;
        border-bottom: 1px solid #333;
    }
    
    #nav a {
        color: #fff;
        text-decoration: none;
        display: block;
    }
}
/* Мобильная версия */
@media (max-width: 767px) {
    .menu-mobile {
        display: block;
        width: 100%;
        background-color: #000;
    }
    
    .nav-menu-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
    }
    
    .logo-mobile {
        display: flex;
        align-items: center;
        text-decoration: none;
        flex-shrink: 0;
    }
    
    .logo-mobile img {
        width: 100px;
        display: block;
        margin-bottom: -6px;
    }
    
    .phone-mobile {
        color: #fff;
        text-decoration: none;
        font-size: 17px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .nav-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    
    #nav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
    }
    
    /* Добавляем стили для открытого меню */
    #nav.open {
        display: block;
    }
    
    #nav li {
        padding: 15px;
        border-bottom: 1px solid #333;
    }
    
    #nav a {
        color: #fff;
        text-decoration: none;
        display: block;
    }
    
    /* Стили для кнопки меню */
    #contain {
        display: inline-block;
        cursor: pointer;
        margin-right: 10px;
    }
    
    .bar1, .bar2, .bar3 {
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 4px 0;
        transition: 0.3s;
    }
    
    /* Анимация кнопки при открытии */
    #contain.change .bar1 {
        transform: rotate(-45deg) translate(-5px, 5px);
    }
    
    #contain.change .bar2 {
        opacity: 0;
    }
    
    #contain.change .bar3 {
        transform: rotate(45deg) translate(-5px, -5px);
    }
}
.inp1sc1 {
	max-width: 90%;
	margin: 0 auto;
	text-align: center;
}
.h1-page1 {
	color: #fff;
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
  .h1-page1 {font-size: 22px; line-height: 1em; letter-spacing: 0px;}
}
.pfast {
	color: #fff;
    font-family: "Lora",Sans-serif;
    font-size: 80px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: .3px;
    text-shadow: 1px 0px 4px #878787;
}
@media (max-width: 767px) {
  .pfast {font-size: 40px; line-height: 1em;}
}
@media (max-width: 767px) {
  #p12 {display: none;}
}
#p12 {
	color: #fff;
    font-family: "Lora",Sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.8em;
    letter-spacing: 1px;
    text-shadow: -2px 0px 10px #000;
}
.p1sc1 button {
	margin: 20px 0 0 0;
	padding: 10px 24px;
    background-color: #000;
    box-shadow: 0px 0px 10px 0px rgb(255 255 255 / 46%) inset;
    transition: transform .4s;
}
.p1sc1 button:hover {
	transform:scale(0.9);
}
#pbut {
	font-size: 17px;
    font-weight: 500;
    fill: #fff;
    color: #fff;
    line-height: 17px;
}
@media (max-width: 767px) {
  #pbut {font-size: 15px;}
}
#imgmain {
	width: 90px;
	margin: 20px 0;
}
@media (max-width: 767px) {
  #imgmain {max-width: 40px}
}
.hr1 {
	max-width: 50px;
    background-color: #ddb734;
    height: 6px;
    margin: 10px auto 25px;
}
@media (max-width: 767px) {
  .hr1 {max-width: 20px; margin: 20px auto 30px; height: 4px;}
}
.sc2 {
    padding: 40px 0 80px 0;
    background-color: black;
}

.ins2 {
    margin: 0 auto;
    max-width: 1100px;
    background-color: transparent;
    border: none;
}

/* Контейнер для колонок с отступом между ними */
.sc2-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

/* Левая колонка с картинкой - фиксированная высота больше правой */
.sc2-col-left {
    flex: 0 0 calc(35% - 15px);
    height: 550px;
    position: relative;
}

.sc2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Правая колонка с текстом - С рамкой */
.sc2-col-right {
    flex: 0 0 calc(65% - 15px);
    padding: 20px 40px 30px 40px;
    box-sizing: border-box;
    background-color: #000000;
    border: 1px solid #deb734;
    border-radius: 10px;
}

/* Стили для текста */
.sc2-col-right #since {
    color: rgb(255 255 255 / 11%);
    letter-spacing: .3px;
    text-align: left;
    padding: 0 0 10px 0;
    margin: 0;
}

.sc2-col-right .iin2 {
    text-align: left;
    padding: 0;
}

.sc2-col-right .iin2 p {
    text-align: left;
    color: #fff;
    font-size: 17px;
    font-weight: 200;
    line-height: 1.3em;
    margin-bottom: 20px;
}

/* ========== Планшеты ========== */
@media (max-width: 991px) {
    .sc2 {
        padding: 60px 0;
    }
    .sc2-col-left {
        height: 450px;
    }
    .sc2-col-right {
        padding: 20px 30px 25px 30px;
    }
    .sc2-col-right .iin2 p {
        font-size: 15px;
    }
}

/* ========== Мобильные устройства ========== */
@media (max-width: 767px) {
    .sc2 {
        padding: 0 10px;
    }
    .ins2 {
        margin: 0 20px;
    }
    .sc2-row {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    /* Скрываем блок с картинкой на мобильных */
    .sc2-col-left {
        display: none;
    }
    .sc2-col-right {
        flex: 0 0 100%;
        width: 100%;
        padding: 20px;
        border-radius: 8px;
    }
    .sc2-col-right #since {
        font-size: 14px;
        padding: 0 0 8px 0;
    }
    .sc2-col-right .iin2 p {
        line-height: 1.5em;
        margin-bottom: 12px;
        font-size: 14px;
    }
    /* Кнопка на всю ширину на мобильных */
    
}

/* ========== Очень маленькие экраны ========== */
@media (max-width: 480px) {
    .sc2 {
        padding: 0px 0px 30px 0px;
    }
    .sc2-row {
        gap: 0;
    }
    .sc2-col-right {
        padding: 15px;
    }
    .sc2-col-right .iin2 p {
        font-size: 15px;
        line-height: 1.45em;
        margin-bottom: 10px;
    }
}
.sc3 {
	padding: 70px 0;
}
.sc3 img {
	width: 100%;
	transition-duration: 1s;
}
@media (max-width: 767px) {
	.sc3 {
		padding: 0 0 30px 0;
	}
}

.insc3 {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
}

@media (max-width: 767px) {
  .insc3 {display: block;}
}
@media (max-width: 1100px) {
  .insc3 {max-width: 900px}
}
@media (max-width: 900px) {
  .insc3 {max-width: 767px}
}

.in1sc3, .in2sc3, .in3sc3 {
	max-width: 33%;
    margin: 0px 25px 0px 26px;
}

.in1sc3 {
	padding-top: 50px;
}
@media (max-width: 767px) {
  .in1sc3, .in2sc3, .in3sc3 {
  	max-width: 100%;
    margin: 0px 25px 0px 26px; 
    text-align: center;}
    .in2sc3 {
  	padding-top:20px;}
}

@media (max-width: 1100px) and (min-width: 767px){
  .in1sc3, .in2sc3, .in3sc3 {
  	width: 33%;
    margin: 0px 7px 0px 5px; text-align: center;}
}

@media (max-width: 767px) {
  .in1sc3  { text-align: center; padding-top: 30px;}
}
@media (max-width: 767px) {
  .but2 { text-align: center; margin-bottom: 20px;}
}
.sp3 {
	color: rgba(0,0,0,.25);
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
}
.pfast3 {
	padding-top: 20px;
    font-size: 65px;
    font-weight: 900;
    text-align: left;
}
.about3 {
	color: #FFF;
    font-family: "Lora",Sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: right;
}
@media (max-width: 1100px) {
  .pfast3 {
  	font-size: 56px;}
}
@media (max-width: 767px) {
  .pfast3  { 
  	text-align: left; font-size: 45px;
  }
}
@media (max-width: 767px) {
  .sp3 { text-align: left; }
}
@media (max-width: 767px) {
  .about3  { display: none;}
  .ul3 {
          text-align: left;

  }
}
.ul3 {
	color: rgba(0,0,0,.25);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 2.5em;
    letter-spacing: 0px;
    text-align: left;
        padding-bottom: 15px;

}
.ul3 b{
	color: black;
	font-weight: 700;
}
.but2 {
	margin-top: 20px;
	background: black;
	padding: 15px 40px;
	color: white;
	font-size: 15px;
	font-family: "Lora",Sans-serif;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: .7px;
    transition: transform .4s;
}
.but2:hover{
    transform: scale(0.9);
}
.in2sc3 p, .in3sc3 p{
	color: #3e3e3e;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.3em;
    text-align: left;
}
.in2sc3 p {
	padding-top: 20px;
}
.in3sc3 p {
	padding-bottom: 50px;
}
@media 	(max-width: 767px) {
	.in3sc3 p {
		padding:20px 0; 
	}
}
@media (max-width: 767px) {
  .in2sc3 p, .in3sc3 p { text-align: left;
      font-size:15px;
  }
}
.sc4 {
	padding: 180px 0;
	background: black;
	text-align: center;
}
@media 	(max-width: 767px) {
	.sc4 {
		padding:20px 0;
	}
}
.insc4 {
	max-width: 1100px;
	margin: 0 auto;
	padding-bottom: 65px;
	background: linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ), no-repeat  center/100% url("../img/back4.webp");
}

.insc41 {
	padding-top: 35px;
}
.psc4 {
	color: #fff;
    font-family: "Lora",Sans-serif;
    font-size: 69px;
    font-weight: 900;
    text-shadow: 2px 2px 5px #000;
}
@media (max-width: 1100px) and (min-width: 767px){
  .psc4 {
  	font-size: 40px;
  	}
}
@media 	(max-width: 767px) 	 {
		.psc4 {
		font-size: 27px;
        line-height: 1;
        font-weight: 600;
        padding-bottom: 15px;
		}
}
.p2sc4 {
	color: #ddb734;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    text-shadow: 2px 2px 10px #000;
    padding: 20px 0;
    margin: 20px 0;
    background: rgba(0,0,0,.89);
}
@media 	(max-width: 767px) {
		.p2sc4 {
			font-size: 	12px; padding: 0px 0;
    margin: 14px 0; letter-spacing: 0.3px; line-height: 1.3em;
		}
}
.insc42 {
    display: flex;
    background: rgb(0 0 0 / 77%);
    padding: 32px 0px;
}
@media 	(max-width: 767px) {
	.insc42 {
		padding: 15px 0; display: block;
	}
}
.sroki, .design, .prodv{
	width: 33%;
	padding: 0px 60px;
}
@media 	(max-width: 767px) {
	.sroki, .design, .prodv {
		width: 100%;
	}
}
@media 	(max-width: 767px) {
	.sroki, .design {
		margin-bottom: 30px;
	}
}
@media (max-width: 1100px) {
  .sroki, .design, .prodv {padding: 0px 6px;}
}

@media (max-width: 1100px) {
  .insc4 {padding-bottom: 0px;}
}
@media (max-width: 1100px) {
  .sc4 {padding: 20px;}
}
@media (max-width: 1100px) {
	.p2sc4 {
		font-size: 20px;
		display: none;
	}
}
@media (max-width: 1100px) {
	.sc3 {
		padding-top: 0px;
	}
}
.in4p1 {
	font-size: 24px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2em;
    padding-bottom: 20px;
}
.in4p2 {
	color: #fff;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8em;
    letter-spacing: 0px;
}
@media (max-width: 767px) {
	.in4p1 {
		padding-bottom: 3px;
		    font-size: 20px;

	}
}
@media (max-width: 767px) {
	.in4p2 {
		
		line-height: 1.2em;
		font-size: 15px;
	}
}
.sc4 img {
	padding-bottom: 30px;
}
@media (max-width: 767px) {
	.sc4 img {
		padding-bottom: 10px;
	}
}
@media (max-width: 767px) {
	.sc4 {
		padding: 10px 0;
	}
}
@media (max-width: 767px) {
	.insc4 {
		padding: 0;
	}
}
.sc5 {
	padding: 90px 0;
	background: linear-gradient(to bottom, white 50%, black 0%);

}
.insc5 {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
}
.scb1, .scb2 {
	width: 50%;
}

.scb1 {
	padding-top: 126px;
}
.psc51 {
	color: #000;
    font-size: 85px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1em;
    letter-spacing: -.5px;
    text-shadow: 0px 0px 0px #000;
}
@media (max-width: 1100px) and (min-width: 767px){
  .psc51 {
  	font-size: 45px;
  }
}

.psc52 {
	color: #fff;
    font-size: 77px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1em;
    letter-spacing: -.5px;
    text-shadow: 0px 0px 0px #000;
}
@media (max-width: 1100px) and (min-width: 767px){
  .psc52 {
  	font-size: 45px;
  }
}
.psc53 {
	color: #ddb734;
	text-transform: uppercase;
	padding-top: 40px;
    font-size: 40px;
    font-weight: 500;
    text-decoration: underline;
    line-height: 1.4em;
    text-shadow: 1px 1px 3px rgb(0 0 0 / 47%);
}
.scb2 img {
	width: 100%;
}
.sc6 {
	padding-top: 20px;
	margin-top: -1px;
	background: linear-gradient(to top, white 10%, black 0%);;
}
.insc6 {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
}
.bl61, .bl62 {
	width: 50%;
}
.bl62 {
	padding-top: 70px;
}
.img61 {
	width: 75%;
}
.inbl61 {
	display: flex;
	padding-bottom: 30px;
}
.inbl611 {
	width: 25%;
}
.inbl612 {
	width: 75%;
}
.p61 {
	font-size: 20px;
	color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 16px;
}
.p61 h3 {
    margin-bottom: 0;
    margin-top: 0;
}
.p610 {
	font-size: 20px;
	color: #ddb733;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 16px;
}
.p62 {
	color: #fff;
    font-family: "Lora",Sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6em;

}
.inbl61 img {
	max-width: 60%;
}
.sc7 {
	background: white;
	padding-top: 120px;
	text-align: center;
} 
.insc71 {
	max-width: 500px;
	margin: 0 auto;
}
.h27 {
	color: #000;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    padding: 0 0 20px 0;
    line-height: 1;
}
.p27 {
	color: #000;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7em;
}
.insc72 {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	padding-top: 60px;
}
.ins7b {
	width: 30%;
    border: 2px solid rgb(0 0 0 / 17%);
    padding-top: 10px;
    margin: 0 10px;
    text-align: center;
    border-radius: 10px;
}
.var7 {
	display: block;
	padding: 40px 0;
	color: rgba(51,51,51,.72);
    font-size: 15px;
    font-weight: 100;
    line-height: 1.9em;
}
.bl71 {
	color: #000;
    font-size: 23px;
    margin: 5px 0;
    line-height: 1.2em;
    font-weight: 700;

}
.bl72 {
	color: #000;
    font-weight: 400;
    margin: 5px 0;
    padding-top: 10px;
}
.price7 {
	width: 111px;
    margin: 30px auto;
    color: #000;
    padding: 32px 0;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid #e0bb3e;
    border-radius: 50%;
}
.pricerub {
	color: #000000f2;
    font-size: 15px;
    font-weight: 500;
}
.bl73 {
	color: #000;
    font-weight: 400;
    line-height: 2em;
}
#b7 {
        background: #e6c85f;
    color: #000000;
    width: 100%;
    padding: 15px;
    font-size: 17px;
    margin-top: 20px;
    transition: transform .4s;
    border-radius: 0px 0px 10px 10px;
}
#b7:hover{
    transform: scale(1.05);
}
@media (max-width: 767px) {
	.psc53 {
		display: none;
	}
}
@media (max-width: 1100px) {
	.sc5 {
	padding: 54px 0;
    background: linear-gradient(to bottom, white 55%, black 0%);
	}
}
@media (max-width: 767px) {
	.insc5 {
		display: block;
	}
}
@media (max-width: 767px) {
	.sc5 {
		padding: 20px 0;
	}
}

@media (max-width: 1100px) and (min-width: 767px){
  	.scb1 {
  		padding-top: 96px;
  	}
}
@media (max-width: 767px) {
	.scb1, .scb2 {
		width: 80%;
		padding-top: 0;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.psc51, .psc52 {
	font-size: 40px;
    letter-spacing: .6px;
    color: #000;
	}
}
@media (max-width: 767px) {
	.psc52 {
    padding-bottom: 20px;
	}
}


.psc54 {
	padding: 0px 0;
	text-align: center;
	color: black;
	font-size: 1px;
	font-weight: 600;
	text-transform: uppercase;
}
@media (min-width: 767px) {
	.psc54 {
	display: none;
	}
}
@media (max-width: 767px) {
	.bl61 {
		display: none;
	}
}
@media (max-width: 767px) {
	.bl62 {
		width: 90%;
		margin: 0 auto;
	}
}
@media (max-width: 767px) {
	.p62 {
		line-height: 1.2em;
	    font-size: 15px;
	}
}
@media (max-width: 767px) {
	.sc6 {
		background: black;
	}
}
@media (max-width: 767px) {
	.sc7 {
		padding: 30px 0;
	}
}
@media (max-width: 767px) {
	.p27 {
		font-size: 16px;
		font-weight: 200;
	}
}
@media (max-width: 767px) {
	.ins7b {
		width: 80%;
		margin: 0 auto 20px;
	}
}
@media (max-width: 767px) {
	.insc72 {
		display: block;
		padding-top: 15px;
	}
}

@media (max-width: 767px) {
	.bl71 {
		font-size: 20px ;
	}
}
@media (max-width: 1100px) and (min-width: 767px) {
	.bl71 {
		font-size: 20px ;
	}
}
@media (max-width: 767px) {
	.var7 {
		padding: 0;
		line-height: 1em;
	}
}


@media (max-width: 1100px) {
	.bl62 {
		padding-top: 0px;
	}
}
@media (max-width: 1100px) {
	.insc6 {
		width: 90%;
		margin: 0 auto;
	}
}
@media (max-width: 1100px) {
	.insc5 {
		width: 90%;
		margin: 0 auto;
	}
}

@media (max-width: 1100px) {
	.p62 {
		line-height: 1.2em;
        font-size: 15px;
        color: #ffffff8f;
	}
}
@media (max-width: 1100px) {
	.sc6 {
		background: black;
	}
}
@media (max-width: 1100px) {
	.psc53 {
		font-size: 30px;
		padding-top: 14px;
	}
}
.cs8 {
	padding: 99px 0;
	background: black;
}
.insc8 {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
}
.insc81 {
	width: 50%;
}
.insc82 {
	width: 50%;
}
.ob8 {
	color: #fff;
    font-size: 45px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2em;
    text-shadow: 1px 1px 28px #000;
}
.hr8 {
	max-width: 80px;
    background-color: #ddb734;
    height: 3px;
    margin: 30px 0;
}
.pin8 {
	color: #fff;
    font-size: 21px;
    font-weight: 300;
    line-height: 2.2em;
    letter-spacing: 0px;
    text-shadow: 1px 0px 10px #000;
}
.p28 {
	color: #ddb734;
    font-family: "Lora",Sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.1em;
}
@media (max-width: 1100px) and (min-width: 767px){
    .p28 {
        font-size: 23px;
    }
}
.ins82 input{
	width: 100%;
	padding: 12px;
	display: block;
	margin: 32px 0;
	border-radius: 5px;
}
.ins82 form ::placeholder {
	font-size: 18px;
	color: #141414;
}
.form-button {
    display: inline-block;
    width: 169px;
    background-color: #000;
    color: #ddb734;
    border-style: solid;
    border-width: 2px;
    border-color: #ddb734;
    border-radius: 5px;
    padding: 5px;
    margin-top: 9px;
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    transition: transform .4s;
    cursor: pointer;
}
.form-button:hover{
    transform: scale(0.9);
}
.underform {
	font-size: 11px;
    font-weight: 300;
    line-height: 1.2em;
    color: white;
    padding-top: 30px;
}
.underform1 {
	font-size: 11px;
    font-weight: 300;
    line-height: 1.2em;
    color: white;
    padding: 30px 0 30px;
}
@media (max-width: 1100px) and (min-width: 767px){
  	.ob8 {
  		font-size: 25px;
  	}
}
@media (max-width: 1100px) and (min-width: 767px){
  	.pin8 {
  		    line-height: 1.2em;
  	}
}
.insc81 {
    margin: auto 0;
}
.ob8 {
	letter-spacing: 2px;
}
@media (max-width: 767px) {
  	.insc8 {
  		display: block;
  	}
}
@media (max-width: 767px) {
  	.insc81, .ins82 {
	width: 90%;
  		margin: 0 auto;
  	}
}
@media (max-width: 1100px) and (min-width: 767px) {
  	.insc8 {
	width: 96%;
  	}
}
@media (max-width: 767px){
  	.ob8 {
  		font-size: 25px;
  	}
}
@media (max-width: 767px){
  	.ob8 {
  		font-size: 28px;
  	}
}
@media (max-width: 767px) {
  	.pin8 {
  		    line-height: 1.2em;
  		    padding-bottom: 20px;
  		    font-size: 15px;
  	}
  	.p28{
  	    font-size: 17px;
  	}
  	.slide-content p {

    font-size: 15px;
}
}
@media (max-width: 767px) {
  	.cs8 {
  		    padding: 40px 0;
  	}
}
.sc9 {
	padding: 60px 0 0 0;
}
.slide-content {
	max-width: 90%;
    margin: 0 auto;
    text-align: center;
}
.under-rew {
    text-align: center;
    color: #000;
    font-size: 45px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0px 0 41px;
}
.slide-content h3 {
	color: #000;
    font-size: 25px;
    font-weight: 900;
    text-transform: uppercase;
    font-style: normal;
    padding-top: 20px;
    line-height: 1.3em;
}

.slide-content p {
    color: #000;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    line-height: 2em;
    padding-top: 30px;
}
@media (max-width: 767px){
    .slide-content p { line-height: 1.4em;
    }
}
#pdate {
	color: rgba(0,0,0,.37);
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    font-style: normal;
    line-height: .9em;
    padding: 10px;
}
.sc10 {
	padding: 0px 0px 70px 0;
	background: linear-gradient(to top,  #ffd724 33%, white 33%);

}
.psc10 {
    color: #ffd725;
    font-size: 37px;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
    padding-top: 285px;
}
.mobpsc10 {
    color: #ffd725;
    font-size: 86px;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
    padding-top: 35px;
}
.insc10 {
	max-width: 1200px;
	display: flex;
	margin: 0 auto;
}
.insc101 {
	width: 45%;
	margin: 0 auto;
}
.insc102 {
	width: 33%;
	margin: 0 auto;
}
.sc101 {
	color: #242424;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.3em;
    padding-top: 32px;
}
@media (max-width: 767px){
    .sc10 {
        padding: 0 0 30px;
    }
}
.insc102 {
	background: black;
	padding: 20px 30px;
}

.button12  {
	width: 100%;
	background-color: black;
	border: 1px solid white;
	padding: 15px 0 50px 15px;
	color: white;
}
.inputname {
	width: 100%;
	background-color: black;
	border: 1px solid white;
	padding: 15px;
	color: white;
}
.insc102 form ::placeholder{
	color: rgb(127 127 127);
	font-size: 18px;
}
.ppers {
	color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.2em;
}
.but343 {
	width: 60%;
	margin: 20px auto;
    display: block;
    background-color: #ddb734;
    color: #000;
    padding: 7px;
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px;
    transition: transform .4s;
}
.but343:hover{
    transform: scale(0.9); 
    cursor: pointer;
}
.insc102 {
	color: white;
}
@media (max-width: 1100px) and (min-width: 767px){
.psc10{
  	padding-top: 88px;
  	font-size: 25px;
  	}
}
@media (max-width: 1100px) and (min-width: 767px){
.insc101{
  	width: 45%
  	}
}
@media (max-width: 1100px) and (min-width: 767px){
.insc102{
  	width: 45%
  	}
}
@media (max-width: 767px) {
	.insc10 {
	display: block;
	}
}
@media (max-width: 767px) {
	.insc101, .insc102 {
	width: 90%;
	}
}
@media (max-width: 767px) {
	.mobpsc10 {
	font-size: 25px;
	text-align: center;
	}
}
@media (min-width: 767px) {
	.mobpsc10 {
	display:none;
	}
}
@media (max-width: 767px) {
	.psc10 {
	display:none;
	}
}
@media (max-width: 767px) {
	.sc101 {
	font-size: 17px;
    padding: 20px 0;
    text-align: center;
	}
	summary {
    /* cursor: pointer; */
    /* color: #ddb734; */
    font-size: 15px;
    /* font-weight: 600; */
    /* text-transform: uppercase; */
    /* padding: 40px 0 20px; */
}

}
@media (max-width: 767px) {
	.sc9 {
	    padding: 40px 0;
	}
}
@media (max-width: 767px) {
	#slides .inner {
	    height: 800px;
	}
}
.img5{
	max-width: 100%;
}
.img61 {
	max-width: 100%;
}
.img3{
	max-width: 100%;
}

@media (max-width: 767px) {
	header {
		overflow: hidden; 
	}
}
.form-end p {
    text-align: center;
    margin: -15px 0 12px;
font-family: "Lora";
font-size: 16px;
    color: white;
}
@media (max-width: 1100px) and (min-width: 905px){
.menu li{
  	padding: 20px 15px;
    font-size: 16px;
  	}
}
@media (max-width: 904px) and (min-width: 841px){
.menu li{
  	padding: 20px 11px;
    font-size: 16px;
  	}
}
@media (max-width: 840px) and (min-width: 767px){
.menu li{
  	padding: 20px 5px;
    font-size: 16px;
  	}
}
.FQ {
	background: black;
	color: white;
	display: flex;
}
.in-fq {
	padding: 60px 0;
	max-width: 1100px;
	margin: 0 auto;
}
.h2-FQ{
	color: #fff;
    font-size: 45px;
    font-weight: 600;
    line-height: 1.2em;
    text-align: center;
}
.p-FQ{
	color: #686868;
    font-size: 15px;
    font-weight: 300;
    text-align: center;
    padding: 15px 0 35px;
}
.spoiler p{
	color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8em;
    padding: 5px 35px;
    max-width: 700px;
}
summary {
	cursor: pointer;
	color: #ddb734;
	font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 40px 0 20px;
}
#text-under-fq {
    color: #fff;
    font-size: 23px;
    font-weight: 300;
    line-height: 1.6em;
    padding: 40px 0 0px 0;
    text-align: center;
}
.spoiler {
	max-width: 900px;
    margin: 0 auto;
}
@media (max-width: 767px){
    .spoiler {
        max-width: 95%;
    }
}
.hr-fq {
	background-color: #686868;
	width: 100%;
	height: 1px;
	margin: 10px 0 0 0;
}
footer {
	background: black;
}
.in-footer {
	max-width: 1100px;
	display: flex;
	color: white;
	margin: 0 auto;
	padding: 15px 0;
}
@media (max-width: 1100px) and (min-width: 767px){
    .in-footer{
        max-width: 97%;
    }
}
@media (max-width: 767px) {
    .in-footer{
        max-width: 97%;
        display: block;
    }
}
.fast-sochi-p{
	color: #fff;
    font-size: 33px;
    font-weight: 600;
}
.razrabotka {
	color: #fff;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8em;
}
.year {
	color: #686868;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
}
.menu-footer {
	color: #fff;
    font-size: 15px;
    font-weight: 300;
    margin: 5px 0;
}
.menu-footer1 {
	margin-bottom: 0px;
	color: #fff;
    font-size: 15px;
    font-weight: 300;
}
.COPYRIGHT-main-p{
	color: #fff;
    font-size: 15px;
    font-weight: 300;
}
.footer-cop{
	color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.2em;
    padding-top: 7px;
}
.fotter-block1 {
	width: 37%;
}
.fotter-block2 {
	width: 7%;
}
.fotter-block3 {
	width: 28%;
}
.copyright {
	width: 28%;
	margin: 9px 0px;
}

@media (max-width: 767px){
    .fotter-block1, .fotter-block2, .copyright {
	width: 100%;
	text-align: center;
    }
}
@media (max-width: 767px) {
    .fotter-block3 {
        width: 87%;
    padding: 7px 0;
    margin: 0 auto;
    }
}
@media (max-width: 767px) {
    .menu-footer {
        padding: 2px 0;
    }
}
@media (max-width: 767px) {
    .fotter-block2, .footer-cop {
        display: none;
    }
}
.year {
	padding: 22px 0;
}
.overlay {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgb(255 255 255 / 73%);
	display: none;
	z-index: 20;
}

.popup {
	position: fixed;
	width: 480px;
	height: 180px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 8px;
	color: white;
	padding: 53px 0 0 0;
    background-color: #000;
    border-radius: 8px;
    font-size: 19px;
    text-align: center;
}
@media (max-width: 767px) {
    .popup {
        max-width: 60%;
        font-size: 16px;
    }
}
#popup-br {
    background-color: #000;
    font-size: 22px;
    padding: 0 0 10px;
    text-align: center;
}
.close-popup {
	position: fixed;
	top: 15px;
	right: 15px;
	width: 23px;
	height: 23px;
	cursor: pointer;
}

.close-popup:before {
	content: '';
	background-color: #fff;
	position: absolute;
	height: 1px;
	width: 31px;
	top: 11px;
	left: -4px;
	transform: rotate(-45deg);
}

.close-popup:after {
	content: '';
	background-color: #fff;
	position: absolute;
	height: 1px;
	width: 31px;
	top: 11px;
	transform: rotate(45deg);
	left: -4px;
}
/* Собственно сам слайдер */
.slider{
    max-width: 80%;
    position: relative;
    height: 333px;
    margin-bottom: 130px;
    margin: auto;
}

/* Картинка мастабируется по отношению к родительскому элементу */
.slider {
    width: 100%;
    height: 450px;
}
.slider img{
    width: 126px;
    text-align:center;
}

/* Кнопки вперед и назад */
.slider .prev, .slider .next {
    cursor: pointer;
    position: absolute;
    top: 0;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
@media (max-width: 767px){
    .slider .prev, .slide,r .next {
            padding: 8px;
    }
}


.slider .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


/* При наведении на кнопки добавляем фон кнопок */

.slider .prev:hover,
.slider .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}




/* Кружочки */

.slider-dots {
  text-align: center;
 
}
.slider-dots_item{
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.slider-dots_item:hover {
    background-color: #aaa;
}
@media (max-width: 1100px) and (min-width: 767px){
    .slider{
        max-width: 95%;
        height: 450px;
    }
}
@media (max-width: 767px) {
    .slider{
        max-width: 100%;
        height: 450px;
    }
}
@media (max-width: 767px) {
    .slide-content{
        max-width: 85%;
    }
}
@media (max-width: 767px) {
    .slide-content img{
        max-width: 90px;
    }
}
/* Анимация слайдов */

.slider .item {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
#form2 p{
	color: #ffd725;
	padding: 25px 0 5px 0;
}
@media (max-width: 767px) {
    .under-rew {
        font-size: 22px;
    }
}

.burger-icon {
  position: relative;
  right: 1%;
  cursor: pointer;
  top: 3px;
}




#nav {
  overflow: hidden;
  background: #000;
  height: 0;
  max-height: 0px; 
  list-style-type: none;
  padding-left: 0;
  -webkit-transition: linear 1s;
  transition: linear 1s;
}

#nav.open {
  height: auto;
 max-height: 500px; 
  -webkit-transition: linear 1s;
  transition: linear 1s;

}

#nav li {
  float: none;
  text-align: left;
  text-decoration: none;
  width: 100%; 
  margin: 0;
  -webkit-transition: linear 1s;
  transition: linear 1s;
}

#nav li a {
text-decoration: none;
    color: white;
    padding: 0px;
    display: block;
    margin: 0;
    -webkit-transition: linear 1s;
    transition: linear 1s;
    text-align: center;
    font-size: 16px;
    line-height: 0.3em;
}
.menu-mobile {
    padding: 6px;
}
.bar1, .bar2, .bar3 {
    width: 28px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.2s;
}
#p-menu {
    margin: 0;
    font-weight: 400;
    text-transform: none;
    font-size: 16px;
    cursor: pointer;
    color: white;
    padding: 10px;

}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.hover .bar1 {
  background-color: red;
}

.hover .bar2 {
  background-color: red;
}

.hover .bar3 {
  background-color: red;
}
.design-page{
    background: url("../img/back-design.webp"); 
    background-size: contain;
}

.in-design {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    padding: 59px 0 0;
}
.desing-form {
    z-index: 3;
    width: 65%;
}
.desing-img {
    z-index: 3;
    width: 35%;
}
.desing-img img {
    max-width: 84%;
}
.desing-form {
    padding: 155px 146px 0 0;
}
#design-zakaz {
    color: rgba(255,255,255,.66);
    font-family: "Lora",Sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5em;
    text-shadow: 0px 0px 10px #000;
}
.desing-img {
    margin: 0 auto;
}
.design-p-zakaz {
    color: #ddb734;
    font-family: "Lora",Sans-serif;
    font-size: 43px;
    font-weight: 500;
    text-shadow: 0px 0px 10px #000;
    padding: 34px 0;
    text-align: right;
}
.obratnaya-design {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.1em;
    text-shadow: 0px 0px 10px #000;
}
.design-fast {
    color: #fff;
    font-family: "Lora",Sans-serif;
    font-size: 80px;
    text-shadow: 0px 0px 10px #000;
    font-weight: 700;
    padding: 20px 0 30px 0;
}
#zapolni-zayavku {
    color: rgba(255,255,255,.66);
    font-family: "Lora",Sans-serif;
    font-size: 15px;
    font-weight: 300;
    text-shadow: 0px 0px 10px #000;
    padding-bottom: 30px;
}

#name-form-design {
    margin: 23px 0 23px 0;
    padding: 11px;
    width: 99%;
}
#phone-form-design {
    margin: 11px 0 19px 0;
    padding: 11px;
    width: 99%;
}
#submit-design {
    display: inline-block;
    width: 192px;
    background-color: rgba(0,0,0,0);
    color: #fff;
    border-style: solid;
    border-width: 2px;
    border-color: #fff;
    border-radius: 5px;
    padding: 11px;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
}
#submit-design:hover {
    curson:pointer;
}
.about-design {
    padding: 172px 0 100px;
    max-width: 1100px;
    margin: 0 auto;
}
.h2-design {
    text-align: center;
    color: #000;
    font-family: "Lora",Sans-serif;
    font-size: 40px;
    font-weight: 600;
}
.in-about-design {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    padding: 80px 0 0 0;
}
.block-design-2 img{
    max-width: 300px;
    vertical-align: middle;
    filter: grayscale(100%);
}
.block-design-2 {
    padding: 0px 45px 0;
    height: 506px;
    line-height: 506px;
}
.design-1{
    display: flex;
}
.design-p1 {
    font-family: "Lora",Sans-serif;
    font-size: 22px;
    font-weight: 400;
}
.p-design-1 {
    padding: 6px 0 0 17px;
}
.design-p2 {
    color: #000;
    font-family: "Lora",Sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5em;
    padding: 10px 0 20px 0;
}

@media (min-width: 1100px) {
   .block-design-1 {
    max-width: 30%;
} 
}
@media (min-width: 1100px) {
    .block-design-3 {
    max-width: 27%;
}
}

.design-zadanie {
    background: black;
    padding: 90px 0;
    color: white;
    border: solid 3px #4c4c4c;
}
.in-design-zadanie {
    max-width: 1213px;
    margin: 0 auto;
    display: flex;
}
.h4-zadanie {
    color: #fff;
    font-size: 47px;
    font-weight: 600;
    padding-bottom: 22px;
}
.p-zadanie {
    text-align: left;
    color: #d3d3d3;
    font-size: 16px;
    font-weight: 300;
    line-height: 2em;
    padding-top: 20px;
}
.zadanie-1 {
    color: #686868;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    padding: 72px 40px 0 0;
    max-width: 20%;
}
.zadanie-2 {
    max-width: 80%;
}
@media (max-width: 1100px) and (min-width: 767px){
    .in-design{
        max-width: 97%;
    }
}
@media (max-width: 1100px) and (min-width: 767px){
    .desing-img img {
        vertical-align: middle;
        width: 100%;
    }
}
@media (max-width: 1100px) and (min-width: 767px){
    .desing-img {
        height: 858px;
        line-height: 774px;
    }
}
 @media (max-width: 1100px) and (min-width: 767px){
    .design-fast {
        font-size: 54px;
    }
}
     
 @media (max-width: 1100px) and (min-width: 767px){
    .block-design-2 {
    display: none;
}
}
 @media (max-width: 1100px) and (min-width: 767px){
    .in-about-design {
    max-width: 95%;
}
}
.raz-sp3 {
   color: rgb(241 241 241 / 25%);
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    padding-bottom: 42px;
    text-align: left;
}
@media (max-width: 767px) {
  .raz-sp3 { text-align: left; padding-top: 35px;}
}
.raz-insc3 {
    max-width: 1200px;
   margin: 0 auto;
   display: flex;
}

@media (max-width: 767px) {
  .raz-insc3 {display: block;}
}
@media (max-width: 1100px) {
  .raz-insc3 {max-width: 90%}
}
@media (max-width: 900px) {
  .raz-insc3 {max-width: 767px}
}

.raz-pfast3 {
   color: #ddb734;
    font-family: "Lora",Sans-serif;
    font-size: 41px;
    font-weight: 900;
    line-height: 1.3em;
}

@media (max-width: 1100px) {
  .raz-pfast3 {
   font-size: 30px; text-align: left;}
}
@media (max-width: 767px) {
  .raz-pfast3  { 
   text-align: left; font-size: 21px;
  }
}
.raz-in1sc3, .raz-in2sc3 {
   max-width: 29%;
    margin: 0px 25px 0px 26px;
}
.raz-in3sc3 {
   max-width: 42%;
    margin: 0px 25px 0px 26px;
}
.raz-in1sc3 {
   padding-top: 70px;
}
@media (max-width: 767px) {
  .raz-in1sc3, .raz-in2sc3, .raz-in3sc3 {
   max-width: 100%;
    margin: 0px 25px 0px 26px; 
    text-align: center;}
}

@media (max-width: 1100px) and (min-width: 767px){
  .raz-in1sc3, .raz-in2sc3 {
   width: 30%;
    margin: 0px 7px 0px 5px; text-align: center;}
}
@media (max-width: 1100px) and (min-width: 767px){
  .raz-in3sc3 {
   width: 40%;
    margin: 0px 7px 0px 5px; text-align: center;}
}

@media (max-width: 767px) {
  .raz-in1sc3  { text-align: center; padding-top: 30px;}
}
.raz-in2sc3 p, .raz-in3sc3 p{
    color: #cbcbcb;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.5em;
}
.raz-in2sc3 p {
   padding-top: 20px;
}
.raz-img3{
   max-width: 100%;
}
.raz-in3sc3 p {
   padding-bottom: 10px;
}
@media   (max-width: 767px) {
   .raz-in3sc3 p {
      padding:20px 0; 
   }
}
@media (max-width: 767px) {
  .raz-in2sc3 p, .raz-in3sc3 p { text-align: left;}
}
@media (max-width: 1100px) {
  .raz-in2sc3 p, .raz-in3sc3 p { line-height: 1.3em;}
}
.raz-sc3 {
    padding: 136px 0 78px;
    background: black;
}
.raz-img31 {
    max-width: 93%;
}
#hr-razrabotka {
    width: 36px;
    background: white;
    margin-top: 19px;
    padding: 1px;
}
.raz-sc2 {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 48px 0;
}
@media (max-width: 1100px){
    .raz-sc2 {
        max-width: 97%;
    }
}
@media (max-width: 767px){
    .raz-sc2 {
        max-width: 90%;
        display: block;
    }
}


.raz-sc2-2 p {
    color: #ddb734;
    font-family: "Lora",Sans-serif;
    font-size: 161px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: .9em;
    letter-spacing: -4.4px;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
    text-align: right;
}
.raz-sc2-1, raz-sc2-2 {
    max-width: 50%;
}
#img-raz-2 {
    max-width: 75%;
    margin: 0 auto;
    text-align: center;
    display: flow-root;
}
@media (max-width: 1100px) {
    .raz-sc2-2 {
        font-size: 100px;
        margin: 36px 0 0 0;
    }
}
#submit-raz {
    display: block;
    width: 135px;
    background-color: rgba(0,0,0,0);
    color: #000;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 2px;
    padding: 11px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 17px auto 0;
}
.raz-sc2-2 {
    margin: 56px 0 0 0;
}
@media (max-width: 1100px) {
    .raz-sc2-2 {
        font-size: 100px;
        margin: 36px auto 0;
    }
}
@media (max-width: 900px) {
    .raz-sc2-2 {
        margin: 55px 0 0 0;
    }
}
@media (max-width: 900px) {
    .raz-sc2-2 p{
        font-size: 89px;
    }
}
@media (max-width: 767px){
    .raz-sc2-1, raz-sc2-2 {
        max-width: 90%;
        margin: 0 auto;
    }
}
@media (max-width: 767px){
    .raz-sc2-2 p {
        text-align: center;
    }
}
@media (max-width: 767px) {
    .raz-sc3 {
        padding: 0 0 41px;
    }
}
.raz3 {
   background: black;
   padding: 80px 0;
}
.in-raz3{
   max-width: 1000px;
   margin: 0 auto;
   text-align: center;
}
.p1-raz3 {
   padding: 30px 0 40px;
   color: #fff;
   font-size: 40px;
   font-weight: 700;
   line-height: 1.3em;
   letter-spacing: 1.5px;
}
.raz3 p{
   text-align: center;
   color: #fff;
   font-size: 16px;
   font-weight: 300;
   line-height: 1.8em;
}
.img-raz3 {
    width: 67%;
}
@media (max-width: 1100px) {
    .in-raz3 {
        max-width: 90%;
    }
}
@media (max-width: 767px) {
    .p1-raz3 {
        font-size: 25px;
        line-height: 1em;
        letter-spacing: 1px;
    }
}
@media (max-width: 767px) {
    .raz3 p {
        color: #e3e3e3;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3em;
    }
}
@media (max-width: 767px) {
    .img-raz3 {
        width: 67%;
    }
}


@media (max-width: 1100px) {
    .desing-form {
        padding: 96px 70px 0 0;
    }
}
@media (max-width: 1100px) {
    .desing-img img {
        max-width: 76%;
    }
}
@media (max-width: 1100px) {
    .in-design-zadanie {
        max-width: 96%;
    }
}
@media (max-width: 1100px) and (min-width: 767px) {
    .block-design-1, .block-design-3 {
            width: 50%;
    }
}
@media (max-width: 1100px) {
    .desing-img {
        display:none;
    }
    .desing-form {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .desing-form {
        padding: 0;
    }
}
@media (max-width: 767px) {
    #design-zakaz {
        text-align: center;
        line-height: 1.2em;
        padding: 39px 0 20px;
    }
}
@media (max-width: 767px) {
    .obratnaya-design {
        display: none;
    }
}
@media (max-width: 767px) {
    .design-p-zakaz {
        padding: 10px 0 0;
        text-align: center;
    }
    .design-fast {
        font-size: 48px;
        text-align: center;
        padding: 25px 0 36px 0;
    }
    .zapolni-zayavku {
        text-align: center;
    }
    #zapolni-zayavku {
        text-align: center;
        padding-bottom: 15px;
    }
    .form-deign-form {
        width: 90%;
        margin: 0 auto;
    }
    .about-design {
        padding: 35px 0;
        max-width: 95%;
        margin: 0 auto;
    }
    .in-about-design {
        display: block;
        padding: 40px 0 0 0;
    }
    .block-design-2 {
        display: none;
    }
    .zadanie-1 {
        display: none;
    }
    .h4-zadanie {
        font-size: 20px;
        padding-bottom: 10px;
        text-align: center;
    }
    .design-zadanie {
        padding: 40px 0;
    }
    .p-zadanie {
        line-height: 1.3em;
        padding-top: 10px;
    }
    .zadanie-2 {
        max-width: 100%;
    }
    .h2-design {
        font-size: 20px;
    }
    .desing-form {
        width: 85%;
        margin: 0 auto;
}
}
@media (max-width: 1056px) and (min-width: 900px) {
    .raz-sc2-2 p {
            font-size: 127px;
    }
}
.raz-4 {
   padding: 90px 0 60px;
    background: #fbfbfb;
}
#p-raz4 {
   color: #000;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
}
.in-raz4 {
   display: flex;
   max-width: 1100px;
   margin: 0 auto;
   padding-top: 40px;
}
.block-raz4 {
   width: 30%;
    padding: 40px 27px;
    margin: 15px;
    background: white;
    text-align: center;
}
#block-raz4-p {
   color: #444;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7em;
}
.raz-4 img{
    padding-bottom: 37px;
}
.block-raz4:hover {
    box-shadow: 0 0 19px rgb(133 133 133 / 50%);
}
.block-raz4:hover img{
    filter: grayscale(100%);
}
@media (max-width: 1100px) {
    #p-raz4 {
        font-size: 38px;
    }
    .block-raz4 {
        padding: 26px 5px;
    margin: 8px;
    }
}
@media (max-width: 767px) {
    #p-raz4 {
        font-size: 20px;
    }
    .in-raz4 { 
    display: block;
    padding-top: 30px;
}
}
.uslugi-1 {
   background: black;
    padding: 130px 0 40px;
    color: white;
}
.in-uslugi-1 {
   max-width: 1010px;
   display: flex;
    margin: 0 auto;
}
.what-we-doing {
   text-align: center;
   padding: 30px 0;
}
.block-1-uslugi {
   width: 40%;
   text-align: center;
   color: #fff;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.3em;
}
.block-1-uslugi hr {
    padding: 1px;
    width: 41%;
    margin: 20px auto;
    background: #484848;
}
.block-2-uslugi {
   width: 60%;
}
.what-we-doing {
    color: #fff;
    font-size: 50px;
    font-weight: 500;
    line-height: 1.7em;
    letter-spacing: .6px;
}
.block-2-uslugi {
    text-align: left;
    color: #cbcbcb;
    font-size: 18px;
    font-weight: 300;
    line-height: 2em;
}
.uslugi-2 {
    max-width: 1200px;
    display: flex;
    margin: 0 auto;
    padding: 90px 0;
}
.uslugi-2 p {
    padding-top: 18px;
}
.block-uslugi {
    width: 33%;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
}
.uslugi3 {
   background: black;
   padding: 80px 0;
}
.in-uslugi-3 {
   display: flex;
    max-width: 1162px;
    margin: 0 auto;
}
#uslugi-fast {
   color: #686868;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    padding-bottom: 30px;
}
#p-uslugi-logo {
   color: #fff;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.3em;
}
.block-1-4 hr {
   padding: 1px;
    width: 18%;
    background: #ffffff;
    margin: 24px 0;
}
#p-uslugi-text {
   text-align: left;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 2em;
}
.block-1-3 {
    width: 50%;
    display:flex;
  align-items:center;
  justify-content: center;
}
.block-1-4 {
    width: 41%;
}
.uslugi-4 {
   background: black;
   padding: 90px 0;
   text-align: center;
} 
.p4-uslugi {
   text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 2em;
    padding-top: 30px;
}
.pp-usl {
    max-width: 911px;
    margin: 0 auto;
    text-align: center;
}
#p-uslugi-text1 {
    color: #b7b7b7;
    font-size: 18px;
    font-weight: 300;
    line-height: 2em;
    padding: 25px 0;
}
#uslugi-fast1 {
   color: #686868;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
        padding-top: 28px;
}
@media (max-width: 767px) {
    .uslugi-2 {
        display: block;
        text-align: center;
    }
    .block-uslugi{
        width: 100%;
    }
}
@media (max-width: 767px) {
    .in-uslugi-1 {
        display: block;
        max-width: 98%;
        text-align: center;
    }
    .block-1-uslugi, .block-2-uslugi{
        width: 100%;
    }
}
@media (max-width: 767px) {
    .in-uslugi-3 {
        display: block;
        max-width: 98%;
        text-align: center;
    }
    .block-1-3, .block-1-4 {
        width: 100%;
    }
    .block-2-uslugi {
        text-align: center;
    }
    #p-uslugi-text {
        text-align: center;
    }
    .block-1-uslugi {
        font-size: 21px;
    }
    .block-1-4 hr {
        margin: 13px auto;
    }
    .uslugi-1 {
    padding: 80px 0 1px;
    }
    .what-we-doing {
        font-size: 21px;
        line-height: 0.7em;
    }
    .uslugi-2 {
        padding: 35px 0;
    }
    .block-uslugi {
        padding: 17px 0;
    }
    #p-uslugi-logo {
        font-size: 21px;
    }
    .uslugi-4 {
        padding: 34px 0;
    }
    .block-raz4 {
    width: 93%;
    margin: 0 auto;
    }
}
.gal img {
    width: 33%;
        padding: 2px;

}
.ingal {
    display: flex;
    padding-top: 78px;

}
@media (max-width: 1100px) {
    .gal img {
        width: 49%;
        padding: 2px;
    }
    .ingal {
        max-width: 95%;
        margin: 0 auto;
    }
}
.about1 {
   background: black;
    padding: 160px 0 80px;
}
.in-about {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
    padding-right: 41px;
}
#about1-date {
   color: #686868;
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    padding-bottom: 10px;
}
#about-block1-fast { 
    font-family: "Lora",Sans-serif;
   color: #ddb734;
    font-size: 60px;
    font-weight: 900;
    line-height: 1.2em;
    padding: 25px 0;
}
#about-block1-raz {
   color: #fff;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.8em;
    padding-bottom: 40px;
}
#about-block1-p {
   color: #fff;
    font-size: 17px;
    font-weight: 300;
    line-height: 2.4em;
}
.about-block2 img {
   width: 100%;
    border-radius: 13px;
    filter: grayscale(80%);
}
.about-block {
   width: 45%;
}
.about-block2 {
   width: 55%;
    padding-left: 83px;
}
.about-2 {
   padding: 40px 0;
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
}
.about-2-block {
   width: 23%;
   text-align: center;
    padding: 58px 0;
    font-family: "Lora";
}
.about-2-block-2 {
   width: 31%;
}
#about-number {
   color: #bfbfbf;
    font-size: 74px;
    font-weight: 100;
}
#about-number2 {
    color: #000;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 5px;
}
#about-2-fast {
   color: #ddb734;
    font-family: "Lora",Sans-serif;
    font-size: 121px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: .9em;
    letter-spacing: -4.4px;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
    text-align: right;
} 
@media (max-width: 1100px) {
    #about-2-fast {
    font-size: 57px;
    padding: 52px 0;
    }
    #about-number {
    font-size: 52px;
    padding-bottom: 5px;
    }
    .about-2 {
        max-width: 97%;
        margin: 0 auto;
    }
    .about-2-block {
    padding: 67px 0;
    }
}
@media (min-width: 1100px) {
    .about-block21 {
   display: none;
    }
}
@media (max-width: 1100px) {
    .about-block21 img {
   width: 100%;
    border-radius: 13px;
    filter: grayscale(80%);
    }
    .about-block21 {
   width: 100%;
    }
    .about-block {
        width: 100%;
    }
    .about-block2 {
   display: none;
    }
    .in-about {
        display: block;
        max-width: 94%;
        margin: 0 auto;
    }
    #about1-date {
        display: none;
    }
    .about-block {
        text-align: center;
    }
    .about1 {
    padding: 110px 0 41px;
    }
    .in-about {
        padding-right: 0;
    }
}
@media (max-width: 1100px){
    .about-2 {
        max-width: 97%;
        margin: 0 auto;
        display: block;
    }
    .about-2-block {
    padding: 13px 0;
    text-align: center;
    width: 169px;
    margin: 0 auto;
    }
    #about-2-fast {
    font-size: 51px;
    padding: 20px 0;
    width: 337px;
    margin: 0 auto;
    }
}
.about-3 {
   background: black;
}
.about-3-in {
   padding: 60px 0;
   color: white;
   max-width: 1200px;
   margin: 0 auto;
}
#about3-p1 {
   color: #fff;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.6em;
}
#about3-p2 {
   font-weight: 300;
   font-size: 30px;
   line-height: 1.2em;
   padding: 20px 0 23px;
}
#about3-p3 {
   color: #fff;
    font-size: 17px;
    font-weight: 300;
    line-height: 2.4em;
}
#about3-p4 {
   font-weight: 300;
   font-size: 30px;
   line-height: 1.2em;
   padding: 30px 0 20px;
}
#about3-p5 {
   color: #fff;
    font-size: 17px;
    font-weight: 300;
    line-height: 2.4em;
}
.about-3 button {
   font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #ddb734;
    max-width: 155px;
    margin: 40px 0 5px;
    background: black;
    border-bottom: 1px solid white;
    padding: 0 0 10px 0;
}
.button-3 {
    max-width: 155px;
    margin: 0 auto;
    padding: 48px 0 20px;
}
.about-3 button:hover {
    color: #01bf08;
    border-bottom: 1px solid #01bf08;;
}
@media (max-width: 1100px){
    .about-3-in {
        max-width: 95%;
        margin: 0 auto;
    }
}
@media (max-width: 767px) {
    #about3-p1 {
    font-size: 18px;
    line-height: 1.2em;
    }
    #about3-p2 {
    font-size: 27px;
    padding: 10px 0 10px;
    }
    #about3-p3 {
    font-size: 18px;
    line-height: 1.2em;
    }
    #about3-p4 {
    font-size: 27px;
    line-height: 1.2em;
    padding: 10px 0 10px;
    }
    #about3-p5 {
    font-size: 18px;
    line-height: 1.2em;
    }
    .button-3 {
    max-width: 129px;
    padding: 0;
    }
}
.contact {
   padding: 130px 0 80px; 
}
.in-contact {
   max-width: 1000px;
   margin: 0 auto;
   display: flex;
}
.con1 {
   width: 50%;
}
.con2 {
   width: 50%;
    padding-left: 49px;
    padding-top: 28px;
}
.con-fast {
   color: #ddb734;
    font-size: 57px;
    font-family: "Lora",Sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}
.con-in1 {
   display: flex;
   padding-top: 40px;
}
.adress {
   width: 50%;
    padding: 0 10px;
}
.con-h3 {
    font-family: "Lora",Sans-serif;
   color: #000;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}
.con-p {
    font-family: "Lora",Sans-serif;
   padding: 20px 0 20px;
   color: #2e2e2e;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8em;

}
@media (max-width: 767px) {
    .con-p { font-size: 15px;
    }

}
.icons {
    padding-top: 20px;
}
@media (max-width: 1100px) {
    .in-contact {
        display: block;
    }
    .con1 {
        display: none;
    }
    .con4 {
        display: none;
    }
    .con2 {
    width: 100%;
    padding: 0;
    }
    .con3 {
    width: 100%;
    }
    .con-fast {
        text-align: center;
    }
    .con-in1 {
    display: flex;
    padding-top: 40px;
    max-width: 427px;
    margin: 0 auto;
    }
    .con3 {
    max-width: 490px;
    margin: 0 auto;
    }
}
@media (min-width: 1100px) {
    .con3 {
        display: none;
    }
    .con4 {
        display: none;
    }
}
.con4 {
    max-width: 350px;
    margin: 0 auto;
    }
@media (max-width: 767px) {
    .contact {
    padding: 65px 0 50px;
    max-width: 94%;
    margin: 0 auto;
    }
    .con-fast {
    font-size: 52px;
    }
    .con3 {
        display: none;
    }
    .con4 {
        display: block;
        max-width: 390px;
        margin: 0 auto;
    }
}
.blog {
   padding: 170px 0 120px;
}
.blog h1 {
   color: #000;
   font-size: 79px;
   font-weight: 900;
    padding: 0 0 30px 0;
   text-align: center;
   font-family: 'Lora';
}
.in-blog {
   display: flex;
   max-width: 1100px;
   margin: 0 auto;
}
.blog-block {
   width: 33%;
   margin: 15px;
   border: 1px solid grey;
}
.blog-p {
   font-size: 16px;
   line-height: 1.2em;
   color: #303133;
    padding: 20px 0 5px 20px;
    font-weight: 600;
}
.blog-date {
    padding: 20px 20px;
   font-size: 12px;
   line-height: 1.2;
}
.blog-block img{
    max-width: 100%;
}
@media (max-width: 1100px) {
    .blog h1 {
    font-size: 50px;
    }
    .in-blog {
    display: block;
    max-width: 95%;
    margin: 0 auto;
    }
    .blog-block {
    width: 100%;
    margin: 0 0 15px;
    border: 1px solid grey;
    }
    .blog {
    padding: 90px 0 50px;
    }
}
.blog-post{
   background: url(../img/post-background.webp);
    background-attachment: fixed;
}
.post {
   max-width: 1000px;
   margin: 0 auto;
    padding: 75px;
    background: white;
}
.in-post {
   display: flex;
   padding-bottom: 20px;
}
.col {
   width: 50%;
}
.date-post {
   padding-bottom: 30px;
}
.date-post {
   color: #000;
    font-size: 51px;
    font-weight: 900;
    line-height: 1.2em;
}
.text-blog h2 {
   color: #000;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 20px;
}

.col img{
    max-width: 100%;
}
.date1-post {
    font-size: 19px;
    padding: 52px 0 30px 0;
}
.space {
    padding: 89px;
}
.blog-post p{
    padding-bottom: 20px;
    color: rgba(0,0,0,.65);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6em;
}
.text-blog {
    padding-top: 50px;
}
@media (max-width: 1100px){
    .post {
    max-width: 95%;
    margin: 0 auto;
    padding: 20px;
    }
    .date-post {
    font-size: 44px;
    }
}
@media (max-width: 767px) {
    .in-post {
    display: block;
    padding-bottom: 0;
    }
    .col {
    width: 100%;
    }
    .date-post {
    color: #000;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2em;
    }
    .date1-post {
    padding: 18px 0 16px 0;
    }
    .space {
    padding: 45px;
    }
}
#about-hosting {
    color: #000;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5em;
    padding-right: 37px;

}
@media (max-width: 1100px) {
    #about-hosting {
    padding-right: 0px;
    }
}
@media (max-width: 767px){
    #h1-page1 {
        font-size: 19px;
    padding: 0 0 11px;
    
}
.h27 {
        font-size: 23px;
    }
.p61 {
    font-size: 17px;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 16px;
}
.p610 {
    font-size: 17px;
    color: #ddb733;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 16px;
}
}
.index-tel {
        padding-top: 16px;
    margin-bottom: -9px;
    font-size: 19px;
}
.page-404 {
    padding: 400px 0;
    max-width: 358px;
    margin: 0 auto;
    text-align: center;
}
.mistake {
    font-size: 25px;
    font-weight: 600;
}
.block-404 {
    font-size: 90px;
    padding-top: 55px;
}
.insc42 img{
    width: auto;
}
.desing-img img {
    max-width: 84%;
    margin-bottom: -49px;
}
.sc3 img:hover {
    transform:scale(0.9);
}
.sc5 img:hover {
    transform:scale(0.9);
    transition-duration: 1s;
}
.sc6 img:hover {
    transform:scale(0.9);
    transition-duration: 1s;
}
.hero{
    position:relative;
    min-height:700px;
    background:url(images/bg.jpg) center/cover;
    display:flex;
    align-items:center;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.63);
}

.container{
    position:relative;
    z-index:2;
    width:90%;
    max-width:1000px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.hero-left{
    width:70%;
}

.hero-right{
    width: 20%;
    display:flex;
    justify-content:center;
}

.hero-right img{
    width:470px;
}

h1{
    color: #fff;
    font-family: "Lora", Sans-serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: 1px;
}

h1 span{
    color:#deb734;
}

.subtitle{
    margin-top:25px;
        margin-bottom: 30px;

    color: #FFFFFFA8;
    font-family: "Lora", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3em;
    letter-spacing: 1px;
    max-width:850px;
}

.advantages{
    list-style:none;

}

.advantages li{
    display: flex;
    align-items: center;
    /* gap: 14px; */
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 14px;
    font-weight: 100;
}

.icon{
    width:40px;
    text-align:center;
}

h3{
    color:#fff;
    font-size:34px;

}
.hero-left .buttons{
    padding-top: 20px;
}
.buttons{
    display:flex;
    gap:20px;
}

.btn{
    text-decoration: none;
    border-radius: 18px;
    padding: 18px 23px;
    font-size: 18px;
    transition: .3s;
}

.primary{
    background:#deb734;
    color:#222;
}

.dark{
    background:rgba(0,0,0,.35);
    color:#fff;
    border:1px solid #deb734;
}

.btn:hover{
    transform:translateY(-3px);
}
.hero {
    background-color: #000;
}
p{
    font-family: 'Lora';

}
h1{
    font-family: 'Lora';

}
h2{
    font-family: 'Lora';

}
h3{
    font-family: 'Lora';

}
h3 {
    color: #fff;
    font-family: "Lora", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3em;
    letter-spacing: 1px;
}
.logog {
    font-size: 45px;
    color: #fff;
}
.p61 h3 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
@media (max-width: 767px){
    .spoiler p {
    /* color: #ffffff; */
    font-size: 15px;
    /* font-weight: 300; */
    line-height: 1.2em;
    padding: 5px 19px;
    /* max-width: 700px; */
}
#text-under-fq {
    /* color: #fff; */
    font-size: 17px; 
    /* font-weight: 300; */
    line-height: 1.2em;
    padding: 20px 0 0px 0;
    /* text-align: center; */
}
.hero-left .buttons
 {
    padding-top: 0px;
}
.sc2-col-right .btn primary {
        margin-top: 20px;
        padding: 11px 15px;
        font-size: 16px;
        font-weight: 100;
        border-radius: 10px;
    }
    .in1sc3 .btn primary {
        margin-top: 20px;
        padding: 11px 16px;
        font-size: 16px;
        font-weight: 100;
        border-radius: 10px;
    }
}
.menu .phone {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
    font-family: "Lora";
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

.menu .phone:hover {
    color: #ccc;
}

.phone-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: #ddb734;
    transition: fill 0.3s;
}

.menu .phone:hover .phone-icon {
    fill: #c9a52e;
}

.phone-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
}

.phone-mobile .phone-icon {
    width: 16px;
    height: 16px;
    fill: #ddb734;
}