a{text-decoration: none}
   /*-------------------*/
       .navTop {
      display: flex;
      
    width :99%;

    
    }
    .nav-links{
      position: absolute;
      z-index: 200;
     
      overflow-y: hidden;
      width: 100vw;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px 7px;
/*  border-radius: 12px;*/
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.nav-links li{
  list-style: none;
  margin: 0 7px;
}
.nav-links li p{
  position: relative;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 0;
  text-decoration: none;
}
.nav-links li p:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #34efdf;
  border-radius: 12px;
  transition: all 0.4s ease;
}
.nav-links li p:hover:before{
  width: 100%;
}
.nav-links .center p:before{
  left: 50%;
  transform: translateX(-50%);
}
.nav-links .upward p:before{
  width: 100%;
  bottom: -5px;
  opacity: 0;
}
.nav-links .upward p:hover:before{
  bottom: 0;
  opacity: 1;
}
.nav-links .forward p:before{
  width: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
.nav-links .forward p:hover:before{
  transform: scaleX(1);
  transform-origin: left;
}
.act {
  bottom: 2px;
  box-shadow: 0 5px 10px rgba(1, 2, 0, 0.1);
  /* border-bottom: 5px solid hsl(212, 42%, 15%);*/
  border-bottom: double;
  border-radius: 3px;
  
}
.nav-links .act{color: darkred; padding: 0 15px;float: left;}
.page{
  z-index: 330;
  margin-top:60px;
}
/*-----------*/
/*-----------*/
        /* Defining a custom border on all 
            sides except the top side */ 
        .custom-field { 
          z-index: 300;
            border: 4px solid; 
            border-top: none; 
            margin: 32px 2px; 
            padding: 8px; 

            padding-bottom: 100px;
        } 
  
        /* Defining the style of the  
        heading/legend for custom fieldset */ 
        .custom-field h1 { 
            font: 16px normal; 
            margin: -16px -8px 0; 
        } 
  
        /* Using float:left allows us to mimic 
           the legend like fieldset. The  
           float:right property can also be  
           used to show the legend on right side */ 
  
        .custom-field h1 span { 
            float: left; 
        } 
  
        /* Creating the custom top border to make 
            it look like fieldset defining small  
            border before the legend. The width  
            can be modified to change position  
            of the legend */ 
        .custom-field h1:before { 
            border-top: 4px solid; 
            content: ' '; 
            float: left; 
            margin: 8px 2px 0 -1px; 
            width: 12px; 
        } 
  
        /* Defining a long border after the  
        legend, using overflow hidden to  
        actually hide the line behind the  
        legend text. It can be removed 
        for a different effect */ 
        .custom-field h1:after { 
            border-top: 4px solid; 
            content: ' '; 
            display: block; 
            height: 24px; 
            left: 2px; 
            margin: 0 1px 0 0; 
            overflow: hidden; 
            position: relative; 
            top: 8px; 
        } 
  .dashboard .custom-field .table{
    width: 100%;
    border-collapse: collapse;
  }
  .dashboard .custom-field .table tr:nth-child(even) {
    padding: 10px 5px;
    background: darkred;
    color: white;
  }
  .dashboard .custom-field .table tr{

        transition: all 0.4s ease;
  }
  .dashboard .custom-field .table tr:hover{
    
    background: white;
    color: darkred;
    border-bottom: 2px solid darkred;
  }
  /*button. */

.dashboard .custom-field .row .col{
  position: relative;
  width: 50%;

}
.dashboard .custom-field .row .col .btn-add {
  position: absolute;
  left:10px;
  top: 20px;
}


.dashboard .custom-field .row .col .btn-point {
  background-color: darkred;
  color: #000;
  position: absolute;
  right: 20px;
  top: 20px;
}

/*=== ===============*/


/*=============== CARD ===============*/
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin-bottom: 20px;
 
}

.card__container {
  padding-block: 5rem;
}

