@import url('https://fonts.googleapis.com/css?family=Cairo');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body,
html {
    overflow-x: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.container {
    width: 100%;
}

ul,
li {
    list-style: none;
}

h1 {
    font-size: 60px;
    font-family: cairo, sans-serif;
}

h2 {
    font-size: 58px;
     font-family: cairo, sans-serif;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 12px;
}

p {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 20px;
}

body {
    margin: 0px;
    padding: 0px;
    color: #4c4c4c;
}

strong {
    font-weight: 600;
}

a {
    color: #808184;
    text-decoration: none;
}

a:active {
    color: #4cad4d;
}

a:hover {
    color: #4cad4d;

    text-decoration: none;
}

.scrollup {
    position: fixed;
    right: 35px;
    text-align: center;
    bottom: 10%;
    color: #fff !important;
    font-weight: normal;
    text-decoration: none;
    border-radius: 0%;
    background: #4ead4f;
    width: 40px;
    height: 40px;
    padding: 0px 8px 6px;
    font-size: 32px;
    opacity: 1 !important;
    z-index: 999;
    display: block;
    line-height: 30px;
}

/* ------------------------ intro ------------------------ */
.menu-pad {
    padding: 10%;
}

.intro {
    background-image: url(../img/developers-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
}

.menu a {
    color: #fff;
}

.logo {
    margin: 30px 42px;
    width: 12%;

}

.nav-btn {
    z-index: 55;
    border: none;
    position: fixed;
    background-color: #343a40;
    padding: 19px 24px;
    border-radius: 0;
}

.navbar-toggler {
    font-size: 2.5rem;
    border: 0px solid transparent;
}

.nav-bg {
    float: right;
    margin: 30px 61px;
}

.menu {
    display: inline-block;
}

.colps-menu {
    position: relative;
    z-index: 1;
    margin: -5px -15px;
}

.menu-icon {
    width: 45px;
}

.green-bg {
    background-color: rgba(76, 173, 77, 0.6);
    margin: 0px 0px 0px 50%;
    width: 100%;
    height: 100%;
    position: absolute;
}

.bg-dark {
    background-color: #343a40 !important;
    text-align: center;
    padding: 0px 37px 0px 11px;
    margin: -115px -15px -6px -15px;
    position: absolute;
    width: 100%;
    z-index: 50;

}

.intro li {
    padding: 0px;
}

.intro a {
    color: #fff;
}

.separator {
    background-color: rgba(255, 255, 255, 0.3);
    margin: 15px -100px;

}


.intro a:hover {
    color: rgb(76, 173, 77);
}

.white-frame {
    border: 6px #ccc solid;
    background-color: transparent;
    margin: 17% 10% 17% -25%;
    padding: 17% 0px 17% 30%;
}

.green-bg p {
    color: #fff;
}

.b-80 {
    font-size: 60px;
    font-weight: 800;
    line-height: 60px;
}

.b-100 {
    font-size: 70px;
    font-weight: 800;
    line-height: 60px;
}

.b-120 {
    font-size: 90px;
    font-weight: 800;
    line-height: 60px;
}

.r-80 {
    font-size: 60px;
    line-height: 60px;
}

.r-60 {
    font-size: 50px;
    line-height: 60px;
}

.r-48 {
    font-size: 40px;
    line-height: 60px;
}

/* ------------------------ about ------------------------ */
.title {
    transform: rotate(-90deg);
    margin: 260px 0px 0px 60px;
    color: rgb(76, 173, 77);
    line-height: 45px;
}

.title-white {
    transform: rotate(-90deg);
    margin: 200px 0px 0px 60px;
    color: #fff;
    line-height: 45px;

}

.title-white span {
    font-size: 37px;
    font-weight: 700;
}

.title span {
    font-size: 37px;
    font-weight: 700;
}

.abou-tit {
    margin: 0px -25px;
}

.about p {
    font-size: 20px;
    padding: 130px 50px 50px 50px;
}

.abou-row {
    margin: 40px 0px;
}

.abou-icon {
    margin: -15px -15px -15px 0px;
    padding: 0px 35px;
    width: 100%;
}

.a-icon {
    width: 145%;
    margin: 10px 0px;
}

.abou-img {
    padding: 65px 0px 85px 0px;
    width: 89%;
}

.abou-frame {
    border: 6px #ccc solid;
    background-color: transparent;
    padding: 40% 41%;
    margin: 90px -35px 0px -35px;
    position: absolute;
    z-index: 1;
}

/* ------------------------ services ------------------------ */
.services {
    padding-bottom: 100px;
}

.services h1 {
    padding-top: 50px;
}

.serv-frame {
    border: 10px #808184 solid;
    background-color: transparent;
    text-align: center;
    margin: 38px 0px 0px 0px;
    padding: 20% 0;
    height: 100%;
}

.serv-img {
    width: 35%;
    width: 85px;
    padding-bottom: 25px;
}

.prod {
    margin: 25px 75px;
}

.buss-sys {
    margin: 25px -185px;
}

/* ------------------------ work ------------------------ */
.work {
    padding-bottom: 100px;
}

.work-tit {
    margin: -85px 0px;
}

.work ul {
    margin: 20% 0px 0px 0px;
    /* padding: 0px 30%; */
}

.work img {
    padding: 15px 0px;
    width: 100%;
}

.work-right {
    text-align: right;
}

.work-center {
    text-align: center;
}

.work-gray {
    filter: grayscale(100%)
}

.work-gray:hover {
    filter: grayscale(0%)
}

.gallery-title {
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}

.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}

.filter-button {
    font-size: 28px;
    font-weight: 700;
    border: none;
    border-radius: 0px;
    text-align: center;
    color: #808184;
    margin-bottom: 30px;
    background-color: transparent;


}

.filter-button:hover,
.filter-button:active,
.filter-button:focus {
    font-size: 28px;

    font-weight: 700;
    border: 0px;
    border-radius: 0px;
    text-align: center;
    color: rgb(76, 173, 77);
    background-color: transparent;

}


.port-image {
    width: 100%;
}

.gallery_product {
    margin-bottom: 30px;
}

/* ------------------------ prize------------------------ */
.prize-pos {
    text-align: center;
}

.prz-tit {
    margin: -125px -25px;
}

.prize-img {
    width: 100%;
    max-width: 450px;
    float: right;
    margin: 0px -50px 0px 0px;
    padding-top: 2rem;
}

.prize-frame {
    width: 90%;
    border: 8px #4cad4d solid;
}

.light-frame {
    border: 8px #ccc solid;
    padding: 40% 40%;
    margin: -7% -2%;
    position: absolute;
    z-index: 1;
}

/* ------------------------ tech------------------------ */
.tech {
    margin-bottom: 100px;
    margin-top: 100px;
}

.tech-color h2 {
    color: #fff;
}

.tech-bg {
    background-image: url("../img/tech.jpg");
    background-repeat: no-repeat;
    width: 100%;

}

.tech-tit {
    margin: 0px -35px;
    padding: 36% 0% 0%;
    position: relative;
    z-index: 0;
}

.tech-logos img {
    max-width: 100%;
    width: 200px;
}

.tech-logo {
    padding: 45px 0;
    z-index: -11;
}

.gray-frame {
    border: 8px #ccc solid;
    padding: 10% 10% 10% 9%;
    margin: -630px 28%;
    z-index: 0;

}

.tec-txt {
    width: 105%;
    position: absolute;
    margin: -450px 115px;
}

/* ------------------------ partners------------------------ */
.part {
    padding: 1% 0% 2% 0%;
}

.part img {
    width: 100%;
     max-width: 400px;
}

.hand-frame {
    border: 8px #ccc solid;
    padding: 40% 40%;
    margin: 7% -6%;
    position: absolute;
    z-index: -1;
}

.part-frame {
    border: 8px #4cad4d solid;
    padding: 0%;

}

.part-pos {
    margin: 0% 0% 0% -30px;
}

.part-pos img {
    width: 100%;
}

.part-img {
    margin: 10% 15% 25% 15%;
    width: 100%;
}

.part-pos h3 {
    padding: 0% 0%;
    margin: 0% 0px 18px 0px;
    text-align: center;
}

/* ------------------------ clients------------------------ */
.client {
    background-image: url(../img/clients.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.client-tit {
    padding-top: 0%;
}

.client ul {
    padding: 8% 0px;
}

.client ul li img {
    padding: 20% 0px;
    /*        width: 100%;*/
}

/* ------------------------ contacts ------------------------ */
.contacts {
    background-color: #222;
    margin-top: 0%;
}

.cont-row {
    padding: 0px 0px 4% 0px;
}

.cont-tit {
    padding-top: 12%;
}

.cont-top ul {
    margin-top: 33%;
}

.contacts h3 {
    color: #fff;
    padding-bottom: 20%;
}

.contacts h4 {
    color: #fff;
    padding-bottom: 4%;
}

.contacts h5 {
    color: #fff;
    padding-bottom: 14%;
}


#map {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0px 10px 0px 10px;
}

.contacts-frame {
    border: 8px #ccc solid;
    padding: 1% 1%;
    margin: 7% -10% 6% 10%;
    z-index: 5;
    position: relative;
}

.cont-bg {
    background-image: url(../img/contacts.jpg);
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    margin: 0px -15px;
}

.cont-c-bg {
    background-color: rgba(53, 53, 53, 0.85);
    padding-bottom: 25px;
}

.cont-a {
    color: #fff;
}

.copy-right {
    margin: 25% 0% 50% -33%;
}

/*-------------------------------------------------------Start-Product----------------------------------------------------*/
.product img {
    width: 100%;
}

.product h3 {
    color: #4d4d4d;
    padding: 40px 0px;
    text-align: center;
    font-size: 40px;
    font-family: 'Cairo';

}

.pro-logo {
    width: 80%;
    padding: 0% 0% 10% 0%;
    display: block;
    margin: 0 auto;
}


.pro-p {
    padding: 0% 0%;
    font-size: 22px;
}

.pro-li {
    padding-bottom: 20px;
}

.pro-details {
    padding: 0% 0% 5% 0%;
    font-size: 16px;
    color: #808184;
}

.pro-btn {
    z-index: 55;
    border: none;
    background-color: #d0d0d0;
    padding: 15px 50px;
    border-radius: 0;
    font-weight: 600;
    color: #4d4d4d;
    cursor: pointer;

}

.pro-btn:hover {
    background-color: #4d4d4d;
    color: #fff;
    font-weight: 600;
}

.gallery {
    padding: 5% 0px;
}

.gallery img {
    width: 100%;
    height: 100%;
}

.gallery-padd {
    padding: 0px;
}

.paging {
    background-color: #efefef;
    padding: 3%;
    margin: 0px 0px 5% 0px;
}

/*-------------------------------------------------------End-Product----------------------------------------------------*/
/*--------------------------------------------------------Start-K2l-----------------------------------------------------*/
.banner {
    background-image: url(../img/k2l/bunner.html);
    width: 100%;
    background-repeat: no-repeat;
}

.k2l-logo {
    width: 70%;
    margin-top: 35%;
}

.k2l-tit {
    padding-bottom: 35%;
    font-size: 40px;
}

.k2lmenu {
    padding: 2% 0px 0px;
    text-align: center;
}

.k2lmenu li {
    display: inline-block;
    padding: 1%;
}

.rainbow {
    background-image: url(../img/k2l/rainbow.jpg);
    height: 5px;

}

.k2l-about {
    background-image: url(../img/k2l/tri.jpg);
}

.tri {
    position: absolute;
    margin: 0px -15px;
}

.tri1 {
    position: absolute;
    margin: -4px 9px;
    width: 98.9%;
}

.mob {
    width: 50%;
    position: absolute;
    z-index: 1;
    margin: 22%;
}

.lap {
    position: absolute;
    z-index: 1;
    margin: 10% -15px;
}

.k2l-about h1 {
    padding-top: 10%;
}

.student {
    padding-bottom: 40%;
    width: 100%;
}

.student-txt h4 {
    font-size: 20px;
}

.txt-in {
    margin: 5% 0pc 10% -20%;
}

.txt-out {
    margin: 5% 0pc 9% -5%;
}

/*---------------------------------------------------------End-K2l-----------------------------------------------------*/
/*---------------------------------------------------------Start-coming-soon-----------------------------------------------------*/

.coming-soon {
    width: 70%;
    margin: -60px 16% 0px;
}

/*---------------------------------------------------------End-coming-soon-----------------------------------------------------*/

@media screen and (max-width : 1200px) {
    .a-icon {
        width: 190%;
        margin: 10px 0px;
    }
}

@media screen and (max-width : 1024px) {
    .coming-soon {
        width: 70%;
        margin: 250px 16% 0px;
    }

    .menu-pad {
        padding: 45% 0px;
    }

    .a-icon {
        width: 300%;
        margin: 10px 0px;
    }

    .client-logo{
        padding: 0 !important;
        margin-bottom: 20px;
    }
}

@media screen and (max-width : 992px) {
    .menu-pad {
        padding: 18% 10%;
    }

    .logo {
        margin: 30px 42px;
        width: 15%;
        position: absolute;
        z-index: 1;
    }


    .white-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        margin: 29% 3% 17% -19%;
        padding: 20% 0px 20% 19%;
    }

    .a-icon {
        width: 130%;
        margin: 10px 0px;
    }

    .title {
        transform: rotate(-90deg);
        margin: 135px 0px 0px 60px;
        color: rgb(76, 173, 77);
        line-height: 45px;
    }

    .about p {
        font-size: 20px;
        padding: 30px 50px 50px 50px;
    }

    .abou-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        padding: 40% 41%;
        margin: 90px 35px 0px 35px;
        position: absolute;
    }

    .abou-img {
        padding: 65px 0 85px 0px;
        width: 87%;
        margin: -15px 65px;
    }


    .prod {
        margin: 25px 35px;
    }

    .buss-sys {
        margin: 25px -55px;
    }

    .serv-frame h3 {
        font-size: 18px;
    }

    .serv-tit {
        margin: 65px -25px 0px;
    }

    .light-frame {
        border: 8px #ccc solid;
        padding: 38% 38%;
        margin: -7% -2%;
        position: absolute;
    }

    .gray-frame {
        border: 8px #ccc solid;
        padding: 0% 71% 0% 6%;
        margin: -699px 34%;
        z-index: 5;
    }

    .work-tit {
        margin: -40px 0px 0px;
    }

    .work ul {
        margin: 4% 0px 0px 0px;
        padding: 0px 30%;
    }

    .prize-pos {
        margin-top: -30px;
        text-align: center;
    }

    .prize-img {
        width: 80%;
        float: right;
        margin: -30px -50px 0px 0px;
    }

    .prz-tit {
        margin: -50px -25px;
    }

    .title-white {
        transform: rotate(-90deg);
        margin: -45px 0px 0px 60px;
        color: #fff;
        line-height: 45px;
        font-size: 48px;
    }

    .tech {
        margin-bottom: 120px;
        margin-top: 120px;
    }

    .tech-logo {
        padding: 15px;
        z-index: -11;
    }

    .tech-logo img{
        width:200px;
    }
    
    .tech-tit {
        margin: 63px -35px -312px;
        padding: 308px 0%;
        position: relative;
        z-index: 2;
    }

    .tech-h2 {
        font-size: 28px;
    }

    .tec-txt {
        width: 200%;
        position: absolute;
        margin: -365px 95px;
    }

    .part-tit {
        margin: 60px 0px;
    }

    .white-text {
        margin: 20px 20px;
    }

    h2 {
        font-size: 36px;
    }

    .client-tit {
        margin-top: 20%;
    }

    .client-marg {
        margin-left: 29%;
    }

    .client-padd {
        margin-top: -8.6%;
    }

    .client ul {
        padding: 0% 0px;
    }

    .client-bgc {
        padding: 20px 0px 0px 0px;
        margin-top: 5%;
    }

    .l-5 {
        margin-top: 48px;
    }

    .contacts ul {
        padding: 4% 0% 0% 50%;
    }

    .cont-top {
        margin-top: 49px;
    }

    .cont-top ul {
        margin-top: 15%;
    }

    .cont-bg {
        background-image: url(../img/contacts.jpg);
        background-repeat: no-repeat;
        position: relative;
        background-size: cover;
        margin: -49px -15px;
    }

    .egypt {
        padding-top: 43%;
    }

    .ksa {
        margin-top: -25px;
    }

    .ksa-pad {
        padding: 9.5% 0% 0% 0%;
    }

    .site {
        margin-bottom: 35%;
    }

    .copy-right {
        margin: 35% 0% 0% 0%;
    }

    .contacts-frame {
        border: 8px #ccc solid;
        padding: 1% 1%;
        margin: 12% -10% 20% 10%;
        z-index: 5;
        position: relative;
    }

    .cont-tit {
        padding-top: 32%;
    }

    .coming-soon {
        width: 70%;
        margin: 25px 16% 0px;
    }

}

