#cursor,
#mouse-circle,
.slick-slide.dragging img {
    pointer-events: none
}

a,
body,
font,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    font-family: 'Roboto Slab', serif
}

.logodesign-btn,
.webdesign-btn {
    width: 90px;
    height: 100vh;
    top: 0;
    position: fixed
}

.side-button-style span,
a {
    transition-duration: .3s
}

.home-servie-section .home-service-item.logodesign:hover .servicecarousel,
.home-servie-section .home-service-item.webdesign:hover .servicecarousel,
.home-servie-section .home-service-item.wordpresswebsite:hover .servicecarousel,
.speakon-phone:hover {
    animation-play-state: paused
}

#cursor,
.slick-slider {
    box-sizing: border-box
}

@font-face {
    font-family: Playfair;
    src: url(../font/PlayfairDisplay-Medium.woff);
    font-weight: 500
}

@font-face {
    font-family: Roboto Slab;
    src: url(../font/RobotoSlab-Regular.woff);
    font-weight: 400
}

@font-face {
    font-family: Roboto Slab;
    src: url(../font/RobotoSlab-Medium.woff);
    font-weight: 500
}

@font-face {
    font-family: Roboto Slab;
    src: url(../font/RobotoSlab-Bold.woff);
    font-weight: 700
}

.contact-content .col-lg-3 p,
.home-servie-section .col-lg-8 .row,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0
}

body {
    --ColourOne: #f27d58;
    --ColourTwo: #bb4246;
    --ColourThree: #00c0ad;
    --BlackColour: #2c2c2c;
    --YellowColour: #ffc72c;
    --heading-font: Playfair;
    --BgImage: url(../img/bg-rep.jpg) repeat #f7efed;
    --BgImageNight: url(../img/bg-night.jpg) repeat #f7efed
}

.daybg,
.daybg #wave-animation,
.daybg .footer-scroll-wrap,
.daybg .footer-scroll-wrap:before,
.daybg .scrolling-contents,
.daybg.f-nav .header-topdiv,
.navbar .dropdown-menu {
    background: var(--BgImage)
}

.nightbg,
.nightbg #wave-animation,
.nightbg .footer-scroll-wrap,
.nightbg .footer-scroll-wrap:before,
.nightbg .scrolling-contents,
.nightbg.f-nav .header-topdiv {
    background: var(--BgImageNight)
}

.nightbg .contact-content .col-lg-3 p a,
.nightbg .contact-middle-wrap .col-lg-12 textarea,
.nightbg .contact-middle-wrap .col-lg-6 input,
.nightbg .faq-style .card button,
.nightbg .footer-scroll-wrap h6,
.nightbg .footer-scroll-wrap h6 a,
.nightbg .footer-topdiv .col-lg-3 p a,
.nightbg .footer-topdiv .col-lg-3 ul li a,
.nightbg .footer-topdiv .col-lg-4 ul li a,
.nightbg .header-topdiv .navbar-nav li a,
.nightbg .scroll-bottom-btn h6,
.nightbg .scrolling-contents .container-fluid,
.nightbg .speakon-phone,
.nightbg .works-item h6,
.nightbg p {
    color: #9d9da0
}

.nightbg .card {
    border: 1px solid #383838
}

.nightbg .faq-style .card button.collapsed:after,
.nightbg .faq-style .card button:after,
.nightbg .faq-style .card button:before,
.nightbg .works-tab .nav-link.active {
    background: #9d9da0
}

.nightbg .works-tab .nav-link {
    color: #9d9da0;
    border-color: #9d9da0
}

.nightbg .contact-content .col-lg-3 span {
    outline-color: var(--YellowColour)
}

.footertop-buttons .col-lg-6 a:hover svg,
.letstalk-wrapper .col-lg-4 a:hover path,
.menu-yellow-middle-align .col-lg-5 a:hover .st0,
.nightbg .contact-content .col-lg-3 path {
    fill: var(--YellowColour)
}

.nightbg .bespoke-anim,
.nightbg .bgcheck,
.nightbg .boy-anim,
.nightbg .boy-eyes,
.nightbg .buddhaimage .st0,
.nightbg .clock-anim,
.nightbg .clock-anim-cover,
.nightbg .cloud-one,
.nightbg .cloud-two,
.nightbg .code-icon,
.nightbg .featured-projects-con p path,
.nightbg .footer-scroll-wrap h6 font .st0,
.nightbg .footer-topdiv .col-lg-2 .st0,
.nightbg .handshake-icon .hand-anim,
.nightbg .menu-iconbg,
.nightbg .pathcircle path,
.nightbg .scroll-bottom-btn .st0,
.nightbg .service-more path {
    fill: #9d9da0
}

.nightbg .scroll-bottom-btn:before {
    border-color: #9d9da0
}

.nightbg #wave-animation .wave-svg {
    fill: #515156
}

.nightbg .footer-scroll-wrap {
    border-color: #515156
}

.nightbg .clientsay-wrapper h2,
.nightbg .clientsay-wrapper h6,
.nightbg .featured-projects-con h2,
.nightbg .footer-topdiv h4,
.nightbg .home-servie-section .service-left span h2,
.nightbg .success-into-business h2 {
    color: #d8d8d9
}

.nightbg .inner-page-banner h2 font,
.works-tab .nav-link.active {
    color: #fff
}

.nightbg .header-topdiv .headerlogo .st0,
.nightbg .hosting-image .st0,
.nightbg .hosting-image .st3,
.nightbg .wordpresshosting-banner .st5 {
    fill: #d8d8d9
}

.nightbg .home-banner-wrap h1 {
    color: #fff;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, .15)
}

.nightbg .footertop-buttons .col-lg-6 a:hover {
    background: var(--BgImageNight) !important
}

.nightbg .wemake-things {
    background: url(../img/wemake-things-circle-white.svg) no-repeat
}

.nightbg .footerbtm-con,
.nightbg .success-into-business {
    background: rgba(0, 0, 0, .25)
}

.nightbg .testimonials-scroll .slick-dots li.slick-active button {
    background: #d8d8d9
}

.nightbg .testimonials-scroll .slick-dots li button {
    border-color: #d8d8d9
}

.nightbg .contact-middle-wrap,
.nightbg .innerpage-works,
.nightbg .ourmission-vision-wrapper,
.nightbg .works-item h6 {
    background: rgba(0, 0, 0, .35)
}

.nightbg .header-topdiv .dropdown-menu {
    background: #111014
}

.nightbg .aboutimage-rowone .st0,
.nightbg .sendmessage-image .st0,
.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
    opacity: .25
}

.nightbg .aboutimage-rowone .st16,
.nightbg .aboutimage-rowone .st19,
.nightbg .hosting-image .st2,
.nightbg .logo-bottom-image .st0,
.nightbg .logo-svgcolor-one #Book_shelf .st0,
.nightbg .logo-svgcolor-one .st9,
.nightbg .whatwedo-img #Floor .st0,
.nightbg .whatwedo-img #cogwheel .st0,
.nightbg .whatwedo-img #cogwheel .st3,
.nightbg .whatwedo-img #cogwheel .st4,
.nightbg .whatwedo-img .st1,
.nightbg .whatwedo-img .st19,
.nightbg .whatwedo-img .st20,
.nightbg .whychoose-image #Clouds .st0,
.nightbg .whychoose-image #whychoose-dialogue .st2,
.nightbg .whychoose-image #whychoose-dialogue .st6,
.nightbg .whychoose-image #whychoose-plant-top .st2 {
    stroke: #d8d8d9
}

.featured-projects-con p a:hover path,
.home-service-item.wordpresswebsite .servicecarousel font:hover path,
.nightbg .hosting-image #wordpress .st8,
.nightbg .wordpresshosting-banner .st0.wordpress-logo,
.scroll-bottom-btn:hover .st0,
.service-more:hover path,
.side-button-style span svg .st0,
.wordpresshosting-banner .st6 {
    fill: var(--ColourTwo)
}

.nightbg .hosting-image .st1,
.nightbg .hosting-image .st15,
.nightbg .wordpresshosting-banner .st1,
.nightbg .wordpresshosting-banner .st4 {
    fill: #1b1a1f
}

.nightbg .wordpresshosting-banner .st2 {
    fill: #d8d8d9;
    opacity: .2
}

.nightbg .wordpresshosting-banner .st10 {
    fill: #414044
}

p {
    font-size: 16px;
    line-height: 28px
}

.webdesign-btn {
    background: var(--ColourOne);
    left: 0;
    z-index: 1025
}

.logodesign-btn {
    background: var(--ColourTwo);
    left: 90px;
    z-index: 1030
}

.side-button-style span {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 40px
}

.handshake-container ul li a:hover,
.home-servie-section .home-service-item.logodesign,
.speakon-phone span {
    background: var(--ColourThree)
}

.side-button-style span svg {
    width: 44px;
    height: 44px;
    object-fit: cover;
    margin: 13px
}

.logodesign .servicecarousel .st0,
.side-button-style span svg .st1 {
    fill: #ffffff
}

.side-button-style h4 {
    font-size: 32px;
    transform: translate(0, 0) rotate(180deg);
    width: 60px;
    color: #fff;
    writing-mode: vertical-lr;
    text-align: left !important;
    padding: 45px 0 0;
    margin: 0;
    position: absolute;
    left: 0;
    height: 100%;
    font-weight: 400
}

.side-button-style:hover span {
    top: 180px
}

.homepage {
    overflow-x: hidden
}

.footer-scroll-wrap {
    height: 45px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid var(--BlackColour);
    z-index: 400
}

.footer-scroll-wrap h6 {
    padding: 0;
    margin: 12px 0 0;
    font-size: 15px;
    position: relative;
    z-index: 390;
    color: var(--BlackColour);
    font-weight: 500
}

.footer-scroll-wrap h6 a,
.footer-topdiv .col-lg-3 p a,
.footer-topdiv .col-lg-4 ul li a {
    color: var(--BlackColour);
    text-decoration: none
}

.faq-style .card button:hover,
.footer-scroll-wrap h6 a:hover,
.header-topdiv .navbar-nav li a:hover,
.scroll-bottom-btn:hover h6,
.speakon-phone:hover {
    color: var(--ColourTwo)
}

.footer-scroll-wrap marquee {
    position: relative;
    z-index: 500
}

.footer-scroll-wrap:before {
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    top: -21px;
    content: '';
    z-index: 390
}

.footer-scroll-wrap h6 font {
    width: 20px;
    height: 14px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    top: 2px;
    margin-left: 45px;
    margin-right: 45px;
    transform: rotate(180deg)
}

.home-banner-wrap h1,
.home-banner-wrap h1 font {
    margin: 0;
    font-family: var(--heading-font), sans-serif;
    font-size: 80px;
    padding: 0;
    font-weight: 500
}

.footer-scroll-wrap h6 font svg {
    height: 14px;
    position: relative;
    left: -10px;
    animation: 1s infinite footerarrow-anim
}

@keyframes footerarrow-anim {
    0% {
        left: 0
    }

    100% {
        left: -11px
    }
}

.buddhaimage .st0,
.footer-scroll-wrap h6 font .st0,
.footer-topdiv .col-lg-2 .st0,
.header-topdiv .headerlogo .st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--BlackColour)
}

.home-banner-wrap {
    height: 100vh;
    position: fixed;
    width: 100%;
    padding-left: 180px
}

.home-banner-wrap .container-fluid {
    height: 100vh;
    display: table;
    position: relative
}

.header-topdiv .headerlogo,
.header-topdiv .headerlogo svg {
    width: 93px;
    height: 115px;
    transition-duration: .3s
}

.hometext-middlealign {
    width: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    z-index: 2;
    position: relative
}

.home-banner-wrap h1 {
    height: 175px
}

.clientsay-wrapper h2,
.featured-projects-con h2,
.success-into-business h2 {
    font-size: 70px;
    color: var(--BlackColour)
}

.home-banner-wrap h1 font {
    width: 100%;
    position: absolute;
    left: 0
}

.yellow-circle {
    width: 440px;
    height: 440px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -220px;
    margin-left: -220px
}

.st0 {
    fill: #FFC72C
}

.bgcheck,
.boy-anim,
.boy-eyes,
.email-icon,
.facebook-icon,
.instagram-icon,
.linkedin-icon,
.logodesign .servicecarousel .st0,
.menu-iconbg,
.scroll-bottom-btn .st0,
.whatsapp-icon {
    fill-rule: evenodd;
    clip-rule: evenodd
}

.yellow-circle path {
    animation: 8s infinite alternate square-tocircle;
    d: path("M439,220.5c0,53.7-19.3,103-51.4,141.1C347.3,409.6,287,440,219.5,440c-64.4,0-107.3-38.8-147.5-83 C36.6,318,0,277.3,0,220.5c0-62,40.7-107.6,82-147.5c39.5-38.1,78.3-72,137.5-72C281.3,1,331.1,42.9,371,84 C409.4,123.5,439,161.1,439,220.5z")
}

