/*=========VARIABLES=========*/
:root {
--ctf-color: #2100DD;
--ads-color: #A000CC;
--specification-color: #9BAAD5;
--installation-color: #889BD2;
--who-color: #516FC4;
--faq-color: #889BD2;
}

/*=========FONTS=========*/
@font-face {
font-family: "Basel";
src: url("assets/fonts/Basel2.woff2") format("woff2"),
}

@font-face {
font-family: "Basel-Medium";
src: url("fonts/Basel1.woff2") format("woff2")
}

@font-face {
  font-family:IBMPlexMono-Medium;
  src:url(assets/fonts/IBMPlexMono-Medium-897c8c30.woff2) format("woff2"),
  url(assets/fonts/IBMPlexMono-Medium-1e253194.woff) format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap
}

/*=========PRESET=========*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-size: 10px;
scroll-behavior: smooth;
}

body {
font-family: IBMPlexMono-Medium;
background: linear-gradient(black 10%, white);
background-repeat: no-repeat;
color: white;
overflow-x: hidden;
}

img {
height: auto;
width: 100%;
}

input,
button {
border: none;
outline: none;
font-family: IBMPlexMono-Medium;
}

/*==========HEADER=========*/
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
padding: 1.5rem;
z-index: 1000;
}

.header__logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
font-size: 7px;
font-family: "Arial";
}

.header__logo img {
width: 4rem;
}


/*========HERO===========*/

.hero {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
}

.hero__content {
display: grid;
}

.hero__content img {
grid-column: 1/1;
grid-row: 1/1;
justify-self: center;
}

@media screen and (width >= 400px) {

}

.hero__content__text {
margin-top: 100px;
grid-column: 1/1;
grid-row: 1/1;
align-self: center;
justify-self: center;
text-align: center;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}

.hero__content__text h1 {
font-size: 5rem;
}

.hero__content__text__from {
display: flex;
align-items: center;
gap: 1rem;
width: fit-content;
}

.hero__content__text__from > * {
font-size: 15px;
}

.hero__content__text__from input {
padding: 10px;
border-radius: 8px;
background: white;
}

.hero__content__text__from button {
padding: 10px;
border-radius: 8px;
background: var(--ctf-color);
color: white;
cursor: pointer;
}

.hero__content__text p {
font-size: 2rem;
color: gray;
margin-top: 4rem;
margin-bottom: 2rem;
}


/*========PUNCH PHRASE===========*/

.punchPhrase {
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
text-align: center;
height: 70vh;
margin: 1.5rem;
border-radius: 4rem;
background: linear-gradient(#7789DD, #2E364D);
}


/*========BOX SPECIFICATION===========*/

.boxSpecification {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
margin-top: 8rem;
overflow-x: hidden;
}

.boxSpecification h1 {
font-size: 5rem;
font-family: Basel;
}


.boxSpecification__content {
display: grid;
}


/*
.ok {
grid-column: 1/1;
grid-row: 1/1;
justify-self: center;
width: 100%;
margin-top: -5rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
*/


.boxSpecification__content img {
grid-column: 1/1;
grid-row: 1/1;
justify-self: center;
width: 150%;
margin-top: -5rem;
}

.boxSpecification__content__text {
grid-column: 1/1;
grid-row: 1/1;
justify-self: center;
display: grid;
grid-template-columns: 1fr;
grid-gap: 4rem;
padding: 1rem;
height: 90%;
}

.boxSpecification__content__text__specification {
display: flex;
flex-direction: column;
height: fit-content;
width: fit-content;
background: rgba(255, 255, 255, 0.17);
backdrop-filter: blur(10px);
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem;
}

.boxSpecification__content__text__specification h1 {
font-size: 2.5rem;
}

.boxSpecification__content__text__specification p {
font-size: 1.6rem;
color: var(--specification-color);
}


/*========INSTALLATION===========*/

.installation {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 2rem;
margin-top: 7rem;
}

.installation__text {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}

.installation__text h1 {
font-size: 5rem;
font-family: Basel;
}

.installation__text p {
font-size: 2rem;
color: var(--installation-color);
}

.installation img {
border-radius: 2rem;
object-fit: cover;
height: 45rem;
max-width: 80rem;
}


/*========WHO===========*/

.who {
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
padding: 2rem;
margin-top: 7rem;
}

.who h1 {
font-size: 5rem;
font-family: Basel;
}

.who__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
}

.who__content__item {
display: flex;
flex-direction: column;
gap: 15px;
}

.who__content__item h1 {
font-size: 2rem;
color: var(--who-color);
}

.who__content__item__imgContent {
display: grid;
}

.who__content__item__imgContent img {
grid-column: 1/1;
grid-row: 1/1;
border-radius: 1rem;
object-fit: cover;
}

.who__content__item__imgContent p {
grid-column: 1/1;
grid-row: 1/1;
font-size: 1.5rem;
align-self: end;
color: gray;
padding: 1rem;
}


/*========FAQ===========*/

.faq {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 2rem;
padding-bottom: 4rem;
margin-top: 7rem;
}

.faq h1 {
font-size: 5rem;
font-family: Basel;
}

