*{
    margin: 0px;
    box-sizing: border-box;
    text-decoration:none;
    font-family: 'Tajawal', sans-serif;
    &::selection{
        background-color: #384977;
        color: #fff; 
    }
    &::-webkit-scrollbar {
        width: 10px;
    }
    &::-webkit-scrollbar-track {
        background-color: #ccc;
    }
    &::-webkit-scrollbar-thumb {
        background: #384977; 
        border-radius: 8px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #25314f; 
    }
}
/**********************************************
   Start Global Style
**********************************************/
body{
    background-color: rgb(252,252,252);
}
p{
    font-size: 15px;
    color: #555;
    line-height: 1.8rem;
}
a{
    color: #000;
    transition: all .3s ease-in-out;
    &:hover{
        color:#000;
        text-decoration:none
    }
    &:focus{
       outline:0
    }
}
ul{
    list-style-type:none;
    padding: 0;
}
button:active,
button:active:focus,
button:active:hover,
button:focus,
button:hover,
button:not(:disabled):not(.disabled).active,
button:not(:disabled):not(.disabled):active {
    transition: all .3s ease;
    outline: 0;
    box-shadow: none;
}
form{
    .form-control{
        &:focus{
            outline: none !important;
            box-shadow: none !important;
            border: 1px solid #384977 ;
        }
    }
}


/**********************************************
   Start Edit Navbar & Footer
**********************************************/

//start Navbar
.navbar{
    box-shadow: 0 0 20px 0 #dde;
    background-color: #fff;
    .logo{
        width: 115px;
        object-fit: contain;
    }
}

//start Footer
footer{
    .copright{
        padding: 20px 0 15px 0;
        background-color: #F7FAFC;
        .social-links{
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: end;
            width: 100%;
            height: 100%;
            a{
                margin: 0 10px;
                color: #666;
                &:hover{
                    color: #384977;
                    transform: scale(1.2);
                }
            }
            .follow{
                color: #333;
                margin-inline-end: 15px;
                text-transform: capitalize;
                // font-family: Montserrat;
            }
        }
       
        .copyright_p{
            color: #202020;
            .logo{
                width: 100px;
                object-fit: contain;
                margin: 0 10px;
            }
        }
    }
}

/**********************************************
    Start Public Classes
**********************************************/
.container-fluid ,
.container{
    position: relative;
    z-index: 5;
}

/**********************************************
    Start Edit Home Page 
**********************************************/
.form-sec{
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    .title{
        font-weight: bold;
        small{
            color: #777;
            font-size: 12px;
        }
    }
    .file-input-group {
        .wrap {
            border-radius: 10px;
            border: 1px solid #ced4da;
        }
        .file {
            position: relative;
            font-weight: 500;
        }
        .file__input,
        .file__value {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            color: rgba(255, 255, 255, 0.3);
            padding: 0.75rem 1.0625rem;
            color: #888;
        }
        .file__input--file {
            position: absolute;
            opacity: 0;
        }
        .file__input--label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0;
            cursor: pointer;
        }
        .file__input--label:after {
            content: attr(data-text-btn);
            border-radius: 3px;
            background-color: #384977;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.18);
            padding: 0.375rem 1.625rem;
            color: #fff;
            cursor: pointer;
        }
        .file__value {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: rgba(71, 71, 71, 0.6);
        }
        .file__value:hover:after {
            color: #BC9562;
        }
        .file__value:after {
            content: "X";
            cursor: pointer;
        }
        .file__value:after:hover {
            color: #000;
        }
        .file__remove {
            display: block;
            width: 20px;
            height: 20px;
            border: 1px solid #b58240;
        }
    }
    &::before{
        content: '';
        position: absolute;
        top: 0;
        left: -30px;
        width: 15%;
        height: 300px;
        background: url(../images/pattern-1.png);
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        opacity: .1;
    }
}

/* form-container */
.form-container{
    .form-group{
        margin-bottom: 2rem;
    }
    .label{
        color: #384977;
        font-weight: 500;
        font-size: 17px;
        display: block;
        small{
            color: #777;
            margin: 0 5px;
        }
    }
    .form-control{
        font-size: 14px;
        border-radius: 10px;
    }
    .form-input{
        height: 45px;
        &:focus{
            border: transparent;
            border: 1px solid #384977 !important;
        }
    }
    .custom-control{
        .custom-control-label{
            color: #666;
            cursor: pointer;
        }
        .custom-control-input:checked~.custom-control-label {
            font-weight: 500;
        }
        .custom-control-input:checked~.custom-control-label::before {
            border-color: #384977;
            background-color: #384977;
        }
        .custom-control-input:focus:not(:checked)~.custom-control-label::before {
            border-color: #384977;
        }
        .custom-control-input:focus~.custom-control-label::before {
            box-shadow: 0 0 0 0.2rem rgba($color: #384977, $alpha: .25);
        }
    }

    .submit-butn{
        background-color: #384977;
        border: 1px solid #384977;
        color: #fff;
        padding: .8rem 4rem;
        border-radius: 25px;
        display: block;
        margin: auto;
        font-weight: bold;
        transition: all .3s linear;
        &:hover{
            background-color: #fff;
            border: 1px solid #384977;
            color: #384977; 
        }
    }
}