html {
    scroll-behavior: smooth;
}
/*font-style*/


*::-webkit-scrollbar {
    width: .25rem;
    height: .25rem;
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
    background-color:var(--primary-color);
    border-radius: 5px;
}


.button {
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}
.button:focus {
    outline: 0;
}
.button:hover {
    outline: 0;
}
.button:not(button) {
    text-align: center;
}
/*button_style_end*/

/*input_style_start*/
.input {
    padding: .5rem;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    color: black;
    border-width: 1px;
}
.input:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 1px var(--blue-color);
    box-shadow: 0 0 0 1px var(--blue-color);
}
/*input_style_end*/
.input:not(:focus):hover {
    border-color: var(--blue-color);
    border-width: 1px;
    -webkit-transition: border-color .5s;
    -o-transition: border-color .5s;
    transition: border-color .5s;
}


/*header-start*/

.bg-after-tow,
.bg-after{
    position: relative;
    z-index: 1;
}

.bg-after-tow::after,
.bg-after::after{
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bg-after-tow::after{
    background-color: rgba(40, 40, 40, 0.55);

}
.bg-after::after {
    background-color: rgba(0, 29, 95, 0.4);
    opacity: 0.73;
}

.top-height {
    padding-bottom: 56.25%;
}

.header{
    z-index: 500;
}

.border-design{
    position: relative;
}
.border-design::after{
    content: "";
    position: absolute;
    top: -4px;
    inset-inline-start:0 ;
    width: 30%;
    background: var(--blue-color);
    height: 4px;
}

.swiper-button-next, .swiper-button-prev{
    color: var(--primary-color);
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 1.75rem;
    font-weight: bolder;
}


@media (min-width: 768px) {
    .top-height {
        padding-bottom: 26.25%;
    }

}
@media (min-width: 1024px) {

    .contain {
        width: 80% !important;
        margin: 0 auto
    }

}
@media screen and (min-width: 1280px) {
    .contain {
        width: 70% !important;
        margin: 0 auto
    }
}