.featured-projects-con p path,
.home-service-item .servicecarousel font path,
.letstalk-wrapper .col-lg-4 a path,
.service-more path {
    d: path("M37.5,18.1c0,0-8.7,3.8-8.5,14.8h3.2c0,0-1.2-12.5,15.1-15H50v-3h-2.9c0,0-14.8-0.4-14.9-14.7H29	c0,0-0.4,10.6,8.7,14.9H0v3H37.5z")
}

@keyframes square-tocircle {
    0% {
        d: path("M439,220.5c0,53.7-19.3,103-51.4,141.1C347.3,409.6,287,440,219.5,440c-64.4,0-107.3-38.8-147.5-83 C36.6,318,0,277.3,0,220.5c0-62,40.7-107.6,82-147.5c39.5-38.1,78.3-72,137.5-72C281.3,1,331.1,42.9,371,84 C409.4,123.5,439,161.1,439,220.5z")
    }

    20% {
        d: path("M422,220c0,53.7-2.3,103.5-34.4,141.6C347.3,409.6,287,440,219.5,440c-64.4,0-125.3-31.8-165.5-76		C18.6,325,0,277.3,0,220.5c0-62,21.7-117.6,63-157.5c39.5-38.1,97.3-62,156.5-62C281.3,1,331.1,42.9,371,84		C409.4,123.5,422,160.6,422,220z")
    }

    40% {
        d: path("M434,220c0,53.7-14.3,103.5-46.4,141.6C347.3,409.6,287,440,219.5,440c-64.4,0-106.3-51.8-146.5-96		C37.6,305,0,277.3,0,220.5c0-62,39.7-105.6,81-145.5c39.5-38.1,79.3-74,138.5-74C281.3,1,329.1,20.9,369,62		C407.4,101.5,434,160.6,434,220z")
    }

    60% {
        d: path("M434,220c0,53.7,9.1,126.9-23,165c-40.3,48-124,34-191.5,34c-64.4,0-113.3,26.2-153.5-18		C30.6,362,0,272.8,0,216c0-62,35.7-97.1,77-137c39.5-38.1,83.8-74,143-74c61.8,0,99.1,8.9,139,50C397.4,94.5,434,160.6,434,220z")
    }

    80% {
        d: path("M434,220c0,53.7-1.9,107.9-34,146c-40.3,48-113,74-180.5,74c-64.4,0-148.3-34.8-188.5-79		c-35.4-39-18-83.7-18-140.5c0-62,2.7-116.6,44-156.5c39.5-38.1,103.8-52,163-52c61.8,0,101.1,11.9,141,53		C399.4,104.5,434,160.6,434,220z")
    }

    100% {
        d: path("M434,220c0,53.7-24.9,82.9-57,121c-40.3,48-90,99-157.5,99c-64.4,0-101.3-45.8-141.5-90		C42.6,311,0,272.8,0,216c0-62,29.7-106.1,71-146c39.5-38.1,89.8-65,149-65c61.8,0,117.1,2.9,157,44C415.4,88.5,434,160.6,434,220z")
    }
}

.header-topdiv {
    position: fixed;
    top: 40px;
    z-index: 1020;
    width: 100%;
    left: 0;
    padding-left: 220px;
    padding-right: 40px;
    transition-duration: .3s
}

.header-topdiv .headerlogo {
    position: relative;
    display: inline-block
}

.header-topdiv .navbar-nav {
    width: 100%;
    padding: 0;
    margin: 20px 0 0;
    display: block;
    text-align: right;
    transition-duration: .3s
}

.header-topdiv .navbar-nav li {
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top
}

.header-topdiv .navbar-nav li a,
.navbar-expand-lg .navbar-nav .nav-link {
    padding: 0 30px;
    color: var(--BlackColour);
    outline: 0 !important
}

.header-topdiv .col-lg-8,
.parallax-wrap {
    position: relative
}

.navbar {
    padding: 0 45px 0 0
}

.f-nav .header-topdiv .navbar-nav li {
    margin-top: 5px
}

.header-topdiv .menu-icon {
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 0 15px 0 20px;
    border: none;
    background: 0 0;
    outline: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 16px
}

.header-topdiv .menu-icon:hover .menu-iconbg {
    animation-play-state: paused;
    fill: var(--ColourTwo)
}

@keyframes menu-icon-anim {

    0%,
    100% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(180deg)
    }
}

.menu-iconbg {
    animation: 6s linear infinite menu-icon-anim;
    transform-origin: center;
    transform-box: fill-box
}

.wemake-things {
    width: 150px;
    height: 150px;
    background: url(../img/wemake-things-circle.svg) 0 0/150px 150px no-repeat;
    position: fixed;
    top: 160px;
    right: 40px;
    z-index: 10
}

.pathcircle {
    width: 150px;
    height: 150px;
    position: relative;
    animation: 10s linear infinite rotation;
    transform-origin: center center
}

.bespoke-anim,
.clock-anim,
.clock-anim-cover,
.cloud-one,
.cloud-two,
.code-icon,
.contact-content .col-lg-3 path,
.handshake-icon .hand-anim,
.menu-icon-modal .menu-iconbg,
.pathcircle path,
.wordpresshosting-banner .st0,
.wordpresshosting-banner .st13,
.wordpresshosting-banner .st15 {
    fill: var(--BlackColour)
}

.banner-image-left .st4,
.banner-image-right .st3,
.buddhaimage,
.handshake-container:hover .hand-anim,
.handshake-icon:hover .hand-anim,
.home-service-item.webdesign .servicecarousel font:hover path {
    fill: var(--ColourOne)
}

@keyframes rotation {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.buddhaimage {
    width: 44px !important;
    height: 62px !important;
    position: absolute;
    left: 52px;
    top: 42px;
    animation: 2.5s infinite alternate buddha-anim
}

@keyframes buddha-anim {
    0% {
        top: 34px
    }

    100% {
        top: 50px
    }
}

#cursor {
    width: 20px;
    height: 20px;
    border: 2px solid var(--BlackColour);
    transition: .1s;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

#wave-animation {
    position: fixed;
    width: 200px;
    height: 41px;
    bottom: 24px;
    left: 48.85%;
    margin-left: -100px;
    z-index: 395
}

#wave-animation .wave-svg {
    fill: #000
}

.homepage .header-topdiv:hover~#box-shadow {
    width: 100px !important;
    height: 100px !important;
    background: var(--ColourThree) !important
}

.handshake-container {
    position: fixed;
    left: 230px;
    bottom: 80px;
    z-index: 3;
    width: 120px;
    height: 120px
}

.handshake-container ul li:nth-child(5),
.handshake-icon {
    left: 0;
    bottom: 0
}

.handshake-icon {
    width: 46px;
    height: 46px;
    border: none;
    background: 0 0;
    animation-name: wave-animations;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block;
    z-index: 3;
    position: absolute;
    outline: 0 !important;
    cursor: pointer;
    padding: 0 !important
}

.footer-topdiv .col-lg-3 ul,
.handshake-container ul,
.testimonials-item h6 {
    width: 100%;
    padding: 0;
    margin: 0
}

.handshake-container:hover li,
.slick-dots li button:focus:before,
.slick-dots li button:hover:before,
.slick-next:focus:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-prev:hover:before,
.works-item:hover:before {
    opacity: 1
}

.handshake-container ul li {
    list-style: none;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    transition-duration: .3s
}

.handshake-container ul li a {
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 50%;
    text-align: center;
    line-height: 35px
}

.handshake-container ul li a svg {
    height: 18px;
    margin-top: 8px
}

.handshake-container:hover ul li:nth-child(5) {
    left: 90px;
    bottom: 0
}

.handshake-container ul li:first-child,
.handshake-container ul li:nth-child(2),
.handshake-container ul li:nth-child(3),
.handshake-container ul li:nth-child(4) {
    left: 0;
    top: 90px
}

.handshake-container:hover ul li:first-child {
    left: 0;
    top: -6px
}

.handshake-container:hover ul li:nth-child(3) {
    left: 64px;
    top: 23px
}

.handshake-container:hover ul li:nth-child(2) {
    left: 34px;
    top: 6px
}

.handshake-container:hover ul li:nth-child(4) {
    left: 80px;
    top: 52px
}

.handshake-container ul li:first-child:hover a {
    background: #385596
}

.handshake-container ul li:nth-child(2):hover a {
    background: #ff0064
}

.handshake-container ul li:nth-child(3):hover a,
.mobilefooter-fixed li:first-child a {
    background: #0073b1
}

.handshake-container ul li:nth-child(4):hover a {
    background: #00baf6
}

.handshake-container ul li:nth-child(5):hover a,
.mobilefooter-fixed li:nth-child(2) a {
    background: #28a219
}

.handshake-container ul li:first-child:hover .facebook-icon,
.handshake-container ul li:nth-child(2):hover .instagram-icon,
.handshake-container ul li:nth-child(3):hover .linkedin-icon,
.handshake-container ul li:nth-child(4):hover .email-icon,
.handshake-container ul li:nth-child(5):hover .whatsapp-icon,
.mobilefooter-fixed li a .whatsapp-icon,
.whatsapp-sticky .whatsapp-icon {
    fill: #fff
}

.facebook-icon {
    fill: #385596
}

.instagram-icon {
    fill: #ff0064
}

.whatsapp-icon {
    fill: #28a219
}

.email-icon {
    fill: #00baf6
}

.linkedin-icon {
    fill: #0073b1
}

@keyframes wave-animations {

    0%,
    100%,
    60% {
        transform: rotate(0)
    }

    10%,
    30% {
        transform: rotate(14deg)
    }

    20% {
        transform: rotate(-8deg)
    }

    40% {
        transform: rotate(-4deg)
    }

    50% {
        transform: rotate(10deg)
    }
}

.speakon-phone {
    position: fixed;
    right: 180px;
    bottom: 220px;
    font-size: 20px;
    color: var(--BlackColour);
    text-decoration: none;
    font-weight: 500;
    padding: 0;
    margin: 0;
    line-height: 24px;
    z-index: 10;
    display: block;
    animation: 8s infinite alternate speak-anim
}

.speakon-phone span {
    position: absolute;
    left: -190px;
    top: 6px;
    color: #000;
    padding: 5px 15px;
    border-radius: 20px 0 20px 20px;
    opacity: 0;
    transition-duration: .3s;
    width: 0;
    white-space: nowrap;
    overflow: hidden
}

.speakon-phone:hover span {
    opacity: 1;
    width: 176px
}

@keyframes speak-anim {

    0%,
    100% {
        right: 180px;
        bottom: 220px
    }

    20% {
        right: 100px;
        bottom: 200px
    }

    40% {
        right: 180px;
        bottom: 230px
    }

    60% {
        right: 220px;
        bottom: 190px
    }

    80% {
        right: 200px;
        bottom: 200px
    }
}

.scrolling-contents {
    width: 100%;
    min-height: auto;
    position: relative;
    z-index: 20;
    display: block;
    top: 100vh;
    padding: 0 0 65px 180px;
    margin: 0;
    -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .15)
}

.scrolling-contents .container-fluid {
    padding-left: 50px;
    padding-right: 50px
}

.letstalk-wrapper {
    width: 100%;
    height: 185px;
    background: var(--ColourTwo)
}

.letstalk-wrapper .col-lg-8 h3 {
    padding: 0;
    margin: 50px 0 0;
    color: #fff;
    font-size: 32px;
    font-weight: 400
}

.clientsay-wrapper h2,
.featured-projects-con h2,
.letstalk-wrapper .col-lg-4 a,
.success-into-business h2 {
    font-family: var(--heading-font), sans-serif;
    font-weight: 500
}

.letstalk-wrapper .col-lg-4 a {
    float: right;
    padding: 0 65px 0 0;
    margin: 60px 0 0;
    color: #fff;
    font-size: 42px;
    line-height: normal;
    text-decoration: none;
    position: relative
}

.footertop-buttons .col-lg-6 a:hover h6,
.letstalk-wrapper .col-lg-4 a:hover,
.menu-yellow-middle-align .col-lg-5 a:hover h6 {
    color: var(--YellowColour)
}

.letstalk-wrapper .col-lg-4 a:hover svg {
    right: -15px
}

.featured-projects-con p a,
.letstalk-wrapper .col-lg-4 a svg {
    width: 50px;
    height: 30px;
    position: absolute;
    top: 14px;
    right: 0;
    transition-duration: .3s
}

.aboutimage-rowone .st9,
.banner-image-right .st0,
.letstalk-wrapper .col-lg-4 a path,
.sendmessage-image .st5,
.whatwedo-img .st13,
.whychoose-image .st19,
.wordpresshosting-banner .st11 {
    fill: #FFFFFF
}

.featured-projects-con h2 {
    width: 100%;
    padding: 0;
    margin: 0 0 40px;
    text-align: center
}

.featured-projects-con p {
    text-align: right;
    padding: 0 75px 0 0;
    margin: 0 0 60px;
    position: relative
}

.featured-projects-con p a svg,
.service-more svg {
    width: 50px;
    height: 30px
}

