@import url('https://fonts.googleapis.com/css2?family=Bokor&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
        
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }

.go-top{
position:fixed;
bottom:0;
right: 0;
height: 40px;
margin: 10px;
}
body.dark-mode{
   background-color: rgb(32, 32, 32);
}
.advanture-bg{
background-image: url("../images/adventure_activities/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.advanture-text{
margin-top: 50px;
padding: 30px;
font-size: 50px;
color: rgb(32, 32, 32);
background-color: rgba(226, 222, 222, 0.7);
border-radius: 10px;
font-weight: 700;
}
.advisors-section{
   width: 100%;
  
}

.advisors-heading{
   padding: 0px 150px;
   margin-top: 50px;
   font-size: 60px;
   font-family: "Merriweather", serif;
   font-weight: bolder;
}
.advisors-para{
   margin-top: 15px;
   font-size: 20px;
   padding: 0px 150px;
   font-family: "Montserrat", sans-serif;
}

/* Media Queries for heading and para */

/* For tablets and smaller devices */
@media screen and (max-width: 768px) {
.advisors-heading {
padding: 0px 30px; /* Reduce padding for tablets */
margin-top: 150px; /* Reduce top margin for tablets */
font-size: 40px; /* Reduce font size for better fit on tablets */
}

.advisors-para {
padding: 0px 30px; /* Reduce padding for tablets */
font-size: 18px; /* Slightly smaller font size for paragraph */
}
}

/* For mobile devices */
@media screen and (max-width: 480px) {
.advisors-heading {
padding: 0px 20px; /* Further reduce padding for mobile */
margin-top: 100px; /* Adjust margin to avoid too much space */
font-size: 30px; /* Reduce font size for mobile */
text-align: center; /* Center align the heading for mobile */
}

.advisors-para {
padding: 0px 20px; /* Further reduce padding for mobile */
font-size: 16px; /* Further reduce font size for mobile */
text-align: center; /* Center align the paragraph for mobile */
}
}


/*card using java script*/         

.card-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
}
.card {
   height: 500px;
   width: 400px;
   text-align: center;
   margin-right: 20px;
   padding: 10px 20px;
   
   
   }
.card img {
   height: 350px;
  width: 350px;
 border-radius: 20px;
cursor: pointer;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.card img:hover {
   transform: scale(1.05); 
box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 16px; /* Stronger shadow effect on hover */
}
.card h3 {
   margin-top: 10px;
   text-align: left;
   font-size: 30px;
   cursor: pointer;
   transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

.card p {
   text-align: left;
   font-size: 18px;
   color: rgb(109, 107, 107);
   cursor: pointer;
   
}
/*card finish */


/* Media Queries */

/* For tablets and smaller devices */
@media screen and (max-width: 768px) {
.card {
width: 300px; /* Reduce card width for tablet-sized screens */
height: 400px; /* Reduce card height */
margin-right: 20px; /* Less margin between cards */
}
.card img {
width: 300px; /* Reduce image size */
height: 250px; /* Adjust image height */
}
.card h3 {
font-size: 24px; /* Slightly smaller title */
}
.card p {
font-size: 18px; /* Slightly smaller description */
}
}

/* For mobile devices */
@media screen and (max-width: 480px) {
.card {
width: 100%; /* Cards take full width of the container */
height: auto; /* Let height adjust automatically */
margin-right: 10px; /* No margin between stacked cards */
margin-bottom: 20px; /* Add some space between stacked cards */
}
.card img {
width: 100%; /* Make image responsive, full width of the card */
height: auto; /* Let height adjust based on image aspect ratio */
border-radius: 10px; /* Optional: reduce border radius for mobile */
}
.card h3 {
font-size: 25px; /* Smaller title for mobile */
}
.card p {
font-size: 20px; /* Smaller description for mobile */
}
}