@font-face {
    font-family: 'Swissra';
    src:  url('fonts/Swissra-Font-Family/OTF/Swissra-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Swissra-bold';
    src:  url('fonts/Swissra-Font-Family/OTF/Swissra-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Tajawal';
    src:  url('fonts/Tajawal/Tajawal-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Tajawal-bold';
    src:  url('fonts/Tajawal/Tajawal-Bold.ttf') format('truetype');
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    overflow-x:hidden;
}
body{
    min-height: 500px;
    width: 100%;
    font-family: Tajawal, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 18px;
}
h1, h2, h3, h4, h5, h6{
    font-family: Tajawal-bold, sans-serif;
}
a{
    text-decoration: none;
}


/* header */
/* side nav menu */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    background-color: #089aaf;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 10px 0;
    color: #fff;
}
.header-bars{
    text-decoration: none;
    color: #089aaf;
    font-size: 30px;
}


#header{
    min-height: 100vh;
    background-color: #089aaf;
    background-image: url("../images/header_bg.jpg");
    background-size: cover;
}
#header2{
    background-color: #089aaf;
    background-image: url("../images/header_bg.jpg");
    background-size: cover;
}
.nav-item{
    font-family: Tajawal-bold, sans-serif;
    font-size: .9em;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
}
.nav-link{
    color: #fff;
}
.nav-link:hover{
    color: #089aaf;
    transition: 0.3s linear;
}
.nav-link.active{
    color: #089aaf;
}
.why-skab-div{
    padding: 7% 14% 0 0;
}
.why-skab{
    text-shadow: 0 3px 6px rgba(31, 31, 37, 0.7);
    font-family: Swissra-bold, sans-serif;
    font-size: 4em;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.64;
    color: #089aaf;
}
.why-skab-answer{
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.49);
    font-family: Swissra, sans-serif;
    font-size: 2em;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.74;
    text-align: right;
    color: #fff;
}
.search-div{
    margin: 100px 0;
    padding: 17px 10px;
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    box-shadow: 0 3px 6px 0 rgba(8, 80, 175, 0.23);
    border: solid 1px rgba(8, 154, 175, 0.1);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.001);
}
.search-input{
    border: none;
    border-radius: 8px 0 0 8px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}
.search-input:focus{
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
.search-button{
    width: 100%;
    background-color: #089aaf;
    color: #fff;
}
.search-button:hover{
    background-color: #fff;
    color: #089aaf;
    transition: 0.3s linear;
}
.search-input-fa{
    margin-left: 1px;
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 0 8px 8px 0;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, 0.1);
}
.dropdown-item{
    color: #A6A7A7;
}
.dropdown-item2{}
.dropdown-item.active, .dropdown-item:active {
    background-color: #089aaf;
}
.dropdown-menu-end:after {
    position: absolute;
    top: -6px;
    right: 16px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}
.dropdown-menu-start:after {
    position: absolute;
    top: -6px;
    left: 16px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}
.dropdown-menu-custom-responsive{}
.dropdown-menu-custom-responsive2{}
.dropdown-divider{}
.member-image{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #089aaf;
}
.member-image2{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #089aaf;
}
.sidenav-ul{
    margin: 25px 0;
}
.sidenav-ul li{
    margin: 15px 0;
}
.sidenav-ul li a{
    color: #fff;
}
.sidenav-ul li:hover a, .sidenav-ul li a.active{
    border-bottom: 1px solid #fff;
}
.search-custom-width{
    width: calc(100% - 40px);
}
/* end of header */


/* footer */
.bg-danger2{
    background-color: #FF5B5B;
}
.bg-success2{
    background-color: #25D366;
}
.support-div{
    position: fixed;
    bottom: 25px;
    right: 25px;
}
.support-btn{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: inset 10px 11px 16px #0FB8EE29, 0px 3px 6px #089AAF40;
    opacity: 1;
    color: #089aaf;
    border-radius: 50%;
    text-align: center;
    padding: 10px 15px;
}
.support-btn:hover i{
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: 0.3s ease;
}
.support-btn.active i{
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: 0.3s ease;
}
.support-open-div{
    background-color: #fff;
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 0 2px 1px #eee;
}
.support-open-div p{
    color: #089AAF;
    font-size: 12px;
    font-weight: bold;
}
.support-open-div p:hover{
    color: #111;
    transition: 0.3s linear;
    box-shadow: 0 5px 5px 0 #eee;
    border-radius: 10px;
}
.support-border-bottom{
    border-bottom: 1px solid #EBF6F8;
    padding-bottom: 10px;
}