@media screen and (max-width : 768px) {
    .menu-pad {
        padding: 49% 10%;
    }

    .title {
        transform: rotate(-90deg);
        margin: 140px 0px 0px 60px;
        color: rgb(76, 173, 77);
        line-height: 45px;
    }

    .serv-tit {
        margin: 55px -25px;
    }

    .work-tit {
        margin: -35px 0px;
    }

    .about p {
        font-size: 20px;
        padding: 0px 0px 5px 50px;
    }

    .logo {
        margin: 30px 42px;
        width: 20%;
        position: absolute;
        z-index: 1;
    }

    .white-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        margin: 55% 11% 17% 11%;
        padding: 11% 0px 11% 5%;
    }

    .abou-icon {
        margin: -5px 0px;
        padding: 0px 35px;
    }

    .a-icon {
        width: 85%;
        margin: 20px 31px;
    }

    .abu-text {
        padding-top: 20px;
    }

    .abou-row {
        margin: 0px 0px;
    }

    .abou-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        padding: 39% 41%;
        margin: 72px 35px 0px 35px;
        position: absolute;
    }

    .prod {
        padding: 0px 100px;
        margin: 25px 0px;
    }

    .buss-sys {
        padding: 0px 100px;
        margin: 25px 0px;
    }

    .services {
        padding-bottom: 50px;
    }

    .serv-img {
        width: 25%;
    }

    .serv-frame {
        margin: 10px 0px 0px 0px;
    }

    .work ul {
        margin: 0%;
        padding: 0px 37%;
    }

    .work img {
        padding: 15px 0px;
        margin: 0px 50px;
        width: 85%;
    }

    .work-center {
        text-align: start;
    }

    .work-right {
        text-align: start;
    }

    .prize-pos {
        text-align: center;
        padding: 10% 10% 50% 10%;
    }

    .prize-img {
        width: 70%;
        margin: -65px 35px 0px 0px;
    }

    .light-frame {
        border: 8px #ccc solid;
        padding: 33% 33%;
        margin: -5% -1%;
        position: absolute;
    }

    .gray-frame {
        border: 8px #ccc solid;
        padding: 6% 53% 6% 8%;
        margin: -85% 22%;
        position: absolute;
    }

    .prize-pos {
        text-align: center;
        padding: 10% 10% 0% 10%;
    }

    h2 {
        font-size: 32px;
    }

    .tech-logo ul {
        text-align: center;
        padding: 0% 10%;
    }

    .tech-h2 {
        font-size: 44px;
    }

    .tech-tit {
        margin: 16px -65px -173px;
        padding: 308px 0%;
        position: relative;
        z-index: 2;
    }

    .tec-txt {
        width: 150%;
        position: absolute;
        margin: -455px 95px;
    }

    .part-img {
        margin: -11px 0px 26px;
        padding: 0% 15% 10% 15%;
        width: 100%;
    }

    .part-pos img {
        width: 85%;
    }

    .client ul li img {
        padding: 17% 0px;
    }

    .client-tit {
        margin-top: 26%;
    }

    .client ul {
        padding: 0px 0px;
        margin: auto;
    }

    .client-padd {
        margin-top: -6%;
    }

    .client-bgc {
        padding: 40px 0px 40px 0px;
    }

    .logo-1 {
        margin-top: -6%;
    }

    .contacts-frame {
        border: 8px #ccc solid;
        padding: 1% 1%;
        margin: 7% 0% -20% 0%;
        z-index: 5;
        position: relative;
    }

    .contacts ul {
        padding: 25% 0% 0% 34%;
    }

    .cont-bg {
        background-image: url(../img/contacts.jpg);
        background-repeat: no-repeat;
        position: relative;
        background-size: cover;
        margin: 22px -15%;
    }

    .egypt {
        padding-top: 5%;
    }

    .contacts h3 {
        color: #fff;
        padding-bottom: 5%;
    }

    .contacts h5 {
        color: #fff;
        padding-bottom: 5%;
    }

    .ksa {
        margin-top: -80px;
    }

    .site {
        margin-bottom: 0%;
    }

    .copy-right {
        margin: 0% 0% 0% -10%;
    }

    .green-bg {
        margin: 0px 0px 0px 0%;
    }

    /*-----------------------------------------product------------------------------------------------*/
    .product h3{
        padding: 20px 0px 0px;
        font-size: 30px;
    }
    .pro-p {
        font-size: 16px;
    }

    .pro-info {
        margin-left: 50px;
    }

    .coming-soon {
        width: 70%;
        margin: 120px 16% 0px;
    }
    .fa-4x{
        font-size: 2em;
    }
    .h3{
        font-size: 20px;
    }
}

