.content{
   background-color: rgba(219, 242, 253, 0.807);
   border-radius: 8px;
}
.content .font_data{
    font-family:Arial, Helvetica, sans-serif
}

/* Default styles for larger screens */
.content .data5 .links .row {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    width: 100%;
    place-content: center;
}

.content .data5 .links .row .box1,
.content .data5 .links .row .box2,  
.content .data5 .links .row .box3,
.content .data5 .links .row .box4,
.content .data5 .links .row .box5,
.content .data5 .links .row .box6 {
    width: 100%;
    height: 3.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 10px 2px 15px rgb(39, 39, 39);
}

.content .data5 .links .row .box1 {
    background-color: #e8d558;
}

.content .data5 .links .row .box2 {
    background-color: #4694b3;
}

.content .data5 .links .row .box3 {
    background-color: #e87295;
    color: aliceblue;
}

.content .data5 .links .row .box4 {
    background-color: #9ceb67;
}

.content .data5 .links .row .box5 {
    background-color: #1655de;
}

.content .data5 .links .row .box6 {
    background-color: #eb2178;
    color: aliceblue;
}

/* Media query for tablets */
@media (max-width: 768px) {
    .content .data5 .links .row {
        flex-direction: column;
        row-gap: 5px;
        align-items: center;
    }
}

/* Media query for mobile devices */
@media (max-width: 480px) {
    .content .data5 .links .row .box1,
    .content .data5 .links .row .box2,
    .content .data5 .links .row .box3,
    .content .data5 .links .row .box4,
    .content .data5 .links .row .box5,
    .content .data5 .links .row .box6 {
        height: 2.5rem; /* Adjust the height for smaller screens */
    }
}
.carousel {
    background-color: #13203b;
    width: 100%;
    height: 15rem;
    color: whitesmoke;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.carousel #head {
    font-size: 5rem;
    color: white;
}

.image-container {
    position: relative;
}

.image-container .image2 {
    position: absolute;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #e9f149;
    color: #fff;
    padding: 10px 20px;
    font-size: 20px;
    text-align: center;
    border-radius: 15px;
}

@media only screen and (max-width: 600px) {
    .carousel {
        height: auto;
    }

    .carousel #head {
        font-size: 3rem;
    }

    .overlay-text {
        font-size: 16px;
        padding: 8px 16px;
        display: none; 
    }
}

 .centered {
    position: absolute;
    top: 95%;
    left: 35%;
    transform: translate(-50%, -50%);
  }
  .centered h2{
    font-size: 3rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #4694b368;
    text-shadow: 10px 10px 15px #000000;
    
  } 
 .profile {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
  .profile {
    max-width: 100%;
  }
}

/*.............................WHATSAPP API......................................*/

.chats_bubble img{
    width: 20em;
    height: 10em;
}
.chats_bubble .left_side img {
    position: relative;
    top: 50px;
}

.whatsapp_api .content{
    background-color: white;
}
.whatsapp_api .content .chat_div #mobile_img{
 width: 100%;
 height: 500px;
}
/*.whatsapp_api .container .data1 .second_bottom{*/
/*    background-color: #deeafc;*/
/*}*/
.whatsapp_api .content .data1 #list{
    color: #050180;
    font-size: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}

/*.............................UPI GATEWAY......................................*/

.back img{
    width:100%;
    background-size: cover;
}
.points{
    background-color: rgba(228, 254, 255, 0.73);
}
.points .row #right_block_col{
    display: flex;
    flex-direction: row;
    gap: 20px
    height: 150px;
    
 
}

.points .row #point1{
    background-color: rgba(248, 55, 155, 0.8);

}
.points .row #point2{
    background-color: rgba(56, 253, 103, 0.8);

}

.points .row #point3{
    background-color: rgba(56, 58, 252, 0.8);

}
.points .row #point4{
    background-color: rgba(255, 0, 0, 0.8);

}
.points .row #point5{
    background-color: rgba(225, 0, 255, 0.8);
}
.points .row #point6{
    background-color: rgba(252, 221, 24, 0.8);
}

