*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    box-sizing: border-box;
}
 
 :root{
    --color-primary: #11009E;
    --color-success: #00bf8e;
    --color-warning: #F9F54B;
    --color-danger: red;
    --color-danger-variant: #7E1717;
    --color-white:#fff;
    --color-light: #79E0EE;
    --color-black:#000;
    --color-bg: #13005A;
   
    --color-bg1: #1D267D;
    --color-bg2:#241468;

    --container-width-lg: 80%;
    --container-width-md: 90%;
    --container-width-sm: 94%;

    --transition: all 400ms ease;


 }

 body{
   font-family: 'Roboto Slab', serif;
   line-height: 1.7;
   color: var(--color-white);
   background: var(--color-bg);

 }
 .container {
    width: var(--container-width-lg);
    margin: 0 auto;

 }

 section{
    padding: 6rem 0;
 }

 section h2 {
    text-align: center;
    margin-bottom: 4rem;
 }

 h1,h2,h3,h4,h5 {
    line-height: 1.2;
 }
 h1{
    font-size: 2.4rem;
 }
 h2{
    font-size: 2rem;
 }
 h3{
    font-size: 1.8rem;
 }
 h4{
    font-size: 1.3rem;
 }

 a{
    color: var(--color-white);
    text-decoration: none;
    
 }
 ul{
   list-style: none;
 }
 img{
    width: 100%;
    display: block;
    object-fit: cover;
 }
 .btn{
    display: inline-block;
    background: var(--color-white);
    color: var(--color-black);
    padding: 1rem 2rem;
    border: 1px solid transparent;
    font-weight: 500;
    transition: var(--transition);
 }
 .btn:hover{
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
 }
 .btn-primary{
    background: var(--color-danger);
    color: var(--color-white);
 }

 /*=========NAV BAR======*/
 nav{
    background:  rgba(130, 205, 71, 0.8);
    width: 100vw;
    height: 3.5em;
    position: fixed;
    top: 0;
    z-index: 11;
    justify-content: space-between;
 }
 /* cahanging navbar style on scrolling*/
 .window-scroll{
   background: var(--color-light);
   box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
 }

 .nav_container{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 nav button{
    display: none;
 }
 .nav_menu{
    display: flex;
    align-items: center;
    gap: 4rem;

 }
 .nav_menu a {
    font-size: 0.9rem;
 }
 .nav_menu a:hover{
    color: var(--color-bg2);
    transition: var(--transition);
 }

#logo{
    width : 1.7rem;
  
}
.logoName{
    display: flex;
    align-items: center;
}
.logoName img {
    margin-right: 10px; /* Adjust the spacing between the logo and the text */
    border : 0.2rem solid;
    border-color: #000; 
    border-radius: 50%;
  }
 /*=========HEADER=====*/
 header{
   position: relative;
   top: 5rem;
   overflow: hidden;
   margin-bottom: 5rem;
   height: 70vh;

 }
 .header-right-img{
   height: fit-content;
  
 }
 .header_container{
   display: grid;
   grid-template-columns: 1fr 1fr; /*fr: fraction*/
   align-items: center;
   gap: 5rem;
 }
 .header_left p{
   margin: 1rem 0 2.4rem;
 }
 
/* Tools Section */

.tools-section {
   text-align: center;
   margin: 0;
 
   background: var(--color-bg);
   height: 150px;
 
}

.tools-title {
   padding: 10px;

   font-size: 24px;
   font-weight: bold;
}

.icon-container {
   margin-top: 20px;
   display: flex; /* Use flexbox to create a horizontal layout */
   justify-content: center;
  
   
}

.icon-link {
   display: inline-block;
   margin: 0 20px;
}

.circle-icon {
   margin-top: 3rem;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   /* Replace with desired background color */
   background: var(--color-bg1);
   display: flex;
   align-items: center;
   justify-content: center;
}
.circle-icon:hover{
   background: transparent;
   border-color: var(--color-primary);

}
.icon-wrapper {
   display: flex; /* Use flexbox to create a horizontal layout */
   flex-direction: column;
   align-items: center;
   margin: 0 150px;
}

.icon-caption {
   margin-top: 5px;
   font-size: 14px;
   font-weight: bold;
}

/* Add additional CSS to style your circular icons, like icon color, font-size, etc. */


.activity{
   margin-top: 10rem;
   margin-left: 2rem;
   margin-right: 2rem;

}

