/*Write your custom style or CSS code here*/

.bg-gradient {
    background: linear-gradient(135deg, #13017C 0%, #13017C 100%);
    padding: 60px 0;
    position: relative;
}

.tt-hero h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.tt-animated-img-wrap {
    position: relative;
}

.animated-icons img {
    position: absolute;
    animation: bounce 2s infinite;
}

.animated-icons img.tt-a-icon-1 {
    top: 20%;
    left: 15%;
}

.animated-icons img.tt-a-icon-2 {
    top: 40%;
    right: 10%;
}

.animated-icons img.tt-a-icon-3 {
    bottom: 15%;
    left: 10%;
}

.animated-icons img.tt-a-icon-4 {
    bottom: 25%;
    right: 5%;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.tt-shape img {
    margin-top: -10px;
    z-index: -1; /* Ensure the shape image is behind other content */
}


.single-promo-card {
    height:300px;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    overflow: hidden;
    background: #fff; /* Card background color */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.single-promo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
}

.top-faeture {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.top-faeture img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

.single-promo-card h3 {
    font-weight: bold;
    color: #13017C; /* Heading color */
}

.single-promo-card p {
    color: #666; /* Text color */
    transition: color 0.3s;
}

.single-promo-card:hover h3 {
   
}

.single-promo-card:hover p {
    color: #555; /* Change text color on hover */
}


.pricing-section {
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 60px 0; /* Space around the section */
}

.section-heading {
    margin-bottom: 40px; /* Space below heading */
}

.section-heading h2 {
    font-size: 2.5rem; /* Large heading */
    color: #333; /* Dark text */
}

.highlight {
    color: #13017C; /* Highlight color */
}

.text_cnt {
    color: #666; /* Muted text color */
    font-size: 1.1rem; /* Slightly larger for emphasis */
}

.pricing-card {
    margin-bottom:20px;
    height:520px;
    background: #fff; /* Card background */
    border-radius: 15px; /* More rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Softer shadow */
    padding: 30px; /* More padding for a spacious feel */
    text-align: center; /* Centered text */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

.pricing-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
}

.pricing-icon img {
    max-width: 120px; /* Responsive icon size */
    margin-bottom: 15px; /* Space below icons */
}

.package-title {
    font-size: 1.7rem; /* Larger title font */
    font-weight: bold; /* Bold title */
}

.description {
    color: #555; /* Description color */
    margin: 15px 0; /* Space above and below description */
}

.features-list {
    list-style: none; /* Remove default list styles */
    padding: 0; /* Remove padding */
    margin: 15px 0; /* Space above and below the list */
}

.features-list li {
    color: #555; /* Text color */
    margin: 5px 0; /* Space between items */
}

.pricing-price {
    margin-top: 15px; /* Space above price */
}

.pricing-price small {
    font-size: 0.9rem; /* Smaller font for "Starting at" */
}

.pricing-price .h2 {
    font-size: 2rem; /* Price size */
    color: #ff5733; /* Highlight color */
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .pricing-card {
        margin-bottom: 20px; /* Space below cards on smaller screens */
    }
}


.ptb-0{
    padding-top:0px !important;
    padding-bottom:0px !important;
}
.pt-0{
        padding-top:0px !important;

}

.text-th1{
    color:#13017C !important;
}
#header .navbar.navbar-light {
    padding: 0rem 1rem;
}
#header {
    padding: 0rem 1rem;
}
.me-2{
    margin-right:10px !important;
}