.new-event-btn{
    font-size:16px;
    padding:8px;
    text-decoration:none;
    color:#fff;
}

.new-event-btn:hover{
    background-color:#0d6efd; /* same bootstrap primary color */
    color:#fff;
    text-decoration:none;
}


.py-6 {

    padding-top: 2rem !important;

    padding-bottom: 2rem !important;

}



.py7 {

    padding-top: 9rem !important;

    padding-bottom: 9rem !important;

}





.btn {

    padding: 10px 20px;

    /*border: none;*/

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.3s ease, color 0.3s ease;

}



.btn-primary {

    background-color: #ffd700;

    color: #0e1428;

}



.btn-primary:hover {

    background-color: #ffa500;

    color: #0e1428;

    transition: background-color 0.3s ease;

}



#hero {



    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;



}







#dialog {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.9);

    width: 320px;

    max-width: 90%;

    background: #ffffff;

    border-radius: 15px;

    border: 1px solid #ddd;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    padding: 20px 15px;

    text-align: center;

    z-index: 999999999;

    display: none;

    opacity: 0;

    transition: all 0.3s ease-in-out;

    animation: popupIn 0.4s ease forwards;

}



/* Animation */

@keyframes popupIn {

    0% {

        transform: translate(-50%, -50%) scale(0.7);

        opacity: 0;

    }



    100% {

        transform: translate(-50%, -50%) scale(1);

        opacity: 1;

    }

}



/* Heading */

#dialog h4 {

    font-size: 20px;

    margin-bottom: 10px;

    color: #b30000;

    border-bottom: 1px solid #eee;

    padding-bottom: 6px;

}



/* Paragraph */

#dialog p {

    font-size: 15px;

    color: #333;

    margin: 15px 0;

}



/* Button */

#dialog button {

    background: maroon;

    color: #fff;

    border: none;

    padding: 8px 16px;

    font-size: 14px;

    border-radius: 8px;

    cursor: pointer;

    transition: background 0.3s ease;

}



#dialog button:hover {

    background: #900;

}



/* Responsive for small screens */

@media screen and (max-width: 767px) {

    #dialog {

        width: 80%;

        padding: 18px 12px;

        border-radius: 12px;

    }



    #dialog h4 {

        font-size: 18px;

    }



    #dialog p {

        font-size: 14px;

    }



    #dialog button {

        font-size: 13px;

        padding: 7px 14px;

    }

}







#about,

#featuredAstrologers {

    background-image: url("../images/zodiac_back.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



#aboutcover,

#featurecover {

    background-color: rgba(5, 8, 16, 0.8);

}



#services {

    background-color: #1c233f;

}



#contact {

    background-color: #1c233f;

}





#mainnav {

    background-color: #ffc04d !important;



}



#mainnav .navbar-nav .nav-link {

    color: #ffffff;

    /* Text color for links */

    transition: color 0.3s ease;



}



#mainnav .navbar-nav .nav-link:hover {

    color: #000;

    /* Text color on hover */

}



.navbar-brand {

    color: #000;

}



.navbar-brand:hover {

    color: #000;

}



#contact h5,

a {

    color: white;

    text-decoration: none;

}



#contacticons a {

    font-size: 2rem;

    margin-right: 1rem;

}



#contactcard {

    background-color: #1c233f;

    border: none;

}



#contactcard label {

    color: white;

}



#featuredAstrologers a {

    font-size: 2rem;

}



#aboutlogo a {

    font-size: 2rem;

    margin-right: 1rem;

}



/* Style for the back to top button */

.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 40px;

    height: 40px;

    background-color: #0e1428;

    color: #ffd700;

    border: 1px solid #ffd700;

    border-radius: 50%;

    cursor: pointer;

    display: none;

}



.back-to-top i {

    font-size: 24px;

}



.swiper-slide {

    text-align: center;

    font-size: 18px;

    /* background: #fff; */

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 3rem;

}



.swiper-button-next,

.swiper-button-prev {

    color: #ffa500;

    /* Change to your desired color */

}



.overlay {

    /*display: none;*/

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 999;

    background: rgba(255, 255, 255, 0.8) url("../images/loader.gif") center no-repeat;

}







@media screen and (max-width:767px) {





    #dialog {

        position: fixed;

        top: 25%;

        width: 60%;

        background: #fff;

        margin-left: 40%;

        border: 2px solid #ccc;

        padding: 10px;

        z-index: 9999999999999;

        display: none;

    }





    #dialog {

        margin-left: 0%;

        top: 50%;

    }





    #yellow,

    #yellow4,

    #yellow5 {

        margin-left: -170px;

        position: relative;

    }

}









@media (max-width: 768px) {

    #card {

        float: left;

        margin-left: -110px;

    }

}



.cardimg {

    height: 160px;

    border-radius: 8px;

}



#card:hover {

    margin-top: -15px;

}



.blue-container {

    width: 100%;

    float: left;

}



.red-container {

    width: 40%;

    float: left;

}



.yellow-container {

    width: 40%;

    float: right;

}



#originalimages {

    display: none;

}











.btn-primary {

    background-color: #bf442b !important;

    color: #fff;

}



/*@media screen and (min-width:768px) {*/



    .wrap_blue,

    .wrap_red,

    .wrap_yellow {

        display: flex;

        justify-content: center;

        flex-direction: column;
        align-items: center;


    }

/*}*/



