*{ margin: 0; box-sizing: border-box; scroll-behavior:smooth;}
a{ text-decoration: none;}
ul{ list-style: none;}
button{ cursor:  pointer; padding: 0;}
.flex{ display: flex;}
.justify-space-bet{ justify-content: space-between;}
.align-center{ align-items: center;}


@font-face{ font-family:proxima; src:url(../font/ProximaNova-Bold.woff2); font-weight: 700; }
@font-face{ font-family:proxima; src:url(../font/ProximaNova-Regular.woff2); font-weight: 400; }
@font-face{ font-family:proxima; src:url(../font/ProximaNovaT-Thin.woff2); font-weight: 100;}

html{font-size:15px;--red:#b30c0c; --ff:proxima;}
body{font: 16px var(--ff);}
.container{ max-width: 1200px; margin: auto;}
.image-resp{ max-width: 100%; height: auto;}


header{ background: #000; color: #fff;  z-index: 1; }
header .btn{border:2px solid #f00 ;}
header h1{ font-size: 2rem;}
header h1 a{ color: inherit; display: inline-block; line-height: 80px;}
nav{margin-left: -20px; }
nav li{ margin: 5px; }
nav a{color: inherit; display:block; padding: 0 15px;line-height: 80px;}
.btn{ color: var(--red);font:1.1rem var(--ff); width: 90px; height: 35px; background: none; border: 2px solid var(--red); border-radius: 10px;}
.menu{ display: none; color: var(--red);font:1.1rem var(--ff); width: 90px; height: 35px; background: none; border: 2px solid var(--red); border-radius: 10px;}
.menu span{ display: block; height: 2px; background: var(--red); margin: 6px 20px; transition: .6s; transform-origin: right center;}

.menu.active span:nth-child(1){transform: rotate(-21deg);}
.menu.active span:nth-child(2){opacity: 0;}
.menu.active span:nth-child(3){transform: rotate(21deg);}

.banner{ background-color: #666; color: #fff; padding: 15rem 0;}
.banner p{font-size: 4rem; font-weight: 100;}
.banner a{ color: #fff; font-size: 1.1rem;}
.banner button{ background: none; border: none; font-size: 10rem; margin-right: 2rem; color: #fff;}


.Number-3{ background: var(--red); color: #fff; padding: 3rem 0; }
h2{font-size: 72px; line-height: 60px; border-bottom: 10px solid;}
.Number-3 h3{font-size:1.4rem;}
.Number-3 p{ font-size: 1rem; font-weight: 500;}


.Number-4{ line-height:10rem ; background: #fff; color: var(--red) ; text-align: center;}
.Number-4 span{font-size: 2rem;}


.Number-5{ background: #ebebeb; color: #000; padding-top: 6rem;}
.Number-5 button{ margin:2rem 10px; margin-left:-5px;}
.btn.active{background: var(--red); color: #fff;}

.all:is(:nth-last-child(7),:nth-last-child(8),:nth-last-child(9)){display: none;}
.teamcol:is(:nth-last-child(4),:nth-last-child(5),:nth-last-child(6)){display: none;}


.work{position: relative; text-align: center; overflow: hidden;}
.work .over{position: absolute; left: 0;right: 0; bottom:-100px; background: #fff; padding: 1.3rem 0;opacity: 0; transition: 0.5s;} 
.over h3{ color: var(--red);font-size: 1.2rem;line-height: 40px;}
.over p{ color: #898989; font-weight: 100; font-size: 14px;line-height: 20px;}
.work:hover .over{opacity: 1; bottom: 0;}
.Plus{  font-size: 36px; color: var(--red); border: none; margin: 30px 0;}


.Number-6{ background: rgb(102,102,102); color: #fff; text-align: center;padding: 4rem 0 2rem;}
.rating .rating-1 strong{ display: block; margin:10px 0 30px ;}
.rating .rating-1 p{ font-size: 2rem; font-weight: 100; line-height:41px; margin-bottom :1.4rem; }
.Number-6 .bx-wrapper img{ margin: auto;}
.Number-6 .bx-wrapper{ background: none; border: none;}
.Number-6 .bx-wrapper .bx-pager.bx-default-pager a{ border: 2px solid #fff; font-size: 0; padding: 7px; border-radius: 50%;}
.Number-6 .bx-pager-item{display: inline; margin: 1rem;}
.Number-6 .bx-wrapper .bx-pager.bx-default-pager a.active,.Number-6 .bx-wrapper .bx-pager.bx-default-pager a:focus,.Number-6 .bx-wrapper .bx-pager.bx-default-pager a:hover{ background: #fff;}


.Number-7{ padding: 6rem;background: #fff; color:#363636;}
.Number-7 img{ border-radius: 50%;}
.worker{ position: relative; margin-top: 5rem;}
.social{ position: absolute; left: 100px; top: 60px;}
.social a{display: block; line-height: 60px; font-size: 24px; background: var(--red); color: #fff; margin-right: 10px; width: 50px; height: 50px; border-radius: 50%; text-align: center;}
.gap{ margin: 3rem 0 0 6rem;}
.worker h3{ margin-bottom: 1rem; font-size:2rem; color: var(--red);}
.worker small{font-size: 1.5rem; color: #535252;}
.worker p{ margin-top: 2rem;}


.Number-8{ background:rgb(102,102,102); color:#fff; padding: 5rem;}
.items{text-align: center;}
.item{font-size: 5rem;  }
.items p{ font-size: 5rem; font-weight: 100;}
.items h3{font-size: 1.2rem; }


.Number-9{ background: #fff; padding: 6rem 0;}
.Number-9 canvas{ background: #000; margin-top:80px; max-width: 100%;}
.Number-9 h3{color: var(--red); font-size: 18px; line-height: 60px; margin-left: 115px;}
.Number-9 p{ font-size: 1rem; font-weight: 100; margin-top: 10px; margin-left: 115px;}
.Number-9 .data{background:conic-gradient(var(--red) 75%,#fff 75%); border-radius: 50%; width: 11rem; height: 11rem; margin-top:5rem; padding: 10px;}
.Number-9 .data.d25{background:conic-gradient(var(--red) 25%,#fff 25%);}
.Number-9 .data1{width: 100%; background: #fff; border-radius: 50%; height: 100%; display: grid; place-items: center;}
.Number-9 .data1 span{font-weight: bolder; color: var(--red);}


.accordion li{ margin-bottom: 10px;}
.accordion a{color:#4a4949; font: 700 1rem/22px; border: 1px solid #898989; border-radius: 10px; padding: 10px 1rem; display: block;}
.accordion span{ font-size: 24px; margin-right: 10px;}
.accordion p{ display: none; margin:20px;}
.accordion li a.active{ color: var(--red);}
.accordion li:first-child p{ display: block;}
.accordion a::after{ content:"+"; float: right;}
.accordion li a.active::after{ content: "-";}


.Number-10{ background: var(--red); color: #fff;}
.Number-10 input{ background: none; border: none; padding: 2rem 0; line-height: 20px; font-size: 2rem; color: #fff; outline: none;}
.Number-10 input::placeholder{ color: #fff; font:500 2rem var(--ff);}
.Number-10 form{justify-content: center; padding: 0 1rem;}
.Number-10 button{ background: #fff; font-size: 14px; width:6rem; height:3rem;  line-height: 20px;}

.Number-11{ background:#7f7f7f;}
.Number-11 span{ text-align: center;}
.Number-11 .box{ background:#ebebeb; margin: 30px; width: 170px; height: 100px;}


.Number-12{ background:#ebebeb; padding: 6rem 0;}
.Number-12 address{ font-style: normal; margin-top: 3rem; font-size: 1.5rem; color: #5b5a5a;}
.Number-12 ul a span{ color:var(--red); font-size: 1.5rem; }
.Number-12 li{ margin-right: 1rem; margin-top: 2rem;}
.Number-12 form{ margin-top: 3.3rem;}
.Number-12 label{ display: block; border: 2px solid #000; padding: 17px;}
.Number-12 span{ font-size: 16px;}
.Number-12 b{ font-size: 16px;}
.Number-12 input{ background: none; border: none;}
.Number-12 textarea{ resize: none; background: none; border: none; vertical-align: top;}
.Number-12 button{ background: #fff; color: var(--red); border: none; width: 100%;
height: 80px; border-radius: 10px; font-size: 16px; }
.Number-12 button span.fa{ font-size: 2.4rem; margin-left: 10px; vertical-align:middle;}
.Number-12 input,textarea:focus{ outline:  none; }
.Number-12 label:focus-within{ border-color: var(--red);}


.Number-13{ background: #000; color: #fff; padding: 50px 0; text-align: center;}
.Number-13 h3{ text-align: center; font-size: 2rem;}
.Number-13 p{  text-align: center; font-size: 1rem;}


footer button{ background: none; color: var(--red); border: none; font-size: 3rem; }

.circle{ width: 100px; height: 100px; border: 2px solid; border-radius: 50%; display: grid; place-items: center; margin-right: 30px; font-size: 36px;}
.row .gap-down{ row-gap: 4rem;}

.form{display: none;}
.overlay{background: #0008;  position: fixed; inset: 0; z-index:2;}
.popup{ background: #fff; position: fixed; top:6rem; left: 50%; transform: translateX(-50%); z-index: 3;
padding: 2rem; border-radius:20px 0 20px;}
.popup label{ display: block; margin: 1rem 0;}
.popup label input{ margin-left: 1rem; float: right;}
.close{position: absolute;right: 10px; top: 10px; border: none; background: none;}

iframe{top: 0;}


.container{max-width:1200px;margin:auto;padding:0 1rem;}
.row{ display: grid; grid-template-columns: repeat(12,1fr); gap: 2rem;}          
.col-1{grid-column:span 1;}
.col-2{grid-column:span 2;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;} 
.col-6{grid-column:span 6;} 
.col-7{grid-column:span 7;} 
.col-8{grid-column:span 8;} 
.col-9{grid-column:span 9;} 
.col-10{grid-column: span 10;} 
.col-11{grid-column: span 11;} 
.col-12{grid-column: span 12;} 


 @media screen and (max-width:1220px){
     html{font-size: 15px}}
     

@media screen and (max-width:980px){
    html{font-size: 14px;}
.col-t-1{grid-column:span 1;}
.col-t-2{ grid-column:span 2;}
.col-t-3{ grid-column:span 3;}
.col-t-4{ grid-column:span 4;}
.col-t-5{ grid-column:span 5;} 
.col-t-6{ grid-column:span 6;} 
.col-t-7{ grid-column:span 7;} 
.col-t-8{ grid-column:span 8;} 
.col-t-9{ grid-column:span 9;} 
.col-t-10{grid-column: span 10;} 
.col-t-11{grid-column: span 11;} 
.col-t-12{grid-column: span 12;}
.social{left: auto; top: 0; right: 0;}
.social ul{ flex-flow:column;}
.gap{ margin: 0; }
.popup{top:3rem;}

}

@media screen and (max-width:767px){
    html{ font-size: 12px;}
.col-m-1{ border:2px solid #000;grid-column:span 1;}
.col-m-2{ border:2px solid #000;grid-column:span 2;}
.col-m-3{ grid-column:span 3;}
.col-m-4{ grid-column:span 4;}
.col-m-5{ grid-column:span 5;} 
.col-m-6{ grid-column:span 6;} 
.col-m-7{ grid-column:span 7;} 
.col-m-8{ grid-column:span 8;} 
.col-m-9{ grid-column:span 9;} 
.col-m-10{grid-column: span 10;} 
.col-m-11{grid-column: span 11;} 
.col-m-12{grid-column: span 12;}
.colapse{ display: none; position: absolute; top: 80px; background: #000; width: 100%; right: 0; padding-bottom: 1rem; }
.colapse .flex{flex-direction: column; align-items: end;}
nav a{ line-height: 40px; text-align: right;}
.menu{ display: inline-block; position: absolute; right: 1rem; top: 20px;}




}

@media screen and (max-width:480px){
    html{ font-size: 11px;}
    .col-p-4{ grid-column:span 4;}
    .col-p-6{ grid-column:span 6;} 
    .col-p-12{grid-column: span 12;}
    .banner .flex{ flex-flow: column; font-size: 1.5rem;}
    .Number-9 h3{ margin-left: 25px;}
    .Number-9 p{ margin-left: 25px;}
    iframe{ width: 330px; aspect-ratio: 16/9;}
    .Number-7{padding: 4rem;}
    
    

/* .col-p-1{ grid-column:span 1;}
.col-p-2{ grid-column:span 2;}
.col-p-3{ grid-column:span 3;}
.col-p-5{ grid-column:span 5;} 
.col-p-7{ grid-column:span 7;} 
.col-p-8{ grid-column:span 8;} 
.col-p-9{ grid-column:span 9;} 
.col-p-10{grid-column: span 10;} 
.col-p-11{grid-column: span 11;}  */

}