/* General Reset */
:root {
  --primary-bg: #000080;
  --primary: #000;
  --clear: #ffffff;
  --secondary: black;
  --hover-color: darkgray;
    --background-color1: #fafaff;
    --background-color2: #ffffff;
    --background-color3: #ededed;
    --background-color4: #cad7fda4;
    --primary-color: #4b49ac;
    --secondary-color: #0c007d;
    --Border-color: #3f0097;
    --one-use-color: #3f0097;
    --two-use-color: #5500cb;
    --text-color1: black;
    --text-color2: white;
    --color1: black;
}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

  }

 .icn {
    height: 20px;
}

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

.searchbar input {
    width: 250px;
    height: 20px;
    border-radius: 50px 0 0 50px;
    background-color: var(--background-color3);
    padding: 0 20px;
    font-size: 15px;
    outline: none;
    border: none;
}

.searchbtn {
    width: 50px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 50px 50px 0px;
    background-color: var(--secondary-color);
    cursor: pointer;
}

.dp {
    height: 40px;
    width: 40px;
    background-color: #626262;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.dpicn {
    height: 42px;
}




  body {

    font-family: Arial, sans-serif;
    background-color: blue; /*var(--primary-bg);*/

  }

 

  .navbar {

     position: fixed;

    z-index: 999;

    width: 100%;
   
    border-bottom: 1px solid black;

    display: flex;

    justify-content: space-between;

    align-items: center;
    
    padding: 10px 20px;

    background-color: var(--primary-bg);

    color: var(--primary);


  }






 .nav-img {
    height: 25px;
    background-color: transparent;
}

.nav-text{
  display: none;
}

  .logo {

    font-size: 1.5em;

    font-weight: bold;

    display: none;

  }

 

  .nav-links {

    list-style: none;

    display: none;

    gap: 20px;

  }

 

  .nav-links li a {

    color: var(--text-color2);

    text-decoration: none;

    font-size: 1.1em;

    transition: color 0.3s;
    margin: 0px;

  }

 

  .nav-links li a:hover {

    color: var(--text-color1);
    

  }



  /* Burger Icon */

  .menu-icon {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 5px;

  }

 

  .menu-icon span {

    width: 25px;

    height: 3px;

    background-color: white;

    transition: transform 0.3s, opacity 0.3s;

  }

 

 .main-body{
  display: grid;
  column-gap: 10px;
  grid-template-columns:auto 1fr;
  top: 0px;
  padding-top: 50px;
  position: relative;
   
 }

 .left-nav {
  top: 0px;
  padding-top: 50px;
  float: left;
  position: relative;
 
  

 }

 .main-nav {
   padding-top: 50px;
 }

 .threebar {

 }

 .threebar:hover .bar{ 
  background-color: var(--clear);
  color: var(--secondary);

}

.bar {
  width: 25px;
  height: 2px;
  margin-bottom: 2px;
  background-color: var(--clear);
}
 
 .dropdown{
    color: var(--clear);
 }

 .drop-button{
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: white;
    border: none;
    padding: 10px;
    text-align: left;
    padding-left: 10px;
    width: 100%;
    font-size: 16px;
    color: var(--text-color1);
 }

 .drop-button img {
  margin: auto;
 }

 .drop-button p {
   padding: 5px;
   color: var(--text-color1);
   
 }

 .drop-button hover p {
  display: block;
  color: black;
   
 }

 .dropdown:hover .dropdown-content {
   opacity: 0.8;
   color: var(--text-color1);
   display: block;
   background-color: white;

 }



.dropdown-content {
  display: none;
  width: auto;
  position:relative ;
 }

 .dropdown-content ul li  {
   padding: 5px 15px;  

 }

 .dropdown-content li:hover  {
   background-color: var(--hover-color);
   color: var(--clear);
   display: block;

 }


 .section{
  padding: 10px;
  min-height: 300px;
 }

 .sections{
  text-align: center;
  padding: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
 }

 .showElement{
  display: block;
 }

.hideElement{
  display: none;
 
}
.showElement{
  display: block;
  position: absolute;
  margin-top: 45px;
 
}


/*info box */

.box {
    height: 130px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 3px 3px 10px rgba(0, 30, 87, 0.751);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.box:hover {
    transform: scale(1.08);
}

.box:nth-child(1) {
    background-color: var(--one-use-color);
}

.box:nth-child(2) {
    background-color: var(--two-use-color);
}

.box:nth-child(3) {
    background-color: var(--one-use-color);
}

.box:nth-child(4) {
    background-color: var(--two-use-color);
}

.box img {
    height: 50px;
}

.box .text {
    color: white;
}

.topic {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}

.topic-heading {
    font-size: 30px;
    letter-spacing: 3px;
}
/*---------------------------------*/


.cards {
 display: grid;
 grid-template-columns: 1fr ;
 margin-bottom: 10px;
 grid-gap: 10px;
}

.card {
  border-radius: 20px;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid red;
  position: relative;
  background-color: red;

}

.card-header { 
  width: inherit;
  border-bottom: 1px solid var(--Border-color);
}

.card-body {
    width: inherit;
    min-height: 200px;
}

.card-footer {
  border-top: 1px dashed var(--Border-color);
}



 /*tablet*/

  @media  screen and (min-width: 768px) {
    .logo,.nav-text { display: block; }
    .left-nav{ display: block; }
    .threebar{display: none;}
    .nav-links{display: flex;}
    .main-body{
      grid-template-columns: 3fr 7fr;
    }
    .cards{
      grid-template-columns: auto auto;
    }

    
  }

   /*large screen*/

  @media  screen and (min-width: 992px) {
    .left-nav{ display: block;grid-template-columns: auto; }
    .logo,.nav-text { display: block; }
    .threebar{display: none;}
    .nav-links{display: flex;}
    .main-body{
      grid-template-columns: 1fr 9fr;
    }
    .cards {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
    }
  }