@import url("https://fonts.googleapis.com/css?family=Poppins:400,400i,500,600,700|Rubik:400,400i,500,500i,700,700i&display=swap");

@media print {
    html, body {
        display: none; /* hide whole page */
    }
}
:root {
    --main-color-one: #F9556D;
    --main-color-two: #F9556D;
    --secondary-color: #30373f;
    --heading-color: #272b2e;
    --paragraph-color: #232f3e;
    --heading-font: "Poppins", sans-serif;
    --body-font: "Rubik", sans-serif;
    --poppins-font: "Poppins", sans-serif;
    --body-font-size: 15px;
    --line-height30: 30px;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    font-family: var(--body-font);
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    outline: none;
    -moz-osx-font-smoothing: grayscale;
    /* Firefox */
    -webkit-font-smoothing: antialiased;
    /* WebKit  */
}

body {
    margin: 0;
    color: var(--paragraph-color);
    overflow-x: hidden;
    font-family: var(--body-font);
    font-size: var(--body-font-size);
    user-select: none;
}

    body::-webkit-scrollbar {
        width: 1em;
    }

    body::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    body::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
    }

h1 {
    font-size: 65px;
    line-height: 1.0833333333;
}

h2 {
    font-size: 46px;
    line-height: 1.2380952381;
}

h3 {
    font-size: 36px;
    line-height: 1.0833333333;
}

h4 {
    font-size: 20px;
    line-height: 1.2380952381;
}

h5 {
    font-size: 24px;
    line-height: 1.2380952381;
}

h6 {
    font-size: 22px;
    line-height: 1.2380952381;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    /*font-family: var(--heading-font);*/
}

p {
    color: #000000;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin-bottom: 10px;
    /* line-height: var(--line-height30);*/
}

a {
    color: inherit;
    text-decoration: none;
    color: var(--paragraph-color);
}

    a,
    a:hover,
    a:focus,
    a:active {
        text-decoration: none;
        outline: none;
        color: inherit;
    }

pre {
    word-break: break-word;
}

a i {
    padding: 0 2px;
}

img {
    max-width: 100%;
}

ol {
    counter-reset: counter;
    padding-left: 0;
}

    ol li {
        list-style: none;
        margin-bottom: 1rem;
    }

        ol li:before {
            counter-increment: counter;
            content: counter(counter);
            font-weight: 500;
            margin-right: 10px;
        }
/*Tizzy features start*/

.main {
    width:100%;
    min-height:380px;
    text-align:center;
    position:relative;
    cursor:pointer;
}
.services {
    background: #f6f9fd;
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    box-shadow: 0 0 14px -12px #030380;
    transition: transform.8s;
    margin: 0 12px;
}
.service-logo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: -90px auto 0;
    background: #f6f9fd;
    border: 9px solid #fff;
}
    .service-logo img {
        width: 65px;
        margin-left: 0px;
        margin-top: -9px;
        transition: transform.6s;
    }
.services h6 {
    position: relative;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: 0.24px;
    color: #091a36;
    margin-bottom: 14px;
    text-align: center;
    padding-top: 25px;
}
/*.services h6::after {
   content:'';
   width:40px;
   height:30px;
   background:linear-gradient(to right,#fff,#ff6a00);
   position:absolute;
   right:-5px;
   left:-5px;
   z-index:-1;
}*/
.shadowone {
    height: 200px;
    width: 80%;
    background: #edf1f8;
    position: absolute;
    border-radius: 10px;
    bottom: 0;
    left: 10%;
    z-index: -1;
    box-shadow: 0 0 20px -15px #030380;
    transition: transform.8s;
}
.shadowtwo {
    height: 200px;
    width: 64%;
    background: #edf1f8;
    position: absolute;
    border-radius: 10px;
    bottom: 0;
    left: 18%;
    z-index: -2;
}
.main:hover .services {
    transform: translateY(-25px);
    }
.main:hover .shadowone {
    transform: translateY(-12px);
}
.main:hover img {
    transform:rotate(360deg);
}

/*Tizzy features end*/

/*background animation start*/

#solo {
   
    position: relative;
    left: 236px;
    top: 218px;
    opacity: 0.3;
}
#solo1 {
   
    position: relative;
    left: 35px;
    top: -36px;
}
#solo2 {

    position: relative;
    left: 855px;
    top: 275px;
}
#solo3 {
    
    position: relative;
    left: 694px;
    top: -35px;
    opacity: 0.1;
}
#solo4 {
   
    position: relative;
    left: 1228px;
    top: 9px;
}
#solo5 {
   
    position: relative;
    top: 445px;
    left: 1330px;
    opacity: 0.5;
}
#solo6 {
    
    position: relative;
    top: 445px;
    left: 50px;
    opacity: 0.5;
}
#solo7 {
    
    position: relative;
    top: 911px;
    left: 150px;
}

#solo8 {
   
    position: relative;
    top: 867px;
    left: 865px;
    opacity: 0.2;
}
  



.circle1 {
    position: absolute;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 50%;
    border-style: dashed;
}
.circle2 {
    position: absolute;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    border: 2px solid #000;
    border-radius: 50%;
    border-style: dashed;
}
.circle3 {
    position: absolute;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    border-style: dashed;
}

#circle1 {
    top: 50px;
    left: 0px;
    -webkit-animation: rotation 8s infinite linear;
    -moz-animation: rotation 8s infinite linear;
    -o-animation: rotation 8s infinite linear;
    z-index: -1;
}

#circle2 {
    left: 5px;
    top: 55px;
    -webkit-animation: rotation 8s infinite linear;
    -moz-animation: rotation 8s infinite linear;
    -o-animation: rotation 8s infinite linear;
    z-index: -1;
}

#circle3 {
    top: 60px;
    left: 10px;
    -webkit-animation: rotation 8s infinite linear;
    -moz-animation: rotation 8s infinite linear;
    -o-animation: rotation 8s infinite linear;
    z-index: -1;
}

#circle4 {
    top: 65px;
    left: 15px;
    -webkit-animation: rotation 8s infinite linear;
    -moz-animation: rotation 8s infinite linear;
    -o-animation: rotation 8s infinite linear;
    z-index: -1;
}



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

    to {
        transform: rotate(359deg);
    }
}

    @-webkit-keyframes cog {
        0% {
        /*margin-left: 100%;*/
    }

    100% {
       /* margin-left: -150%;*/
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes cog {
    0% {
      /*  margin-left: 100%;*/
    }

    100% {
      /*  margin-left: -150%;*/
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

/*background animation end*/
.single-service-left {
    background: #fff;
}

.header-inner p {
    color: #666 !important;
    line-height: 1.4;
    font-size: 16px;
    margin-bottom: 15px;
}