@media screen and (min-width: 300px){
    .register-page {
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0px;
        background-color: var(--thm-base);
        overflow: auto;
    
    
        form {
            width: 100%;
            max-width: 900px;
            padding: 50px 15px;
            background-color: rgb(255, 255, 255);
            border-radius: 15px;
            /* margin-top: 300px; */
    
            .logo {
                width: 100%;
                height: 100px;
    
                img{
                    width: 150px;
                    height: 50px;
                }
            }
    
            .salute {
                width: 100%;
                height: fit-content;
                margin-bottom: 40px;
    
                p{
                    color: rgb(117,137,145);
                }
            }
    
            .holder{
                width: 100%;
                height: fit-content;
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
    
                label{
                    font-size: 13px;
                    font-weight: 700;
    
                    span{
                        color: rgb(231,54,103);
                    }
                }
    
                .firstname, .lastname, .email, .username, .password, .cpassword{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    border: 1px solid rgb(117,137,145);
                    border-radius: 5px;
                    margin-top: 5px;
    
    
                    input{
                        width: 100%;
                        height: 100%;
                        padding: 10px;
                        border: none;
                        border-radius: 5px;
                    }
        
                    input:focus{
                        outline: none;
                    }
                }
    
                .country-select-container{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    border: 1px solid rgb(117,137,145);
                    border-radius: 5px;
                    margin-top: 5px;
    
                    .country-select {
                        width: 100%;
                        padding: 10px;
                        font-size: 16px;
                        border: none;
                        border-radius: 5px;
                        background-color: #fff;
                        appearance: none; /* Removes default dropdown arrow */
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        transition: all 0.3s ease-in-out;
                        position: relative;
                    }
    
                    .country-select:focus {
                        outline: none;
                    }
    
                    .country-select option:disabled {
                        color: rgb(117,137,145);
                    }
    
                    .country-select option {
                        padding: 10px;
                        background-color: #fff;
                        border: none;
                        font-size: 16px;
                        color: #333;
                    }
                }
    
                .phone{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    border: 1px solid rgb(117,137,145);
                    border-radius: 5px;
                    margin-top: 5px;
    
                    .country-code{
                        width: 20%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-weight: 700;
                        /* color: rgb(117,137,145); */
                        border-right: 1px solid rgb(117,137,145);
                    }
    
                    input{
                        width: 80%;
                        height: 100%;
                        padding: 10px;
                        border: none;
                        border-radius: 5px;
                    }
    
                    input:focus{
                        outline: none;
                    }
                }
            }
            
            .g-recaptcha{
                margin-top: 20px;
            }
    
            .remember-me{
                width: 100%;
                height: fit-content;
                display: flex;
                margin-bottom: 20px;
    
                .remember{
                    width: 100%;
                    height: fit-content;
                    display: flex;
    
                    input[type="checkbox"]{
                        width: 15px;
                    }
    
                    input[type="checkbox"]:checked {
                        accent-color: rgb(231, 54, 103);
                    }
    
                    p{
                        margin-left: 5px;
                        font-size: 15px;
                        color: rgb(117,137,145);
                        font-weight: 600;
    
                        a{
                            text-decoration: none;
                            color: rgb(231,54,103);
                            font-weight: 700;
                        }
        
                        a:hover{
                            color: rgb(70, 84, 90);
                        }
                    }
                }
            }
    
            .button{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 25px;
    
                button{
                    width: 100%;
                    padding: 12px;
                    border-radius: 30px;
                    transition: background-color 0.5s ease-in-out;
                    background: linear-gradient(to right, rgb(231, 54, 103), rgb(241, 88, 70), rgb(252, 126, 25));;
                    border: none;
                    color: var(--thm-white);
                    font-weight: 700;
    
                    &:hover{
                        background: linear-gradient(to right, rgb(231, 54, 103), rgb(231, 54, 103), rgb(231, 54, 103));;
                    }
                }
            }
    
            .note{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
    
                p{
                    a{
                        text-decoration: none;
                        margin-left: 10px;
                        font-weight: 700;
                        color: rgb(231, 54, 103);
                        transition: color 0.5s ease-in-out;
    
                        &:hover{
                            color: var(--thm-black);
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1100px){
    .register-page {
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 100px 0px;
        background-color: var(--thm-base);
        overflow: auto;
    
    
        form {
            width: 100%;
            max-width: 900px;
            padding: 50px 60px;
            background-color: rgb(255, 255, 255);
            border-radius: 15px;
            /* margin-top: 300px; */
    
            .logo {
                width: 100%;
                height: 100px;
    
                img{
                    width: 150px;
                    height: 50px;
                }
            }
    
            .salute {
                width: 100%;
                height: fit-content;
                margin-bottom: 40px;
    
                p{
                    color: rgb(117,137,145);
                }
            }
    
            .holder{
                width: 100%;
                height: fit-content;
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
    
                label{
                    font-size: 13px;
                    font-weight: 700;
    
                    span{
                        color: rgb(231,54,103);
                    }
                }
    
                .firstname, .lastname, .email, .username, .password, .cpassword{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    border: 1px solid rgb(117,137,145);
                    border-radius: 5px;
                    margin-top: 5px;
    
    
                    input{
                        width: 100%;
                        height: 100%;
                        padding: 10px;
                        border: none;
                        border-radius: 5px;
                    }
        
                    input:focus{
                        outline: none;
                    }
                }
    
                .country-select-container{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    border: 1px solid rgb(117,137,145);
                    border-radius: 5px;
                    margin-top: 5px;
    
                    .country-select {
                        width: 100%;
                        padding: 10px;
                        font-size: 16px;
                        border: none;
                        border-radius: 5px;
                        background-color: #fff;
                        appearance: none; /* Removes default dropdown arrow */
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        transition: all 0.3s ease-in-out;
                        position: relative;
                    }
    
                    .country-select:focus {
                        outline: none;
                    }
    
                    .country-select option:disabled {
                        color: rgb(117,137,145);
                    }
    
                    .country-select option {
                        padding: 10px;
                        background-color: #fff;
                        border: none;
                        font-size: 16px;
                        color: #333;
                    }
                }
    
                .phone{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    border: 1px solid rgb(117,137,145);
                    border-radius: 5px;
                    margin-top: 5px;
    
                    .country-code{
                        width: 20%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-weight: 700;
                        /* color: rgb(117,137,145); */
                        border-right: 1px solid rgb(117,137,145);
                    }
    
                    input{
                        width: 80%;
                        height: 100%;
                        padding: 10px;
                        border: none;
                        border-radius: 5px;
                    }
    
                    input:focus{
                        outline: none;
                    }
                }
            }

            .g-recaptcha{
                margin-top: 20px;
            }
    
            .remember-me{
                width: 100%;
                height: fit-content;
                display: flex;
                margin-bottom: 20px;
    
                .remember{
                    width: 100%;
                    height: fit-content;
                    display: flex;
    
                    input[type="checkbox"]{
                        width: 15px;
                    }
    
                    input[type="checkbox"]:checked {
                        accent-color: rgb(231, 54, 103);
                    }
    
                    p{
                        margin-left: 5px;
                        font-size: 15px;
                        color: rgb(117,137,145);
                        font-weight: 600;
    
                        a{
                            text-decoration: none;
                            color: rgb(231,54,103);
                            font-weight: 700;
                        }
        
                        a:hover{
                            color: rgb(70, 84, 90);
                        }
                    }
                }
            }
    
            .button{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 25px;
    
                button{
                    width: 100%;
                    padding: 12px;
                    border-radius: 30px;
                    transition: background-color 0.5s ease-in-out;
                    background: linear-gradient(to right, rgb(231, 54, 103), rgb(241, 88, 70), rgb(252, 126, 25));;
                    border: none;
                    color: var(--thm-white);
                    font-weight: 700;
    
                    &:hover{
                        background: linear-gradient(to right, rgb(231, 54, 103), rgb(231, 54, 103), rgb(231, 54, 103));;
                    }
                }
            }
    
            .note{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
    
                p{
                    a{
                        text-decoration: none;
                        margin-left: 10px;
                        font-weight: 700;
                        color: rgb(231, 54, 103);
                        transition: color 0.5s ease-in-out;
    
                        &:hover{
                            color: var(--thm-black);
                        }
                    }
                }
            }
        }
    }
}