<<<<<<< HEAD
html{
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
    direction: rtl;
    overflow-x: hidden;
}
.empty-section{
    min-height: 500px;
}
textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:none !important;
    -webkit-appearance:none;
    box-shadow: none !important;

}
button:focus, input:focus, a:focus{
    outline: none;
}
/*fonts*/
@font-face {
    font-family: Cairo;
    src: url(../assets/fonts/Cairo-Regular.ttf);
}
@font-face {
    font-family: CairoBold;
    src: url(../assets/fonts/Cairo-SemiBold.ttf);
}
a{
    text-decoration: none!important;
}
p,button,label,h2,h3,h4,h5,h6,.nav-link,input,textarea{
    font-family: Cairo!important;
}
h1{
    font-family: CairoBold;
}
.mx-w{
    max-width: 100%;
}
.w-fit{
    width: fit-content!important;
}
.parallax {
  min-height: 550px; 
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: auto;
}
.col-img{
    width: 100%;
    margin: auto;
}
section{
    padding: 50px 0;
}
.max-w-90{
    max-width: 90%;
    height: auto;
    text-align: center;
}

/*colors*/
.text-yellow{
    color: #FFC825!important;
}
.text-blue{
    color: #0D47A1!important;
}
.text-grey{
    color: #7E7E7E!important;
}

.bg-blue{
    background-color: #041C34!important;
}
.bg-yellow{
    background-color: #FFC107!important;
}
.bg-grey{
    background-color: #F3F3F3!important;
}


/*Navbar*/
.karagak-small-logo{
    width: 50px;
    transition: bottom 0.8s;
}

