body :not(i) {
    font-family: "Raleway", sans-serif
}

P {
    font-family: "Open Sans", sans-serif
}

@keyframes lnkTr1 {
    0% {
        transform: translateX(0px)
    }

    to {
        transform: translateX(-10px)
    }
}

@keyframes lnkTr2 {
    0% {
        transform: translateX(0px)
    }

    to {
        transform: translateX(10px)
    }
}

header {
    height: 435px;
    background-image: url("/Img/background.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative
}

header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #384046b3;
    transition: all 1s linear
}

header div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 8% 3%
}

header div h1 {
    margin: 0 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #fff
}

header div h1 span {
    border-bottom: 4px solid #3498db
}

header div h2 {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
    font-size: 24px
}

header div a {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 2px;
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    transition: ease-in-out 0.3s;
    color: #fff;
    background-color: #3599db;
    text-transform: uppercase
}

header div a:hover {
    background-color: #4ea5e0;
    text-decoration: none
}

.whatDo {
    margin-top: 60px
}

.whatDo .row>div:first-of-type h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative
}

.whatDo .row>div:first-of-type h2:before {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 120px;
    height: 1px;
    background-color: #ddd;
    left: calc(50% - 60px)
}

.whatDo .row>div:first-of-type h2:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    width: 40px;
    height: 3px;
    background-color: #3498db;
    left: calc(50% - 20px)
}

.whatDo .row>div:nth-of-type(n+2) article {
    height: 100%;
    box-shadow: none;
    padding: 30px 20px
}

.whatDo .row>div:nth-of-type(n+2) article:hover {
    box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1)
}

.whatDo .row>div:nth-of-type(n+2) article:hover h4 {
    color: #3498db
}

.whatDo .row>div:nth-of-type(n+2) article i {
    color: #3498db;
    font-size: 28px;
    margin: 0 auto;
    width: 64px;
    height: 64px;
    background-color: #eaf4fb;
    border-radius: 50px;
    padding-top: 17px;
    margin-bottom: 20px;
    transition: ease-in-out 0.3s
}

.whatDo .row>div:nth-of-type(n+2) article h4 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
    transition: ease-in-out 0.3s;
    color: #444449
}

.whatDo .row>div:nth-of-type(n+2) article p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0
}

.about {
    margin-top: 60px
}

.about .row>div:first-of-type div {
    width: 100%;
    height: 300px;
    background-image: url("https://bootstrapmade.com/demo/templates/Lumia/assets/img/about.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

@media (min-width:576.1px) and (max-width:992px) {
    .about .row>div:first-of-type div {
        height: 460px
    }
}

.about .row>div:nth-of-type(2) .container {
    padding: 0px
}

.about .row>div:nth-of-type(2) .container .row>div:first-of-type * {
    color: #444444
}

.about .row>div:nth-of-type(2) .container .row>div:first-of-type h3 {
    font-size: 32px;
    font-weight: 600
}

.about .row>div:nth-of-type(2) .container .row>div:first-of-type p:nth-of-type(n+2) {
    display: block;
    float: left;
    clear: right;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0
}

.about .row>div:nth-of-type(2) .container .row>div:first-of-type p:nth-of-type(n+2) i {
    font-size: 18px;
    color: #3498db;
    display: inline-block;
    float: left;
    clear: left;
    margin-right: 5px
}

.about .row>div:nth-of-type(2) .container .row>div:first-of-type p:nth-of-type(3) {
    margin: 10px 0px 30px
}

.about .row>div:nth-of-type(2) .container .row>div:nth-of-type(3) i {
    transform: rotateZ(30deg)
}

.about .row>div:nth-of-type(2) .container .row>div:nth-of-type(n+2) {
    padding-right: 26px
}

.about .row>div:nth-of-type(2) .container .row>div:nth-of-type(n+2) i {
    color: #3498db;
    font-size: 48px;
    margin: 0 auto
}

.about .row>div:nth-of-type(2) .container .row>div:nth-of-type(n+2) h4 {
    font-weight: 700;
    margin: 10px 0px 15px;
    font-size: 20px;
    color: #444449;
    transition: ease-in-out 0.3s
}

.about .row>div:nth-of-type(2) .container .row>div:nth-of-type(n+2) p {
    color: #848487;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0
}

.skills {
    padding: 60px 15px
}

.skills .row .skils {
    margin-bottom: 35px
}

.skills .row .skils article {
    margin-bottom: 20px
}

.skills .row .skils article p {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #384046;
    line-height: 18px;
    margin-bottom: 5px;
    position: relative
}

.skills .row .skils article p:before {
    position: absolute;
    top: 0px;
    right: 0%
}

.skills .row .skils article .progress {
    height: auto;
    border-radius: 0
}

.skills .row .skils article .progress .progress-bar {
    background-color: #5faee3;
    height: 10px;
    width: 100%
}

.skills .row #sklp1:before {
    content: "100%"
}

.skills .row #sklp2:before {
    content: "90%"
}

.skills .row #sklp3:before {
    content: "75%"
}

