/* =========================================
   Home
========================================= */
section{
    position: relative;
    max-width: 1150px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
}

.home{
    /* flex-direction: column; */
}

.home .main-container{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* =========================================
   Converter body
========================================= */
.first-column{
    position: relative;
    width: 755px;
}

.converter-container{
    width: 100%;
    height: fit-content;
    /* margin-top: 50px; */
    /* margin-right: 85px; */
}

.converter-with-table{
    position: relative;
    background: var(--card-bg);
    overflow: hidden;
    box-shadow: var(--box-shadow-hard);
    border-radius: var(--card-border-radius);
    border: var(--card-border);
}

.converter-body{
    position: relative;
    margin: 25px 25px 30px 25px;
}

.conveter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    /* width: 335px; */
    /* overflow: hidden; */
}

.from, .to{
    margin-bottom: 10px;
    font-size: .85em;
    font-weight: 550;
    color: var(--text-color-03);
}

.unit-info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* width: 100%; */
}

.unit-info input{
    outline: none;
    border: var(--box-border);
    color: var(--text-color-01);
    font-size: 1.75em;
    width: 310px;
    background: var(--input-bg-color);
    margin-bottom: 15px;
    padding: 0px 15px;
    border-radius: 10px;
    height: 50px;
}

.unit-01 .unit-info input{
    font-weight: 550;
    background: var(--input-bg-color);
}

.unit-01 .unit-info input:focus-visible{
    outline: var(--input-focus-outline);
}

.unit-02 .unit-info input{
    font-weight: 550;
    background: var(--input-bg-lighter-color);
}

/* .ri-arrow-left-right-line{
    font-size: 1.25em;
    color: var(--text-color-02);
    transition: var(--element-transition);
} */

.swapBtn{
    margin-top: 30px;
    padding: 6px 11px;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s ease;
}

.swapBtn svg{
    width: 22px;
    height: 22px;
    color: var(--text-color-02);
    margin-top: 5px;
    transition: .3s ease;
}

.swapBtn:hover{
    background: var(--primary-color);
    /* color: var(--primary-color); */
}

.swapBtn:hover svg{
    color: #fff;
    transform: rotate(-180deg);
}

.display-result-copy{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.converter-result-display{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.converter-result-display span{
    width: fit-content;
}

.converter-result-display .input-display-number{
    color: var(--text-color-01);
    font-size: 1.05em;
    font-weight: 550;
}

.converter-result-display .result-display-number{
    color: var(--text-color-01);
    font-size: 1.05em;
    font-weight: 550;
}

.converter-result-display .input-display-unit{
    color: var(--text-color-02);
    font-size: .975em;
    font-weight: 450;
}

.converter-result-display .result-display-unit{
    color: var(--text-color-02);
    font-size: .975em;
    font-weight: 450;
}

.converter-result-display .equal-sign{
    color: var(--text-color-01);
    font-size: 1.2em;
}

.convertion-copy-btn .copy-btn{
    /* position: absolute; */
    /* bottom: -58px; */
    /* right: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 5px; */
    /* background: var(--input-bg-color); */
    background: none;
    border: none;
    outline: none;
    /* padding: 8px 12px; */
    width: fit-content;
    color: var(--text-color-02);
    font-size: .875em;
    /* transform: translate(600px, -15px); */
    /* border: var(--box-border); */
    border-radius: 5px;
    cursor: pointer;
    opacity: .5;
    transition: .3s ease;
}

.convertion-copy-btn .copy-btn:hover{
    color: var(--primary-color);
    opacity: 1;
    /* background: var(--primary-color); */
}

.convertion-copy-btn .copy-btn svg{
    width: 20px;
}

.unit-title{
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    margin-top: 95px;
    margin-bottom: 40px;
    width: fit-content;
    text-align: center;
}

.page-navigation{
    margin-bottom: 35px;
}

.page-link a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--text-color-02);
    font-weight: 400;
    text-decoration: none;
    transition: .3s ease;
}