.activity_container{
   display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 2rem;
}
.activity_element{
   background: var(--color-bg1);
   text-align: center;
   border: 1px solid transparent;
   transition: var(--transition);
   flex-direction: column; /* Stack image and info vertically */
   align-items: center; /* Center items horizontally */
   justify-content: center; /* Center items vertically */
   
}
.activity_element:hover{
   background: transparent;
   border-color: var(--color-primary);
}
.activity_info{
   padding: 2rem;
}
.activity_info p{
   margin: 1.2rem 0 2rem;
   font-size: 0.9rem;
}
.activity_image{
   margin-bottom: 1rem;
   /* Set fixed width and height for the images */
   margin-top: 2rem;
   width: 200px;
   height: 200px;
   object-fit: cover; /* Maintain aspect ratio and fill the container */
   margin-left: auto;
   margin-right: auto;
 
}










 /*=====================carousel=================*/
 .gallery-title {
   padding-top: 50px;
   padding-bottom: 20px;
    text-align: center;
    margin: 20px 0;
    position: relative; /* Add relative positioning to the gallery-title div */
 
  }
  
  .horizontal-rule {
    position: absolute; /* Use absolute positioning to place the horizontal rules */
    width: 25%;
    height: 10px; /* Increase the height for a bolder look */
    background: #fff; /* Gradient background with orange to yellow colors */
    border: none;
    top: 50%; /* Vertically center the horizontal rules relative to the gallery-title */
    transform: translateY(-50%); /* Adjust for vertical centering */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
    border-radius: 5px; /* Add rounded corners */
  }
  
  .left {
    left: 5%; /* Position the left horizontal rule 5% from the left side */
  }
  .right {
    right: 5%; /* Position the right horizontal rule 5% from the right side */
  }
 .carousel-container {
   /* Set the positioning and dimensions for the container */
   position: relative; /* Required for positioning the carousel controls */
   margin-top: 0;
   width: 100%; /* Adjust as needed */
   height: auto; /* Adjust as needed */
   transition: 20s;
   padding: 0;
  
   background: var(--color-bg);
  
 }
 