#footer{
    padding: 50px 0;
    position: relative;
    min-height: 450px;
    background-color: #434f51;
    background-image: url("../images/footer_bg.png");
    background-size: cover;
}
.footer-social i{
    color: #fff;
    padding: 0 10px;
    font-size: x-large;
}
.footer-social i:hover{
    color: #089aaf;
    transition: 0.3s linear;
}
.footer-links-title{
    font-family: Tajawal, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    color: #089aaf;
}
.footer-links-ul li a p{
    font-family: Tajawal, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    color: #fff;
}
.footer-links-ul li a p:hover{
    color: #089aaf;
    transition: 0.3s linear;
}
.footer-links-title2{
    font-family: Tajawal, sans-serif;
    font-size: 1em;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    color: #fff;
}
.subscribe-input{
    border-radius: 4px;
    border: solid 1px #089aaf;
    background-color: transparent;
}
.subscribe-input:focus{
    background-color: transparent;
    box-shadow: none;
    color: #fff;
}
.subscribe-input::-webkit-input-placeholder{
    text-align: right;
}
.subscribe-button{
    border-radius: 6px;
    background-color: #fff;
    color: #089aaf;
    padding: 5px 25px;
}
.subscribe-button:hover{
    background-color: #089aaf;
    color: #fff;
    transition: 0.3s linear;
}
.footer-rights{
    font-family: Tajawal-bold, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.48;
    color: #089aaf;
}
.footer-rights-div{}
/* end of footer */


/* advantages */
.advantages-div{
    width: 180px;
    height: 191px;
    text-align: center;
    border-radius: 22px;
    box-shadow: 0 3px 6px 0 rgba(8, 154, 175, 0.25);
    background-color: #fff;
    padding: 12%;
}
.advantages-div img{
    margin-bottom: 15px;
}
.advantages-div p{
    font-family: Tajawal, sans-serif;
    font-size: 1em;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    color: #202425;
}
/* end of advantages */

/* added spare parts */
.margin-top-50{
    margin-top: 50px;
}
.spare-parts-title{
    font-family: Tajawal-bold, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.48;
    color: #202425;
    border-right: 5px solid #089aaf;
}
.spare-parts-div{
    padding: 10px;
    background-color: #fff;
}
.fav_:hover{
    color: #089aaf;
    transition: 0.3s linear;
}
.spare-parts-p{
    font-family: Tajawal, sans-serif;
    font-size: 1.3em;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.39;
}
.spare-parts-btn1{
    width: 100%;
    background-color: #089aaf;
    border-radius: 0 0 10px 0;
    color: #fff;
}
.spare-parts-btn1:hover{
    background-color: #fff;
    border: 1px solid #089aaf;
    color: #089aaf;
    transition: 0.3s linear;
}
.spare-parts-btn2{
    width: 100%;
    background-color: #fff;
    border: 1px solid #089aaf;
    border-radius: 0 0 0 10px;
    color: #089aaf;
}
.spare-parts-btn2:hover{
    background-color: #089aaf;
    color: #fff;
    transition: 0.3s linear;
}
.spare-parts-btn-more{
    border-radius: 5px;
    border: 1px dashed #089aaf;
    padding: 4px 8px;
    color: #089aaf;
    display:inline-block;
    position:relative;
    top:-35px;
    background-color: #fff;
}
.spare-parts-btn-more:hover{
    background-color: #089aaf;
    border: 1px dashed #fff;
    color: #fff;
    transition: 0.3s linear;
}
.know-more-btn{
    box-shadow: 0 3px 6px 0 rgba(11, 73, 167, 0.26);
    background-color: #089aaf;
    color: #fff;
}
.know-more-btn:hover{
    background-color: #fff;
    color: #089aaf;
    transition: 0.3s linear;
}
/* end of added spare parts */

