/*
* Box Theme
* Created by : Ahmed Eissa
* website : www.ahmedessa.net
* behance : https://www.behance.net/3essa
*/


/* Table of Content
==================================================
	- Google fonts & font family -
	- General -
    - typography -
    - Preloader -
	- Header -
    - box intro section -©
    - Portfoilo section -
    - Footer -
    - About page -
    - Services page -
    - contact page -
    - Portfolio single page -
    - Responsive media queries -
*/


/* Google fonts & font family
==================================================*/

@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700);

/* General
==================================================*/

html,
body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    line-height: 1.8;
    color: #999;
}

.no-padding {
    padding-left: 0;
    padding-right: 0;
}

.no-padding [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.main-container {
    padding: 100px 0;
}

.center {
    text-align: center;
}

a {
    -webkit-transition: all .3s;
    transition: all .3s
}

.uppercase {
    text-transform: uppercase;
}

.h-30 {
    height: 30px
}

.h-10 {
    height: 10px
}

.color {
    color: #ffbf00;
    font-size: 11px;
}


/* typography
==================================================*/

h1 {
    color: #393939;
    font-size: 60px;
    text-transform: uppercase;
}

h3 {
    color: #393939;
}

h5 {
    color: #ffbf00;
}


/* preloader
==================================================*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #132a96;
    /* change if the mask should be a color other than white */
    z-index: 1000;
    /* makes sure it stays on top */
}