@media screen and (max-width : 576px) {

    .menu-pad {
        padding: 60% 10%;
    }

    .intro ul li h3 {
        font-size: 20px
    }

    .logo {
        margin: 30px 42px;
        width: 30%;

    }

    .white-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        margin: 35% 11% 17% 11%;
        padding: 11% 0px 11% 5%;
    }

    .about p {
        font-size: 20px;
        padding: 0px 0px 50px 80px;
        margin: -22% 0% 0% 0%;
    }

    .title {
        margin: 0px -40px;
        position: relative;
        float: left;
        font-size: 50px;
    }

    .abou-tit {
        margin: -64px -25px;
    }

    .about {
        padding: 25% 0% 20%;
    }

    .title {
        margin: 0px -13px;
        padding: -18% 0px;
        position: relative;
        float: left;
        line-height: 1;
        font-size: 34px;
    }

    .abou-icon {
        text-align: center;
        margin-bottom: -44px;
    }

    .a-icon {
        width: 35%;
        margin: 35px 15px 60px;
    }

    .abu-text {
        text-align: center;
        padding-top: 0px;
        margin: 0px 0% 50px 0%;
    }

    .services h1 {
        padding: 0%;
    }

    .team {
        margin-right: 35px;
    }

    .buss-sys {
        padding: 0px 70px;
        margin: 10px 10px;
    }

    .serv-frame h3 {
        font-size: 18px;
    }

    .serv-frame {
        border: 7px #808184 solid;
        background-color: transparent;
        text-align: center;
        margin: 38px 0px 0px 0px;
    }

    .title span {
        font-size: 27px;
        font-weight: 900;
    }

    .prod {
        padding: 15px 70px;
        margin: 3px 10px 0px 0px;
    }

    .work-tit {
        margin: 30px 0px;
    }

    .work img {
        padding: 15px 0px;
        margin: 0px;
        width: 100%;
    }

    .filter-button {
        font-size: 16px;
        font-weight: 700;
        border: none;
        border-radius: 0px;
        text-align: center;
        color: #808184;
        margin-bottom: 10px;
        background-color: transparent;
    }

    .filter-button:hover {
        font-size: 16px;
        font-weight: 700;
        border: none;
        border-radius: 0px;
        text-align: center;
        color: rgb(76, 173, 77);
        margin-bottom: 10px;
        background-color: transparent;
    }

    .prz-tit {
        margin: -30px -25px;
    }

    .prize-pos {
        text-align: center;
        padding: 10% 2% 0% 10%;
    }

    .gray-frame {
        border: 8px #ccc solid;
        padding: 0% 53% 1% 8%;
        margin: -105% 26%;
        position: absolute;
    }

    .tech-tit {
        margin: -222px -35px -275px;
        padding: 360px 0%;
        position: relative;
        z-index: 2;
    }

    .tec-txt {
        width: 300%;
        position: absolute;
        margin: -345px 60%;
    }

    .title-white {
        transform: rotate(-90deg);
        margin: 88px 0px 0px 15px;
        color: #fff;
        line-height: 32px;
        font-size: 34px;
    }

    .prize-img {
        width: 65%;
        margin: -65px -15px 65px 65px;
    }

    .part-tit {
        margin: 25px -7%;
    }

    .part img {
        width: 80%;
    }

    .client ul li img {
        padding: 12% 0px;
        width: 60%;
    }

    .client-marg {
        margin-left: 0%;
    }

    .contacts ul {
        padding: 20% 0% 0% 34%;
    }

    .logo-1 {
        text-align: center;

    }

    .logo-2 {
        text-align: center;

    }

    .logo-3 {
        text-align: center;
        padding-top: 5%;
    }

    .logo-4 {
        text-align: center;
        padding-top: 5%;
    }

    .title-white span {
        font-size: 27px;
        font-weight: 700;
    }

    .logo3 {
        margin: -85px 0px 0px;
    }

    .client-tit {
        margin-top: 2%;
        margin-left: 33px;
        position: absolute;
    }

    .nav-btn {
        padding: 0px 16px 12px;
        margin: -15px 40px;
    }

    .menu-icon {
        width: 20px;
    }

    .cont-tit {
        padding-top: 8%;
        margin: 0px 0px;
    }

    .contacts-frame {
        border: 8px #ccc solid;
        padding: 1% 1%;
        margin: 7% 0% -40% 0%;
        z-index: 5;
        position: relative;
    }

    .coming-soon {
        width: 70%;
        margin: 150px 16% 0px;
    }
}