/* login modal */
.login-modal{
    color: #202425;
    min-height: 100vh;
    background-color: #089aaf;
    background-image: url("../images/login-bg.jpg");
    background-size: cover;
}
.login-modal-body{
    width: 60%;
    background-color: rgba(255,255,255,0.25);
    padding: 75px;
}
.login-modal-button{
    width: 100%;
    padding: 10px 0;
    text-align: center;
    color: #70797b;
    opacity: 0.45;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.14);
    background-color: #fff;
}
.login-modal-button:hover{
    opacity: 1;
    color: #A6A7A7;
    transition: 0.3s linear;
}
.login-modal-button img{
    padding: 0 15px;
}
.login-modal-input span{
    color: #fff;
    border: none;
    height: 50px;
    width: 50px;
    background-color: rgba(8,154,175,0.5);
}
.login-modal-input input{
    border-radius: 0;
    border: none;
    height: 50px;
    opacity: 0.45;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.14);
    background-color: #fff;
}
.login-modal-input input:focus{
    box-shadow: none;
    opacity: 1;
}
.login-modal-input input::-webkit-outer-spin-button, .login-modal-input input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.login-modal-input input[type=number]{
    -moz-appearance: textfield;
}


.link1{
    color: #12636E;
    border-bottom: 1px solid #12636E;
}
.link1:hover{
    color: #089aaf;
    border-bottom: 1px solid #089aaf;
    transition: 0.3s linear;
}
.link2{
    color: #12636E;
}
.link2:hover{
    color: #089aaf;
    transition: 0.3s linear;
}
.link3{
    color: #089aaf;
}
.link3:hover{
    color: #111;
    transition: 0.3s linear;
}

.border-bottom1{
    border-bottom: 1px solid #12636E;
}
/* end of login modal */

/* rules modal */
.rules-modal-header{
   background-color: #f6f9f9;
}
.rules-modal-body{
    font-size: medium;
}
.rules-button{
    border-radius: 6px;
    background-color: #089aaf;
    color: #fff;
    padding: 5px 25px;
}
.rules-button:hover{
    background-color: #fff;
    color: #089aaf;
    border: 1px solid #089aaf;
    transition: 0.3s linear;
}
.border-turquoise-blue{
    border: 2px solid #089aaf;
}
/* end of rules modal */

/* end of rules modal */
.forgetPassword-modal{
    color: #202425;
    min-height: 100vh;
    background-color: #089aaf;
    background-image: url("../images/forget-pass-bg.jpg");
    background-size: cover;
}
.forgetPassword-modal-body{
    padding: 75px;
}
/* end of rules modal */

/* engines */
.search-input2{
    border-top: 1px solid #acb1b2;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #acb1b2;
    border-left: 1px solid #acb1b2;
    background-color: #fff;
    color: #acb1b2;
    border-radius: 15px 0 0 15px;
    font-size: small;
}
.search-input2:focus{
    border-top: 1px solid #acb1b2;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #acb1b2;
    border-left: 1px solid #acb1b2;
    box-shadow: none;
}
.search-input2-fa{
    background-color: #fff;
    color: #acb1b2;
    border: 1px solid #acb1b2;
    box-shadow: none;
    border-radius: 0 15px 15px 0;
}
.nav-link2{
    color: #fff;
}
.nav-link2:hover{
    color: #089aaf;
    transition: 0.3s linear;
}
.nav-link2.active{
    color: #089aaf;
}
.search-filter{
    border-radius: 20px;
    box-shadow: 0 2px 8px 0 rgba(8, 19, 175, 0.15);
    border: solid 1px #d5d5d5;
    background-color: #fff;
    padding: 5px;
}
.search-filter-button{
    background-color: #089aaf;
    color: #fff;
    width: 100%;
}
.search-filter-button:hover{
    background-color: #fff;
    color: #089aaf;
    border: 1px solid #089aaf;
    transition: 0.3s linear;
}
.border-r-1{
    border-right: 1px solid #707070;
}
/* end of engines */

/* not available order */
.stepwizard-step p {
    margin: 10px 5px;
    font-size: 16px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}
