/* nav bar................................................. */
 .navbar {
   box-shadow: 0px 0px 8px gray;
   justify-content: space-around;
   height: 74px;
   width: 100%;
   margin-left: 0px;
   z-index: 3;
 }
 

 @keyframes navbar-scroll {
   from {
     transform: translateY(-120%);
     opacity: 0.5;

   }


   to {
     transform: translateX(0%);
     opacity: 1;
   }
 }

 .scrolled {
   animation-name: navbar-scroll;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
   background: rgba(255, 255, 255);
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   padding: 15px 20px;
   top: 0;
   /* Navbar slides down into view */
 }

 .logo-div {
   display: flex;
   align-items: center;
   margin-top: -12px;
   margin-left: 70px;
 }

 .navbar-collapse {
   margin-left: 160px;
  
   gap: 10px;
 }

 .btn-bar {
   display: flex;
   flex-direction: row;
   gap: 18px;
   width: 560px;
 }

 .bi-envelope-at {
   font-size: 16px;
   color: blue;
   margin-top: 20px;
 }

 .btn-bar a {
   margin-top: 20px;
   
 }
.btn-bar .login-icon{
  margin-top: -5px;
  margin-left: 15px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 24px;
  background-color: #4374dc;
  text-align: center;
  color: white;
}

 .googleimg ,.iphoneimg{
   padding-top: 14px;
   width: 120px;
   
 }

 .student-tab,
 .institute-tab,
 .resource-tab {
   width: 130px;
   text-align: center;
 }

 .student-tab:hover,
 .institute-tab:hover,
 .resource-tab:hover {
   border: 0px solid;
   background-color: #4374dc;
   border-radius: 5px;
   padding: 4px 3px;
   color: white;
 }



 .student-content,
 .institution-content,
 .resources-content {
   opacity: 0;
   visibility: hidden;
   position: absolute;
   top: 70px;
   left: 0;
   padding: 10px;
   border-radius: 5px;
   width: 1000px;
   /* height: 450px; */
   transition: opacity 0.3s ease-in-out;
 }

 .student-content {
   background-color: rgb(237, 237, 237);
   left: 360px;


 }

 .student-content::after {
   content: "";
   position: absolute;
   top: -16px;
   left: 90px;
   width: 0;
   height: 0;
   border-left: 25px solid transparent;
   border-right: 25px solid transparent;
   border-bottom: 25px solid rgb(237, 237, 237);

 }

 /* Career Container */
 .student-container {
   margin-left: 40px;
   margin-top: 23px;
   width: 50%;
 }

 /* Heading */
 .student-heading {
   color: #e74c3c;
   font-size: 15px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 500;
 }

 /* Career Programs */
 .student-program {
   margin-top: 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid #ddd;
 }

 .career-program p {
   font-size: 14px;
   color: #555;
   line-height: 1.6;
 }

 /* Links */
 .career-program a {
   color: #007BFF;
   text-decoration: none;
   font-size: 14px;
   font-weight: lighter;
 }

 .career-program a:hover {
   text-decoration: underline;
 }

 .institution-content {
   background-color: burlywood;
 }

/* Responsive Design */
@media (max-width: 1200px) {
  body{
    overflow-x: hidden;
  }
 .cmp-email{
  font-size: 14px;
 }
  .logo-div img{
    width: 100%;
  }
  .navbar-collapse {
    margin-left: 80px;
    
  }
  .nav-items{
    font-size: 15px;
  }
  .btn-bar {
    width: auto;
  }
  .navbar {
    flex-direction: column;
    height: auto;
  }
  .navbar-collapse {
    flex-direction: row;
    gap: 70px;
    align-items: flex-start;
    margin-left: 0;
  }
  .nav-items {
    flex-direction: column;
    gap: 10px;
  }
  .btn-bar {
    flex-direction:row-reverse;
    align-items: flex-start;
  }
  .student-tab,
 .institute-tab,
 .resource-tab {
   text-align: start;
  

 }
 .logo-div {
  
  margin-left: 30px;
}
}

@media (max-width: 990px) {
  .navbar {
    flex-direction: column;
    height: auto;
  }
  .navbar-collapse {
    flex-direction: row;
    gap: 70px;
    align-items: flex-start;
    margin-left: 0;
  }
  .nav-items {
    flex-direction: column;
    gap: 10px;
  }
  .btn-bar {
    flex-direction:row-reverse;
    align-items: flex-start;
  }
  .student-tab,
 .institute-tab,
 .resource-tab {
   text-align: start;
  

 }
 .logo-div {
  
  margin-left: 30px;
}
}

@media (max-width: 768px) {
  .navbar {
    padding: 10px;
  }
  .btn-bar {
    gap: 10px;
  }
}

@media (max-width: 580px) {
  .nav-items {
    width: 100%;
    text-align: center;
  }
  .student-tab, .institute-tab, .resource-tab {
    width: 100%;
  }
  .btn-bar {
    width: 100%;
    flex-direction: column-reverse;
    
    display: flex;
    align-items: start;
  }
  .btn-bar div{
    margin-left: 330px;
    
  }
  .googleimg ,.iphoneimg{
    width: 120px;
  }
}

