/*hero*/

    /*hero-background*/

	#hero {
	    position: relative;
	    width: 100%;
	    min-height: 700px;
	    overflow: hidden;
	    background-color: #171B2C;
	}
	
	#hero .hero-bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    justify-content: flex-end;
	    z-index: 1;
	}
	
	#hero .content {
	    position: relative;
	    z-index: 5;
	    min-height: 700px;
	    width: 100%;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    padding: 10px;
	}

	#hero .hero-bg .bg{
		width: 900px;
		transition: 0.2s;
	}

	#hero .hero-bg .bg-cyan{
		background-color: #3787A1;
		clip-path: polygon(450px 0, 100% 0, 100% 100%, 0% 100%);
		filter: drop-shadow(-15px 0px 20px rgba(0,0,0,0.5));
		height: 700px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	#hero .hero-bg .bg-blanc{
		background-color: #D9D9D9;
		clip-path: polygon(0 0, 108px 0, 100% 100%, 0% 100%);
		height: 50%;
		width: 360px;
	}

	#hero .hero-bg .bg-blanc-2{
		display: none;
	}

	/*hero-content*/

	#hero .content .left .titre{
		color: #fff; 
		font-size: 60px;
		width: 452px;
		line-height : 62px;
		margin-bottom: 40px
	}

	#hero .content .left .subtitle{
		color: #fff; 
		font-size: 18px;
		width: 439px;
		margin-bottom: 40px;
	}

	#hero .content .right img{
		filter: brightness(1.4) saturate(0%);
		height: 360px;
		width: 360px;
	}

	.btn-hero {
	    display: inline-flex;
	    align-items: center;
	    background-color: #00D0FF;
	    color: #171B2C;
	    padding: 7px 25px;
	    border-radius: 50px;
	    border: none;
	    font-weight: bold;
	    font-size: 24px;
	    text-decoration: none;
	    box-shadow: 0 0 20px rgba(0, 209, 255, 0.4);
	    transition: 0.3s;
	}

	.arrow {
		margin-left: 10px;
		height: 40px;
		width: 40px;
	}

	.btn-hero:hover {
	    transform: translateY(-2px);
	    box-shadow: 0 0 30px rgba(0, 209, 255, 0.6);
	    color: #171B2C;
	}

	@media (max-width: 1400px) {

		#hero .hero-bg .bg{
			width: 800px;
		}
	}

	@media (max-width: 1220px) {

		#hero .hero-bg .bg{
			width: 700px;
		}
	}

	@media (max-width: 1050px) {

		#hero .hero-bg .bg{
			width: 650px;
		}
	}

	@media (max-width: 990px) {

		#hero {
		        min-height: 850px;
		    }

		#hero .hero-bg{
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-end;
			height: 100%; 
		}

		#hero .content {
		    flex-direction: column;
		    justify-content: center;
		    min-height: 850px;
		    padding-top: 40px;
		}

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

		#hero .content .right img{
			height: 246px;
			width: 246px;
		}

		#hero .content .left .titre{
			font-size: 48px;
			line-height : 50px;
			width: 360px;
		}

		#hero .content .left .subtitle{
			width: 360px;
		}

		#hero .content .left .btn-hero{
			margin-bottom: 30px;
		}

		#hero .hero-bg .bg{
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}

		#hero .hero-bg .bg-cyan{
			clip-path: polygon(450px 0, 100% 0, 100% 100%, 0% 100%);
			height: 350px;
			width: 400px;
			z-index: 1;
		}

		#hero .hero-bg .bg-blanc{
			display: none;
		}

		#hero .hero-bg .bg-blanc-2{
			display: block;
			position: absolute;
			background-color: #D9D9D9;
			clip-path: polygon(0 0, 0% 100%, 100% 100%);
			height: 240px;
			width: 400px;
			z-index: 2;
		}

	}

	@media (max-width: 400px) {

		.logo-nom{
			display: none;
		}

		#hero .content .left .titre{
			width: 80%;
			font-size: 40px;
			line-height : 42px;
		}

		#hero .content .left .subtitle{
			width: 80%;
		}

		#hero .hero-bg .bg-cyan{
			width: 300px;
		}

		#hero .hero-bg .bg-blanc-2{
			width: 300px;
		}
	}

	@media (max-width: 300px) {
		#hero .hero-bg .bg-cyan{
			width: 200px;
		}

		#hero .hero-bg .bg-blanc-2{
			width: 200px;
		}
	}

/*témoignage*/
	#temoignage main .content{
		background-color: #F8FAFC;
		border-radius: 16px;
		box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.1);
		padding: 10px;
	}

	#temoignage main .text{
		font-size: 16px;
	}

	#temoignage main .name{
		font-weight: 800;
		padding-bottom: 3px;
		border-bottom: 3px solid rgba(0, 204, 255, 0.2);
		width: fit-content;
	}

	.justify-center{
		display: flex;
		justify-content: center;
	}

	.justify-end{
		display: flex;
		justify-content: flex-end;
	}

	.col-center{
		display: flex;
    	flex-direction: column;
    	align-content: center;
    	flex-wrap: wrap;
	}

	.col-end{
		display: flex;
    	flex-direction: column;
    	justify-content: flex-end;
    	flex-wrap: wrap;
    	padding-bottom: 0;
	}

	.arrow-2 {
	margin-left: 10px;
	height: 30px;
	width: 30px;
	}

