@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Source+Code+Pro:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');  
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700&family=Source+Sans+3:wght@400;500&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        body {    
            font-family: 'Arial', sans-serif;
            margin: 0;
               overflow-x: hidden;
            padding: 0;
            background-color: #f0f0f0;
        }

.akey
 {
     
     color: white;
     display: none;
 }
        /* Header Styles */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: white;
            padding: 15px 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin: 0px auto;
            width: 100%;
            max-width: 100%;
            flex-wrap: wrap;
        }

        .logo {
            font-size: 28px;
            font-weight: bold;
            color: black;
            flex-shrink: 0;
        }

        .logo-container {
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .logo-container:hover {
            transform: scale(1.05);
            /* Subtle hover effect for interactivity */
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background: #1a2a44;
            /* Navy blue background for the icon */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            border: 2px solid #d4af37;
            /* Gold border for premium feel */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .logo-icon::before {
            content: '</>';
            /* Coding angle brackets as the icon */
            color: #d4af37;
            /* Gold color for the icon */
            font-size: 16px;
            font-weight: 600;
        }

        .logo-text {
            display: flex;
            align-items: baseline;
        }

        .logo-text .ikey {
            font-size: 28px;
            font-weight: 700;
            color: #d4af37;
            /* Gold for "iKey" */
            background: linear-gradient(45deg, #d4af37, #b8972e);
            /* Gradient for premium effect */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-text .skills {
            font-size: 28px;
            font-weight: 600;
            color: #1a2a44;
            /* Navy blue for "Skills" */
        }


        .search-box {
            display: flex;
            /* Enable flexbox */
            align-items: center;
            /* Vertically center the items */
            position: relative;
            margin: 0 20px;
            width: 50%;
            /* Adjust the width as needed */
        }

        .search-box input {
            width: 100%;
            /* Take full width of the container */
            padding: 10px 40px 10px 10px;
            /* Add padding to the right for the icon */
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
            /* Ensure padding doesn't affect width */
        }

        .search-box i {
            position: absolute;
            /* Position the icon inside the input */
            right: 15px;
            /* Align to the right with some spacing */
            color: #777;
            font-size: 20px;
            pointer-events: none;
            /* Prevent the icon from interfering with input */
        }

        .search-box input:focus {
            border-color: gray;
            outline: none;
        }
        
          #suggestions {
          position: absolute;
    top: 100%; /* Places it just below the search input */
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 2000; /* Increased z-index to ensure it appears above header */
    display: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: adds depth */
        }

        .suggestion-item {
            padding: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }
         .suggestion-item i{
           color: black;
        }


        .suggestion-item:hover {
            background: #f0f0f0;
        }


        .auth-links {
            display: flex;
            gap: 15px;
            flex-shrink: 0;
        }

        .auth-links a {
            color: black;
            text-decoration: none;
            padding: 6px 15px;
            border: 1px solid rgb(182, 182, 182);
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s;
        }

        .auth-links a:hover {
            background-color: rgb(0, 0, 0);
            color: white;
        }
        .submenu-spacer {
    height: 10px;
   
}
        .submenu-wrapper {
            overflow-x: auto;
            position: Sticky;
            top: 0;
            z-index: 1000;
            overflow-y: hidden;
            white-space: nowrap;
            -ms-overflow-style: none;  /* IE/Edge */
            scrollbar-width: none;     /* Firefox */
}
.submenu-wrapper::-webkit-scrollbar {
    display: none;  /* Chrome, Safari */
}
        /* Sticky Submenu */
        .submenu-container {
         position: relative;
         
           
            background: #1B1F3B;
            
           display: inline-flex;
            width: auto;
            min-width: max-content;
            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
            padding: 0px 30px;
            justify-content: flex-end;
            /* Align links to the right on large screens */
            align-items: center;
            gap: 20px;
            z-index: 1000;
              margin: 0px auto;
            transition: 0.3s ease-in-out;
        }

        /* Submenu Hover Effect */
        .submenu-container a {
       position: relative;
        display: inline-block;
            text-decoration: none;
            color: white;
            padding: 13px 20px;
            border-radius: 5px;
            font-weight:460;
            transition: color 0.3s;
            font-family: Montserrat, sans-serif;
            font-size: 14px;
        }

        .submenu-container a::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: all 0.3s ease-in-out;
            transform: translateX(-50%);
        }

        .submenu-container a:hover {
            color: grey;
        }

        .submenu-container a:hover::after {
            width: 100%;
        }

        /* Toggle Button for Mobile */
        .menu-toggle {
            display: none;
            background: black;
            color: white;
            border: none;
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px auto;
            width: 90%;
            max-width: 1200px;
            text-align: right;
            /* Align toggle button text to left */
        }


        .main-content {
            display: flex;
            flex-wrap: wrap;
            /* gap: 20px; */
            margin: auto;

            padding: 20px;
            width: 90%;
        }

        .left,
        .right {
            flex: 1 1 45%;
            /* Responsive sizing */
            padding: 20px;
            line-height: 32px;
            background-color: #FFFFFF;
            box-sizing: border-box;
        }

        .slider {
            position: relative;
            overflow: hidden;
        }

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

        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }

        .slider img {
            width: 100%;
            display: block;
        }

        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        .extra-content {
            margin-top: 20px;
            padding: 15px;
            background: #f9f9f9;
            border-left: 4px solid black;
        }

        /* go to premium button css start here  */
        .go_premium {
            text-align: center;
            display: flex;

            justify-content: flex-end;

        }

        .premium_btn {
            padding: 10px 28px;
            font-size: 16px;
            font-family: 'Arial', sans-serif;
            font-weight: 600;
            color: #ffffff;
            background-color: #1B1F3B;
            /* Deep navy blue */
            border: 1px solid #D3D3D3;
            /* Light silver border */
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        /* Elevation effect on hover (optional) */
        .premium_btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
            background-color: rgb(41, 40, 40);
            color: white;
            border-style: solid;
            border-width: thin;
            border-color: black;
        }

        /* Inner glow effect */
        .premium_btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* Apply sheen when active */
        .premium_btn.active::before {
            opacity: 1;
            animation: sheen 1.5s infinite;
        }

        @keyframes sheen {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        /* Text animation */
        .premium_btn span {
            position: relative;
            z-index: 1;
            display: inline-block;
            transition: all 0.3s ease;
        }

        /* Apply textGlow when active */
        .premium_btn.active span {
            animation: textGlow 0.6s ease-in-out infinite alternate;
        }

        @keyframes textGlow {
            0% {
                transform: translateY(0);
                text-shadow: 0 0 2px rgba(255, 255, 255, 0.0);
            }

            100% {
                transform: translateY(-2px);
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.0), 0 0 12px rgba(211, 211, 211, 0.0);
            }
        }


        /* Unique h3 styling */
        .course_library {
            font-size: 1.3em;
            color: #1B1F3B;
            /* Deep navy blue */
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            background: linear-gradient(135deg, black, black);
            /* Gradient background */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /* Gradient text */
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 600;
            animation: fadeIn 1.5s ease forwards;
        }

        /* Decorative underline */
        .course_library::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, black, #D6B43F);
            transform: scaleX(0);
            transform-origin: left;
            animation: underline 1s ease forwards 0.5s;
            /* Delayed underline animation */
        }

        /* Subtle glow effect */
        .course_library::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: radial-gradient(circle, rgba(151, 149, 147, 0.0), transparent);
            border-radius: 10px;
            z-index: -1;
            opacity: 0;
            animation: glow 2s ease-in-out infinite alternate;
        }

        /* Animations */
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }

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

        @keyframes underline {
            0% {
                transform: scaleX(0);
            }

            100% {
                transform: scaleX(1);
            }
        }

        @keyframes glow {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .course_div {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            background: rgb(225, 225, 225);
            justify-content: center;
            padding: 20px;
            border-radius: 8px;
            /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
        }
        .course_div a {
         text-decoration: none;
          color: inherit; /* Ensures the link color matches the parent */
        }
        .course_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 120px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: 0.3s ease-in-out;
            cursor: pointer;
        }

        .course_item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .course_item i {
            font-size: 40px;
            margin-bottom: 10px;
        }
           .iconify {
            font-size: 40px;
            margin-bottom: 10px;
        }


        .course_item span {
            font-size: 16px;
             margin-bottom: 10px;
            font-weight: bold;
        }


        /* Premium Product Header */
        .premium_product_header {
            position: relative;
            padding: 50px 20px;
            text-align: center;
            margin-top: 30px;
            background: linear-gradient(135deg, #1B1F3B 0%, #2A3A5A 70%);
            /* Smooth gradient */
            color: #ffffff;
            /* White text base */
            overflow: hidden;
            z-index: 1;
        }


        /* Heading styling */
        .premium_product_header h1 {
            font-size: 1.7em;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #ffffff;
            /* Crisp white text */
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateY(30px);
        }

        /* Animated underline for h1 */
        .premium_product_header h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #00c4cc, #ffffff);
            transform: translateX(-50%);
            z-index: 2;
        }

        /* Paragraph styling */
        .premium_product_header p {
            font-size: 1.2em;
            font-weight: 300;
            max-width: 600px;
            margin: 30px auto 0;
            color: #ffffff;
            /* Crisp white text */
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateY(20px);
        }

        /* Animation classes */

        .premium_product_header.visible h1 {
            opacity: 1;
            transform: translateY(0);
            animation: slideUp 1s ease-out forwards;
        }

        .premium_product_header.visible h1::after {
            animation: expandUnderline 1s ease-out forwards 0.5s;
            /* Delayed underline */
        }

        .premium_product_header.visible p {
            opacity: 1;
            transform: translateY(0);
            animation: slideUp 1s ease-out forwards 0.3s;
        }

        /* Animations */

        @keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes expandUnderline {
            0% {
                width: 0;
            }

            100% {
                width: 50%;
            }
        }



        /* premium product  */

        .product_container {
            display: flex;
            justify-content: center;
            align-items: center;

            background: #f0f2f5;
            gap: 30px;
            padding: 20px;
            flex-wrap: wrap;
        }

        /* .course-card {
            width: 300px;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .course-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .course-header {
            height: 120px;
            background: linear-gradient(135deg, #1B1F3B, #2c335e);
           
            background: linear-gradient(135deg, #1B1F3B, #333333);
            background: linear-gradient(135deg, #333333, #333333);

            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .course-icon-wrapper {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .course-card:hover .course-icon-wrapper {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.25);
        }

        .course-icon {
            font-size: 40px;
            color: white;
        }

        .premium-tag {
            position: absolute;
            top: 15px;
            left: 10px;
            background: rgb(34, 31, 31);
            color: white;
            padding: 4px 8px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 3px;
             position: absolute;
            top: 15px;
            right: 15px;

            background: #dfc73b;

            color: #1B1F3B;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 20px;
            text-transform: uppercase; 



             position: absolute;
            top: 15px;
            right: -5px;
            background: #FFD700;
            color: #1B1F3B;
            padding: 5px 15px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 3px;
            transform: rotate(10deg);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
        }

        .course-content {
            padding: 20px;

        }

        .course-title {
            color: #1B1F3B;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .course-desc {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .course-footer {
            padding: 0 0px 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .price {
            color: black;
            font-size: 24px;
            font-weight: 700;
             font-size: 1.4em;
            color: #000000;
            font-weight: bold; 
        }

        .price span {
            color: #999;
            font-size: 14px;
            font-weight: 400;
        }

        .enroll-btn {
            background: black;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .enroll-btn:hover {
            background: #2e2e2e;
            transform: translateY(-2px);
        }

 */
        /* design -2  */

        .course-card {
            width: 280px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }

        .course-card:hover {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            transform: translateY(-5px);
        }

        .course-image {
            width: 100%;
            height: 180px;
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .course-icon {
            font-size: 70px;
            color: white;
            opacity: 0.85;
            transition: all 0.3s ease;
        }

        .course-card:hover .course-icon {
            opacity: 1;
            transform: scale(1.05);
        }

        .premium-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background: black;
            color: white;
            padding: 4px 8px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 3px;
        }

        .course-content {
            padding: 15px;
        }

        .course-title {
            /*color: black;*/
            /*font-size: 20px;*/
            /*font-weight: 600;*/
            /*margin-bottom: 8px;*/
            
            
            
            
            white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    color: #000000;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
        }

        .course-desc {
            /*color: #666;*/
            /*font-size: 13px;*/
            /*line-height: 1.4;*/
            /*margin-bottom: 15px;*/
             color: #333333;
            font-size: 0.9rem;
          
            margin-bottom: 16px;
              max-height: 3em; /* Adjust the height based on your line height */
            min-height: 3em; /* Adjust the height based on your line height */
            overflow: hidden;
            line-height: 1.5em; /* Adjust the line height for your text */
            display: -webkit-box;
            -webkit-line-clamp: 2; /* Limit to 2 lines */
            -webkit-box-orient: vertical;
        }

        .course-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 12px;
        }

        .price {
            color: black;
            font-size: 18px;
            font-weight: 600;
        }

        .price span {
            color: #888;
            font-size: 12px;
            font-weight: 400;
        }

        .enroll-btn {
            background: black;
            color: white;
            padding: 6px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s ease;
        }

        .enroll-btn:hover {
            background: #222;
            transform: scale(1.03);
        }

        /* service start here */
        .services-section {
            background-color: #fff;
            padding: 60px 20px;
            overflow: hidden;
        }

        .services-container {
            max-width: none;
            /* Remove max-width constraint */
            width: 200%;
            /* Double the width to accommodate duplicated content */
            display: flex;
            flex-wrap: nowrap;
            animation: slide 20s linear infinite;
        }

        /* .services-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            animation: slide 20s linear infinite;
        } */

        .section-title {
            text-align: center;
            font-size: 36px;
            margin-bottom: 40px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #000;
            position: relative;
        }

        .section-title:after {
            content: '';
            width: 60px;
            height: 3px;
            background: #000;
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
        }

        .service-card {
            background: #000;
            color: #fff;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            margin: 0 15px;
            min-width: 150px;
            transition: transform 0.3s ease;
        }

        .service-card:hover {
            transform: scale(1.1);
        }

        .service-icon {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .service-title {
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Custom icons using Unicode */
        .corporate-icon:before {
            content: "\1F3E2";
        }

        .fresher-icon:before {
            content: "\1F393";
        }

        .industrial-icon:before {
            content: "\1F3ED";
        }

        .online-icon:before {
            content: "\1F5A5";
        }

        .placement-icon:before {
            content: "\1F91D";
        }

        .summer-icon:before {
            content: "\2600";
        }

        /* Sliding animation */
        @keyframes slide {
            0% {
                transform: translateX(0%);
            }

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

        /* Duplicate cards for continuous scrolling */
        .services-container {
            display: flex;
            flex-wrap: nowrap;
        }

        /* about section start here */
        /* Section styling */
        .who-we-are {


            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding-top: 20px;
        }

        /* Container */
        .container {
            max-width: 900px;

            text-align: center;
            position: relative;
            z-index: 2;
        }

        /* Heading styling */
        .content h2 {
            font-size: 2em;
            color: #0f0f0f;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: -2px;
            margin-bottom: 40px;
            position: relative;
            opacity: 0;
            animation: fadeSlideUp 1.5s ease forwards 0.5s;
        }

        .content h2::before {
            content: '';
            position: absolute;
            width: 150px;
            height: 8px;
            background: linear-gradient(90deg, #d4af37, #f0e68c);
            /* Gold gradient */
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            animation: expandLine 2s ease infinite alternate;
        }

        /* Text styling */
        .content p {
            font-size: 1.4em;
            color: #333;
            line-height: 1.7;
            max-width: 700px;
            margin: 0 auto;
            font-weight: 300;
            opacity: 0;
            animation: fadeSlideUp 1.5s ease forwards 1s;
        }



        /* Animations */
        @keyframes fadeSlideUp {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }

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

        @keyframes expandLine {
            0% {
                width: 150px;
            }

            100% {
                width: 250px;
            }
        }




        /* Overlay texture */
        .texture {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.95), rgba(240, 230, 140, 0.05));
            z-index: 1;
            mix-blend-mode: overlay;
        }



        /* why ikeyskill start here */

        .section {
            background-color: #fff;
            color: #000;
            line-height: 1.6;
            padding: 80px 20px;
            position: relative;
            overflow: hidden;
        }

        .why_section-title {
            font-size: 42px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #000;
            position: relative;
            z-index: 1;
            text-align: left;
            max-width: 1200px;
            margin: 0 auto 60px;
        }

        .why_section-title span {
            color: #fff;
            background: #000;
            padding: 5px 15px;
            border-radius: 5px;
            display: inline-block;
        }

        .content-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
            position: relative;
        }

        .content-card {
            position: relative;
            padding: 40px;
            background: linear-gradient(135deg, #fff 50%, #f0f0f0 50%);
            border-left: 6px solid #000;
            border-radius: 0 20px 20px 0;
            transition: all 0.4s ease;
            opacity: 0;
            /* Initial state: hidden */
            transform: translateX(-30px);
            /* Initial state: shifted left */
        }

        .content-card:hover {
            transform: translateX(10px);
            box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.1);
        }

        .card-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #000;
            position: relative;
        }

        .card-title:after {
            content: '';
            width: 40px;
            height: 2px;
            background: #000;
            position: absolute;
            left: 0;
            bottom: -5px;
        }

        .card-text {
            font-size: 16px;
            color: #444;
        }

        /* Geometric Background Elements */
        .section:before {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.05);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            z-index: 0;
        }

        .section:after {
            content: '';
            position: absolute;
            bottom: -30px;
            right: -30px;
            width: 150px;
            height: 150px;
            background: rgba(0, 0, 0, 0.05);
            clip-path: circle(50% at 50% 50%);
            z-index: 0;
        }

        /* Animation */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        /* Visible class triggers animation */
        .section.visible .content-card {
            animation: slideIn 0.6s ease forwards;
        }

        .section.visible .content-card:nth-child(1) {
            animation-delay: 0.2s;
        }

        .section.visible .content-card:nth-child(2) {
            animation-delay: 0.4s;
        }

        .section.visible .content-card:nth-child(3) {
            animation-delay: 0.6s;
        }

        /* chatboot css start here  */
        /* Inquiry Button */
        .inquiry-btn {
            position: fixed;
            bottom: 0px;
            right: 0px;
            width: 160px;
            font-size: 14px;
            height: 30px;
            color: white;
            background: linear-gradient(45deg, #1B1F3B, #1B1F3B);
            /* Vibrant gradient */
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            display: flex;
            align-items: center;
            padding-left: 20px;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
            z-index: 1000;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .inquiry-btn:hover {
            transform: scale(1.0);
            box-shadow: 0 12px 25px rgba(0, 123, 255, 0.4);
        }

        /* Chatbot Form */
        .chatbot-form {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 340px;
            background: #fff;
            border-radius: 20px 20px 0 20px;
            /* Unique corner styling */
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            transform: scale(0);
            transform-origin: bottom right;
            transition: transform 0.4s ease;
            z-index: 999;
        }

        .chatbot-form.active {
            transform: scale(1);
        }

        /* Header */
        .chatbot-header {
            background: linear-gradient(45deg, #1B1F3B, #1B1F3B);
            padding: 15px 20px;
            color: #fff;
            font-size: 1.2em;
            font-weight: 500;
            position: relative;
        }



        /* Form Body */
        .chatbot-body {
            padding: 20px;
            background: #fafafa;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-size: 0.9em;
            color: #555;
            margin-bottom: 5px;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 0.95em;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: #007bff;
        }

        .form-group textarea {
            resize: none;
            height: 80px;
        }

        /* Submit Button */
        .submit-btn {
            width: 100%;
            padding: 12px;
            background: #1B1F3B;
            border: none;
            border-radius: 8px;
            color: #fff;
            font-size: 1em;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        .submit-btn:hover {
            background: #434661;
            transform: translateY(-2px);
        }

        /* Close Button */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            color: #fff;
            cursor: pointer;
            background: none;
            border: none;
        }
        
        
        
        /* Success Modal */
        .success-modal {
             position: fixed;
            bottom: 216px; /* Position above the chatbot form */
            right: 30px; /* Align with chatbot form's right edge */
            transform: scale(0);
            transform-origin: bottom right;
            background: #fff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            text-align: center;
            z-index: 1001; /* Higher than chatbot-form (999) */
            transition: transform 0.3s ease;
            max-width: 340px; /* Match chatbot form width */
            width: 90%;
            /*position: fixed;*/
            /*bottom: 200px;*/
            /*right: 30px;*/
            /*transform: scale(0);*/
            /*transform-origin: bottom right;*/
            /*background: linear-gradient(135deg, #ffffff, #f0f4ff);*/
            /*padding: 25px;*/
            /*border-radius: 15px;*/
            /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);*/
            /*text-align: center;*/
            /*z-index: 1001;*/
            /*max-width: 340px;*/
            /*width: 90%;*/
            /*opacity: 0;*/
            /*transition: transform 0.4s ease, opacity 0.4s ease;*/
        }

        .success-modal.active {
            transform: scale(1);
            opacity: 1;
            animation: bounceIn 0.6s ease;
        }

        /* Backdrop */
        .success-modal::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*background: rgba(0, 0, 0, 0.4);*/
            z-index: 1000;
            display: none;
        }

        .success-modal.active::before {
            display: block;
        }

        /* Checkmark Animation */
        .checkmark {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #28a745;
            stroke-miterlimit: 10;
            margin: 0 auto 15px;
            box-shadow: inset 0px 0px 0px #28a745;
            animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
        }

        .checkmark__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #28a745;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }

        .checkmark__check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #28a745;
            fill: none;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }

        .success-modal h3 {
            color: #4F6ACA;
            font-size: 1.3em;
            margin-bottom: 10px;
            opacity: 0;
            animation: fadeIn 0.5s ease 0.6s forwards;
        }

        .success-modal p {
            color: #555;
            font-size: 0.95em;
            margin-bottom: 20px;
            opacity: 0;
            animation: fadeIn 0.5s ease 0.8s forwards;
        }

        .success-modal img {
            height: 35px;
            margin-bottom: 15px;
        }

        .success-modal button {
            padding: 10px 30px;
            background: linear-gradient(45deg, #4F6ACA, #6b8cff);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: transform 0.2s ease, background 0.3s ease;
            opacity: 0;
            animation: fadeIn 0.5s ease 1s forwards;
        }

        .success-modal button:hover {
            background: linear-gradient(45deg, #3b55a8, #5977e6);
            transform: translateY(-2px);
        }

        /* Animations */
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); opacity: 1; }
            70% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }

        @keyframes stroke {
            100% { stroke-dashoffset: 0; }
        }

        @keyframes scale {
            0%, 100% { transform: none; }
            50% { transform: scale3d(1.1, 1.1, 1); }
        }

        @keyframes fill {
            100% { box-shadow: inset 0px 0px 0px 30px #e6f4ea; }
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }


        /* Animation for button pulse */
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
            }

            70% {
                box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
            }
        }

        .inquiry-btn.pulse {
            animation: pulse 2s infinite;
        }













        /* footer start here */

        .premium-footer {
            background: #1B1F3B;
            color: white;
            padding: 60px 20px 20px;
            position: relative;
            overflow: hidden;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
        }

        .footer-section h3 {
            color: #ffd900aa;
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: #ffd700;
        }

        .footer-section p {
            color: #d0d4e4;
            font-size: 14px;
            line-height: 1.6;
        }

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

        .footer-section ul li {
            margin-bottom: 12px;
        }

        .footer-section ul li a {
            color: #d0d4e4;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .footer-section ul li a:hover {
            color: #ffd700;
            padding-left: 5px;
        }

        .contact-info i {
            margin-right: 10px;
            color: #ffd700;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-icons a {
            color: white;
            font-size: 20px;
            transition: all 0.3s ease;
        }

        .social-icons a:hover {
            color: #ffd700;
            transform: translateY(-3px);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 40px;
            padding-top: 20px;
            text-align: center;
            color: #d0d4e4;
            font-size: 13px;
        }

        .footer-logo {
            font-size: 24px;
            font-weight: 700;
            color: #ffd700;
            margin-bottom: 15px;
        }

