/*google fonts*/
  @import url('https://fonts.googleapis.com/css2?family=Acme&family=Lobster&family=Patua+One&family=Rubik&family=Sniglet&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

  html {
      scroll-behavior: smooth;
  }

  * {
      box-sizing: border-box;

  }

  header,
  section {
      overflow-x: hidden;
  }

  :root {
      --Snigle-font: "Sniglet", cursive;
      --Rubik: "Rubik", cursive;
      --Patua: "Patua One", cursive;
      --Lobster: sans-serif-bold, ;
      --light-black: #2e2c2caf;
      --bggradient: rgb(39, 38, 38);
      --bggradient1: black;
      --light-gray: rgba(255, 255, 255, 0.877);
  }

  header a {
      font-family: var(--Snigle-font);
      color: whitesmoke;
      position: static;

  }

  header img {
      padding: 0%;
      width: 40px;
  }

  header {
      background: #000000;
      background: var(--bggradient);
  }

  .header1 {
      text-align: center;
      background-color: white;
      color: black;
  }

  .content li {
      list-style: none;
  }

  .navbar-nav {
      padding-bottom: 0;
      justify-content: center;
      overflow-y: auto;
      overflow-x: hidden;
  }

  .menu-col li {
      padding: 10px 0px 5px 0px;
  }

  .megamenu-content {
      height: 100%;
  }

  header .container-fluid {
      font-size: 3vmin !important;
  }

  header .navbar-collapse ul {
      font-size: 15px;
  }

  header .nav-item:last-child {
      padding-right: 1em;

  }

  header .nav-item {
      padding: 0.9em;
  }

  header .brand {
      padding-right: 1rem;
  }



  header .nav-link:hover {
      color: black;
      transition: 0.1s;
      background-color: #5ca7bf;
  }

  header.row .col-md-5 {
      padding: 4.2vmin;
  }


  .navbar-toggler span {
      display: flex;
      background-color: rgb(255, 255, 255);
      height: 3px;
      width: 20px;
      margin-top: 3px;
      margin-bottom: 3px;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(-180deg);
      position: relative;
      left: 0;
      opacity: 1;
  }

  .navbar-toggler span:nth-child(1),
  .navbar-toggler span:nth-child(3) {
      -webkit-transition: transform .3s ease-in-out;
      -moz-transition: transform .3s ease-in-out;
      -o-transition: transform .3s ease-in-out;
      transition: transform .3s ease-in-out;
  }

  .navbar-toggler:not(.collapsed) span:nth-child(1) {
      position: absolute;
      left: 12px;
      top: 10px;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
      opacity: 0.9;
  }

  .navbar-toggler:not(.collapsed) span:nth-child(2) {
      height: 12px;
      visibility: hidden;
      background-color: white;
  }

  .navbar-toggler:not(.collapsed) span:nth-child(3) {
      position: absolute;
      left: 12px;
      top: 10px;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      transform: rotate(-135deg);
      opacity: 0.9;
  }

  
  .main-container-right {
      padding: 30px 10px;
      font-size: 3vmin;
  }

  .main-container-right>h2 {
      padding: 15px 0 15px 0px;
  }

  .main-container-right h2 a {
      color: black;
  }

  .main-container-right h2 a:hover {
      background-color: lightblue;
  }

  .main-container-right article {
      display: grid;
      grid-template-columns: 1fr 3fr;
      padding: 15px 0;
      border-bottom: 1px solid #44b105;
  }

  .main-container-right article:last-child {
      border-bottom: none;
  }


  .main-container-right h4 {
      text-align: center;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 12px;
      align-self: center;
  }

  .main-container-right article h2 {
      font-size: 18px;
      padding: 10px 0;
      font-family: var(--heading);
  }

  .main-container-right article p {
      font-size: 15px;
      font-weight: 300;
  }

  .main-container-right article div {
      margin-right: 10px;
  }

 
  #respond {
      margin-top: 10px;
      font-family: var(--Lobster);

  }

  #respond input[type='text'],
  #respond input[type='email'],
  #respond textarea {
      margin-bottom: 10px;
      display: block;
      width: 100%;
      font-family: var(--Snigle-font);
      background: rgb(240, 240, 240);
      --light-gray: rgba(255, 255, 255, 0.877);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -o-border-radius: 5px;
      -ms-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      line-height: 1.4em;
  }

  /*cookies section*/
  .ck {
      margin: 24px 0;
      line-height: 2;
  }

  .wrapper {
      padding: 32px;
  }

  .cookie-container {
      position: fixed;
      bottom: -100%;
      left: 0;
      right: 0;
      background: #bc0606;
      color: #f5f6fa;
      z-index: 100;
      font-weight: 700;
      width: 75%;
      margin: auto;
      border-radius: 10px;
      margin-bottom: 20px;
      padding: 5px 10px;
  }

  .cookie-container.active {
      bottom: 0;
  }

  .cookie-container a {
      color: #f5f6fa;
  }

  .cookie-btn {
      width: 100px;
      background: #f0f0f0;
      border: 0;
      color: #034848;
      padding: 0px 4px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
  }

  /*Special list*/
  .special-list {
      display: block;
      margin-top: 10px;
  }

  .special-list #s {
      margin: auto;
      text-align: center;
      background-color: #f0f0f0;
      color: rgb(0, 0, 0);
      font-size: 20px;
      font-weight: 700;
      padding: 8px 35px;
      width: 55%;
      border-radius: 20px;
  }

  .s00 {
      background-color: white;
      width: 55%;
      margin: auto;
  }

  .lists-roller .s1:hover {
      color: #17AADA;
  }

  .s2 {
      box-shadow: 0 3px 1px gainsboro;
      box-sizing: border-box;
  }

  .s1 {
      color: #bc0606;

  }

  .s3 {
      line-height: 38px;
  }

  .Jump-links {
      margin: auto;
      text-align: center;
  }

  .Jump-links ul {
      margin-left: -40px;
  }

  .JUMP {
      list-style: none;
      display: inline-flex;
      border-style: solid;
      border-width: thin;
      background-color: rgb(167 190 216 / 25%);
      padding: 4px 6%;
      margin-top: 2%;
      border-radius: 11px;
      text-align: center;
  }

  .JUMP a {
      color: #000000;
  }

  .tl {
      margin: auto;
      width: 70%;
      text-align: center;
      background-color: #ececec;
      color: #016b8e;
      font-size: 24px;
      font-weight: 700;
      padding: 10px 35px;
      align-content: center;
      border-radius: 20px;
  }

  .tab {
      margin: auto;
      text-align: center;
      width: 70%;

  }

  .tab thead tr th {
      font-size: 22px;
      background-color: rgba(0, 0, 0, 0.815);
      text-align: center;
  }

  .tab tbody td {
      padding: 8px 0px 8px 20px;
      border-bottom: 2px dashed gray;
  }

  .tab tbody tr:nth-of-type(even) {
      background-color: #f0f0f0;
  }

  .tab tbody tr:last-of-type {
      border-bottom: 2px solid black;
  }

  .tab tbody td a {
      color: #014690;
  }

  .section-2 {
      position: relative;
  }

  .cards .card {
      border-radius: 20px;
      margin: 10px 12px 11px 12px;
      box-shadow: 0 0 3px #000;
      border-radius: 10px !important;
      width: 30%;
  }

  .cards .card:hover {
      box-shadow: 0 5px 15px rgba(0, 0, 0, .4);
      ;
  }

  .cards .card-header {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background: #0b4475;
      font-weight: bold;
  }

  .cards .card-body .card-text {
      background: rgb(255, 255, 255);
      color: rgb(73, 73, 73);
  }

  .cards a {
      text-decoration: none;
  }

  .cards a .card-title {
      color: black;
      font-weight: 600;
      font-size: 1.3em;
  }

  .container .col-md-7 h5 {
      /*trending now!*/
      padding: 0.5vmin;
      letter-spacing: 4px;
      text-shadow: 2px 2px 5px rgb(204, 204, 204);
  }

  .container .col-md-7 h2 {
      /*Glimpses*/
      font-size: 6vmin;
      font-weight: bold;
      padding: 0.1em 0.1em;
      text-shadow: 2px 2px 5px rgb(204, 204, 204);
  }


  body .card .card-header a:hover {
      color: #000000 !important;
  }

  .container .card .card-body {
      background: var(--bggradient);
      font-size: 2vmin;
      color: rgb(104, 104, 104);
  }

  .container .card .card-title {
      color: white;
  }

  .container .card .card-text {
      margin-top: 1rem;
      color: whitesmoke;
      background: var(--light-black);
  }


  .container .col-md-7 p {
      padding: 1vmin 5vmin;
      text-shadow: 2px 2px 5px black;
  }

  .container .col-md-7 button {
      border-radius: 30px;
      color: white;
  }

  .cards .title {
      background: var(--bggradient);
      padding: 1.2rem;
      font-size: 2vmin;
      color: black;
  }

  .cards .card-title {
      color: white;
  }

  .card .card-text {
      margin-top: 1rem;
      color: whitesmoke;
      background: var(--light-black);
  }


  /*Footer*/

  footer {
      background: #002955;
      overflow-x: hidden;
      padding: 14vmin 18vmin;
      font-family: var(--Snigle-font);
  }

  footer p>span {
      color: whitesmoke;
  }

  footer input {
      border: none !important;
  }

  footer input:placeholder {
      color: white !important;
  }

  footer .column i {
      color: whitesmoke;
  }

  footer .column i {
      padding: 0 0.5em;
  }

  footer .column i:hover {
      color: #000;
  }

  footer .abtus {
      color: #d4d5d6 !important;
  }

  /*Sticky class*/
  .sticky {
      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.815);
      z-index: 999;
      transition: ease;
  }



  #myBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      font-size: 18px;
      border: none;
      outline: none;
      background-color: rgb(0, 0, 0);
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 4px;
  }

  #myBtn:hover {
      background-color: #555;
  }