* {
    padding: 0;
    margin: 0
}

body {
    overflow-x: hidden
}

#position {
    position: fixed !important;
    width: 100%;
    z-index: 50;
    background-color: #fff
}

.abc {
    box-shadow: 0 1px 5px #232323
}

#design {
    padding: 70px 0
}

#creative .bor,
#design .bor,
#love .bor {
    content: '';
    width: 40px;
    height: 2px;
    background-color: #222
}

.navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding-bottom: 2%;
    margin-bottom: 2%
}

.navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    border-bottom: 4px solid #222;
    transition: all 0s linear
}

.navbar .navbar-collapse .navbar-nav .nav-item .active {
    border-bottom: 4px solid #222
}

.nav-btn {
    border-bottom: 2px solid #222;
    font-family: Heebo;
    position: absolute
}

.prev-slide {
    left: 1.5rem;
    top: 85%
}

.owl-next .ns {
    left: 67rem
}

.next-slide {
    left: 78.5rem;
    top: 85%
}

.nav-btn p {
    margin-bottom: 0;
    padding: 0 5px
}

#creative .bor,
#creative h2,
#design .bor,
#design h2,
#love .bor,
#love h2 {
    display: inline-block
}

#creative .bor,
#design .bor,
#love .bor {
    vertical-align: middle;
    margin-right: 3%
}

.navbar-brand {
    margin-right: 40%;
    margin-left: 2%
}

#creative h2,
#design h2,
#feel h2,
#focus h2,
#love h2,
#social-link p,
.owl-carousel .item h2 {
    font-family: Heebo;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    line-height: 19.6px
}

#creative h3,
#design h3,
#feel h3,
#focus h3,
#love h3,
.owl-carousel .item h3 {
    font-family: Heebo;
    font-weight: 700;
    font-size: 44px;
    color: #1b1a1a;
    line-height: 61.6px
}

#design .head-para,
#design .head-title {
    display: inline-block
}

#design .head-title {
    width: 10%;
    margin-right: 8%
}

#design .head-para {
    width: 80%;
    vertical-align: top
}

#creative p,
#design .head-para p,
#feel p,
#focus p,
#love span,
#social-link span {
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    color: #9b9b9b;
    line-height: 25px;
    font-weight: 400
}

#design .head-title span {
    font-family: Heebo;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
    color: #1b1a1a
}

#design .head-title .bor-bot {
    width: 20px;
    height: 2px;
    background-color: #222
}

.gal {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3
}

.gal img {
    width: 100%;
    padding: 7px 0
}

.gal img.abc {
    width: 46rem;
    padding: 10px 0
}

@media (max-width:500px) {
    .gal {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1
    }
}

#focus {
    background-image: url(../img/back-fix.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    position: relative;
    z-index: 1
}

.conten {
    background-color: #fff;
    float: right;
    padding: 7%;
    margin-top: 15%
}

.counter {
    background-color: #fff
}

.btn__primary {
    background-color: rgb(27 26 26);
    color: rgb(255 255 255)
}

.btn {
    font-family: Heebo, sans-serif;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 700;
    min-width: 170px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 0 15px;
    letter-spacing: 1px;
    border: 0;
    border-radius: 1px;
    overflow: hidden;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#focus .counter ul li p {
    font-family: Heebo;
    font-size: 50px;
    font-weight: 500;
    line-height: 50px;
    color: #1b1a1a
}

.counter ul li span {
    font-family: 'Work Sans';
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
    color: #1b1a1a
}

#love p {
    font-family: Heebo, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #1b1a1a
}

#love {
    background-color: rgb(249 249 249) !important
}

#social-link i {
    color: #e8e8e8;
    font-size: 65px;
    line-height: 1;
    width: 7%
}

#social-link p {
    font-size: 16px;
    margin-bottom: 0
}

#social-link .cont,
#social-link i {
    display: inline-block
}

#form input {
    border: 0;
    border-bottom: 2px solid #9b9b9b
}

#form input:focus {
    outline: 0
}

#form textarea {
    border: 0;
    border-bottom: 2px solid #9b9b9b
}

footer {
    background-color: #1b1a1a;
    color: rgb(255 255 255);
    padding: 70px 0
}

#footer-top p {
    font-family: Heebo;
    font-size: 23px;
    font-weight: 700;
    line-height: 32.2px;
    color: #fff
}

#footer-top .liste .p1 {
    font-family: Heebo;
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    color: #fff
}

#footer-bottom p,
#footer-top .liste .p2,
#footer-top .liste .p3 {
    font-family: 'Work Sans';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #9b9b9b
}