.faq__content {
display: flex;
flex-direction: column;
width: 100%;
}

.faq__content__item {
display: flex;
flex-direction: column;
border-bottom: 1px solid white;
}

.faq__content__item p {
font-size: 1.5rem;
display: none;
color: gray;
padding: 0.5rem 0px;
}

.faq__content__item__question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0px;
}

.faq__content__item__question h1 {
font-size: 2rem !important;
color: var(--faq-color);
}

.faq__reponce__active {
display: flex !important;
}

.faq__content__item__question__arrow {
height: 4rem;
width: 4rem;
fill: #464646;
cursor: pointer;
transition: 0.3s;
}

.faq__arrow__active {
transform: rotate(180deg);
}

/*========FOOTER==========*/


footer {
display: flex;
flex-direction: column;
gap: 2rem;
background: #111111;
padding: 3rem;
padding-top: 4rem;
}

.footer__logo {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.5rem;
font-family: "Arial";
gap: 1.5rem;;
}

.footer__logo img {
width: 50%;
}

.footer__text {
display: flex;
flex-direction: column;
font-size: 1rem;
}

.footer__text p {
color: gray;
font-size: 1.5rem;
}




/*========BREAK POINT==========*/

@media screen and (width >= 500px) {

}

@media screen and (width >= 600px) {
	.hero__content img {
		max-width: 500px;
	}
	.punchPhrase {
		height: 50vh;
		background: inherit;
		align-items: start;
	}
	html {
		font-size: 11px;
	}
	.punchPhrase {
		font-size: 3.5rem;
	}
	.boxSpecification__content__text {
                grid-template-columns: 1fr 1fr;
        }
        .boxSpecification__content__text div:nth-child(3) {
                align-self: end;
        }
        .boxSpecification__content__text div:nth-child(4) {
                align-self: end;
		margin-left: 6rem;
        }
	.boxSpecification__content__text div:nth-child(2) {
		margin-left: 6rem;
        }
	.boxSpecification__content img {
		width: 80%;
	}
	.boxSpecification__content__text__specification h1 {
		font-size: 2rem;
	}
	.boxSpecification__content__text__specification p {
		font-size: 1rem;
	}
	.faq__content {
		width: 90%;
	}
	.footer__logo img {
		width: 40%;
	}

}

@media screen and (width >= 800px) {
        .hero__content img {
                max-width: 600px;
        }
        html {
                font-size: 12px;
        }
	.hero__content__text {
                margin-top: 180px;
        }
	.installation img, .who__content__item {
		width: 90%;
	}
	.boxSpecification__content__text__specification h1 {
                font-size: 2.5rem;
        }
        .boxSpecification__content__text__specification p {
                font-size: 1.6rem;
        }
	.footer__logo img {
                width: 30%;
        }
}

@media screen and (width >= 1050px) {
        .boxSpecification__content img {
                width: 70%;
        }
}


@media screen and (width >= 1150px) {
        .hero__content img {
                max-width: 700px;
        }
        html {
                font-size: 13px;
        }
	.hero__content__text__from > * {
                font-size: 16px;
        }
	.boxSpecification {
		gap: 10rem;
	}
	.who__content {
                flex-direction: row;
		padding: 3rem;
        }
	.who__content__item__imgContent img {
		height: 600px;
	}
	.boxSpecification__content img {
                width: 70%;
        }
	.footer__logo img {
                width: 25%;
        }	

}

@media screen and (width >= 1500px) {
        .hero__content img {
                max-width: 800px;
        }
        html {
                font-size: 14px;
        }
	.hero__content__text__from > * {
		font-size: 17px;
	}
	.header__logo {
		font-size: 8px;
	}
	.boxSpecification__content img {
                width: 55%;
        }
	.boxSpecification__content__text {
		width: 90%:
        }
	.boxSpecification__content__text div:nth-child(3) {
                margin-left: 5rem;
        }
        .boxSpecification__content__text div:nth-child(4) {
                margin-left: 14rem;
        }
        .boxSpecification__content__text div:nth-child(2) {
                margin-left: 14rem;
        }
	.boxSpecification__content__text div:nth-child(1) {
                margin-left: 5rem;
        }
	.boxSpecification__content__text__specification {
		background: none;
		border: none;
		backdrop-filter: none;
	}
	.faq {
		flex-direction: row;
		align-items: start;
		padding: 4rem;
	}
	.faq h1 {
		font-size: 8rem;
	}
	.faq__content {
		margin-top: 15rem;
		padding: 3rem;
	}
	.footer__logo img {
                width: 20%;
        }
}

@media screen and (width >= 1750px) {
        .hero__content img {
                max-width: 900px;
        }
        html {
                font-size: 15px;
        }
	.hero__content__text__from > * {
                font-size: 18px;
        }
	.boxSpecification__content img {
                width: 50%;
                margin-top: -10rem;
        }
	.boxSpecification__content__text div:nth-child(3) {
                width: 65%;
        }
	.boxSpecification__content__text div:nth-child(2) {
                margin-left: 22rem;
        }
        .boxSpecification__content__text div:nth-child(4) {
                margin-left: 18rem;
        }
}