@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&family=Big+Shoulders+Display:wght@700&family=Karla:wght@400;700&family=Kumbh+Sans:wght@400;700&family=League+Spartan:wght@400;500;700&family=Lexend+Deca&family=Open+Sans&family=Poppins:wght@200;400;600&family=Raleway:wght@400;700&display=swap');


:root{
	--primary:hsl(238, 29%, 16%);
	--secondary:hsl(273, 75%, 66%);
	--tertiary:hsl(240, 73%, 65%);
	--white:hsl(0, 0%, 100%);
	--primary-accent:hsl(14, 88%, 65%);
	--secondary-accent:hsl(240, 5%, 91%);
	--text-dark:hsl(237, 12%, 33%);
	--text-light:hsl(240, 6%, 50%);
	--soft-edge:8px;
	--rounded-edge:24px;
	--circle-border:50%;
	--fs-very-small:0.725rem;
	--fs-small: 0.925rem;
	--fs-medium:2rem;
	--fs-large:4rem;
	--fw-medium: 400;
	--fw-bold: 700;
	--fw-bolder: 900;
}

/*___________________________________________Reset_____________________________________________*/


/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
hr {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */

html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/*______________________________________________Utility Classes____________________________________________*/

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

.flex-center{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-column{
	display: flex;
	flex-direction: column;
}

.flex-row{
	display: flex;
	flex-direction: row;
}

.hidden{
	display: none;
}

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

.active{
	font-weight: var(--fw-bold);
	color: var(--primary);
}

*{
	--outline: 2px solid goldenrod;
}


/*style start*/

body{
	font-family: 'Kumbh Sans', sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(to bottom, hsl(273, 75%, 66%), hsl(240, 73%, 65%) );
}

main{
	padding: 1rem;
}

.container{
	max-width:68rem;
	background-color: var(--white);
	padding: 3rem 3rem 3rem 0;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: var(--rounded-edge);
	background-image: url(./images/bg-pattern-desktop.svg);
	background-repeat: no-repeat;
	background-position: top -22rem left -39rem, bottom 0 right 0rem;
	position: relative;
}

.illustration{
	max-width: 24rem;
}

.box{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-left: -6rem;
	max-height: 7rem;
	z-index: 1;
	display: grid;
	place-items: center;
}

.desktop{
	background-color: rgba(255, 0, 0, 0);
	clip-path: polygon(12% 0, 200% -100%, 100% 200%, 12% 200%);
	transform: translateX(-3rem);
}

.desktop-image{
	transform: scale(1.2);
}

.mobile{
	display: none;
}

.faq-container{
	max-width: 34rem;
	padding:1rem 5rem 1rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap:2rem;
}

.questions{
	gap:1rem;
}

.question-wrapper{
	display: flex;
	flex-direction: column;
	min-width: inherit;
}

.question{
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	cursor: pointer;
	border: 0;
	background-color: inherit;
}

.question img{
	align-self: center;
	transition: all 300ms ease;
}

.answer{
	max-width: 34rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 800ms ease;
}

.question:hover > h2{
	color: var(--primary-accent);
	cursor: pointer;
}

.question-wrapper.active .answer{ 
	max-height: 5rem;
	animation: appear 1s ease-in-out;
}

.question-wrapper.active .arrow{
	transform: rotate(180deg);
}

.question-wrapper.active .title{
	color: var(--text-dark);
	font-weight: var(--fw-bold);
}

h1{
	font-size: var(--fs-medium);
	font-weight: var(--fw-bold);
	color:var(--primary);
}

h2{
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color:var(--text-dark);
}

.answer p{
	font-weight: var(--fw-medium);
	font-size: var(--fs-very-small);
	color: var(--text-light);
}

hr{
	width: 100%;
	border: 0;
	height: 1px;
	background-color: var(--secondary-accent);
}

@media screen and (max-width:1024px) {
	main{
		padding:1rem;
	}
	.container{
		background-image: url(./images/bg-pattern-mobile.svg);
		background-size: 15rem;
		background-position: top 0.65rem center;
		padding: 1rem;
		display: flex;
		flex-direction: column;
	}
	.mobile-image{
		width: 15rem;
		position: relative;
		bottom: 7.5rem;
		margin-bottom: -6rem;
		z-index: 1;
	}
	.mobile{
		display: block;
	}
	.faq-container{
		padding:1rem;
	}
	.desktop-image{
		display: none;
		opacity: 0;
		margin: 0;
	}
	.desktop{
		display: none;
		background-color: brown;
	}
	.mobile{
		display: block;
	}
	.box{
		display:none;
	}
	h1{
		align-self: center;
	}
	
}

@media screen and (max-width:412px) {
	.title{
		gap:0;
	}
	h2{
		font-size: var(--fs-small);
	}
	p{
		font-size: var(--fs-very-small);
	}
}

@keyframes appear{
	from{
		opacity: 0;
	}
	to{
		opacity:1;
	}
}