@media (max-width: 440px) {
  .logo-div img {
    height: 60px;
    width: 130px;
  }
  .btn-bar {
    flex-direction: column-reverse;
    
    display: flex;
    align-items: start;
  }
  .btn-bar div{
    margin-left: 180px;
    
  }
  .googleimg ,.iphoneimg{
    padding-left: 30px;
    
    width: 140px;
  }
}










 /*section part..................................................*/
 /* section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  background-color: rgb(255, 255, 255);
} */


 /*top section.................................................*/
 section {
   /* background-color: rgb(120, 29, 29); */
   overflow-x: hidden;
   width: 100.6%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  
   
 }

 .top-part {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 20px;
   width: 100%;
   
   position: relative;
   height: 100%;
 }
 .bgimg{
position: absolute;
z-index: 0;
 }

 .left-div {
   display: flex;
   justify-content: center;
   padding-left: 140px;
   flex-direction: column;
   gap: 20px;
   width: 50%;
   z-index: 3;
 }
 .right-div{
  z-index: 3;
  display: flex;
  justify-content: end;
 }
 @keyframes slideInFromRight {
  from {
      opacity: 0;
      transform: translateX(800px);
  }
  50%{
    opacity: 0.4;
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

/* Apply animation to course cards */
.rightimg {
  opacity: 0;  /* Initially hidden */
  animation: slideInFromRight 1.5s ease-out forwards;
}
 .left-content {
   font-size: 35px;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-weight: bold;
   text-align: start;
   margin-bottom: 15px;
 }

 .enquire-btn {
   display: flex;
   justify-content: start;
   align-items: start;
 }
 .enquire {
   display: flex;
   gap: 7px;
   justify-content: center;
   align-items: center;
   background-color: #4374dc;
   padding: 8px 28px;
   border-radius: 8px;
   border: none;
   color: white;
   font-size: 16px;
   text-align: center;
 }

 .enquire:hover .letter {
   animation-name: letter-veiw;
   animation-duration: 2.5s;
   animation-iteration-count: 1;
 }

 .enquire:hover .bi-arrow-right {
   animation-name: icon-scroll;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
 }

 @keyframes letter-veiw {

   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;

   }
 }

 @keyframes icon-scroll {

   0% {
     opacity: 0;
     transform: translateX(-200%);
   }

   100% {
     opacity: 1;
     transform: translateX(0%);
   }
 }

 .right-div {
   padding-left: 100px;
 }
 .lable-div {
   background-color: #4374DC;
   width: 100%;
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 50px;
   margin-top: 85px;
 }
 .icon-box {
   background-color: white;
   height: 70px;
   width: 70px;
   border-radius: 50%;
   font-size: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #8eb0f8;
 }

 .icon-title {
   margin-left: 15px;
   font-size: 30px;
   color: white
 }

 .icon-lable {
   margin-left: 15px;
   font-size: 17px;
   color: white;
   width: 180px;
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
   .left-content {
     font-size: 35px;
   }

   .icon-box {
     height: 70px;
     width: 70px;
     font-size: 30px;
   }

   .icon-title {
     font-size: 24px;
   }

   .icon-label {
     font-size: 18px;
   }
 }

 @media (max-width: 990px) {
   section {
     width: 100%;
     margin-left: 0;
   }

   .left-div {
     padding-left: 20px;
     text-align: center;
   }

   .left-content {
     font-size: 30px;
     margin-left: 0;
   }

   .enquire {
     font-size: 14px;
     padding: 6px 10px;
   }

   .right-div {
     padding-left: 20px;
   }

   .lable-div {
     flex-direction: row;
     height: auto;
     gap: 20px;
     padding: 20px 0;
   }

   .icon-box {
     height: 70px;
     width: 70px;
     font-size: 30px;
   }

   .icon-title {
     font-size: 25px;
     margin-left: 0;
   }

   .icon-lable {
     font-size: 16px;
     margin-left: 0;
   }
 }

 @media (max-width: 768px) {
   .lable-div {
     width: 100%;
     flex-direction: row;

     justify-content: center;

     margin-left: 120px;
     margin-right: 120px;

   }

   .lable-div div {

     display: flex;
     flex-direction: row;
     align-items: center;

   }

   .left-content {
     font-size: 28px;
   }

   .icon-box {
     height: 50px;
     width: 50px;
     font-size: 24px;
   }

   .icon-title {
     font-size: 20px;
   }

   .icon-lable {
     width: 100%;
     font-size: 14px;

   }
 }

 @media (max-width: 580px) {
   .top-part {
     flex-direction: column;
     height: 580px;
   }
.bgimg{
  display: none;

}
   .left-div {
     margin-top: 130px;
     width: 60%;
     margin-left: -130px;
     font-size: 36px;
   }

   .lable-div {
     gap: 33px;
     align-items: center;
   }

   .lable-div div {
     flex-direction: column;
   }

   .left-content {
     font-size: 18px;
   }

   .enquire {
     font-size: 10px;
     width: 120px;
     margin-bottom: 10px;

   }

   .lable-item {
     width: 100%;
     text-align: center;
     margin-top: 13px;

   }

   .icon-box {
     height: 65px;
     width: 65px;
     font-size: 25px;

   }

   .icon-title {
     font-size: 15px;
     width: 100%;

   }

   .icon-lable {
     width: 100%;

     font-size: 13px;
   }
 }







 /*rewards-container...........................*/
 .rewards-container {
   width: 100%;
 }

 .awards {
   font-size: 29px;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   margin-bottom: 50px;
 }

 .rewards {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 30px;
   padding-bottom: 60px;
   width: 100%;
   opacity: 0;
   transform: translateY(100px);
   transition: opacity 1s ease-out, transform 1s ease-out;
 }
 .row1{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
 }
.reward{
  border: 1px solid rgb(99, 98, 98);
  border-right:6px solid #4374DC;
  border-bottom: 6px solid #4374DC;
  width: 380px;
  height: 170px;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reward-logo{
  border: 1px solid rgb(99, 98, 98);
  border-right:7px solid #4374DC;
  border-bottom: 6px solid #4374DC;
  width: 400px;
  height: 170px;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  gap: 40px;
}
.reward-details{
  font-size: 18px;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: 600;
}
 

 .rewards-popup {
   opacity: 1;
   transform: translateY(0);
 }

 @keyframes rewards-popup {
   0% {
     opacity: 0;
     transform: translateY(30%);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }

 }

 /* Responsive Design */
 @media (max-width: 1024px) {
   .rewards {
     gap: 50px;
   }
   .reward{
    width: 310px;
   }

   .reward-icon {
     width: 180px;
     height: 110px;
   }

   .reward-icon img {
     width: 180px;
     height: 110px;
   }
 }

 @media (max-width: 990px) {
   .rewards {
     flex-wrap: wrap;
     gap: 40px;
   }
.align-logo{
  width: 60%;
}
   .reward ,.reward-logo{
    width: 330px;
   }

   .reward-content {
     font-size: 11px;
     padding-left: 12px;
     padding-right: 12px;
     color: rgb(57, 57, 57);
   }

   .reward-icon {
     width: 160px;
     height: 100px;
   }

   .reward-icon img {
     width: 160px;
     height: 100px;
   }
 }

 @media (max-width: 768px) {
   .rewards {
     flex-direction: row;
     gap: 40px;
   }

   .align-logo{
    width: 170px;
    height: 80px;

  }
     .reward ,.reward-logo{
      width: 290px;
      font-size: 15px;
     }

   .reward-content {
     font-size: 9px;
     padding-left: 12px;
     padding-right: 12px;
     color: rgb(57, 57, 57);
     text-align: center;
   }

   .reward-icon {
     width: 140px;
     height: 100px;
     margin-top: 5px;
   }

   .reward-icon img {
     width: 140px;
     height: 90px;
   }
 }

 @media (max-width: 580px) {
   .rewards {
     flex-direction: row;
     gap: 20px;
   }
   .row1{
    flex-direction: column;
   }
   .align-logo{
    width: 180px;
    

  }
     .reward ,.reward-logo{
      width: 330px;
     height: 170px;
     font-size: 20px;
     }
   

   .reward-content {
     font-size: 7px;
     padding-left: 13px;
     padding-right: 13px;
     color: rgb(57, 57, 57);
     text-align: center;
   }

   .reward-icon {
     width: 120px;
     height: 80px;
   }

   .reward-icon img {
     width: 120px;
     height: 80px;
   }
 }











 /*for-students part.................................*/
 .for-student-section {
   width: 100%;
 }

 .student-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 22px;
   width: 280px;
   text-align: center;
 }

 .student-item {
   display: flex;
   flex-direction: row;
   gap: 70px;
   align-items: center;
   justify-content: center;
 }

 .stu-img1,
 .stu-img2,
 .stu-img3 {
   border-radius: 50%;
   opacity: 0;
   transform: scale(0.5);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }

 .category {
   font-size: 25px;
   font-family: Arial, Helvetica, sans-serif;
   color: #4374dc;
   font-weight: bold;

 }

 .img-popup {
   opacity: 1;
   transform: scale(1);
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
   .student-card {
     width: 260px;
     gap: 18px;
   }

   .stu-img1,
   .stu-img2,
   .stu-img3 {
     width: 200px;
     height: 200px;
   }

   .line {
     width: 40%;
   }

   .category {
     font-size: 20px;
   }

   .student-card p {
     font-size: 13px;
   }
 }

 @media (max-width: 990px) {
   .student-card {
     width: 240px;
     gap: 15px;
   }

   .stu-img1,
   .stu-img2,
   .stu-img3 {
     width: 200px;
     height: 200px;
   }

   .student-item {
     gap: 30px;
   }

   .category {
     font-size: 20px;
   }

   .student-card p {
     font-size: 12px;
   }

 }

 @media (max-width: 768px) {
   .student-card {
     width: 220px;
     gap: 12px;
   }

   .title {
     font-size: 30px;
   }

   .category {
     font-size: 18px;
   }

   .stu-img1,
   .stu-img2,
   .stu-img3 {
     width: 120px;
     height: 120px;
   }

   .student-item {
     gap: 27px;
   }

   .student-card p {
     font-size: 12px;
   }
 }

 @media (max-width: 580px) {
   .student-card {
     width: 270px;
     gap: 10px;
   }

   .title {
     font-size: 25px;
     margin-bottom: -5px;
   }

   .category {
     font-size: 20px;
   }

   .stu-img1,
   .stu-img2,
   .stu-img3 {
     width: 290px;
     height: 290px;
   }

   .student-item {
     display: flex;
     flex-direction: column;
   }

   .student-card p {
     font-size: 16px;

     width: 100%;
   }
 }











 /*for institutes..................................*/
 .for-institution,
 .for-timeline,
 .for-student {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 80px;
   font-size: 33px;
   font-family: 'Times New Roman', Times, serif;
   margin-top: 50px;

 }

 .for-institution .line,
 .for-timeline .line,
 .for-student .line {
   width: 70%;
   height: 1px;
   background-color: rgb(197, 196, 196);
 }

 .for-institution .title,
 .for-timeline .title,
 .for-student .title {
   margin-top: -29px;
   background-color: white;
   padding-left: 10px;
   padding-right: 10px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 .int-cards{
  
  width: 70%;
  margin: auto;
 }
 

 .card {
   width: 300px;
   text-align: center;
   padding: 10px;
   height: 800px;

 }

 .card-body h5 {
   color: #040e98;
   font-weight: bold;
   margin-bottom: 10px;
 }

 .card:hover {
   animation-name: pop-up;
   animation-duration: 1.2s;
   animation-iteration-count: 1;
   box-shadow: 1px 1px 10px gray;
 }

 @keyframes pop-up {
   0% {
     transform: scale(1);
   }

   100% {
     transform: scale(1.1);
   }
 }

 /* Responsive Styles */
 @media (max-width: 1024px) {
   .card {
     width: 280px;
     height: auto;
   }

   .for-institution,
   .for-timeline,
   .for-student {
     font-size: 27px;
   }
 }

 @media (max-width: 990px) {
   .card {
     width: 230px;
     padding: 20px;
   }

   .for-institution,
   .for-timeline,
   .for-student {
     font-size: 20px;
   }

   .card img {
     height: 200px;
   }
 }

 @media (max-width: 768px) {
   .card {
     width: 200px;
     height: auto;
   }

   .for-institution,
   .for-timeline,
   .for-student {
     font-size: 25px;
     text-align: center;
   }

   .card img {
     height: 180px;
   }
 }

 @media (max-width: 580px) {
   .card {
     width: 100%;
    margin-bottom: 20px;
     height: auto;
   }
   .card img{
    height: 235px;
   }

   .int-cards {
     flex-direction: column;
     align-items: center;
   }

   .for-institution,
   .for-timeline,
   .for-student {
     font-size: 22px;
   }
 }








 /*institution partner carousel*/
 .partner-heading {
   text-align: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: rgb(255, 255, 255);
   font-size: 33px;
   font-weight: 640;
   margin-top: 50px;
   padding-top: 30px;
 }

 .carousel-divs {
   overflow-x: hidden;
   width: 100vw;
   position: relative;
   background: white;
   padding: 20px 0;
 }

 .carousel-tracks{
   overflow-x: hidden;
   display: flex;
   width: 300%;
   gap: 100px;
   animation: scrolls 16s linear infinite;
   background-color: white
 }

 .carousel-items {
   width: 350px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.5s ease;
 }

 .carousel-items img {
   border-radius: 10px;
   height: 140px;
 }

 @keyframes scrolls {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-40%);
   }
 }

 @media (max-width: 1024px) {
   .partner-heading {
     font-size: 30px;
   }

   .carousel-div {
     overflow-x: hidden;
     width: 100%;
     position: relative;
     background: rgb(255, 255, 255);
     padding: 20px 0;

   }

   .carousel-track {
     display: flex;
     width: 100%;
     animation: scrolls 13s linear infinite;
     background-color: white;

   }

   .carousel-items {
     width: 300px;
   }

   .carousel-items img {
     height: 120px;
   }
 }

 @media (max-width: 990px) {
   .partner-heading {
     font-size: 28px;
   }

   .carousel-items {
     width: 280px;
   }

   .carousel-items img {
     height: 110px;
   }
 }

 @media (max-width: 768px) {
   .partner-heading {
     font-size: 24px;
   }

   .carousel-items {
     width: 250px;
   }

   .carousel-items img {
     height: 100px;
   }

   @keyframes scrolls {
     from {
       transform: translateX(0);
     }

     to {
       transform: translateX(-50%);
     }
   }
 }

 @media (max-width: 580px) {
   .partner-heading {
     font-size: 20px;
   }

   .carousel-items {
     width: 200px;
   }

   .carousel-items img {
     height: 90px;
   }

   @keyframes scrolls {
     from {
       transform: translateX(0);
     }

     to {
       transform: translateX(-60%);
     }
   }
 }













 /*comapany carousel*/

 .associated-heading {
   text-align: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: rgb(255, 255, 255);
   font-size: 22px;
   font-weight: 600;
   margin-top: 50px;
   padding-top: 15px;
 }

 /* Carousel Container */
 .carousel-div {
   overflow: hidden;
   width: 100%;
   position: relative;
   background: rgb(255, 255, 255);
   padding: 20px 0;

 }

 /* Carousel Track */
 .company-track {
   display: flex;
   width: 100%;
   animation: companyscroll 13s linear infinite;
   background-color: white;
   gap: 70px;
 }

 /* Individual Slide */
 .carousel-companylogos {
   width: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.5s ease;
   height: 100px;

 }

 .carousel-companylogos img {
   border-radius: 10px;

   width: 140px;

 }

 /* Continuous Scroll Animation */
 @keyframes companyscroll {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-30%);
   }
 }

 @media (max-width: 1024px) {
   .associated-heading {
     font-size: 30px;
   }

   .carousel-div {
     overflow-x: hidden;
     width: 100%;
     position: relative;
     background: rgb(255, 255, 255);
     padding: 20px 0;

   }

 }

 @media (max-width: 990px) {
   .associated-heading {
     font-size: 28px;
   }

 }

 @media (max-width: 768px) {
   .associated-heading {
     font-size: 24px;
   }

 }

 @media (max-width: 580px) {
   .associated-heading {
     font-size: 20px;
   }

 }







 /*content-6 part..............(section)*/
 /* .content-header{
    text-align: center;
    padding: 55px 0px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 30px;
}
.content-6 {
    display: flex;
    margin: 30px 300px;
    gap :60px;
    text-align: center;
}
.content-6-odd {
    display: flex;
    flex-direction: row-reverse;
    margin: 30px 200px;
    gap :60px;
    text-align: center;
}
.content6-heading{
    font-size: 28px;
    font-weight: bold;
    padding: 13px 0px;
    color: #1103a8;

} */



 /*time-line code...................*/

 .content-header {
   text-align: center;
   padding: 55px 0px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 30px;
 }

 * {
   box-sizing: border-box;
 }





 h2 {
   margin: 5%;
   text-align: center;
   font-size: 2rem;
   font-weight: 100;
 }

 .timeline {
   display: flex;
   flex-direction: column;
   margin: 20px auto;
   position: relative;
 }

 .timeline__event {
   margin-bottom: 20px;
   display: flex;
   margin: 20px 0;
   border-radius: 6px;
   align-self: center;
   width: 57vw;

   opacity: 0;
   transform: translateX(-100%);
   transition: transform 2s ease, opacity 2s ease;
 }

 .timeline__event.timelineright {
   transform: translateX(100%);
 }

 .timeline__event.show {
   opacity: 1;
   transform: translateX(0);
 }

 .timeline__event:nth-child(2n+1) {
   flex-direction: row-reverse;
 }

 .timeline__event:nth-child(2n+1) .timeline__event__date {
   border-radius: 0 6px 6px 0;
 }

 .timeline__event:nth-child(2n+1) .timeline__event__content {
   border-radius: 6px 0 0 6px;
 }

 .timeline__event:nth-child(2n+1) .timeline__event__icon:before {
   content: "";
   width: 2px;
   height: 100%;
   background: #f6a4ec;
   position: absolute;
   top: 0%;
   left: 50%;
   right: auto;
   z-index: -1;
   transform: translateX(-50%);
   -webkit-animation: fillTop 2s forwards 4s ease-in-out;
   animation: fillTop 2s forwards 4s ease-in-out;
 }

 .timeline__event:nth-child(2n+1) .timeline__event__icon:after {
   content: "";
   width: 100%;
   height: 2px;
   background: #f6a4ec;
   position: absolute;
   right: 0;
   z-index: -1;
   top: 50%;
   left: auto;
   transform: translateY(-50%);
   -webkit-animation: fillLeft 2s forwards 4s ease-in-out;
   animation: fillLeft 2s forwards 4s ease-in-out;
 }

 .timeline__event__title {
   font-size: 1.2rem;
   line-height: 1.4;
   text-transform: uppercase;
   font-weight: 600;
   color: #9251ac;
   letter-spacing: 1.5px;
 }

 .timeline__event__content {
   padding: 20px;
   box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
   background: #fff;
   width: calc(40vw - 84px);
   border-radius: 0 6px 6px 0;
 }

 .timeline__event__date {
   color: #f6a4ec;
   font-size: 1.5rem;
   font-weight: 600;
   background: #9251ac;
   display: flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   padding: 0 20px;
   border-radius: 6px 0 0 6px;
 }

 .timeline__event__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9251ac;
   padding: 20px;
   align-self: center;
   margin: 0 20px;
   background: #f6a4ec;
   border-radius: 100%;
   width: 40px;
   box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
   padding: 40px;
   height: 40px;
   position: relative;
 }

 .timeline__event__icon:before {
   content: "";
   width: 2px;
   height: 100%;
   background: #f6a4ec;
   position: absolute;
   top: 0%;
   z-index: -1;
   left: 50%;
   transform: translateX(-50%);
   -webkit-animation: fillTop 2s forwards 4s ease-in-out;
   animation: fillTop 2s forwards 4s ease-in-out;
 }

 .timeline__event__icon:after {
   content: "";
   width: 100%;
   height: 2px;
   background: #f6a4ec;
   position: absolute;
   left: 0%;
   z-index: -1;
   top: 50%;
   transform: translateY(-50%);
   -webkit-animation: fillLeftOdd 2s forwards 4s ease-in-out;
   animation: fillLeftOdd 2s forwards 4s ease-in-out;
 }

 .timeline__event__description {
   flex-basis: 60%;
   color: rgb(119, 119, 119);
   font-size: 16px;
 }

 .timeline__event--type2:after {
   background: #555ac0;
 }

 .timeline__event--type2 .timeline__event__date {
   color: #87bbfe;
   background: #555ac0;
 }

 .timeline__event--type2:nth-child(2n+1) .timeline__event__icon:before,
 .timeline__event--type2:nth-child(2n+1) .timeline__event__icon:after {
   background: #87bbfe;
 }

 .timeline__event--type2 .timeline__event__icon {
   background: #87bbfe;
   color: #555ac0;
 }

 .timeline__event--type2 .timeline__event__icon:before,
 .timeline__event--type2 .timeline__event__icon:after {
   background: #87bbfe;
 }

 .timeline__event--type2 .timeline__event__title {
   color: #555ac0;
 }

 .timeline__event--type3:after {
   background: #24b47e;
 }

 .timeline__event--type3 .timeline__event__date {
   color: #aff1b6;
   background-color: #24b47e;
 }

 .timeline__event--type3:nth-child(2n+1) .timeline__event__icon:before,
 .timeline__event--type3:nth-child(2n+1) .timeline__event__icon:after {
   background: #aff1b6;
 }

 .timeline__event--type3 .timeline__event__icon {
   background: #aff1b6;
   color: #24b47e;
 }

 .timeline__event--type3 .timeline__event__icon:before,
 .timeline__event--type3 .timeline__event__icon:after {
   background: #aff1b6;
 }

 .timeline__event--type3 .timeline__event__title {
   color: #24b47e;
 }



 .timeline__event--type5:after {
   background: #b4aa24;
 }

 .timeline__event--type5 .timeline__event__date {
   color: #f5eb93;
   background-color: #b4aa24;
 }

 .timeline__event--type5:nth-child(2n+1) .timeline__event__icon:before,
 .timeline__event--type5:nth-child(2n+1) .timeline__event__icon:after {
   background: #f5eb93;
 }

 .timeline__event--type5 .timeline__event__icon {
   background: #f5eb93;
   color: #b4aa24;
 }

 .timeline__event--type5 .timeline__event__icon:before,
 .timeline__event--type5 .timeline__event__icon:after {
   background: #f5eb93;
 }

 .timeline__event--type5 .timeline__event__title {
   color: #b4aa24;
 }


 .timeline__event:last-child .timeline__event__icon:before {
   content: none;

 }

 @media (max-width: 786px) {
   .timeline__event {
     flex-direction: row;
     align-self: center;
   }

   .timeline__event__content {
     width: 100%;
     height: 160px;
   }

   .timeline__event__date {
     height: 160px;
   }

   .timeline__event__icon {
     border-radius: 6px 6px 0 0;
     width: 100%;
     margin: 0;
     box-shadow: none;
   }

   .timeline__event__icon:before,
   .timeline__event__icon:after {
     display: none;
   }

   .timeline__event__date {
     border-radius: 0;
     padding: 20px;
   }

   .timeline__event:nth-child(2n+1) {
     flex-direction: row-reverse;
     align-self: center;
   }

   .timeline__event:nth-child(2n+1) .timeline__event__date {
     border-radius: 0;
     padding: 20px;
   }

   .timeline__event:nth-child(2n+1) .timeline__event__icon {
     border-radius: 6px 6px 0 0;
     margin: 0;
   }
 }

 @-webkit-keyframes fillLeft {
   100% {
     right: 100%;
   }
 }

 @keyframes fillLeft {
   100% {
     right: 100%;
   }
 }

 @-webkit-keyframes fillTop {
   100% {
     top: 100%;
   }
 }

 @keyframes fillTop {
   100% {
     top: 100%;
   }
 }

 @-webkit-keyframes fillLeftOdd {
   100% {
     left: 100%;
   }
 }

 @keyframes fillLeftOdd {
   100% {
     left: 100%;
   }
 }

 @media (max-width: 1024px) {
   .timeline__event {
     width: 65vw;
     height: 190px;
   }

   .timeline__event__content {
     width: calc(45vw - 84px);
   }

   .timeline__event__description {
     font-size: 14px;
   }
 }

 @media (max-width: 990px) {
   .timeline {
     gap: 20px;
   }

   .timeline__event {
     width: 78vw;
     font-size: 10px;
     height: 210px;
     margin-top: -7px;
   }

   .timeline__event__icon {
     display: none;
   }

   .timeline__event__content {
     width: calc(50vw - 84px);
   }

   .timeline__event__description {
     font-size: 14px;
   }
 }

 @media (max-width: 768px) {
   .timeline {
     width: 100vw;
     gap: 10px;
   }

   .timeline__event,
   .timelineleft {
     width: 100%;
     flex-direction: row;
     text-align: center;
     align-items: center;

   }

   .timeline__event__icon {
     display: none;
   }

   .timeline__event__content {
     width: 100%;
     padding: 15px;

   }

   .timeline__event__title {
     font-size: 16px;
   }

   .timeline__event__date img {
     width: 113px;
     height: 113px;
   }

   .timeline__event__description {
     font-size: 15px;
   }
 }

 @media (max-width: 580px) {
   .timeline {
     width: 100vw;
     gap: 10px;
   }

   .timeline__event,
   .timelineleft {
     width: 100%;
     flex-direction: row;
     text-align: center;
     align-items: center;

   }

   .timeline__event__icon {
     display: none;
   }

   .timeline__event__content {
     width: 100%;
     padding: 15px;
   }

   .timeline__event__title {
     font-size: 16px;
   }

   .timeline__event__date img {
     width: 112px;
     height: 112px;
   }

   .timeline__event__description {
     font-size: 13px;
   }
 }






 @media (max-width: 430px) {
   .timeline__event__description {
     font-size: 11px;
     color: #4e4d4d;
   }
 }

 /* @keyframes timeline {} */








 /*program packages........................*/
 .portfolio-div {
   padding-top: 50px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 40px;
   width: 100%;
 }

 .packages-type {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 80px;
   font-size: 33px;
   font-family: 'Times New Roman', Times, serif;
   margin-top: 50px;
   width: 100%;
 }

 .packages-type .line {
   width: 70%;
   height: 1px;
   background-color: rgb(197, 196, 196);
 }

 .packages-type .title {
   margin-top: -29px;
   background-color: white;
   padding-left: 10px;
   padding-right: 10px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
 }

 .nav-item {
   margin-left: 60px;
   margin-right: 60px;
   width: 170px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   border-radius: 9px;
   font-size: 18px;
 }

 .item1 {
   background: #8198e2;
 }

 .item2 {
   background: #dd7487;
 }

 .item3 {
   background: #70dead;
   ;
 }

 .item1 span,
 .item2 span,
 .item3 span {
   padding-right: 7px;
 }

 .program-title {
   font-size: 17px;
   font-weight: bold;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .package-timeline {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;

 }

 /* The actual timeline (the vertical ruler) */
 .package-timeline::after {
   content: '';
   position: absolute;
   width: 2px;
   background-color: rgb(177, 177, 177);
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -3px;
 }

 .part1 {
   background-color: #aacff7;
 }

 .part2,
 .part7,
 .part13 {
   background-color: #f9eba7;
 }

 .part3 {
   background-color: #ddacf8;
 }

 .part4 {
   background-color: #9ae5f5;
 }

 .part5,
 .part8 {
   background-color: #f9cfa7;
 }

 .part6 {
   background-color: #b3c2f9;
 }

 .part9 {
   background-color: #acf8c7;
 }

 .part10 {
   background-color: #f7aee0;
 }

 .part11 {
   background-color: #a7f9e2;
 }

 .part12 {
   background-color: #b3c2f9;
 }

 /* Container around content */
 .containers {
   padding: 10px 10px;
   position: relative;
 }

 /* The circles on the timeline */
 .containers::after {
   content: '';
   position: absolute;
   width: 20px;
   height: 20px;
   right: -58px;
   background-color: #61D4E8;
   border: 4px solid #1ea6fa;
   top: 15px;
   border-radius: 50%;
   z-index: 1;
 }

 /* Place the container to the left */
 .left {
   left: -62%;
 }

 /* Place the container to the right */
 .right {
   left: 62%;
 }

 /* Add arrows to the left container (pointing right) */
 .left::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 17px;
   width: 0;
   z-index: 1;
   right: -10px;
   border: medium solid white;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent rgb(211, 211, 212);
 }

 /* Add arrows to the right container (pointing left) */
 .right::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 17px;
   width: 0;
   z-index: 1;
   left: -10px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
   border-color: transparent rgb(211, 211, 212) transparent transparent;
 }

 /* Fix the circle for containers on the right side */
 .right::after {
   left: -62px;
 }

 /* The actual content */
 .content {
   padding: 10px 17px;
   position: relative;
   border-radius: 6px;
   font-size: 10px;
   width: 400px;
 }

 .item1:hover,
 .item2:hover,
 .item3:hover {
   background: rgb(174, 174, 174);
   transform: scale(1.05);
 }
 .hidden {
  display: none;
}
.more-details {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

 /* Media queries - Responsive timeline on screens less than 600px wide */
 @media screen and (max-width: 1024px) {
   .portfolio-div {
     padding-top: 40px;
     gap: 30px;
   }

   .portfolio-top-div {
     font-size: 28px;
   }

   .nav-bar {
     flex-direction: row;
     align-items: center;
     justify-content: center;
     width: 100%;
   }

   .nav-item {
     font-weight: 18px;
     width: 130px;
     height: 40px;
     border-radius: 12px;
     margin-left: 40px;
     margin-right: 40px;
     font-size: 14px;
   }

   .content {
     width: 350px;
     font-size: 12px;
   }

   .left {
     left: -65%;
   }

   .right {
     left: 65%;
   }
 }

 @media screen and (max-width: 990px) {
   .portfolio-div {
     padding-top: 35px;
     gap: 25px;
   }

   .portfolio-top-div {
     font-size: 26px;
   }

   .nav-bar {
     flex-direction: row;
     align-items: center;
     justify-content: center;
     width: 100%;
   }

   .nav-item {
     font-size: 13px;
     width: 120px;
     height: 36px;
     border-radius: 7px;
     margin-left: 20px;
     margin-right: 20px;
   }

   .content {
     width: 320px;
     font-size: 11px;
   }

   .left {
     left: -70%;
   }

   .right {
     left: 70%;
   }
 }

 @media screen and (max-width: 768px) {
   .portfolio-div {
     flex-direction: column;
     align-items: center;
     gap: 20px;
   }

   .portfolio-top-div {
     font-size: 24px;
   }

   .nav-bar {
     flex-direction: row;
     align-items: center;
     gap: 30px;
     width: 100%;

   }

   .nav-item {
     font-size: 12px;
     width: 115px;
     height: 32px;
     border-radius: 7px;
     margin-left: 20px;
     margin-right: 20px;
   }

   .package-timeline::after {
     left: 20px;
   }

   .containers {
     width: 100%;
     padding-left: 40px;
   }

   .left,
   .right {
     left: 0;
   }

   .right::after,
   .left::after {
     left: 10px;
   }

   .content {
     width: 90%;
     font-size: 12px;
   }
 }

 @media screen and (max-width: 580px) {
   .portfolio-top-div {
     font-size: 22px;
   }

   .nav-bar {
     width: 100%;
     display: flex;
     flex-direction: row;
     gap: 10px;

   }

   .nav-item {
     font-size: 11px;
     width: 100px;
     height: 32px;
     border-radius: 4px;
     margin-left: 20px;
     margin-right: 20px;
   }

   .package-timeline::after {
     left: 45px;
   }

   .containers {
     width: 90%;
     padding-left: 30px;
   }

   .content {
     width: 100%;
     font-size: 10px;
   }

   .left,
   .right {
     left: 25px;
   }

   .left::before,
   .right::before {
     display: none;
   }

   .right::after,
   .left::after {
     left: 8px;
   }
 }
 @media screen and (max-width: 441px) {
  .nav-item{
    width: 100%;
font-size: 16px;

  }
 }










 /*subscription-table*/
 .subscription-content {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 50px;
 }

 .subscription-table {
   width: 55%;
   display: flex;
   flex-direction: row;
   justify-content: start;
   grid-gap: 2px;
   position: relative;
   height: 600px;
   gap: 40px;

 }
 

 /* .packages {
   width: 47%;
   box-shadow: 3px 0px 10px gray;
   border-radius: 15px;
   position: absolute;
   z-index: 4;
 }

 .free {
   width: 30%;
   position: absolute;
   box-shadow: 3px 0px 10px gray;
   border-radius: 15px;
   z-index: 3;
   left: 47%;
 }

 .paid {
   width: 23%;
   position: absolute;
   box-shadow: 3px 0px 10px gray;
   border-radius: 15px;
   z-index: 2;
   left: 77%;
 }

 .subc-head {
   display: flex;
   flex-direction: column;
   height: 140px;
   background-color: #4c54ae;
   border-radius: 15px;
   text-align: center;
   justify-content: center;
   color: white;
   font-size: 37px;
   font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
 }

 .headpart1 {
   font-size: 32px;
   font-family: 'Courier New', Courier, monospace;
   font-weight: 700;
 }

 .headpart2 {
   font-family: Courier New, Courier, monospace;
   font-size: 23px;
   font-weight: 300;
 }

 .headpart2 div {
   font-family: Courier New, Courier, monospace;
   font-size: 13px;
   font-weight: 300;
 }

 .paid-title {
   font-size: 24px;
 }

 .table-line {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color: rgb(4, 17, 159);
   height: 50px;
   border-bottom: 1px solid rgb(161, 159, 159);
 }

 .package-line {
   font-size: 20px;
   color: #333;
 }

 .table-line:nth-child(odd) {
   background-color: rgb(240, 240, 240);
 }

 .small-box::before {
   content: "";
   height: 22px;
   width: 12px;
   background-color: #8288ca;
   left: -13px;
   position: absolute;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }

 .btn-line {
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #8288ca;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 15px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
 }

 .packages a,
 .free a,
 .paid a {
   text-decoration: none;
   color: white;
   font-size: 18px;
 } */
  .sub-toppart{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
 .freesubscription,.paidsubscription{
  width: 50%;
  border: 1px solid #4374DC;
  border-radius: 13px;
  height: 520px;
  padding: 20px;display: flex;
  gap: 20px;
  flex-direction: column;
 }
.sub-title{
  font-size: 30px;
}
.features{
  padding-left: 10px;
  color:rgb(123, 123, 123)
}
.price{
  font-size: 28px;
}
.sub-details{
  display: flex;
  
  justify-content: space-between;
}

.freesubscription button,.paidsubscription button{
  width: 100%;
  background-color:#4374DC ;
  border: none;
  height: 40px;
  border-radius: 11px;
  color: white;
}
.freesubscription:hover > .features,
.paidsubscription:hover > .features{
  color: white;
}
.freesubscription:hover > div > .buttons,
.paidsubscription:hover > div > .buttons{
  color:#4374DC;
  background-color:white;
}
.freesubscription:hover,.paidsubscription:hover{
  background-color: #4374DC;
  color: white; 
}
 /* Responsive Design */
 @media (max-width: 1200px) {
   .subscription-table {
     width: 85%;
   }

   .subc-head {
     font-size: 22px;
   }

   .packages {
     width: 50%;

   }

   .table-line {
     height: 50px;
   }

   .table-line img {
     width: 21px;
     height: 21px;
   }

   .free {
     width: 30%;

   }

   .paid {
     width: 20%;

   }

   .headpart1 {
     font-size: 23px;
   }

   .headpart2 {
     font-size: 20px;
   }

   .table-line {
     font-size: 16px;
   }

   .packages a,
   .free a,
   .paid a {

     text-decoration: none;
     color: white;
     font-size: 18px;
   }
 }

 @media (max-width: 1024px) {
   .subscription-table {
     width: 75%;
     height: auto;
     flex-direction: row;
     align-items: center;
   }

   .packages {
     width: 50%;
     position: static;
     margin-bottom: 20px;
   }

   .free {
     width: 30%;
     position: static;
     margin-bottom: 20px;
   }

   .paid {
     width: 20%;
     position: static;
     margin-bottom: 20px;
   }
 }

 @media (max-width: 990px) {
   .subscription-table {
     width: 85%;
   }

   .subc-head {
     font-size: 22px;
   }

   .packages {
     width: 50%;

   }

   .table-line {
     height: 38px;
   }

   .table-line img {
     width: 21px;
     height: 21px;
   }

   .free {
     width: 30%;

   }

   .paid {
     width: 20%;

   }

   .headpart1 {
     font-size: 19px;
   }

   .headpart2 {
     font-size: 19px;
   }

   .table-line {
     font-size: 15px;
   }

   .packages a,
   .free a,
   .paid a {

     text-decoration: none;
     color: white;
     font-size: 16px;
   }
 }

 @media (max-width: 768px) {
   .subscription-table {
     width: 80%;
   }

   .subc-head {
     font-size: 22px;
   }

   .packages {
     width: 50%;

   }

   .table-line {
     height: 35px;
   }

   .table-line img {
     width: 20px;
     height: 20px;
   }

   .free {
     width: 25%;

   }

   .paid {
     width: 25%;

   }

   .headpart1 {
     font-size: 18px;
   }

   .headpart2 {
     font-size: 18px;
   }

   .table-line {
     font-size: 14px;
   }

   .packages a,
   .free a,
   .paid a {

     text-decoration: none;
     color: white;
     font-size: 13px;
   }
 }

 
  @media (max-width: 580px) {
    .subscription-table {
      display: flex;
      flex-direction: column;
      overflow-x: auto;
      
      width: 100%;
      gap: 30px;
      padding: 20px 30px;
    }
  
    .freesubscription, .paidsubscription {
      width: 100%;
      flex: 0 0 auto;
      scroll-snap-align: center;
    }
  }
  
 
 /* @media screen and (max-width: 431px) {
  .subscription-content{
    display: none;
  }

 } */
 /*subscription for phone responsive*/
 .phone-subscription{
  display: none;
 }
 @media screen and (max-width: 431px) {
  .phone-subscription{
    display: block;
    
    width: 100%;
   }
   .plans{
    width: 100%;
    
    padding-left: 30px;
    padding-right: 30px;
   }
   .free-plan{
    width: 100%;
    border-radius: 16px;
    color: rgb(240, 240, 240);
    border-top: 1px solid rgb(215, 215, 215);
    border-left: 1px solid rgb(215, 215, 215);
    border-right: 1px solid rgb(215, 215, 215);
    padding: 10px 17px 10px 17px;
    background-color: #939afa;
    

   }
   .price-tag{
    height: 45px;
    display: flex;
    justify-content: space-between;
    
   }
   .price{
    font-size: 26px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 600;

   }
   .plan-items{
    font-size: 14px
   }
   .basic-plan{
    border-radius: 6px;
    border: 1px solid rgb(67, 119, 250);
    background-color: rgb(67, 119, 250);
    font-size: 11px;
    width: 67px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
   }
  }

 






 /*highlights.................................*/
 .highlights-div .highlight-heading {
   font-size: 3.5rem;
   font-weight: 400;
   color: #333;
   text-align: center;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }



 .highlights-div .highlights-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   max-width: 960px;
   margin: auto;
 }

 .highlights-div .highlights {
   display: flex;
   gap: 10px;
   overflow: hidden;
   width: 100%;
   position: relative;
   padding-top: 10px;
   padding-bottom: 10px;

 }

 .highlights-div .highlights-inner {
   display: flex;
   transition: transform 0.5s ease-in-out;


 }

 .highlights-div .testimonial {
   width: 300px;
   padding: 5px 10px 10px 10px;
   border-radius: 10px;
   box-shadow: 6px 3px 10px rgba(0, 0, 0, 0.2);
   margin-left: 10px;
   margin-right: 10px;
   border: 1px solid rgb(229, 229, 229);
 }

 .highlights-div .buttons {
   display: flex;
   gap: 10px;
 }

 .highlights-div button {
   padding: 5px 10px;
   border: none;
   background-color: #007BFF;
   color: white;
   border-radius: 5px;
   cursor: pointer;
   height: 40px;
   width: 100px;
 }

 .highlights-div button:disabled {
   background-color: gray;
   cursor: not-allowed;
 }

 .highlights-div .buttons {
   display: flex;
   gap: 50px;
   margin-top: 30px;
 }

 .bi-quote {
   font-size: 70px;
   color: gray;
   text-align: start;
   color: #739aee;
 }

 .testimonial-text {
   font-size: 1rem;
   color: #333;
   font-family: 'Times New Roman', Times, serif;
 }

 .profile-img {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   object-fit: cover;
 }

 .profile-info {
   margin-left: 10px;
   color: #d2d2d2;
 }

 .profile-name {
   font-weight: bold;
   margin-bottom: 0;
 }

 .profile-role {
   font-size: 0.9rem;
   color: gray;
 }

 /* RESPONSIVE DESIGN */

 /* Adjust for tablets and small desktops */
 @media (max-width: 1024px) {
   .highlights-div .highlights-container {
     max-width: 850px;
   }

   .highlights-div .testimonial {
     width: 280px;
   }
 }

 /* Adjust for smaller tablets */
 @media (max-width: 990px) {
   .highlights-div .highlights-container {
     max-width: 750px;
   }

   .highlights-div .testimonial {
     width: 260px;
   }
 }

 /* Adjust for mobile devices */
 @media (max-width: 768px) {
   .highlights-div .highlights-container {
     max-width: 600px;
   }

   .highlights-div .testimonial {
     width: 240px;
     padding: 10px;
   }

   .bi-quote {
     font-size: 50px;
   }

   .testimonial-text {
     font-size: 0.9rem;
   }

   .profile-img {
     width: 50px;
     height: 50px;
   }

   .highlights-div .buttons {
     gap: 15px;
   }
 }

 /* Adjust for extra small screens */
 @media (max-width: 580px) {
   .highlights-div .highlights-container {
     max-width: 420px;
     margin-left: 20px;
     
   }

   .highlights-div .testimonial {
     width: 300px;
     height: 250px;
   }
   .highlights-div{
    width: 320px;
   }

   .bi-quote {
     font-size: 40px;
   }

   .testimonial-text {
     font-size: 0.85rem;
   }

   .profile-img {
     width: 45px;
     height: 45px;
   }

   .highlights-div .buttons {
     flex-direction: column;
     align-items: center;
   }

   .highlights-div button {
     width: 80%;
   }
   .highlights-div .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 50px;
    width: 100%;
  }
  #prev,
 #next {
   padding: 5px;
  
   width: 100px;
 }  
 }


 /* #prev,
 #next {
   padding: 5px;
   border: none;
   background-color: #007BFF;
   color: white;
   border-radius: 5px;
   cursor: pointer;
   width: 100px;
 }   */

 /* #prev:disabled, #next:disabled {
   background-color: gray;
   cursor: not-allowed;
 } */












 /*form-container..................................*/
 .container {
   width: 500px;
   margin-bottom: 60px;
   display: flex;
   border-radius: 15px;
   flex-direction: row;
   gap: 50px;
   justify-content: space-between;
   margin-top: 70px;

 }


 .query-container {
   display: flex;
   flex-direction: column;
   background-color: #4374dc;
   width: 490px;
   padding: 30px;
   border-radius: 14px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .form-container h2 {
   font-size: 28px;
   margin-bottom: 20px;

 }

 .query-container div {
   display: flex;
   flex-direction: column;
   width: 85%;
 }

 .query-container input {
   background-color: #f0f1ff;
   /* Light background */
   border: none;
   padding: 5px;
   width: 100%;
   font-size: 16px;
   margin-bottom: 15px;
   border-radius: 5px;

 }

 textarea {
   background-color: #f0f1ff;
   /* Light background */
   border: none;
   padding: 5px;
   width: 100%;
   font-size: 16px;
   margin-bottom: 15px;
   border-radius: 5px;
 }

 .query-container textarea {
   height: 120px;
   resize: none;
 }






 .file-upload {
   display: flex;
   align-items: start;
   flex-direction: row;



   font-size: 15px;
 }

 .file-upload label {
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: bold;
 }

 .file-upload input {
   display: none;
 }

 .file-list {
   font-size: 14px;
   color: lightgray;
 }

 .condition-checkbox {
   display: flex;
   margin-bottom: 15px;
   font-size: 12px;
 }

 .condition-checkbox input {
   margin-bottom: -5px;
   width: 18px;
   height: 18px;
 }

 .submit-btn {
   background-color: white;
   color: black;
   font-size: 18px;
   padding: 12px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   width: 100%;
   font-weight: bold;
 }

 .submit-btn:hover {
   background-color: #ddd;
 }

 .recaptcha {
   font-size: 12px;
   color: lightgray;
   margin-top: 15px;
   display: flex;
   width: 50%;
 }

 .text-container {
   flex: 1;
 }

 .text-container h2 {
   font-size: 28px;
   margin-bottom: 10px;
   text-align: center;
 }

 .text-container p {
   font-size: 16px;
   line-height: 1.5;
 }

 .text-container img {
   width: 80%;
   margin-left: 70px;
 }

 @media (max-width: 1024px) {
   .container {
     width: 450px;
   }

   .query-container {
     width: 380px;
   }
 }

 /* Medium Screens (990px and up) */
 @media (max-width: 990px) {
   .container {
     width: 420px;
   }

   .query-container {
     width: 360px;
   }

   .text-container img {
     width: 70%;
     margin-left: 50px;
   }
 }

 /* Tablets (768px and up) */
 @media (max-width: 768px) {
   .container {
     width: 380px;
   }

   .query-container {
     width: 320px;
     padding: 20px;
   }

   .text-container h2 {
     font-size: 24px;
   }

   .text-container p {
     font-size: 14px;
   }

   .submit-btn {
     font-size: 16px;
     padding: 10px;
   }

   .text-container img {
     width: 60%;
     margin-left: 30px;
   }
 }

 /* Mobile Screens (580px and below) */
 @media (max-width: 580px) {
   .container {
     width: 100%;
     margin: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;

   }

   .query-container {
     width: 90%;
     padding: 15px;
   }

   .form-container h2 {
     font-size: 22px;
   }

   .query-container input,
   .query-container textarea {
     font-size: 14px;
     padding: 4px;
   }

   .submit-btn {
     font-size: 14px;
     padding: 8px;
   }

   .text-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 90%;
   }

   .text-container img {
     width: 85%;
     margin-left: auto;
     margin-right: auto;
   }
 }






 /*footer.................................*/
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, sans-serif;
 }

 body {
   background-color: #f5f5f5;
 }

 .footer {
   background-color: rgb(210, 209, 209);
   padding: 40px 0px;
   width: 100vw;
 }

 .footer-top {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-left: 40px;
   margin-right: 40px;
 }

 .footer-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   margin: 10px;
   gap: 5px;

 }

 .footer-section button {
   height: 35px;
   width: 170px;
   font-size: 15px;
   text-align: center;
 }

 .footer-head {
   font-size: 24px;
   margin-bottom: 15px;
   font-weight: bold;
 }

 p {
   font-size: 14px;
   color: #555;
   margin-bottom: 10px;
 }

 .subscribe-box {
   display: flex;
   flex-direction: row;
   text-align: center;

 }

 .subscribe-box input {
   width: 85%;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   height: 30px;
 }

 .subscribe-box button {
   padding: 5px 5px;
   background-color: orange;
   border: none;
   color: white;
   cursor: pointer;
   border-radius: 4px;
   height: 30px;
 }

 .contact-info {
   display: flex;
   flex-direction: column;
   gap: 5px;
 }

 .contact-info a {
   text-decoration: none;
   color: #007BFF;
 }

 .social-icons {
   display: flex;
   gap: 15px;
   font-size: 23px;
   color: rgb(138, 138, 138);
 }

 .footer-links {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-top: 30px;
   border-top: 1px solid #ccc;
   padding-top: 20px;
   padding: 30px 100px 10px 100px;
 }

 .footer-links ul {
   list-style: none;
 }

 .footer-links ul li {
   margin-bottom: 8px;
 }

 .footer-links ul li a {
   text-decoration: none;
   color: #555;
   font-size: 14px;
 }

 .footer-links ul li a:hover {
   color: #007BFF;
 }
 .social-icons a,.bi-twitter{
  text-decoration: none;
  color: gray;
 }
 .bi-facebook:hover{
  color: #007BFF;
 }
 .bi-instagram:hover{
  color: #fa6bd1;
 }
 .bi-linkedin:hover{
  color: #040e98;
 }
 .bi-twitter:hover{
  color: skyblue;
 }

 @media (max-width: 768px) {
   .footer-top {
     flex-direction: column;
   }

   .footer-links {
     flex-direction: column;
   }
 }