.form-letter input {
    outline: 0;
    border: 2px solid #fff;
    background-color: #000;
    width: 80%
}

.form-letter btn {
    background-color: transparent
}

.form-letter btn i {
    color: #fff
}

.fa-arrow-right {
    color: #000
}

.submit-btn {
    width: 55px;
    height: 55px;
    line-height: 53px;
    margin-left: -2px;
    font-size: 18px;
    color: #fff;
    border: 2px solid #fff;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    outline: 0;
    background-color: transparent
}

#design,
#feel,
#gallery,
#love {
    padding: 80px 0
}

#creative {
    padding-bottom: 120px
}

.owl-carousel .i1 {
    background: url(../img/slide1.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh
}

.owl-carousel .i2 {
    background: url(../img/slide2.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh
}

.owl-carousel .i3 {
    background: url(../img/slide3.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh
}

.owl-carousel .item h2 {
    font-size: 17px
}

.owl-carousel .item h3 {
    font-size: 65px
}

.owl-carousel .item .text {
    padding-top: 15%;
    padding-left: 5%;
    width: 50%
}

.navbar-nav li a {
    font-family: Heebo;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    color: #1b1a1a;
    letter-spacing: .4px;
    line-height: 80px;
    background-color: #fff;
    padding-bottom: 0
}

.owl-dots {
    position: absolute;
    left: 44%;
    top: 85%
}

.owl-theme .owl-dots .owl-dot span {
    width: 40px;
    height: 3px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    background-color: #494848
}

.owl-nav span {
    content: "Prev"
}

.gal .gal1 #head-first,
.gal2 #head-first,
.gal3 #head-first,
.gal4 #head-first,
.gal5 #head-first,
.gal6 #head-first,
.gal7 #head-first {
    text-decoration: none;
    font-family: Heebo;
    font-size: 22px;
    font-weight: 700;
    line-height: 30.8px;
    color: #000;
    display: block
}



#creative h3,
#design h3 {
    width: 75%
}




.gal .gal1 a,
.gal2 a,
.gal3 a,
.gal4 a,
.gal5 a,
.gal6 a,
.gal7 a {
    font-family: "Work Sans";
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #000;
    text-decoration: none
}

.ima {
    position: relative;
    overflow: hidden
}

.aaaa {
    position: relative
}

.aaaa #im {
    width: 100%;
    -webkit-transition: -webkit-transform .9s linear, -webkit-filter .5s linear;
    transition: -webkit-transform .9s linear, -webkit-filter .5s linear;
    transition: transform .9s linear, filter .5s linear;
    transition: transform .9s linear, filter .5s linear, -webkit-transform .9s linear, -webkit-filter .5s linear
}

.aaaa:hover #im {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transform: scale(1.05) rotate(1deg);
    transform: scale(1.05) rotate(1deg)
}

#owl-two {
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 20px;
    margin: 20px 0
}

#owl-two .item {
    border-left: 1px solid #e9e9e9;
    padding: 20%;
    height: 10em
}

#owl-two:last-child {
    border-right: 1px solid #e9e9e9
}

#owl-two .owl-item img {
    display: initial
}

#owl-two .owl-dots {
    display: none
}

#owl-three .item .row .pp,
#owl-three .item h4 {
    font-family: Heebo;
    font-size: 14px;
    font-weight: 700;
    color: #222
}

#owl-three .item p {
    font-family: Heebo, sans-serif;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 700;
    color: rgb(27 26 26);
    margin-bottom: 30px
}

#owl-three .item .row img {
    max-width: 12%;
    border-radius: 50%
}

#owl-three .item .row .pp span {
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    color: #9b9b9b;
    font-weight: 400
}

#owl-three .owl-dots {
    display: none
}

#owl-three {
    padding-left: 25%
}

#client {
    padding: 100px 0
}

#owl-two {
    margin: 5% 0
}

.quote {
    position: absolute;
    left: 15rem
}

.submit-btn #rightt {
    color: #fff
}

.submit-btn:hover #rightt {
    color: #000
}

.submit-btn:hover {
    background-color: #fff
}

@media(min-width:1200px) and (max-width:1348px) {
    .next-slide {
        left: 69rem
    }
    .navbar-brand {
        margin-right: 33%
    }
    .quote {
        left: 12rem
    }
    .owl-carousel .item .text {
        width: 70%
    }
    #creative h3,
    #design h3 {
        width: 93%
    }
   
}