/* Custom CSS for the carousel images */
.carousel-inner img {
   width: 100%; /* Set the desired width */
   height: 500px; /* Set the desired height */
   object-fit: cover; /* Maintain aspect ratio and fill the container */
   display: block;
   margin: 0 auto; /* Center the images horizontally */
   border-radius: 15px; /* Adjust the value as needed to control the amount of rounding */
 }
 .carousel-item{
   height: 500px;
   margin-bottom: 20px;
 }
 .tools-section, .carousel-container {
   box-sizing: border-box;
 }

 footer {
   background: var(--color-bg1);
   padding-top: 5rem;
   font-size: 0.9rem;
   display: flex;
  justify-content: center; /* Center align the footer content horizontally */
  flex-wrap: wrap; /* Allow elements to wrap to new lines if needed */
  

   
   
 }
 
 .footer_container {
   display: flex;
   grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
   justify-content: center;
   gap: 20rem; /* Adjust the gap as needed */
   /* Center align the items horizontally */
   flex: 1; 

  
 }
 
 .footer1,
 .footer2,
 .footer3 {
   /* Style each individual footer element as needed */
   
   color: var(--color-white);
   
 }
 
 .footer_socials {
   list-style: none;
   padding: 0;
   display: flex;
   gap: 0.7rem;
   text-align: center;
 }
 .footer2 h5{
   text-align: center;
 }
 
 
 .footer_socials a {
   color: var(--color-white);
   font-size: 1.5rem;
 }
 
 .footer_socials a:hover {
   color: var(--color-primary); /* Change to the desired hover color */
 }
 footer li a:hover {
   text-decoration: underline;
 }
 .footer2 ul{
   padding: 0px;
   list-style: none;
   text-decoration: none;
   text-align: center;
   transition: var(--transition);

 }
 .footer2  li :hover{
   text-decoration: underline;
 }
 .footer1 p{
   
   font-size: 0.9rem;
 }

 @media screen and (max-width: 1024px) {
   .container{
      width: var(--container-width-md);
   }
   h1{
      font-size: 2.2rem;
   }
   h2{
      font-size: 1.7rem;
   }
   h3{
      font-size: 1.4rem;
   }
   h4{
      font-size: 1.2rem;
   }
   h5{
      font-size: 1rem;
   }
   nav button{
      display: inline-block;
      background: transparent;
      font-size: 1.8rem;
      color: var(--color-white);
      cursor: pointer;
   }
   nav button#close_menu_btn{
      display: none;
   }
   .nav_menu{
      position: relative;
      top: 11rem;
      right: 1%;
      height: fit-content;
      width: 18rem;
      flex-direction: column;
      gap: 0;
      display: none;
   }
   .nav_menu li{
      width: 100%;
      height: 5.8rem;
      list-style: none;
      animation: animateNavItems 400ms linear forwards;
      transform-origin: top right ;
      opacity: 0;
   }
   .nav_menu li:nth-child(2){
      animation-delay: 200ms ;
   }
   .nav_menu li:nth-child(3){
      animation-delay: 400ms;
   }
   .nav_menu li:nth-child(4){
      animation-delay: 600ms;
   }
   @keyframes animateNavItems {
      0% {
         transform: rotateZ(-90deg);
      }
      100%{
         transform: rotateZ(0);
         opacity: 1;
      }
   }
   .nav_menu li a{
      background: var(--color-primary);
      box-shadow: -4rem 6rem 10rem rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;

   }
   .nav_menu li a:hover{
      background: var(--color-bg2);
      color: var(--color-white);

   }
   /*=============HEADER============*/
   header{
      height: auto;
      margin-bottom: 4rem;
   }
   .header_container{
      gap: 0;
      padding-bottom: 3rem;
   }
   /*=============TOOLS============*/
   .tools-section {
      height: 150px;
      padding: 20px; /* Add some padding to create space around the content */
   }

   .tools-title {
      font-size: 20px; /* Decrease the font size for mobile view */
   }

   .icon-container {
      margin-top: 10px; /* Reduce the margin for mobile view */
      gap: 3rem;
   }

   .icon-link {
      margin: 0 10px; /* Reduce the margin between icon links for mobile view */
   }

   .circle-icon {
      margin-top: 1.5rem; /* Reduce the margin for mobile view */
      width: 100px; /* Decrease the width for mobile view */
      height: 100px; /* Decrease the height for mobile view */
   }

   .icon-wrapper {
      flex-direction: row; /* Change to a vertical layout for mobile view */
      margin: 0; /* Remove the margin for mobile view */
   }

   .icon-caption {
      margin-top: 2px; /* Reduce the margin for mobile view */
   }
   .gallery-title {
      padding-top: 30px; /* Reduce the top padding for mobile view */
      padding-bottom: 10px; /* Reduce the bottom padding for mobile view */
   }

   .horizontal-rule {
      display: none; /* Hide the horizontal rules for mobile view */
   }

   .carousel-container {
      /* Adjust container styles for mobile view */
      margin-top: 10px; /* Reduce the top margin for mobile view */
      width: 100%; /* Full width for mobile view */
      height: auto; /* Auto height to fit content for mobile view */
      padding: 10px; /* Add some padding for mobile view */
   }

   /* Custom CSS for the carousel images in mobile view */
   .carousel-inner img {
      /* Adjust image styles for mobile view */
      height: 300px; /* Reduce the height for mobile view */
      border-radius: 10px; /* Adjust the value as needed for mobile view */
   }

   .carousel-item {
      /* Adjust carousel item styles for mobile view */
      height: 300px; /* Reduce the height for mobile view */
      margin-bottom: 10px; /* Reduce the margin for mobile view */
   }
   footer {
      /* Adjust footer styles for mobile view */
      padding-top: 3rem; /* Reduce the top padding for mobile view */
   }

   .footer_container {
      /* Adjust container styles for mobile view */
      display: flex;
      flex-direction: row; /* Change to a vertical layout for mobile view */
      align-items: center; /* Center align the items horizontally for mobile view */
      gap: 2rem; /* Adjust the gap between elements for mobile view */
   }

   .footer2 ul {
      /* Adjust list styles for mobile view */
      text-align: left; /* Center align the list items for mobile view */
   }

   .footer2 li {
      /* Adjust list item styles for mobile view */
      margin: 5px 0; /* Add some spacing between list items for mobile view */
   }

   .footer1 p {
      /* Adjust paragraph styles for mobile view */
      font-size: 0.8rem; /* Reduce the font size for mobile view */
      text-align: left; /* Center align the text for mobile view */
   }

 }
 /*=========Media Query for phone==========*/
 @media screen and (max-width: 600px){
   .container{
      width: var(--container-width-sm);

   }
   .nav_menu{
      right: 2%;
   }
   header{
      height: 100vh;
   }
   .header_container{
      grid-template-columns: 1fr;
      text-align: center;
      margin-top: 0;

   }
   .header_left p{
      margin-bottom: 1.3rem;

   }
   .header-right-img{
      margin-top: 4rem;
      width: 100%;
      justify-content: center;
   }

   .activity {
      /* Adjust margin-top for mobile view */
      margin-top: 5rem;
   }

   .activity_container {
      /* Adjust grid and gap for mobile view */
      grid-template-columns: 1fr; /* Change to a single column layout for mobile view */
      gap: 1.5rem; /* Reduce the gap for mobile view */
      margin-left: 1rem; /* Adjust left margin for mobile view */
      margin-right: 1rem; /* Adjust right margin for mobile view */
   }

   .activity_element {
      width: 100%;
      
      /* Adjust element styles for mobile view */
      flex-direction: row; /* Change to a horizontal layout for mobile view */
      align-items: flex-start; /* Align items to the top for mobile view */
      justify-content: flex-start; /* Align items to the left for mobile view */
   }

   .activity_info {
      /* Adjust info styles for mobile view */
      padding: 1rem; /* Reduce padding for mobile view */
      text-align: left; /* Align text to the left for mobile view */
   }

   .activity_info p {
      /* Adjust paragraph styles for mobile view */
      margin: 1rem 0; /* Reduce the margins for mobile view */
   }

   .activity_image {
      /* Adjust image styles for mobile view */
      width: 100%; /* Set the image width to 100% for mobile view */
      height: auto; /* Allow the image to adjust its height based on the width for mobile view */
      margin-top: 0; /* Remove the top margin for mobile view */
      margin-bottom: 1.5rem; /* Increase the bottom margin for mobile view */
   }

   /*====TOOLS===*/
   .tools-section {
      height: 150px;
      padding: 20px; /* Add some padding to create space around the content */
   }

   .tools-title {
      font-size: 20px; /* Decrease the font size for mobile view */
   }

   .icon-container {
      margin-top: 10px; /* Reduce the margin for mobile view */
      gap: 1rem;
   }

   .icon-link {
      margin: 0 10px; /* Reduce the margin between icon links for mobile view */
   }

   .circle-icon {
      margin-top: 1.5rem; /* Reduce the margin for mobile view */
      width: 70px; /* Decrease the width for mobile view */
      height: 70px; /* Decrease the height for mobile view */
   }

   .icon-wrapper {
      flex-direction: column; /* Change to a vertical layout for mobile view */
      margin: 0; /* Remove the margin for mobile view */
   }

   .icon-caption {
      margin-top: 2px; /* Reduce the margin for mobile view */
      justify-content: center;
   }
   .carousel-container {
      /* Adjust container styles for mobile view */
      margin-top: 0; /* Reduce the top margin for mobile view */
      width: 100%; /* Full width for mobile view */
      height: auto; /* Auto height to fit content for mobile view */
      padding: 10px; /* Add some padding for mobile view */
   }

   /* Custom CSS for the carousel images in mobile view */
   .carousel-inner img {
      /* Adjust image styles for mobile view */
      height: auto; /* Reduce the height for mobile view */
      border-radius: 10px; /* Adjust the value as needed for mobile view */
   }

   .carousel-item {
      /* Adjust carousel item styles for mobile view */
      height: auto; /* Reduce the height for mobile view */
      margin-bottom: 10px; /* Reduce the margin for mobile view */
   }

   footer {
      /* Adjust footer styles for mobile view */
      padding-top: 3rem; /* Reduce the top padding for mobile view */
      justify-content: center;
   }

   .footer_container {
      /* Adjust container styles for mobile view */
      display: flex;
      flex-direction: column; /* Change to a vertical layout for mobile view */
      align-items: center; /* Center align the items horizontally for mobile view */
      gap: 1.5rem; /* Adjust the gap between elements for mobile view */
   }
   .footer2 h5{
      text-align: center;
   }

   .footer2 ul {
      /* Adjust list styles for mobile view */
      text-align: left; /* Center align the list items for mobile view */
   }

   .footer2 li {
      /* Adjust list item styles for mobile view */
      margin: 5px 0; /* Add some spacing between list items for mobile view */
   }
   .footer1 h5 {
      text-align: center;
   }

   .footer1 p {
      /* Adjust paragraph styles for mobile view */
      font-size: 0.8rem; /* Reduce the font size for mobile view */
      text-align: center; /* Center align the text for mobile view */
   }

   
 }