input {

    width: 180px;

    border: 1px solid #ccc;

    line-height: 1.7;

    border-radius: 4px;

    color: #555;

}



select {

    width: 350px;

    height: 35px;

    background: #fff;

}



.green {

    border: 5px solid green;

    border-radius: 10px;

}



.red {

    border: 5px solid red;

    border-radius: 10px;

}





/* --------------------------------------------------------- */









/* img popup section  */

/* Popup background */

/*#imgPopup {*/

/*    display: none;*/

/*    position: fixed;*/

/*    z-index: 9999;*/

/*    padding-top: 40%;*/

/*    left: 0;*/

/*    top: 0;*/

/*    width: 100%;*/

/*    height: 100%;*/

/*    overflow: auto;*/

/*    background-color: rgba(0, 0, 0, 0.8);*/

/*}*/



/* Popup image */

/*#popupImg {*/

/*    margin: auto;*/

/*    display: block;*/

/*    max-width: 80%;*/

/*    max-height: 80%;*/

/*    border-radius: 10px;*/

/*    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);*/

/*}*/



/* Close button */

/*#closePopup {*/

/*    position: absolute;*/

/*    top: 15%;*/

/*    right: 35px;*/

/*    color: #fff;*/

/*    font-size: 40px;*/

/*    font-weight: bold;*/

/*    cursor: pointer;*/

/*}*/



/*#closePopup:hover {*/

/*    color: #f00;*/

/*}*/





@media screen and (max-width: 767px) {



    #popupImg {

        position: relative;

        top: 15%;

    }



    #closePopup {

        position: absolute;

        top: 15% !important;

        right: 20px !important;

    }



    #closePopup:hover {

        color: #f00;

    }



}







#imgPopup {

    display: none;

    position: fixed;

    z-index: 9999;

    padding-top: 10%;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.8);

}



#popupImg {

    margin: auto;

    display: block;

    max-width: 80%;

    max-height: 80%;

    border-radius: 10px;

    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);

}





#closePopup {

    position: absolute;

    top: 15%;

    right: 40%;

    color: #fff;

    font-size: 40px;

    font-weight: bold;

    cursor: pointer;

}



#closePopup:hover {

    color: #f00;

}



/* footer card section  */







/* Common card layout */

.card {

    /* display: flex; */

    /* align-items: center;                                              changing code   */

    /* gap: 8px; */

    /* padding: 8px; */

    /* margin: 5px; */

    /* background: transparent; */

    /* border: none; */

    /* cursor: pointer; */

}



/* Replace icon with a card-shape box */

.card-shape {

    width: 28px;

    height: 28px;

    border-radius: 6px;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);

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

    margin-top: 5px;

    margin-bottom: 5px;

}



/* Color variations */

.red-shape {

    background: #dc3545;

}



.blue-shape {

    background: #007bff;

}



.yellow-shape {

    background: #ffc107;

}



/* Hover effect */

.card:hover .card-shape {

    transform: translateY(-3px);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);

}



/* Text beside card */

.card span {

    font-size: 14px;

    color: #222;

    font-weight: 500;

}



/* Mobile responsive */

@media screen and (max-width: 767px) {

    .card {

        gap: 6px;

    }



    .card-shape {

        width: 30px;

        height: 28px;

    }



    .card span {

        font-size: 13px;

    }



    .style-a {



        left: 10%;



    }



    .span-text {

        right: 35% !important;

    }

}



#footer-bar a {

    color: none;

    position: relative;

    flex: 1 1 auto;

}



#card-color1,

#card-color2,

#card-color3 {

    background-color: transparent;

}







.span-text {

    right: 20%;

}







@media (max-width: 768px) {

    #selectedcardcontainer .row {

        display: flex;

        flex-wrap: nowrap;

        overflow-x: auto;

        justify-content: flex-start;

        align-items: center;



    }



    #selectedcardcontainer .selectedcards {

        flex: 0 0 auto;

        width: auto !important;

        padding: 0;

        margin: 6px;

    }



    #selectedcardcontainer img {

        width: 70px;

        height: auto;

        border-radius: 8px;

    }



    #selectedcardcontainer .row::-webkit-scrollbar {

        display: none;

    }

    @keyframes slide-left-right {

        0% {

            transform: translateX(5px);

        }



        50% {

            transform: translateX(-5px);

        }



        100% {

            transform: translateX(5px);

        }

    }



    .scroll-fixed {

        animation: slide-left-right 1.5s ease-in-out infinite;

    }

}











/* card section  */

/* @media (max-width: 768px) {





    #selectedcardcontainer .col-md-8.selectedcards[id*="blue"] {

        display: flex;

        flex-wrap: nowrap;

        overflow-x: auto;

        justify-content: flex-start;

        align-items: center;

        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

    }





    #selectedcardcontainer .col-md-8.selectedcards[id*="blue"]::-webkit-scrollbar {

        display: none;

    }





    #selectedcardcontainer .col-md-2.selectedcards[id*="red"],

    #selectedcardcontainer .selectedcards[id*="yellow"] {

        flex: 0 0 auto;

        width: auto !important;

        padding: 0;

        margin: 6px;

    }





    #selectedcardcontainer .col-md-8.selectedcards[id*="blue"] .selectedcards {

        flex: 0 0 auto;

        width: auto !important;

        margin: 6px;

    }



    

    #selectedcardcontainer img {

        width: 70px;

        height: auto;

        border-radius: 8px;

    }

} */