.points .row #point7{
    background-color: rgba(7, 220, 169, 0.8);
}
.points .row #point8{
    background-color: rgba(15, 18, 17, 0.8);
}
.points .row #point9{
    background-color: rgba(15, 18, 17, 0.8);
   
}



@media only screen and (max-width: 768px) {
   .back img {
        width: 100%;
        object-fit: cover;
        
    }
}

@media (max-width: 768px) {
    .points .row #right_block_col {
        flex-direction: column;
        gap:10px;
        width: calc(100% - 15px); /* 100% width with 15px gap between items */
    }
}

/*..................................................uinverse cards................................................*/

.card {
  width: 300px;
  height: 90px;
  background: #07182E;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  text-align:center;
  align-items:center;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 10px 2px 15px black;
  font-weight:600;
}

.card p {
  z-index: 1;
  color: white;
  font-size: 18px;
}

/*............................................sign in/up buttons......................................................*/

.wrapper {
  display: inline-flex;
  list-style: none;
  width: 100%;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}
.wrapper a {
    color: navy;
}
.wrapper a:hover{
    color: white;
}
.wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
    width:90px;
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  width:90px;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}


/*...........................sign in button.......................................*/

.sign_btn {
 margin-top: 13px;
 color: navy;
 width: 7em;
 height: 2.5em;
 border-radius: 30em;
 font-size: 15px;
 font-family: inherit;
 border: none;
 position: relative;
 overflow: hidden;
 z-index: 1;
 box-shadow: 6px 6px 12px #bedcfe,
             -6px -6px 12px #bedcfe;
}

.sign_btn::before {
 content: '';
 width: 0;
 height: 3em;
 border-radius: 30em;
 position: absolute;
 top: 0;
 left: 0;
background: #1FA2FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
 transition: .5s ease;
 display: block;
 z-index: -1;
}

.sign_btn:hover::before {
 width: 9.5em;
}


.popup 
{
        width: 1200px;
        height: 400px;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        display:flex;
        justify-content:center;
        align-items:center;
        transform: translate(-50%, -50%);
        padding: 20px;
        
    }


.card_box {
  position: relative;
  width: 200px;
  height: 200px;
  background: lightgrey;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 1s ease-in-out;
}

.background {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 107%, #ff89cc 0%, #9cb8ec 30%, #00ffee 60%, #62c2fe 100%);
}

.logo {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all 0.6s ease-in-out;
}

.logo .logo-svg {
  fill: white;
  width: 30px;
  height: 30px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon .svg {
  fill: rgba(255, 255, 255, 0.797);
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.box {
  position: absolute;
  padding: 10px;
  text-align: right;
  background: rgba(255, 255, 255, 0.389);
  border-top: 2px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
  transform-origin: bottom left;
  transition: all 1s ease-in-out;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.box:hover .svg {
  fill: white;
}

.box1 {
  width: 70%;
  height: 70%;
  bottom: -70%;
  left: -70%;
}

.box1::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);
}

.box1:hover::before {
  opacity: 1;
}

.box1:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box2 {
  width: 50%;
  height: 50%;
  bottom: -50%;
  left: -50%;
  transition-delay: 0.2s;
}

.box2::before {
  background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);
}

.box2:hover::before {
  opacity: 1;
}

.box2:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box3 {
  width: 30%;
  height: 30%;
  bottom: -30%;
  left: -30%;
  transition-delay: 0.4s;
}

.box3::before {
  background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);
}

.box3:hover::before {
  opacity: 1;
}

.box3:hover .icon .svg {
  filter: drop-shadow(0 0 5px white);
}

.box4 {
  width: 10%;
  height: 10%;
  bottom: -10%;
  left: -10%;
  transition-delay: 0.6s;
}

.card_box:hover {
  transform: scale(1.1);
}

.card_box:hover .box {
  bottom: -1px;
  left: -1px;
}

.card_box:hover .logo {
  transform: translate(0, 0);
  bottom: 20px;
  right: 20px;
}


.container_fluid .recharge_header{
    background-color: red;
}