*,::before,::after{margin: 0; box-sizing: border-box;}
a{ text-decoration: none;}
img{ vertical-align: bottom;}
ul{ list-style: none; padding: 0;}
button{ cursor: pointer; padding: 0;}
:disabled{ cursor: not-allowed;}
label{ display: block;}
iframe{ border: none;}

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

html{font-size: 15px; --red:#ca3c3c; --ff:proxima, sans-serif; scroll-behavior: smooth; scroll-padding-top: 80px;}
body{ font: 16px/1.3 var(--ff); background: #000; }


.container{ max-width: 1200px; margin: auto; padding: 0 1rem;}
.row{display: grid; gap: 2rem; grid-template-columns: repeat(12, 1fr);}
.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;}
.flex{display: flex;}
.align-center{ align-items: center;}
.justify-spacebet{ justify-content: space-between;}
.justify-center{ justify-content: center;}
.justify-right{ justify-content: right;}
.gap-y-4{ row-gap: 4rem; }
.img-resp{ max-width: 100%; height: auto; }



/* layout */
header{ background: #000; color: #fff; position: sticky; top: 0; z-index: 1; }
h1{ font-size: 2rem; }
h1 a{ color: inherit; line-height: 80px; display: inline-block;}
nav{ margin-left: -20px;}
nav li{ margin: 0 10px;}
nav a{ display: block; color: #fff; padding: 0 10px; line-height: 80px;}
.btn{ font: 16px var(--ff); color: var(--red); background: none; width: 90px; height: 35px; border: 2px solid; border-radius: 10px;}
.menu{ display: none; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);}
.menu span{ display: block; height: 2px; background: var(--red); margin: 6px 10px; transition: 500ms; transform-origin: right center;}
.menu.active span:nth-child(1){ transform: rotate(-14deg);}
.menu.active span:nth-child(2){ opacity: 0; }
.menu.active span:nth-child(3){ transform: rotate(14deg);}
header .btn{ color: #e84343;}


.banner{ background: #666; color: #fff; padding: 20rem 0;}
.banner button{ border: none; background: none; color: inherit; font-size: 10rem; margin-right: 40px;}
.banner p{ font: 100 4rem var(--ff);}
.banner a{ color: #fff;}

.wrap-3{ background: var(--red); color: #fff; padding: 50px 0;}
h2{ font-size: 72px; line-height: 0.833; border-bottom: 10px solid;}
.feature .shape{ width: 100px; height: 100px; flex-shrink: 0; border: 2px solid; border-radius: 50%; display: grid; place-items: center; font-size: 36px; margin-right: 2rem; } 
.feature h3{ font-size: 16px; line-height: 1.875;} 
.feature p{ font-size: 14px; font-weight: 100; line-height: 1.57;} 


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


.wrap-5{ background: #ebebeb; color: #363636; padding: 100px 0;}
.wrap-5 .btn{ margin: 2rem 10px 4rem 0; color: #a13131;}
.wrap-5 .btn.active{ background: var(--red); color: #fff; border-color: var(--red); }
.work{ position: relative; text-align: center; overflow: hidden;}
.work .over{ background: #fff; position: absolute; inset: auto 0 -50px 0; padding: 20px 0; opacity: 0; transition: 400ms;}
.work h3{ color: var(--red); font: 700 18px var(--ff); line-height: 40px;}
.work p{ color: #898989; font: 100 14px var(--ff); line-height: 20px;}
.work:hover .over{ opacity: 1; bottom: 0;}
.seemore{ border: none; background: none; color: var(--red); font-size: 36px; margin-top: 2rem; }
.hidden{display: none;}


.wrap-6{ background: #666; color: #fff; padding: 4rem 0 2rem; text-align: center;}
.review blockquote q{ font: 100 36px/41px var(--ff); }
.review blockquote p{ margin-bottom: 17px;}
.review blockquote figcaption{margin-top: 10px;}

.wrap-6 .bx-wrapper{ background: none; border: none; box-shadow: 0 0;}
.wrap-6 .bx-wrapper img{ display: inline;}
.wrap-6 .bx-wrapper .bx-pager.bx-default-pager a.active,.wrap-6 .bx-wrapper .bx-pager.bx-default-pager a:focus,.wrap-6 .bx-wrapper .bx-pager.bx-default-pager a:hover{background: #fff;}
.wrap-6 .bx-wrapper .bx-pager.bx-default-pager a{ border: 2px solid #fff; margin: 0 10px;}


.wrap-7{ background: #fff; color: #363636; padding: 100px 0;}
.team{ margin: 80px 0 40px; position: relative;}
.social{ position: absolute; left: 140px; top: 60px; }
.social li{ margin-right: 10px; }
.social a{ display: block; width: 50px; line-height: 50px; background: var(--red); color: #fff; border-radius: 50%; text-align: center; font-size: 24px;}
.caption{ margin: 50px 0 0 100px; }
.caption h3{ font-size: 18px; color: var(--red); margin-bottom: 6px;}
.caption small{ font: 100 14px var(--ff) }
.caption p{ font: 100 14px/22px var(--ff); margin-top: 2rem;}
.all:nth-child(4),.all:nth-child(5),.all:nth-child(6){ display: none;}


.wrap-8{ background: #666; color: #fff; text-align: center; padding: 85px 0 65px;}
.wrap-8 span.fa{ font-size: 72px;}
.wrap-8 p{ font: 100 72px var(--ff);}
.wrap-8 b{ font: 700 18px var(--ff)}


.wrap-9{ background: #fff; color: #363636; padding: 100px 0;}
.doughnut{ margin: 80px 0 50px; aspect-ratio: 1/1; border-radius: 50%; padding: 10px;}
.doughnut p{ width: 100%; height: 100%; background: #fff; border-radius: 50%; display: grid; place-items: center; }
.d75{background: conic-gradient(var(--red) 270deg, #fff 270deg); }
.d25{background: conic-gradient(var(--red) 90deg, #fff 90deg); }
.d50{background: conic-gradient(var(--red) 180deg, #fff 180deg); }
.accordion{ margin-top: 80px;}
.accordion li{ margin-bottom: 10px;}
.accordion a{ display: block; border: 1px solid #ebebeb; padding: 20px; border-radius: 10px; color: #666; }
.accordion a span{ margin-right: 25px; }
.accordion a::after{ content: '+'; float: right;}
.accordion p{ font: 100 14px/22px var(--ff); color: #363636; margin: 20px; display: none; }
.accordion li a.active{ color: var(--red); }
.accordion li a.active::after{ content: '-';}
.accordion li:first-child p{ display: block;}


.wrap-10{ background: var(--red);  padding: 23px 0 22px;}
.wrap-10 input{ background:none; height: 35px; border: none; width: 100%; color: #fff; font: 100 36px var(--ff)}
.wrap-10 input::placeholder{ color: #fff;}
.wrap-10 .btn{ background: #fff;}


.wrap-11{ background: #7f7f7f; padding: 28px 0 27px;}
.box{ background: #666; color: #fff; line-height: 95px; text-align: center;}


.wrap-12{ background: #ebebeb; color: #363636; padding: 100px 0;}
address{ font: 100 16px/30px var(--ff); color: #666; margin: 1rem 0 0 0;}
.social2{ margin: 1rem 0; }
.social2 a{ color: var(--red); margin-right: 20px; }
.wrap-12 label{ border: 2px solid #363636; padding: 17px; }
.wrap-12 :is(input,textarea){ border: none; background: none; }
.wrap-12 :is(input,textarea):focus{ outline: none;}
.wrap-12 label:focus-within{ border-color: var(--red); color: var(--red);}
.wrap-12 textarea{ resize: none; vertical-align: top; height: 42px; }
.wrap-12 button{ width: 100%; background: #fff; border: none; height: 80px; border-radius: 10px; color: var(--red); font: 16px var(--ff);}
.wrap-12 button span{ font-size: 36px; vertical-align: middle;}


.wrap-13{ background: #252525; color: #fff; text-align: center; padding: 50px 0; }
.top{ color: var(--red); font-size: 20px; border: none; background: none; }


.overlay{ background: #000b; position: fixed; inset: 0; z-index: 2; }
.popup{ background: #fff; padding: 1rem; position: fixed; left: 50%; top: 100px; transform: translateX(-50%); z-index: 3; border-radius: 5px; }
.popup label{ margin: 1rem 0;}
.popup input{ float: right; margin-left: 10px;}
.hiddenform{ display: none;}
.popup .close{ position: absolute; top: 5px; right: 5px; background: none; border: none; color: var(--red);}


@media screen and (max-width:1220px){
    html{ font-size: 14px;}
    h2{ font-size: 62px;}
}

@media screen and (max-width:980px){
    .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;} 
    .col-t-hide{ display: none; } 
    .col-t-auto{  grid-column: auto; } 
    .wrap-11 .row{ grid-template-columns: repeat( 5 , 1fr);}
    .banner p{ font-size: 3rem;}
    .wrap-8 p{ font-size: 54px;}
}

@media screen and (max-width:767px){
    html{ font-size: 13px; }
    .col-m-1{ grid-column: span 1;}
    .col-m-2{ 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;}
    .collapse{ display: none; position: absolute; left: 0; right: 0; top: 80px; background: #000; padding: 1rem;}
    .menu{ display:inline-block;}
    .wrap-5 .btn{margin-right: 6px;}
    .collapse .flex{ flex-flow: column; border-top: 1px solid #333; }
    nav{ width: 100%; text-align: right;}
    nav a{ line-height: 40px;}
}

@media screen and (max-width:460px){
    .col-p-1{ grid-column: span 1;}
    .col-p-2{ grid-column: span 2;}
    .col-p-3{ grid-column: span 3;}
    .col-p-4{ grid-column: span 4;}
    .col-p-5{ grid-column: span 5;}
    .col-p-6{ grid-column: span 6;}
    .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;}
    .col-p-12{ grid-column: span 12;}
    .banner .flex{ flex-flow: column;}
    .work img{ width: 100%; }
    .caption{ margin-left: 50px;}
    .wrap-10 input{ font-size: 22px;}
    .wrap-11 .row{ grid-template-columns: repeat( 1 , 1fr);}
}