@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');


*,*::after,*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
scroll-behavior: smooth;
}

:root{
/* primary colors */
--background: #000435;
--white: white;
--icons-bg: hsla(247, 41%, 28%, 0.6);
--btn-bg: hsla(240, 51%, 70%, 1);
--cta-bg: linear-gradient(313deg, rgba(170, 217, 217, 0.80) 0%, rgba(141, 141, 218, 0.50) 67.27%);;
--img-headings: #AAD9D9;
--card-bg: #211D56;
}

body{
font-family: 'Outfit', sans-serif;
background: var(--background);
position: relative;
}

.error{
	font-size: 12px;
	margin-left: 20px;
	color: red;
	display: none;
}
.bg-hero{
position: relative;
width: 100%;
height: 60%;
}

.bg-two{
position: absolute;
right: 0;
top: -100px;
}

.bg-hero img{
width: 80%;
}

.wrapper{
padding: 0px 100px;
width: 100%;
display: grid;
gap: 50px;
position: absolute;
top: 0;
}


.top-sec{
display: grid;
gap: 40px;
}

.logo p{
font-weight: bolder;
letter-spacing: 3px;
font-size: 20px;
color: var(--white);
}

nav{
display: flex;
place-items: center;
justify-content: space-between;
padding: 20px 0px;
}

.links{
display: flex;
gap: 40px;
z-index: 1;
place-items: center;
}

.links a{
color: var(--white);
text-transform: uppercase;
font-weight: normal;
}

.hero-sec{
display: flex;
place-items: center;
justify-content: space-between;
}

.discover{
font-size: 80px;
width: 78%;
color: var(--white);
line-height: 90px;
}

.secure{
width: 50%;
color: var(--white);
line-height: 24px;
}

.hero-text-sec{
display: grid;
gap: 20px;
}


.cta-hero{
margin-top: 20px;
display: flex;
gap: 30px;
}

.buy, .pricing{
background: var(--btn-bg);
padding: 10px 30px;
border-radius: 20px;
color: var(--white);
}

.pricing{
width: 180px;
text-align: center;
}
.sell{
border: 1px solid  var(--btn-bg);
padding: 10px 20px;
border-radius: 20px;
color: var(--white);
}



.featured{
display: grid;
margin: 100px 0px;
gap: 20px;
}

.feature{
color: var(--white);
background: var(--btn-bg);
width: 130px;
text-align: center;
padding: 5px 10px;
border-radius: 20px;
text-transform: uppercase;
}


.icons{
display: flex;
place-items: center;
justify-content: space-between;
background: var(--icons-bg);
padding: 0px 20px;
border-radius: 10px;
}


.analytics{
width: 100%;
padding: 0;
display: flex;
margin-bottom: 50px;
justify-content: space-between;
}



.img-analytics{
display: grid;
}

.img-analytics img{
width: 100%;
}

.analytics-text{
width: 40%;
display: grid;
place-content: center;
gap: 20px;
color: var(--white);
}

.analize{
color: var(--img-headings);
text-transform: uppercase;
}

.portfolio{
width: 68%;
line-height: 25px;
}

.built{
width: 80%;
font-size: 40px;
text-transform: capitalize;
}


.testimonials{
display: grid;
place-items: center;
gap: 70px;
margin: 50px 0px;
}

.text-testimonials{
display: grid;
color: var(--white);
gap: 10px;
place-items: center;
text-align: center;
}

.text-testimonials h1{
font-size: 50px;
width: 70%;
margin-bottom: 20px;
}

.cards{
width: 100%;
display: flex;
place-items: center;
justify-content: space-evenly;
}

.card{
position: relative;
padding: 15px 20px;
display: grid;
gap: 0px;
border-radius: 10px;
place-items: center;
width: 280px;
height: 220px;
background: var(--card-bg);
}

.person{
border-radius: 50%;
width: 65px;
position: absolute;
top: -30px;
}

.name{
font-weight: bold;
color: var(--white);
}

.card-text{
color: rgb(220, 220, 220);
display: grid;
margin-top: 10%;
gap: 10px;
font-size: 15px;
text-align: center;
line-height: 24px;
place-items: center;
} 

.cta-section{
display: grid;
gap: 10px;
background: var(--cta-bg);
width: 90%;
border-radius: 10px;
margin: 0 auto;
margin-bottom: 50px;
place-items: center;
padding: 50px 0;
color: var(--white);
}


.cta-section h2{
font-size: 50px;
text-align: center;
width: 40%;
text-transform: capitalize;
}
.cta-section p{
text-transform: uppercase;
}

.get-started{
text-transform: uppercase;
color: var(--white);
background: var(--card-bg);
padding: 10px 20px;
margin-top: 20px;
border-radius: 20px;
}


footer{
padding: 50px 0px;
display: flex;
justify-content: space-between;
}

.f-links{
display: grid;
gap: 10px;
}

.f-links ul{
display: grid;
gap: 10px;
}

.title{
font-weight: bold;
color: var(--white);
}