@media screen and (max-width : 480px) {
    .menu-pad {
        padding: 60% 10%;
    }

    .abou-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        padding: 37% 39%;
        margin: 70px 32px 0px 44px;
        position: absolute;
    }

    .title-white {
        transform: rotate(-90deg);
        margin: 115px 0px 0px 15px;
        color: #fff;
        line-height: 32px;
        font-size: 34px;
    }
}

@media screen and (max-width : 400px) {
    .menu-pad {
        padding: 55% 10%;
    }

    .abou-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        padding: 36% 38%;
        margin: 62px 32px 0px 42px;
        position: absolute;
    }

    .title-white {
        transform: rotate(-90deg);
        margin: 112px 0px 0px 15px;
        color: #fff;
        line-height: 32px;
        font-size: 34px;
    }
}

@media screen and (max-width : 320px) {
    .menu-pad {
        padding: 65% 10%;
    }
}

@media screen and (max-width : 295px) {
    .menu-pad {
        padding: 80% 10%;
    }

    .part-tit {
        margin: 25px -14%;
    }

    .title-white {
        transform: rotate(-90deg);
        margin: 132px 0px 0px 15px;
        color: #fff;
        line-height: 32px;
        font-size: 34px;
    }
}

@media screen and (max-width : 270px) {

    .abou-frame {
        border: 6px #ccc solid;
        background-color: transparent;
        padding: 34% 36%;
        margin: 62px 32px 0px 47px;
        position: absolute;
    }

    .serv-frame h3 {
        padding-bottom: 28%;
        font-size: 14px;
    }

    .prize-img {
        width: 73%;
        margin: -65px -41px 65px 60px;
    }

    .part-tit {
        margin: 25px -14%;
    }
}