@media (min-width:992px) and (max-width:1199.98px) {
    .owl-carousel .item .text {
        width: 95%
    }
    #creative h3,
    #design h3 {
        width: 93%
    }
    .next-slide {
        left: 56rem
    }
    .quote {
        left: 9rem
    }
    .owl-next .ns {
        left: 56rem
    }
    .owl-carousel .item .text {
        padding-top: 30%
    }
    .navbar-brand {
        margin-right: 19%
    }
    .nav-item {
        padding: 0 .2rem
    }
   
}

@media (min-width:768px) and (max-width:991.98px) {
    .owl-carousel .item .text {
        width: 95%
    }
    #creative h3,
    #design h3,
    #love h3 {
        width: 100%
    }
    .next-slide {
        left: 42.3rem;
        top: 85%
    }
    .quote {
        left: 6rem
    }
    .owl-next .ns {
        left: 39rem
    }
    #owl-three .item .row img {
        max-width: 18%;
        border-radius: 50%
    }
    #owl-two .item {
        border-left: 1px solid #e9e9e9;
        padding: 20%;
        height: 6em
    }
    .owl-carousel .item .text {
        padding-top: 45%;
        padding-left: 5%
    }
    #creative .row .col {
        padding: 3% 0
    }
    .navbar-light .navbar-toggler {
        color: #000;
        border-color: transparent
    }
    .owl-carousel .item h3 {
        font-size: 50px
    }
    #creative h3,
    #design h3,
    #feel h3,
    #focus h3,
    #love h3 {
        font-size: 44px
    }
    #social-links .aa .ab {
        padding: 2% 0
    }
    #position {
        line-height: 3.5
    }
    .navbar-nav li a {
        line-height: 10px;
        }
}

@media (min-width:576px) and (max-width:767.98px) {
    .next-slide {
        left: 30rem;
        top: 85%
    }
    .owl-dots {
        position: absolute;
        left: 36%;
        top: 85%
    }
    .gal {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 1
    }
    .quote {
        position: absolute;
        left: 3rem
    }
    #owl-three .item .row img {
        max-width: 20%;
        border-radius: 50%
    }
    .owl-next .ns {
        left: 29rem
    }
    #owl-two .item {
        border-left: 1px solid #e9e9e9;
        padding: 20%;
        height: 7em
    }
    #focus .counter ul li p {
        font-family: Heebo;
        font-size: 37px
    }
    .owl-carousel .item .text {
        padding-top: 40%;
        padding-left: 5%
    }
    .navbar-light .navbar-toggler {
        color: #000;
        border-color: transparent
    }
    .owl-carousel .item h3 {
        font-size: 38px
    }
    #creative h3,
    #design h3,
    #feel h3,
    #focus h3,
    #love h3 {
        font-size: 25px;
        line-height: 32.6px
    }
    .owl-carousel .item {
        height: 80vh
    }
    .owl-carousel .item .text {
        width: 100%
    }
    #creative h3,
    #design h3 {
        width: 93%
    }
    #position {
        line-height: 3.5
    }
}

@media (min-width:320px) and (max-width:575.98px) {
    .owl-carousel .item h3 {
        font-size: 30px
    }
    #creative h3,
    #design h3,
    #feel h3,
    #focus h3,
    #love h3,
    .owl-carousel .item h3 {
        font-size: 25px;
        line-height: 32.6px
    }
    .owl-carousel .item {
        height: 85vh
    }
    .owl-carousel .item .text {
        padding-top: 60%;
        padding-left: 5%
    }
    .owl-theme .owl-dots .owl-dot span {
        width: 21px
    }
    .owl-dots {
        position: absolute;
        left: 31%
    }
    .next-slide {
        left: 14rem
    }
    .quote img {
        width: 50%
    }
    .quote {
        left: 0
    }
    #owl-two .item {
        border-left: 1px solid #e9e9e9;
        padding: 20%;
        height: 4em
    }
    .owl-next .ns {
        left: 16rem
    }
    .next-slide,
    .owl-dots,
    .prev-slide {
        display: none
    }
    #focus .counter ul li p {
        font-size: 19px
    }
    #focus .counter ul li span {
        font-size: 15px;
        margin: 0 2px
    }
    #owl-three .item .row img {
        max-width: 32%;
        border-radius: 50%
    }
    
    .gal3 {
        display: none
    }
    
    #feel {
        padding: 5%
    }
    #form {
        padding-bottom: 3%
    }
    #design .head-para p
    {
        text-align: end;
    }
    .navbar-nav li a {
    line-height: 10px;
    }
}