.f-links ul li a{
color: lightgrey;
text-transform: capitalize;
}


 .sub input{
padding: 13px;
width: 90%;
background: transparent;
border-radius: 20px;
border: none;
outline: none;
font-weight: 600;
color: var(--white);
}

.sub{
	/* display: flex; */
	width: 100%;
}

.news-letter{
	border: 2px solid var(--btn-bg);
	border-radius: 30px;
	padding: 3px;
	width: 100%;
	display: flex;
	position: relative;
	place-items: center;
}

.sub button{
right: 0;
bottom: 0;
border: none;
padding: 13px 25px;
border-radius: 20px;
text-align: center;
cursor: pointer;
font-weight: bold;
color: var(--white);
background: var(--btn-bg);
}


p.join{
color: var(--white);
text-align: center;
}

.last-sec{
background:var(--cta-bg);
width: 100%;
padding: 5px;
position: absolute;
bottom: 0;
}

.menu{
display: none;
}

.footer-links{
display: flex;
gap: 70px;
}

div.join{
	padding: 0;
	display: grid;
	place-items: center;
	gap: 10px;
}


@media screen and (max-width: 885px) {

body{
width: 100%;
max-width: 885px;
overflow-x: hidden;
}
.wrapper{
padding: 0;
}

.menu{
display: grid;
}


.sub{
	display: grid;
	place-content: center;
	width: fit-content;
}

.news-letter{
	border: 2px solid var(--btn-bg);
	border-radius: 30px;
	padding: 3px;
	width: 100%;
	display: flex;
	position: relative;
	/* place-content: center; */
}





.hero-sec{
gap: 100px;
display: grid;
}

nav .links{
position: absolute;
background: var(--btn-bg);
padding: 10px;
width: 96%;
top: 1.5%;
left: 1.6%;
border-radius: 5px;
display: grid;
/* gap: 20px; */
transition: .5s;
transform: translateY(-200%);
}

.links.active{
transform: translateY(0);
}

nav{
padding: 20px;
}

.menu-btn{
width: 40px;
cursor: pointer;
}


.discover{
width: 90%;
text-align: center;
}

.secure{
width: 50%;
text-align: center;
}

.hero-text-sec{
place-items: center;
}

.featured{
place-items: center;
margin: 100px 0px;
}

.icons{
display: grid;
grid-template-columns: repeat(2,1fr);
place-items: center;
gap: 40px;
width: 90%;
padding: 0;
background: none;
}

.icons img{
width: 50%;
}

.analytics{
width: 100%;
padding: 0;
flex-direction: column;
gap: 100px;
place-items: center;
}

.two{
flex-direction: column-reverse;
}

.img-analytics{
display: grid;
place-items: center;
}

.img-analytics img{
width: 100%;
}

.analytics-text{
width: 90%;
display: grid;
text-align: center;
place-items: center;
gap: 20px;
color: var(--white);
}

.cards{
flex-direction: column;
gap: 50px;
}

.cta-section{
place-content: center;
width: 90%;
}

.cta-section h2{
width: 80%;
font-size: 40px;
}

p.join{
text-align: center;
font-size: 22px;
}

.footer-links{
display: flex;
justify-content: space-around;
width: 100%;
}

footer{
flex-direction: column-reverse;
gap: 40px;
place-items: center;
}

}

@media screen  and (max-width: 435px){
body{
max-width: 435px;
}

nav{
width: 100%;
}

nav .links{
	left: 2%;
}

.discover{
font-size: 40px;
width: 100%;
line-height: 50px;
}

.secure{
width: 90%;
}

.hero-text-sec{
gap: 15px;
}

.bg-hero img{
width: 80%;
}

.hero-sec{
gap: 20px;
}

.cta-hero{
margin-top: 0;
padding: 30px;
}

.cta-section{
margin-bottom: 20px;
padding: 30px 0;
}

.cta-section h2{
font-size: 30px;
}

.hero-img{
display: grid;
place-items: center;
}

.hero-img img{
width: 80%;
}

.img-analytics img{
width: 70%;
}

.built{
font-size: 30px;
}

.text-testimonials h1{
font-size: 30px;
}

.analytics{
gap: 50px;
margin-bottom: 50px;
}

.portfolio{
width: 90%;
}

.footer-links{
gap: 10px;
}


.featured{
gap: 50px;
margin: 30px;
}

.icons{
display: grid;
grid-template-columns: repeat(2,1fr);
place-items: center;
gap: 40px;
width: 90%;
padding: 0;
background: none;
}

.icons img{
width: 90%;
}

 }


.news-letter{
	position: relative;

}


.fade-up{
transition: cubic-bezier(0.64, 0.04, 0.26 , 0.87), opacity 0.8s cubic-bezier(0.64, 0.04, 0.26 , 0.87) ;
opacity: 0;
transform: translate3d(0, 2rem, 0);
}
.faded{
opacity: 1;
transform: translate3d(0, 0, 0);
}