.stepwizard-row:before {
    top: 20px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: auto;
    right: 22%;
    left: 14%;
    height: 5px;
    background-color: #089aaf;
    z-order: 0;
}
.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.btn-circle {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    border-radius: 50px;
    background: #b9c7ca;
    border: 1px solid #b9c7ca;
    color: #fff;
    font-weight: 900;
    cursor: default;
}
.btn-circle:hover {
    color: #fff;
}
.active_{
    background: #089aaf;
    border: 1px solid #089aaf;
}



.image-container{
    position: relative;
    border-radius: 8px;
}
.image-container:hover .overlay-div{
    display: block;
    animation-name: example;
    animation-duration: .3s;
    animation-iteration-count: 1;
    top: 0;
}
@keyframes example {
    from {top: 50%;}
    to {top: 0;}
}
.overlay-div{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #089AAF 0% 0% no-repeat padding-box;
    mix-blend-mode: multiply;
    color: #fff;
    display: none;
    border-radius: 8px;
}
.overlay-div p:first-child{
    margin-top: 40%;
    font-weight: bold;
}
.div-of-text{
    background: #fff;
    color: #089AAF;
    padding: 10px 0;
    margin-top: 30px;
    font-weight: bold;
}
.btn-order-spare{
    border-radius: 10px;
    border: solid 2px #089AAF;
    background-color: #fff;
    color: #089AAF;
    width: 100%;
    font-weight: bold;
}
.btn-order-spare:hover{
    border-radius: 10px;
    border: solid 2px #089AAF;
    background-color: #089AAF;
    color: #fff;
}
.btn-order-spare img{
    background-color: #089AAF;
    border-radius: 8px;
}
.must-login-div{
    background: #A6E9BE 0% 0% no-repeat padding-box;
    border: 1px solid #D5D5D5;
    border-radius: 20px;
    padding: 20px;
    font-weight: bold;
}
.send-order-success{
    background: #A6E9BE 0% 0% no-repeat padding-box;
    padding: 20px 6%;
    font-weight: bold;
    position: relative;
}
.send-order-success:after {
    position: absolute;
    top: -14px;
    right: 10%;
    display: inline-block;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #A6E9BE;
    border-left: 15px solid transparent;
    content: '';
}

.send-order-success2{
    background: #C2E6EB 0% 0% no-repeat padding-box;
    padding: 20px 6%;
    font-weight: bold;
    position: relative;
}
.send-order-success2:after {
    position: absolute;
    top: -14px;
    right: 10%;
    display: inline-block;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #C2E6EB;
    border-left: 15px solid transparent;
    content: '';
}

.margin-top-150{
    margin-top: 150px;
}
.border-left-0{
    border-left: 0;
}
.cancel-button{
    background-color: #fff;
    color: #089aaf;
    border: 1px solid #089aaf;
    border-radius: 6px;
    padding: 5px 25px;
}
.cancel-button:hover{
    background-color: #089aaf;
    color: #fff;
    transition: 0.3s linear;
}
/* end of not available order */


/* articles */
.image-height-lg{
    height: 395px;
}
.image-height-sm{
    height: 190px;
}
.article-image-container{
    position: relative;
}
.article-image-container img{
    border-radius: 8px;
    width: 100%;
}
.article-image-container span{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.85;
    background-color: #089aaf;
    border-radius: 0 8px 0 0;
    padding: 5px 10px;
    color: #fff;
    font-size: .7em;
}
.article-image-container i{
    position: absolute;
    top: 40%;
    right: 40%;
    opacity: 0.85;
    background-color: #e6463a;
    border-radius: 50%;
    padding: 25px;
    color: #fff;
}
.article-image-container p{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 7px;
    color: #fff;
    font-weight: 500;
}
.article-image-container small{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
    color: #fff;
    font-size: .7em;
}

.most-read{
    border-radius: 5px;
    background-color: #70797b;
    color: #fff;
    padding: 3px 10px;
}
.most-read-div{
    background-color: #f6f9f9;
    border-radius: 0 8px 8px 0;
    padding-left: 5px;
}
.most-read-div img{
    border-radius: 0 8px 8px 0;
}
.most-read-div-tag{
    opacity: 0.85;
    background-color: #089aaf;
    border-radius: 0 8px 0 8px;
    padding: 5px 10px;
    color: #fff;
    font-size: .7em;
}
.most-read-div-text{
    font-size: .85em;
    margin-top: 10px;
    color: #111;
}

