@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=League+Spartan:wght@100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Varela&family=Varela+Round&display=swap');

*{
margin:0;
padding:5px;
outline:0;
resize:none;
list-style:none;
border:none;
box-sizing:border-box;
}

:root{
--color-primary:#fff;
--color-secondary:#e86ed6;
--color-tertiary:#e86ed6;
--color-text:#111;
--primary-color:#faefef;
--primary-color-dark:#fed2d1de;
--text-dark:#1d1d1d;
--white:#ffffff;
--shadow:0 2px 40px 8px rgba(15 15 15 15);
--transition:all 4s ease-in-out;
--width-lg:85%;
--width-sm:95%;
}

body{
font-family:'Dancing Script',cursive;
font-family:'League Spartan', sans-serif;
font-family: "Roboto", sans-serif;
color:var(--color-text);
line-height:1.7;
overflow-x:hidden;
}

::-webkit-scrollbar{
	height:.5rem;
	width:.5rem;
	}
	::-webkit-scrollbar-track{
	color:var(--color-primary);
	}
	::-webkit-scrollbar-thumb{
	color:var(--color-secondary);
	}
	img{
	width:100%;
	object-fit:cover;
	display:block;
	}
	a{
	--color:var(--color-text);
	}
	span{
	font-size:.9rem;
	}
	h1,h2,h3,h4{
	line-height: 1.2;
	}
	h1{
	font-size: 2.8rem;
	}
	h2{
	font-size: 2rem;
	}
	h3{
	font-size: 1.6rem;
	}
	h4{
	font-size: 1.3rem;
	}
	h5{
	font-size: 1rem;
	}
	container{
	margin:0 auto;
	width:var(--width-1g);
	box-shadow : 0 0.5rem 1rem rgba(0,0,0,0.1);
	}
	section{
	padding:3rem 9%;
	}
	.home{
		position: relative;
		padding: 0;
	}
	.home.slide{
		padding:7rem;
		display:flex;
	min-height:60vh;
	}
	.home.slide.content{
		margin:auto;
		text-align:left;
	}
	#hdiv1{
		background-image:url(url1.jpg);
	}
	.home.slide.content span{
		color:#fff;
		display:block;
		font-size:5rem;
		text-shadow:0 0.5rem 1rem rgba(0,0,0,0,1.0);
	}
	
	
	section h2{
	text-align:center;
	margin-bottom:2rem;
	}
	
	.nav{
	background-color:var(--color-primary);
	color:var(--color-text); 
	padding:20px;
	}
	.logo{
	color:var(--color-text);
	padding:1rem 0;
	text-decoration: none;
	}
	.logo div:first-child{
		font-family:Verdana, Geneva, Tahoma, sans-serif;
		text-transform:uppercase;
		font-weight:700;
		font-size:2rem;
		line-height:1;
	}
	.logo div:first-child span{
		font-family:Verdana, Geneva, Tahoma, sans-serif;
		text-transform:uppercase;
		font-weight:700;
		font-size:2rem;
		line-height:1;
		color: #fed2d1;
	}
	.logo div:last-child{
		text-transform:uppercase;
		letter-spacing: .23rem;
		color:#999;
		font-size:.7rem;
		line-height:1;
	}
	.containers
	{
		background-color: white;
		padding:20px 20px;
		display:flex;
		align-items:center;
		justify-content: space-between;
	}
	
	
	.navlist{
		display:flex;
		color: black;
		align-items: flex-end;
	}
	
	.navlist li{
	text-transform:uppercase;
	font-size: 0.8rem;
	cursor:pointor;
	color:var(--color-text);
	
	z-index:111;
	}
	
	.navlist li a{
		color:var(--color-text);
		padding:2.8rem;
		position:relative;
		text-align: center;
		text-decoration:none;
		}
	
		.navlist li a::before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			text-align: center;
			background-color:  #fed2d1;
			height: 100%;
			width: 100%;
			border-bottom: .2rem solid #ebb6b5;
			z-index: -1;
			transition:0.1s;
			opacity:0;
			visibility:0;
		}
	
		.navlist li a:hover::before,
		.navlist li a:active::before{
			height:100%;
		opacity:1;
		visibility:visible;
		}
		
		.nav-icons{
			display:flex;
	
			gap:2 rem;
			color: var(--color-text);
		}
		.nav-icons .lnr{
			padding-inline: 10px;
			padding-top: 12px;
			cursor: pointer;
			font-size:1.1 rem;
		}
		.nav-icons .lnr:hover{
			color:var(--color-secondary);
		}




.containered{
    max-width: 1200px;
    margin: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10rem;
	margin-bottom: 50px;
}

.container_left h1{
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--primary-color-dark);
}

.container_left p{
    color:var(--text-dark);
    margin-bottom:1rem;
}

.container_left button{
    padding:1rem 2rem;
    margin-top: 1rem;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color:#fdb4b3;
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
}

.container_right{
    display: grid;
    gap:2rem;
}

.card{
    display: flex;
padding: 2rem;
align-items: flex-start;
gap: 2rem;
background-color: var(--primary-color);
border-radius: 1rem;
box-shadow:5px 5px 20px rgba(0,0,.2);
cursor: pointer;
}

.card img{
    max-width: 75px;
    border-radius: 100%;
}

.card-content{
    display: flex;
    gap: 1rem;
}

.card-content span i{
    font-size: 2rem;
    color: var(--primary-color);
}

.card_details p{
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: 1rem;

}

.card_details h4{
    text-align: right;
    color: var(--primary-color);
    font-size: 1rem;
font-weight: 500;
}


@media(width < 700px){
    .container{
        gap:3rem;
		margin: 20px;
	  padding: 20px;
	  right: 20px;
    }
}

@media(width < 700px){
    .container{
      grid-template-columns: repeat(1,1fr);
    }

    .container_right{
        grid-template-columns: repeat(2,1fr);

    }

    @media(width < 700px){
        .container_right{
            grid-template-columns: repeat(1,1fr);
			display: flex;
			padding:30px;
        }
}
}