.w-70 { width: 70% !important; } body .focus { color: var(--primary-color); } .w-50 { width: 50% !important; } .w-90 { width: 90% !important; } .icon.golden { fill: gold; color: gold; } .lister { display: block; padding: 0; } .list-item { display: flex; align-items: center; font-size: 17px; font-weight: 600; margin-bottom: 10px; } .list-item .icon { width: 24px; height: 24px; min-width: 24px; min-height: 24px; } .pricing-data { background: radial-gradient( circle, rgb(221 231 255 / 95%) 0%, rgb(244 244 250 / 17%) 100% ); padding: 3px; border-radius: 15px; display: flex; align-items: center; max-width: 475px; max-height: 125px; } .pricing-data .price-col-a { text-align: center; border-radius: 10px; padding: 15px 25px; background: var(--primary-color); color: white; margin-right: 10px; } .pricing-data .price-col-b { border-radius: 10px; padding: 15px; } .price-col-a .price { font-size: 40px; font-weight: 600; margin: 0; color:white } .price-col-a .meta-data { font-size: 14px; margin: 0; color: white} .price-col-b ul { padding: 0; display: block; } .price-col-b ul li { margin: 0; font-size: 14px; display: flex; align-items: center; justify-content: space-between; } .price-col-b p { margin: 0 !important; font-size: 14px; color: gray; } .price-col-b strong { margin-right: 15px; } .featured-brands { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; } .featured-brands img { width: 150px; height: 45px; object-fit: contain; object-position: center; transition: all 0.3s ease; } .featured-brands img:hover { cursor: pointer; transform: scale(1.08); } .magic-box { width: 1140px !important; margin-top: 180px; background: linear-gradient( 135deg, rgba(229, 237, 255, 1) 0%, rgb(217 239 255) 0%, rgba(2, 25, 202, 0) 100% ); border-radius: 20px; padding: 30px; } .second-image { width: 550px; height: auto; margin: -133px -60px -37px 0px; } .counted-best { display: flex; align-items: center; justify-content: space-between; } .counted-best .marking { width: 20%; min-height: 90px; text-align: left; } .marking .number { font-size: 40px; color: var(--primary-color); font-family: var(--heading-font); font-weight: 700; margin: 0; } .marking .name { color: gray; margin: 0; } .text-review { background: #fff !important; } .full .sp-20 { height: 20px !important; } .doubts { border-radius: 20px; background: radial-gradient( circle, rgba(229, 237, 255, 1) 0%, rgb(200, 229, 255) 0%, rgba(2, 25, 202, 0) 50% ); padding: 25px 40px; } .achivements { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .achived { margin-bottom: 23px; width: 29.5%; display: flex; justify-content: flex-start; align-items: flex-start; padding: 20px 15px; background: var(--gray); border-radius: 15px; transition: all 0.3s ease; cursor: pointer; } .achived:hover { transform: scale(1.05); box-shadow: 0px 10px 70px -30px #cecece; background: #fff; } .achived .icon { background-color: var(--primary-color); color: white; height: 30px; width: 30px; border-radius: 10px; padding: 15px; margin-right: 20px; } .achived span { display: block; width: 350px; } .achived span .name { font-size: 22px; font-weight: 600; margin: -8px 0 6px 0; } .achived .data { font-size: 15px; color: #313131; margin: 0; } .tutorname { font-size: 55px; } .tutor { text-align: right; } .tutor img { width: 400px; height: auto; } .accordion { max-width: 1050px; margin: 0 auto; } .accordion-title { font-weight: 500; font-size: 18px; border-radius: 10px; background-color: var(--gray); padding: 14px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .accordion-item { margin-top: 15px; } .accordion-item .material-symbols-rounded { font-size: 35px; } .accordion-content { background: var(--gray); display: none; padding: 14px 25px; margin-top: 10px; border-radius: 10px; } .accordion-content.active { display: block; } .accordion-title .icon { transition: transform 0.5s ease-in-out; } .accordion-title.active .icon { transform: rotate(90deg); } .tabsection { padding: 20px; border-radius: 10px; max-width: 1170px; } .tabs-buttons { border-radius: 10px 10px 0 0; } .tab-button { background: transparent; border: none; cursor: pointer; transition: all 0.3s ease; border-radius: 10px; margin-right: 10px; font-size: 17px; font-weight: 600; } .tab-button:hover { background-color: #fff; } .tab-button.active { background-color: var(--primary-color); color: #fff !important; } .tabs-content { margin-top: 15px; padding: 20px; border-radius: 10px 10px 0 0; background: #fff; border-top: none; } .tab-panel { display: none; } .tab-panel.active { display: block; } .copurse-preps { flex-wrap: wrap; } .icon.useful { border-radius: 10px; background-color: var(--primary-color); color: #fff; min-height: 24px; min-width: 24px; padding: 15px; margin-right: 20px; } .course-nmm { font-size: 20px; font-weight: 600; margin: 0; } .course-mm { margin: 5px 0 0 0; color: #313131; } .course-prep { width: 46%; margin-bottom: 35px; } .myCerts { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; flex-wrap: wrap; } .myCerts .certificates { width: 28.7%; border: 10px; background: var(--gray); padding: 20px; box-shadow: none; transition: all 0.3s ease; margin-bottom: 20px; border-radius: 10px; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; transition: all 0.3s ease; border: 1px solid #cecece; } .certificates:hover { transform: scale(1.08); cursor: pointer; } .certificates img { width: 30px !important; height: 30px !important; object-fit: contain; } .cert-img { background-color: #fff; padding: 8px; border-radius: 100px; min-height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .certificates .heading { font-size: 18px; font-weight: 600; } .certificates .des { color: gray; } .oppotunities { align-items: stretch; } .section-opp-a { background-color: var(--primary-color); padding: 25px; border-radius: 10px; margin-right: 20px; min-width: 30%; } .myheading { font-size: 25px !important; display: flex; align-items: center; color: #fff; font-family: var(--heading-font); font-weight: 600; margin: 0 !important; } .myheading .icon { height: 26px; width: 26px; } .jobs { flex-wrap: wrap; } .jobs button { margin-bottom: 10px; margin-right: 10px; } .section-opp-b { background-color: var(--gray); border-radius: 10px; border: 1px solid #cecece; padding: 20px !important; width: -webkit-fill-available; } .section-opp-b ul { margin: 0; } .section-opp-b ul li, .section-opp-b ul li p { font-size: 16px !important; margin: 7px !important; } .section-opp-b ul li { border-bottom: 1px solid #cecece; } .nextgh { color: #000 !important; } .sective-cities { flex-wrap: wrap; } .sective-cities button { margin-bottom: 15px; margin-right: 15px; } .job-oriented { height: 68px; } .mybatches { justify-content: space-between; } .batchmodes { width: 44.5%; background: linear-gradient(275deg, rgba(255,255,255,0) 0%, rgba(0,105,255,0.10760309983368344) 53%); border-radius: 15px; border: 1px solid #e7eaff; padding: 25px; box-shadow: 0px 0px 3px #cecece; } .batchmodes.b { background: linear-gradient(98deg, rgba(255,255,255,0) 0%, rgba(0,105,255,0.10760309983368344) 53%); } .ldoh { align-items: center; margin: 20px 0; } .batchmodes img { height:250px; width: -webkit-fill-available; object-fit: cover; border-radius: 15px 15px 2px 2px; margin: -25px -25px 20px; } .batchmodes h2 { font-size: 28px; margin: 0 0 10px; } .batchmodes button { margin-top: 10px; } .coursecover { background: #ecf9ff; padding: 50px 0; } .duigdhkfj { justify-content: space-between; align-items: flex-start; width: 65%; } .duigdhkfj .hdubk { width: 44.5%; background: #FFF; padding: 20px; border-radius: 10px; border: 1px solid #e7eaff; } .duigdhkfj .hading { background: var(--primary-color); padding: 13px 20px; margin: -20px 0 20px -20px; width: 50%; font-weight: 600; font-family: Outfit; color: #FFF; font-size: 22px; border-radius: 10px 0 0 0; clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%); } .text-reviews { align-items: flex-start !important; } .udgfj.rating .icon { background: green; color: #FFF; fill: #FFF; border-radius: 5px; padding: 4px; margin-right: 1px; min-height: 13px; min-width: 13px; width: 13px; height: 13px; } .text-review hr { border-color: #eee; width: 110%; margin: 5px -15px; } .text-review i { font-size: 15px !important; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 7; text-overflow: ellipsis; } @media only screen and (max-width: 768px) { body h1 { font-size: 35px !important; } body .w-90 { width: 100% !important; } body .ratings { align-items: flex-start !important; margin-top: 20px; margin-bottom: 15px; } body .ratings .flex { flex-direction: row !important; margin-bottom: -15px; } body .job-oriented { height: 50px; } body .pricing-data .price-col-a { padding: 27px 25px; } body .price-col-a .price { font-size: 18px; } body .price-col-a .meta-data { font-size: 9px; } body .price-col-b ul li { font-size: 12px; } body .price-col-b p { font-size: 12px; text-wrap: nowrap; } body .column.w-50 { width: unset !important; } body .featured-brands { flex-wrap: wrap; } body .featured-brands img { margin-bottom: 15px; width: 27%; } body .second-image { width: 320px; margin: unset !important; } body .counted-best { width: 85%; } body .marking .number { font-size: 25px; } body .marking .name { font-size: 12px; } body .tab-button { width: 100%; margin-bottom: 10px; } body .course-prep { width: 100%; } body .course-prep .icon { margin-bottom: 20px; min-height: 17px; min-width: 17px; } body .gallery-learn { width: -webkit-fill-available; height: auto; border-radius: 10px !important; } body .greview-widget { width: -webkit-fill-available; margin-bottom: 15px; flex-direction: row !important; } body .reviewer { flex-direction: row !important; } body .reviewer .ratings { flex-direction: row !important; } body .listing { margin-top: -15px !important; } body .doubts { padding: 20px !important; border-radius: 10px !important; border: 1px solid #cecece; } body .achivements { flex-direction: column; } body .achived { width: -webkit-fill-available !important; } body .magic-box { width: unset !important; } body .list-item .icon { min-height: 24px; min-width: 24px; max-width: 24px; max-height: 24px; } body .tutorname { font-size: 35px; } body .tutor img { width: 320px !important; height: auto !important; margin-right: auto; margin-left: auto; } body .myCerts .certificates { width: -webkit-fill-available !important; } body .section-opp-a { margin-right: 0px !important; width: -webkit-fill-available !important; } body .jobs button, body .sective-cities button { width: -webkit-fill-available; font-size: 14px !important; padding: 7px 15px !important; margin-right: 0px !important; } body .section-opp-b { margin-top: 20px !important; } body .myheading { font-size: 18px !important; } body .accordion-title .icon { min-height: 18px; min-width:18px; } body .batchmodes { width: -webkit-fill-available; padding: 15px; } body .batchmodes.b { margin-top: 30px; } body .batchmodes img { height: 180px; margin: -15px -15px 20px; } body .batchmodes h2 { font-size: 20px; } body .ldoh { flex-direction: row; flex-wrap: nowrap; align-items: center; } body .ldoh { font-size: 13px !important; } body .ldoh .icon { height: 14px; width: 14px; } body .batchmodes button { margin-top: 20px; } .mybatches { margin-top: -30px !important; } body .duigdhkfj .hdubk { width: 88% !important; } body .coursecovering { margin-top: 20px !important; } } /* ========================================= FINAL "COMPACT" LAYOUT (Matches Screenshots) ========================================= */ /* --- 1. DESKTOP LAYOUT (Compact & Tidy) --- */ body .tabs { display: block; width: 100% !important; max-width: 1140px; /* Removed large bottom margin to fix empty space */ margin: 30px auto 10px !important; padding: 0 15px; box-sizing: border-box; } body .tab { display: grid !important; /* Left: 280px (Narrower buttons) | Right: Content */ grid-template-columns: 280px 1fr !important; /* Compact gap */ gap: 20px !important; align-items: start; width: 100% !important; position: relative; margin-top: 10px; /* Collapses grid height to fit content exactly */ grid-auto-rows: min-content; min-height: 0; } /* Buttons */ body .tab label { grid-column: 1; width: 100% !important; display: flex; justify-content: space-between; align-items: center; /* Compact padding */ padding: 15px 20px; background: #fff; border: 1px solid #e7eaff; border-radius: 8px; margin-bottom: 8px; /* Tighter spacing */ cursor: pointer; font-weight: 600; color: #333; font-size: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s ease; } body .tab label:hover { background: #f8f9fa; transform: translateX(3px); } /* Active Button Style (Matches Image) */ body .tab input[type="radio"]:checked + label { background: #1d4ed8; /* Strong Blue */ color: #fff; border-color: #1d4ed8; box-shadow: 0 4px 10px rgba(29, 78, 216, 0.2); } /* Fix Icons */ body .tab input[type="radio"]:checked + label i, body .tab input[type="radio"]:checked + label svg { color: #fff !important; stroke: #fff !important; fill: #fff !important; } /* Blue Content Box */ body .tab .content { grid-column: 2; /* Span only as needed (approx 8 buttons worth of height) */ grid-row: 1 / span 10; background: #1d4ed8; /* Matches active button */ color: #fff; /* Compact internal padding */ padding: 30px; margin-left: 30px; border-radius: 12px; /* Auto height to fit text, preventing huge blank space */ height: auto !important; min-height: 380px; position: relative; } /* Text Styling */ body .tab .content p, body .tab .content li { color: #fff !important; font-size: 15px; line-height: 1.6; margin-bottom: 12px; } body .tab .content .icon { color: #fff !important; stroke: #fff !important; margin-right: 10px; } body .tab input[type="radio"] { display: none; } /* --- 2. MOBILE LAYOUT (Exact Match to Image) --- */ @media (max-width: 992px) { body .tabs { width: 90% !important; /* Adds side spacing so it doesn't touch screen edges */ padding: 0 15px !important; margin: 20px auto !important; box-sizing: border-box !important; } body .tab { display: flex !important; flex-direction: column !important; gap: 10px !important; /* Compact gap between buttons */ } body .tab label { width: 100% !important; margin-bottom: 0 !important; padding: 14px 18px !important; /* Slightly smaller for mobile */ } body .tab .content { /* Pushes box down slightly from last button */ margin-top: 15px !important; width: 100% !important; margin-left: 0px; /* Auto height prevents cutting text */ min-height: auto !important; height: auto !important; padding: 18px 18px !important; box-sizing: border-box !important; overflow: visible !important; } /* Disable hover effects on touch */ body .tab label:hover { transform: none; } }

/* FIX: Make <a class="primary"> behave like button.primary */
a.primary,
.button-link.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;
    margin: 10px;
    border-radius: 8px;

    background: var(--primary-color);
    color: #fff !important;

    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;

    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Hover effect */
a.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Mobile full width (matches your layout) */
@media (max-width: 768px) {
    a.primary {
        width: 100%;
        text-align: center;
    }
}