.welcome-container {
position:relative;
height:100vh;
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:2rem;
background-color:var(--darker-gray);
text-align:center
}

.welcome-content {
display:flex;
align-items:center;
gap:2rem;
flex-wrap:wrap
}

.welcome-text h1 {
font-size:2rem;
color:#e0e0e0
}

.welcome-text p {
color:#fff
}

.separator {
width:1px;
height:100px;
background-color:#fff
}

.welcome-image img {
width:300px;
height:300px;
object-fit:cover
}

.button-wrap {
display:flex;
gap:1rem;
list-style:none
}

button {
font-size:1rem;
width:240px;
height:60px;
color:#e0e0e0;
cursor:pointer;
background-color:#353535;
border:1px solid var(--light-gray);
border-radius:50px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
transition:all .15s ease;
white-space:nowrap;
padding:0 20px
}

button p {
margin:0;
white-space:nowrap
}

button:hover {
background-color:var(--accent-color);
color:#fff;
border-color:#222
}

.init-container,.about-us-container,.activity-container {
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:#353535;
color:#e0e0e0;
padding:2rem
}

.init-main-body,.about-us-main-body,.activity-main-container {
display:flex;
flex-direction:column;
gap:3rem;
width:100%;
max-width:1200px;
align-items:center
}

.init-welcome-text h1 {
font-size:2.5rem;
text-align:center;
margin-bottom:1rem
}

.init-welcome-text p {
font-size:1.2rem;
text-align:center;
max-width:700px;
line-height:1.5;
color:#ddd
}

.carrousel ul {
display:flex;
gap:1.5rem;
flex-wrap:wrap;
justify-content:center;
list-style:none
}

.card {
background-color:var(--darker-gray);
width:250px;
height:200px;
border-radius:15px;
box-shadow:0 5px 15px #0000004d;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
transition:transform .3s ease,background-color .3s ease;
cursor:pointer;
padding:1rem;
gap:10px
}

.card p {
font-size:1.2rem;
color:var(--light-gray)
}

.card i {
font-size:2rem;
color:var(--light-gray)
}

.card:hover {
background-color:var(--accent-color);
transform:translateY(-5px)
}

.join-button {
width:400px
}

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

.meeting ul {
display:flex;
justify-content:center;
align-items:center;
gap:20px;
list-style:none
}

.profile-card {
position:relative;
width:200px;
height:200px;
border-radius:50%;
overflow:hidden;
transition:all .3s ease-in-out;
border:2px solid var(--darker-gray)
}

.profile-card img {
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
transition:opacity .3s ease-in-out
}

.profile-info {
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background-color:#000000b3;
opacity:0;
transition:opacity .3s ease-in-out
}

.profile-info h2 {
font-size:1rem;
color:var(--primary-color);
padding:5px
}

.profile-info p {
font-size:.7rem;
color:var(--primary-color);
padding:5px
}

.profile-card:hover .profile-info {
opacity:1
}

.profile-card:hover img {
opacity:0
}

.activities-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem;
padding:2rem 0;
width:100%
}

.activity-card {
background:#f9f9f9;
border-radius:1rem;
padding:2rem 1.5rem;
text-align:center;
transition:transform .25s ease,background-color .25s ease
}

.activity-card i {
font-size:2.8rem;
color:var(--primary-color);
margin-bottom:1.2rem
}

.activity-card h2 {
font-size:1.3rem;
font-weight:600;
margin-bottom:.8rem;
color:#222
}

.activity-card p {
font-size:1.1rem;
color:#555
}

.activity-card:hover {
transform:translateY(-6px);
background-color:var(--accent-color)
}

.activity-card:hover p {
color:#fff
}

@media (max-width: 1024px) {
.welcome-content {
flex-direction:column;
gap:1.5rem
}

.separator {
display:none
}

.welcome-image img {
width:250px;
height:250px
}

.meeting ul {
flex-wrap:wrap;
gap:30px
}
}

@media (max-width: 768px) {
.nav-links {
gap:15px;
font-size:.9rem
}

.welcome-text h1 {
font-size:1.8rem
}

.welcome-image img {
width:200px;
height:200px
}

.button-wrap {
flex-direction:column;
align-items:center
}

.button-wrap button {
width:280px;
min-width:280px;
max-width:280px
}

.card {
width:220px;
height:180px
}

.activities-grid {
grid-template-columns:1fr;
gap:1.5rem
}

.profile-card {
width:160px;
height:160px
}
}

