:root{
    --sp-primary-color: #090E34;
    --sp-cyan-color: #43baff;
    --sp-cyan-dark-color: #0070bf;
    --sp-white-color:#fff;
    --sp-green-color:#00af52;
    --bs-font-sans-serif: cairo, system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
body {
    margin: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--sp-primary-color) !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,h4,h5,h6{
    font-family:bukra, Arial, Helvetica, sans-serif;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.align-justify{
    text-align: justify;
}
.bg-main {
    background-color: var(--sp-primary-color)!important;
}
.btn-main{
    color: var(--sp-white-color);
    background-color: var(--sp-primary-color);
    border-color: #010c60;
}
.btn-main:hover{
    color: var(--sp-white-color);
    background-color: #081049;
    border-color: #010c60;
}
.text-main{
    color: var(--sp-primary-color);
}
.text-green{
    color: var(--sp-green-color);
}
.text-cyan-dark{
    color: var(--sp-cyan-dark-color);
}
html[dir="rtl"] .dropdown-menu[data-bs-popper] {
    left: 0;
    right: unset;
}
.avatar{
    border: #ffffff47 solid 1px !important;
    box-shadow: 0 .25rem 1rem rgba(220,220,220,.15)!important;
}
.carousel-item{
    height: 100vh !important;
    background-size: cover !important;
    background-position: center !important;
}
.bg-c{
    background-color: #ccc;
}
.grow.row{
    --bs-gutter-x: unset;
}
.box{
    /* width: 150px !important;
    height: 150px !important; */
    /* flex: unset; */
    margin-left: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* color: var(--sp-cyan-dark-color); */
    font-size: 1.25rem;
    padding: 1rem;
    border-color: var(--sp-cyan-dark-color) !important;
}

.box:hover{
    background-color: var(--sp-primary-color);
    color: var(--sp-cyan-color);
    transition: all 0.3s linear;
}
.img-grow{
    /* height: 110vh; */
    background-image: url(../img/grow.jpg);
    background-position: bottom;
    background-size: cover;
}

/* serv-box */
.serv-box .card{
    overflow: hidden;
    color: var(--sp-white-color);
    background: rgba(255, 255, 255, .1);
    border-radius: 0 !important;
    border-color: #43baff50;
}
.serv-box .card:hover{
    background: var(--sp-white-color);
    color: var(--sp-primary-color);
    transition: all 0.3s linear;
}
.serv-box .card:hover .icon-main{
    background: var(--sp-cyan-color);
    color: var(--sp-white-color);
}
.serv-box .card h3,.serv-box .card h4,.serv-box .card h5,.serv-box .card h6{
    padding: 6rem 2rem !important;
}
.serv-box-2 .icon-main {
    position: absolute;
    bottom: -88px;
    right: -88px;
    width: 188px;
    height: 188px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    background: rgba(237, 237, 237, 0.15);
}
.serv-box-2 .icon-main, .serv-box .icon-main, .ot-pricing-table .icon-main {
    left: -88px;
    right: auto;
}
.serv-box-2 .icon-main i, .serv-box-2 .icon-main span, .serv-box-2 .icon-main img, .serv-box-2 .icon-main svg {
    position: absolute;
    top: 42px;
    left: 40px;
    font-size: 35px;
    line-height: 1;
}
.serv-box-2 .icon-main i, .serv-box-2 .icon-main span, .serv-box-2 .icon-main img, .serv-box-2 .icon-main svg, .ot-pricing-table .icon-main i, .ot-pricing-table .icon-main span, .ot-pricing-table .icon-main img, .ot-pricing-table .icon-main svg, .serv-box .icon-main i, .serv-box .icon-main span, .serv-box .icon-main img, .serv-box .icon-main svg, .post-box .entry-media .post-cat {
    left: auto;
    right: 40px;
}
/* End serv-box */


/* serv2-box */
.serv2-box .card{
    position: relative;
    overflow: hidden;
    color: var(--sp-white-color);
    background: var(--sp-primary-color);
    border-radius: 0 !important;
    border-color: #43baff50;
    padding: 2rem .5rem;
    min-width: 6rem;
    min-height: 10rem;
    /* transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s); */
    /* width: 190px; height: 150px; */
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .serv2-box .card{
        min-width: 10rem;
        min-height: 10rem;
    }
}

.serv2-box .card:hover{
    background: transparent;
    /* color: var(--sp-primary-color); */
    transition: all 0.3s linear;
    border-color: var(--sp-cyan-color);
}
.serv2-box .card:hover .icon-main{
    /* background: var(--sp-cyan-color); */
    color: var(--sp-cyan-color);
}
.serv2-box .icon-main {
  position: relative;
  color: #7141b1;
  margin-bottom: 15px;
  line-height: 1;
}
.serv2-box h5{
    line-height: 1.75;
}
.serv2-box .card::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    /* left: auto; */
    z-index: 0;
    opacity: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    
}
.serv2-box-2{
    z-index: 1;
}
.serv2-box-2 h5{
    text-shadow: 0 0 5px var(--sp-primary-color), 0 0 5px var(--sp-primary-color);
}
.serv2-box-2::after{
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    top: -15px;
    right: -15px;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: var(--sp-cyan-color);
}
.serv2-box .card:hover .serv2-box-2::after{
    opacity: 1;
    width: 30px;
    height: 30px;
}
.serv2-box .card:hover::before{
    opacity: 1;
}
.srv2-p1::before{
    background-image: url(../img/srv2-p1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.srv2-p2::before{
    background-image: url(../img/srv2-p2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.srv2-p3::before{
    background-image: url(../img/srv2-p3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.srv2-p4::before{
    background-image: url(../img/srv2-p4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.srv2-p5::before{
    background-image: url(../img/srv2-p5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.srv2-p6::before{
    background-image: url(../img/srv2-p6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* End serv2-box */


/* serv3-box */
.serv3-box .card{
    overflow: hidden;
    color: var(--sp-primary-color);
    background: var(--sp-white-color);
    border-radius: 0 !important;
    border-color: #43baff;
    height: 260px;
}
.serv3-box .card:hover{
    background: rgba(255, 255, 255, .1);
    color: var(--sp-white-color);
    border-color: #43baff50;
    transition: all 0.3s linear;
}
.serv3-box-3 p{
    /* display: none; */
    padding: 0 5px;
}
.serv3-box .card:hover p{
    /* padding: 21px 0; */
    transition: all 0.5s linear;
}
.serv3-box .card:hover h5{
    /* display: none; */
    transition: all 0.3s linear;
}
.serv3-box .card:hover .icon-main{
    /* background: var(--sp-cyan-color); */
    color: var(--sp-cyan-color);
}
.serv3-box .card h3,.serv3-box .card h4,.serv3-box .card h5,.serv3-box .card h6{
    padding: 10px 2rem 10px !important;
}
.serv3-box-3 .icon-main{
    color: var(--sp-cyan-dark-color);
    /* background: var(--sp-cyan-color);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    margin-left: 25%;
    margin-right: 25%; */
}
.serv3-box-3 .icon-main i, .serv3-box-3 .icon-main span, .serv3-box-3 .icon-main img, .serv3-box-3 .icon-main svg {
    /* position: absolute;
    top: 42px;
    left: 40px; */
    margin-top: 10px;
    font-size: 55px;
    line-height: 1;
    border-radius: 50%;
}
.serv3-box-3::after{
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    bottom: -25px;
    left: -25px;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: var(--sp-cyan-color);
}
.serv3-box .card:hover .serv3-box-3::after{
    opacity: 1;
    width: 50px;
    height: 50px;
}
/* END serv3-box */

.row-handshak *{
    position: relative;
    z-index: 1;
}
.row-handshak dd{
    padding-left: 2.5rem;
}
html[dir="rtl"] .row-handshak dd{
    padding-right: 2.5rem;
}
.py-5-r{
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
nav{
    position: fixed !important;
    top: 0;
    right: 0;
    height: 75px;
    left: 0;
    z-index: 999;
    background: var(--sp-primary-color);
    box-shadow: 0 0 3px #ffffff40;
}

.project-card-body p{
    /* width:100%; */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    background:#fff;
    height: 8rem;
}

.project-card-body h6{
    height: 3rem;
    line-height: 1.5;
}

.subscription .card-head{
    height: 7rem;
    --bs-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
.subscription .card-head.bg-primary.bg-gradient{
    --bs-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    background-color: var(--sp-cyan-dark-color) !important;
}
.subscription .card-head.bg-primary-1.bg-gradient{
    --bs-gradient: linear-gradient(0deg, var(--sp-primary-color), rgba(255, 255, 255, 0));
    background-color: var(--sp-cyan-dark-color) !important;
}
.subscription i::before{
    border: 2px #00aa51 solid;
    border-radius: 50%;
    font-size: 12px;
    padding: 0.2rem;
    color: #00af52;
}
.subscription .card-body{
    text-align: left;
    padding-left: 2rem;
    padding-right: 2rem;
    min-height: 23rem;
}
html[dir="rtl"] .subscription .card-body{
    text-align: right;
}
.subscription .card-body p{
    padding: 1rem 0;
    margin: unset;
}
.subscription .card-body p:not(:last-child){
    border-bottom: #ccc 1px solid;
}
.subscription a.btn{
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}
.subscription a.btn.btn-primary-1.bg-gradient{
    --bs-gradient: linear-gradient(180deg, var(--sp-primary-color), rgba(255, 255, 255, 0));
}
@media only screen and (max-width:767px) {
    .section-project{
        margin-top: 5rem;
    }
}
.section-project{
    padding-top: 5rem;
}
@media only screen and (min-width:768px) {
    .subscription .mt-md-5{
        margin-top: 4rem !important;
    }
}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}  
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: -1px;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}