.featured-projects-con p path,
.home-service-item .servicecarousel font path,
.service-more path {
    fill: var(--BlackColour);
    transition-duration: .3s
}

.featured-projects-con .col-lg-4 a {
    width: 100%;
    height: auto;
    background: var(--BlackColour);
    border-radius: 4px;
    float: left;
    overflow: hidden;
    position: relative
}

.featured-projects-con .col-lg-4 a img,
.works-wrapper .col-lg-3 img,
.works-wrapper .col-lg-4 img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.featured-projects-con {
    padding-top: 0;
    margin-bottom: 120px
}

.success-into-business {
    width: 100%;
    background: rgba(0, 0, 0, .05);
    padding: 100px 0 120px;
    margin-bottom: 100px
}

.success-into-business .col-lg-4 {
    text-align: justify;
    display: table
}

.custom-wordpress-website p:last-child,
.footer-topdiv .col-lg-4 ul li:last-child,
.success-into-business .col-lg-4 p:last-child {
    margin-bottom: 0
}

.success-into-business h2 {
    width: 100%;
    padding: 0;
    margin: 0 0 55px;
    text-align: center
}

.homevideo-wrapper,
.whychoose-wrapper {
    margin-top: 120px
}

.clientsay-wrapper {
    text-align: center;
    margin-top: 110px
}

.clientsay-wrapper h2 {
    width: 100%;
    padding: 0;
    margin: 0 0 35px;
    text-align: center
}

.clientsay-wrapper h6 {
    padding: 0;
    margin: 20px 0 0;
    font-style: normal
}

.clientsay-wrapper p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical
}

.clientsay-wrapper .row {
    margin-left: -45px;
    margin-right: -45px;
    padding-top: 20px
}

.clientsay-wrapper .col-lg-4 {
    padding-left: 45px;
    padding-right: 45px;
    text-align: justify;
    font-style: italic
}

.footertop-wrapper {
    width: 100%;
    background: var(--YellowColour);
    margin-top: 120px
}

.footertop-buttons .col-lg-6 a {
    width: 100%;
    padding: 45px 0 45px 45px;
    margin: 0;
    text-align: left;
    background: 0 0;
    border: none;
    outline: 0;
    color: var(--BlackColour);
    text-decoration: none;
    font-size: 28px;
    float: left;
    height: auto
}

.footertop-buttons .col-lg-6 a:hover {
    background: var(--BlackColour) !important
}

.footertop-buttons .col-lg-6 a h6 {
    font-size: 22px;
    padding: 0;
    margin: 0
}

.haveproject-text span h2,
.home-servie-section .service-left span h2 {
    text-align: left;
    font-size: 70px;
    padding: 0;
    font-weight: 500;
    color: var(--BlackColour);
    font-family: var(--heading-font), sans-serif
}

.footertop-buttons .col-lg-6 a span {
    width: 100%;
    margin-bottom: 25px;
    display: block;
    transition-duration: .3s
}

.footertop-buttons .col-lg-6 a:hover span {
    padding-left: 45px
}

.footertop-buttons .col-lg-6 a span svg {
    height: 80px;
    fill: var(--BlackColour);
    position: relative;
    transition: transform .8s;
    transform-style: preserve-3d
}

.footertop-buttons .col-lg-6:first-child a span svg {
    animation: 6s linear infinite footersvg1
}

@keyframes footersvg1 {

    0%,
    100%,
    40%,
    60% {
        transform: rotateY(0)
    }

    50% {
        transform: rotateY(180deg)
    }
}

.footertop-buttons .col-lg-6:nth-child(2) a span svg {
    animation: 5s linear infinite footersvg2
}

@keyframes footersvg2 {

    0%,
    100%,
    20%,
    40% {
        transform: rotateY(0)
    }

    30% {
        transform: rotateY(180deg)
    }
}

.footertop-buttons .col-lg-6:nth-child(4) a span svg {
    animation: 5s linear infinite footersvg3
}

@keyframes footersvg3 {

    0%,
    100%,
    50%,
    70% {
        transform: rotateY(0)
    }

    60% {
        transform: rotateY(180deg)
    }
}

.footertop-buttons .col-lg-6:nth-child(3) a span svg {
    animation: 3s linear infinite footersvg4
}

@keyframes footersvg4 {

    0%,
    100%,
    80% {
        transform: rotateY(0)
    }

    90% {
        transform: rotateY(180deg)
    }
}

.footertop-buttons .col-lg-6 a:hover span svg {
    transform: rotateY(180deg)
}

.footertop-buttons .row {
    margin: 0
}

.footertop-buttons .row .col-lg-6,
.home-servie-section .col-lg-8 .row .col-lg-4 {
    padding: 0
}

.footertop-wrapper .container-fluid {
    padding-right: 0
}

.footertop-buttons .row .col-lg-6:first-child,
.footertop-buttons .row .col-lg-6:nth-child(2) {
    border-bottom: 1px solid var(--BlackColour);
    border-left: 1px solid var(--BlackColour)
}

.footertop-buttons .row .col-lg-6:nth-child(3),
.footertop-buttons .row .col-lg-6:nth-child(4) {
    border-left: 1px solid var(--BlackColour)
}

.about-toprow .col-lg-6:last-child,
.aboutrow-two-text,
.custom-wordpress-website .col-lg-6,
.haveproject-text,
.logo-image-topone,
.sendus-message,
.whychoose-wrapper .col-lg-6:last-child,
.wordpresswebsite-topcontent .col-lg-6 {
    display: table
}

.about-toprow .col-lg-6:first-child span font,
.aboutrow-two-text span,
.custom-website-middle,
.haveproject-text span,
.home-servie-section .service-left span,
.hosting-image,
.menu-yellow-middle-align,
.sendus-message span,
.success-into-business .col-lg-4 span {
    width: 100%;
    display: table-cell;
    vertical-align: middle
}

.haveproject-text span h2 {
    width: 100%;
    margin: 0 0 30px
}

.haveproject-text span h5 {
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    color: var(--BlackColour);
    font-size: 26px
}

.footerbtm-con {
    width: 100%;
    height: 75px;
    background: rgba(0, 0, 0, .05);
    text-align: center;
    line-height: 75px
}

.footer-topdiv {
    margin-top: 80px;
    margin-bottom: 80px
}

.footer-topdiv .col-lg-2 svg {
    width: 102px
}

.footer-topdiv h4 {
    width: 100%;
    padding: 0;
    margin: 0 0 20px;
    font-size: 22px
}

.footer-topdiv .col-lg-4 ul {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block
}

.footer-topdiv .col-lg-4 ul li {
    list-style: none;
    padding: 0;
    margin: 0 0 5px;
    width: 50%;
    display: inline-block;
    float: left
}

.footer-topdiv .col-lg-2 img {
    height: 120px;
    width: auto;
    margin-top: 4px
}

.footer-topdiv .col-lg-4 ul li a:hover {
    text-decoration: underline
}

.footer-topdiv .col-lg-3 ul li {
    list-style: none;
    width: auto;
    display: inline-block;
    margin-right: 15px
}

.footer-topdiv .col-lg-3 ul li:last-child {
    margin-right: 0
}

.footer-topdiv .col-lg-3 ul li a {
    color: var(--BlackColour)
}

.footer-topdiv .col-lg-3 p {
    margin-bottom: 0;
    padding: 0
}

.inner {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 20%;
    left: 10%;
    background: red
}

.contact-middle-wrap,
.innerpage-works,
.ourmission-vision-wrapper,
.works-item h6 {
    background: rgba(0, 0, 0, .05)
}

.success-into-business .col-lg-8 {
    padding-right: 75px;
    position: relative
}

.bgcheck {
    opacity: .1;
    fill: var(--BlackColour)
}

.boy-anim {
    fill: #2C2C2C;
    transform: translateY(20px);
    animation: 4s linear infinite tower
}

@keyframes tower {

    0%,
    100% {
        transform: translateY(20px)
    }

    50% {
        transform: translateY(-10px)
    }
}

.boy-eyes {
    fill: var(--BlackColour);
    animation: 2s linear infinite eyesanim
}

@keyframes eyesanim {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(5px)
    }
}

.cloud-one {
    animation: 10s linear infinite cloudone
}

@keyframes cloudone {

    0%,
    100% {
        transform: translateX(-100px)
    }

    50% {
        transform: translateX(50px)
    }
}

.cloud-two {
    animation: 6s linear infinite cloutwo
}

@keyframes cloutwo {

    0%,
    100% {
        transform: translateX(-15px)
    }

    50% {
        transform: translateX(30px)
    }
}

.code-icon {
    animation: 6s linear infinite codeanim
}

@keyframes codeanim {

    0%,
    100% {
        transform: translateY(20px)
    }

    50% {
        transform: translateY(-10px)
    }
}

.home-servie-section .col-lg-8 {
    padding-top: 100px
}

.home-servie-section .col-lg-8 .col-lg-4 {
    min-height: 560px;
    position: relative
}

.home-servie-section .home-service-item {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

.home-servie-section .home-service-item.webdesign {
    background: var(--ColourOne)
}

.contact-middle-wrap .col-lg-4 button:hover,
.home-servie-section .home-service-item.wordpresswebsite {
    background: var(--ColourTwo)
}

.home-servie-section {
    padding-right: 0 !important
}

.home-servie-section .col-lg-8 .col-lg-4:first-child {
    padding-top: 70px
}

.home-servie-section .col-lg-8 .col-lg-4:nth-child(3) {
    padding-top: 30px
}

.home-servie-section .service-left {
    display: table;
    position: relative
}

.bespoke-website {
    width: 180px;
    height: 180px;
    position: absolute;
    right: -48px;
    bottom: 0;
    overflow: hidden;
    z-index: -1
}

.bespoke-website svg {
    width: 180px;
    height: 180px;
    position: relative;
    left: 40px;
    top: 40px;
    animation: 16s linear infinite cogwheelanim;
    transform-origin: center;
    transform-box: fill-box
}

@keyframes cogwheelanim {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-1080deg)
    }
}

.home-servie-section .service-left span h2 {
    width: 100%;
    margin: 0 0 35px
}

.home-servie-section .service-left a {
    margin-top: 35px;
    display: block
}

.home-servie-section .home-service-item h4 {
    text-decoration: none;
    color: #fff;
    font-size: 3.6vh;
    padding: 0 30px;
    font-weight: 400;
    width: 100%;
    position: absolute;
    top: 50px
}

.home-servie-section .home-service-item.logodesign h4 {
    top: auto;
    bottom: 50px
}

.contact-content .col-lg-3 p a:hover,
.home-servie-section .home-service-item:hover,
.home-servie-section .home-service-item:hover h4,
.works-item:hover {
    text-decoration: none
}

.home-service-item .servicecarousel {
    position: absolute;
    width: 80%;
    background: rgba(0, 0, 0, .05);
    overflow: hidden;
    padding: 6vh
}

.home-service-item .servicecarousel font {
    width: 100px;
    height: 100px;
    background: #fff;
    position: absolute;
    right: -100px;
    bottom: -100px;
    border-radius: 50%;
    transition-duration: .3s;
    padding-top: 24px;
    padding-left: 18px
}

.home-service-item .servicecarousel font svg {
    width: 30px;
    height: 20px
}

.home-service-item.logodesign .servicecarousel font:hover path {
    fill: var(--ColourThree)
}

.home-service-item:hover .servicecarousel font {
    right: -40px;
    bottom: -40px
}

.home-service-item.webdesign .servicecarousel {
    right: 0;
    bottom: 0
}

.home-service-item.logodesign .servicecarousel {
    right: 0;
    top: 30px
}

.home-service-item.wordpresswebsite .servicecarousel {
    right: 10%;
    bottom: 0
}

.home-service-item .servicecarousel img,
.hosting-image svg,
.innerpage-works .col-lg-4 img {
    width: 100%
}

.home-servie-section .home-service-item.webdesign .servicecarousel {
    animation: 6s linear infinite webdesign-anim;
    transform-origin: center;
    transform-box: fill-box
}

@keyframes webdesign-anim {
    0% {
        right: 0
    }

    25% {
        right: 20%;
        bottom: 0
    }

    50% {
        right: 20%;
        bottom: 30px
    }

    75% {
        right: 0;
        bottom: 30px
    }

    100% {
        right: 0;
        bottom: 0
    }
}

.home-servie-section .home-service-item.logodesign .servicecarousel {
    animation: 5s linear infinite logo-anim;
    transform-origin: center;
    transform-box: fill-box
}

@keyframes logo-anim {

    0%,
    100% {
        right: 0;
        top: 30px
    }

    25% {
        right: 0;
        top: 0
    }

    50% {
        right: 20%;
        top: 0
    }

    75% {
        right: 20%;
        top: 30px
    }
}

.home-servie-section .home-service-item.wordpresswebsite .servicecarousel {
    animation: 4s linear infinite wordpressanims;
    transform-origin: center;
    transform-box: fill-box
}