@media (max-width: 600px) {
html,body {
overflow-x:hidden;
width:100%
}

.logo h1 {
font-size:1.5rem
}

.nav-container {
flex-direction:column;
gap:15px;
padding:15px 20px
}

.nav-links {
flex-direction:column;
width:100%;
gap:8px
}

.nav-links li {
width:100%;
text-align:center
}

.nav-links li a,.nav-links .btn-join {
display:block;
width:280px;
min-width:280px;
max-width:280px;
padding:12px 20px;
margin:0 auto;
background-color:#353535;
color:#fff;
border-radius:25px;
white-space:nowrap
}

.nav-links .btn-join {
background-color:var(--primary-color)
}

.nav-links li a:hover,.nav-links .btn-join:hover {
background-color:var(--accent-color)
}

.welcome-container {
padding:6rem 1.5rem 2rem;
gap:2rem
}

.welcome-text h1 {
font-size:2rem;
font-weight:700;
margin-bottom:.5rem
}

.welcome-text p {
font-size:1rem;
max-width:95%
}

.welcome-image img {
width:180px;
height:180px
}

.button-wrap {
flex-direction:column;
gap:1rem;
width:100%;
margin-top:1rem
}

.button-wrap button {
width:280px;
min-width:280px;
max-width:280px;
height:50px;
font-size:.95rem;
padding:0 15px
}

.join-button p {
font-size:.9rem;
margin:0;
white-space:normal;
line-height:1.3
}

.init-container,.about-us-container,.activity-container {
padding:4rem 1.5rem
}

.init-main-body,.about-us-main-body {
gap:2rem
}

.init-welcome-text h1,.meeting h1 {
font-size:1.8rem
}

.init-welcome-text p {
font-size:1rem;
max-width:100%
}

.carrousel ul {
flex-direction:column;
gap:1.2rem
}

.card {
width:90%;
max-width:300px;
height:auto;
min-height:180px;
padding:1.5rem;
margin:0 auto
}

.join-button {
width:90%;
max-width:300px;
height:55px;
margin:0 auto;
display:block;
font-size:.9rem;
padding:0 20px;
text-align:center
}

.meeting ul {
flex-direction:column;
gap:25px
}

.profile-card {
width:180px;
height:180px
}

.profile-info h2 {
font-size:1rem;
padding:8px
}

.profile-info p {
font-size:.8rem
}

.activities-grid {
grid-template-columns:1fr;
gap:1.5rem;
padding:1rem 0
}

.activity-card {
padding:2rem 1.5rem
}

.activity-card i {
font-size:2.5rem;
margin-bottom:1rem
}

.activity-card h2 {
font-size:1.2rem;
margin-bottom:.8rem
}

.activity-card p {
font-size:1rem
}

.footer-container {
padding:3rem 1.5rem
}

.footer-content {
flex-direction:column;
align-items:center;
gap:2.5rem;
text-align:center
}

.footer-section {
width:100%;
max-width:300px;
text-align:center
}

.logo-group {
display:flex;
flex-direction:column;
align-items:center;
gap:1rem
}

.logo-group img {
width:80px
}

.social-icons {
display:flex;
gap:15px;
justify-content:center;
margin-top:1rem
}
}

@media (max-width: 400px) {
.welcome-text h1 {
font-size:1.7rem
}

.welcome-text p {
font-size:.95rem
}

.welcome-image img {
width:150px;
height:150px
}

.button-wrap button {
width:260px;
min-width:260px;
max-width:260px;
height:48px;
font-size:.85rem;
padding:0 12px
}

.button-wrap button p {
font-size:.85rem
}

.init-welcome-text h1 {
font-size:1.6rem
}

.profile-card {
width:150px;
height:150px
}
}

@media (max-height: 500px) and (orientation: landscape) {
.welcome-container {
min-height:auto;
padding:8rem 2rem 3rem
}

.welcome-image img {
width:120px;
height:120px
}

.button-wrap {
flex-direction:row;
flex-wrap:wrap;
justify-content:center
}

.button-wrap button {
width:180px;
height:50px
}
}