/* here homecontent tutorial css start */
   
  
/* Sidebar */
.sidebar {
    width: 230px;
    height: auto;

    background: linear-gradient(to bottom, #ffffff, #e0e0e0); /* Smooth white-to-gray gradient */
    color: black;
    position: absolute;
    top: 125px;
    left: 0px;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
     
}

.sidebar.closed {
    transform: translateX(-100%);
}

.sidebar h2 {
    text-align: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
    font-size: 20px;
  
   border-bottom-style: solid;
   border-bottom-width: thin;
    color: #2E4C6D;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    padding: 0; /* Remove padding from li to let <a> handle it */
    
    border-radius: 5px;
    transition: background 0.3s;
}

.sidebar ul a {
    text-decoration: none;
    color: black;
    transition: color 0.5s, background 0.3s;
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    display: block; /* Make <a> fill the entire <li> */
    padding: 10px 20px; /* Move padding to <a> for clickable area */
    border-radius: 5px;
}

.sidebar ul a:hover {
    color: #1B1F3B;
    background-color: #d9d9d9; /* Hover effect on <a> */
}

.sidebar ul a.active {
    background-color: #2E4C6D; /* Active link background */
    color: white; /* Active link text color */
    font-weight: 500; /* Bold for emphasis */
}




  /* Home Content */
        .home-content {
            margin-left: 230px;
           padding-top: 20px;
            padding-left: 10px;
             padding-right: 2%;
            flex-grow: 1;
             
             width: vw;
             min-height: 100vh;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            transition: margin-left 0.4s ease-in-out;
        }

        .home-content.shifted {
            margin-left: 0;
        }

        .content-wrapper {
            flex-grow: 1;
           background-color: white;
            padding: 25px;
            word-wrap: break-word; /* break long words */
            overflow-wrap: break-word;
            width: 80%;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
   .content-wrapper p {
   line-height: 30px;
  word-spacing: 3px;
  
     word-wrap: break-word; /* break long words */
            overflow-wrap: break-word;
  text-align: justify;
  font-family: Nunito, sans-serif;
 
font-weight: 500;

color: rgb(39, 50, 57);

  }
  .content-wrapper h3 {
      font-family: verdana, helvetica, arial, sans-serif;
font-size: 25px;
font-weight: 540;
line-height: 33.6px;
color: rgb(28, 40, 51);
/*font-family: 'Inter', sans-serif;*/
  
/*font-size: 25px;*/
/*font-weight: 600;*/

 margin-bottom: 12px;
/*color: rgb(39, 50, 57);*/
  }


 .content-wrapper code {

    overflow-x: auto;
      font-family: 'Fira Code', monospace;
    line-height: 25px;
    font-size: 14px;
    font-weight: 260;
    border-radius: 8px;
    padding: 20px;
    

  }
  
  hr{
  height: 1px;
  background-color: #ccc;
  border: none;
 
  }
        .extra-content {
            margin-top: 20px;
            padding: 15px;
            background: #f9f9f9;
            border-left: 4px solid black;
        }

 
        .right-links {
            
            min-width: 20%;
            max-width: 20%;
            background: #ffffff;
            padding: 15px;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            position: sticky;
            top: 100px;
        }

        .right-links ul {
            list-style: none;
            padding: 0;
        }

        .right-links ul li {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .right-links ul li a {
            text-decoration: none;
            color: black;
            display: block;
            line-height: 23px;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .right-links ul li a:hover {
            color: gray;
        }


        /* Navbar Toggle Button */
        .sidebar-menu-toggle {

            position: absolute;
            top: 265px;
            left: 0px;
            background-color: #6c757d;
            /* Modern gray */
            color: white;
            border: none;
            cursor: pointer;
            height: 28px;
            width: 40px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            z-index: 1000;
            display: none;
            transition: background 0.3s ease-in-out;
        }

        .sidebar-menu-toggle :hover {
            background-color: #5a6268;
            /* Darker gray */
        }
        
        
        
/*scroll button code start*/
 .scroll-btn {
        position: fixed;
            bottom: 35px;
            right: 20px;
            display: none; /* Initially hidden */
            background-color:#1B1F3B;
            color: white;
            border: none;
            z-index: 1000;
            padding: 15px;
            border-radius: 50%; /* Makes it a circle */
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 18px;
            line-height: 0;
            transition: background-color 0.3s ease;
        }

        .scroll-btn:hover {
            background-color: #383B5B;
        }
           .scroll-btn i {
            font-size: 20px;
        }

/*end scroll button code */


/*copy button start*/


  .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
             background-color: transparent;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .copy-btn:hover {}

        .copy-btn.copied {

            color: white;
        }


/*copy button end*/




    /* Popup Styling */
    /*    .advance-modal {*/
    /*        display: none;*/
    /*        position: fixed;*/
    /*        z-index: 1000;*/
    /*        left: 0;*/
    /*        top: 0;*/
    /*        width: 100%;*/
    /*        height: 100%;*/
    /*        background-color: rgba(0, 0, 0, 0.6);*/
    /*        justify-content: center;*/
    /*        align-items: center;*/
    /*        overflow: auto;*/
    /*        animation: fadeIn 0.5s ease-in-out;*/
    /*    }*/

        /* Fade-in animation for modal background */
    /*    @keyframes fadeIn {*/
    /*        from { opacity: 0; }*/
    /*        to { opacity: 1; }*/
    /*    }*/

    /*    .advance-modal-content {*/
    /*        background: linear-gradient(135deg, #1e3a8a, #3b82f6);*/
    /*        color: #fff;*/
    /*        padding: 30px;*/
    /*        border-radius: 12px;*/
    /*        width: 90%;*/
    /*        max-width: 600px;*/
    /*        position: relative;*/
    /*              top: 60px;*/
    /*        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);*/
    /*        transform: translateY(-50px);*/
    /*        animation: slideIn 0.5s ease-out;*/
    /*        font-family: 'Arial', sans-serif;*/
    /*    }*/

        /* Slide-in animation for modal content */
    /*    @keyframes slideIn {*/
    /*        from { transform: translateY(-100px); opacity: 0; }*/
    /*        to { transform: translateY(-50px); opacity: 1; }*/
    /*    }*/

        /* Fade-out animation for closing */
    /*    .advance-modal.closing {*/
    /*        animation: fadeOut 0.5s ease-in-out;*/
    /*    }*/

    /*    @keyframes fadeOut {*/
    /*        from { opacity: 1; }*/
    /*        to { opacity: 0; }*/
    /*    }*/

    /*    .advance-modal-content.closing {*/
    /*        animation: slideOut 0.5s ease-in;*/
    /*    }*/

    /*    @keyframes slideOut {*/
    /*        from { transform: translateY(-50px); opacity: 1; }*/
    /*        to { transform: translateY(-100px); opacity: 0; }*/
    /*    }*/

    /*    .advance-close-btn {*/
    /*        position: absolute;*/
    /*        right: 15px;*/
    /*        top: 15px;*/
    /*        font-size: 24px;*/
    /*        cursor: pointer;*/
    /*        color: #fff;*/
    /*        transition: color 0.3s;*/
    /*    }*/

    /*    .advance-close-btn:hover {*/
    /*        color: #ff4d4d;*/
    /*    }*/

    /*    .advance-modal-content h2 {*/
    /*        font-size: 2rem;*/
    /*        margin-bottom: 15px;*/
    /*        font-weight: 900;*/
    /*        text-align: center;*/
    /*        color: #FDAA1C;*/
    /*        text-transform: uppercase;*/
    /*        letter-spacing: 1px;*/
    /*    }*/

    /*    .advance-modal-content p {*/
    /*        font-size: 1.1rem;*/
    /*        margin: 10px 0;*/
    /*        line-height: 1.5;*/
    /*    }*/

    /*    .advance-modal-content ul {*/
    /*        list-style: none;*/
    /*        padding: 0;*/
    /*        margin: 15px 0;*/
    /*    }*/

    /*    .advance-modal-content ul li {*/
    /*        font-size: 1rem;*/
    /*        margin: 8px 0;*/
    /*        padding-left: 20px;*/
    /*        position: relative;*/
    /*    }*/

    /*    .advance-modal-content ul li::before {*/
    /*        content: '✓';*/
    /*        position: absolute;*/
    /*        left: 0;*/
    /*        color: #34d399;*/
    /*        font-weight: bold;*/
    /*    }*/

    /*    .advance-login-btn {*/
    /*        display: inline-block;*/
    /*        background: red;*/
    /*        color: white;*/
    /*        padding: 10px 180px;*/
    /*        border-radius: 10px;*/
    /*        text-decoration: none;*/
    /*        font-size: 1rem;*/
    /*        font-weight: bold;*/
    /*        text-align: center;*/
    /*        transition: transform 0.3s, background 0.3s;*/
    /*        margin-top: 15px;*/
    /*        display: block;*/
    /*        width: fit-content;*/
    /*        margin-left: auto;*/
    /*        margin-right: auto;*/
    /*    }*/

    /*    .advance-login-btn:hover {*/
    /*        background: #e63939;*/
    /*        transform: scale(1.05);*/
    /*    }*/

    /*    .advance-modal-content .price {*/
    /*        font-size: 1.5rem;*/
    /*        font-weight: bold;*/
    /*        color: #34d399;*/
    /*        text-align: center;*/
    /*        margin: 15px 0;*/
    /*    }*/

    /*    .advance-modal-content .limited {*/
    /*        font-size: 1rem;*/
    /*        color:#FDAA1C;*/
    /*        text-align: center;*/
    /*        font-weight: bold;*/
    /*        margin-bottom: 20px;*/
    /*    }*/

  /* Popup Styling */
    .advance-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        justify-content: center;
        align-items: center;
        overflow: auto;
        animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .advance-modal-content {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 30px;
        width: 90%;
        max-width: 650px;
        position: relative;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        color: #333;
        margin-top: 0px; /* Added margin to ensure header visibility */
        max-height: calc(100vh - 100px); /* Restrict height to prevent overflow */
        overflow-y: auto; /* Enable scrolling if content overflows */
        animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
        from { transform: translateY(-50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .advance-close-btn {
        position: absolute;
        right: 16px;
        top: 16px;
        font-size: 24px;
        cursor: pointer;
        color: #555;
        transition: color 0.3s ease;
    }

    .advance-close-btn:hover {
        color: #d32f2f;
    }

    .advance-heading {
        text-align: center;
        color: #2b2d42;
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .advance-duration {
        text-align: center;
        font-size: 15px;
        color: #666;
        margin-bottom: 25px;
    }

    .advance-description {
        font-size: 16px;
        line-height: 1.7;
        color: #333;
        margin-bottom: 25px;
    }

    .highlight-text {
        color: #2b2d42;
        font-weight: bold;
    }

    .advance-section {
        margin: 25px 0;
        padding: 20px;
        border-left: 5px solid #4CAF50;
        background: #f0fdf4;
    }

    .advance-section.program-highlights {
        border-left-color: #2196F3;
        background: #e3f2fd;
    }

    .advance-section-title {
        font-size: 18px;
        margin-top: 0;
        color: #2e7d32;
        font-weight: 600;
    }

    .advance-section.program-highlights .advance-section-title {
        color: #1565c0;
    }

    .advance-list {
        margin: 10px 0;
        padding-left: 18px;
        line-height: 1.8;
        font-size: 15px;
        color: #333;
        list-style: disc;
    }

    .advance-price {
        font-size: 16px;
        margin: 20px 0;
        text-align: left; /* Changed to left alignment */
    }

    .advance-price strong:first-child {
        color: #d32f2f;
    }

    .advance-button-container {
        text-align: center;
        margin: 30px 0;
    }

    .advance-login-btn {
        background: #2b2d42;
        color: #fff;
        padding: 14px 28px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        transition: background 0.3s ease, transform 0.3s ease;
    }

    .advance-login-btn:hover {
        background: #1a1c2c;
        transform: scale(1.05);
    }

        /* Responsive */
        @media (max-width: 480px) {
           
         .home-content{
         padding: 0px !important;
  
         
}

.content-wrapper{
   
     border-radius: 0px !important;
}
 .content-wrapper code {

    overflow-x: auto;
    line-height: 20px;
  }
 
            .chatbot-form {
                width: 90%;
                right: 5%;
                bottom: 80px;
            }

            .inquiry-btn {
                bottom: 2px;
                right: 0px;
            }
            
             .success-modal {
                width: 90%;
                right: 5%;
                bottom: 280px;
                padding: 20px;
            }

            .success-modal h3 {
                font-size: 1.1em;
            }

            .success-modal p {
                font-size: 0.85em;
            }

            .checkmark {
                width: 50px;
                height: 50px;
            }
            
  
        }

@media (max-width: 768px) {

            .left,
            .right {
                flex: 1 1 100%;
            }
            
            
.home-content {
    padding: 0px;
 
}
.content-wrapper{
    width: 100%;
}
            
 .content-wrapper code {

    overflow-x: auto;
    line-height: 20px;
  }
 
            .footer-container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .footer-section h3::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .social-icons {
                justify-content: center;
            }

            .content h2 {
                font-size: 3em;
            }

            .content p {
                font-size: 1.2em;
            }

            .content h2::before {
                width: 100px;
            }
            

            @keyframes expandLine
            {
                0% {
                    width: 100px;
                }

                100% {
                    width: 150px;
                }
            }
        

}

        /* Responsive Styles */
        @media (max-width: 900px) 
        {
            .header 
            {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 15px;
                padding: 15px;
            }

            .search-box {
                width: 100%;
                margin: 10px 0;
            }

            .auth-links {
                justify-content: center;
                width: 100%;
            }

            .submenu-container {
                flex-direction: column;
                align-items: flex-start;
                /* Align items to the left on small screens */
                display: none;
                padding: 15px 30px;

                width: 80%;
                max-width: 1200px;
            }

            .submenu-container a {
                display: block;
                width: 100%;
                text-align: left;
                /* Align text to the left */
                padding: 5px 0;
            }

            .menu-toggle {
                display: block;
            }
/* css start for homecontent tutorial */

.sidebar {
    transform: translateX(-100%);
    position: absolute;
    top: 250px;
    
     z-index: 1000;
    left: 0;
}

.sidebar.open {
    transform: translateX(0);
}



.sidebar-menu-toggle  {
    display: block;
}


.home-content {
flex-direction: column;
margin-left: 0px;
 padding: 20px;
}


  
 .content-wrapper {
             
            background: white;
            padding: 25px;
            width: 100%;
            word-wrap: break-word; /* break long words */
            overflow-wrap: break-word;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
 .content-wrapper code {

     display: block; /* important */
    overflow-x: auto;
    white-space: pre; /* preserve formatting and prevent wrapping */
    line-height: 20px;
    background-color: #1e1e1e;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
  }

 
 
.right-links {
width: 100%;
text-align: center;
position: relative;
top: 0;
overflow-y: visible; /* No unnecessary scroll */
}

.right-links ul {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}

.right-links ul li {
display: inline-block;
border-bottom: none;
}
        }