body{margin:0; padding:0; overflow-x:hidden ;}
*{font-size: var(--font-medium);  }
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-thumb{border-radius: 20px; background: linear-gradient(var(--primary-col),var(--secondary-col));}

.banner{height: 95vh;}
.banner-inner{height: inherit;}
.banner-inner > div{height: inherit; }
.banner-txt{width: 400px; padding: 40px; background-color: rgba(0, 0, 0, 0.672); color: white; border-radius: 30px; border: 1px solid white;
margin-left: 50%; margin-top: 100px; transform: translate(-50%,0);}
.banner-txt h4{font-size: var(--font-huge); font-weight: bold;}

.single-banner{display: flex; justify-content: center; align-items: center;}

.section1{display: flex; justify-content: center; align-items: center;
gap: 20px; background: linear-gradient(40deg,var(--primary-col),var(--secondary-col)); padding: 40px;}
.section1-sub{text-align: center;}
.section1-sub h2{font-weight: bold;}



.section4{padding: 40px; display: flex; justify-content: center; align-items: center;}
.section4 > div{width: 400px; text-align: center;}

.newsletter{
    background-color: var(--primary-col); display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 60px;
}
.newsletter-section-container{
    display: flex; justify-content: center; align-items: center; gap: 50px;
}
.newsletter-section{
    border: 2px solid black; padding: 20px; border-bottom: 5px solid black;
    h1{font-size: var(--font-huge); font-weight: bold;};
}



.section5{
    background-color: rgb(36, 36, 36); display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; color: white; padding: 60px;
}
.section5-inputs{display: flex; gap: 20px;}
.section5-inputs input{border: none; outline: none; padding: 10px;}
.section5-inputs textarea{border: none; outline: none; width: 330px; resize: none; height: 100px;}

.card-container{display: flex; justify-content: center; align-items: center;
padding: 50px; gap: 30px;}
.card-box{position: relative; width: 350px; border-radius: 20px; overflow: hidden; padding: 20px; color: white; background-color: black;}
.card-box img{width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
.card-box-txt{ width: calc(100% - 40px); margin-left: 20px; box-shadow: 0 0 6px rgb(198, 198, 198);
padding: 10px; transform: translate(0,-50px); text-align: center;}