@keyframes wordpressanims {
    0% {
        right: 0
    }

    25% {
        right: 20%;
        bottom: 0
    }

    50% {
        right: 20%;
        bottom: 30px
    }

    75% {
        right: 0;
        bottom: 30px
    }

    100% {
        right: 0;
        bottom: 0
    }
}

.f-nav .header-topdiv {
    top: 0;
    -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .2)
}

.f-nav .header-topdiv .headerlogo {
    height: 50px;
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 2px
}

.f-nav .header-topdiv .headerlogo svg {
    width: 50px;
    position: relative;
    top: 0;
    height: auto
}

.f-nav .header-topdiv .navbar-nav,
.whatwedo-wrapper ul li,
.whychoose-wrapper ul li {
    margin-top: 15px
}

.scroll-bottom-btn {
    position: fixed;
    bottom: 100px;
    z-index: 3;
    right: 28vw;
    text-decoration: none !important;
    padding-left: 50px
}

.scroll-bottom-btn h6 {
    padding: 0;
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--BlackColour)
}

.scroll-bottom-btn:before {
    width: 40px;
    height: 40px;
    border: 1px solid var(--BlackColour);
    border-radius: 50%;
    position: absolute;
    left: 0;
    content: '';
    top: -12px
}

.scroll-bottom-btn svg {
    width: 19px;
    height: 36px;
    position: absolute;
    left: 11px;
    top: -25px;
    animation: 2s infinite alternate scrolldownanim
}

@keyframes scrolldownanim {
    0% {
        top: -30px
    }

    100% {
        top: 10px
    }
}

.scroll-bottom-btn .st0 {
    fill: #2E2E2E
}

.contact-middle-wrap .col-lg-12 textarea:focus,
.contact-middle-wrap .col-lg-6 input:focus,
.scroll-bottom-btn:hover:before {
    border-color: var(--ColourTwo)
}

.logodesign .servicecarousel .st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #00b6a4
}

.logodesign .servicecarousel .logoanim,
.side-button-style span .logoanim {
    animation: 3s linear infinite logo-animation;
    transform-origin: center;
    transform-box: fill-box
}

@keyframes logo-animation {

    0%,
    100% {
        transform: rotate(1deg)
    }

    50% {
        transform: rotate(-10deg)
    }
}

.website-iconanimation .st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff
}

.website-iconanimation .st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff;
    animation: 3s linear infinite webanim-lineone;
    transform-origin: center;
    transform-box: fill-box
}

.website-iconanimation .st2,
.website-iconanimation .st3 {
    fill-rule: evenodd;
    transform-origin: center;
    transform-box: fill-box;
    clip-rule: evenodd
}

@keyframes webanim-lineone {

    0%,
    100% {
        opacity: 0
    }

    20%,
    40%,
    60%,
    80% {
        opacity: 1
    }
}

.website-iconanimation .st2 {
    fill: #fff;
    animation: 3s linear infinite webanim-linetwo
}

@keyframes webanim-linetwo {

    0%,
    100%,
    20% {
        opacity: 0
    }

    40%,
    60%,
    80% {
        opacity: 1
    }
}

.website-iconanimation .st3 {
    fill: #fff;
    animation: 3s linear infinite webanim-linethree
}

@keyframes webanim-linethree {

    0%,
    100%,
    20%,
    40% {
        opacity: 0
    }

    60%,
    80% {
        opacity: 1
    }
}

.website-iconanimation .st4 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff;
    transform: scale(0, 1);
    transform-origin: left;
    transform-box: fill-box;
    animation: 3s linear infinite webanim-linefour
}

@keyframes webanim-linefour {

    0%,
    100% {
        transform: scale(0, 1)
    }

    50% {
        transform: scale(1, 1)
    }
}

.website-iconanimation .st5 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff;
    transform: scale(0, 1);
    transform-origin: left;
    transform-box: fill-box;
    animation: 4s linear infinite webanim-linefive
}

#circle1,
#circle2,
#circle3,
#cogwheel-one,
#cogwheel-two,
#cogwheel1,
#cogwheel2,
#cogwheel3,
#cogwheel4,
#dialogueboxone,
#dialogueboxtwo,
#girlanim,
#key-eight,
#key-five,
#key-four,
#key-nine,
#key-one,
#key-seven,
#key-six,
#key-three,
#key-two,
#left-hand,
#left-line,
#leftleg,
#logo-icon-two,
#logo-plant-one,
#logo-plant-three,
#logo-plant-two,
#logo-righticon-one,
#logo-righticon-three,
#logo-righticon-two,
#plantone,
#planttwo,
#righthand,
#rightleg,
#rocket,
#whychoose-cogwheel,
#whychoose-plant-top,
#wordpress,
.banner-image-left .head-animation,
.flip-animation,
.left-hand-anim,
.left-plant-anim,
.right-hand-anim,
.right-plant-anim,
.wordpress-logo,
.wordpress-outer,
.wordpresslogo {
    transform-box: fill-box
}

#circle1,
#circle2,
#circle3,
#cogwheel-two,
#cogwheel1,
#cogwheel2,
#cogwheel3,
#cogwheel4,
#girlanim,
#left-line,
#rocket,
#wordpress,
.flip-animation,
.wordpress-logo,
.wordpress-outer,
.wordpresslogo {
    transform-origin: center
}

@keyframes webanim-linefive {

    0%,
    100% {
        transform: scale(0, 1)
    }

    50% {
        transform: scale(1, 1)
    }
}

.webdesign-btn .website-iconanimation .st0,
.webdesign-btn .website-iconanimation .st1,
.webdesign-btn .website-iconanimation .st2,
.webdesign-btn .website-iconanimation .st3,
.webdesign-btn .website-iconanimation .st4,
.webdesign-btn .website-iconanimation .st5 {
    fill: var(--ColourOne) !important
}

.wordpresslogo {
    animation: 4s linear infinite wordpresslogo-anim
}

@keyframes wordpresslogo-anim {

    0%,
    100% {
        transform: rotate(-20deg)
    }

    50% {
        transform: rotate(20deg)
    }
}

.wordpresslogo .st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff !important
}

.innerpage-scroll {
    top: 320px;
    padding-top: 40px;
    margin: 0;
    -webkit-box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
    -moz-box-shadow: 0 0 0 0 transparent;
    box-shadow: 0 0 0 0 rgb(0 0 0 / 0)
}

.inner-page-banner h2 {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    display: table-cell;
    vertical-align: middle
}

.inner-page-banner h2 font {
    position: relative;
    font-size: 60px;
    font-family: var(--heading-font), sans-serif;
    font-weight: 500;
    color: var(--BlackColour)
}

.slick-dots li button,
.slick-next,
.slick-prev {
    font-size: 0;
    line-height: 0;
    background: 0 0;
    cursor: pointer
}

.inner-page-banner h2 font::before {
    width: 100px;
    height: 100px;
    background: var(--YellowColour);
    border-radius: 50%;
    position: absolute;
    left: calc(100% - 100px);
    top: -5px;
    content: '';
    z-index: -2;
    -webkit-animation: 6s infinite modconsss;
    animation-timing-function: ease-out
}

.contact-middle-wrap .col-lg-12 textarea,
.contact-middle-wrap .col-lg-6 input {
    border: 1px solid var(--BlackColour);
    padding-left: 10px;
    outline: 0;
    background: 0 0;
    transition-duration: .3s
}

@-webkit-keyframes modconsss {

    0%,
    100% {
        left: 0
    }

    50% {
        left: calc(100% - 100px)
    }
}

.inner-page-banner {
    padding-left: 180px;
    width: 100%;
    height: 320px;
    position: fixed;
    top: 0;
    left: 0;
    display: table;
    padding-top: 70px
}

.about-toprow .col-lg-6:last-child span,
.banner-image-left,
.banner-image-right,
.home-welcome-image font,
.logo-bottom-image,
.logo-svgcolor-one,
.whatwedo-img font,
.whychoose-wrapper .col-lg-6:first-child span font,
.whychoose-wrapper .col-lg-6:last-child span {
    display: table-cell;
    vertical-align: middle
}

.googlemaps {
    position: relative;
    padding-bottom: 30%;
    height: 0;
    overflow: hidden;
    margin: 0
}

.googlemaps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important
}

.contact-middle-wrap {
    width: 100%;
    padding: 100px 0;
    margin-bottom: 100px
}

.contact-middle-wrap .col-lg-6 input {
    width: 100%;
    height: 42px
}

.contact-middle-wrap .col-lg-12 textarea {
    width: 100%;
    height: 120px
}

.contact-middle-wrap .col-lg-4 button {
    width: 100%;
    background: var(--BlackColour);
    color: #fff;
    font-size: 16px;
    border: none;
    outline: 0;
    margin-top: -6px;
    display: inline-block;
    float: left;
    padding: 8px 0;
    transition-duration: .3s;
    cursor: pointer
}

.contact-middle-wrap .col-lg-12,
.contact-middle-wrap .col-lg-6 {
    padding-bottom: 20px
}

.contact-middle-wrap h4 {
    width: 100%;
    padding: 0;
    margin: 0 0 8px
}

.contact-content {
    text-align: center;
    margin-bottom: 100px
}

.contact-content .col-lg-3 {
    margin-top: 30px;
    position: relative
}

.contact-content .col-lg-3 span {
    width: 75px;
    height: 75px;
    outline: 2px solid var(--BlackColour);
    display: inline-block;
    border-radius: 50%;
    margin-bottom: 15px
}

.contact-content .col-lg-3 svg {
    width: 75px;
    height: 75px
}

.contact-content .col-lg-3 p a {
    color: var(--BlackColour);
    text-decoration: none !important
}

.contact-content .col-lg-3 h5 {
    width: 100%;
    font-size: 18px;
    padding: 0;
    margin: 0 0 8px
}

.navbar .dropdown-item {
    padding: 5px 20px !important;
    font-size: 15px
}

.navbar .dropdown-item:hover {
    background: var(--ColourTwo) !important;
    color: #fff !important
}

.innerpage-works {
    width: 100%;
    padding: 100px 0 120px;
    margin-bottom: 0
}

.innerpage-works h3 {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 0 45px;
    font-size: 34px
}

.custom-wordpress-website,
.wordpresswebsite-topcontent {
    text-align: justify;
    margin-bottom: 100px
}

.custom-wordpress-website h3,
.whatwedo-wrapper h3,
.whychoose-wrapper h3,
.wordpresswebsite-topcontent h4 {
    width: 100%;
    text-align: left;
    padding: 0;
    margin: 0 0 20px;
    font-size: 34px
}

.hosting-image .st0,
.wordpresshosting-banner .st5 {
    fill: var(--BlackColour);
    opacity: .1
}

.banner-image-left .st6,
.hosting-image .st1,
.hosting-image .st5,
.hosting-image .st7 {
    fill: #f4ecea
}

.hosting-image .st2 {
    fill: none;
    stroke: #263238;
    stroke-width: 2;
    stroke-miterlimit: 10
}

.hosting-image .st3 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #263238
}

.hosting-image .st4 {
    fill: #455A64
}

.hosting-image .st6 {
    opacity: .6
}

.aboutimage-rowone .st8,
.banner-image-right .st1,
.hosting-image .st8,
.logo-svgcolor-one .st14,
.sendmessage-image .st1,
.whatwedo-img .st9,
.whychoose-image .st3 {
    fill: #263238
}

.hosting-image .st9 {
    fill: #FF725E
}

.hosting-image .st10 {
    opacity: .3
}

.hosting-image .st11 {
    fill: #1E0003
}

.hosting-image .st12 {
    fill: #FFBE9D
}

.hosting-image .st13 {
    fill: #bb4246
}

.hosting-image .st14 {
    fill: #EB996E
}

.hosting-image .st15 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #f4ecea
}

#cogwheel1 {
    animation: 2s linear infinite cogwheelanim
}

@keyframes cogwheelanim {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(180deg)
    }
}

#cogwheel-two,
#cogwheel2 {
    animation: 4s linear infinite cogwheelanim
}

#cogwheel3 {
    animation: 8s linear infinite cogwheelanim
}

#cogwheel4 {
    animation: 3s linear infinite cogwheelanim
}

#wordpress {
    animation: 5s linear infinite wordpressanim
}

@keyframes wordpressanim {

    0%,
    100% {
        transform: rotate(-35deg)
    }

    50% {
        transform: rotate(35deg)
    }
}

#left-line {
    animation: 3s linear infinite leftline-anim
}

@keyframes leftline-anim {

    0%,
    100% {
        width: 0
    }

    50% {
        width: 100px
    }
}

#circle3 {
    animation: 3s linear infinite circle3-anim
}

@keyframes circle3-anim {

    0%,
    90% {
        transform: translateX(0)
    }

    50%,
    60% {
        transform: translateX(-200px)
    }
}

#circle1 {
    animation: 5s linear infinite circle2-anim
}

@keyframes circle1-anim {

    0%,
    90% {
        transform: translateX(0)
    }

    50%,
    60% {
        transform: translateX(-200px)
    }
}

#circle2 {
    animation: 4s linear infinite circle2-anim
}