/*-------------------------------2025 update-------------------------------*/

.client-logo {
    padding: 1rem;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
}

.client-logo:hover {
    transform: scale(1.05);
}

.logo-white {
    filter: brightness(0) invert(1);
}

.feature-icon {
    font-size: 2rem;
}

.feature-box {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: none;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
}

.feature-box h5 {
    font-size: 18px;
}

.Key2Law .feature-icon,
.k2law-color {
    color: #a18262 !important;
}
.Key2Law .shape-right{
    position: absolute;
    bottom: 0;
    right: -15%;
    z-index: -1;
}
@keyframes arryUpDown {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}

.shape-animation{
      -webkit-animation: arryUpDown 2s ease infinite alternate;
          animation: arryUpDown 2s ease infinite alternate;

}

.rms h1,
.rms h2,
.rms h3,
.rms h4,
.rms h5 {
    font-family: 'Montserrat';
}

.rms .text-primary,
.rms .feature-icon {
    color: #0083cf !important;
}

/* quernet */
.serv {
    padding: 21px;
    text-align: center;
    margin-bottom: 21px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.serv-icon {
    width: 90px;
    height: 90px;
    text-align: center;
    line-height: 60px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.serv-title1 {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-top: 15px
}

.serv-content .serv-title {
    font-size: 70px;
    font-weight: bold;
    text-align: center;
    padding-top: 30px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media(min-width: 0) and (max-width:767px) {
    .serv-content .serv-title {
        font-size:38px
    }
}

.serv-content p {
    font-size: 17px;
    text-align: center;
    padding-bottom: 30px
}

@media(min-width: 0) and (max-width:767px) {
    .serv-content p {
        font-size:14px
    }
}
#Patients .serv-icon {
    fill: #00b7ed;
}
#Patients h2{
    color:#00b7ed;
}
.patient{
    background-color: #00b7ed;
    border-color:  #00b7ed;
}
.patient-text{
    color: #00b7ed;
}
#Providers .serv-icon {
    fill: #ff6dc1;
}
#Providers h2{
    color:#ff6dc1;
}
.provider{
    background-color: #ff6dc1;
    border-color:  #ff6dc1;
}