.scrolled{
    background-color: #ffffff;
    padding: 5px 0;
}
.karagak-nav{
    justify-content: space-around;
    
}
.karagak-nav .nav-link{
    color: #0D47A1;
    font-family: Cairo;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
.karagak-nav .nav-item .active{
    border-bottom: solid 3px #FFC825;
    width: fit-content;
}

.karagak-btn{
    min-width: 100px;
    border-radius: 20px;
    padding: 5px 20px;
}

.about-img{
    width: 300px;
    height: auto;
}
.dot:before {
    content:"\A";
    width:80px;
    height:80px;
    border-radius:50%;
    background: #FFC825;
    display:inline-block;
    position: absolute;
    z-index: -1;
    margin:-18px -5px;
}


.footer-nav li a{
    color: #ffffff!important;
    border-bottom: 1px solid #ffffff;
    margin: 0 20px;
    padding: 0;
    width: fit-content;
}

.downlad-app-btn{
    width: 170px;
    height: 50px;
}

.home{
    background-image: url('../img/home.png');
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
}
.home h1{
    margin-top: 150px;
}
.about{
    background-image: url('../img/about.png');
    padding: 120px 0;
    background-size: contain;
    background-repeat: no-repeat;
}
.download-app{
    background-image: url('../img/download-app.png');
    background-position: center;
    padding: 0;

}
.download-app .hand{
    width: 450px;
    height: auto;
}
.contact{
    background-image: url('../img/contact-bg.png');
    background-position: center;
    padding: 150px 0;
}
.contact-form{
    background-color: #F3F3F3;
    padding: 40px;
    border-radius: 20px;
}
.contact-form .form-control{
    margin: 20px 0;
}

.text-num{
    direction: ltr;
}
.text-num span{
    color: #FFAE19;
    padding-left: 10px;
}
.app-explained{
    background-image: url('../img/app-explained.png');
    background-position: left;
    background-color: #F3F3F3;
    padding: 100px 0;
}

.small-dot:before {
    content:"\A";
    width:40px;
    height:40px;
    border-radius:50%;
    background: #FFC825;
    display:inline-block;
    position: absolute;
    z-index: -1;
    margin: 1px -5px;
}
.icon{
    width: 50px;
}
.karagak-pills li a{
    color: #FFC107;
    padding-left: 0;
    padding-right: 0;
    margin: 20px;
}
.karagak-pills li .active{
    color: #FFC107!important;
    background-color: transparent!important;
    border-bottom: 1px solid #0D47A1;
    width: fit-content;
    border-radius: 0;
}
.tab-img{
    width: auto;
    height: 300px;
}
/*Large Screen Style*/
@media(max-width: 1200px){

}
/*Medium Screen Style*/
@media(max-width: 768px){
    
}
/*Small Screen Style*/
@media(max-width: 600px){
    .karagak-pills li a{
        margin: 5px!important;
    }
    .app-explained{
        background-image: unset!important;
    }
    .tab-img {
        width: 100%;
        height: auto;
    }
    .about{
        padding: 50px 0;
        background-image: unset!important;
    }
    nav{
        background-color: #ffffff;
    }
    .home{
        background-image: unset!important;
    }
    .nav-item{
        margin: auto;
    }
    .navbar-light .navbar-toggler{
        border-color: transparent;
    }
    .home h1 {
        margin-top: 65px;
    }
=======
html{
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
    direction: rtl;
    overflow-x: hidden;
}
.empty-section{
    min-height: 500px;
}
textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:none !important;
    -webkit-appearance:none;
    box-shadow: none !important;

}
button:focus, input:focus, a:focus{
    outline: none;
}
/*fonts*/
@font-face {
    font-family: Cairo;
    src: url(../assets/fonts/Cairo-Regular.ttf);
}
@font-face {
    font-family: CairoBold;
    src: url(../assets/fonts/Cairo-SemiBold.ttf);
}
a{
    text-decoration: none!important;
}
p,button,label,h2,h3,h4,h5,h6,.nav-link,input,textarea{
    font-family: Cairo!important;
}
h1{
    font-family: CairoBold;
}
.mx-w{
    max-width: 100%;
}
.w-fit{
    width: fit-content!important;
}
.parallax {
  min-height: 550px; 
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: auto;
}
.col-img{
    width: 100%;
    margin: auto;
}
section{
    padding: 50px 0;
}
.max-w-90{
    max-width: 90%;
    height: auto;
    text-align: center;
}

/*colors*/
.text-yellow{
    color: #FFC825!important;
}
.text-blue{
    color: #0D47A1!important;
}
.text-grey{
    color: #7E7E7E!important;
}

.bg-blue{
    background-color: #041C34!important;
}
.bg-yellow{
    background-color: #FFC107!important;
}
.bg-grey{
    background-color: #F3F3F3!important;
}


/*Navbar*/
.karagak-small-logo{
    width: 50px;
    transition: bottom 0.8s;
}

.scrolled{
    background-color: #ffffff;
    padding: 5px 0;
}
.karagak-nav{
    justify-content: space-around;
    
}
.karagak-nav .nav-link{
    color: #0D47A1;
    font-family: Cairo;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
.karagak-nav .nav-item .active{
    border-bottom: solid 3px #FFC825;
    width: fit-content;
}

.karagak-btn{
    min-width: 100px;
    border-radius: 20px;
    padding: 5px 20px;
}

.about-img{
    width: 300px;
    height: auto;
}
.dot:before {
    content:"\A";
    width:80px;
    height:80px;
    border-radius:50%;
    background: #FFC825;
    display:inline-block;
    position: absolute;
    z-index: -1;
    margin:-18px -5px;
}


.footer-nav li a{
    color: #ffffff!important;
    border-bottom: 1px solid #ffffff;
    margin: 0 20px;
    padding: 0;
    width: fit-content;
}

.downlad-app-btn{
    width: 170px;
    height: 50px;
}

.home{
    background-image: url('../img/home.png');
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
}
.home h1{
    margin-top: 150px;
}
.about{
    background-image: url('../img/about.png');
    padding: 120px 0;
    background-size: contain;
    background-repeat: no-repeat;
}
.download-app{
    background-image: url('../img/download-app.png');
    background-position: center;
    padding: 0;

}
.download-app .hand{
    width: 450px;
    height: auto;
}
.contact{
    background-image: url('../img/contact-bg.png');
    background-position: center;
    padding: 150px 0;
}
.contact-form{
    background-color: #F3F3F3;
    padding: 40px;
    border-radius: 20px;
}
.contact-form .form-control{
    margin: 20px 0;
}

.text-num{
    direction: ltr;
}
.text-num span{
    color: #FFAE19;
    padding-left: 10px;
}
.app-explained{
    background-image: url('../img/app-explained.png');
    background-position: left;
    background-color: #F3F3F3;
    padding: 100px 0;
}

.small-dot:before {
    content:"\A";
    width:40px;
    height:40px;
    border-radius:50%;
    background: #FFC825;
    display:inline-block;
    position: absolute;
    z-index: 0;
    margin: 1px -5px;
}
.small-dot span{
    position: relative;
    margin-right: 11px;
}
.icon{
    width: 50px;
}
.karagak-pills li a{
    color: #FFC107;
    padding-left: 0;
    padding-right: 0;
    margin: 20px;
}
.karagak-pills li .active{
    color: #FFC107!important;
    background-color: transparent!important;
    border-bottom: 1px solid #0D47A1;
    width: fit-content;
    border-radius: 0;
}
.tab-img{
    width: auto;
    height: 300px;
}
/*Large Screen Style*/
@media(max-width: 1200px){

}
/*Medium Screen Style*/
@media(max-width: 768px){
    
}
/*Small Screen Style*/
@media(max-width: 600px){
    .karagak-pills li a{
        margin: 5px!important;
    }
    .app-explained{
        background-image: unset!important;
    }
    .tab-img {
        width: 100%;
        height: auto;
    }
    .about{
        padding: 50px 0;
        background-image: unset!important;
    }
    nav{
        background-color: #ffffff;
    }
    .home{
        background-image: unset!important;
    }
    .nav-item{
        margin: auto;
    }
    .navbar-light .navbar-toggler{
        border-color: transparent;
    }
    .home h1 {
        margin-top: 65px;
    }
>>>>>>> 7d5ed03499eadd825e63f0ed6c1d4ad29c786e62
}