:root {
    --fs-900: 1.875rem;
    --fs-800: 2.5rem;
    --fs-700: 1.6rem;
    --fs-650: 1.38rem;
    --fs-600: 1.2rem;
    --fs-550: 1.2rem;
    --fs-500: 0.95rem;
    --fs-400: 0.875rem;
    --fs-300: 0.875rem;
}

@media(min-width: 32em) {
    :root {
        --fs-900: 2.5rem;
        --fs-800: 3rem;
        --fs-700: 2.25rem;
        --fs-600: 1.1rem;
        --fs-550: 1.875rem;
        --fs-500: 1.1rem;
        --fs-400: 1rem;
    }
}

@media(min-width: 40em) {
    :root {
        --fs-900: 4.375rem;
        --fs-800: 3.75rem;
        --fs-700: 3.75rem;
        --fs-600: 1.35rem;
        --fs-500: 1.25rem;
    }
}

.flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fs-900 {
    font-size: var(--fs-900);
}

.fs-800 {
    font-size: var(--fs-800);
}

.fs-700 {
    font-size: var(--fs-700);
}

.fs-650 {
    font-size: var(--fs-650);
}

.fs-600 {
    font-size: var(--fs-600);
}

.fs-550 {
    font-size: var(--fs-550);
}

.fs-500 {
    font-size: var(--fs-500);
}

.fs-400 {
    font-size: var(--fs-400);
}

.fs-300 {
    font-size: var(--fs-300);
}

.button {
    background-color: var(--clr-accent-700);
    border: 2px solid transparent;
    color: #fff;
    border-radius: .25rem;
    padding-block: 0.563em;
    display: inline-block;
    transition: all .25s ease;
}

.button:hover {
    background-color: #e6f8ed;
    border-color: var(--clr-accent-700);
    color: var(--clr-accent-700);
}

/* main styles */
.coding-ground-hero {
    --delay: .15s;
    background-color: var(--clr-neutral-100);
    margin-top: 2.5rem;
    margin-bottom: 2.313rem;
}

.coding-ground-hero>* {
    transition: .6s ease-in-out;
    transform: translateY(25%);
}

.coding-ground-hero>*.show {
    opacity: 1;
    transform: translateY(0);
}

.coding-ground-hero__subtitle {
    transition-delay: calc(var(--delay) * 2);
}

.coding-ground-hero__search-wrapper {
    transition-delay: calc(var(--delay) * 3);
}

.coding-ground-hero__second-title {
    transition-delay: calc(var(--delay) * 4);
}

.coding-ground-hero__description {
    transition-delay: calc(var(--delay) * 5);
}

.coding-ground-hero__button {
    align-self: center !important;
    transition: background-color .25s ease-in-out,
        color .25s ease-in-out,
        border-color .25s ease-in-out,
        opacity .5s ease-in-out calc(var(--delay) * 6),
        transform .5s ease-in-out calc(var(--delay) * 6) !important;
}

.coding-ground-hero__login-cta {
    transition-delay: calc(var(--delay) * 7);
}

.coding-ground-hero>:nth-child(2).show {
    opacity: 1;
    transform: translateY(0);
}

body {
    position: relative;
}

/*body::before {
    pointer-events: none;
    z-index: 1;
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('img/hero-bg.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 0 120px;
    max-height: 600px;
    width: 1500px;
    animation: bodybg 1.4s ease forwards;
}*/

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

    100% {
        opacity: .5;
    }
}


@media(min-width: 40em) {
    body::before {
        background-size: 100%;
        max-height: 1433px;
        width: 1462px;
        background-position: 0 0;
    }
}

@media(min-width: 1440px) {
    body::before {
        background-size: 100%;
        max-height: 1433px;
        width: 2700px;
        background-position: -400px -650px;
    }
}

.coding-ground-hero>* {
    z-index: 2;
}

.coding-ground-hero__login-cta {
    justify-content: center;
}

.coding-ground-hero__button {
    padding-inline: 2.875rem;
}

.coding-ground-hero__login-cta>a {
    gap: .25rem;
}

.coding-ground-hero__login-cta>a:hover>svg {
    transform: translateX(30%);
}

.coding-ground-hero__login-cta>a:hover>svg path {
    fill: var(--clr-accent-700);
}

.coding-ground-hero__title {
    line-height: 1.2;
}

.coding-ground-hero__search {
    --borderWidth: 1.5px;
    width: 100%;
    position: relative;
}

.coding-ground-hero__search-wrapper {
    width: 260px;
    position: relative; z-index:9;
}

