@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/*    
.container{border:1px dashed orange}
section{border:3px solid orange}*/

html{scroll-behavior:smooth;font-family:"Raleway",sans-serif;font-optical-sizing:auto;font-weight:<weight>;font-style:normal}
    h1{line-height:1rem;transition:font-size .3s ease}
    .title-main{font-family:'Raleway',sans-serif;font-weight:300;font-size:2rem;color:#be9e8e;letter-spacing:.7rem;display:block}
    .title-sub{font-weight:300;font-size:1rem;color:#f2f2f2;letter-spacing:.4rem;display:block}
    h2{color:#be9e8e!important;font-size:1rem;font-weight:600;letter-spacing:.2rem;padding-bottom:1rem;text-transform: uppercase;}
    h3{color:#be9e8e!important;font-size:1rem;font-weight:500;letter-spacing:0;padding-bottom:.8rem!important;}
    h4,h5{color:#be9e8e!important;font-size:.8rem;font-weight:500;letter-spacing:0;}
    p{font-size: .9rem}
    ul li{font-size: .8rem}
    ul li::marker {сolor:#be9e8e!important;font-size:1rem;}
    .len{color:#7a5b4c}

.navbar{background-color: rgba(24, 24, 33, 0.6)!important;backdrop-filter: blur(3px);transition:opacity .3s ease}
.navbar-nav .nav-link{color:#f2f2f2!important;font-size:.9rem;}
.navbar-brand {color:#f2f2f2!important;font-size:.9rem;text-transform:uppercase;}
.navbar-brand-color{color:#be9e8e!important;font-size:.9rem;font-weight:600;}
.navbar-toggler{border:none;box-shadow:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;padding:.5rem;touch-action:manipulation;user-select:none;}
.navbar-toggler:focus,.navbar-toggler:active{box-shadow:none;outline:none}
.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f2f2f2ff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

section{min-height:100vh;padding:60px 0;display:flex;align-items:center;}
#intro{background-color:#181821;background-image:linear-gradient(#1818214d,#181821e6),url(../../assets/img/bg/intro2.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;color:#f2f2f2}
#about{background-color:#1f1f29;color:#f2f2f2;}
#service{background-color:#181821;color:#f2f2f2}
#cars{background-color:#1f1f29;color:#f2f2f2}
#faq{background-color:#181821;color:#f2f2f2}
#contact{background-color:#1f1f29;color:#f2f2f2}

/* === orderNow btn STYLE  === */
.orderNow{font-family:"Raleway",sans-serif;font-size:.8rem;position:relative;display:inline-block;padding:.4rem 1rem;margin:20px 4px;color:#fff;text-decoration:none;text-transform:uppercase;font-weight:400;letter-spacing:2px;overflow:hidden;transition:.8s}
.orderNow:hover{background:#7a5b4c;color:#fff;box-shadow:0 0 5px #be9e8e,0 0 25px #be9e8e,0 0 50px #be9e8e,0 0 200px #be9e8e;-webkit-box-reflect:below 1px linear-gradient(transparent,#0005)}
.orderNow span{position:absolute;display:block;background:#7a5b4c}
.orderNow span:nth-child(1){top:0;left:0;width:100%;height:1px;animation:animate1 1s linear infinite}
.orderNow span:nth-child(2){top:0;right:0;width:1px;height:100%;animation:animate2 1s linear infinite .25s}
.orderNow span:nth-child(3){bottom:0;right:0;width:100%;height:1px;animation:animate3 1s linear infinite .5s}
.orderNow span:nth-child(4){bottom:0;left:0;width:1px;height:100%;animation:animate4 1s linear infinite .75s}
@keyframes animate1 {
0%{transform:translateX(-100%)}
50%,100%{transform:translateX(100%)}
}
@keyframes animate2 {
0%{transform:translateY(-100%)}
50%,100%{transform:translateY(100%)}
}
@keyframes animate3 {
0%{transform:translateX(100%)}
50%,100%{transform:translateX(-100%)}
}
@keyframes animate4 {
0%{transform:translateY(100%)}
50%,100%{transform:translateY(-100%)}
}

.nextPage{font-family:"Raleway",sans-serif;font-size:.8rem;border:1px solid #7a5b4c; display:inline-block;padding:.4rem 1rem;margin:20px 4px;color:#fff;text-decoration:none;;letter-spacing:2px;overflow:hidden;transition:.8s}
.nextPage:hover{background:#7a5b4c;color:#fff;}

.phone-link{font-family:"Raleway",sans-serif;font-size:.8rem;border:1px solid #7a5b4c;padding:.4rem 1rem;margin:20px 4px;color:#fff;text-decoration:none;;letter-spacing:2px;overflow:hidden;transition:.8s}
.phone-link:hover{background:#7a5b4c;color:#fff;}

.box-2{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:center;justify-content:center;-webkit-align-content:stretch;align-content:stretch;-webkit-align-items:center;align-items:center}

.banner{width: 100%}

/* === gallery btn STYLE  === */
.gallery1{  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "area1 area1 area1 areaTitle areaTitle areaTitle areaTitle"
    "area2 area2 area3 area3 area3 area4 area4"
    "area5 area5 area5 area5 area6 area6 area6";
  height: 550px;
}
.area1,.areaTitle,.area2,.area3,.area4,.area5,.area6{overflow:hidden;}
.area1 { grid-area: area1; border:1px solid #181821;border-radius:4px}
.areaTitle { grid-area: areaTitle;padding:10px;}
.area2 { grid-area: area2;border:1px solid #181821;border-radius:4px }
.area3 { grid-area: area3;border:1px solid #181821;border-radius:4px }
.area4 { grid-area: area4;border:1px solid #181821;border-radius:4px }
.area5 { grid-area: area5;border:1px solid #181821;border-radius:4px }
.area6 { grid-area: area6;border:1px solid #181821;border-radius:4px }

.gallery-social{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:center;justify-content:center;-webkit-align-content:stretch;align-content:stretch;-webkit-align-items:center;align-items:center}
.gallery-social-ico {color:#fff;margin:20px 7px;padding:1px 1px;border-radius:6px; font-size:1.2rem; line-height:0;text-decoration:none;transition:background .5s ease,color .5s ease}
.gallery-social-ico:hover{color:#7a5b4c;}
.gallery-social-more{font-family:"Raleway",sans-serif;font-size:.8rem;border:1px solid #7a5b4c;padding:.4rem 1rem;margin:20px 4px;color:#fff;text-decoration:none;;letter-spacing:2px;overflow:hidden;transition:.8s}
.gallery-social-more:hover{background:#7a5b4c;color:#fff;}

.gallery-social-modal{position:absolute;bottom:30px;text-align:center;background:#000;padding:1rem;;border-radius:.3rem;z-index:4}

.gallery{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;cursor:pointer;display:block;}
.gallery:hover{transform:scale(1.05);}
.modal{position:fixed;top:0;left:0;width:100%;height:100vh;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .5s ease}
.modal.open{opacity:1;visibility:visible}
#modal-img{max-width:90%;max-height:80vh;box-shadow:0 0 20px #000;position:relative;z-index:2;opacity:0;transform:scale(0.95);transition:opacity .3s ease,transform .3s ease;}
#modal-img.show{opacity:1;transform:scale(1)}
.modal-controls{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;justify-content:space-between;align-items:center;z-index:3;pointer-events:none}
.modal-controls button{font-size:2rem;background:#000;border:none;color:#fff;cursor:pointer;padding:1rem;border-radius:.3rem;pointer-events:auto;user-select:none;transition:transform .5s}
.modal-controls button:hover{transform:scale(1.2)}
#close{position:absolute;top:0px;right:0px;font-size:1rem;padding:2rem;z-index:4}

    /* === TITLE STYLE  === */
    .title-center{position:relative;text-align: center;margin:0}
    .title-center:before{content:"";position:absolute;left:50%;bottom:0;height:5px;width:50px;background-color:#be9e8e!important;transform:translateX(-50%)}
    .title-center:after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background-color:#be9e8e!important}

    .title-left{position:relative;text-align: left;margin: 0}
    .title-left:before{content:"";position:absolute;left:0;bottom:0;height:2px;width:50px;background-color:#be9e8e!important}
    .title-left:after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background-color:#be9e8e!important}
    .subtitle{color:#f2f2f2!important;font-size:1rem;font-weight:100;letter-spacing:1rem;line-height:0;padding-bottom:.5rem;}

/* === accordion STYLE  === */
.accordion{width:100%;margin:0 auto}
.accordion-item{border:none;border-radius:4px;margin-bottom:.5rem;overflow:hidden;background:#575757}
.accordion-header{margin:0;padding:0}
.accordion-button{display:flex;align-items:center;width:100%;padding:1rem;font-size:.9rem;color:#f2f2f2;text-align:left;background-color:#21222a;border:none;outline:none;cursor:pointer;transition:background-color .3s ease;font-weight:400}
.accordion-button:not(.collapsed){background-color:#21222a;color:#f2f2f2}
.accordion-button:focus{box-shadow:none}
.accordion-button::after{content:"";flex-shrink:0;width:1rem;height:1rem;margin-left:auto;background-image:url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f2f2f2' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.5 6L8 12.5 14.5 6h-13z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:1rem;transition:transform .3s ease}
.accordion-button:not(.collapsed)::after{transform:rotate(-180deg);background-image:url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f2f2f2' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.5 6L8 12.5 14.5 6h-13z'/%3E%3C/svg%3E")}
.accordion-collapse{transition:height .35s ease}
.accordion-body{font-size:.8rem;padding:1rem 0 1rem 3rem;background-color:#272830;color:#f2f2f2;}

/* === input STYLE  === */
input.form-control,textarea.form-control{width:100%;border:none!important;border-bottom:2px solid #be9e8e!important;border-radius:0!important;background-color:transparent!important;color:#f2f2f2!important;margin:.5rem 0; padding:.75rem 1rem;font-size:.9rem;box-shadow:none!important}
input.form-control:focus,textarea.form-control:focus{border-bottom-color:#fff!important;background-color:transparent!important;outline:none;box-shadow:none!important}
input.form-control::placeholder,textarea.form-control::placeholder{color:#be9e8e!important;font-size:.8rem;opacity:1}
input.form-control:disabled,textarea.form-control:disabled{background-color:#e9ecef!important;color:#666!important;cursor:not-allowed}

a[href^="mailto:"]{color:#f2f2f2!important;text-decoration:none;transition:color .3s ease,text-decoration .3s ease}
a[href^="mailto:"]:hover{text-decoration:underline}


.sendBtn{font-family:"Raleway",sans-serif;font-size:.8rem;border:1px solid #7a5b4c;padding:.4rem 1rem;margin:20px 4px;background:none;color:#fff;text-decoration:none;;letter-spacing:2px;overflow:hidden;transition:.8s}
.sendBtn:hover{background:#7a5b4c;color:#fff;}

/* ========================================================================================================================================================= */
/* До 768px (мобилки) */
@media (max-width: 767.98px) {
    .title-main{font-family:'Raleway',sans-serif;font-weight:300;font-size:1.2rem;color:#be9e8e;letter-spacing:.7rem;display:block}
    .navbar-collapse{text-align:center;border-bottom:1px dotted orange}
    .gallery1{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;gap:5px 5px;grid-auto-flow:row;grid-template-areas:"areaTitle areaTitle areaTitle" "area1 area1 area2" "area3 area4 area4" "area5 area5 area6"}
    .areaTitle{grid-area:areaTitle;min-height:200px}
    .area1{grid-area:area1}
    .area2{grid-area:area2}
    .area3{grid-area:area3}
    .area4{grid-area:area4}
    .area5{grid-area:area5}
    .area6{grid-area:area6}
}
            /* От 768px и выше (планшеты и выше) */
            @media (min-width: 768px) { }
            /* Только между 768px и выше, включая десктопы */
            @media (min-width: 768px){ }