@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

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

:root {
    --themecolor: 6, 14, 36;
    /* --themecolor-rgb: 6, 14, 36; */
    --light-blue: 18, 41, 64;
    --font-color-gray: 255, 255, 255, 0.65;
    --theme-blue: 9, 132, 227;
    --theme-green: 46, 204, 113;
    --white: 255, 255, 255;
    --theme-yellow: 241, 196, 15;
    --font-poppins: 'Poppins', sans-serif;
    --border-color: #838383;
    --rung-bg: 255, 255, 255;
    --wide-bg: 214, 48, 49;
}

.container {
    padding-left: 25px;
    padding-right: 25px;
}

body {
    font-family: var(--font-poppins);
    letter-spacing: .5px;
    font-size: 17px;
    color: #fff;
    text-transform: capitalize;
}



body:has(.opt1) header {
    display: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.theme-color {
    background: rgba(var(--themecolor), 1) !important;
}

.rung-bg {
    background: rgba(var(--rung-bg), 0.2) !important;
}

.wide-bg {
    background: rgba(var(--wide-bg), 1) !important;
}

.light-blue {
    background: rgba(var(--light-blue), 1) !important;
}

.font-color-gray {
    color: rgba(var(--font-color-gray)) !important;
}

.theme-blue {
    background: rgba(var(--theme-blue), 1) !important;
}

.theme-green {
    background: rgba(var(--theme-green), 1) !important;
}

.text-green {
    color: rgba(var(--theme-green), 1) !important;
}

.theme-yellow {
    background: rgba(var(--theme-yellow), 1) !important;
}

.text-yellow {
    color: rgba(var(--theme-yellow), 1) !important;
}

.text-theme-blue {
    color: rgba(var(--theme-blue), 1) !important;
}

.btn {
    text-transform: capitalize;
}

.bg-white-1 {
    background: rgba(var(--white), 0.1);
}

.pb-80 {
    padding-bottom: 80px;
}

.fs-14 {
    font-size: 14px;
}

.border-left {
    border-left: 1px solid var(--border-color);
}

.poppins-medium {
    font-family: var(--font-poppins);
    font-weight: 500;
    font-style: normal;
}

.text-green {
    color: rgba(var(--theme-green), 1);
}

.btn-light-blue {
    border-radius: 200px;
    color: #fff;
    font-weight: 500;
    background: rgba(var(--theme-blue), 1);
    padding: 10px 30px;

    &:hover {
        background: rgba(var(--theme-blue), 0.5);
        color: #fff;
    }
}

.btn-green {
    border-radius: 200px;
    color: #fff;
    font-weight: 500;
    background: rgba(var(--theme-green), 1);
    padding: 10px 30px;

    &:hover {
        background: rgba(var(--theme-green), 0.5);
        color: #fff;
    }
}

.btn-yellow {
    border-radius: 200px;
    color: #fff;
    font-weight: 500;
    background: rgba(var(--theme-yellow), 1);
    padding: 10px 30px;

    &:hover {
        background: rgba(var(--theme-yellow), 0.5);
        color: #fff;
    }
}

.border-yellow {
    border: 1px solid rgba(var(--theme-yellow), 1);
}

.border-green {
    border: 1px solid rgba(var(--theme-green), 1);
}

.border-bottom-dashed {
    border-bottom: 2px dashed rgba(var(--theme-blue), 1);
}

.btn-light-blue-0 {
    border-radius: 200px;
    color: #fff;
    font-weight: 500;
    background: transparent;
    padding: 10px 30px;
    border: 1px solid rgba(var(--theme-blue), 1);
    &:hover {
        background: rgba(var(--theme-blue), 0.2);
        color: #fff;
    }
}

.btn-white-0 {
    border-radius: 200px;
    color: #fff;
    font-weight: 500;
    background: transparent;
    padding: 10px 30px;
    border: 1px solid rgba(var(--white), 1);
    &:hover {
        background: rgba(var(--white), 0.2);
        color: #fff;
    }
}

.w-fit{
    width: fit-content;
}

.mt-5rem {
    margin-top: 5rem;
}

main {
    background: rgba(var(--themecolor), 1);
    max-width: 475px;
    margin: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

p {
    margin-bottom: 0;
}

.max475 {
    max-width: 475px;
    margin: auto;
}

.mainscrbg {
    background-image: url(../images/backgroundimg/ca42e73bea521399e1a95c177baa26f4.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.opt1 {
    position: relative;

    &:before {
        position: absolute;
        height: 100%;
        width: 100%;
        content: "";
        top: 0;
        left: 0;
        background: #060e24bf;
        z-index: 0;
    }

    input {
        &:focus {
            box-shadow: none;
        }
    }

    .otp-input {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 20px;
        margin: 5px;
        border-radius: 5px;
        border: none;
        color: #fff;
    }

    .input-group {
        background: rgba(var(--light-blue), 1);
        border-radius: 8px;
        padding: 10px;

        input {
            color: #fff;
        }

        input::placeholder {
            color: rgba(var(--font-color-gray));
        }

    }

    .otpinp {
        border: none;

        &:focus,
        &:active {
            border: 1px solid #fff;
        }
    }
}

.homediv {
    .hometabsdivmain {
        .nav-tabs {
            border-bottom: none;

            .nav-item {
                .nav-link {
                    padding: 15px 0;
                    background: transparent;
                    border: none;
                    color: #fff;
                    border-radius: 0;

                    &.active {
                        background: transparent;
                        border-bottom: 2px solid rgba(var(--theme-blue), 1);
                    }
                }
            }
        }

        .tab-content {
            .tab-pane {
                color: #fff;
            }

            .highbtn,
            .lowbtn {
                background: rgba(var(--themecolor), 1);
                color: #fff;
                border: 1px solid var(--border-color);
                box-shadow: 3px 5px 5px 0px rgba(0, 0, 0, 0.4);

            }
        }
    }

    .historymain {
        .nav-tabs {
            border-bottom: none;

            .nav-item {
                .nav-link {
                    padding: 15px 0;
                    background: transparent;
                    border: none;
                    color: #fff;
                    border-radius: 0;

                    &.active {
                        background: transparent;
                        border-bottom: 2px solid rgba(var(--theme-blue), 1);
                    }
                }
            }
        }

        .tab-content {
            .tab-pane {
                color: #fff;
            }

            .highbtn,
            .lowbtn {
                background: rgba(var(--themecolor), 1);
                color: #fff;
                border: 1px solid var(--border-color);
                box-shadow: 3px 5px 5px 0px rgba(0, 0, 0, 0.4);

            }
        }
    }


}

.bottom-nav {
    .nav-tabs {
        box-shadow: 0 0 35px #0000006b;

        .nav-item {
            .nav-link {
                padding: 15px 0;
                background: transparent;
                border: none;
                color: #fff;
                height: 50px;
                width: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100px;

                &.active,
                &:hover {
                    background: rgba(var(--theme-blue), 1);
                }
            }
        }
    }
}

.fixed-bottom {
    bottom: 20px;
}

.runnumber {
    border-radius: 100px;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 500;
}

.norun {
    border: 2px dashed #fff;
}

.esdfytys * {
    font-size: 13px;
}

.highbtn,
.lowbtn {
    background: rgba(var(--themecolor), 1);
    color: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 3px 5px 5px 0px rgba(0, 0, 0, 0.4);

}

.hometabsdivmainlivedetail {
    .nav-tabs { 
        /* width */
        &::-webkit-scrollbar {
          height: 3px;            
        }
        
        /* Track */
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        
        /* Handle */
        &::-webkit-scrollbar-thumb {
          background: rgba(var(--theme-blue),1);
          border-radius: 10px !important;
        }
        
        /* Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
          background: rgba(var(--theme-blue),0.5);
        }

        .nav-item {
            .nav-link {
                font-size: 14px;
                background: rgba(var(--white), 0.15);
                border: none;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100px;
                white-space: nowrap;
                &.active,
                &:hover {
                    background: rgba(var(--theme-blue), 1);
                }
            }
        }
    }
}

.profilepagedivmain{
    margin-top: 80px;
    .rfgdgd{
        padding-bottom: 100px;
    }
}

.avtardiv{
    margin-top: -80px;
    .avtardivimg{
        .thhthff {
            bottom: -10px;
            right: -10px;
            width: 45px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.titklediv *{
    text-transform: capitalize;
}

.formforbank{
    .form-control {
        background: transparent;
        border-radius: 25px;
        border: 1px solid #444;
        color: white;
        padding: 12px 15px;
    }
    .form-control::placeholder {
        color: #888;
    }
    .form-group {
        position: relative;
        margin-bottom: 20px;
    }
    .form-group label {
        position: absolute;
        top: -10px;
        left: 20px;
        background: #0a0f1e;
        padding: 0 5px;
        font-size: 14px;
        color: white;
    }
}

main.mainmain.pb-80.pt-4:has(.profilepage) {
    padding-bottom: 0;
}
.progress {
    height: 8px;
    border-radius: 100px;
}

.progress .progress-bar {
    border-radius: 10px;
    background-color: rgba(var(--theme-blue), 1);
}

.yfjfff{
    .border-bottom{
        border-bottom: 2px solid rgba(217, 217, 217, 1);
    }
}

.modal{
    .modal-dialog{
        max-width: 375px;
        margin: auto;
    }
    .modal-content{
        background-color: rgba(var(--light-blue), 1);
    }
    .updateinput{
        input{
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #fff !important;
            color: #fff;
            &::placeholder{
                color: #fff;
            }
        }
    }
}

.policycontent *{
    font-size: 14px;
}
.policycontent p{
    margin-bottom: 30px;
}

.addmondeydivmain{
    .quantity-wrapper {
        display: flex;
        align-items: center;
        max-width: 150px;
        margin: auto;
    }
    .quantity-wrapper button {
        width: 40px;
        height: 40px;
        border: 1px solid #ddd;
        background: #f8f9fa;
        font-size: 20px;
        cursor: pointer;
    }
    .quantity-wrapper input {
        width: 50px;
        text-align: center;
        border: 1px solid #ddd;
        height: 40px;
    }
}