.side-video-div{
    background-color: #2f3334;
    border-radius: 8px;
    padding-left: 5px;
}
.side-video-div img{
    border-radius: 0 8px 8px 0;
}
.side-video-div-tag{
    opacity: 0.85;
    background-color: #089aaf;
    border-radius: 0 8px 0 8px;
    padding: 5px 10px;
    color: #fff;
    font-size: .7em;
}
.side-video-div-text{
    font-size: .85em;
    margin-top: 10px;
    color: #fff;
}
.side-video-div-img-container{
    position: relative;
}
.side-video-div-img-container i{
    position: absolute;
    top: 35%;
    right: 35%;
    opacity: 0.85;
    background-color: #e6463a;
    border-radius: 50%;
    padding: 25px;
    color: #fff;
}
/* end of articles */

/* notifications */
.min-width-450{
    min-width: 450px;
}
.notification-link small{
    color: #A6A7A7;
}
.notification-link p{
    color: #202425;
}
.notification-link .notification-row{
    margin: 0;
    border-radius: 8px;
}
.notification-link:hover .notification-row{
    background-color: #089aaf;
    transition: 0.3s linear;
}
.notification-link:hover small{
    color: #202425;
    transition: 0.3s linear;
}
.notification-link:hover p{
    color: #fff;
    transition: 0.3s linear;
}
.notification-link:hover i{
    color: #fff;
    transition: 0.3s linear;
}
.reading-active{
    background-color: #089aaf;
}
.reading-active small{
    color: #202425;
}
.reading-active p{
    color: #fff;
}
/* end of notifications */

/* profile */
.profile-input span{
    color: #fff;
    border: none;
    height: 50px;
    width: 50px;
    background-color: #089aaf;
}
.profile-input input{
    border-radius: 0;
    border: 1px solid #089aaf;
    height: 50px;
    opacity: 0.45;
    background-color: #fff;
}
.profile-input input:focus{
    box-shadow: none;
    opacity: 1;
    transition: 0.3s linear;
}
.profile-input input::-webkit-outer-spin-button, .profile-input input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.profile-input input[type=number]{
    -moz-appearance: textfield;
}

.image-upload > input
{
    display: none;
}
.image-upload label{
    cursor: pointer;
    background-color: #089AAF;
    color: #fff;
    border: 1px solid #089aaf;
    border-radius: 6px;
    padding: 7px 25px;
}
.image-upload:hover label{
    background-color: #fff;
    color: #089aaf;
    border: 1px solid #089aaf;
}
/* end of profile */

/* my questions */
.accordion-button::after {
    background-image: url(../icons/plus.svg);
}
.accordion-button:not(.collapsed)::after {
    background-image: url(../icons/minus.svg);
    transform: rotate(0deg);
}

.accordion-waiting::after {
    content: "جاري تجهيز الرد";
    padding-top: 25px;
    font-size: .5em;
    color: #acb1b2;
    white-space: nowrap;
    padding-left: 7%;
    background-image: url(../icons/loading.svg);
}
.accordion-waiting:not(.collapsed)::after {
    background-image: url(../icons/loading.svg);
}
.accordion-done::after {
    content: "تم الرد";
    padding-top: 25px;
    font-size: .5em;
    color: #089aaf;
    white-space: nowrap;
    background-image: url(../icons/done.svg);
}
.accordion-done:not(.collapsed)::after {
    background-image: url(../icons/done.svg);
}
/* end of my questions */