@keyframes circle2-anim {

    0%,
    90% {
        transform: translateX(0)
    }

    50%,
    60% {
        transform: translateX(-200px)
    }
}

#girlanim {
    animation: 10s linear infinite redgirl-anim-anim
}

@keyframes redgirl-anim-anim {

    0%,
    100% {
        transform: rotate(0)
    }

    30% {
        transform: rotate(50deg) translateY(-100px) translateX(0)
    }

    60% {
        transform: rotate(50deg) translateY(50px) translateX(0)
    }
}

.wordpresshosting-banner .st1 {
    clip-path: url(#SVGID_2_);
    fill: #f6eeec
}

.wordpresshosting-banner .st2 {
    clip-path: url(#SVGID_2_);
    fill: #e4dcdb
}

.wordpresshosting-banner .st3 {
    opacity: .8;
    clip-path: url(#SVGID_2_)
}

.wordpresshosting-banner .st4 {
    fill: #f9f1ef
}

.wordpresshosting-banner .st7 {
    fill: #FFBC96
}

.wordpresshosting-banner .st8 {
    fill: #D28572
}

.wordpresshosting-banner .st10,
.wordpresshosting-banner .st9 {
    fill: #1d1d1d
}

.wordpresshosting-banner .st12,
.wordpresshosting-banner .st17 {
    fill: #d3c9c6
}

.wordpresshosting-banner .st14 {
    opacity: .3;
    fill: #1B1B43
}

.wordpresshosting-banner .st16 {
    opacity: .2;
    fill: #FE5B52
}

.wordpresshosting-banner .st18 {
    fill: #FFA121
}

.wordpresshosting-banner .st19 {
    opacity: .4;
    fill: #FFFFFF
}

#cloud2 {
    animation: 6s linear infinite cloudlinetwo
}

@keyframes cloudlinetwo {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-120px)
    }
}

#cloud {
    animation: 8s linear infinite cloudlinetwo2
}

@keyframes cloudlinetwo2 {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(350px)
    }
}

.flip-animation {
    animation: 4s linear infinite cloud-flip
}

#rocket {
    animation: 6s linear infinite rocket-anim
}

@keyframes rocket-anim {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-300px) translatey(300px)
    }
}

.wordpress-logo {
    animation: 6s linear infinite wordpress-anim
}

@keyframes wordpress-anim {

    0%,
    100% {
        transform: rotate(25deg)
    }

    50% {
        transform: rotate(-25deg)
    }
}

.wordpress-outer {
    animation: 3s linear infinite wordpressfade-anim
}

.left-hand-anim,
.right-hand-anim {
    transform-origin: left
}

@keyframes wordpressfade-anim {

    0%,
    100% {
        opacity: 0
    }

    50% {
        opacity: .15
    }
}

.wordpresswebsite-topcontent .wordpress-top-wrap,
.wordpresswebsite-topcontent .wordpresshosting-banner {
    display: table-cell;
    vertical-align: middle;
    width: 100%
}

.faq-style {
    margin-top: 100px;
    text-align: justify
}

.ourmission-vision-wrapper,
.whatwedo-wrapper {
    margin-top: 120px;
    text-align: justify
}

.faq-style h2 {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 0 35px;
    font-size: 34px
}

.faq-style .card {
    margin: 8px 0;
    background: 0 0
}

.faq-style .card button {
    width: 100%;
    text-align: left;
    padding: 12px 20px;
    margin: 0;
    font-size: 16px;
    outline: 0;
    border: none;
    cursor: pointer;
    color: var(--BlackColour);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition-duration: .3s
}

.faq-style .card button.collapsed:after {
    width: 2px;
    height: 16px;
    background: var(--BlackColour);
    content: '';
    position: absolute;
    top: 16px;
    right: 30px
}

.faq-style .card button:after {
    width: 16px;
    height: 2px;
    background: var(--BlackColour);
    content: '';
    position: absolute;
    top: 23px;
    right: 23px;
    transition-duration: .3s
}

.faq-style .card button:before {
    width: 16px;
    height: 2px;
    background: var(--BlackColour);
    content: '';
    position: absolute;
    top: 23px;
    right: 23px
}

.faq-style .card-body {
    padding-top: 5px
}

.faq-style .card-body p:last-child {
    padding-bottom: 0;
    margin-bottom: 0
}

.banner-image-left .st0-anim {
    fill: #f4ecea;
    stroke: #263238;
    stroke-width: 1.0554;
    stroke-linecap: round;
    stroke-linejoin: round
}

.banner-image-left .st1 {
    fill: none;
    stroke: #263238;
    stroke-width: 1.0554;
    stroke-linejoin: round
}

.banner-image-left .st2 {
    fill: var(--ColourOne);
    stroke: #263238;
    stroke-width: 1.0554;
    stroke-linejoin: round
}

.banner-image-left .st3 {
    fill: #f4ecea;
    stroke: #263238;
    stroke-width: 1.0554;
    stroke-linejoin: round
}

.banner-image-left .st5 {
    fill: none;
    stroke: #263238;
    stroke-width: .5277;
    stroke-linecap: round;
    stroke-linejoin: round
}

.banner-image-left .st7 {
    clip-path: url(#SVGID_2_)
}

.aboutimage-rowone .st4,
.banner-image-left .st8 {
    opacity: .2;
    enable-background: new
}

.banner-image-left .st9 {
    fill: none;
    stroke: #263238;
    stroke-width: 1.0554;
    stroke-linecap: round;
    stroke-linejoin: round
}

.banner-image-left .st10 {
    fill: #263238;
    stroke: #263238;
    stroke-width: 1.0554;
    stroke-linejoin: round
}

.banner-image-left .st11 {
    fill: none;
    stroke: #636363;
    stroke-width: 1.0554;
    stroke-miterlimit: 10
}

.banner-image-left .st13 {
    fill: var(--ColourOne);
    stroke: #263238;
    stroke-width: 1.0554;
    stroke-linecap: round;
    stroke-linejoin: round
}

.banner-image-left .head-animation {
    animation: 4s linear infinite head-anim;
    transform-origin: center
}

@keyframes head-anim {

    0%,
    100% {
        transform: rotate(5deg)
    }

    50% {
        transform: rotate(-5deg)
    }
}

.eyeanim {
    fill: #263238;
    animation: 3s linear infinite eyes-anim
}

@keyframes eyes-anim {

    0%,
    100%,
    50%,
    56% {
        opacity: 1
    }

    53% {
        opacity: 0
    }
}

.left-hand-anim {
    animation: 1s linear infinite lefthand-anim
}

@keyframes lefthand-anim {

    0%,
    100%,
    40%,
    80% {
        transform: rotate(2deg)
    }

    20%,
    60% {
        transform: rotate(-2deg)
    }
}

.right-hand-anim {
    animation: .8s linear infinite lefthand-anim
}

#dialogueboxone,
#dialogueboxtwo,
#key-eight,
#key-five,
#key-four,
#key-nine,
#key-one,
#key-seven,
#key-six,
#key-three,
#key-two,
#logo-plant-three,
#logo-plant-two,
#logo-righticon-one,
#logo-righticon-three,
#logo-righticon-two,
#plantone,
#whychoose-plant-top,
.right-plant-anim {
    transform-origin: bottom
}

#logo-plant-one,
#planttwo,
.left-plant-anim {
    animation: 3s linear infinite lefplant-anim;
    transform-origin: bottom
}

@keyframes lefplant-anim {

    0%,
    100% {
        transform: rotate(3deg)
    }

    50% {
        transform: rotate(0)
    }
}

#plantone,
.right-plant-anim {
    animation: 6s linear infinite rightplant-anim
}

#righthand,
#rightleg {
    transform-origin: top
}

#left-hand,
#leftleg {
    transform-origin: top right
}

#attherate-icon,
#cogbar-one,
#cogbar-three,
#cogbar-two,
#cogdialogue-one,
#cogdialogue-two,
#logo-bulb-one,
#logo-icon-four,
#logo-icon-one,
#logo-icon-three,
#logo-path-four,
#logo-path-one,
#logo-path-three,
#logo-path-two,
#mouse-anim,
#whychoose-dialogue,
.astronut-anim {
    transform-origin: center;
    transform-box: fill-box
}

@keyframes rightplant-anim {

    0%,
    100% {
        transform: rotate(4deg)
    }

    50% {
        transform: rotate(-6deg)
    }
}

.staticwebsite-benefits ul {
    width: 100%;
    padding: 0 0 0 20px;
    margin: 0
}

.staticwebsite-benefits ul li {
    margin-top: 8px
}

.staticwebsite-benefits h5 {
    width: 100%;
    padding: 0;
    margin: 30px 0 15px
}

.banner-image-right .st2 {
    opacity: .17;
    enable-background: new
}

#righthand {
    animation: 5s linear infinite righthand-anim
}

@keyframes righthand-anim {

    0%,
    100% {
        transform: rotate(5deg)
    }

    50% {
        transform: rotate(-8deg)
    }
}

#rightleg {
    animation: 6s linear infinite rightleg-anim
}

@keyframes rightleg-anim {

    0%,
    100% {
        transform: rotate(3deg)
    }

    50% {
        transform: rotate(-5deg)
    }
}

#leftleg {
    animation: 6s linear infinite leftleg-anim
}

@keyframes leftleg-anim {

    0%,
    100% {
        transform: rotate(10deg)
    }

    50% {
        transform: rotate(-6deg)
    }
}

#left-hand {
    animation: 6s linear infinite righthands-anim
}

@keyframes righthands-anim {

    0%,
    100% {
        transform: rotate(3deg)
    }

    50% {
        transform: rotate(-5deg)
    }
}

.astronut-anim {
    animation: 10s linear infinite astro-anim
}

@keyframes astro-anim {

    0%,
    100% {
        transform: rotate(0)
    }

    30% {
        transform: rotate(50deg) translateY(-100px) translateX(0)
    }

    60% {
        transform: rotate(50deg) translateY(50px) translateX(0)
    }
}

.logo-image-one .st1 {
    fill: #f7efed !important
}

.hosting-plans-con {
    width: 100%;
    border-left: 2px solid var(--BlackColour);
    border-bottom: 2px solid var(--BlackColour);
    float: left;
    position: relative;
    min-height: 495px
}

.website-hosting-row .col-lg-3:last-child .hosting-plans-con {
    border-right: 2px solid #1d1d1d
}

.menu-wrapper-con .row,
.website-hosting-row {
    margin-left: 0;
    margin-right: 0
}

.menu-wrapper-con .container-fluid,
.menu-wrapper-con .row .col-lg-5,
.menu-wrapper-con .row .col-lg-7,
.website-hosting-row .col-lg-3 {
    padding-left: 0;
    padding-right: 0
}

.website-hosting-row .col-lg-3 h4 {
    width: 100%;
    text-align: center;
    background: var(--BlackColour);
    color: #f4ecea;
    font-size: 22px;
    padding: 15px 0
}

.website-hosting-row .col-lg-3:nth-child(2) a,
.website-hosting-row .col-lg-3:nth-child(2) h4 {
    background: var(--YellowColour);
    color: var(--BlackColour);
    font-weight: 600
}

.website-hosting-row .col-lg-3:nth-child(4) a,
.website-hosting-row .col-lg-3:nth-child(4) h4 {
    background: #1d1d1d
}

.website-hosting-row .col-lg-3 a {
    width: 90%;
    background: var(--BlackColour);
    padding: 8px 0;
    margin: 5%;
    text-align: center;
    text-decoration: none;
    color: #f4ecea;
    display: inline-block;
    font-size: 16px;
    position: absolute;
    left: 0;
    bottom: 0
}

.website-hosting-row .col-lg-3 ul {
    width: 100%;
    padding: 0 20px;
    margin: 25px 0 0
}

.website-hosting-row .col-lg-3 ul li {
    width: 100%;
    padding: 0 0 0 30px;
    margin: 14px 0;
    list-style: none;
    position: relative
}

.website-hosting-row .col-lg-3 ul li:before {
    width: 17px;
    height: 12px;
    background: url(../img/tick-icon.svg) no-repeat;
    position: absolute;
    left: 0;
    top: 7px;
    content: ''
}

.testimonials-scroll .slick-dots li.slick-active button,
.works-tab .nav-link.active {
    background: var(--BlackColour)
}

.website-hosting-row .col-lg-3 h5 {
    width: 100%;
    padding: 0 0 0 20px;
    margin: 30px 0 0;
    font-size: 15px
}

.website-hosting-row .col-lg-3 h5 font {
    font-size: 28px;
    font-weight: 600
}

.sendus-message p {
    margin-bottom: 32px
}

.ourmission-vision-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 75px 0
}

.ourmission-vision-wrapper p {
    padding: 0;
    margin: 15px 0 0
}

.about-toprow .col-lg-6:last-child span {
    width: 100%;
    text-align: justify
}

.about-toprow .col-lg-6:first-child span,
.whatwedo-img,
.whychoose-wrapper .col-lg-6:first-child span {
    width: 100%;
    display: table;
    height: 100%
}

