/* =============== color pallet =============== */
:root {
    --white-color: #ffffff;
    --black-color: #000000;
}


body {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #595959;
}

code {
    background: #f0f0f0;
    padding: 3px 3px;
    border-radius: 4px;
}

.dark_code
{
    background: #2a2727;
    color: #a39f9f;
    padding: 3px 3px;
    border-radius: 4px;
}

h2 {
    color: #181818;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

h3 {
    color: #2c2c2c;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

h4 {
    color: #2c2c2c;
    /* text-shadow: .5px .5px 1px rgba(0, 0, 0, 0.3); */
}

h5 {
    font-size: 1.1rem;
    color: #414141;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

h6 {
    font-size: .9rem;
    color: #0056b3;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

/* =============== user restriction css starts =============== */
.restrict-body-content {
    user-select: none;
    /* Disable for modern browsers */
    -webkit-user-select: none;
    /* Disable for Safari */
    -moz-user-select: none;
    /* Disable for Firefox */
    -ms-user-select: none;
    /* Disable for IE/Edge */
}

/* stop right click and copy
div {
    -webkit-user-select: none; Safari
    -ms-user-select: none; IE 10 and IE 11
    user-select: none; Standard syntax
} */


/* =============== Color CSS Starts =============== */
.gray-primary {
    color: #181818;
    /* Very Dark Gray - Used for Main Heading */
}

.gray-secondary {
    color: #2c2c2c;
    /* Dark Gray - Used for h3 and h4 Headings */
}

.gray-tertiary {
    color: #414141;
    /* Medium Dark Gray - Used for h5 Heading */
}

.gray-light {
    color: #595959;
    /* Light Gray */
}

.blue-primary {
    color: #0056b3;
    /* Dark Blue - Used for h6 heading */
}

/* =============== Font Size CSS Starts =============== */
.font-size-xxxl {
    font-size: 1.8rem;
    /* Used for Main Headings */
}

.font-size-xxl {
    font-size: 1.4rem;
    /* Used for Large Titles, H3, Important Headings */
}

.font-size-xl {
    font-size: 1.1rem;
    /* Used for H5 Headings, Subtitles, Section Titles */
}

.font-size-lg {
    font-size: 1rem;
    /* Used for Paragraphs, Standard Text Content */
}

.font-size-md {
    font-size: 0.9rem;
    /* Used for H6 & Small Headings, List Items */
}

.font-size-sm {
    font-size: 0.8rem;
    /* Used for Small Paragraphs, Minor Labels */
}

.font-size-xs {
    font-size: 0.6rem;
    /* Used for Badges, Labels, Small Details */
}

.font-size-xxs {
    font-size: 10px;
    /* Used for Close Buttons, Tiny UI Elements */
}


/* =============== top bar css starts =============== */
.top-bar {
    background-color: #22262b;
    color: white;
    padding: 10px 0;
}

.top-bar a {
    color: white;
    text-decoration: none;
    font-size: 13px;
}

.top-bar a:hover i {
    transition: color 0.3s;
    color: #ffe100;
}

/* =============== top bar css ends =============== */


/* =============== nav bar css starts =============== */
.navbar-custom {
    background-color: #171a1d !important;
}

.navbar-nav .nav-item .nav-link {
    color: white;
    font-size: 14px;
    font-weight: 200;
    margin-right: 20px;
}

.navbar-nav .dropdown-menu {
    background-color: white;
    display: none;
    /* Hide dropdown menu by default */
}

.navbar-nav .dropdown-menu a {
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 200;
}

/* Show dropdown menu on hover */
.navbar-nav .nav-item:hover .dropdown-menu {
    display: block;
}

/* Ensure proper positioning of dropdown */
.navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    /* Light border around the toggler icon */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /* White icon for the toggler */
}

/* =============== nav bar css ends =============== */


/* =============== index page banner starts =============== */
.banner {
    position: relative;
    background-image: url('https://smartprogramming.in/assets/images/others/banner-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 600px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    z-index: 1;
}

.banner .container {
    position: relative;
    z-index: 2;
}

.banner h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.banner-changing-title {
    font-size: 2.5rem;
    color: #fff200;
}

/* =============== index page banner starts =============== */


/* =============== index page banner cards starts =============== */
.ipb-card-section {
    margin-top: -80px;
}

/* pre-defined card with default changes */
.card {
    z-index: 1;
    margin-bottom: 30px;
    position: relative;
    /* Ensures that the card’s position is not affected by other elements */
    margin: 20px;
}

.ipb-hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ipb-hover-effect:hover {
    transform: scale(1.05);
    /* Slightly zoom in */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.ipb-card-header-custom {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7));
    color: white;
    padding: .6rem;
    ;
}

.ipb-card-heading {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: 400;
}

/* =============== index page banner cards starts =============== */



/* =============== index page about smart programming starts =============== */
.index-asp-div {
    display: flex;
    align-items: center;
    padding: 20px;
}

.index-asp-div .image-container {
    flex: 1;
}

.index-asp-div .text-container {
    flex: 2;
    padding-left: 20px;
}

/* =============== index page about smart programming ends =============== */


/* =============== course cards starts =============== */
.course-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: auto;
}

.course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.course-card-body {
    padding: 1rem;
}

.free-course-card-title {
    font-size: 1.1rem;
    color: #04091e;
}

.course-card-title {
    font-size: 1rem;
    color: #04091e;
    text-align: left;
}

.course-card-text {
    text-align: left;
}

.course-card-price {
    font-size: 1rem;
    /* Adjust price font size */
    color: #333;
}

.div-svgimg-bg {
    background-image: url('https://smartprogramming.in/assets/images/svgimages/wave.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
}

.div-svgimg-bgg {
    background-image: url('https://smartprogramming.in/assets/images/svgimages/wavee.svg');
    background-repeat: no-repeat;
    background-size: cover;
    /* Ensure the image covers the div */
    background-position: center;
}

/* =============== course cards ends =============== */


/* =============== join our community starts =============== */
.container-metior {
    background: var(--black-color);
    color: #fff;
    padding: 2rem 0;
    position: relative;
    text-align: center;
    background-size: cover;
    background-position: center;

    background-image: radial-gradient(4px 100px at 0px 235px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 235px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 117.5px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 252px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 252px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 126px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 150px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 150px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 75px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 253px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 253px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 126.5px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 204px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 204px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 102px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 134px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 134px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 67px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 179px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 179px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 89.5px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 299px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 299px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 149.5px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 215px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 215px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 107.5px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 281px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 281px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 140.5px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 158px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 158px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 79px, #6297e754 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 210px, #6297e754, #0000),
        radial-gradient(4px 100px at 300px 210px, #6297e754, #0000),
        radial-gradient(1.5px 1.5px at 150px 105px, #6297e754 100%, #0000 150%);
    background-size:
        300px 235px,
        300px 235px,
        300px 235px,
        300px 252px,
        300px 252px,
        300px 252px,
        300px 150px,
        300px 150px,
        300px 150px,
        300px 253px,
        300px 253px,
        300px 253px,
        300px 204px,
        300px 204px,
        300px 204px,
        300px 134px,
        300px 134px,
        300px 134px,
        300px 179px,
        300px 179px,
        300px 179px,
        300px 299px,
        300px 299px,
        300px 299px,
        300px 215px,
        300px 215px,
        300px 215px,
        300px 281px,
        300px 281px,
        300px 281px,
        300px 158px,
        300px 158px,
        300px 158px,
        300px 210px,
        300px 210px,
        300px 210px;
    animation: hi 150s linear infinite;
}

@keyframes hi {
    0% {
        background-position:
            0px 220px,
            3px 220px,
            151.5px 337.5px,
            25px 24px,
            28px 24px,
            176.5px 150px,
            50px 16px,
            53px 16px,
            201.5px 91px,
            75px 224px,
            78px 224px,
            226.5px 350.5px,
            100px 19px,
            103px 19px,
            251.5px 121px,
            125px 120px,
            128px 120px,
            276.5px 187px,
            150px 31px,
            153px 31px,
            301.5px 120.5px,
            175px 235px,
            178px 235px,
            326.5px 384.5px,
            200px 121px,
            203px 121px,
            351.5px 228.5px,
            225px 224px,
            228px 224px,
            376.5px 364.5px,
            250px 26px,
            253px 26px,
            401.5px 105px,
            275px 75px,
            278px 75px,
            426.5px 180px;
    }

    to {
        background-position:
            0px 6800px,
            3px 6800px,
            151.5px 6917.5px,
            25px 13632px,
            28px 13632px,
            176.5px 13758px,
            50px 5416px,
            53px 5416px,
            201.5px 5491px,
            75px 17175px,
            78px 17175px,
            226.5px 17301.5px,
            100px 5119px,
            103px 5119px,
            251.5px 5221px,
            125px 8428px,
            128px 8428px,
            276.5px 8495px,
            150px 9876px,
            153px 9876px,
            301.5px 9965.5px,
            175px 13391px,
            178px 13391px,
            326.5px 13540.5px,
            200px 14741px,
            203px 14741px,
            351.5px 14848.5px,
            225px 18770px,
            228px 18770px,
            376.5px 18910.5px,
            250px 5082px,
            253px 5082px,
            401.5px 5161px,
            275px 6375px,
            278px 6375px,
            426.5px 6480px;
    }
}


.community-title {
    font-size: 3rem;
}

.social-icons .social-item {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.social-icons .social-item a {
    font-size: 2rem;
    display: block;
    color: inherit;
    /* Inherit color from parent */
    transition: color 0.3s;
}

.social-icons .social-item a:hover {
    opacity: 0.8;
}

.social-icons .fa-facebook {
    color: #3b5998;
}

.social-icons .fa-instagram {
    color: #e1306c;
}

.social-icons .fa-whatsapp {
    color: #25D366;
}

.social-icons .fa-telegram {
    color: #0088cc;
}

.social-icons .fa-discord {
    color: #7289da;
}

.social-icons .fa-youtube {
    color: #ff0000;
}

.followers {
    font-size: 1rem;
    color: #ccc;
}

/* =============== join our community starts =============== */


/* =============== why choose Us starts =============== */
.wcu-card {
    overflow: hidden;
    display: flex;
    align-items: center;
}

.wcu-card:hover {
    transform: translateY(-5px);
}

/* =============== why choose Us ends =============== */



/* =============== testimonials starts =============== */
.testimonial-carousel .carousel-item {
    padding: 20px;
}

.testimonial-card {
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}

.testimonial-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.testimonial-image img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.testimonial-content {
    padding: 15px;
    flex: 1;
}

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

.testimonial-college {
    color: #6c757d;
    margin: 5px 0 15px;
}

/* =============== testimonials ends =============== */


/* =============== carousel starts =============== */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

/* =============== carousel ends =============== */


/* =============== footer starts =============== */
.footer {
    background-color: #171a1d;
    color: white;
    padding: 20px 0;
}

.footer-link {
    color: #a6a6a6;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

.footer-link:hover {
    color: var(--white-color);
}

/* =============== footer ends =============== */


/* =============== all pages banner header & body starts =============== */
/* .all-page-heading-banner {
    /* background: url('/assets/images/others/smart-programming-banner.svg') no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    ----Dark mode colors and gradient----
    background: #121212;
    
    ----Fallback for browsers that don't support gradients----
    background: linear-gradient(135deg,
            #22262b 25%,
            #171a1d 25%,
            #171a1d 50%,
            #22262b 50%,
            #22262b 75%,
            #171a1d 75%,
            #171a1d);
    background-size: 40px 40px;

    ----Animation ----
    animation: move 4s linear infinite;
}

@keyframes move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 40px;
    }
} */

.all-page-heading-banner
{
    background: linear-gradient(135deg, #131326, #25253a);
      color: white;
      padding: 90px 20px 60px;
      text-align: center;
      position: relative;
      overflow: hidden;
}
.all-page-heading-banner::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
    animation: pulse 10s infinite linear;
}

@keyframes pulse {
    0% {
    transform: rotate(0deg);
    }

    100% {
    transform: rotate(360deg);
    }
}

.every-page-heading {
    color: var(--white-color);
    font-size: 36px;
    font-weight: bold;
    text-shadow: 2px 2px 4px var(--black-color);
}

.every-page-subheading {
    color: var(--white-color);
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 2px var(--black-color);
}

/* content division */
.common-div-bg {
    background-color: rgba(0, 0, 0, 0.03);
}

/* =============== all pages banner header & body ends =============== */


/* =============== free courses syllabus design starts =============== */
.course-div-gradient {
    height: auto;
    position: relative;
    background: linear-gradient(to bottom,
            white 60px,
            #e4e4e4 50px,
            /* Start blue gradient after 50px */
            #fafafa calc(100% - 60px),
            /* Continue blue gradient until 50px from the bottom */
            rgb(255, 255, 255) calc(100% - 60px)
            /* End with white at the bottom */
        );
}

.chapter {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--white-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chapter:nth-of-type(odd) {
    border-left: 5px solid #007bff;
    /* Blue for odd chapters */
}

.chapter:nth-of-type(even) {
    border-left: 5px solid #28a745;
    /* Green for even chapters */
}

.details-summary {
    cursor: pointer;
    color: #333333;
    /* Dark grey for chapter summaries */
    transition: color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.details-summary:hover {
    color: var(--black-color);
    /* Darker grey on hover */
    font-weight: bold;
}

.details-content {
    margin-left: 1.5rem;
    color: #555555;
    /* Light grey for subtopics */
}

.details-content ul {
    padding-left: 1.5rem;
    list-style-type: none;
    /* Remove default list styling */
}

.details-content li {
    margin-bottom: 0.5rem;
    font-size: 16px;
    background-color: #f3f3f3;
    padding: 10px;
    border-radius: 2px;
}

.details-content a {
    text-decoration: none;
    color: #767676;
    /* Blue links */
    transition: color 0.3s;

}

.details-content a:hover {
    color: #0056b3;
    /* Darker blue on hover */
}

.syllabus-div-bg {
    background-color: rgb(246, 246, 246);
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.by-deepak-sir {
    font-size: 12px;
    color: #8e8e8e;
}

/* =============== free courses syllabus design ends =============== */


/* =============== premium courses page design starts =============== */
.questions-div-title {
    color: var(--black-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.questions-div-bg {
    background-color: rgb(232, 232, 232);
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgb(151, 151, 151);
}

.wcop-titles {
    margin-bottom: 1.5rem;
    padding: .6rem;
    border-radius: 0.5rem;
    background-color: var(--white-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.wcop-titles-red {
    border-left: 5px solid #ff0000;
}

.wcop-titles-blue {
    border-left: 5px solid #2600ff;
}

.wcop-titles-green {
    border-left: 5px solid #008321;
}

.best-seller-badge {
    /* position: absolute; */
    float: right;
    /* top: 10px; */
    /* right: 10px; */
    background-color: #ff6347;
    /* Tomato color */
    color: white;
    font-size: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition-duration: 1s;
    transform: rotate(-10deg);
}

.course-card:hover .best-seller-badge {
    transform: rotate(0deg);
    background-color: #c82407;
    transition-duration: 1s;
}

.off-title {
    background-color: #c82407;
    color: white;
    padding: 2px 6px;
    box-shadow: 0px 2px 2px #717171;
}

.syllabus-chapter {
    font-weight: bold;
    color: #09006f;
    font-size: 1.1rem;
}

.chapter ul li {
    color: #5d5d5d;
    font-size: .9rem;
}

.syllabus-modules {
    padding: 20px;
    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #d9d9d9;
}

.syllabus-modules-red {
    background-color: rgb(252, 243, 243);
}

.syllabus-modules-blue {
    background-color: rgb(244, 243, 255);
}

.syllabus-modules-green {
    background-color: rgb(241, 255, 245);
}

.course-discount-design {
    background-color: rgb(155, 0, 0);
    color: white;
    font-size: .6rem;
    padding: 2px 4px;
    border-radius: 3px;
    position: absolute;
}

.coursedemo-alert-custom {
    background-color: #f0f8ff;
    /* Light blue background */
    border-left: 5px solid #007bff;
    /* Blue left border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between emoji and text */
    transition: transform 0.2s ease-in-out;
}

.coursedemo-alert-custom:hover {
    transform: scale(1.02);
    /* Slight zoom effect on hover */
}

.coursedemo-alert-text {
    font-size: .9rem;
    margin-top: 10px;
}

.coursedemo-alert-link {
    font-weight: bold;
    text-decoration: none;
    color: #007bff;
    transition: color 0.3s;
}

.coursedemo-alert-link:hover {
    color: #0056b3;
    /* Darker blue on hover */
    text-decoration: underline;
}

/* =============== premium courses page design ends =============== */



/* =============== blue color small card design starts =============== */
.blue-color-card {
    width: auto;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.blue-color-card-header {
    background-color: #007bff;
    /* Bootstrap primary color */
    color: white;
    font-size: 14px;
    text-align: center;
}

.blue-color-card-body {
    font-size: 12px;
    text-align: center;
}

/* =============== blue color small card design ends =============== */


/* =============== why choose us card design starts =============== */
.wcu-training-card {
    background-color: var(--white-color);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: box-shadow 0.3s ease;
}

.wcu-training-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.wcu-training-card-header {
    color: #0066d2;
    font-size: 18px;
    margin-bottom: 10px;
}

.wcu-training-card-body {
    font-size: 14px;
    color: #495057;
}

/* =============== why choose us card design ends =============== */



/* =============== development image zoom starts =============== */
.zoom-tilt {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.zoom-tilt img {
    transition: transform 0.3s ease, filter 0.3s ease;
    display: block;
}

.zoom-tilt:hover img {
    transform: scale(0.9) rotate(-1deg);
}

.zoom-tilt:hover h5 {
    color: #1c1c1c;
}

/* =============== development image zoom ends =============== */


/* =============== gallery starts =============== */
.gallery img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin: 20px;
    box-shadow: 1px 1px 3px black;
}

.gallery img:hover {
    transform: scale(1.02);
}

.gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Blue background with opacity */
    justify-content: center;
    align-items: center;
    z-index: 1050;
    /* Bootstrap z-index for modal */
}

.gallery-modal img {
    max-width: 90%;
    max-height: 80%;
    border: 5px solid white;
}

.gallery-modal.active {
    display: flex;
}

.gallery-modal .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}

/* =============== gallery ends =============== */


/* =============== our vision design starts =============== */
.our-vision-div {
    background-color: white;
    padding: 10px;
    border-left: 2px solid #007bff;
}

/* =============== our vision design ends =============== */


/* =============== page uder construction starts =============== */
.page-under-construction {
    background: linear-gradient(to right, #f8f8f8, #ededed);
    display: flex;
    flex-direction: column;
    min-height: 50vh;
}

/* Animation for rotating gear icon */
.rotate {
    display: inline-block;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =============== page uder construction ends =============== */



/* =============== notes designing starts =============== */

.nextline-nowrap {
    white-space: nowrap;
}

.notes-header-navlinks {
    text-decoration: none;
    color: white;
    white-space: nowrap;
}

.notes-header-navlinks:hover {
    color: #c1c1c1;
}

.notes-sidebar {
    height: 100vh;
    width: auto;
    position: sticky;
    /* Make the sidebar sticky */
    top: 0;
    /* Sticky at the top */
    left: 0;
    background-color: #04091e;
    padding-top: 20px;
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 2000;
}

/* Keep these for the collapsed sidebar behavior */
.notes-sidebar.collapsed {
    transform: translateX(-100%);
}

#notes-hamburger-btn,
#notes-sidebar-close-btn {
    display: none;
}

.notes-sidebar-closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    /* Reduce the width */
    height: 20px;
    /* Reduce the height */
    font-size: 10px;
    /* Reduce the font size */
    border: none;
    cursor: pointer;
    background-color: transparent;
    /* No background color */
    color: white;
    background-color: white;
}

#notes-navBar {
    display: block;
}

/* Display button for viewports below 800px */
@media (max-width: 992px) {
    .notes-sidebar {
        position: fixed;
        /* Keep the fixed positioning for small screens */
        width: 300px;
        transform: translateX(-100%);
        top: 0;
    }

    .notes-sidebar.active {
        transform: translateX(0);
    }

    .notes-content {
        margin-left: 0;
    }

    #notes-hamburger-btn,
    #notes-sidebar-close-btn {
        display: block;
    }

    #notes-navBar {
        display: none;
    }
}


.notes-sidebar a.nav-link {
    color: #ccc;
    /* Default link color */
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.notes-sidebar a.nav-link:hover {
    background-color: #3d3d3d;
    /* Background color change on hover */
    color: white;
    /* Text color change to white on hover */
}

.notes-sidebar a.nav-link.active {
    background-color: #3d3d3d;
    /* Active link background */
    color: white;
    /* Active link text color */
}


.notes-content {
    transition: margin-left 0.3s ease;
}

.notes-div {
    padding: 20px;
}

.notes-imp-div {
    padding: 15px;
    background-color: #1d1d1d;
    color: white;
    box-shadow: 0px 0px 5px rgb(108, 108, 108);
    border-radius: 5px;
}

.flag-notes-imp-div {
    border-left: 5px solid rgb(0, 123, 255);
}

/* .notes-heading {
    font-size: 1.4rem;
    color: #141414;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.notes-subheading {
    font-size: 1.1rem;
    color: #414141;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
} */

.notes-sub-subheading {
    font-size: .9rem;
    color: #563cff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.more-advanced-concepts-div {
    padding: 10px;
    background-color: var(--white-color);
    color: rgb(15, 15, 15);
    box-shadow: 0px 0px 5px rgb(187, 187, 187);
    border-radius: 3px;
    text-decoration: none;
}

.more-advanced-concepts-href {
    text-decoration: none;
    font-weight: bold;
}

.notes-red-border-box {
    border: 2px solid red;
    border-radius: 3px;
    padding: 10px;
}

.notes-red-border-box-text {
    position: relative;
    bottom: 25px;
    padding: 0px 10px 0px 10px;
    color: #0088cc;
    left: 15px;
    font-size: 1.3rem;
    background-color: rgb(255, 255, 255);
    display: inline;
}

.para-note {
    padding: 10px;
    background-color: #f7f7f7;
    color: rgb(55, 55, 55);
    box-shadow: 0px 0px 5px rgb(180, 180, 180);
    border-radius: 5px;
    border-left: 2px solid var(--black-color);
}

.feedback-div {
    padding: 10px;
    color: rgb(0, 0, 0);
    box-shadow: 0px 0px 5px rgb(180, 180, 180);
    border-radius: 5px;
    background: url('/assets/images/others/feedback-banner.svg') no-repeat center;
    background-size: cover;
}

.feedback-div-java-bg {
    background-color: var(--white-color);
    border-left: 2px solid #020072;
}

.feedback-div-spring-bg {
    background-color: #eafbf1;
    border-left: 2px solid #007204;
}

.feedback-para {
    font-size: 14px;
}

.feedback-href {
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    background-image: linear-gradient(to right, #0c7ae8 0%, #3714c2 100%);
    text-decoration: none;
    box-shadow: 6px 6px 12px #c5c5c5,
        -6px -6px 12px var(--white-color);
}

.feedback-href:hover {
    background-image: linear-gradient(to right, #3714c2 0%, #0c7ae8 100%);
    color: white;
}

.image-shadow {
    box-shadow: 0px 0px 10px #363636;
}

/* =============== notes designing ends =============== */


/* =============== tutorials page designing starts =============== */
.card-item {
    box-sizing: border-box;
    width: 300px;
    border-radius: 5px;
    margin: 20px;
    background-color: rgba(222, 232, 240, 0.58);
    box-shadow: 12px 15px 30px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    border-radius: 17px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    color: black;
}

.card-item:hover {
    transform: scale(1.10);
}

/* .card-item:active 
{
  transform: scale(0.95) rotateZ(1.7deg);
} */
.tech-card-design {
    background-color: #d8e1f3;
    width: 100%;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 20px;
}

/* =============== tutorials page designing ends =============== */


/* =============== notes starting watch youtube video starts =============== */
.video-container {
    background: linear-gradient(135deg, #007bff, #0056b3);
    /* Gradient background */
    padding: 20px;
    border-radius: 20px;
    align-items: center;
    justify-content: space-between;
    margin: 50px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Shadow for 3D effect */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Hover effect: lift with shadow */
.video-container:hover {
    transform: translateY(-5px);
    /* Lift on hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* Deeper shadow on hover */
}

/* Video section styling */
.video-section {
    position: relative;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
}

/* Video thumbnail */
.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play button styling */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 3D effect on play button */
}

.play-button img {
    width: 24px;
}

.play-button:hover {
    background: rgba(255, 255, 255, 1);
    /* Slightly brighter on hover */
}

/* Hover effects for the video section */
.video-container:hover .video-section {
    transform: scale(1.1);
    /* Zoom effect on hover */
}

.video-container:hover h5 {
    color: #ffdd57;
    /* Yellow color on hover */
}

/* Styling for the text section */
.text-section h5 {
    color: white;
    margin-left: 20px;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

/* =============== notes starting watch youtube video ends =============== */


/* =============== notes designing starts =============== */
.question-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    padding: 15px;
    overflow: auto;
}

.question-title {
    font-weight: bold;
    color: #1a1a1a;
    font-size: 1.1rem;
}

.answer-text {
    font-size: 1rem;
    color: #2b2b2b;
    line-height: 1.6;
}

.pagination {
    justify-content: center;
    margin-top: 30px;
}

.output-window {
    background-color: #f4f4f4;
    /* Light gray background */
    border: 1px solid #ddd;
    /* Subtle border */
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.output-window-font {
    font-family: monospace;
    font-size: 0.9rem;
}

.notes-link-style {
    color: #007bff;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}

.notes-link-style::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
}

.notes-link-style:hover::after {
    width: 100%;
}

.right-sidebar {
    background-color: #f9f9f9;
    border-left: 1px solid #f1f1f1;
}

#youtube-icon {
    color: red;
}

#youtube-icon:hover {
    color: darkred;
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        /* Adjust scale to increase size */
        opacity: 0;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.animate-ping {
    display: inline-block;
    /* Ensure the element is inline-block */
    position: relative;
}

.animate-ping::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100%;
    /* Base size of the animation */
    height: 100%;
    border: 2px solid rgb(255, 138, 138);
    /* Outline for the ping effect */
    border-radius: 50%;
    /* Circular shape */
    animation: ping 1s infinite;
    /* Ping animation with 1s duration */
    opacity: 0;
    pointer-events: none;
}


.right-sidebar-top-heading {
    background: white;
    border-radius: 5px;
    margin: 15px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), -5px -5px 15px rgba(255, 255, 255, 0.5);
    /* 3D shadow effect */
    font-size: .9rem;
    color: #333;
    /* Neutral text color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.text-image-item {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
}

.text-image-item img {
    max-width: 100px;
    /* Adjust the image size as needed */
    height: auto;
}


/* -----java programs list designing------ */
.program-list {
    max-width: 600px;
    margin: 50px auto;
}

.program-item {
    display: flex;
    justify-content: space-between;
    /* Distribute items across the container */
    align-items: center;
    background: var(--white-color);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.program-title {
    font-size: .9rem;
    font-weight: 500;
    color: #333;
    flex-grow: 1;
    /* Allow title to take available space */
    padding-left: 10px;
}

.solution-btn {
    text-decoration: none;
    font-size: 0.8rem;
    color: #007bff;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.solution-btn:hover {
    color: #0056b3;
}

.solution-btn i {
    margin-left: 5px;
}

.large-badge {
    font-size: .9rem;
    /* Increase font size */
    padding: 0.3rem .6rem;
    /* Adjust padding for larger badge */
}

.star-program-item {
    justify-content: space-between;
    /* Distribute items across the container */
    align-items: center;
    background: var(--white-color);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* =============== notes designing ends =============== */


/* =============== courses new design starts =============== */
.key-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}

.feature {
    display: flex;
    align-items: center;
    width: 48%;
    margin-bottom: 15px;
}

.feature img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.feature i {
    font-size: 1.2rem;
    color: #dc3545;
}

@media (max-width: 768px) {
    .feature {
        width: 100%;
    }
}


.accordion-button {
    font-size: 0.9rem;
    font-weight: bold;
    background-color: #f1f1f1;
}

.accordion-button:not(.collapsed) {
    background-color: #007bff;
    color: white;
}

.accordion-body {
    font-size: 0.85rem;
    padding-left: 15px;
}

.accordion-item {
    margin-bottom: 10px;
    /* Adds space between chapters */
    border-radius: 5px;
    overflow: hidden;
}


.call-section {
    background: linear-gradient(90deg, #007bff, #0056b3);
    color: white;
    padding: 20px 0;
    text-align: center;
}

.call-section h3 {
    font-weight: bold;
    margin-bottom: 10px;
}

.call-section .btn-call {
    background: white;
    color: #0056b3;
    font-weight: bold;
    border-radius: 30px;
    padding: 10px 20px;
    border: none;
    transition: all 0.3s ease-in-out;
}

.call-section .btn-call:hover {
    background: #0056b3;
    color: #ffffff;
}

.call-section i {
    font-size: 1.4rem;
    margin-right: 10px;
}



.faq-section {
    background-color: rgb(246, 246, 246);
    padding: 40px 20px;
}

.accordion-button {
    font-size: 16px;
    font-weight: 500;
}

.accordion-body {
    font-size: 14px;
}






.review-section {
    /* position: relative; */
    background-color: rgb(236, 238, 241);
    text-align: center;
}

.review-img {
    width: 60%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.img1 {
    top: -30px;
    left: -40px;
    transform: rotate(-3deg);
}

.img2 {
    top: -40px;
    right: -30px;
    transform: rotate(15deg);
}

.img3 {
    bottom: -30px;
    left: 0px;
    transform: rotate(-8deg);
}

.img4 {
    bottom: -40px;
    right: 20px;
    transform: rotate(12deg);
}

.img5 {
    bottom: -30px;
    left: 0px;
    transform: rotate(-5deg);
}

@media (max-width: 768px) {
    .review-img {
        width: 90px;
    }
}




.instructor-container {
    background-color: rgb(242, 244, 246);
    padding: 20px;
    box-shadow: 0px 0px 5px rgb(178, 176, 176);
}

.instructor-section {
    padding: 30px;
}

.instructor-img {
    width: 180px;
    height: 220px;
    border-radius: 10%;
    object-fit: cover;
    box-shadow: 0px 0px 5px rgb(194, 192, 192);
}

.stats i {
    color: #007bff;
    margin-right: 5px;
}

.instructor-social {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgb(177, 177, 177);
}

.instructor-social i {
    color: #007bff;
    margin-right: 10px;
}

/* =============== courses new design ends =============== */




/* =============== live batches table design starts =============== */
.live-batches-div {
    background-color: #f8f9fa;
    padding: 20px;
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.442);
}

/* ============== courses sahil design ================ */
.promo-section {
    background: linear-gradient(135deg, #1d252d, #21262c);
    padding: 60px 0;
}

.section-box {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 40px;
    margin: 0px auto;
    margin-top: -70px;
    color: #000;
}

.animated-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.features-section {
    background: linear-gradient(90deg, #1e252d, #2f3843);
    color: white;
    padding: 20px 0;
    text-align: center;
}

.feature-card-dark {
    /* Bootstrap dark */
    color: #f8f9fa;
    /* Light text */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card-dark:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

.feature-card-dark i {
    transition: transform 0.5s ease;
    display: inline-block;
}

.feature-card-dark:hover i {
    transform: rotate(360deg);
}

.feature-box {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 25px;
    color: #fff;
    text-align: center;
    transition: all 0.3s ease-in-out;
    height: 100%;
}


.feature-box:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


.feature-icon {
    font-size: 2rem;
    color: #e74c3c;
    margin-bottom: 10px;
}

.cta-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
}

.cta-btn:hover {
    background-color: #c0392b;
}

.btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
}

.btn-outline-white:hover {
    background-color: white;
    color: #2c3e50;
}

.note {
    font-size: 0.9rem;
    color: #dcdcdc;
    margin-top: 20px;
}

.live-batch-table td,
.live-batch-table th {
    vertical-align: middle;
}

/* Prevent text wrapping and apply min width to specific columns */
.live-batch-table .col-min-width{
    white-space: nowrap;
    min-width: 150px;
    /* Adjust width as needed */
}

/* Make font a bit smaller on mobile for better fit */
@media (max-width: 576px) {

    .live-batch-table td,
    .live-batch-table th {
        font-size: 13px;
    }
}