.skills .row #sklp4:before {
    content: "80%"
}

.skills .row #sklp5:before {
    content: "90%"
}

.skills .row #sklp6:before {
    content: "55%"
}

.skills .factRow .counter .factPr {
    margin: 25px 0px 50px
}

.skills .factRow .counter .factPr>div {
    position: relative;
    padding: 30px 30px 25px 30px
}

.skills .factRow .counter .factPr>div>* {
    display: block
}

.skills .factRow .counter .factPr>div i {
    color: white;
    background-color: #5faee3;
    width: 50px;
    height: 50px;
    padding: 12px 10px;
    font-size: 23px;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: -24px;
    left: calc(50% - 25px);
    box-shadow: 0 0 6px 5px white
}

.skills .factRow .counter .factPr>div span {
    color: #124364;
    font-family: "Open Sans", sans-serif;
    font-size: 36px;
    font-weight: 600
}

.skills .factRow .counter .factPr>div p {
    padding: 0;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: #444444
}

.services {
    background-color: #f7fbfe;
    padding: 65px 15px 50px
}

.services .row>div:first-of-type h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #444
}

.services .row>div:first-of-type h2:before {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 120px;
    height: 1px;
    background-color: #ddd;
    left: calc(50% - 60px)
}

.services .row>div:first-of-type h2:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    width: 40px;
    height: 3px;
    background-color: #3498db;
    left: calc(50% - 20px)
}

.services .row>div:nth-of-type(n+2) article {
    padding: 30px;
    background-color: white;
    transition: all 1s ease-in-out 0.3s
}

.services .row>div:nth-of-type(n+2) article:hover {
    box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1)
}

.services .row>div:nth-of-type(n+2) article:hover h4 {
    color: #3498db
}

.services .row>div:nth-of-type(n+2) article .servI {
    width: 50px;
    height: 100%;
    float: left;
    margin-right: 20px
}

.services .row>div:nth-of-type(n+2) article .servI i {
    color: #3498db;
    font-size: 40px
}

.services .row>div:nth-of-type(n+2) article h4 {
    width: calc(100% - 70px);
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
    transition: ease-in-out 0.3s;
    color: #444449;
    margin-left: 70px
}

.services .row>div:nth-of-type(n+2) article p {
    width: calc(100% - 70px);
    line-height: 24px;
    font-size: 14px;
    color: #444444;
    margin-left: 70px
}

.Portfolio .container .row>div:first-of-type h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #444
}

.Portfolio .container .row>div:first-of-type h2:before {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 120px;
    height: 1px;
    background-color: #ddd;
    left: calc(50% - 60px)
}

.Portfolio .container .row>div:first-of-type h2:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    width: 40px;
    height: 3px;
    background-color: #3498db;
    left: calc(50% - 20px)
}

.Portfolio .container .row>div:first-of-type .controllRow ul {
    width: 100%;
    height: 100%
}

.Portfolio .container .row>div:first-of-type .controllRow ul li {
    color: #222222;
    background-color: white;
    width: auto;
    height: 35px;
    cursor: pointer;
    display: inline-block;
    padding: 8px 15px 10px 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    border-radius: 3px
}

.Portfolio .container .row>div:first-of-type .controllRow ul li:hover {
    color: white;
    background-color: #3498db
}

.Portfolio .container .row>div:nth-of-type(n+2) {
    position: relative;
    margin-bottom: 30px;
    transition: all 0.7s linear 0s
}