/* my orders */
.my-orders-div{
    border-radius: 8px;
    border: solid 1px rgba(112, 121, 123, 0.5);
    padding: 10px 20px;
}
.contact-input{
    height: 50px;
    border-radius: 8px;
    box-shadow: 0 3px 6px 0 rgba(67, 79, 81, 0.1);
    background-color: #f6f9f9;
    border: none;
}
.contact-textarea{
    height: 150px;
    border-radius: 8px;
    box-shadow: 0 3px 6px 0 rgba(67, 79, 81, 0.1);
    background-color: #f6f9f9;
    border: none;
}
.contact-input:focus{
    box-shadow: none;
    border-bottom: 3px solid #ACB1B2;
    transition: 0.5s linear;
}
.contact-textarea:focus{
    box-shadow: none;
    border-bottom: 3px solid #ACB1B2;
    transition: 0.5s linear;
}
.rules-button-100{
    width: 100%;
    border-radius: 6px;
    background-color: #089aaf;
    color: #fff;
    padding: 7px 0;
}
.rules-button-100:hover{
    background-color: #fff;
    color: #089aaf;
    border: 1px solid #089aaf;
    transition: 0.3s linear;
}
.rounded-25{
    border-radius: 25px;
}
.rounded-20-top{
    border-radius: 20px 20px 0 0;
}
.object-fit-cover{
    object-fit: cover;
}
.cancel-button-100{
    width: 100%;
    background-color: #fff;
    color: #089aaf;
    border: 1px solid #089aaf;
    border-radius: 6px;
    padding: 7px 0;
}
.cancel-button-100:hover{
    background-color: #089aaf;
    color: #fff;
    transition: 0.3s linear;
}
/* end of my orders */








.bg-transparent{
    background-color: transparent !important;
}
.bg-grey{
    background-color: #ACB1B2 !important;
}
.bg-light-grey{
    background-color: #f6f9f9 !important;
}
.bg-turquoise-blue{
    background-color: #089aaf !important;
}
.bg-light-turquoise-blue{
    background-color: #a6e9be !important;
}
.grey{
    color: #A6A7A7;
}
.dark-grey{
    color: #202425;
}
.turquoise-blue{
    color: #089aaf;
}
.blue-green{
    color: #12636E;
}

/* responsive */
@media screen and (max-width: 1199px){
    .dropdown-menu:after {
        display: none;
    }
    .dropdown-menu-custom-responsive{
        background: transparent;
        font-size: inherit;
        padding: 0;
        margin: 0;
        border: none;
        text-align: center;
    }
    .dropdown-item{
        color: #fff;
        margin-bottom: 7px;
    }
    .dropdown-item2{
        color: #111;
    }
    .dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
        background-color: transparent;
        color: #089aaf;
    }
    .dropdown-divider{
        display: none;
    }
    .min-width-450{
        min-width: 100%;
    }
    .dropdown-menu-custom-align{
        align-items: inherit !important;
    }

    .login-modal{
        background-image: url("../images/login-bg-small.jpeg");
    }
    .login-modal-body{
        width: 100%;
        padding: 15px;
        background-color: transparent;
    }
    .forgetPassword-modal-body{
        padding: 15px;
    }
}
@media screen and (max-width: 900px) {
    .why-skab-div{
        padding: 5px;
    }
    body{
        font-size: 14px;
    }
    .why-skab{
        font-size: 2.5em;
    }
    .why-skab-answer{
        font-size: 1.5em;
        font-weight: 300;
    }
    #footer{
        padding: 20px 0;
    }
    .advantages-div{
        width: 100%;
    }
    .side-video-div-img-container i{
        top: 35%;
        right: 44%;
    }
    .most-read-div{
        border-radius: 8px;
    }
    .most-read-div img{
        border-radius: 8px;
    }
    .side-video-div img{
        border-radius: 8px;
    }
    .accordion-waiting::after {
        padding-left: 10%;
    }
}
@media screen and (max-width: 400px) {
    .support-div{
        bottom: 0;
        right: 15px;
    }
    .support-open-div{
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .support-open-div p{
        background-color: rgba(255,255,255,1);
        border-radius: 10px;
        box-shadow: none;
        padding: 5px;
    }
    .support-open-div p:hover{
        color: #089aaf;
        box-shadow: 0 5px 5px 0 #eee;
        transition: 0.3s linear;
    }
    .support-border-bottom{
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer-rights{
        font-size: 1em;
        font-weight: normal;
    }
    .footer-rights-div{
        right: 8%!important;
        transform: translateX(0%)!important;
    }
    .accordion-waiting::after {
        padding-left: 15%;
    }
}
/* scroll bar */

/* end of responsive */
::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #e4e4e4;
}
::-webkit-scrollbar {
    width: 3px;
    background-color: #e4e4e4;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #089aaf;
}
/* end of scroll bar */

/* custom inputs */
/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }
/* end of custom inputs */