/*pourquoi moi*/

	#why{
		background-color: #F8FAFC;
	}

	#why .col-img{
		display: flex;
		justify-content: flex-end;
	}

	#why .img-container{
		height: 64px;
		width: 64px;
		border-radius: 32px;
		background-color: white;
		filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1));
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#why .antho-container {
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    padding: 50px 50px 0 50px;
	    overflow: visible;
	}


	#why .blur-bg {
	    position: absolute;
	    width: 500px;
	    height: 80%;
	    background: linear-gradient(45deg, rgba(0, 204, 255, 0.4) 0%, rgba(23, 27, 44, 0.6) 53%);
	    filter: blur(64px);
	    z-index: 1;
	    border-radius: 50%;
	}

	@media (max-width: 767px) {

		#why .col-img{
			justify-content: center;
			margin-bottom: 10px;
		}

		#why .ligne{
			margin-top: 20px;
		}
	}

	@media (max-width: 600px) {
		#why .blur-bg{
			width: 450px;
		}
	}

	@media (max-width: 400px) {
		#why .blur-bg{
			width: 300px;
		}
	}
	
	
	#why .antho-container img {
	    position: relative; 
	    z-index: 2; 
	    max-width: 100%;
	}

	#why .titre{
		font-weight: 800;
		font-size: 24px;
		color: #0F172A;
		max-width: 400px;
	}

	#why .content{
		font-size: 16px;
		color: #64748B;
		max-width: 400px;
	}

/*pack*/

	#pack .card{
		border: none;
		background-color: #F8FAFC;
		border-radius: 16px;
		padding: 20px;
		height: 480px;
		max-width: 356px;
		width: 356px;
		display: flex;
		justify-content: space-between;
	}

	#pack .titre{
		color: #1E293B;
		font-weight: 600;
		font-size: 30px;
	}

	#pack .description{
		color: #64748B;
		font-size: 14px;
	}

	#pack ul{
		padding: 0;
	}

	#pack li {
	    list-style: none;
	    position: relative;
	    padding-left: 20px;
	}
	
	#pack li::before {
	    content: "";
	    position: absolute;
	    left: 0;
	    top: 50%;
	    transform: translateY(-50%);
	    width: 15px; 
	    height: 15px;
	    background-image: url('../img/check.svg');
	    background-size: contain;
	    background-repeat: no-repeat;
	}

	#pack footer{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#pack .price{
		font-weight: 700;
		font-size: 48px;
		margin-bottom: -5px;
		color: #1E293B;
	}


	#pack .price sup{
		font-weight: 100;
		font-size: 20px;
		top: -1.3em;
	}

	#pack a{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		padding: 10px 20px 10px 20px;
		border: 1px solid #E2E8F0;
		border-radius: 50px;
		background-color: #fff;
		color: #1E293B;
		text-decoration: none;
		font-weight: 600;
		transition: 0.2s;
	}

	#pack a:hover{
		background-color: #1E293B;
		color: white;
		transition: 0.2s;
	}

	#pack .card-center{
		background-color: #171B2C;
		height: 520px;
		padding-top: 40px;
		padding-bottom: 40px;
		color: white!important;
		position: relative;
	}

	#pack .card-center::before {
	    content: "Le plus choisi par les associations";
	    position: absolute;
	    top: 0;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    background-color: #00D0FF;
	    color: #171B2C;
	    padding: 2px 20px;
	    border-radius: 50px;
	    font-size: 14px;
	    font-weight: 500;
	    white-space: nowrap;
	    z-index: 10;
	}

	#pack .card-center p{
		color: white!important;
	}

	#pack .card-center a{
		color: #171B2C;
		background-color: #00D0FF;
		border: 1px solid rgba(0, 0, 0, 0)
	}

	#pack .card-center a:hover{
		color: #171B2C;
		background-color: #fff;
		transition: 0.2s;
	}

	@media (max-width: 991px) {
		#pack .card-center{
			margin-left: 20px;
		}

		#pack .card-start{
			margin-right: 20px;
		}
	}

	@media (max-width: 767px) {
		#pack .card-center{
			margin-left: 0px;
		}

		#pack .card-start{
			margin-right: 0px;
		}
	}

/*contact*/

	#contact{
		background-color: #F8FAFC;
	}

	
	#contact .btn{
		padding: 10px 20px;
		color: #171B2C;
		border-radius: 24px;
		font-size: 16px;
		font-weight: 600;
		width: 227px;
	}

	#contact .btn-1{
		background-color: #00CCFF;
	}

	#contact .btn-2{
		background-color: #fff;
		border: 1px solid #E2E8F0;
	}

	#contact .btn-container-1{
		display: flex;
		justify-content: flex-end;
	}

	#contact .btn-container-2{
		display: flex;
		justify-content: flex-start;
	}

	@media (max-width: 991px) {
		#contact .btn-container-1{
			justify-content: center;
		}
	
		#contact .btn-container-2{
			margin-top: 20px;
			justify-content: center;
		}
	}