.card__content {
  margin-inline: 1.75rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.card__article {
  width: 300px; /* Remove after adding swiper js */
  border-radius: 1.25rem;
  overflow: hidden;
}

.card__image {
  position: relative;
  background-color: hsl(38, 100%, 78%);
  width: 100%;
  padding:0 10%;
  padding-top:0; /*1.5rem;*/
  margin-bottom: -.75rem;
}

.card__data {
  background-color: hsl(212, 42%, 20%);
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  text-align: center;
  position: relative;
  z-index: 10;
}

.card__img {
width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.card__shadow {
  width: 200px;
  height: 200px;
  background-color: hsl(32, 75%, 50%);
  border-radius: 50%;
  position: absolute;
  top: 3.75rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  filter: blur(45px);
}

.card__name {
  font-size: 1.25rem;
  color: hsl(195, 75%, 52%);
  margin-bottom: .75rem;
}

.card__description {
  color: #fff;
  font-weight: 500;
  margin-bottom: 1.75rem;
}
.card__data a{text-decoration: none}
.card__button {
  display: inline-block;
  background-color: hsl(38, 92%, 58%);
  padding: .75rem 1.5rem;
  border-radius: .25rem;
  color: hsl(212, 40%, 12%);
  font-weight: 600;
}

/* Swiper class */
.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
}

.swiper-button-prev,
.swiper-button-next {
  width: initial;
  height: initial;
  font-size: 3rem;
  color: hsl(195, 75%, 52%);
  display: none;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-bullet {
  background-color: hsl(212, 32%, 40%);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: hsl(195, 75%, 52%);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .card__data {
    padding: 1rem;
  }
  .pRedDet{margin-left: 5px;}
  .pRedButton{width: 100%;}
}

/* For medium devices */
@media screen and (min-width: 768px) {
  .card__content {
    margin-inline: 3rem;
  }
.page{
  padding: 0 10%;
}
.nav-links{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
  .swiper-button-next,
  .swiper-button-prev {
    display: block;
  }
}

/* For large devices */
@media screen and (min-width: 1120px) {
  .card__container {
    max-width: 750px;
  }

  .swiper-button-prev {
    left: -1rem;
  }
  .swiper-button-next {
    right: -1rem;
  }
}


/*============page 2 reward============*/

.footer-col select{
  width: 100%;
  border-radius: 6px;
  font-size: 16px;
  padding: 0 0px;
  border: 2px solid #fff;
  border-bottom: 2px solid black;
  background: transparent;
  color: black;
  outline: none;
}
.footer-col select:focus{
  border: 2px solid #18ffff;
  width: 110%;
}
#pointF{
  padding: 0;
  color: black;
  border-bottom: 2px solid black;
}
.gift{
  width: 290px;
  margin: 20px 5px;
  padding: 10px 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: navy;
  color: #fff;
  border-radius: 6px;
}
.gift img{
  width: 90%;
  border-radius: 6px;
  margin-top: 10px;
}
.gift ._data{
  border-radius: 6px;
  background: linear-gradient(180deg, #00008B,#E0FFFF);
}
/*============Book order=======*/
  .input-field{
  position: relative;
  margin: 10px
}
.input-field input , textarea{
  width: 100%;
  height: 50px;
  border-radius: 6px;
  font-size: 18px;
  padding: 0 10px;
  border: 2px solid darkblue;
  background: transparent;
  color: #fff;
}
.row .input-field label{
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 15px;
  pointer-events: none;
  transition: 0.3s;
}
.row .input-field p {
  position: absolute;
  top: 30%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
 width: 25px;
 height: 25px;
 
}
.row .input-field input:focus{
  border: 2px solid #18ffff;
}
.row .input-field textarea:focus {
  border: 2px solid #18ffff;
}
.input-field input:focus ~ label ,.input-field input:valid ~ label {
  top: 0;
  left: 15px;
  font-size: 15px;
  padding: 0 2px;
  background: linear-gradient(to bottom right, darkblue, blue);
  border-radius: 6px;
  border: 1px solid #18ffff;
}
.input-field textarea:focus ~ label , .input-field textarea:valid ~ label {
  top: 0;
  left: 15px;
  font-size: 15px;
  padding: 0 2px;
  background: linear-gradient(to bottom right, darkblue, blue);
  border-radius: 6px;
  border: 1px solid #18ffff;
}


/*-----------------------------*/
  .pop{

position: absolute;
border-radius: 10px;
z-index: 302;
right: 10%;
background:skyblue;
top: 20%;
width: 80%;
padding: 10px;
transform: translate(-50%,-50%) scale(0);

visibility: hidden;

transition: transform 0.4s,top 0.4s;

}

.cll{
visibility: visible; transform: translate(0%,0%) scale(1);top: 10%;
position: fixed;
}
.pRedDet{
margin-left: 20px;
}
.pRedButton{
  width: 30%;padding-left: 10px; margin: 20px 0 20px 0;
}
/*@@@hurry@@@@@*/
      .confetti {
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        z-index:0;
        margin: 0 auto;
        user-select: none;
      }
/*@@@@@@@@@@----*/
.stable{
  border-collapse: collapse;
  width: 100%;
  background: white;
  margin: 15px 0;
}
.stable .sthead td{
  border: 1px solid black;
  text-align: center;
  font-weight: 600;
  background: lightgray;
}
.stable .stbody tr:nth-child(even) {
    background: mistyrose;
  }
.stable .stbody tr:hover {
    background: indigo;
    color: white;
  }
  .stable .stbody tr td{
    text-align: center;
    border: 1px solid red;
    flex-wrap: wrap;
  }