.Portfolio .container .row>div:nth-of-type(n+2) img {
    border-radius: 4px 4px 0 0;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    transition: 0.3s
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver {
    background-color: #0000008f;
    position: absolute;
    top: 0;
    left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 1s linear
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver a {
    width: 36px;
    height: 36px;
    transition: all 0.7s linear
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver a i {
    color: #384046;
    background-color: white;
    line-height: 0;
    padding: 18px 11px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: linear
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver a i:hover {
    background-color: #3498db;
    color: white
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver a:first-of-type {
    transform: translateX(0px)
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver a:last-of-type {
    transform: translateX(0px)
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver:hover {
    opacity: 1
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver:hover a:first-of-type {
    transform: translateX(-10px)
}

.Portfolio .container .row>div:nth-of-type(n+2) .portOver:hover a:last-of-type {
    transform: translateX(10px)
}

.Portfolio .container .row>div:nth-of-type(n+2) p {
    padding: 27px 0px 20px;
    margin: 0;
    color: #b8b8b8;
    border-top: 25px solid black;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 0 0 3px 3px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    transition: 0.3s
}

.Portfolio .container .row>div:nth-of-type(n+2) p a {
    color: #333;
    display: block;
    text-decoration: none;
    font-size: 18px;
    line-height: 1px;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 0
}

.Portfolio .container .row>div:nth-of-type(n+2) p a:hover {
    color: #3498db
}

.Portfolio .container .row>div:nth-of-type(n+2):hover img,
.Portfolio .container .row>div:nth-of-type(n+2):hover p {
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16)
}

.testimonials {
    background-color: #f7fbfe;
    margin-bottom: 40px;
    margin-top: 30px;
    padding-top: 45px
}

.testimonials h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #444
}

.testimonials h2:before {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 120px;
    height: 1px;
    background-color: #ddd;
    left: calc(50% - 60px)
}

.testimonials h2:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    width: 40px;
    height: 3px;
    background-color: #3498db;
    left: calc(50% - 20px)
}

.testimonials .care {
    background-color: #f7fbfe;
    padding: 25px 0px
}

.testimonials .care .carousel .carousel-inner {
    display: block;
    margin-bottom: 35px
}

.testimonials .care .carousel .carousel-inner .carousel-item {
    padding: 25px 0px
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv {
    width: 100%;
    margin: auto
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv>div .testimonial {
    background-color: white;
    padding: 25px 30px;
    text-align: center;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08)
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv>div .testimonial img {
    width: 90px;
    border-radius: 50%;
    border: 4px solid #fff
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv>div .testimonial h5 {
    font-family: "Raleway", sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #111
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv>div .testimonial span {
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    color: #999;
    margin: 0
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv>div .testimonial p {
    font-style: italic;
    margin: 15px auto 15px auto;
    color: #646467;
    font-family: "Open Sans", sans-serif
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv>div .testimonial p i {
    color: #e1f0fa;
    font-size: 20px;
    margin: 0px 10px 10px 0px
}

.testimonials .care .carousel .carousel-inner .carousel-item .PrDiv .col-sm-12 {
    margin-bottom: 30px
}

.testimonials .care .carousel .carousel-indicators {
    position: static;
    margin-top: 35px
}

.testimonials .care .carousel .carousel-indicators li {
    display: inline-block;
    background-color: #dddddd;
    width: 12.5px;
    height: 12.5px;
    border-radius: 50%;
    opacity: 1
}

.testimonials .care .carousel .carousel-indicators .active {
    background-color: #3498db
}

.team .container .row>div:first-of-type h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #444
}

.team .container .row>div:first-of-type h2:before {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 120px;
    height: 1px;
    background-color: #ddd;
    left: calc(50% - 60px)
}

.team .container .row>div:first-of-type h2:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    width: 40px;
    height: 3px;
    background-color: #3498db;
    left: calc(50% - 20px)
}

.team .container .row>div:nth-of-type(n+2) article {
    margin-bottom: 20px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
    padding: 30px 20px;
    background: #fff
}

.team .container .row>div:nth-of-type(n+2) article img {
    max-width: 60%;
    border-radius: 50%;
    margin: 0 0 30px 0
}

.team .container .row>div:nth-of-type(n+2) article h4 {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 18px
}

.team .container .row>div:nth-of-type(n+2) article span {
    font-style: italic;
    display: block;
    font-size: 13px
}

.team .container .row>div:nth-of-type(n+2) article p {
    padding-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: #aaaaaa
}

.team .container .row>div:nth-of-type(n+2) article .social a {
    display: inline-block;
    color: #919191;
    transition: 0.3s;
    cursor: pointer
}

.team .container .row>div:nth-of-type(n+2) article .social a i {
    font-size: 18px;
    margin: 0 2px
}

.team .container .row>div:nth-of-type(n+2) article .social a:hover {
    color: #3498db
}

.contact {
    background-color: #f7fbfe;
    padding: 60px 0
}

.contact .container .row:first-of-type div h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #444
}

.contact .container .row:first-of-type div h2:before {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 120px;
    height: 1px;
    background-color: #ddd;
    left: calc(50% - 60px)
}

.contact .container .row:first-of-type div h2:after {
    content: "";
    position: absolute;
    bottom: -0.5px;
    width: 40px;
    height: 3px;
    background-color: #3498db;
    left: calc(50% - 20px)
}

.contact .container .row:nth-of-type(2) {
    margin-top: 3rem !important;
    padding: 30px;
    background: #fff;
    border-radius: 4px
}

.contact .container .row:nth-of-type(2) div i {
    width: 44px;
    height: 44px;
    font-size: 20px;
    color: #3498db;
    float: left;
    background: #eaf4fb;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease-in-out
}

.contact .container .row:nth-of-type(2) div p {
    padding: 0 0 0 60px;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #384046
}

.contact .container .row:nth-of-type(2) div span {
    padding: 0 0 0 60px;
    margin-bottom: 0;
    font-size: 14px;
    color: #65747f;
    display: block
}

.contact .container .row:nth-of-type(3) {
    margin-top: 3rem !important;
    padding: 30px;
    background: #fff;
    border-radius: 4px
}

.contact .container .row:nth-of-type(3) form {
    width: 100%
}

.contact .container .row:nth-of-type(3) form input,
.contact .container .row:nth-of-type(3) form textarea {
    font-size: 14px
}

.contact .container .row:nth-of-type(3) form button {
    background-color: #3498db;
    border: 0;
    padding: 10px 24px;
    color: #fff;
    transition: 0.4s;
    border-radius: 4px
}

.contact .container .row:nth-of-type(3) form button:hover {
    background-color: #5faee3
}