@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --color-primary: rgb(26, 105, 26);
  --color-danger: #ff7782;
  --color-success: #41f1b6;
  --color-warning: #ffbb55;
  --color-white: #fff;
  --color-info: #7d8da1;
  --color-dark: #363949;
  --color-light: rgba(132, 139, 200, 0.18);
  --color-dark-varient: #677483;
  --color-background: #f6f6f9;
  
  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 1.2rem;

  --card-padding: 1.8rem;
  --box-shadow: 0 2rem 3rem var(--color-light)    
}

footer {
  background-color: rgb(53, 173, 53); /* Change this to the specific shade of green you want */
  width: 100%;
}
button {
  background-color: #4CAF50; /* Change to your preferred color */
  color: white; /* Change to your preferred color */
  padding: 10px 20px; /* Adjust padding as needed */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px; /* Adjust font size as needed */
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease; /* Add transition for smooth color change */
}

/*------------------------------------------NAVIGATION BAR------------------------------------*/
.topnav {
    z-index: 20;
    display: flex;
    justify-content: center;
    background-color: var(--color-primary);
    padding: 2px 140px 3px 70px;
    border-bottom: 1px solid rgb(219, 219, 219);
    top:0%;
    width:100%;
    height: 70px;
    position: fixed;/* Set the navbar to fixed position */
}
.topnav a img {
    width: 50px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
}
.fa-angle-down {
  color: white; /* down arrow angle in navbar */
}
  /* Style the links inside the navigation bar */
  .topnav a{
    float: left;
    display: block;
    color: rgba(255, 255, 255, 0.808);
    text-align: center;
    padding: 14px 16px;
    text-decoration:none;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: bold;
    margin:auto;
  }
  .topnav button:hover {
    background-color: #45a049; /* Change to your preferred hover color */
    color: white; /* Change to your preferred hover color */
}
  
  .logo
  {
    color:rgb(0, 199, 199);
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: rgb(40, 139, 55);
    color: rgba(0, 0, 0, 0.808);
    max-width: 100%; /* Ensure the width does not exceed the parent's width */
    max-height: 100%; /* Ensure the height does not exceed the parent's height */
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    font-size: 25px;
    font-weight: 900 ;
  }

  .topnav a.active:hover{
      background-color: white;
  }
  /* CONTACT */
  .topnav .main
  {
      color:rgb(255, 255, 255);
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  /* theme toggler */
  .topnav .theme-toggler{
    background: var(--color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3rem;
    width: 5.2rem;
    cursor: pointer;
    border-radius: var(--border-radius-1);
    margin-right: 2rem;
    margin-left: auto;
    /* padding: 0 1rem; Add padding for spacing     */
  }

  .topnav .theme-toggler span{
    font-size: 1.2rem;
    width: 3rem; /* Adjust width */
    height: 2rem; /* Adjust height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .topnav .theme-toggler span.active{
    background-color: var(--color-primary);
    color: white;
    border-radius: var(--border-radius-1);
  }
  
  .dark-theme{
    --color-background: #181a1e;
    --color-white: #202528;
    --color-dark: #edeffd;
    --color-dark-varient: #a3bdcc;
    --color-light: rgba(0,0,0,0.4);
    --box-shadow: 0 2rem 3rem var(--color-light)
  }
  /* Add transition for smooth sliding animation */
/* Add transition for smooth sliding animation */
/*  */

    /*--------------------------------------*/
  /* The dropdown container */
  /* In your CSS, you're targeting .dropdown:hover .dropdown-content, but you don't have a direct .dropdown class inside these buttons. Instead, you have a div with a class of .dropdown wrapping around the button and the dropdown content.
To fix this, you need to adjust your CSS selectors to target the correct elements. */
  .dropdown {
    position: relative;
    display: inline-block;
    /* float: right;
    overflow: hidden; */
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.808);
    text-align: center;
    padding: 24px 16px;
    border: none;
    outline: none;
    background-color:inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    font-family: sans-serif;
    font-weight: bold;
    margin:auto;
  }
  
  /* Add a blue background color to navbar links on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    /* background-color: rgb(108, 233, 233); */
    background-color: rgb(40, 139, 55);

  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%; /* Position dropdown below the button */
    left: 0;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    /* float: none; */
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: lighter;
    width: 100%; /* Full width on links */
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  /*---------------------------------------------------*/
  /*media queries*/
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    header .theme-toggler{margin: 0;}
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

.container-fluid.main{
    position: relative; /* To make the navbar positions relative to this container */
    padding: 0;
  }

  .container {
    text-align: center;
    margin-top: 80px; /* gives space bw navbar and carousel */
    margin-bottom: 5px;
    font-family:  Arial, Helvetica, sans-serif;
    font-weight: 900;
    color:rgb(26, 105, 26);
  }
  
  .container h1{
    font-weight: 550;
  }
  .container p{
    font-weight: normal;
  }
  li {
    text-align: justify; /* Make the text justified */
    font-weight: normal; /* Make the text normal weight */
}
  .container2 {
    text-align: center;
    margin-top: 20px; /* gives space bw container and carousel */
    margin-bottom: 0;
    /* margin-left: 4px; */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    color: rgb(26, 105, 26);
    display: flex; /* Use flexbox to display boxes side by side */
    justify-content: space-between; /* Add space between the boxes */
    padding: 0 20px; /* Add 20px of padding to the left and right, (the first value is the top and bottom padding, and the second value is the left and right padding).  */
    padding-bottom: 0; /* Remove the bottom padding */
  }
  .container2 p, ul{
    color: black;
  }
  
  .box {
    border: 2px solid #000; /* Box outline */
    padding: 20px; /* Add padding inside the box */
    width: calc(50% - 20px); /* Set box width to 50% of the container width with some spacing */
  }
  
  .box h2 {
    margin-top: 1px;
    margin-bottom: 10px; /* Add margin below the title */
    font-weight: 500;
  }
  
  .box .content {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
  }
  
  .box .content img {
    width: 100px; /* Adjust image width */
    /* margin-top: 5px; */
    float: left; /* Float the image to the left */
    margin-right: 20px; /* Add margin to the right of the image */
    margin-bottom: 20px; /* Add margin to the bottom of the image */
  }
  
  .box .content p {
    margin: 0; /* Reset margin */
    font-weight: normal;
    text-align: justify;
  }

  .carousel .background {
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 400px;
    /* width: 700px; */
  }
  
  @media (max-width:991px) {
    .carousel .background {
      background-size: cover; /* To make the background image looks good */
    }
  }
  
  .carousel .background.a {
    background-image:  url("assets/igdtuw_cover.jpg");
  }
  
  .carousel .background.b {
    background-image:  url("assets/3.jpeg");
  }
  
  .carousel .background.c {
    background-image:  url("assets/7.jpeg");
  }
  .carousel .background.d {
    background-image: url("assets/AIST-2023.jpeg");
  }
  .carousel .background.e {
    background-image:  url("assets/ITR\ 2023.jpg");
  }
  .carousel .background.f {
    background-image:  url("assets/sliderImage4s.png");
  }
  .carousel .background.g {
    background-image:  url("assets/website\ banners\ IGDTUW.jpeg");
  }
  .carousel .background.h {
    background-image:  url("assets/Women\ Entrepreneurship.jpeg");
  }
  .carousel .background.i {
    background-image:  url("assets/WhatsApp\ Image\ 2023-11-10\ at\ 12.42.20\ PM.jpeg");
  }
  
  .carousel-fade .carousel-inner .item {
    opacity: 0;
    transition: opacity 0.5s; /* The 0.5s describes the duration to make the opacity from 0 to 1 */
  }
  
  .carousel-fade .carousel-inner .active {
    opacity: 1;
  }
  
  /* CSS Hack to trigger GPU for smooth transition */
  @media all and (transform-3d),
  (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  /* CSS Hack to trigger GPU for smooth transition */
  
  .covertext {
    position: absolute; /* To make the div to be place anywhere. It is out of the document flow */
    top: 200px; /* The distance between the div with the top of document */
    left: 0px; /* Make the div full width */
    right: 0px; /* Make the div full width */
  }
  
  .title {
    font-family: Verdana;
    font-weight: 600;
    font-size: 60px;
    color: #ffffff;
    text-align: center;
  }
  
  .subtitle {
    font-family: Verdana;
    font-size: 23px;
    color: #ffffff;
    text-align: center;
  }
  
  .explore {
    text-align: center;
    margin-top: 10px;
  }
  
  .explore .btn-lg,
  .explore .btn-lg:hover {
    border-radius: 30px;
    padding: 15px 25px;
    font-size: 22px;
    background-image: none;
    background-color: #FF4000;
    border-color: #FF4000;
    color: #ffffff;
  }
  
  .btn,
  .btn:hover {
    border-radius: 0px;
    background-image: none;
    background-color: #FF4000;
    border-color: #FF4000;
    color: #ffffff;
    margin-bottom: 20px;
    box-shadow: none;
    outline: none;
  }
  
  .btn:focus,
  .btn:active:focus,
  .btn.active:focus,
  .btn.focus,
  .btn:active.focus,
  .btn.active.focus {
    color: #ffffff;
    outline: none;
  }

  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Roboto:wght@300;400;500;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

main {
  position: relative;
  width: calc(min(90rem, 90%));
  padding-top: 0;
  margin: 0 auto;
  margin-top: -10; 
  min-height: 100vh;
  column-gap: 3rem;
  padding-block: min(20vh, 3rem);
}

.bg {
  position: fixed;
  top: -4rem;
  left: -12rem;
  z-index: -1;
  opacity: 0;
}

.bg2 {
  position: fixed;
  bottom: -2rem;
  right: -3rem;
  z-index: -1;
  width: 9.375rem;
  opacity: 0;
}

main > div span {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  color: #717171;
}

main > div h1 {
  text-transform: capitalize;
  letter-spacing: 0.8px;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: clamp(3.4375rem, 3.25rem + 0.75vw, 4rem);
  background-color: #005baa;
  background-image: linear-gradient(45deg, #005baa, #000000);
  background-size: 100%;
  background-repeat: repeat;
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

main > div hr {
  display: block;
  background: #005baa;
  height: 0.25rem;
  width: 6.25rem;
  border: none;
  margin: 1.125rem 0 1.875rem 0;
}

main > div p {
  line-height: 1.6;
}

main a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #717171;
  font-weight: 500;
  background: #fff;
  border-radius: 3.125rem;
  transition: 0.3s ease-in-out;
}

main > div > a {
  border: 2px solid #c2c2c2;
  margin-top: 2.188rem;
  padding: 0.625rem 1.875rem;
}

main > div > a:hover {
  border: 0.125rem solid #005baa;
  color: #005baa;
}

.swiper {
  width: 100%;
  padding-top: 3.125rem;
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination {
  bottom: 1.25rem !important;
}

.swiper-slide {
  width: 65rem !important;
  height: 45rem !important;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: self-start;
}

.swiper-slide h2 {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 0.625rem;
  padding: 0 0 0 1.563rem;
  text-transform: uppercase;
}

.swiper-slide p {
  color: #dadada;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  padding: 0 1.563rem;
  line-height: 1.6;
  font-size: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swiper-slide a {
  margin: 1.25rem 1.563rem 3.438rem 1.563rem;
  padding: 0.438em 1.875rem;
  font-size: 0.9rem;
}

.swiper-slide a:hover {
  color: #005baa;
}

.swiper-slide div {
  display: none;
  opacity: 0;
  padding-bottom: 0.625rem;
}

.swiper-slide-active div {
  display: block;
  opacity: 1;
}

.swiper-slide--one {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("./assets/awards/a3.jpg")
      no-repeat 50% 50% / cover;
}

.swiper-slide--two {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("./assets/awards/ficci.png")
      no-repeat 50% 50% / cover;
}

.swiper-slide--three {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("./assets/awards/nptel2024.jpg")
      no-repeat 50% 50% / cover;
}

.swiper-slide--four {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("./assets/awards/ssa-min.jpg")
      no-repeat 50% 50% / cover;
}

.swiper-slide--five {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("./assets/awards/wuri2022.png")
      no-repeat 50% 50% / cover;
}

.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
  background-image: none;
}

@media screen and (min-width: 48rem) {
  main {
    display: flex;
    align-items: center;
  }
  .bg,
  .bg2 {
    opacity: 0.1;
  }
}

@media screen and (min-width: 93.75rem) {
  .swiper {
    width: 85%;
  }
}