@media (max-width: 67rem){
    .coding-ground-hero__search-wrapper {
        width: min(100%, 100%)!important; position:absolute; top:.6rem;
    }
}
@media(min-width: 40em) {
    .coding-ground-hero__search-wrapper {
        width: min(90%, 541px);
    }
}
.coding-ground-hero__description {
    max-width: 60ch;
    padding-inline: 1.875rem;
    margin-inline: auto;
}

.coding-ground-hero__search-wrapper::before {
    --size: 20px;
    content: '';
    position: absolute;
    right: 14px;
    transform: translateY(-50%);
    top:30%;
    width: var(--size);
    height: var(--size);
    z-index: 2;
    background-image: url('/static/images/search-accent.svg');
    background-size: var(--size);
    background-repeat: no-repeat;
}

.coding-ground-hero__search {
    border-radius: 0.4rem;
    padding: 0.313em 0.563em;
}

.coding-ground-hero__search::placeholder {
    color: var(--clr-neutral-300);
}

.coding-ground-hero__search:focus {
    outline: none;
}

.coding-ground-hero__search:focus-within {
    background-image: linear-gradient(white, white),
        linear-gradient(to bottom, #000, #000);
}

.coding-ground-hero__second-title {
    font-size: 1.2rem;
}

@media(min-width: 40em) {
    .coding-ground-hero__second-title {
        font-size: 1.875rem;
    }
	/* changed css 
    .coding-ground-hero {
        margin-block: 6.25rem;
    }*/
.coding-ground-hero {
        margin-block:0rem;
    }
    .coding-ground-hero__search {
        padding: 0.413em 0.563em;
        font-size: 1.563rem;
        border-radius: .625rem;
    }

    .coding-ground-hero__search-wrapper::before {
        --size: 30px;
    }

    .coding-ground-hero__button {
        font-size: 1.438rem;
        padding-inline: 5.625rem;
        border-radius: .625rem;
    }
}

/* technologioes section */
.technologies {
    padding-inline: min(2vw, 1rem);
    padding-top: 3.5rem;
    padding-bottom: 3.938rem;
    background-color: var(--clr-neutral-200);
}

.technologies>p {
    max-width: 900px;
    margin-top: 1rem;
    font-size: 1.1rem;
}

.technologies>* {
    z-index: 2;
}

@media(min-width: 40em) {
    .technologies {
        padding-top: 5rem;
        padding-bottom: 7.125rem;
		/* new css added */
		margin-top:3rem;
    }
}

.technologies__grid {
    max-width: 1029px;
    margin-inline: auto;
    margin-top: 2.625rem;
    display: grid;
    gap: 0.438rem;
    grid-template-areas: 'data-science languages'
        'terminals languages'
        'terminals compiler-interpreters'
        'web-dev editors'
    ;
}

.technology {
    padding: 1.188rem 0.938rem;
    background-color: #000;
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.813rem;
}

.technology__title {
    font-size: 0.726rem;
    font-weight: 500;
}

.technology>div {
    justify-content: space-between;
    align-items: flex-end;
}

.technology__link {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background-color: var(--clr-accent-400);
    border-radius: 100vmax;
    transition: .25s ease;
}

.technology__link[data-inverted=true] {
    background-color: #000;
}

.technology__link:hover {
    background-color: #e6f8ed;
}

.technology__link[data-inverted=true]:hover svg path {
    fill: #000;
}

.technology__link[data-inverted=true] svg path {
    fill: #fff;
}

.technology--data-science {
    grid-area: data-science;
}

.technology--languages {
    grid-area: languages;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    padding: 0;
    gap: 0;
}

.technology--languages>div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.technology--languages__title,
.technology--languages__link-wrapper {
    white-space: nowrap;
    padding: 1.188rem 0.938rem;
}

.technology--languages__title>span {
    display: block;
    text-align: end;
}

.technology--languages picture,
.technology--languages img {
    padding-left: 0.18rem;
}

.technology--terminals {
    background-color: var(--clr-accent-400);
    grid-area: terminals;
}

.technology--compiler-interpreters {
    grid-area: compiler-interpreters;
}

.technology--compiler-interpreters__link {
    align-self: flex-end;
}

.technology--web-dev {
    grid-area: web-dev;
    padding: 0;
}

.technology--web-dev__title,
.technology--web-dev__link-wrapper {
    padding: 1.188rem 0.938rem;
}

.technology--portrait>div {
    flex-direction: row;
    display: flex;
    height: 100%;
}

.technology--web-dev img {
    padding-bottom: 1.188rem;
}

.technology--editors {
    background-color: var(--clr-beige);
    grid-area: editors;
}

@media(max-width: 32em) {

    .technology--data-science img {
        max-width: 56px;
    }


    .technology--languages picture,
    .technology--languages img {
        height: 100%;
        max-width: 40px;
    }

    .technology--web-dev img {
        max-width: 100px;
    }
}

@media(min-width: 32em) {

    .technology__title {
        font-size: 1.3rem;
    }

    .technologies__grid {
        gap: min(3vw, 1.375rem);
    }

    .technology--languages {
        min-width: 275px;
    }

    .technology--languages picture,
    .technology--languages img {
        height: 100%;
        flex: 1;
        max-width: 100%;
    }
}

@media(min-width: 58em) {

    .technology {
        padding: 2.25rem 1.563rem;
        border-radius: 0.625rem;
    }

    .technology__link {
        width: 30px;
        height: 30px;
    }

    .technology__title {
        font-size: 2.188rem;
        line-height: 1em;
    }

    .technologies__grid {
        grid-template-areas: 'data-science languages languages'
            'data-science terminals editors'
            'web-dev terminals editors'
            'web-dev compiler-interpreters editors';

        grid-template-columns: 285px 1fr 1fr;
        grid-template-rows: auto 30px auto;
    }

    .technology--web-dev {
        min-height: 400px;
    }

    .technology--web-dev,
    .technology--languages {
        padding: 0;
    }

    .technology--languages>div {
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    .technology--languages .technology__title {
        font-size: 2.813rem;
        margin-top: 2rem;
    }

    .technology--languages__link-wrapper {
        padding-inline: 1.563rem;
        padding-bottom: 1rem;
        align-self: flex-end;
    }

    .technology--web-dev__title,
    .technology--web-dev__link-wrapper {
        padding: 2.25rem 1.563rem;
    }

    .technology--languages picture {
        padding-left: .5rem;
    }

    .technology--languages {
        min-height: auto;
    }
}

/* start learning section */
.start-learning {
    background-image: url('img/start-learning-bg.svg');
    background-position: center 200px;
    background-size: 1000px;
    background-repeat: no-repeat;
    color: #fff;
    background-color: #000;
    padding-top: 4.5rem;
    padding-bottom: 5.938rem;
}

@media(min-width: 50em) {
    .start-learning {
        background-position: center -300px;
        background-size: 1650px;
    }
}

.tablist-swiper {
    padding-inline: 1.75rem !important;
}

.tablist {
    margin-top: 1.75rem !important;
    display: flex;
}

.coding-ground-tablist__tab {
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    padding: .8rem 1.4rem;
    background-color: var(--clr-neutral-400);
    color: #fff;
    border-radius: 0.356rem;
    font-size: 1rem;
    transition: all .25s ease !important;
}

.coding-ground-tablist__tab:hover {
    background-color: var(--clr-accent-700);
}

.coding-ground-tablist__tab[aria-selected=true] {
    background-color: var(--clr-accent-700);
}

.coding-ground-tablist__tab[aria-selected=true]:hover {
    background-color: var(--clr-accent-500);
}

.coding-ground-tablist__tab--see-all {
    grid-column: 2;
    width: var(--item-width);
    padding: 0.25rem 1.813rem;
    align-self: flex-end;
    font-weight: 500;
    font-size: 1.1rem;
    background-color: var(--clr-accent-700);
}

.coding-ground-tablist__tab--see-all:hover {
    background-color: var(--clr-accent-500);
}

.coding-ground-tabpanel__grid {
    max-width: 75.25rem;
    margin-inline: auto;
    --item-width: 120px;
    margin-top:3rem;
}

.start-learning__see-all-wrapper {
    margin-top: 2rem;
    --item-width: 120px;
}

@media(min-width: 1205px) {
    .start-learning .tablist-swiper {
        padding-inline: 0 !important;
    }
}

.start-learning .tablist-swiper {
    max-width: 1204px;
    margin-inline: auto;
}
.start-learning .coding-ground-tablist__tab--see-all {
    font-size: 1.25rem;
}

.start-learning .swiper-slide:last-child {
    margin-right: 0 !important;
}

.coding-ground-tabpanel {}

.coding-ground-tabpanel__grid,
.start-learning__see-all-wrapper {
    place-content: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(2, var(--item-width));
}

@media(min-width: 40em) {
    .coding-ground-tablist__tab--see-all {
        padding: 0.375rem 2.688rem;
        font-size: 1.25rem;
    }

    .coding-ground-tabpanel__grid,
    .start-learning__see-all-wrapper {
        grid-template-columns: repeat(3, var(--item-width));
        --item-width: 150px;
        gap: 3.75rem;
    }

    .coding-ground-tablist__tab--see-all {
        grid-column: 3;
    }
}

@media(min-width: 74em) {

    .coding-ground-tabpanel__grid,
    .start-learning__see-all-wrapper {
        grid-template-columns: repeat(6, var(--item-width));
    }

    .start-learning__see-all-wrapper {
        margin-top: 3rem;
    }

    .coding-ground-tablist__tab--see-all {
        grid-column: 6;
    }
}

.swiper-slide {
    width: auto !important;
}

.coding-ground-tabpanel__item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1.6rem;
    font-size:1rem;
    z-index: 2;
}
.coding-ground-tabpanel__item:hover .coding-ground-tabpanel__item-img-container {
    background: var(--clr-neutral-900);
}
.coding-ground-tabpanel__item:hover .coding-ground-tabpanel__item-img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(to bottom, #FFF37C, var(--clr-accent-400));
}

.features {
    padding-top: 1.875rem;
    padding-inline: .575rem;
    padding-bottom: 3.438rem;
}

.features__cards {
    margin-top: 1.438rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}

.feature {
    cursor: pointer;
    display: grid;
    gap: .5rem;
    align-items: flex-start;
    background-color: var(--clr-neutral-700);
    color: #fff;
    max-width: 160px; min-height:335px;
    padding: 1.875rem 0.688rem 1.875rem 1.25rem;
    border-radius: 0.375rem;
    background-clip: padding-box;
    position: relative;
}

.feature__title {
    font-size: .875rem;
}

.feature__description {
    font-size: 0.7rem;
}

@media(min-width: 32em) {
    .features__cards {
        gap: 1rem;
    }

    .feature {
        max-width: 218px;
    }

    .feature__title {
        font-size: 1.25rem;
    }

    .feature__description {
        font-size: 1rem;
    }

}

.feature:hover {
    background: var(--clr-neutral-900);
}

.feature:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: -3px;
    border-radius: inherit;
    background: linear-gradient(to bottom, #FFF37C, var(--clr-accent-400));
}

.feature__icon {
    height: 18px;
    width: 18px;
}

@media(min-width: 32em) {
    .features {
        padding-top: 5rem;
        padding-bottom: 6.25rem;
    }

    .features__cards {
        margin-top: 3.75rem;
    }

    .feature__icon {
        height: 27px;
        width: 27px;
    }
}

@media(min-width: 40em) {
    .feature__description {
        font-size: 1.05rem;
    }

    .feature {
        padding: 3.125rem 2.688rem 2.563rem 2.563rem;
        max-width: 290px;
        height: 355px;
    }
}

.trending-courses {
    padding-left: 1rem;
    padding-top: 2.125rem;
    padding-bottom: 3.75rem;
    background-color: var(--clr-neutral-200);
}

@media(min-width: 40em) {
    .trending-courses {
        padding-top: 5rem;
        padding-bottom: 10.063rem;
    }
}

.trending-courses__cards {
    margin-top: 2.313rem !important;
    display: flex;
    align-items: center;
}

.course {
    background-color: var(--clr-neutral-900);
    color: #fff;
    min-width: 300px;
    max-width: 300px;
    min-height: 251px;
}

.course__title {
    font-size: .95rem;
}

.course--html-css__img-container {
    background-color: var(--clr-orange-300);
}

.course--tableau__img-container {
    background-color: var(--clr-blue-300);
}

.course {
    border-radius: 0.438rem;
    display: grid !important;
    grid-template-rows: 145px auto;
}

.course__flex-group {
    align-items: flex-end;
    margin-top: .5rem;
}

.course__content {
    align-items: flex-start;
    padding: 0.938rem;
}

@media(min-width: 32em) {

    .course__title {
        font-size: 1.2rem;
    }

    .course {
        min-width: 300px;
    }

    .course__flex-group {
        margin-top: 1rem;
    }
}

.course__button {
    padding: 0.125rem 0.5rem;
    border: 1px solid transparent;
}


@media(min-width: 32em) {
    .course {
        grid-template-rows: 212px auto;
        min-width: 365px;
        min-height: 345px;
    }

    .course__content {
        padding: 1.375rem;
    }

    .course__button {
        padding: .3rem .875rem;
    }
}

@media(min-width: 75em) {
    .trending-courses__cards {
        justify-content: center;
    }
}

.course__img-container {
    display: grid;
    place-items: center;
    border-radius: 0.438rem 0.438rem 0 0;
}

.course--cyber-security__img-container img {
    height: 100%;
    width: 100%;
    border-radius: 0.438rem 0.438rem 0 0;
}

.course__img-container:not(.course--cyber-security__img-container) {
    padding-top: .7rem;
}

.course__flex-group {
    width: 100%;
    justify-content: space-between;
}

/* top-technologies-slider css */
.top-compilers-editor {
		position: relative;
		overflow: hidden;		
	}
.top-compilers-editor a:hover{
	background: var(--clr-neutral-900);
}
.top-compilers-boxes{
	max-width: 100%;
	width: 136px;
	height: 128px;
	color: #fff;
	display: grid;
	margin: 3px;
	place-items: center;
	border-radius: 0.538rem;
	background: linear-gradient(to bottom left, #3a3c3b 0%, rgba(0, 0, 0, 1) 100%);		
}
.swiper-slide:hover .top-compilers-boxes::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(to bottom, #FFF37C, var(--clr-accent-400));
}

@media(max-width: 768px) {
    .top-compilers-boxes {
        width: 110px;
		height: 100px;
    }
}

/* custom modified css */
@media (min-width: 67rem){ .coding-ground-hero__search-wrapper::before{display:block;} }
@media (max-width: 67rem){
.coding-ground-hero__search-wrapper::before{display:none;} 
.header__buttons{flex-direction:row-reverse;} }
@media (max-width: 840px){
.coding-ground-hero__search-wrapper::before{background-image: url('/static/images/search-accent.svg');} }
#google-bottom-ads, .data-sticky{display:none;}
#google-right-ads, .bottom-library-ads{display:none!important;} 
.dropdown__list{margin-left:0rem;}
.dropdown__item a{background:none;}
.start-learning .coding-ground-tablist__tab{font-size:12px; margin-right:25px;}
.coding-ground-tabpanel__item-img-container img{max-width:100%; height:85px;}
.coding-ground-tabpanel__item-img-container{position:relative; display:grid; place-items:center; width:var(--item-width); aspect-ratio:1; border-radius:0.538rem; background-clip:padding-box; background:linear-gradient(to bottom left, #3a3c3b 0%, rgba(0, 0, 0, 1) 100%);}
.search-overlay::marker{color:#fff;}
.technologyBlock{cursor:pointer;}
.arrow-set{position:relative; top:10px; right:-9px;}
.arrow-set-a{position:relative; top:0px; right:-9px;}
.arrow-set-b{position:relative; top:10px; right:5px;}
.search-box ul::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); border-radius:10px; background-color:#f5f5f5;}
.search-box ul::-webkit-scrollbar{width:4px; background-color:#F5F5F5;}
.search-box ul::-webkit-scrollbar-thumb{border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:#04af2f;}
@media(min-width: 22em){ .library-header .nav-toggle{display:block;} }
@media (min-width: 67rem){ .library-header .nav-toggle{display:none;} }
#search-results{margin-top:-20px!important;}
.accent-header{z-index:99}

/*new css for dropdown */
.dropdown__item{border-radius:.75rem;}
.compiler-dropdown .dropdown__list--multi-column{grid-template-columns: 1fr 1fr 1fr 1fr!important;}
.compiler-icon{width:22px;}
#category .dropdown__item a:first-child{gap:.3rem!important;}
ul.dropdown__list li.partition-wrap{border-right:1px dashed #ccc; margin-right:10px;}
ul.dropdown__list li ul{max-width:295px; margin:0px 10px 0px 0px;}
ul.dropdown__list li ul h2{background:#f4f4f4; font-size:16px; padding:7px 0px 7px 10px; margin:8px 0px 10px 0px;white-space:nowrap; border-radius:5px; -webkit-border-radius:5px;}
.last-interpreter{margin-top:-45px!important;}
@media(max-width:864px){ .dropdown__list-wrapper{width:100%;} ul.dropdown__list{display:flex; width:initial; overflow:scroll;} .last-interpreter{margin-top:0px!important;} ul.dropdown__list li ul h2{white-space:nowrap;} }

/* dark mode */
.dark .nav__search, .dark .search-input{color:#fafafa;}
.dark .search-box ul{background:#040402;}
.dark .search-box ul li{border-bottom:1px solid #333;}
.dark .search-box ul a, .dark .search-box ul li{color:#fafafa;}
.dark .search-box ul li:hover{background:#403e3e;}
.dark .search-overlay::marker{color:#000;}
.dark ul.dropdown__list li ul h2{background:#000;}
.dark .dropdown__list{background-color:#031926;}