.inner-banner {

    background-image: url('../images/Title-2.jpg');

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    height: 230px;

    max-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #333;

    text-align: center;

}



.inner-banner .banner-content h2 {

    font-size: 48px;

    color: #ffffff;

    font-weight: 600;

    text-transform: capitalize;

    letter-spacing: 1px;

    margin: 0;

    padding: 20px 0;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}





.aboutform {

    background: linear-gradient(45deg, #ffc107, #ffffff);

    padding: 20px;

    border-radius: 8px;

    margin-top: 20px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



.aboutform .inner-title {

    background-color: #15103d;

    color: white;

    padding: 10px;

    border-radius: 10px;

    text-align: center;

    animation: blinkAnimation 1s infinite;

}



@keyframes blinkAnimation {

    0% {

        opacity: 1;

    }

    50% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



.aboutform .form-container {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.aboutform .form-input, .aboutform .form-textarea {

    padding: 10px;

    border: 2px solid #15103d;

    border-radius: 15px;

    font-size: 14px;

    color: #15103d;

}



.aboutform p {

    text-align: center;

    font-size: 16px;

    color: #15103d;

}



.aboutform .form-input:focus, .aboutform .form-textarea:focus {

    border-color: #ffc107;

    outline: none;

}



.aboutform .form-button {

    background-color: #ffc107;

    color: #15103d;

    padding: 10px;

    border: none;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.3s;

}



.aboutform .form-button:hover {

    background-color: #ffc103;

}



@media (max-width: 1200px) {


    .inner-banner .banner-content h2 {

        font-size: 40px;

    }

}



@media (max-width: 768px) {

    .inner-banner {

        height: 250px;

    }



    .inner-banner .banner-content h2 {

        font-size: 32px;

    }



    .about-services {

        flex-direction: column;

        align-items: center;

    }



    .services-box, .aboutform, .other-services-box {

        flex: 1;

        margin-bottom: 20px;

    }



    .font-class li {

        width: 100%;

    }



    .arrow-icon {

        right: 5px;

        top: 50%;

    }

}



@media (max-width: 480px) {

    .inner-banner .banner-content h2 {

        font-size: 28px;

    }



    .aboutform .form-input, .aboutform .form-textarea {

        font-size: 12px;

        padding: 8px;

    }



    .aboutform .form-button {

        font-size: 14px;

        padding: 8px;

    }

}

.front-about .container {
  max-width: 1200px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgb(235, 15, 15);
  background-color: #fff;
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.flex-box {
  flex: 1;
  padding: 15px;
  min-width: 280px; /* Prevents shrinking too much */
}

.flex-box p {
  font-size: 16px;
}

.flex-box img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.services h2 {
  font-size: 24px;
  text-align: center;
  background-color: rgb(214, 72, 7);
  color: #fff;
  padding: 10px;
  object-fit: contain;
  border-radius: 10px;
}

.services ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.services li {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid #ccc;
  width: 300px;
  text-align: left;
  transition: background-color 0.3s ease;
  background-color: #fff;
  gap: 8px;
}

.services li i {
  color: #c71585; /* Dark pink */
  margin-right: 8px;
}

.services li a {
  text-decoration: none;
  color: #333; /* Dark text for readability */
  flex-grow: 1;
}

.services li:hover {
  background-color: #ffe4e1;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .front-about .container {
    flex-direction: column;
    align-items: center;
  }

  .services ul {
    flex-direction: column;
    align-items: center;
  }

  .services li {
    width: 100%;
    max-width: 350px;
  }
}

@media (max-width: 768px) {
  .front-about .container {
    padding: 15px;
  }

  .flex-box {
    text-align: center;
  }

  .services h2 {
    font-size: 20px;
    padding: 8px;
  }

  .services li {
    width: 90%;
    font-size: 14px;
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .flex-box {
    padding: 10px;
  }

  .services h2 {
    font-size: 18px;
    padding: 6px;
  }

  .services li {
    width: 100%;
    font-size: 13px;
    padding: 6px;
  }
}
.front-about .container {
  max-width: 1200px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgb(235, 15, 15);
  background-color: #fff;
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.flex-box {
  flex: 1;
  padding: 15px;
  min-width: 280px; /* Prevents shrinking too much */
}

.flex-box p {
  font-size: 16px;
}

.flex-box img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.conform h2 {
  font-size: 24px;
  text-align: center;
  background-color: #710606;
  color: #fff !important;
  padding: 10px;
  border-radius: 10px;
}

.conform form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.conform input,
.conform textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.conform button {
  background-color: rgb(214, 72, 7);
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.conform button:hover {
  background-color: rgb(180, 50, 5);
}



/* Swiper Adjustments */
.swiper {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 330px;
  object-fit: contain;
}



/* Responsive Design */
@media (max-width: 1024px) {
  .front-about .container {
    flex-direction: column;
    align-items: center;
  }

  .flex-box {
    width: 100%;
    text-align: center;
  }

  .swiper-slide img {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .front-about .container {
    padding: 15px;
  }

  .conform h2 {
    font-size: 20px;
    padding: 8px;
  }

  .conform input,
  .conform textarea {
    font-size: 14px;
  }

  .conform button {
    font-size: 16px;
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .flex-box {
    padding: 10px;
  }

  .conform h2 {
    font-size: 18px;
    padding: 6px;
  }

  .conform input,
  .conform textarea {
    font-size: 13px;
  }

  .conform button {
    font-size: 14px;
    padding: 6px;
  }
}


.contact-box h4 {



    text-align: center;



    font-weight: 600;



    color: #222;



    margin-bottom: 20px;



}







.contact-box p {



    color: #fff;

    

    font-size:16px;



    



    text-align: center;



    margin-bottom: 30px;

    

    background:#15103d;

    border-radius:10px;

    padding:10px;

}







.contact-form h3 {



    text-align: center;



    color: #ffc107;



    margin-bottom: 20px;



}







.contact-form p {



    color: #ffc107;



    text-align: center;



    margin-bottom: 30px;



    background-color: #fec000;



    display: inline-block;



    padding: 10px;



    border-radius: 5px;



    animation: blink 1s infinite;



}







.contact-form-container {



    background-color: #ffffff;



    border-radius: 10px;



    padding: 20px;



    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);



}







.form-title {



    color: #ffc107;



    text-align: center;



    margin-bottom: 20px;



}







.form-description {



    color: #666;



    text-align: center;



    margin-bottom: 30px;


    display: inline-block;



    padding: 10px;



    border-radius: 5px;



    animation: blink 1s infinite;



}


.service-slider-container {
  position: relative;
  max-width: 100%;
  width: 400px; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  overflow: hidden;
  padding:20px;
  border:1px solid #bb5365 ;
  border-radius: 10px;
}

.service-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.service-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  border-radius: 10px;
}

.service-slider img.active {
  display: block;
}

.service-prev, .service-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  font-size: 18px;
  transition: background 0.3s;
}

.service-prev:hover, .service-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.service-prev { left: 10px; }
.service-next { right: 10px; }




.form-input {



    border: 1px solid #ddd;



    border-radius: 5px;



    padding: 10px;



    width: 100%;



    margin-bottom: 15px;



}







.btn-primary {



    background-color: #FFBF00;



    border-color: #FFBF00;



}







.btn-primary:hover {



    background-color: #FFA500;



    border-color: #FFA500;



}







.contact-map iframe {



    border: 0;



    background-color:#ffc107;



    padding:10px;



    width: 100%;



    border-radius:9px;



    height: 300px;



    margin-top: 20px;



}







a {



    text-decoration: none;



    color: inherit;



}







.social-icons i {



    font-size: 24px;



    margin-right: 15px;



    color: #FFBF00;



}







@media (max-width: 768px) {



    .contact-box {



        padding: 20px;



    }







    .contact-inner {



        padding: 15px;



    }







    .contact-map iframe {



        height: 200px;



    }







    .form-input {



        padding: 8px;



    }







    .social-icons i {



        font-size: 20px;



        margin-right: 10px;



    }



}







@media (max-width: 480px) {



    .contact-page {



        padding: 30px 0;



    }







    .contact-box {



        margin-bottom: 20px;



    }







    .contact-box img {



        max-width: 60px;



    }







    .contact-box h4 {



        font-size: 18px;



    }







    .contact-box p,



    .form-description {



        font-size: 14px;



    }







    .form-input {



        padding: 6px;



    }



}







.service-area {

	position: relative;

	padding: 60px 0;

}



.service-heading {

	position: relative;

	background: #ffb9cc;

	margin-bottom: 20px;

}



.service-heading span {

	position: absolute;

	right: 0;

	animation: grow 1.5s ease-in infinite;

}



.service-heading strong {

	display: block;

	font-size: 54px;

	font-family: 'Oswald', sans-serif;

	font-weight: 600;

	text-transform: uppercase;

}



.city-card {

	padding: 10px;

}



.city-inner {

	position: relative;

	padding: 20px 20px 13px;

	background: #ffab00;

	border-radius: 20px;

}



.icon-pin {

	border-radius: 20px;

	position: relative;

	margin: 0 auto;

	z-index: -1;

}



.city-image {

	left: 0;

	right: 0;

	margin: 0 auto;

	top: 26px;

	display: flex;

	justify-content: center;

	align-items: center;

}



.city-image img {

	border: 3px solid #fff;

	border-radius: 20px;

	width:250px;

}



.city-name strong {

	display: block;

	font-size: 20px;

	padding-top: 9px;

	font-weight: 500;

	font-family: 'Oswald', sans-serif;

	color: #000;

}



.service-area .service-heading strong {

	color: #ffffff;

	background: darkorange;

}







.info-card {

background: linear-gradient(135deg, #15103d 50%, #ffc107 50%);

  border: 2px solid white;

  border-radius: 8px;

  padding: 20px;

  margin-top:20px;

  text-align: center;

  height: 250px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.info-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.card-icon {

  font-size: 30px;

  color: yellow;

  margin-bottom: 15px;

  border: 2px dotted white;

  border-radius: 50%;

  padding: 10px;  /* Adjust padding to ensure the icon fits well inside the circle */

}





.card-icon i {

  transition: color 0.3s ease;

}



.info-card:hover .card-icon i {

  color: #ffd700;

}



.card-title {

  font-size: 22px;

  font-weight: bold;

  margin-bottom: 10px;

  color: white;

}



.card-text {

  font-size: 16px;

  color: white;

}



.info-card-col {

  margin-bottom: 20px;

}



@media (max-width: 767px) {

  .info-card-col {

    margin-bottom: 15px;

  }

}

   /* General Layout */

.magicservices-container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px;

}



.magicservices-row {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

}



/* Psychic Info Section */

.magicservices-psychic-info {

  margin-bottom: 30px;

    margin-top:20px;



}







.magicservices-psychic-info p {

  font-size: 18px;

  font-family: 'Lexend Sans', sans-serif;

  color: #555;

  line-height: 1.6;

  margin-bottom: 30px;

  padding: 0 15px;

  text-align: justify;

}



/* Info Cards */

.magicservices-info-card-col {

  width: 100%;

  max-width: 950px; /* Adjusted card width */

  margin: 0 auto;

}



.magicservices-info-card {

background: #15103d;

  border: 1px solid #fdec19;

  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  padding: 40px; /* Adjusted padding */

  text-align: center;

  transition: transform 0.3s ease;

  max-height: 350px; /* Set max height to prevent cards from becoming too large */

}



/* Icon Styling */

.magicservices-card-icon i {

  font-size: 55px; /* Adjusted icon size */

  border: 2px dotted #fff;

  color: #fdec19;

  padding:20px;

  border-radius: 50%;

  margin-bottom: 15px;

}



/* Card Title */

.magicservices-card-title {

  font-size: 26px; /* Increased title font size */

  font-weight: bold;

  color: #fdec19;

  margin-bottom: 10px;

}



/* Card Text */

.magicservices-card-text {

  font-size: 18px; /* Adjusted text size */

  text-align: center;

  color: #fdec19;

}



/* Footer Note */

.magicservices-footer-note {

  text-align: center;

  font-size: 16px;

  color: #333;

  border: 2px dotted #ffc107;

  border-radius: 20px;

  padding: 15px;

  margin-top: 30px;

  background-color: #fff;

}





.astroservice {



  padding: 20px;



}







.astroservice .text-box,
.second .text-box {
  padding: 20px;
  border-radius: 5px;
}

.astroservice .text-box p,
.second .text-box p {
  font-size: 16px;
  color: #000;
  line-height: 1.8;
}

.second .text-box {
  background-color: #f8f9fa;
}

.astroservice img,
.second img {
  width: 100%;
  max-width: 500px;
  height: auto;
  padding: 20px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .astroservice,
  .second {
    padding: 20px;
  }

  .astroservice .text-box,
  .second .text-box {
    padding: 15px;
  }

  .astroservice .text-box h2,
  .second .text-box h2 {
    font-size: 16px;
  }

  .astroservice .text-box p,
  .second .text-box p {
    font-size: 14px;
    line-height: 1.6;
  }

  .astroservice img,
  .second img {
    max-width: 250px;
    height: auto;
  }
}

@media (max-width: 480px) {
  .astroservice,
  .second {
    padding: 15px;
  }

  .astroservice img,
  .second img {
    max-width: 100%;
    height: auto;
  }
}

.newlocation {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  padding: 20px;

}



.newlocation.location-find-text {

  width: 70%;

  padding-right: 20px;

}



.newlocation.location-find-images {

  width: 30%;

}



.newlocation.location-find-images .image-slider {

  display: flex;

  overflow: hidden;

  width: 100%;

  height: 100%;

  position: relative;

}



.newlocation.location-find-images .image-slider img {

  width: 100%;

  height: fit-content;

  object-fit: cover;

  display: none;

  margin-top: 20px;

  position: relative;

}



.newlocation.location-find-images .image-slider img.active {

  display: block;

  position: relative;

}



.newlocation.location-find-text h2 {

  margin-bottom: 10px;

  background-color: #710606;

  color: #ffc107;

  padding: 10px;

  font-size: 22px;
  font-weight:bold;

  border-radius: 10px;

}



.newlocation.location-find-text p {

  font-size: 16px;

  color: #000;

  line-height: 1.6;

  margin-top: 10px;

}



.newlocation.location-find-text p + p {

  margin-top: 15px;

}



/* Responsive Design */

@media (max-width: 1200px) {

  .newlocation.location-find-text {

    width: 60%;

  }



  .newlocation.location-find-images {

    width: 40%;

  }

}



@media (max-width: 992px) {

  .newlocation.location-find-text {

    width: 100%;

    padding-right: 0;

  }



  .newlocation.location-find-images {

    width: 100%;

    margin-top: 20px;

  }



  .newlocation.location-find-images .image-slider img {

    margin-top: 10px; /* Adjust image margin for smaller screens */

  }

}



@media (max-width: 768px) {

  .newlocation.location-find-text h2 {

    font-size: 20px; /* Smaller font size for smaller screens */

    padding: 8px;

  }



  .newlocation.location-find-text p {

    font-size: 16px; /* Adjust paragraph font size */

  }



  .newlocation.location-find-text p + p {

    margin-top: 10px;

  }

}



@media (max-width: 480px) {

  .newlocation.location-find-text h2 {

    font-size: 18px; /* Even smaller font for mobile */

    padding: 6px;

  }



  .newlocation.location-find-text p {

    font-size: 14px;

  }



  .newlocation.location-find-text {

    width: 100%;

    padding-right: 0;

  }



  .newlocation.location-find-images {

    width: 100%;

    margin-top: 20px;

  }



  .newlocation.location-find-images .image-slider img {

    margin-top: 5px;

  }

}



















.read-more {

    display: inline-block;

    margin-top: 10px;

    font-size:16px;

    padding: 8px 16px;

    background-color: #15103d;

    color:#fdec19 ;  /* Yellow text */

    text-decoration: none;

    font-weight: bold;

    text-align:center;

    border-radius: 10px;

    transition: background-color 0.3s ease;

}



.read-more:hover {

    background-color: #fdec19;  /* Yellow background on hover */

    color: black;  /* Black text on hover */

}
.abouthead h2 {
  padding: 0;
  text-align: justify;
  color: #910a0a !important;
  font-size: 25px;
  width: 90%;
  margin-left: 70px;
  font-weight: bold;
  line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .abouthead h2 {
    width: 70%;
    font-size: 22px;
    margin-left: 30px;
  }
}

@media (max-width: 768px) {
  .abouthead h2 {
    width: 90%;
    font-size: 20px;
    margin-left: 20px;
  }
}

@media (max-width: 480px) {
  .abouthead h2 {
    width: 100%;
    font-size: 18px;
    margin-left: 10px;
    text-align: center;
  }
}