body{
  padding: 0%;
  margin: 0%;
  width: 100vw;
  overflow-x: hidden;
}


/* //navbarStyle */
.navbar {
    position: fixed;
    width: 100%;
    display: block;
    transition: top 0.3s;
    z-index: 999;
    background-color: rgb(16 16 16 / 79%);

  }
  .navbar-brand img{
    width: 100%; height: 8vh;
  }
  .hover-container {
     position: relative;
     display: inline-block;
   }
 
   /* Style for the text */
   .hover-text {
     color: #fff;
     text-decoration: none; /* Remove default underline */
     position: relative; /* Ensure proper stacking */
     z-index: 1; /* Ensure text is above line */
     transition: color 0.3s; /* Smooth color transition */
   }
 


   /* Style for the line */
   .hover-text::after {
     content: '';
     position: absolute;
     left:2px;
     top: 50%;
     width: 93%;
     height: 1px;
     background-color: #fafafa; /* Color of the line */
     transform: translateY(-50%);
     opacity: 0; /* Initially hide the line */
     transition: opacity 0.3s; /* Smooth opacity transition */
   }
  
     
   /* Hover effect */
   .hover-container:hover .hover-text::after {
     opacity: 1; /* Show the line on hover */
   }
 
   /* Hover effect on text */
   .hover-container:hover .hover-text {
     color: #fff; /* Change text color on hover */
   }



   /* //formcss */
   .contact-form{
    background: #fff;
    width: 70%;
}
.contact-form .form-control{
    border-radius:1rem;
}
.contact-image{
    text-align: center;
}
.contact-image img{
    border-radius: 6rem;
    width: 11%;
    margin-top: -3%;
    transform: rotate(29deg);
}
.contact-form form{
    padding: 14%;
}
.contact-form form .row{
    margin-bottom: -7%;
}
.contact-form h3{
    margin-bottom: 8%;
    margin-top: -10%;
    text-align: center;
    color: #0062cc;
}
.contact-form .btnContact {
    width: 50%;
    border: none;
    border-radius: 1rem;
    padding: 1.5%;
    background: #dc3545;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.btnContactSubmit
{
    width: 50%;
    border-radius: 1rem;
    padding: 1.5%;
    color: #fff;
    background-color: #0062cc;
    border: none;
    cursor: pointer;
}




/* Styles for the dropdown menu */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #6351ce;
    list-style: none;
    margin: 0;
    padding: 0;
    top: 100%;
    left: 0;
    min-width: 150px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  
  .dropdown-item {
    padding: 10px;
    color: #fff;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-item:hover {
    background-color: #988dd8;
  }
  
  /* Show the dropdown menu on hover */
  .nav-item:hover .dropdown-menu {
    display: block;
  }



  /* //whatcustomersays */
  .outerdiv
{
	width: 100%;
    min-height: 100vh;
   
    display: flex;
    align-items: center;
    justify-content: center;
}
.innerdiv
{
	transform: scale(0.9);
	margin: 1rem;
	display: grid;
	grid-gap: 1.5rem;
	grid-template-rows: repeat(2,22rem);
	grid-template-columns: repeat(4,17rem);
}
.eachdiv
{
	padding: 1rem 2rem;
    border-radius: 0.8rem;
    box-shadow: 5px 5px 20px #6d6b6b6b;
    color: white;
}
.div1
{
	background: #733FC8;
    grid-column: 1/3;
    grid-row: 1/2;
    background-image: url(https://raw.githubusercontent.com/RahulSahOfficial/testimonials_grid_section/5532c958b7d3c9b910a216b198fdd21c73112d84/images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position-x: 25rem;
}
.div2
{
	background:#49556B;
    grid-column: 3/4;
    grid-row: 1/2;
}
.div3
{
	background: white;
    grid-column: 4/5;
    grid-row: 1/3;
    color: black;
}
.div4
{
	background: white;
	grid-column: 1/2;
    grid-row: 2/3;
    color: black;
}
.div5
{
	background: #18202D;
	grid-column: 2/4;
    grid-row: 2/3;
}
.userdetails
{
	display: flex;
}
.imgbox
{
	margin-right: 1rem;
}
.imgbox img
{
	border-radius: 50%;
	width: 2rem;
	border: 2px solid #cec5c5;
}
.detbox
{
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.detbox p
{
	margin: 0;
}
.detbox .name
{
	color: hsl(0, 0%, 81%);
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    font-weight: 600;
}
.detbox .name.dark
{
	color: #49505A;
}
.detbox .designation
{
	color: hsl(0, 0%, 81%);
    opacity: 50%;
    font-size: 0.8rem;
}
.detbox .designation.dark
{
	color: #49505A;
}
.review h4
{
	font-size: 1.4rem;
	color: #F3DEFF;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}
.review.dark h4{
	color:#4B5258;
}
.review p
{
  padding-top: 20px; 
	font-size: 0.95rem;
    color: #F3DEFF;
    font-weight: 500;
    opacity: 50%;
    line-height: 1.5;
}
.review.dark p{
	color: #0e0e0e;
}
.attribution
{
	font-size: 1rem;
    line-height: 1.5;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    text-align: right;
}
.attribution a
{
	text-decoration: none;
}


/* //whatclient */
.whatClientMain{
  height: 100vh;
  /* background:  #130031; */
  background: url(./image/bg3.jpg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.scroll-containerWhat {
  display: flex;
  overflow-x: auto;
  width: 80%;  /* Fixed width to the container */
  white-space: nowrap;  /* Ensure items do not wrap to the next line */
  border: 1px solid #ccc;
  scrollbar-width: none;
  border-radius: 8px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.scroll-containerWhat .card{
  flex: 0 0 auto;
  width: 300px;
  height: 420px;
  margin-right: 20px;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card:last-child {
  margin-right: 0;
}



@media only screen and (max-width: 1000px)
{
	.innerdiv
	{
		transform: scale(0.7);
	}
}
@media only screen and (max-width: 800px)
{
	.innerdiv
	{
		transform: scale(0.6);
	}
}
@media only screen and (max-width: 600px)
{
	.div1 {
		background-position-x: 10rem;
	}
	.innerdiv
	{
		display: flex; 
		flex-direction: column;
		transform: scale(1);
		margin: 2rem;
		margin-bottom: 5rem;
	}
	.attribution
	{
		position: relative;
	}
}




/* //OurAchievments */

.ourAchievMianCont{
    background-color: #c4dfe6;
    color: #003b46;
    height: 50vh;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
  }
  .ourAchievCont1{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 30vh;
    align-items: center;
  }
  .borderCont{
    border-right: 1px solid #003b46;
    height: 12vh;
  }

  /* //rummy */
.rummyMainCont{
  height: 92vh;
  background-color: black;
}
.rummyHeaderCont{
  color: white;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  height: 20vh;
}

.rummyContentcont{
  height: 70vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
 .card1rummy{
  width: 25%;
  height: 65vh;
  background: linear-gradient(180deg, rgba(229, 151, 50, 1) 19%, rgba(172, 104, 15, 1) 100%)
}
.listCard1{
  display: flex;flex-direction: column;justify-content: space-around;height: 60vh;font-size: 20px;color: #F6D686;
}
.card2rummy{
  width: 25%;
  height: 65vh;
  background: linear-gradient(180deg, rgba(39, 173, 99, 1) 19%, rgba(31, 129, 75, 1) 100%);
}
.listCard{
  display: flex;flex-direction: column;justify-content: space-around;height: 60vh;font-size: 20px;color: #9ff2c4;
}
.card3rummy{
  width: 25%;
  height: 65vh;
  background: linear-gradient(180deg, rgba(89, 88, 163, 1) 19%, rgba(71, 70, 131, 1) 100%);
}
.listCard3{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 60vh;
  font-size: 20px;
  color: #AC91F1;
}

   /* Existing styles for your home page */

/* Modal container */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index:999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  
}

/* Modal content */
.modal-content {
  background-color: #ffffff;
  margin: 8% auto; 
  padding: 10px;

  width: 30%; /* Could be more or less, depending on screen size */
  height: 70vh;
}

/* Close button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding: 5px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modalContTxt{
  background-color: #aaa;width: 100%;height: auto
}

/* //phoneWhatsFixed */
.phoneWhatBottom{
  width: 100%;position: fixed;height: 10vh;right: 0%;bottom: 0%;z-index: 999;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}
.phoneWhatBottomA ,.phoneWhatBottomB{
  width: 8%;height: 8vh;display: flex;justify-content: center;align-items: center;
}
.ourAchievCont1Part1{
  width: 20%;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
.ourAchievCont1Part1Head{
  font-size: 45px;
  font-weight: bold;
}
.ourAchievCont1Part1Txt{
  font-weight: bold;
}
  @media screen and (max-width: 650px){
    .ourAchievMianCont{
        background-color: #c4dfe6;
        color: #003b46;
        height: 90vh;
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
      }
      .ourAchievCont1{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 70vh;
        
      }
      .borderCont{
        border-bottom: 1px solid #003b46;
        border-right: none;
        width:21%;
        height: 5vh;
        margin-bottom: 30px;
      }
      .ourAchievMianCont img{
        width: 60vw;
        margin-bottom: 30px;
      }
      .navbar-brand img{
        width: 100%; height: 6vh;
      }
      .ourAchievCont1Part1{
        width: 70%;
      }
      .ourAchievCont1Part1Head{
        font-size: 32px;
      }
      .ourAchievCont1Part1Txt{
        font-size: 14px;
      }
      


      /* //rummy */
.rummyMainCont{
  height: 140vh;
  background-color: black;
}

.rummyContentcont{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.rummyContentcont .card1rummy{
  width: 90%;
  height: 60vh;
  background: linear-gradient(180deg, rgba(229, 151, 50, 1) 19%, rgba(172, 104, 15, 1) 100%)
}
.listCard1{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 30vh;
  font-size: 20px;
  color: #F6D686;
}
.rummyContentcont .card2rummy{
  width: 90%;
  height: 60vh;
  background: linear-gradient(180deg, rgba(39, 173, 99, 1) 19%, rgba(31, 129, 75, 1) 100%);
}
.listCard{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 30vh;
  font-size: 20px;
  color: #9ff2c4;
}
.card3rummy{
  width: 90%;
  height: 60vh;
  background: linear-gradient(180deg, rgba(89, 88, 163, 1) 19%, rgba(71, 70, 131, 1) 100%);
}
.listCard3{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 35vh;
  font-size: 20px;
  color: #AC91F1;
}


/* Modal container */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0 0 0 / 85%); /* Fallback color */
  /* background-color: rgba(0,0,0,0.4); Black w/ opacity */
  
}

/* Modal content */
.modal-content {
  background-color: #ffffff;
  margin: 20% auto; 
  padding: 10px;

  width: 90%; /* Could be more or less, depending on screen size */
  height: 73vh;
}

/* Close button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding: 5px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}  

.modalContTxt{
  background-color: #aaa;width: 100%;height: 70vh
}
/* //phoneWhatsFixed */
.phoneWhatBottom{
  width: 100%;position: fixed;height: 10vh;right: 0%;bottom: 0%;z-index: 999;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 20px;
}
.phoneWhatBottomA ,.phoneWhatBottomB{
  width: 10%;height: 8vh;display: flex;justify-content: center;align-items: center;
}
.navbar-collapse{
  background: #0C0127;
  padding: 20px;
  }
}

.modal-backdrop.show {
  z-index: auto;
}