.whatwedo-wrapper ul,
.whychoose-wrapper ul {
    width: 100%;
    padding: 0 0 0 20px
}

.slick-slide img {
    width: 100%;
    display: block
}

.slick-slider {
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-dots li button:focus,
.slick-dots li button:hover,
.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    min-width: 100%
}

.slick-track:after,
.slick-track:before {
    display: table;
    content: ''
}

.slick-arrow.slick-hidden,
.slick-slide,
.slick-slide.slick-loading img {
    display: none
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-slide,
.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    margin: 0;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-initialized .slick-slide {
    display: block
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-next,
.slick-prev {
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -ms-transform: translate(0, -50%);
    color: transparent;
    border: none;
    outline: 0
}

.slick-next:focus,
.slick-next:hover,
.slick-prev:focus,
.slick-prev:hover {
    color: transparent;
    outline: 0;
    background: 0 0
}

.slick-next:before,
.slick-prev:before {
    font-family: slick;
    font-size: 20px;
    color: #fff;
    -moz-osx-font-smoothing: grayscale
}

.slick-prev {
    left: -25px
}

[dir=rtl] .slick-prev {
    right: -25px;
    left: auto
}

.slick-prev:before,
[dir=rtl] .slick-next:before {
    content: '←'
}

.slick-next:before,
[dir=rtl] .slick-prev:before {
    content: '→'
}

.slick-next {
    right: -25px
}

[dir=rtl] .slick-next {
    right: auto;
    left: -25px
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -15px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px !important;
    padding: 0;
    cursor: pointer
}

.slick-dots li button {
    width: 10px;
    height: 10px;
    display: block;
    padding: 2px;
    color: transparent;
    border: 0;
    outline: 0
}

.slick-dots li button:before {
    font-family: slick;
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.menu-footer-style .col-lg-4 a h6,
.works-item h6,
.works-tab .nav-link {
    font-size: 15px;
    color: var(--BlackColour)
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #000
}

.testimonials-scroll .slick-dots {
    bottom: -30px !important
}

.grecaptcha-badge,
.testimonials-scroll li button:before {
    display: none;
    visibility: hidden
}

.testimonials-scroll .slick-dots li button {
    border: 2px solid var(--BlackColour);
    list-style: none !important;
    z-index: 990;
    border-radius: 50%
}

.testimonials-item {
    width: 100%;
    display: inline-block;
    padding: 25px;
    margin: 14px 0;
    border: 1px solid rgba(0, 0, 0, .2)
}

.testimonials-item p {
    font-style: italic
}

.works-wrapper .col-lg-3,
.works-wrapper .col-lg-4 {
    padding-top: 15px;
    padding-bottom: 15px
}

.works-tab .nav-link {
    padding: 4px 30px;
    margin: 0 5px;
    background: 0 0;
    border-radius: 0;
    border: 1px solid var(--BlackColour);
    font-weight: 500
}

.works-tab {
    margin-bottom: 20px
}

.works-item {
    width: 100%;
    position: relative
}

.works-item h6 {
    width: 100%;
    padding: 15px;
    margin: 0;
    text-align: center;
    transition-duration: .3s
}

.works-item span {
    width: 100%;
    display: block;
    position: relative;
    background: #000
}

.works-item span img {
    width: 100%;
    transition-duration: .3s
}

.works-item span i {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    z-index: 500
}

.works-item span:after {
    width: 30px;
    height: 30px;
    background: url(../img/link-icon.svg) 0 0/100% no-repeat;
    position: absolute;
    top: 40%;
    right: 50%;
    margin-top: -15px;
    content: '';
    transition-duration: .3s;
    opacity: 0
}

.works-item:hover span:after {
    opacity: 1;
    top: 50%
}

.works-item:hover img {
    opacity: .15
}

.works-item:before {
    opacity: 0;
    transition-duration: .3s
}

.works-item.staticsite:before {
    position: absolute;
    left: 0;
    top: 0;
    content: 'Static Website';
    background: var(--ColourTwo);
    color: #fff;
    font-size: 13px;
    z-index: 90;
    padding: 2px 10px
}

.works-item.staticsite:hover h6 {
    background: var(--ColourTwo);
    color: #fff
}

.works-item.wordpresssite:before,
.works-item.wordpresssite:hover h6 {
    background: var(--ColourOne);
    color: #fff
}

.works-item.wordpresssite:before {
    position: absolute;
    left: 0;
    top: 0;
    content: 'WordPress Website';
    font-size: 13px;
    z-index: 90;
    padding: 2px 10px
}

.parallax-wrap span:first-child {
    z-index: 3
}

.sendmessage-image .st0 {
    opacity: .05;
    fill: #000
}

.sendmessage-image .st2 {
    opacity: .81
}

.logo-svgcolor-one .st10,
.sendmessage-image .st3,
.whatwedo-img .st10 {
    fill: #00C0AD
}

.sendmessage-image .st4 {
    opacity: .1;
    fill: #00C0AD;
    enable-background: new
}

.sendmessage-image .st6 {
    opacity: .79
}

.sendmessage-image .st7 {
    fill: #00C0AD;
    stroke: #263238;
    stroke-width: .9124;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.sendmessage-image .st8 {
    fill: #FFFFFF;
    stroke: #263238;
    stroke-width: .9124;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.sendmessage-image .st9 {
    fill: none;
    stroke: #263238;
    stroke-width: .6843;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.sendmessage-image .st10 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: .6843;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.sendmessage-image .st11 {
    opacity: .2;
    clip-path: url(#SVGID_2_);
    fill: #00C0AD;
    enable-background: new
}

.aboutimage-rowone .st14,
.sendmessage-image .st12 {
    opacity: .2;
    clip-path: url(#SVGID_4_)
}

.sendmessage-image .st13 {
    fill: none;
    stroke: #263238;
    stroke-width: .9124;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.sendmessage-image .st15,
.sendmessage-image .st16,
.sendmessage-image .st17,
.sendmessage-image .st20 {
    fill: #00C0AD;
    enable-background: new
}

.sendmessage-image .st14 {
    opacity: .2;
    clip-path: url(#SVGID_6_)
}

.sendmessage-image .st15 {
    opacity: .8
}

.aboutimage-rowone .st18,
.sendmessage-image .st16 {
    opacity: .2;
    clip-path: url(#SVGID_8_)
}

.sendmessage-image .st17 {
    opacity: .2
}

.aboutimage-rowone .st26,
.sendmessage-image .st18 {
    opacity: .2;
    clip-path: url(#SVGID_10_)
}

.sendmessage-image .st19 {
    opacity: .2;
    clip-path: url(#SVGID_12_)
}

.sendmessage-image .st20 {
    opacity: .2;
    clip-path: url(#SVGID_14_)
}

#attherate-icon {
    animation: 6s linear infinite attherateanim
}

@keyframes attherateanim {

    0%,
    100% {
        transform: rotate(35deg)
    }

    50% {
        transform: rotate(-35deg)
    }
}

#dialogueboxtwo {
    animation: 3s linear infinite dialogue-anim
}

#dialogueboxone {
    animation: 3s linear 2s infinite dialogue-anim;
    opacity: 0
}

@keyframes dialogue-anim {

    0%,
    100% {
        opacity: 0
    }

    20%,
    80% {
        opacity: 1
    }
}

.aboutimage-rowone .st0 {
    opacity: 5e-02;
    fill: #000
}

.aboutimage-rowone .st1 {
    display: none;
    opacity: .7
}

.aboutimage-rowone .st2 {
    display: inline
}

.aboutimage-rowone .st3 {
    opacity: .2;
    fill: #263238;
    enable-background: new
}

.aboutimage-rowone .st5 {
    fill: #FFFFFF;
    stroke: #263238;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st6 {
    fill: #263238;
    stroke: #FFFFFF;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st7 {
    fill: #BB4246;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st10 {
    opacity: .2;
    clip-path: url(#SVGID_2_)
}

.aboutimage-rowone .st11 {
    fill: #BB4246
}

.aboutimage-rowone .st12 {
    opacity: .5;
    fill: #BB4246;
    enable-background: new
}

.aboutimage-rowone .st13 {
    opacity: .5
}

.aboutimage-rowone .st15 {
    fill: none
}

.aboutimage-rowone .st16,
.whychoose-image .st0 {
    fill: none;
    stroke: #263238;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st17 {
    opacity: .2;
    clip-path: url(#SVGID_6_);
    fill: #BB4246;
    enable-background: new
}

.aboutimage-rowone .st19,
.logo-bottom-image .st0,
.logo-svgcolor-one .st0,
.whatwedo-img .st0,
.whychoose-image .st2 {
    fill: none;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st20,
.logo-bottom-image .st4,
.logo-svgcolor-one .st9,
.whatwedo-img .st5,
.whychoose-image .st8 {
    fill: #FFFFFF;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st21,
.whatwedo-img .st17,
.whychoose-image .st7 {
    fill: #757575;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st22,
.whatwedo-img .st18,
.whychoose-image .st6 {
    fill: #999999;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st23 {
    fill: #BFBFBF;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.aboutimage-rowone .st24,
.logo-svgcolor-one .st11 {
    opacity: .5;
    fill: #FFFFFF;
    enable-background: new
}

.aboutimage-rowone .st25 {
    opacity: .1;
    fill: #FFFFFF;
    enable-background: new
}

#key-four,
#key-two {
    animation: 3s linear 1s infinite dialogue-anim;
    opacity: 0
}

#key-one {
    animation: 2s linear 2s infinite dialogue-anim;
    opacity: 0
}

#key-nine {
    animation: 4s linear 3s infinite dialogue-anim;
    opacity: 0
}

#key-five,
#key-three {
    animation: 2s linear 1s infinite dialogue-anim;
    opacity: 0
}

#key-eight {
    animation: 4s linear infinite dialogue-anim;
    opacity: 0
}

#key-seven,
#key-six {
    animation: 4s linear 2s infinite dialogue-anim;
    opacity: 0
}

#mouse-anim {
    animation: 6s linear infinite mouse-anim
}

@keyframes mouse-anim {

    0%,
    100% {
        transform: translateX(0)
    }

    30% {
        transform: translateX(20px)
    }

    60% {
        transform: translateX(20px) translatey(20px)
    }

    80% {
        transform: translateX(-10px) translatey(10px)
    }
}

.whatwedo-img .st1 {
    fill: none;
    stroke: #263238;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.whatwedo-img .st2 {
    fill: none;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round
}

.whatwedo-img .st3 {
    fill: none;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.9985, 2.9954
}

.whatwedo-img .st4 {
    fill: none;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.9981, 2.9944
}

.logo-bottom-image .st7,
.logo-svgcolor-one .st5,
.whatwedo-img .st6 {
    fill: #263238;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.whatwedo-img .st7 {
    fill: #00C0AD;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-svgcolor-one .st8,
.whatwedo-img .st8,
.whychoose-image .st4 {
    fill: none;
    stroke: #FFFFFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-svgcolor-one .st2,
.whatwedo-img .st11 {
    opacity: .3;
    clip-path: url(#SVGID_2_);
    fill-opacity: 0.7;
    enable-background: new
}

.logo-svgcolor-one .st3,
.whatwedo-img .st12,
.whychoose-image .st11 {
    opacity: .3;
    clip-path: url(#SVGID_4_);
    fill-opacity: 0.7;
    enable-background: new
}

.whatwedo-img .st14 {
    opacity: .2;
    clip-path: url(#SVGID_6_);
    fill-opacity: 0.7;
    enable-background: new
}

.logo-svgcolor-one .st18,
.whatwedo-img .st15 {
    opacity: .3;
    clip-path: url(#SVGID_8_);
    fill-opacity: 0.7;
    enable-background: new
}

.logo-svgcolor-one .st20,
.whatwedo-img .st16 {
    opacity: .3;
    clip-path: url(#SVGID_10_);
    fill-opacity: 0.7;
    enable-background: new
}

.whatwedo-img .st19 {
    fill: none;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.978, 2.9341
}

.whatwedo-img .st20 {
    fill: none;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1, 3
}

#cogwheel-one,
#logo-icon-two,
#whychoose-cogwheel {
    animation: 4s linear infinite cogwheel-about-one;
    transform-origin: center
}

@keyframes cogwheel-about-one {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-180deg)
    }
}

#cogdialogue-two {
    animation: 4s linear infinite aboutdialoguebox-one-anim
}

@keyframes aboutdialoguebox-one-anim {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(70px)
    }
}

#cogdialogue-one,
#whychoose-dialogue {
    animation: 6s linear infinite aboutdialoguebox-two-anim
}

@keyframes aboutdialoguebox-two-anim {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(40px)
    }
}

#cogbar-three {
    animation: 2s linear infinite aboutleftline-anim
}

#cogbar-one {
    animation: 3s linear infinite aboutleftline-anim
}

#cogbar-two {
    animation: 4s linear infinite aboutleftline-anim
}

@keyframes aboutleftline-anim {

    0%,
    100% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

.whychoose-image .st1 {
    fill: #F27D58;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.whychoose-image .st5 {
    clip-path: url(#SVGID_2_);
    fill: none
}

.logo-svgcolor-one .st7,
.whychoose-image .st9 {
    fill: #BFBFBF;
    stroke: #263238;
    stroke-miterlimit: 10
}

.whychoose-image .st10 {
    fill: #F27D58
}

.whychoose-image .st12 {
    fill: #92E3A9
}

.whychoose-image .st13 {
    opacity: .3;
    clip-path: url(#SVGID_6_);
    fill-opacity: 0.7;
    enable-background: new
}

.logo-svgcolor-one .st17,
.whychoose-image .st14 {
    opacity: .3;
    fill-opacity: 0.7;
    enable-background: new
}

.whychoose-image .st15,
.whychoose-image .st16,
.whychoose-image .st17,
.whychoose-image .st18,
.whychoose-image .st20,
.whychoose-image .st21,
.whychoose-image .st22 {
    opacity: .2;
    fill-opacity: 0.7;
    enable-background: new
}

.whychoose-image .st15 {
    clip-path: url(#SVGID_8_)
}

.whychoose-image .st16 {
    clip-path: url(#SVGID_10_)
}

.whychoose-image .st17 {
    clip-path: url(#SVGID_12_)
}

.whychoose-image .st18 {
    clip-path: url(#SVGID_14_)
}

.whychoose-image .st20 {
    clip-path: url(#SVGID_16_)
}

.whychoose-image .st21 {
    clip-path: url(#SVGID_18_)
}

.whychoose-image .st22 {
    clip-path: url(#SVGID_20_)
}

.whychoose-image .st23 {
    opacity: .3;
    fill: none;
    stroke: #FFFFFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    enable-background: new
}

#whychoose-plant-top {
    animation: 4s linear infinite rightplant-anim
}

.logo-svgcolor-one .st1 {
    fill: #F7EFED
}

.logo-bottom-image .st1,
.logo-svgcolor-one .st4 {
    fill: #F7EFED;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-svgcolor-one .st6 {
    opacity: .2;
    fill: #FFFFFF;
    enable-background: new
}

.logo-svgcolor-one .st12 {
    fill: none;
    stroke: #FFFFFF;
    stroke-miterlimit: 10
}

.logo-svgcolor-one .st13 {
    fill: #F3EBE9;
    stroke: #263238;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-svgcolor-one .st15 {
    fill: #999999
}

.logo-svgcolor-one .st16 {
    clip-path: url(#SVGID_6_)
}

.logo-svgcolor-one .st19 {
    opacity: .4
}

#logo-icon-one {
    animation: 6s linear infinite logoicontopleft-anim
}

@keyframes logoicontopleft-anim {

    0%,
    100% {
        transform: scale(.5)
    }

    50% {
        transform: scale(1)
    }
}

#logo-icon-three {
    animation: 3s linear infinite logoiconbottomleft-anim
}

@keyframes logoiconbottomleft-anim {

    0%,
    100% {
        transform: scale(.5);
        opacity: 0
    }

    30%,
    70% {
        opacity: 1
    }

    50% {
        transform: scale(1)
    }
}

#logo-icon-four {
    animation: 4s linear infinite logoanim-btm-right
}

@keyframes logoanim-btm-right {

    0%,
    100% {
        transform: rotate(-45deg)
    }

    40% {
        transform: rotate(45deg)
    }
}

#logo-path-one {
    animation: 3s linear infinite logopath-fade
}

#logo-path-two {
    animation: 2s linear infinite logopath-fade
}

#logo-path-three {
    animation: 4s linear infinite logopath-fade
}

#logo-path-four {
    animation: 3.5s linear infinite logopath-fade
}

@keyframes logopath-fade {

    0%,
    100% {
        opacity: 0
    }

    40% {
        opacity: 1
    }
}

.logo-bottom-image .st2 {
    fill: #F7EFED;
    stroke: #263238;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-bottom-image .st3 {
    fill: #FFFFFF;
    stroke: #263238;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-bottom-image .st5 {
    fill: #00C0AD;
    stroke: #263238;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-bottom-image .st6 {
    fill: none;
    stroke: #263238;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-bottom-image .st8 {
    fill: #263238;
    stroke: #263238;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-bottom-image .st9 {
    fill: #263238;
    stroke: #FFFFFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-bottom-image .st10 {
    fill: #7D7D7D;
    stroke: #263238;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

.logo-bottom-image .st11 {
    fill: none;
    stroke: #878787;
    stroke-linejoin: round;
    stroke-miterlimit: 10
}

#logo-plant-two {
    animation: 4s linear infinite lefplant-anim
}

#logo-plant-three {
    animation: 5s linear infinite lefplant-anim
}

#logo-righticon-one {
    animation: 3s linear infinite logoicon-fadeaniamtion
}

#logo-righticon-two {
    animation: 2s linear infinite logoicon-fadeaniamtion
}

#logo-righticon-three {
    animation: 3s linear 1s infinite logoicon-fadeaniamtion;
    opacity: 0
}

#logo-righticon-three.animation-run {
    animation-delay: 0s
}

@keyframes logoicon-fadeaniamtion {

    0%,
    100% {
        opacity: 0
    }

    30%,
    70% {
        opacity: 1
    }
}

#logo-bulb-one {
    animation: 4s linear infinite bulbone-anim;
    transform: translateX(26px)
}

@keyframes bulbone-anim {

    0%,
    100% {
        transform: translateX(26px)
    }

    50% {
        transform: translateX(0)
    }
}

#logo-bulb-two {
    transform: translateX(-26px);
    animation: 4s linear infinite bulbtwo-anim;
    transform-origin: center;
    transform-box: fill-box
}

@keyframes bulbtwo-anim {

    0%,
    100% {
        transform: translateX(-26px)
    }

    50% {
        transform: translateX(0)
    }
}

.home-welcome-image {
    display: table;
    height: 100%;
    min-height: 560px
}

@media (min-width:992px) {
    .navbar .nav-item:hover>.dropdown-menu {
        display: block
    }

    .navbar .dropdown-toggle:hover::after {
        transform: rotate(-180deg)
    }

    .navbar .dropdown-toggle::after {
        transition: transform .15s linear;
        display: inline-block;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent
    }

    .navbar .nav-item:hover>.dropdown-menu .dropdown-item:hover {
        background-color: #e9ecef
    }
}

.menu-wrapper-con {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 100vh;
    z-index: 1025;
    padding-left: 180px;
    transition-duration: .3s
}

.showmenubar .menu-wrapper-con {
    top: 0 !important
}

.menu-wrapper-con .row .col-lg-7 {
    background: rgba(0, 0, 0, .96);
    min-height: 100vh;
    display: table
}

.menu-wrapper-con .row .col-lg-7 ul {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    text-align: center
}

.menu-wrapper-con .row .col-lg-7 ul li {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 2vh 0;
    display: inline-block
}

.menu-wrapper-con .row .col-lg-7 ul li a {
    color: #fff;
    padding: 0;
    width: 100%;
    display: block;
    margin: 0;
    font-family: var(--heading-font), sans-serif;
    font-size: 8vh;
    font-weight: 500;
    line-height: normal
}

.menu-wrapper-con .row .col-lg-7 ul li a:hover {
    text-decoration: none;
    color: var(--YellowColour)
}

.menu-wrapper-con .row .col-lg-5 {
    background: var(--YellowColour);
    text-align: center
}

.menu-right-wrapper {
    width: 100%;
    height: 100vh;
    display: table
}

.menu-yellow-middle-align .col-lg-5 {
    padding-left: 15px !important;
    padding-right: 15px !important
}

.menu-yellow-middle-align .col-lg-5 a {
    width: 100%;
    padding: 20px 0;
    margin: 10px 0;
    border: 2px solid var(--BlackColour);
    display: block
}

.menu-yellow-middle-align .col-lg-5 a h6 {
    width: 100%;
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: var(--BlackColour);
    font-size: 15px;
    font-weight: 500
}

.menu-yellow-middle-align .col-lg-5 a:hover {
    background: var(--BlackColour);
    text-decoration: none
}

.menu-footer-style .col-lg-4 a {
    color: var(--BlackColour);
    padding: 0;
    margin: 0;
    text-decoration: none;
    display: block
}

.menu-footer-style .col-lg-4 a h6 {
    padding: 0;
    margin: 10px 0 0
}

.menu-footer-style .col-lg-4 a span {
    width: 60px;
    height: 60px;
    background: var(--BlackColour);
    display: inline-block;
    border-radius: 50%
}

.menu-yellow-middle-align hr {
    width: 100%;
    padding: 0;
    margin: 30px 0 40px;
    border: none;
    outline: 0;
    border-bottom: 1px dashed var(--BlackColour)
}

.menu-yellow-middle-align h3 {
    margin-bottom: 10px;
    padding: 0;
    font-size: 28px
}

.showmenubar {
    overflow: hidden
}

.menu-yellow-middle-align .col-lg-5 span {
    width: 100%;
    text-align: center;
    display: block;
    margin-bottom: 5px
}

.menu-yellow-middle-align .col-lg-5 span svg {
    height: 70px
}

.menu-yellow-middle-align .col-lg-5 span .st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: var(--BlackColour);
    transition-duration: .3s
}

.menu-icon-modal {
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 0 0 0 20px;
    border: none;
    background: 0 0;
    outline: 0 !important;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1020
}

.testimonials-item .st0,
.testimonials-scroll .col-lg-4 ul li .st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #FFC72C
}

.testimonials-item ul,
.testimonials-scroll .col-lg-4 ul {
    width: 100%;
    padding: 0;
    margin: 0 0 5px
}

.testimonials-item ul li,
.testimonials-scroll .col-lg-4 ul li {
    list-style: none;
    padding: 0;
    margin: 0 5px 0 0;
    display: inline-block;
    width: 15px;
    height: 14px;
    background: url(../img/star.svg) 0 0/100% no-repeat
}

.testimonials-item ul li.disable,
.testimonials-scroll .col-lg-4 ul li.disable {
    background: url(../img/star-black.svg) no-repeat;
    opacity: .2
}

.testimonials-item ul li svg,
.testimonials-scroll .col-lg-4 ul li svg {
    height: 14px
}

.whatsapp-sticky {
    width: 55px;
    height: 55px;
    background: #28a219;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 70px;
    z-index: 1030;
    padding: 12px 0 0 13px;
    -webkit-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite puls;
    -moz-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite puls;
    -ms-animation: puls 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite puls;
    box-shadow: 0 0 0 0 rgba(40, 162, 25, .5)
}

.whatsapp-sticky svg {
    width: 30px;
    height: 30px
}

@-webkit-keyframes puls {
    to {
        box-shadow: 0 0 0 20px rgba(25, 153, 204, 0)
    }
}

@-moz-keyframes puls {
    to {
        box-shadow: 0 0 0 20px rgba(25, 153, 204, 0)
    }
}

@-ms-keyframes puls {
    to {
        box-shadow: 0 0 0 20px rgba(25, 153, 204, 0)
    }
}

@keyframes puls {
    to {
        box-shadow: 0 0 0 20px rgba(25, 153, 204, 0);
        box-shadow: 0 0 0 30px rgba(25, 153, 204, 0)
    }
}

.mobilefooter-fixed {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1030;
    padding: 0;
    margin: 0;
    display: none;
    visibility: hidden
}

.mobilefooter-fixed li {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 50%;
    float: left;
    text-align: center
}

.mobilefooter-fixed li a {
    background: var(--ColourOne);
    text-align: center;
    padding: 0;
    margin: 0;
    color: #fff;
    float: left;
    width: 100%;
    font-size: 14px;
    height: 40px;
    line-height: 40px
}

.mobilefooter-fixed li a svg {
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    top: 4px
}

.terms-conditions p {
    font-size: 15px
}

.terms-conditions h5 {
    width: 100%;
    font-size: 17px;
    padding: 0;
    margin: 20px 0 5px
}

::selection {
    background: var(--YellowColour);
    color: var(--BlackColour)
}

::-moz-selection {
    background: var(--YellowColour);
    color: var(--BlackColour)
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    border-radius: 0
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #ffc72c;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    transition: .6s
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ffc72c
}

.popup-modals {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px
}

.popup-modals img {
    width: 142px;
    height: 141px;
    position: relative;
    left: 50%;
    margin-left: -71px
}

.popup-modals h2,
.popup-modals h4 {
    padding: 0;
    width: 100%;
    text-align: center
}

.popup-modals h2 {
    margin: 20px 0;
    font-weight: 700;
    font-size: 22px;
    color: #000
}

.popup-modals h4 {
    margin: 0;
    font-size: 18px;
    color: var(--textcolor)
}

#mouse-circle {
    position: absolute;
    width: 70px;
    height: 70px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(255, 199, 44, .75);
    z-index: 100;
    box-shadow: 0 0 0 0 rgba(255, 199, 44, .4);
    -webkit-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite puls;
    -moz-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite puls;
    -ms-animation: puls 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite puls
}