.page-list a:hover{
    color: var(--primary-color);
}

.page-list .active-link{
    color: var(--text-color-01);
}

.page-list .arrow-right{
    width: 22px;
    color: var(--text-color-02);
    margin-left: 5px;
}

.page-link .home-icon{
    width: 20px;
    color: var(--primary-color);
}

.page-link span{
    font-size: .875em;
}

.page-navigation .page-list{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

.unit-title .title-with-icon{
    display: flex;
    gap: 15px;
}

.unit-title .title-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.unit-title .svg-icon{
    background: var(--icon-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50px;
}

.unit-title .svg-icon svg{
    /* font-size: 2.25em; */
    color: var(--primary-color);
    width: 37px;
    height: 37px;
}

.unit-title .p-main{
    font-size: 2em;
    font-weight: 650;
    color: var(--text-color-01);
}

.unit-title .p-sub{
    font-size: .927em;
    font-weight: 400;
    color: var(--text-color-02);
}

.unit-01 .unit-choose select, .unit-02 .unit-choose select{
    background: var(--select-bg-color);
    border: var(--box-border);
    outline: none;
    color: var(--text-color-01);
    letter-spacing: .5px;
    font-size: .9em;
    font-weight: 400;
    width: 310px;
    height: 50px;
    border-radius: 10px;
    padding: 0 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* 2. Add your custom arrow (using an inline SVG chevron here) */
    background-image: var(--selectbox-arrow);
    background-repeat: no-repeat;

    /* 3. CHANGE POSITION HERE: 15px from the right, centered vertically */
    background-position: right 15px center;
    background-size: 16px;
}

/* .unit-01 .unit-choose select, .unit-02 .unit-choose select{
    background: none;
    border: none;
    outline: none;
    color: var(--text-color-01);
    letter-spacing: .5px;
    font-size: .9em;
    width: auto;
    max-width: 100%;
    font-weight: 400;
} */

.unit-choose select{
    /* transition: .15s ease; */
}

.unit-choose select:hover{
    cursor: pointer;
    /* font-weight: 500; */
    color: var(--primary-color);
}

.unit-choose select option{
    color: var(--text-color-01);
    font-size: 1.1em;
    font-weight: 400;
    background: var(--body-color);
}

.v-line{
    width: calc(100% - 50px);
    height: 1px;
    background: var(--line-color);
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   All value convert table
========================================= */
.table-container{
    position: relative;
    /* width: 700px; */
    width: 100%;
    overflow: hidden;
    padding: 25px;
    margin-top: 7px;
    margin-bottom: 10px;
}

.master-unit{
    font-size: 1em;
    font-weight: 525;
    margin-bottom: 20px;
    color: var(--text-color-01);
}

/* .master-unit span{
    font-weight: 400;
    font-size: .95em;
    color: var(--text-color-01);
} */

.master-unit .master-unit-title-text {
    font-weight: 400;
    font-size: 1em;
    color: var(--text-color-01);
}

.master-unit-bold-text{
    font-weight: 525;
}

.master-unit-text-long{
    text-align: center;
}

.master-unit-text-short{
    display: none;
}

.convert-table{
    outline: var(--table-border);;
    border-radius: var(--card-border-radius);
    overflow: hidden;
    width: 100%;
}

.input-unit{
    color: var(--text-color-01);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.input-unit span{
    font-size: 1.1em;
    font-weight: 500;
    padding-right: 5px;
}

.input-unit p{
    font-size: .925em;
}

.convert-table, .convert-table th, .convert-table td {
  border: var(--table-border);
  border-collapse: collapse;
}

.table-head{
    padding: 10px;
    background: var(--input-bg-color);
    font-size: .9em;
    font-weight: 600;
    color: var(--text-color-01);
}

.i-unit{
    width: 30px;
}

.u-value{
    width: 30%;
}

.u-name{
    width: 40%;
}

.unit-value{
    padding: 15px 10px;
    text-align: right;
    font-weight: 500;
    font-size: .975em;
    color: var(--text-color-01);
}

.unit-name{
   padding: 15px 10px;
   font-size: .925em;
   color: var(--text-color-02);
   font-weight: 450;
   display: flex;
   justify-content: start;
   align-items: center;
}

.unit-name p{
    margin-right: 5px;
}

.unit-name span{
    display: none;
}

/* =========================================
   Value Multiplication Table
========================================= */
.common-table-container{
    position: relative;
    /* width: 700px; */
    width: 100%;
    overflow: hidden;
    padding: 25px;
    margin-top: 7px;
}

.common-table{
    outline: var(--table-border);;
    border-radius: var(--card-border-radius);
    overflow: hidden;
    width: 100%;
}

.common-table-title{
    margin-bottom: 20px;
    
}

.common-table-title .c-table-title{
    /* display: flex;
    justify-content: start;
    align-items: center; */
    /* gap: 5px; */
    margin-bottom: 5px;
}

.common-table-title .multi-table-title-unit-1,
.common-table-title .multi-table-title-unit-2{
    color: var(--text-color-01);
    font-size: 1em;
    font-weight: 525;
}

.common-table-title .c-table-title .multi-table-text{
    color: var(--text-color-01);
    font-size: 1em;
    font-weight: 400;
}

.column-1{
    width: 10%;
}

.column-2{
    width: 35%;
}

.column-3{
    width: 55%;
}

.common-table,  .common-table th, .common-table td{
    border: var(--table-border);
    border-collapse: collapse;
}

.common-table-th{
    padding: 10px;
    font-weight: 600;
    background: var(--input-bg-color);
    font-size: .9em;
    color: var(--text-color-01);
}

.common-table-td{
    padding: 15px 10px;
}

.column-2{
    text-align: right;
}

.common-table-td .td-x-by{
    color: var(--text-color-03);
    font-weight: 600;
    font-size: .875em;
}

.common-table-td .td-value{
    color: var(--text-color-01);
    font-size: .975em;
    font-weight: 500;
    margin-right: 7px;
}

.common-table-td .td-unit{
    font-size: .925em;
    font-weight: 400;
    color: var(--text-color-02);
}

/* =========================================
   About card
========================================= */
.about-card{
    background: var(--card-bg);
    box-shadow: var(--box-shadow-hard);
    padding: 35px 25px;
    border-radius: var(--card-border-radius);
    margin-top: 40px;
    border: var(--card-border);
}

.about-title{
    margin-bottom: 20px;
    /* display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; */
}

.about-title h2{
    color: var(--text-color-01);
    font-size: 1.35em;
    font-weight: 650;
    margin-bottom: 3px;
}

.about-title p{
    font-size: .9em;
    color: var(--text-color-02);
    font-weight: 400;
}

.do-youknow-title{
    margin-bottom: 12px;
}

.do-youknow-title h2{
    color: var(--text-color-01);
    font-size: 1.35em;
    font-weight: 650;
    margin-bottom: 3px;
}

.do-youknow-title-withicon{
    display: flex;
    align-items: center;
    gap: 7px;
}

.do-youknow-icon{
    width: 22px;
    color: var(--text-color-01);
}

.do-youknow-title .title-sub{
    font-size: .925em;
    color: var(--text-color-02);
    font-weight: 400;
}

.do-youknow-paragraph{
    color: var(--text-color-01);
    font-size: .975em;
    margin-top: 22px;
    margin-bottom: 35px;
}

.one-content {
    /* margin-bottom: 30px; */
}

.one-paragraph{
    color: var(--text-color-02);
    font-size: .975em;
}

.paragraph-margin-bottom-3px {
    margin-bottom: 3px;
}

.paragraph-margin-bottom-6px {
    margin-bottom: 6px;
}

.paragraph-margin-bottom-9px {
    margin-bottom: 9px;
}

.paragraph-margin-bottom-12px {
    margin-bottom: 12px;
}

.paragraph-margin-bottom-20px {
    margin-bottom: 20px;
}

.paragraph-margin-bottom-30px {
    margin-bottom: 30px;
}

.paragraph-margin-bottom-37px {
    margin-bottom: 37px;
    margin-left: 18px;
}

.highlight-text {
    font-size: 1.05em;
    color: var(--text-color-01);
    font-weight: 550;
}

.support-units-container{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px; 
    row-gap: 10px;
    max-width: 700px;
}

.support-units-container li{
    list-style: none;
    color: var(--text-color-01);
    font-size: .875em;
    background: var(--input-bg-color);
    width: fit-content;
    padding: 5px 15px;
    border-radius: 20px;
    border: var(--box-border);
    cursor: pointer;
}

.support-units-container li:hover{
    color: var(--white-color);
    background: var(--primary-color);
}

/* =========================================
   All units navigation
========================================= */
.second-column{
    position: relative;
    width: 350px;
    /* margin-top: 200px; */
    display: flex;
    flex-direction: column;
    /* row-gap: 40px; */
}

.second-column.stopped{
    position: sticky;
    top: 85px;
    align-self: start;
}

.unit-page-category-card{
    width: 100%;
    height: fit-content;
    padding: 35px 25px 35px 30px;
    background: var(--card-bg);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow-hard);
    border: var(--card-border);
}

.category-title{
    color: var(--text-color-01);
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 20px;
    /* border-bottom: 1px solid var(--primary-color);
    width: fit-content;
    padding-bottom: 10px; */
}

.converter-category-list-container{
    list-style: none;
    height: 800px;  
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.converter-category-list-container::-webkit-scrollbar{
    width: 0px;
}

.converter-category-list-container:hover::-webkit-scrollbar{
    width: 5px;
    background: var(--scrollbar-color);
}

.converter-category-list-container::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 25px;
}

.converter-category-list-container::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover); 
}

.unit-item{
    margin-bottom: 12px;
}

.unit-item a{
    color: var(--text-color-02);
    font-size: .89em;
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: var(--element-transition);
}

.unit-item:hover a{
    color: var(--primary-color);
}

.unit-item a svg{
    width: 22px;
    margin-right: 7px;
    color: var(--primary-color);
}

.we-r-in:hover a{
    color: var(--white-color);
}

/* =========================================
   Interesting facts slider
========================================= */
.facts-slider{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper{
    margin-top: 20px;
    margin-bottom: 15px;
    margin-left: 25px;
    margin-right: 25px;
    width: 100%;
    max-width: 700px;
    height: calc-size(fit-content, size + 25px);
}

/* .swiper-pagination{
    transform: translateY(10px);
} */

.swiper-pagination{
    color: var(--text-color-01);
}

.swiper-pagination-current{
    font-size: 1.25em;
    color: var(--text-color-01);
    font-weight: 550;
}

.swiper-pagination-total{
    font-size: 1.1em;
    color: var(--text-color-02);
    font-weight: 550;
}

.swiper-pagination-bullet{
    background: var(--swiper-bullet-inactive-color);
}

.swiper-slide{
   /* text-align: center;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   column-gap: 45px; */
   background: var(--select-bg-color);
   border: var(--box-border);
   padding: 15px;
   border-radius: var(--card-border-radius)
}

.facts-slider-top{
    margin-bottom:27px;
}

.facts-slider-title{
    display: flex;
    align-items: normal;
    flex-direction: column;
    /* gap: 5px; */
    margin-bottom: 12px;
}

.facts-slider-title h2{
    color: var(--text-color-01);
    font-size: 1.25em;
    font-weight: 700;
}

.facts-slider-title-sub{
    font-size: .875em;
    color: var(--text-color-02);
    font-weight: 400;
}

.facts-slider-paragraph{
    color: var(--text-color-01);
    font-size: .975em;
    /* margin-top: 10px; */
    /* margin-bottom: 35px; */
    line-height: 22px;
}

.fact-bold{
    color: var(--text-color-01);
    font-weight: 500;
}

.fact-slider-read-more-btn{
    border: none;
    background: none;
    color: var(--text-color-01);
    font-size: .825em;
    font-weight: 600;
    transition: var(--element-transition);
    cursor: pointer;
}

.fact-slider-read-more-btn:hover{
    color: var(--primary-color);
}

.one-fact{

}

.one-fact .fact-title{
    font-size: 1.05em;
    color: var(--text-color-01);
    font-weight: 550;
    margin-bottom: 5px;
    width: 90%;
}

.one-fact .fact-description{
    color: var(--text-color-02);
    font-size: .975em;
    /* margin-left: 18px; */
    width: 99%;
    line-height: 22px;
}

.swiper-pagination{
    position: absolute;
    /* bottom: 100px; */
}

/*======= Media queries (max-width: 1250px) =======*/
@media screen and (max-width: 1250px) {
    .home{
        align-items: center;
    }

    .unit-title {
        justify-content: start;
        width: 750px;
    }

    .home .main-container {
        flex-direction: column;
        align-items: center;
    }

    .second-column {
        position: relative;
        width: 750px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*======= Media queries (max-width: 1010px) =======*/
@media screen and (max-width: 1010px) {

}

/*======= Media queries (max-width: 850px) =======*/
@media screen and (max-width: 850px) {
    .first-column, .second-column {
        width: 100%;
        padding: 0 25px;
    }

    .conveter {
        flex-direction: column;
    }

    .unit-info input {
        width: 100%;
    }

    .unit-choose{
        position: relative;
        width: 100%;
    }

    .unit-01 .unit-choose select, .unit-02 .unit-choose select {
        width: 100%;
    }

    .box {
        width: 100%;
    }

    .unit-title {
        width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    .unit-01 {
        /* margin-bottom: 5px; */
    }

    .unit-info {
        align-items: end;
    }

    .swapBtn {
        rotate: 90deg;
        /* margin: 5px 0; */
        margin-top: 30px;
        /* margin-bottom: 5px; */
    }
}

/*======= Media queries (max-width: 650px) =======*/
@media screen and (max-width: 650px) {
    
}

/*======= Media queries (max-width: 550px) =======*/
@media screen and (max-width: 550px) {
    .table-head {
        min-height: 58px;
    }

    .unit-name {
        /* min-height: 58px; */
    }

    .unit-value {
        /* min-height: 58px; */
    }

    .input-unit {
        padding: 10px;
        white-space: nowrap;
    }

    /* .master-unit-text-long{
        display: none;
    }

    .master-unit-text-short{
       display: block;
    } */
}

/*======= Media queries (max-width: 475px) =======*/
@media screen and (max-width: 475px) {
    .input-unit {
        white-space: break-spaces;  
    }

    .unit-name p{
        display: none;
    }

    .unit-name span{
        display: block;
    }

    .unit-title {
        margin-bottom: 45px;
    }

    .unit-title i {
        font-size: 1.8em;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .unit-title .title-text{
        text-align: left;
    }

    .unit-title .p-main {
        font-size: 1.5em;
    }

    .unit-title .p-sub {
        font-size: .875em;
    }

    /* .about-card p {
        font-size: .9em;
    }

    .about-title {
        font-size: 1.35em;
    } */
}

/*======= Media queries (max-width: 425px) =======*/
@media screen and (max-width: 425px) {
    /* .unit-title {
        align-items: start;
    } */

    /* .unit-title i {
        font-size: 1.25em;
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-right: 5px;
    } */

    .page-link a{
        gap: 3px;
    }
    
    .page-list .arrow-right{
        margin-left: 3px;
    }
}