.pre-container {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 100px auto;
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ff318f;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
    0%,
    100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bounce {
    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}


/* headr
==================================================*/

.box-header {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    height: 50px;
    width: 100%;
    z-index: 3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.box-header {
    height: 80px;
    background: transparent;
    box-shadow: none;
}

.box-header {
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.box-header.is-fixed {
    position: fixed;
    top: -80px;
    background-color: rgb(255, 44, 138, 0.96);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.box-header.is-visible {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.box-header.menu-is-open {
    background-color: rgb(255, 44, 138);
}

.box-logo {
    display: block;
    padding: 20px;
}

.box-primary-nav-trigger {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    background-color: #fff;
}

.box-primary-nav-trigger .box-menu-text {
    color: #393939;
    text-transform: uppercase;
    font-weight: 700;
    display: none;
}

.box-primary-nav-trigger .box-menu-icon {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 36px;
    height: 5px;
    background-color: #ffffff;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    list-style: none;
}

.box-primary-nav-trigger .box-menu-icon::before,
.box-primary-nav-trigger .box-menu-icon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #ffffff;
    right: 0;
    -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
    -webkit-transition: top .3s, background-color 0s, -webkit-transform .3s;
    transition: top .3s, background-color 0s, -webkit-transform .3s;
    transition: transform .3s, top .3s, background-color 0s;
    transition: transform .3s, top .3s, background-color 0s, -webkit-transform .3s;
}

.box-primary-nav-trigger .box-menu-icon::before {
    top: -9px;
}

.box-primary-nav-trigger .box-menu-icon::after {
    top: 9px;
}

.box-primary-nav-trigger .box-menu-icon.is-clicked {
    background-color: rgba(255, 255, 255, 0);
}

.box-primary-nav-trigger .box-menu-icon.is-clicked::before,
.box-primary-nav-trigger .box-menu-icon.is-clicked::after {
    background-color: 393939;
}

.box-primary-nav-trigger .box-menu-icon.is-clicked::before {
    top: 0;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.box-primary-nav-trigger .box-menu-icon.is-clicked::after {
    top: 0;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.box-primary-nav-trigger {
    width: 100px;
    padding-left: 1em;
    background-color: transparent;
    height: 30px;
    line-height: 30px;
    right: 10px;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.box-primary-nav-trigger .box-menu-text {
    display: inline-block;
}

.box-primary-nav-trigger .box-menu-icon {
    left: auto;
    right: 1em;
    -webkit-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
}

.box-primary-nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgb(255, 46, 138);
    z-index: 2;
    text-align: center;
    padding: 50px 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    list-style: none;
}

.box-primary-nav li {
    font-size: 22px;
    font-size: 1.375rem;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: .2em 0;
    text-transform: capitalize;
}

.box-primary-nav a {
    display: inline-block;
    padding: .4em 1em;
    border-radius: 0.25em;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.box-primary-nav a:focus {
    outline: none;
}

.no-touch .box-primary-nav a:hover {
    text-decoration: none;
    color: #ddd;
}

.box-primary-nav .box-label {
    color: #ffbf00;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 17px;
    margin: 2.4em 0 .8em;
}

.box-primary-nav .box-social {
    display: inline-block;
    margin: 10px .4em;
}

.box-primary-nav .box-social a {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 30px
}

.box-primary-nav.is-visible {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.box-primary-nav {
    padding: 150px 0 0;
}

.box-primary-nav li {
    font-size: 18px;
}


/* box-intro
==================================================*/

.box-intro {
    text-align: center;
    display: table;
    height: 100vh;
    width: 100%;
}

.box-intro .table-cell {
    display: table-cell;
    vertical-align: middle;
}

.box-intro em {
    font-style: normal;
    text-transform: uppercase
}

/* b i:last-child {
    color: #ffbf00 !important;
} */

.box-intro h5 {
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #999;
    line-height: 1.7
}


/* mouse effect */

.mouse {
    position: absolute;
    width: 22px;
    height: 42px;
    bottom: 40px;
    left: 50%;
    margin-left: -12px;
    border-radius: 15px;
    border: 2px solid #888;
    -webkit-animation: intro 1s;
    animation: intro 1s;
}

.scroll {
    display: block;
    width: 3px;
    height: 3px;
    margin: 6px auto;
    border-radius: 4px;
    background: #888;
    -webkit-animation: finger 2s infinite;
    animation: finger 2s infinite;
}

@-webkit-keyframes intro {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes intro {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes finger {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@keyframes finger {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}


/* text rotate */

.box-headline {
    font-size: 130px;
    line-height: 1.0; color: #ffdb28;
}

.box-words-wrapper {
    display: inline-block;
    position: relative;
}

.box-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.box-words-wrapper b.is-visible {
    position: relative;
}

.no-js .box-words-wrapper b {
    opacity: 0;
}

.no-js .box-words-wrapper b.is-visible {
    opacity: 1;
}

.box-headline.rotate-2 .box-words-wrapper {
    -webkit-perspective: 300px;
    perspective: 300px;
}

.box-headline.rotate-2 i,
.box-headline.rotate-2 em {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.box-headline.rotate-2 b {
    opacity: 0;
}

.box-headline.rotate-2 i {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
    transform: translateZ(-20px) rotateX(90deg);
    opacity: 0;
}

.is-visible .box-headline.rotate-2 i {
    opacity: 1;
}

.box-headline.rotate-2 i.in {
    -webkit-animation: box-rotate-2-in 0.4s forwards;
    animation: box-rotate-2-in 0.4s forwards;
}

.box-headline.rotate-2 i.out {
    -webkit-animation: box-rotate-2-out 0.4s forwards;
    animation: box-rotate-2-out 0.4s forwards;
}

.box-headline.rotate-2 em {
    -webkit-transform: translateZ(20px);
    transform: translateZ(20px);
}

.no-csstransitions .box-headline.rotate-2 i {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 0;
}

.no-csstransitions .box-headline.rotate-2 i em {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.no-csstransitions .box-headline.rotate-2 .is-visible i {
    opacity: 1;
}

@-webkit-keyframes box-rotate-2-in {
    0% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(90deg);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(-10deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0deg);
    }
}

@keyframes box-rotate-2-in {
    0% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(90deg);
        transform: translateZ(-20px) rotateX(90deg);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(-10deg);
        transform: translateZ(-20px) rotateX(-10deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0deg);
        transform: translateZ(-20px) rotateX(0deg);
    }
}

@-webkit-keyframes box-rotate-2-out {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0);
    }
    60% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-100deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-90deg);
    }
}

@keyframes box-rotate-2-out {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(-20px) rotateX(0);
        transform: translateZ(-20px) rotateX(0);
    }
    60% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-100deg);
        transform: translateZ(-20px) rotateX(-100deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateZ(-20px) rotateX(-90deg);
        transform: translateZ(-20px) rotateX(-90deg);
    }
}


/* portfolio section
==================================================*/

.portfolio .categories-grid span {
    font-size: 30px;
    margin-bottom: 30px;
    display: inline-block;
}

.portfolio .categories-grid .categories ul li {
    list-style: none;
    margin: 20px 0;
}

.portfolio .categories-grid .categories ul li a {
    display: inline-block;
    color: #60606e;
    padding: 0 10px;
    margin: 0 10px;
    -webkit-transition: all .2s ease-in-out .2s;
    transition: all .2s ease-in-out .2s;
}

.portfolio .categories-grid .categories ul li a:hover,
.portfolio .categories-grid .categories ul li a:focus {
    text-decoration: none;
}

.portfolio .categories-grid .categories ul li a.active {
    margin-left: 0;
    background-color: #ffbf00;
    padding: 0px 20px;
    color: white;
    border-radius: 25px;
    text-decoration: none;
}

.portfolio_filter {
    padding-left: 0;
}

.portfolio_item {
    position: relative;
    overflow: hidden;
    display: block;
}

.portfolio_item .portfolio_item_hover {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.portfolio_item .portfolio_item_hover .item_info {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 100%;
    font-weight: bold;
}

.portfolio_item .portfolio_item_hover .item_info span {
    display: block;
    color: #fff;
    font-size: 18px;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    -webkit-transition: all .2s ease-in-out .2s;
    transition: all .2s ease-in-out .2s;
    opacity: 0;
}

.portfolio_item .portfolio_item_hover .item_info em {
    font-style: normal;
    display: inline-block;
    background-color: #ffbf00;
    padding: 5px 20px;
    border-radius: 25px;
    color: #333;
    margin-top: 10px;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    -webkit-transition: all .3s ease-in-out .3s;
    transition: all .3s ease-in-out .3s;
    opacity: 0;
    font-size: 10px;
    letter-spacing: 2px;
}

.portfolio_item:hover .portfolio_item_hover {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.portfolio_item:hover .item_info em,
.portfolio_item:hover .item_info span {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.portfolio .categories-grid .categories ul li {
    float: left;
}

.portfolio .categories-grid .categories ul li a {
    padding: 0 10px;
    -webkit-transition: all .2s ease-in-out .2s;
    transition: all .2s ease-in-out .2s;
}

.portfolio_filter {
    padding-left: 0; height: auto;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 50px;
}

.portfolio-inner {
    padding-bottom: 0 !important;
    padding-top: 55px;
}


/* footer
==================================================*/

footer {
    padding: 30px 0;
    text-align: center;
    background: #f5f5f5
}

.copyright {
    color: #ccc;
    margin-bottom: 0;
}

footer img {
    margin: 0 auto;
}


/* backto top
==================================================*/

.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 20px;
    line-height: 40px;
    font-size: 20px;
    right: 10px;
    text-align: center;
    color: #fff;
    background: rgb(255, 49, 143);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}

.cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}

.cd-top.cd-fade-out {
    opacity: .5;
}

.no-touch .cd-top:hover,
.no-touch .cd-top:focus {
    background-color: rgb(255, 49, 143);
    opacity: 1;
    color: #fff;
}


/* About page
==================================================*/

.top-bar {
    color: #333;
    padding: 150px 0 150px;
    background: -webkit-linear-gradient( rgba(255, 44, 138, .8), rgba(69, 41, 224, .8)), url(../img/01.jpg);
    background: linear-gradient( rgba(255, 44, 138, .8), rgba(69, 41, 224, .8)), url(../img/01.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    text-align: center;
}

.top-bar h1 {
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff;
    line-height: 50px;
}

.top-bar p {
    font-size: 15px;
    /*text-transform: uppercase;*/
    font-weight: 500;
    color: #fbabfa;
}

.top-bar p a {
    color: #fbabfa;
}

.top-bar p a:hover,
.top-bar p a:focus {
    color: #555;
    text-decoration: none;
}

.social-ul {
    list-style: none;
    display: inline-block;
    padding-left: 0;
}

.social-ul li {
    margin: 0 10px;
    float: left;
}

.social-ul li a {
    font-size: 25px;
    color: #555;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.social-ul li a:hover {
    color: #888;
}


/* Services page
==================================================*/

.size-50 {
    font-size: 50px;
}

.service-box {
    margin-bottom: 30px;
}

.service-box h3 {
    margin-top: 0;
}


/* contact page
==================================================*/

.details-text i {
    margin-right: 10px;
}

.textarea-contact {
    height: 200px;
    width: 100%;
    border: solid 1px rgba(0, 0, 0, .1);
    position: relative;
}

.textarea-contact textarea {
    height: 100%;
    width: 100%;
    border: 0;
    padding: 20px;
    background-color: transparent;
    float: left;
    z-index: 2;
    font-size: 14px;
    color: #9a9a9a;
    resize: none;
}

.textarea-contact > span {
    position: absolute;
    top: 20px;
    left: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    text-transform: uppercase;
    color: #cdcdcd;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    z-index: 1;
}

.input-contact {
    height: 40px;
    width: 100%;
    border: solid 1px rgba(0, 0, 0, .1);
    position: relative;
    margin-bottom: 30px;
}

.input-contact input[type="text"] {
    height: 100%;
    width: 100%;
    border: 0;
    padding: 0 20px;
    float: left;
    position: relative;
    background-color: transparent;
    z-index: 2;
    font-size: 14px;
    color: #9a9a9a;
}

.input-contact > span {
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    text-transform: uppercase;
    color: #cdcdcd;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    z-index: 1;
}

.input-contact > span.active,
.textarea-contact > span.active {
    color: #ffbf00;
    font-size: 10px;
    top: 0px;
    left: 5px;
    background-color: #fff;
    padding: 5px
}

input:focus,
textarea:focus {
    outline: none;
}

.contact-info {
    margin-top: 20px;
}

.contact-info i {
    height: 30px;
    width: 30px;
    display: inline-block;
    background: #ffbf00;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;
    color: #fff;
    font-size: 21px;
}

.contact-info p {
    display: inline-block;
    margin-right: 20px;
}

.btn-box {
    background: #132a96;
    padding: 15px 50px;
    -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
    color: #fff;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.btn-box:hover,
.btn-box:focus {
    background: #061662;
    color: #fff;
}


/* single project page
==================================================*/

.cat-ul {
    padding-left: 0;
    list-style: none
}

.cat-ul li i {
    margin-right: 10px;
    color: #ffbf00;
}


/* Responsive media queries
==================================================*/

@media (max-width: 991px) {
    .portfolio .categories-grid span {
        margin-bottom: 0;
        text-align: center;
        width: 100%;
    }
    .portfolio .categories-grid .categories ul li {
        text-align: center;
    }
    .portfolio .categories-grid .categories ul li a {
        margin-left: 0;
    }
    .col-md-6 h3 {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 670px) {
    .box-headline {
        font-size: 100px;
    }
    .box-intro h5 {
        font-size: 12px;
    }
    .box-primary-nav a {
        padding: 5px 1em;
        font-size: 14px;
    }
    .box-primary-nav {
        padding: 80px 0 0;
    }
    .box-primary-nav .box-social a {
        font-size: 23px;
    }
    .top-bar h1 {
        font-size: 40px;
        line-height: 30px;
    }
    .portfolio .categories-grid .categories ul li {
        float: none;
    }
    .cta-btn{padding:18em 0 0 0em;}
}

@media only screen and (max-width: 520px) {
    .box-headline {
        font-size: 80px;
    }
    .box-intro h5 {
        font-size: 12px;
    }
    .main-container {
        padding: 50px 0;
    }
    .cta-btn{padding:18em 0 0 0em;}
}

@media only screen and (max-width: 420px) {
    .box-headline {
        font-size: 50px;
    }
    .box-intro h5 {
        font-size: 12px;
    }
    .top-bar h1 {
        font-size: 30px;
        line-height: 30px;
    }
    .cta-btn{padding:18em 0 0 0em !important;}
}
/*=======================
custom styles
=========================*/
code{color: #6f6f6f; background-color: #e6e6e6;}
.custom-link{font-weight: bold;
background-color: #ffbf00;
padding: 5px 20px;
border-radius: 25px;
color: #333;
font-size: 12px;
letter-spacing: 2px;}
.arc>.text{display: none;}
.dark{color: #393939;}

.testimonials{padding: 30px 0; background-color: #fdcf19;}
/*TESTIMO STYLES*/
@brand-color: #b20000;
#tcb-testimonial-carousel {
    a{
        color: @brand-color;
    }
    .text-brand{
        color: @brand-color;
    }
    margin-top: 30px;
    .carousel-indicators .active {
        background: @brand-color;
    }
    .no-margin{
        margin: 0;
    }
    .carousel-indicators li {
        border: 1px solid #ccc;
    }
    .carousel-control {
        color: @brand-color;
        width: 5%;
    }
    .carousel-control:hover,
    .carousel-control:focus {
        color: @brand-color;
    }
    .carousel-control.left,
    .carousel-control.right {
        background-image: none;
    }
    .item{
        padding: 15px 40px;
        background: #f8f8f8;
    }
    .media-object {
        margin: auto;
    }
    @media screen and (max-width: 768px) {
        .media-object {
            margin-bottom: 15px;
        }
    }
}

/* .custome-bg{ background: rgb(133,17,210); background: linear-gradient(135deg, rgba(133,17,210,1) 0%, rgba(255,48,163,1) 100%);} */
.custome-bg{ background: rgb(133,17,210); background: linear-gradient(135deg, rgb(0 12 54) 0%, rgba(255,48,163,1) 100%);}
/* .custome-bg{
    background: linear-gradient(232deg, #132a96, #ff30a3);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 94%}
    50%{background-position:100% 7%}
    100%{background-position:0% 94%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 94%}
    50%{background-position:100% 7%}
    100%{background-position:0% 94%}
}
@keyframes AnimationName {
    0%{background-position:0% 94%}
    50%{background-position:100% 7%}
    100%{background-position:0% 94%}
} */

/* NEW INDEX TEXT SLIDER */
.mySlides {display: none;}
.slideshow-container {max-width: 1000px; margin:21em auto 0 auto;}
.slideshow-container h1{color: #ffffff; font-size: 60px; font-weight: bold;  width: 100%; text-align: center;}
.dot {height: 10px; width: 10px; margin: 0 2px; background-color:none; border: 3px solid #ffffff; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.active {border: 3px solid #ffffff; opacity: 0.6;}
.fade { -webkit-animation-name: fade;   -webkit-animation-duration: 2.5s; animation-name: fade; animation-duration: 2.5s;}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
/*========================
g-map styles
===========================*/
.g-map{ margin-bottom: 0px; margin-top:0px;}
#map {width: 100%; height: 550px; margin-top: 0px; margin-bottom: 0px;}
.info-window { font-family: 'Montserrat', sans-serif;}
.info-content { color: #999;}
/* .form-group span{ font-family: 'GothamBold', sans-serif; font-size: 12px; text-transform: uppercase; color: #333333;}
.form-group label{color: #ff0000; background: none; padding: 0 0 0 0;}
.form-group input{height: 38px; border-radius: 0px; font-family: 'ColoborateThin'; font-size: 16px; color: #333333;}
.form-group textarea{border-radius: 0px; font-family: 'ColoborateThin'; font-size: 16px; color: #333333;} */
/* .contact-page{padding: 100px 0;} */
.info-window p{color: #333333; padding: 0  0;}
/* BOX ON MAP  */
.box-contacts {width:330px; position: absolute; z-index: 1; left: 75px; margin-top: 100px; background: #132a96; padding: 40px 60px; text-align: left; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.16); font-size: 14px;  text-transform: uppercase; color: #ffffff;}
.box-contacts h3{color: #ffffff; }

/*==========================
index new slider styles
======================= */
/* body{overflow-x: hidden !important;} */
.ms--images {position: relative; overflow: hidden;}
.ms--images.ms-container--horizontal {width: 100%; height: 400px; max-width: 100%;}
.ms--images.ms-container--horizontal .ms-track {left: calc(50% - 350px);}
.ms--images.ms-container--horizontal .ms-slide {display: -webkit-inline-box; display: inline-flex;}
.ms--images .ms-track {display: -webkit-box; display: flex; position: absolute; white-space: nowrap; padding: 0; margin: 0; list-style: none;}
.ms--images .ms-slide {-webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 700px; height: 400px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.ms--images {left: calc(50% - 280px);}
.ms--images.ms-container--horizontal .ms-track {left: -70px;}
.ms--images .ms-slide:nth-child(1) .ms-slide__image {background: url("../img/slide-4.png") no-repeat top center; background-size: contain;}
.ms--images .ms-slide:nth-child(2) .ms-slide__image {background: url("../img/slide-1.jpg") no-repeat top center; background-size: contain;}
.ms--images .ms-slide:nth-child(3) .ms-slide__image {background: url("../img/slide-7.jpg") no-repeat top center; background-size: contain;}
.ms--images .ms-slide:nth-child(4) .ms-slide__image {background: url("../img/slide-2.png") no-repeat top center; background-size: contain;}
.ms--images .ms-slide:nth-child(5) .ms-slide__image {background: url("../img/slide-6.jpg") no-repeat top center; background-size: contain;}
.ms--images .ms-slide:nth-child(6) .ms-slide__image {background: url("../img/slide-3.jpg") no-repeat top center; background-size: contain;}
.ms--images .ms-slide__image-container {width: 100%;  height: 100%; overflow: hidden;}
.ms--images .ms-slide__image {width: 100%;  height: 100%;  background-size: cover;}
.ms--numbers {position: relative;  overflow: hidden;}
.ms--numbers.ms-container--horizontal {  width: 240px;  height: 240px;  max-width: 100%;}
.ms--numbers.ms-container--horizontal .ms-track {  left: calc(50% - 120px);}
.ms--numbers.ms-container--horizontal .ms-slide {  display: -webkit-inline-box;  display: inline-flex;}
.ms--numbers .ms-track {  display: -webkit-box;  display: flex;  position: absolute;  white-space: nowrap;  padding: 0;  margin: 0;  list-style: none;}
.ms--numbers .ms-slide {  -webkit-box-align: center;          align-items: center;  -webkit-box-pack: center;          justify-content: center;  width: 240px;  height: 240px;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;          user-select: none;}
.ms--numbers {  position: absolute;  left: calc(50% - 380px);  top: calc(50% - 300px);  z-index: -1;  pointer-events: none;}
.ms--numbers .ms-slide {  font-size: 9em;  font-weight: 900;  color: rgba(255, 255, 255, 0.2);}
.ms--titles {  position: relative;  overflow: hidden;}
.ms--titles.ms-container--vertical {  width: 400px;  height: 170px;  max-height: 100%;}
.ms--titles.ms-container--vertical .ms-track {  -webkit-box-orient: vertical;  -webkit-box-direction: normal;          flex-direction: column;  top: calc(50% - 85px);}
.ms--titles.ms-container--vertical.ms-container--reverse .ms-track {  -webkit-box-orient: vertical;  -webkit-box-direction: reverse;          flex-direction: column-reverse;  top: auto;
  bottom: calc(50% - 85px);}
.ms--titles.ms-container--vertical .ms-slide {  display: -webkit-box;  display: flex;}
.ms--titles .ms-track {  display: -webkit-box;  display: flex;  position: absolute;  white-space: nowrap;  padding: 0;  margin: 0;  list-style: none;}
.ms--titles .ms-slide {  -webkit-box-align: center;          align-items: center;  -webkit-box-pack: center;          justify-content: center;  width: 400px;  height: 170px;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;          user-select: none;}
.ms--titles {  position: absolute;  left: calc(50% - 420px);  top: calc(50% - 85px);  z-index: 1;  pointer-events: none;}
.ms--titles .ms-track {white-space: normal;}
.ms--titles .ms-slide {font-size: 3.3em; font-weight: 600;}
.ms--titles .ms-slide h3 {margin: 0; text-shadow: 1px 1px 2px black; font-size: 62px; color: #ffffff; font-weight: bold; text-transform: uppercase; text-align: left;}
.ms--links {  position: relative;  overflow: hidden;}
.ms--links.ms-container--vertical {  width: 120px;  height: 60px;  max-height: 100%;}
.ms--links.ms-container--vertical .ms-track {  -webkit-box-orient: vertical;  -webkit-box-direction: normal;          flex-direction: column;  top: calc(50% - 30px);}
.ms--links.ms-container--vertical .ms-slide {  display: -webkit-box;  display: flex;}
.ms--links .ms-track {  display: -webkit-box;  display: flex;  position: absolute;  white-space: nowrap;  padding: 0;  margin: 0;  list-style: none;}
.ms--links .ms-slide {-webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 120px;  height: 60px;  -webkit-user-select: none;     -moz-user-select: none; -ms-user-select: none; user-select: none; display:none !important;}
.ms--links {  position: absolute;  left: calc(50% - 420px);  top: calc(50% + 105px);  z-index: 1;}
.ms--links .ms-track {  white-space: normal;}
.ms--links .ms-slide__link {  font-weight: 600;  padding: 5px 0 8px;  border-bottom: 2px solid white;  cursor: pointer;}
.pagination {
    display: -webkit-box;
    display: flex;
    position: absolute;
    left: calc(50% - 420px);
    bottom: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 1;}
.pagination__button {display: inline-block; position: relative; width: 36px; height: 20px; margin: 0 5px; cursor: pointer; border: 0px !important; border-radius: 0px !important; background: none !important; }
.pagination__button:before, .pagination__button:after {  content: '';  position: absolute;  left: 0;  top: calc(50% - 1px);  width: 100%;  box-shadow: 0 1px 0 #0B0D14;}
.pagination__button:before {  height: 2px;  background-color: #fff; opacity: 0.2;}
.pagination__button:after {  height: 3px;  background-color: #ffbf00;  opacity: 0;  -webkit-transition: 0.5s opacity;  transition: 0.5s opacity;}
.pagination__item--active .pagination__button:after {  opacity: 1;}
@media screen and (max-width: 860px) {
  .ms--numbers {
    left: calc(50% - 120px);
  }

  .ms--titles {
    left: calc(50% - 200px);
    top: calc(50% - 135px);
    text-align: center;
  }

  .ms--links {
    left: calc(50% - 60px);
    top: calc(50% + 80px);
  }

  .pagination {
    left: 50%;
    top: calc(100% - 50px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media screen and (max-width: 600px) {
  .ms--images {
    overflow: visible;
  }

}
@media screen and (max-width: 400px) {
  .ms--titles .ms-slide {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }

}
.sliders-container {position: relative; top: 13em; display: -webkit-box;  display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -webkit-box-flex: 1; flex: 1; overflow-x: hidden;}
@media screen and (max-width: 860px) {
  .header__menu, .footer {
    display: none;
  }
}
.cta-btn{width:auto; height: auto; float: left; padding:18em 0 0 10em;}
.portfolio-cta{background: #ffbf00; font-size: 14px; font-weight: bold; text-transform: uppercase; color: rgb(255 46 138); padding: 15px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px;border-radius: 6px; margin: 0 30px 0 0;}
.portfolio-cta:hover{text-decoration: none; opacity: 0.8; color:#ffbf00; background: rgb(255 46 138); -webkit-box-shadow: 0px 5px 18px 0px rgba(36, 61, 73, 0.9);
-moz-box-shadow:    0px 5px 18px 0px rgba(36, 61, 73, 0.9);
box-shadow:         0px 5px 18px 0px rgba(36, 61, 73, 0.9);}
.say-hello{font-size: 14px; font-weight: bold; text-transform: uppercase; color: rgb(255 46 138); border-bottom: 2px solid rgb(255 46 138);}
.say-hello:hover{color: #ffbf00; border-bottom: 1px solid #ffbf00; text-decoration: none;}
/* whatsapp style */
.float{position:fixed; width:50px; height:50px; bottom:40px; right:40px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100;}
.my-float{margin-top:10px;}