/* learning section Start  */
   .learning_section {
       background: linear-gradient(135deg, rgba(45, 212, 191, 0.08) 0%, rgba(251, 191, 36, 0.08) 100%);
       padding: 50px 0;
       display: flex;
       align-items: center;
   }

   .learning_main_heading {
       font-size: var(--heading-1-size);
       font-weight: var(--heading-1-weight);
       color: var(--text-dark);
       margin-bottom: 40px;
       text-align: center;
   }

   .learning_search_container {
       max-width: 800px;
       margin: 0 auto 30px;
       position: relative;
   }

   .learning_search_wrapper {
       position: relative;
       box-shadow: 0 8px 24px rgba(15, 63, 70, 0.12);
       border-radius: 50px;
       overflow: hidden;
   }

   .learning_search_input {
       width: 100%;
       padding: 18px 60px 18px 24px;
       border: 2px solid var(--border-secondary-color);
       border-radius: 50px;
       font-size: var(--paragraph-large-size);
       font-weight: var(--paragraph-large-weight);
       color: var(--text-dark);
       background-color: var(--background-white);
       transition: all 0.3s ease;
   }

   .learning_search_input:focus {
       outline: none;
       border-color: var(--primary-color);
       box-shadow: 0 0 0 4px rgba(31, 111, 120, 0.1);
   }

   .learning_search_input::placeholder {
       color: var(--text-muted);
       font-weight: var(--paragraph-normal-weight);
   }

   .learning_search_icon {
       position: absolute;
       right: 24px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--primary-color);
       font-size: 20px;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .learning_search_icon:hover {
       color: var(--accent-dark);
       transform: translateY(-50%) scale(1.1);
   }

   .learning_tag_container {
       max-width: 800px;
       margin: 0 auto;
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       justify-content: center;
       padding: 20px 0;
   }

   .learning_tag_badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 10px 20px;
       background-color: var(--background-white);
       color: var(--text-dark);
       border: 2px solid var(--border-color);
       border-radius: 25px;
       font-size: var(--paragraph-normal-size);
       font-weight: var(--paragraph-medium-weight);
       cursor: pointer;
       transition: all 0.3s ease;
       text-decoration: none;
   }

   .learning_tag_badge:hover {
       background-color: var(--primary-color);
       color: var(--background-white);
       border-color: var(--primary-color);
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(31, 111, 120, 0.2);
   }

   .learning_tag_badge i {
       font-size: 14px;
   }

   .learning_refund_badge {
       background-color: var(--primary-color);
       color: var(--background-white);
       border-color: var(--primary-color);
   }

   .learning_refund_badge:hover {
       background-color: var(--accent-dark);
       border-color: var(--accent-dark);
   }

   .learning_suggestion_text {
       text-align: center;
       color: var(--text-muted);
       font-size: var(--paragraph-small-size);
       font-weight: var(--paragraph-normal-weight);
       margin-top: 20px;
       margin-bottom: 15px;
   }

   @media (max-width: 768px) {
       .learning_main_heading {
           font-size: 24px;
       }

       .learning_search_input {
           padding: 16px 50px 16px 20px;
           font-size: var(--paragraph-normal-size);
       }

       .learning_tag_container {
           padding: 15px;
       }

       .learning_tag_badge {
           padding: 8px 16px;
           font-size: var(--paragraph-small-size);
       }
   }

   /* Struggling with Programming section Start  */

   .Struggling_hero_section {
       padding: 50px 0;
       min-height: 100vh;
       display: flex;
       align-items: center;
   }

   .Struggling_main_headline {
       font-size: 48px;
       font-weight: var(--heading-1-weight);
       color: var(--text-dark);
       margin-bottom: 20px;
       line-height: 1.2;
   }

   .Struggling_subtext {
       font-size: var(--paragraph-large-size);
       font-weight: var(--paragraph-large-weight);
       color: var(--text-muted);
       margin-bottom: 30px;
       line-height: 1.6;
   }

   .Struggling_primary_btn {
       background-color: var(--primary-color);
       color: var(--background-white);
       padding: 14px 32px;
       border: none;
       border-radius: 8px;
       font-size: var(--paragraph-medium-size);
       font-weight: var(--paragraph-medium-weight);
       cursor: pointer;
       transition: all 0.3s ease;
       display: inline-flex;
       align-items: center;
       gap: 10px;
       text-decoration: none;
   }

   .Struggling_primary_btn:hover {
       background-color: var(--accent-dark);
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(31, 111, 120, 0.3);
   }

   .Struggling_feature_buttons {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       margin-top: 30px;
   }

   .Struggling_feature_btn {
       background-color: var(--background-white);
       color: var(--text-dark);
       padding: 10px 20px;
       border: 2px solid var(--border-color);
       border-radius: 25px;
       font-size: var(--paragraph-normal-size);
       font-weight: var(--paragraph-medium-weight);
       cursor: pointer;
       transition: all 0.3s ease;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       text-decoration: none;
   }

   .Struggling_feature_btn:hover {
       border-color: var(--secondary-color);
       background-color: var(--secondary-color);
       color: var(--background-white);
       transform: translateY(-2px);
   }

   .Struggling_right_content {
       position: relative;
       height: 500px;
   }

   .Struggling_topic_card {
       position: absolute;
       background-color: var(--background-white);
       border: 2px solid var(--border-color);
       border-radius: 12px;
       padding: 16px 20px;
       box-shadow: 0 4px 12px rgba(11, 46, 51, 0.08);
       transition: all 0.3s ease;
       cursor: pointer;
   }

   .Struggling_topic_card:hover {
       transform: translateY(-5px);
       box-shadow: 0 8px 24px rgba(11, 46, 51, 0.15);
       border-color: var(--primary-color);
   }

   .Struggling_topic_card_title {
       font-size: var(--paragraph-medium-size);
       font-weight: var(--paragraph-medium-weight);
       color: var(--text-dark);
       margin-bottom: 8px;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .Struggling_topic_card_desc {
       font-size: var(--paragraph-small-size);
       color: var(--text-muted);
       margin: 0;
   }

   .Struggling_topic_icon {
       width: 40px;
       height: 40px;
       background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--background-white);
       font-size: 18px;
   }

   .Struggling_code_snippet {
       position: absolute;
       background-color: var(--text-dark);
       border-radius: 10px;
       padding: 16px;
       box-shadow: 0 8px 24px rgba(11, 46, 51, 0.2);
       font-family: 'Courier New', monospace;
       font-size: 13px;
       color: #00ff88;
       line-height: 1.5;
       border: 1px solid var(--primary-color);
   }

   .Struggling_code_snippet::before {
       content: '';
       display: block;
       margin-bottom: 10px;
       height: 12px;
       border-radius: 6px;
       background: linear-gradient(90deg, #ff5f56 0%, #ffbd2e 33%, #27c93f 66%);
       width: 60px;
   }

   /* Positioning */
   .Struggling_card_1 {
       top: 50px;
       right: 50px;
       z-index: 3;
   }

   .Struggling_card_2 {
       top: 180px;
       right: 200px;
       z-index: 2;
   }

   .Struggling_card_3 {
       top: 375px;
       right: 80px;
       z-index: 2;
   }

   .Struggling_code_1 {
       top: 20px;
       left: 50px;
       z-index: 2;
   }

   .Struggling_code_2 {
       bottom: 100px;
       left: 30px;
       z-index: 1;
   }

   @media (max-width: 992px) {
       .Struggling_main_headline {
           font-size: 36px;
       }

       .Struggling_right_content {
           height: 400px;
           margin-top: 50px;
       }

       .Struggling_card_1,
       .Struggling_card_2,
       .Struggling_card_3 {
           position: relative;
           top: auto;
           right: auto;
           margin-bottom: 15px;
       }

       .Struggling_code_1,
       .Struggling_code_2 {
           display: none;
       }
   }

   @media (max-width: 768px) {
       .Struggling_main_headline {
           font-size: 28px;
       }

       .Struggling_hero_section {
           padding: 50px 0;
       }

       .Struggling_feature_buttons {
           gap: 8px;
       }

       .Struggling_feature_btn {
           font-size: var(--paragraph-small-size);
           padding: 8px 16px;
       }
   }


   /*  Get Involved section start  */
   .get_involved_section {
       background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(45, 212, 191, 0.08) 100%);
       padding: 50px 0;
   }

   .get_involved_heading {
       font-size: var(--heading-1-size);
       font-weight: var(--heading-1-weight);
       color: var(--text-dark);
       text-align: center;
       margin-bottom: 40px;
       position: relative;
   }

   .get_involved_heading::after {
       content: '';
       display: block;
       width: 80px;
       height: 4px;
       background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
       margin: 15px auto 0;
       border-radius: 2px;
   }

   .get_involved_tiles_container {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
       margin-top: 30px;
   }

   .get_involved_tile {
       background: linear-gradient(135deg, var(--background-white) 0%, var(--background-light) 100%);
       border: none;
       border-radius: 16px;
       padding: 30px 20px;
       text-align: center;
       transition: all 0.4s ease;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       box-shadow: 0 4px 15px rgba(11, 46, 51, 0.08);
   }

   .get_involved_tile::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 100%;
       background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
       opacity: 0;
       transition: opacity 0.4s ease;
       z-index: 0;
   }

   .get_involved_tile:hover::before {
       opacity: 1;
   }

   .get_involved_tile:hover {
       transform: translateY(-2px);
       box-shadow: 0 15px 40px rgba(31, 111, 120, 0.25);
   }

   .get_involved_tile>* {
       position: relative;
       z-index: 1;
   }

   .get_involved_tile:hover .get_involved_tile_title,
   .get_involved_tile:hover .get_involved_tile_description,
   .get_involved_tile:hover .get_involved_tile_link {
       color: var(--background-white);
   }

   .get_involved_icon_wrapper {
       width: 70px;
       height: 70px;
       margin: 0 auto 20px;
       background-color: var(--background-white);
       border-radius: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.4s ease;
       box-shadow: 0 4px 12px rgba(31, 111, 120, 0.1);
   }

   .get_involved_tile:hover .get_involved_icon_wrapper {
       transform: scale(1.15);
       box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
       background-color: rgba(255, 255, 255, 0.95);
   }

   .get_involved_icon {
       font-size: 32px;
       background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .get_involved_tile_title {
       font-size: var(--paragraph-medium-size);
       font-weight: var(--heading-4-weight);
       color: var(--text-dark);
       margin-bottom: 10px;
   }

   .get_involved_tile_description {
       font-size: var(--paragraph-small-size);
       font-weight: var(--paragraph-normal-weight);
       color: var(--text-muted);
       line-height: 1.5;
       margin-bottom: 15px;
   }

   .get_involved_tile_link {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       color: var(--primary-color);
       font-size: var(--paragraph-small-size);
       font-weight: var(--paragraph-medium-weight);
       text-decoration: none;
       transition: all 0.3s ease;
       padding: 8px 16px;
       background-color: var(--background-white);
       border-radius: 20px;
       margin-top: 5px;
   }

   .get_involved_tile:hover .get_involved_tile_link {
       background-color: rgba(255, 255, 255, 0.2);
       border: 1px solid rgba(255, 255, 255, 0.3);
   }

   .get_involved_tile_link:hover {
       gap: 12px;
   }

   .get_involved_tile_link i {
       transition: transform 0.3s ease;
   }

   .get_involved_tile:hover .get_involved_tile_link i {
       transform: translateX(5px);
   }

   /* Specific tile colors - removed as we're using gradient on hover */

   @media (max-width: 992px) {
       .get_involved_tiles_container {
           grid-template-columns: repeat(2, 1fr);
           gap: 20px;
       }
   }

   @media (max-width: 768px) {
       .get_involved_section {
           padding: 40px 0;
       }

       .get_involved_heading {
           font-size: 24px;
           margin-bottom: 30px;
       }

       .get_involved_tiles_container {
           grid-template-columns: 1fr;
           gap: 15px;
       }

       .get_involved_tile {
           padding: 20px 15px;
       }

       .get_involved_icon_wrapper {
           width: 50px;
           height: 50px;
           margin-bottom: 12px;
       }

       .get_involved_icon {
           font-size: 24px;
       }
   }

   /* Browse Tutorials section start */
   .browse_tutorials_section {
       background-color: var(--background-white);
       padding: 60px 0;
   }

   .browse_tutorials_heading {
       font-size: var(--heading-1-size);
       font-weight: var(--heading-1-weight);
       color: var(--text-dark);
       text-align: center;
       margin-bottom: 40px;
       position: relative;
   }

   .browse_tutorials_heading::after {
       content: '';
       display: block;
       width: 80px;
       height: 4px;
       background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
       margin: 15px auto 0;
       border-radius: 2px;
   }

   .browse_tutorials_grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
       gap: 15px;
       margin-top: 30px;
   }

   .browse_tutorials_card {
     background: linear-gradient(135deg, rgba(45, 212, 191, 0.08) 0%, rgba(251, 191, 36, 0.08) 100%);
    box-shadow: rgba(11, 46, 51, 0.08) 0px 4px 15px;
       border: 1px solid var(--border-secondary-color);
       border-radius: 10px;
       padding: 20px 15px;
       text-align: center;
       transition: all 0.3s ease;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       text-decoration: none;
       display: block;
   }

   .browse_tutorials_card::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
       transform: scaleX(0);
       transform-origin: left;
       transition: transform 0.3s ease;
   }

   .browse_tutorials_card:hover::after {
       transform: scaleX(1);
   }

   .browse_tutorials_card:hover {
       transform: translateY(-3px);
       box-shadow: 0 8px 20px rgba(31, 111, 120, 0.12);
   }

   .browse_tutorials_icon {
       width: 50px;
       height: 50px;
       margin: 0 auto 12px;
       background: var(--background-white);
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(11, 46, 51, 0.08);
   }

   .browse_tutorials_card:hover .browse_tutorials_icon {
       transform: scale(1.1);
       box-shadow: 0 4px 12px rgba(31, 111, 120, 0.2);
   }

   .browse_tutorials_icon i {
       background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .browse_tutorials_title {
       font-size: var(--paragraph-normal-size);
       font-weight: var(--paragraph-medium-weight);
       color: var(--text-dark);
       margin-bottom: 5px;
       transition: color 0.3s ease;
       line-height: 1.3;
   }

   .browse_tutorials_card:hover .browse_tutorials_title {
       color: var(--primary-color);
   }

   .browse_tutorials_subtitle {
       font-size: 12px;
       font-weight: var(--paragraph-normal-weight);
       color: var(--text-muted);
       margin: 0;
   }

   /* Specific icon colors - removed, using gradient text instead */

   @media (max-width: 992px) {
       .browse_tutorials_grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 18px;
       }
   }

   @media (max-width: 768px) {
       .browse_tutorials_section {
           padding: 40px 0;
       }

       .browse_tutorials_heading {
           font-size: 24px;
           margin-bottom: 30px;
       }

       .browse_tutorials_grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 15px;
       }

       .browse_tutorials_card {
           padding: 20px 15px;
       }

       .browse_tutorials_icon {
           width: 50px;
           height: 50px;
           font-size: 24px;
       }
   }

   @media (max-width: 480px) {
       .browse_tutorials_grid {
           grid-template-columns: 1fr;
       }
   }