:root {
    --text-color: #272D37;
    --text-color-light: #5F6D7E;
    --breadcrumbs-color: #818181;
    --breadcrumbs-active-color: #222;
    --breadcrumbs-color-hover: #222;
    --link-color: hsl(154, 100%, 27%);
    --control-color: #008c4b;
    --control-alt-color:#00644230;

}


* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

a, a:hover {text-decoration:none;}

button {-webkit-appearance: none;
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

ol, ul {
    list-style: none;
}


html {
    font-size: 16px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
}



.lnd-header {
    background-color: #000000;
    height: 60px;
    width: 100%;
    top: 0;
    position: fixed;
}



.lnd-wrap {
    margin-top:60px;
    max-width: 1900px;
    margin: 0 auto;
    padding-bottom: 6rem;
}

.section {
    padding: 5rem 0;
}


.section-header {
    margin: 0 auto;
    
}

.section-footer {
    margin: 0 auto;
    
}


.section-header__heading {
    font-family: 'Poppins','Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #272D37;
    text-align: center;
    margin-bottom: 1rem;
}

.section-header__subheading {
    margin-top: 0.75rem;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.44;
    letter-spacing: -0.03em;
    color: #5F6D7E;
    margin: 0 auto;
}
.section-header__subheading > a {
    color:var(--link-color);
}

.section-header__conclusion {
    margin-top: 2rem;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.44;
    letter-spacing: -0.03em;
    color: #5F6D7E;
    text-align: center;
    /* max-width: 40rem; */
}




.container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1.5rem;
    /* overflow: hidden; */
}


a.actions__btn {
    background-color: var(--control-color);
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    display: block;
    color:#fff;
    font-weight: 600;
    font-size: 0.9rem;
}