@-webkit-keyframes puls {
    to {
        box-shadow: 0 0 0 30px rgba(25, 153, 204, 0)
    }
}

@-moz-keyframes puls {
    to {
        box-shadow: 0 0 0 30px rgba(25, 153, 204, 0)
    }
}

@-ms-keyframes puls {
    to {
        box-shadow: 0 0 0 30px rgba(25, 153, 204, 0)
    }
}

.terms-btns .nav-link{
    padding: 5px 10px;
    margin: 0px 5px;
    border: none;
    outline: none;
    background: none;
    border-radius: 3px;
    cursor: pointer;
}

.terms-btns .nav-link.active{
    background: var(--BlackColour);
    color: var(--YellowColour);
}

.terms-btns{
    margin-bottom: 20px;
}

.terms-and-conditions-style ul{
    width: 100%;
    padding: 0px 0px 0px 20px;
    margin: 0px 0px 12px 0px;
    display: inline-block;
}

.terms-and-conditions-style ul li{
    font-size: 15px;
    color: var(--BlackColour);
    margin: 5px 0px;
}





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

    .header-topdiv,
    .home-banner-wrap,
    .inner-page-banner,
    .menu-wrapper-con,
    .scrolling-contents {
        padding-left: 0
    }

    #mouse-circle,
    .side-button-style {
        display: none;
        visibility: hidden
    }

    .handshake-container {
        left: 40px
    }

    .clientsay-wrapper h2,
    .featured-projects-con h2,
    .haveproject-text span h2,
    .home-banner-wrap h1,
    .success-into-business h2 {
        font-size: 60px
    }

    .letstalk-wrapper .col-lg-8 h3 {
        font-size: 26px
    }

    .letstalk-wrapper {
        height: 160px
    }

    .letstalk-wrapper .col-lg-4 a {
        margin-top: 50px
    }

    .scrolling-contents {
        overflow: hidden
    }

    .home-servie-section .col-lg-8 .col-lg-4 {
        min-height: 400px
    }

    .googlemaps {
        padding-bottom: 400px
    }
}

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

    .bespoke-website,
    .featured-projects-con .row .col-lg-4:nth-child(2),
    .featured-projects-con .row .col-lg-4:nth-child(3),
    .featured-projects-con p br,
    .footer-topdiv .col-lg-2,
    .haveproject-text span h2 br,
    .navbar,
    .navbar-nav li,
    .success-into-business h2 br {
        display: none !important;
        visibility: hidden !important
    }

    .bespoke-website {
        right: 0
    }

    .header-topdiv {
        padding-left: 15px;
        padding-right: 15px
    }

    .footertop-wrapper .container-fluid,
    .home-servie-section.container-fluid {
        padding-left: 0
    }

    .home-servie-section .col-lg-8 .col-lg-4:first-child,
    .home-servie-section .col-lg-8 .col-lg-4:nth-child(3) {
        padding-top: 0
    }

    .home-servie-section .col-lg-8 .col-lg-4 {
        min-height: 450px
    }

    .home-servie-section .service-left span {
        text-align: center;
        padding: 100px 50px 0
    }

    .home-servie-section .service-left span h2 {
        text-align: center
    }

    .clientsay-wrapper h2,
    .featured-projects-con h2,
    .haveproject-text span h2,
    .home-banner-wrap h1,
    .success-into-business h2 {
        font-size: 50px
    }

    .featured-projects-con p {
        padding: 0;
        text-align: center;
        margin-bottom: 100px
    }

    .featured-projects-con p a {
        right: 50%;
        margin-right: -25px;
        top: auto;
        bottom: -60px;
        z-index: 900
    }

    .featured-projects-con .row .col-lg-4 {
        margin-top: 15px;
        margin-bottom: 0
    }

    .letstalk-wrapper {
        height: auto;
        padding: 45px 0;
        text-align: center
    }

    .letstalk-wrapper .col-lg-8 h3 {
        margin: 0 0 25px;
        text-align: center
    }

    .letstalk-wrapper .col-lg-4 a {
        float: none;
        clear: both
    }

    .success-into-business .col-lg-8 {
        padding-right: 15px;
        margin-top: 45px
    }

    .haveproject-text span h2 {
        text-align: center;
        margin-top: 65px
    }

    .haveproject-text span h5 {
        text-align: center;
        margin-bottom: 45px
    }

    .footertop-buttons .row .col-lg-6:first-child,
    .footertop-buttons .row .col-lg-6:nth-child(3) {
        border-left: none
    }

    .footer-topdiv {
        padding-left: 15px !important;
        padding-right: 15px !important
    }

    .footer-topdiv .col-lg-4 ul li {
        width: 100%
    }

    .hosting-image,
    .wordpresshosting-banner {
        margin-bottom: 35px;
        display: block;
        float: left
    }

    .home-banner-wrap h1 font {
        font-size: 60px
    }

    .home-welcome-image {
        min-height: auto
    }

    .website-hosting-row .col-lg-3:nth-child(2) .hosting-plans-con {
        border-right: 2px solid #1d1d1d
    }

    .hosting-plans-con {
        margin: 10px 0
    }

    .menu-wrapper-con .row .col-lg-7 {
        min-height: 50vh;
        height: 50vh
    }

    .menu-right-wrapper {
        height: 50vh
    }

    .menu-wrapper-con .row .col-lg-7 ul li a {
        font-size: 4vh
    }

    .menu-wrapper-con .row .col-lg-7 ul li {
        margin: 1vh 0
    }

    .menu-icon-modal .menu-iconbg {
        fill: var(--YellowColour)
    }
}

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

    .footer-topdiv .col-lg-4,
    .home-banner-wrap h1 br,
    .home-servie-section .home-service-item h4 br,
    .letstalk-wrapper .col-lg-8 h3 br,
    .scroll-bottom-btn,
    .speakon-phone span {
        display: none !important;
        visibility: hidden !important
    }

    .home-banner-wrap h1,
    .home-banner-wrap h1 font {
        font-size: 38px
    }

    .home-banner-wrap h1 {
        height: 82px
    }

    .handshake-container {
        left: 15px;
        bottom: 60px
    }

    @keyframes speak-anim {
        0% {
            right: 80px;
            bottom: 180px
        }

        20% {
            right: 10px;
            bottom: 200px
        }

        40% {
            right: 80px;
            bottom: 150px
        }

        60% {
            right: 20px;
            bottom: 140px
        }

        80% {
            right: 100px;
            bottom: 160px
        }

        100% {
            right: 80px;
            bottom: 170px
        }
    }

    .home-servie-section .service-left span h2 {
        font-size: 44px
    }

    .clientsay-wrapper h2,
    .featured-projects-con h2,
    .haveproject-text span h2,
    .inner-page-banner h2 font,
    .success-into-business h2 {
        font-size: 36px
    }

    .home-servie-section .service-left span,
    .scrolling-contents .container-fluid,
    .success-into-business .container-fluid {
        padding-left: 15px;
        padding-right: 15px
    }

    .home-servie-section .col-lg-8,
    .home-servie-section .service-left span {
        padding-top: 60px
    }

    .home-servie-section .home-service-item h4 {
        text-align: center;
        font-size: 26px;
        top: 25px
    }

    .success-into-business {
        padding-top: 70px;
        padding-bottom: 70px
    }

    .featured-projects-con,
    .success-into-business {
        margin-bottom: 75px
    }

    .contact-content,
    .contact-middle-wrap,
    .custom-wordpress-website,
    .footer-topdiv,
    .wordpresswebsite-topcontent {
        margin-bottom: 60px
    }

    .footertop-buttons .col-lg-6 a h6,
    .letstalk-wrapper .col-lg-8 h3 {
        font-size: 18px
    }

    .letstalk-wrapper .col-lg-4 a {
        font-size: 32px
    }

    .letstalk-wrapper .col-lg-4 a svg {
        top: 8px
    }

    .clientsay-wrapper,
    .faq-style,
    .footer-topdiv,
    .homevideo-wrapper,
    .ourmission-vision-wrapper,
    .whatwedo-wrapper,
    .whychoose-wrapper {
        margin-top: 60px
    }

    .footertop-wrapper {
        margin-top: 70px
    }

    .haveproject-text span h5 {
        font-size: 20px
    }

    .footertop-buttons {
        padding-left: 0;
        padding-right: 0
    }

    .footertop-buttons .col-lg-6 a {
        padding-left: 20px;
        padding-top: 30px;
        padding-bottom: 30px
    }

    .footer-topdiv .col-lg-3 {
        padding-top: 15px;
        padding-bottom: 15px
    }

    .footertop-buttons .col-lg-6 a span svg,
    .menu-yellow-middle-align .col-lg-5 span svg {
        height: 50px
    }

    .footertop-buttons .col-lg-6 a span {
        margin-bottom: 8px
    }

    .home-servie-section .col-lg-8 {
        padding-left: 0
    }

    .header-topdiv {
        top: 15px
    }

    .yellow-circle {
        width: 300px;
        height: 300px;
        margin-top: -150px;
        margin-left: -150px
    }

    .pathcircle,
    .wemake-things {
        width: 100px;
        height: 100px
    }

    .speakon-phone {
        font-size: 15px;
        line-height: 20px
    }

    .handshake-icon {
        bottom: 8px
    }

    .home-servie-section .col-lg-8 .col-lg-4 {
        min-height: 230px
    }

    .home-servie-section .home-service-item.logodesign h4 {
        bottom: auto;
        top: 25px
    }

    .home-service-item .servicecarousel {
        width: 30%;
        padding: 3vh
    }

    .footer-scroll-wrap,
    .home-service-item .servicecarousel font,
    .menu-footer-style .col-lg-4 a h6,
    .menu-yellow-middle-align hr,
    .whatsapp-sticky {
        display: none;
        visibility: hidden
    }

    .home-service-item.logodesign .servicecarousel {
        top: auto !important;
        bottom: 0
    }

    @keyframes logo-anim {
        0% {
            left: 20%;
            top: auto
        }

        25% {
            left: 50%;
            bottom: 0;
            top: auto
        }

        50% {
            left: 50%;
            bottom: 30px;
            top: auto
        }

        75% {
            left: 20%;
            bottom: 30px;
            top: auto
        }

        100% {
            left: 20%;
            bottom: 0;
            top: auto
        }
    }

    @keyframes webdesign-anim {
        0% {
            right: 20%
        }

        25% {
            right: 50%;
            bottom: 0
        }

        50% {
            right: 50%;
            bottom: 30px
        }

        75% {
            right: 20%;
            bottom: 30px
        }

        100% {
            right: 20%;
            bottom: 0
        }
    }

    @keyframes wordpress-anim {
        0% {
            right: 20%
        }

        25% {
            right: 50%;
            bottom: 0
        }

        50% {
            right: 50%;
            bottom: 30px
        }

        75% {
            right: 20%;
            bottom: 30px
        }

        100% {
            right: 20%;
            bottom: 0
        }
    }

    .wemake-things {
        top: 80px;
        background-size: 100px 100px
    }

    .buddhaimage {
        width: 30px !important;
        left: 34px;
        top: 42px
    }

    @keyframes buddha-anim {
        0% {
            top: 10px
        }

        100% {
            top: 25px
        }
    }

    .contact-middle-wrap {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .innerpage-scroll {
        top: 270px
    }

    .custom-wordpress-website h3,
    .faq-style h2,
    .innerpage-works h3,
    .wordpresswebsite-topcontent h4 {
        font-size: 24px
    }

    .innerpage-works {
        padding: 60px 0
    }

    .inner-page-banner {
        height: auto;
        padding-top: 200px
    }

    .inner-page-banner h2 font::before {
        width: 50px;
        height: 50px
    }

    .testimonials-item {
        margin-top: 0;
        margin-bottom: 0
    }

    .website-hosting-row .col-lg-3 .hosting-plans-con {
        border: 2px solid #1d1d1d
    }

    .menu-yellow-middle-align .col-lg-5 a h6 {
        font-size: 14px
    }

    .menu-yellow-middle-align .col-lg-5 a {
        padding: 10px 0;
        margin: 5px 0
    }

    .menu-wrapper-con .row .col-lg-7 {
        min-height: 40vh;
        height: 40vh
    }

    .menu-right-wrapper {
        height: 60vh
    }

    .menu-wrapper-con .row .col-lg-7 ul li a {
        font-size: 3vh
    }

    .menu-yellow-middle-align .row .col-lg-5 {
        padding-left: 5px !important;
        padding-right: 5px !important
    }

    .menu-yellow-middle-align .row {
        margin-bottom: 25px
    }

    .nightbg .website-hosting-row .col-lg-3 a,
    .nightbg .website-hosting-row .col-lg-3 h4 {
        background: #9d9da0;
        color: var(--BlackColour)
    }

    .nightbg .website-hosting-row .col-lg-3 .hosting-plans-con {
        border-color: #9d9da0
    }

    .scrolling-contents {
        padding-bottom: 40px
    }

    .mobilefooter-fixed {
        display: block;
        visibility: visible
    }

    .works-item:before {
        opacity: 1
    }
}