/* for small screen laptops */
@media screen and (max-width:1190px) {
    /* header of the webpage */
    .header {
        padding: 0.75rem 4rem;
    }

    /* right part of header button */
    .btns {
        display: flex;
    }
    .drop-btn, .ham-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        width: 2.5rem;
        padding: 3px;
        box-shadow: 0 0 9px #000;
        border-radius: 0.6rem;
        border: none;
        background-color: #333333;
        position: relative;
        cursor: pointer;
        font-size: 1.25rem;
        color: #00ffff;
        transition: all 0.3s ease-in-out;
    }
    .drop-btn {
        display: none;
    }
    .ham-btn span {
        height: 3px;
        width: 77%;
        background-color: #00ffff;
        position: absolute;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }
    .ham-btn span:nth-child(1) {
        transform: translateY(-250%);
    }
    .ham-btn span:nth-child(3) {
        transform: translateY(250%);
    }

    /* when hamburger or drop-down button get active */
    .active, .ham-btn:hover, .drop-btn:hover {
        box-shadow: 0 0 11px #00ffff;
    }
    .active span:nth-child(1) {
        transform: rotate(45deg);
    }
    .active span:nth-child(2) {
        opacity: 0;
    }
    .active span:nth-child(3) {
        transform: rotate(-45deg);
    }

    /* slider of main-section */
    .options {
        height: calc(100vh - 18vh);
        position: absolute;
        left: -150%;
        z-index: 500;
    }
    .inner-box {
        box-shadow: 0 0 18px #00ffff;
    }
    .dailogBG {
        position: absolute;
        z-index: 400;
        height: 0%;
        width: 0%;
        background-color: rgb(0, 0, 0, 0.9);
        display: block;
        transition-delay: 0.2s;
    }
}

/* for tablets */
@media screen and (max-width:848px) {
    /* header of the webpage */
    .header {
        padding: 0.75rem 3rem;
    }
    .drop-btn {
        display: flex;
    }
    .drop-btn i {
        transition: all 0.3s ease-in-out;
    }
    .active i {
        transform: rotate(180deg);
    }

    /* for drop-down box */
    .link-box {
        transform: scale(0);
        position: absolute;
    }
    .active-box {
        position: absolute;
        width: 97%;
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        top: 4.5rem;
        right: 1.5%;
        z-index: 500;
        background: #121212;
        border-radius: 1rem;
        box-shadow: 0 0 18px #00ffff;
        transform: scale(1);
        transition: all 0.3s ease-in-out;
    }

    /* calculator components */
    .input-box{
        flex-direction: column;
        width: 19rem;
    }
    .box, .in, .out{
        width: 100%;
    }
    .swap{
        transform: rotate(90deg);
    }
}

/* for large screen mobiles */
@media screen and (max-width:578px) {
    /* header of the webpage */
    .header {
        padding: 0.75rem 1.25rem;
    }
    .left {
        gap: 0.5rem;
    }
    .left i {
        font-size: 2rem;
    }
    .left span {
        font-size: 1.25rem;
    }
    .btns {
        gap: 1rem;
    }
    .active-box {
        font-size: 0.9rem;
        gap: 0.5;
    }

    /* slider of main-section */
    .options {
        min-width: 19rem;
        padding: 0.5rem;
    }
    .choices {
        padding: 0.5rem;
    }
    .opt-btn span:first-child {
        width: 2rem;
        font-size: 1.25rem;
    }
    .opt-btn span:last-child {
        font-size: 0.9rem;
    }
}

/* for normal screen mobiles */
@media screen and (max-width:407px) {
    /* calculator components */
    .screen {
        width: 17rem;
        font-size: 1.75rem;
        border-radius: 0.75rem;
    }
    .input-box{
        width: 17rem;
    }
    .row {
        gap: 1rem;
    }
    .row button {
        height: 3rem;
        width: 3rem;
        font-size: 1.25rem;
        border-radius: 0.75rem;
    }
    #equal {
        width: 7.6rem;
    }
    #bmi-gen, #gen {
        font-size: 0.9rem;
        padding: 0.5rem 1.5rem;
    }
    .bmi-out, .result {
        padding: 0.5rem 0.75rem;
    }
    .box input, .in input, #out, .box input::placeholder, .in input::placeholder {
        font-size: 0.9rem;
    }
}

/* for small screen mobiles */
@media screen and (max-width:353px) {
    /* header of the webpage */
    .header {
        padding: 0.75rem;
    }

    /* calculator components */
    .screen {
        width: 15rem;
        font-size: 1.5rem;
    }
    .input-box{
        width: 15rem;
    }
    #equal {
        width: 7rem;
    }
}