a.actions__btn--alt {
    background-color: var(--control-alt-color);
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    display: block;
    color:var(--link-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.page-header__btns > a {
    min-width: 100px;
    width: 130px;
    box-sizing: border-box;
    text-align: center;
}

/* Actions footer */
.actions-footer {
    background-color: #F8FBFF;
    margin-top: 3rem;
}

.actions-footer__btns {
    display: flex;
    gap: 1.5rem;
    letter-spacing: -0.02em;
    justify-content: center;
    margin-top: 2.5rem;
}

/* Support and learning */
.go-to-resources {
}

.go-to-resources__box {
    margin-top: 5rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.go-to-resources__list {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    background: #FFFFFF;
    box-shadow: 0 1.63rem 2.19rem rgba(0, 0, 0, 0.33);
    border-radius: 0.5rem;
    min-width: 20rem;
}

.go-to-resources__white {
    border-top: 0.1588rem solid var(--link-color);
}

.go-to-resources__list h3 {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-align: left;
    color: #191A15;
    margin-bottom: 2rem;
    margin-top: 3rem;
    padding-left: 1.3rem;
}

.go-to-resources__list h3:first-child {
    margin-top: 0;
}


.go-to-resources__list li {
    font-size: 0.875rem;
    line-height: 1;
    color: #272D38;
    margin-bottom: 1rem;
    padding-left: 1.3rem;
    position: relative;
}

.go-to-resources__list a {
    color: #272D38;
}
.go-to-resources__list strong {
    font-weight: 600;
}

.go-to-resources__list li::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  
    background-size: 1.5rem;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 1px;
}

.go-to-resources__yellow li::before {
    background-image: url(../images/airspace/icons.svg#yellow_checked);
}

.go-to-resources__blue li::before {
    background-image: url(../images/airspace/icons.svg#blue_checked);
}

.go-to-resources__red li::before {
    background-image: url(../images/airspace/icons.svg#red_checked);
}

.go-to-resources__green li::before {
    background-image: url(../images/airspace/icons.svg#green_checked);
}



/* Bread crumbs */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    color: var(--text-color);
    font-size: .875rem;
    margin-bottom: 5rem;
    font-weight: 400
}

.breadcrumbs>li {
    margin-bottom: 1rem
}

.breadcrumbs a {
    color: var(--breadcrumbs-color)
}

.breadcrumbs a:hover {
    color: var(--breadcrumbs-color-hover)
}

.breadcrumbs>li>span {
    color: var(--breadcrumbs-active-color)
}

.breadcrumbs>li::after {
    content: "/";
    padding: 0 .7rem;
    opacity: .4
}

.breadcrumbs>li:last-child::after {
    content: "";
    padding: 0
}




/* Page header */
.page-header {
    padding-top: 3rem;
    background-image: url(../images/airspace/header-bg-4.svg);
    background-repeat:  no-repeat;
    background-position: right center;
}

.page-header__columns {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.page-header__line {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.page-header__logo {
    width: 10rem;
    height: 2rem;
}

.page-header__select {
    font-size: 0.875rem;
    color: var(--link-color);
    padding-right: 1.5rem;
    font-weight:  600;
    background-image: url(../images/airspace/icons.svg#arrow_down);
    background-size: 1rem;
    background-position: right center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;
    position: relative;
    cursor: pointer;
}

 .page-header__select-list {
    border-radius: 0.5rem;
    background-color: #fff;
		box-shadow: 0 12px 27px rgba(0, 0, 0, 0.8);
    padding: 0.9rem;
    position: absolute;
    z-index: 99;
    white-space: nowrap;
    top: 2rem;
    min-width: 6rem;
    left: -1rem;
    display: none;
  
}

.page-header__select-list a {
    font-size: 0.875rem;
    color: var(--link-color);
    font-weight:  600;
}

.page-header__select-list div:not(:first-child) {
	padding-top: 0.7em;
}

.page-header__select--opened .page-header__select-list {
    display: block;
}


.page-header__title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #272D37;
    margin-bottom: 1.5rem;
   
}

.page-header__subtitle
{
    color: var(--text-color-light);
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-weight: 400;
    margin-bottom: 3rem;
    letter-spacing: -0.03em;
}

.page-header__btns {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    letter-spacing: -0.02em;
}


.page-header__release {
    display: flex;
    justify-content: center;
    gap:1.5rem;
    font-weight: 400;
    color: var(--text-color);
    font-size: 0.9rem;
    letter-spacing: -0.02em;
    flex-wrap: wrap;

}

.page-header__release-box {
    display: flex;
}
.page-header__release-shield {
		height: 20px;
		width: 106px;
		margin-right: 2.2em;
}


.page-header__release-version {
		color: var(--text-color);
		margin-right: 1.4rem;
		border-right: 2px solid #E2E5E8;
}

.page-header__release-link {
    color:var(--link-color);
    padding-right: 2rem;
    background-image: url(../images/airspace/icons.svg#arrow_right);
    background-size: 1rem;
    background-position: right center;
    background-repeat: no-repeat;
}

.browser {
    /* min-width: 380px; */
    max-width: 55rem;
    min-height: 100px;/*20rem;*/
	box-shadow: 0rem 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 0.625rem;
}


.browser__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    /* padding-top: 3rem; */
}

.browser__header-title {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Poppins', 'Inter', sans-serif;
    color: var(--text-color);
}

.browser__header-link {
    color: #006442;
    font-size: 0.75rem;
    white-space: nowrap;
} 

.code-tabs {
    margin: 0px 0px 30px 24px;
}

.code-tab-btn {
    color: var(--link-color);
    background-color: var(--control-alt-color);
    font-size: 0.9rem;
    border: 1px solid var(--control-color);
    border-radius: 7px;
    padding: 4px 24px;
    cursor: pointer
}
.code-tab-btn:hover {
    color: #000000;
    background-color: #ffffff;
}

.code-tab-btn.code-tab-btn-active {
    color: #ffffff;
    background-color: var(--control-color);
}

.code-tab-content {
    height: 220px;
}

pre code.hljs {
    max-height: 220px;
    overflow-y: auto;
}

.browser__code {
    font-family: monospace;
    font-size: 0.875rem;
    color:#666666;
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
    min-height: 9.5rem;
}


.browser__code code > span {
    counter-increment: line;
}
.browser__code code > span:before{
    content: counter(line);
    display: inline-block;
    width: 2rem;
    color: #bfbfbf;
    -webkit-user-select: none;
}

.browser__package-box {
    padding: 1rem;
}

.browser__package {

    background-color: #F6F6F7;
    border-radius: 0.625rem;
    height: 3.3rem;
    display: flex;
    align-items: center;
}

.browser__package > i {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
   
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0 1.5rem;
    margin-bottom: 0.2rem;
}

.browser__package--net > i {
    background-image: url(../images/airspace/icons.svg#package_net);
}

.browser__package--java > i {
    background-image: url(../images/airspace/icons.svg#package_java);
}

.browser__package > code {
    font-family: monospace;
    font-size: 0.875rem;
    color:#272d37;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80%;
}

.browser__package > button {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../images/airspace/icons.svg#copy);
    background-size: 1.5rem;
    background-repeat: no-repeat;
    margin-left: auto;
    padding: 0 1.1rem;
   

}

.browser__package > button.browser__done {
    background-image: url(../images/airspace/icons.svg#done);

}


/* ================  Main features  =================== */

.main-features {
    border-top: 1px solid #e5ecfb;
    margin-top: 6rem;
    padding-top: 6rem;
}


.main-features__block {
    padding-top: 5.375rem;
    display: grid;
    grid-template-columns: min-content 34.5625rem;
    justify-content: center;
    column-gap: 8rem;
}

.main-features__visual {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 636px;
    padding: 2rem;
    border-radius: 0.625rem;
    box-shadow: -9px -11px 40px #6461611c;
}

.main-features__visual-top-row {
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-features__visual-bottom-row {
    position: relative; 
    flex: 1; 
    background-color: #eee;
}

.main-features__visual-bottom-row img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.main-features__visual-text {
    font-family: Consolas, monospace;
}

.main-features__column {
    display: grid;
    row-gap: 2.5rem;
}

.main-features__column-item {
    padding-top: 0.625rem;
    padding-left: 2rem;
    padding-bottom: 0.625rem;
    display: grid;
    border-left: 4px solid #EAEAEA;
    cursor: pointer;
}

.main-features__column-item.active {
    border-color: var(--control-color);
}

.main-features__column-content {
    max-height: 0;
    overflow: hidden;
}

.main-features__column h4 {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #272D37;
    align-self: center;
}

.main-features__column p {
    margin-top: 1rem;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: #5F6D7E;
    align-self: center;
}



.platforms__logos {
    max-width: 800px;
    margin: 5rem auto 0 auto;
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.platforms__logos img {
   width: 5.5rem;
   height: 5.5rem;
}

.file-types {
    background-color: #F8FBFF;
}

.file-types__box {
    margin-top: 5rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.file-types__list {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    background: #FFFFFF;
    box-shadow: 0 0.625rem 2.1875rem rgba(0, 0, 0, 0.03);
    border-radius: 0.5rem;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 34rem;
    min-width: 18rem;
}

.file-types__yellow {
    border-top: 0.1588rem solid #F4BD50;
}

.file-types__blue {
    border-top: 0.1588rem solid #2A6AE2;
}

.file-types__red {
    border-top: 0.1588rem solid #FE5F55;
}

.file-types__green {
    border-top: 0.1588rem solid #6DD130;
}


.file-types__list h3 {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    color: #191A15;
    margin-bottom: 2rem;
    margin-top: 3rem;
}

.file-types__list h3:first-child {
    margin-top: 0;
}


.file-types__list li {
    font-size: 0.875rem;
    line-height: 1.86;
    letter-spacing: -0.03em;
    color: #272D38;
    margin-bottom: 1rem;
    padding-left: 2.3rem;
    position: relative;
}

.file-types__list a {
    color: #272D38;
}
.file-types__list strong {
    font-weight: 600;
}

.file-types__list li::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  
    background-size: 1.5rem;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 1px;
}

.file-types__yellow li::before {
    background-image: url(../images/airspace/icons.svg#yellow_checked);
}

.file-types__blue li::before {
    background-image: url(../images/airspace/icons.svg#blue_checked);
}

.file-types__red li::before {
    background-image: url(../images/airspace/icons.svg#red_checked);
}

.file-types__green li::before {
    background-image: url(../images/airspace/icons.svg#green_checked);
}

.features__grid {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 3rem 3rem;
    justify-content: center;
}

.features__grid-list {
    max-width: 19rem;
    display: flex;
}

.features__icon {
    height: 1.6rem;
    width: 1.6rem;
    margin-right: 1.5rem;
}

.features__grid-list_subtitle {
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #14171D;
}

.features__grid-list_desc {
    margin-top: 0.75rem;
   
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #606267;
}


.code-samples {
    background-color: #F8FBFF;
}

.text-section {
    background-color: #F8FBFF;
}

.text-section-images {
    text-align: center;
}

.text-section ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0.75em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}

.text-section ul li {
    display: list-item;
    box-sizing: border-box;
    text-align: match-parent;
    font-size: 1.1rem;
    color: var(--text-color-light);
    font-weight: 400;
    line-height: 1.5;
    }

.code-samples__subtitle {
    margin-top: 3.625rem;
   
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: #272D37;
}

.code-samples__wrap {
    padding-top: 2rem;
    max-width: 65rem;
    margin: 0 auto;
}

.code-samples__text {
    margin-top: 1rem;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: #5F6D7E;
}

.code-samples__text a {
    color:var(--link-color);
}

.code-samples__text-link {
    text-decoration: underline;
}

.code-samples__desc {
    margin-top: 2.5rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
  
}
.code-samples__note {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: #464f5a;
    padding: 0.875rem 1.5rem;
 
    border-bottom: 1px solid #edf1f7;
}

.code-samples__desc-list {
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
    font-family:  monospace;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.31;
    color: rgba(152, 162, 178, 0.4);
}

.code-samples__desc-item {
    list-style-position: inside;
}

.code-samples__code {
    
    padding: 2rem 1.5rem;
    overflow-x: hidden;
    font-size: 0.875rem;
}

.code-samples__code code > span {
    counter-increment: line;
}
.code-samples__code code > span:before{
    content: counter(line);
    display: inline-block;
    width: 2rem;
    min-width: 2rem;
    color: #bfbfbf;
    -webkit-user-select: none;
} 





.reviews {
  /* display: grid;
    justify-content: center;*/
}

.reviews__text {
    max-width: 38.1875rem;
    margin: 0 auto;
}

.reviews__subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.42;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 1.4375rem;
}

.reviews__text-box {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.62;
    color: #FFFFFF;
    text-align: center;
    padding-bottom: 0.8125rem;
}

.reviews__desc {
    background: url('/images/airspace/ellipse.svg') 50% 100%/100% no-repeat #2A6AE2;
    border-radius: 1.25rem;
    padding: 3.375rem 5.5rem 1.875rem;
    max-width: 46.875rem;
    display: inline-block;
}



.reviews__line {
    width: 70%;
    border-bottom: 0.0625rem solid #FFFFFF;
    mix-blend-mode: normal;
    opacity: 0.2;
    margin: 0 auto;
}

.reviews__nextsubtitle {
    margin-top: 2.5rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.62;
    color: #FFFFFF;
    text-align: center;
}

.reviews__nexttext-box {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.71;
    color: #FFFFFF;
    text-align: center;
}

.footer {
    margin-top:7rem;
    height: 14rem;
    background: #000000;
}

.swiper {
    max-width: 900px;
    width: 100%;
    height: 100%;
    margin-top: 4rem;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-prev,
.swiper-button-next {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(42, 106, 226, 0.31);
    border-radius: 50%;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 15px;
}

.swiper-button-prev:after {
    background-image: url('/images/airspace/icons.svg#arrow_swipe_left');
}

.swiper-button-next:after {
    background-image: url('/images/airspace/icons.svg#arrow_swipe_right');
}




.gotop {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    background-color: var(--control-color);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition-property: opacity, visibility;
    transition-duration: .3s, 0s;
    transition-delay: 0s, .3s;
    z-index: 99;
}

.gotop--visible {
    visibility: visible;
    opacity: 1; 
    transition-delay: 0s, 0s;
}


.gotop__icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: white;
}



@media (min-width: 1921px) {
.lnd-wrap {max-width: 1640px;}
}


@media (max-width: 1200px) {
   
    html {font-size: 14px;}


    .main-features__block {
        display: flex;
        gap: 2rem;
    }

    .file-types__box {
      
        flex-wrap: wrap;
        gap: 2rem;
    }

    .section-bg {
        background: none;
    }
}

@media (max-width: 1020px) {

    .container {
        padding: 0 1rem;

    }

    .page-header__title {
        font-size: 2.85rem;
    }

    .section {
        padding: 3rem 0;
    }

    .section-header__heading {
        font-size: 2rem;
    }

    .section-header__subheading {
        padding: 0 2rem;
    }

    .section-header__conclusion {
        padding: 0 2rem;
    }

    .main-features {
        border-top: 1px solid #e5ecfb;
    }

    .main-features__block {
        display: none;
    }
   
    .code-samples__code {
        overflow-x:scroll;
        -webkit-text-size-adjust: none;

    }

    .code-samples__wrap {
        padding-top: 0;
        padding: 0 0.5rem;
    }
  
    .features__grid {
      
        grid-template-columns: repeat(2, max-content);
    
    }

    .item__text {
        font-size: 0.72rem;
    }

    .code-samples__text {
        font-size: 0.9rem;
    }

    .reviews__desc {
        max-width: 37rem;
    }

    .swiper {
        margin-top: 3.825rem;
        max-width: 45rem;
    }

    .swiper-button-prev {
        left: 0;
    }

    .swiper-button-next {
        right: 0;
    }
}

@media (max-width: 767px) {
    .main-features__block {
        padding: 2rem 0 0;
    }
   
    .features__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: flex-start;
    }

    .features__grid-list {
        max-width: 100%;
        margin-left: 1rem;
    }

    .section {
        padding: 2rem 0;
    }
    

    .swiper {
        max-width: 33rem;
    }

    .reviews__desc {
        background-image: none;
        padding: 2rem;
        max-width: 25rem;
    }
}

@media (max-width: 575px) {

    .main-features__block {
        padding-top: 1.5rem;
    }

    .block-column__item {
        padding: 0.5rem 0 0.5rem 1rem;
    }

    .main-features__column h4 {
        font-size: 1.1rem;
    }

    .main-features__column p {
        font-size: 0.9rem;
    }

    .four__grid-list {
        max-width: 100%;
    }    

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

}

@media (max-width: 1200px) {
    .page-header {
        background-image: none;
    }
    .page-header__columns {
        flex-direction: column;
    }
}

@media (max-width: 860px){
    .go-to-resources__box {
        flex-direction: column;
        align-items: center;
    }
    .go-to-resources__list {
        width: 50%;
    }
}




/*  ======= Floating Menu (Right) ======== */

.sidebar {
    position: fixed;
    top: 200px; /* Adjust as needed */
    right: 5px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
  }
  
  .sidebar_btn {
    display: flex;
    align-items: center;
    width: 40px; /* Initial width */
    height: 40px; /* Initial height */
    background-color: hsla(0, 0%, 96%, 0.7); /* Beige color with 30% opacity */
    color: var(--control-color);/* #4F5D93; */ /* Text color */
    border-radius: 12px; /* Curved corners */
    box-shadow: 0rem 0.5rem 0.5rem rgba(0, 0, 0, 0.14);
    margin-bottom: 10px;
    cursor: pointer;
    transition: width 0.3s, background-color 0.3s;
    overflow: hidden; /* Hide text overflow */
  }
  
  .sidebar_btn:hover {
    width: 160px; /* Expanded width */
    background-color: hsl(0, 0%, 100%);; /* Fully opaque beige color */
    box-shadow: 0rem 0.7rem 1.5rem rgba(0, 0, 0, 0.5);
    transform: scale(1.2); /* 50% zoom on hover */
  }
  
  .sidebar_btn img {
    width: 24px; /* Adjust as needed */
    height: 24px; /* Adjust as needed */
    margin-left: 8px; /* Adjust as needed */
    margin-right: 5px; /* Adjust as needed */
    transition: transform 0.3s;
    filter: invert(38%) sepia(98%) saturate(1161%) hue-rotate(125deg) brightness(90%) contrast(97%); 
  }
  
  .sidebar_btn:hover img {
    margin-left: 15px;
    transform: scale(1.1); /* 50% zoom on hover */
  }
  
  .btn-text {
    opacity: 0; /* Initially hide text */
    margin-left: 8px;
    font-weight: 600; /* Adjust font weight to make it slightly bolder */
    transition: opacity 0.3s, transform 0.3s;
    transform: translateX(100%); /* Initial position outside the button */
  }
  
  .sidebar_btn:hover .btn-text {
    opacity: 1; /* Show text on hover */
    transform: translateX(0); /* Slide text in from right */
  }
  
  @media (max-width: 640px) {
    .sidebar {
        display: none;
    }
  }
/*  ======= ============================================================================ ======== */