/* card start */

.mysubscribebtn{
    padding: 10.5px;
    border: none;
    background-color: #5309ff !important; 
    color: white !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-top-right-radius: 2em 2em;
    border-bottom-right-radius: 2em 2em;
}
.cardimg {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 330px;
height:330px;
margin: 1rem;
padding:15px;
transition: transform 0.2s;
}

.cardimg:hover {
transform: scale(1.05);
}

.cardimg img {
width: 100%;
height: 255px !important;
}

.card-content {
padding: 1rem;
}

.card-content h2 {
margin-top: 0;
font-size: 1.2rem;
}

.card-content p {
color: #555;
}

/* card end */
/* nav start */
nav{
height: 4rem;
width: 100vw;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
display: grid;
grid-template-columns: 45% 45%;
position: fixed;
z-index: 10;
align-items: center;
padding: 8px;
}
.navp{
display: none;
}
/*Styling logo*/
.logo{
padding:1vh 1vw;
text-align: start;
padding-left:20px;

}
.logo h1{
font-size: 1.3rem;
}
.logo img {
height: 5rem;
width: 5rem;
}

/*Styling Links*/
.nav-links{
display: flex;
list-style: none; 
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a{
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before{
width: 80%;
}



/*Styling Hamburger Icon*/
.hamburger div{
width: 30px;
height:3px;
background: #f2f5f7;
margin: 5px;
transition: all 0.3s ease;
}
.hamburger{
display: none;
}

/*Stying for small screens*/
@media screen and (max-width: 800px){
.search-bar { 
display: flex;
align-items: center;
width: 90%;
margin: 0 auto; /* Center the search bar */
border-radius: 5px;
margin-bottom: 30px;
position: relative;
}
.heading_section {
padding: 20px;
padding-left:40px;
}
.myswiperparent{
display: none !important;
}
.responsiveslide{
display: flex;
align-items: center;
justify-content: center;
display: block !important;
margin-left: -20px;
}
.top_banner{
background: linear-gradient(111.5deg, rgb(20, 100, 196) 0.4%, rgb(33, 152, 214) 100.2%);
padding: 0 0px;
padding-bottom: 20px;
color: white;
}
header{
display: none !important;
}
.buttons{
flex-direction: column;
gap: 30px;
margin-top: 20rem;
}
.navp{
display: block;
  position: fixed;
  z-index: 3;
  align-items: center;
  background: linear-gradient(111.5deg, rgb(20, 100, 196) 0.4%, rgb(33, 152, 214) 100.2%);
}
nav{
  position: fixed;
  z-index: 3;
  align-items: center;
  background: linear-gradient(111.5deg, rgb(20, 100, 196) 0.4%, rgb(33, 152, 214) 100.2%);
}
.hamburger{
  padding-right:18px;
  display:block;
  position: absolute;
  cursor: pointer;
  right: 5%;
  top: 50%;
  transform: translate(-5%, -50%);
  z-index: 2;
  transition: all 0.7s ease;
}
.nav-links{
  position: fixed;
  background: linear-gradient(111.5deg, rgb(20, 100, 196) 0.4%, rgb(33, 152, 214) 100.2%);
  height: 100vh;
  width: 100%;
  flex-direction: column;
  clip-path: circle(50px at 90% -20%);
  -webkit-clip-path: circle(50px at 90% -10%);
  transition: all 1s ease-out;
  pointer-events: none;
}
.nav-links.open{
  clip-path: circle(1000px at 90% -10%);
  -webkit-clip-path: circle(1000px at 90% -10%);
  pointer-events: all;
}
.nav-links li{
  opacity: 0;
}

li.fade{
  opacity: 1;
}
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
transition: all 0.7s ease;
width:0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
/* nav end */
.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
  font-size: 15px;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
  font-size: 15px;
}
.responsiveslide{
  display: none;
}
.myswiperparent {
display: flex;
justify-content: center;
align-items: center;
}
.swiper {
width: 90vw;
height: 100%;
padding: 30px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.swiper-button-next,
.swiper-button-prev {
background: linear-gradient(111.5deg, rgb(20, 196, 174) 0.4%, rgb(33, 152, 214) 100.2%);    border-radius:50%;
color: #ffffff;
height: 30px;
width: 30px;
padding: 10px;
}
@media (max-width: 500px) {
.swiper {
width: 100vw;
padding: 10px;
}
.swiper-button-next,
.swiper-button-prev {
font-size: 12px;
padding: 8px;
}
}