body{

    padding: 0;

    margin: 0;

    width: 100%;

    font-family: 'Oswald', sans-serif;

    font-family: 'Poppins', sans-serif;

    font-family: 'Roboto Mono', monospace; 

    font-family: 'Ubuntu', sans-serif;



}







h1, h2, h3, li {

    font-family: Poppins, sans-serif;

    color: rgb(0, 0, 0);

}

main{

    position: relative;

    top: 0px;

    z-index: 10;

    width: 100%;

    height: auto;

    padding: 1rem 0px;

    font-family: Poppins, sans-serif; 

    background-color: #f8f9fa;

    overflow: hidden;

}

 

.menuOuter {

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    display: none; 

    z-index: 110 !important;

}

.top-bg-nav {

    position: absolute;

    width: 100%;

    height: 100vh;

    max-height: 100vh;

    overflow: hidden;

    background-color: #ffb500;

    will-change: transform;

}

.kreative-logo {

    position: absolute;

    top: 1rem;

    left: 5rem;

}

.kreative-logo img {

    width: 100px;

    margin: 0px;

}



.creative-text img{

    width: 60%;

}



.creative-text h5{

    font-weight: 700;

    font-size: 18px;

}



.creative-text p{

    font-size: 12px;

    text-align: justify;

}



.creative-text{

    padding: 10px;

}



























@media (min-width: 1024px) and (max-height: 600px){

 

.topmenu-bar {

    top: 42.5%;

}

}



@media (min-width: 1024px) and (max-height: 660px){

.topmenu-bar {

    top: 45%;

}

} 

.topmenu-bar {

    position: absolute;

    top: 40%;

    left: 20%;

    margin: 0px;

    transform: translateY(-50%);

} 

ul {

    margin: 0px 0px 1.45rem 1.45rem;

    padding: 0px;

    list-style-position: outside;

    list-style-image: none;

}

.topmenu-bar li:first-child {

    padding-top: 2.2rem;

} 

.topmenu-bar li {

    list-style: none;

    overflow: hidden;

    padding-bottom: 2.2rem;

    margin-bottom: 0px;

    will-change: transform, opacity;

} 

ul li {

    padding-left: 0px;

    list-style: none;

}

a {

    color: #ff9900;

    text-decoration: none;

}

.topmenu-bar li a {

    display: block;

    font-size: 3rem;

    line-height: 0.8;

    letter-spacing: -0.08rem;

    color: rgb(0 0 0 / 79%);

    transition: color 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;

    font-weight: 600;

}

li :last-child {

    margin-bottom: 0px;

}

.topmenu-submenu {

    position: absolute;

    left: 52.5%;

    top: 50%;

    transform: translateY(-50%);

}

.topmenu-submenu li {

    list-style: none;

    margin: 0px;

    will-change: transform, opacity;

}

.topmenu-submenu li a {

    font-size: 32px;

    line-height: 1.5;

    letter-spacing: -0.1rem;

    color: rgb(0 0 0 / 52%);

    transition: color 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;

}

.bottommenu-social {

    position: absolute;

    bottom: 2%;

    width: calc(100% - 10rem);

    height: 12rem;

    left: 5rem;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

}

.socials-icons {

    position: absolute;

    left: 0px;

    margin-top: -1rem;

}

.socials-icons a:first-child {

    margin-left: 0px;

}

 

.socials-icons a {

    margin-left: 2rem;

    max-width: 20px;

}

.socials-icons svg {

    fill: transparent;

    width: 40px;

}

.socials-icons svg g {

    stroke: rgb(255, 255, 255);

    fill: transparent;

}

.socials-icons svg path {

    fill: rgb(255, 255, 255);

}

.crack-menu-link {

    z-index: 50;

    position: absolute;

    bottom: 5%;

    right: 0px;

}

.crack-menu-link > div:first-of-type {

    padding: 0px;

    margin: 0px;

}

 

.menu-link-top {

    position: relative;

    padding: 5rem 15%;

    margin: 12rem auto 18rem;

    display: flex;

    -webkit-box-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    align-items: center;

    height: 12rem;

}

.crack-menu-link h5 {

    font-size: 2rem;

    color: rgb(255, 255, 255) !important;

} 

.creck-item {

    font-size: 5rem;

    line-height: 0.8;

    color: #ff9900;

    font-family: Poppins, sans-serif;

    display: inline-block;

} 

h5 {

    margin: 0px 0px 1.45rem;

    padding: 0px;

    color: inherit;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    font-weight: bold;

    text-rendering: optimizelegibility;

    font-size: 0.85028rem;

    line-height: 1.1;

}

.crack-menu-link span {

    background-color: rgb(255, 255, 255);

} 

.sepretor-line {

    background: #ff9900;

    width: 1px;

    height: 6rem;

    margin: 0px 3rem;

    display: inline-block;

}

.crack-menu-link button {

    background-color: #000;

    color: rgb(255, 255, 255);

    transition: color 0.2s ease-in-out 0s;

} 

.topmenu-bar li a:hover {

    color: rgb(255, 255, 255);

}

.cracking-button {

    background: #ff9900;

    border: 0.2rem solid #fff;

    padding: 1rem 1.5rem;

    font-family: Circular, sans-serif;

    font-size: 1.2rem;

    font-weight: 700;

    text-transform: uppercase;

    text-decoration: none;

    border-radius: 3rem;

    display: inline-block;

}

#toggle {

    width: 28px;

    height: 30px;

    margin: 10px auto;

    position: fixed;

    z-index: 999;

    right: 30px;

    top: 27px;

  }

  

  #toggle div {

    width: 100%;

    height: 5px;

    background: rgb(0, 0, 0);

    margin: 4px auto;

    transition: all 0.3s;

    backface-visibility: hidden;

  }

  

  #toggle.on .one {

    transform: rotate(45deg) translate(5px, 5px);

  }

  

  #toggle.on .two {

    opacity: 0;

  }

  

  #toggle.on .three {

    transform: rotate(-45deg) translate(7px, -8px);

  }

  ul.navbar-nav a.nav-link {

    font-size: 20px;

    font-weight: 600;

    color: #000;

}





/* section.outer-display css start */

section.outer-display {

    position: relative;

    top: 160px;

    min-height: 580px;

    height: 100%;

}

.desk-text h1 {

    color: #ff9900;

    font-family: Poppins, sans-serif;

    font-size: 5rem;

    line-height: 0.95;

    letter-spacing: -0.075rem;

    max-width: 14ch;

    margin-bottom: 25px;

}

.desk-text p strong{

    color: #ff9900;

}

.desk-logo-img img {

    width: 100%;

    max-width: 450px;

}



.left-outer-box img {

  max-height: 500px;

  height: 100%;

  width: 100%;

  object-fit: cover;

  overflow: hidden;

  border-radius: 0px 45px 45px 0px;

}

.right-outer-box {

    padding: 20px 30px;

}

section.outer-section-02 {

    overflow: hidden;

    margin: 50px 0px;

}

.right-outer-box h1 {

    font-size: 38px;

    font-weight: 700;

}

.right-outer-box p {

    font-size: 22px;

}

.company-fillter {

  display: flex;

  /*justify-content: space-between;*/

  align-items: center;

  flex-wrap: wrap;

}



.fill-type-outer img {

  width: 40px;

  position: relative;

  z-index: 10;

  margin-bottom: 15px;

}



.fill-type-outer {

    text-align: center;

    margin: 10px;

    position: relative;

    max-width: 110px;

    width: 100%;

}

.fill-type-outer::after {

  position: absolute;

  content: "";

  max-width: 60px;

  max-height: 60px;

  width: 100%;

  margin: 0 auto;

  background-color: #ffbb00;

  z-index: 1;

  left: 0;

  top: -8px;

  bottom: 0;

  right: 0;

  border-radius: 10px;

}

.fill-type-outer h6 {

  font-size: 16px;

  position: relative;

  font-weight: 800;

  z-index: 10;

  margin-bottom: 0px;

}



.fill-type-outer span {

  font-size: 14px;

  color: #5f5f5f;

  position: relative;

  z-index: 10;

}



 

  .sliderWrapper {

    position: relative;

    width: 90vw;

    margin: 0 auto;

    display: flex;

  }

  .sliderImage {

    position: relative; 

  }

  

  .sliderText { 

    position: relative;

    overflow: hidden;

  }

  .sliderTextFloat {

    padding: 60px;

    position: fixed;

    height: 100vh;

    display: flex;

    top: 0;

    justify-content: center;

    align-items: center;

    transition: all 0.5s ease;

    opacity: 0;

  }

  .visible.sliderTextFloat {

    opacity: 1;

    transition: all 0.5s ease;

  }

  

  .sliderImageItem {

    transform: translatey(-0%);

    transition: all 0.4s ease;

    margin-bottom: 40px;

    border-radius: 25px;

    overflow: hidden;

  }

  .active.sliderImageItem {

    transform: translatey(-0%);

    transition: all 0.4s ease;

    margin-bottom: 40px;

    box-shadow: 0px 0px 30px 0px #8e8e8e;



}

  .sliderImage img {

    width: 100%;

  }

  h3.sliderSubText {

    font-family: "Raleway", sans-serif;

    font-size: 12px;

    text-transform: uppercase;

    color: #ff9900;

  }

  .sliderText h2 {

    font-family: "Raleway", sans-serif;

    margin-bottom: 20px;

    margin-top: 0;

    padding-bottom: 10px;

    border-bottom: 2px solid #ff9900;

    display: inline-block;

  }

  .sliderText p {

    margin-bottom: 20px;

  }

  

 

  #output {

    position: fixed;

    font-size: 10px;

    top: 0;

    right: 0;

    height: 200px;

    width: 300px;

    border: 1px solid yellow;

    overflow: hidden;

    display: none;

  }

  .sliderWrapperEnd {

    position: fixed;

    width: 100vw;

    border: 1px solid red;

    display: none;

  }

  

  section.Our-services {

    overflow: hidden !important;

    position: relative;

    margin: 50px 0px;

    height: 100%;

}



/* our-service-second css start */



.Our-services-image img {

    width: 100%;

    max-height: 300px;

    height: 100%;

    border-radius: 15px;

    box-shadow: 0px 0px 10px #ccc;

}

.our-filad-unit {

    position: absolute;

    top: 6px;

    left: -24px;

    font-family: Circular, sans-serif;

    letter-spacing: 0.2rem;

    color: #ffbb00;

    font-size: 14px;

}

.service-text-tital {

    position: relative;

    font-family: Sofia, sans-serif;

    font-size: 35px;

    font-weight: 700;

}

.service-text {

    font-family: Circular, sans-serif;

    color: rgb(55, 55, 55);

    font-size: 1rem;

}

.our-filad-box {

    position: relative;

    margin: 1rem 0px;

    padding: 0rem 0px;

}

.Our-services-image img {

    width: 100%;

    max-height: 300px;

    height: 100%;

    border-radius: 15px;

    box-shadow: 0px 0px 10px #ccc;

}



/* section services second css start */



section.services-section-sec {

    background-color: #ffbb00;

    padding: 100px 0px;

    position: relative;

}

.small-headding {

    color: rgb(255, 255, 255);

    font-family: Circular, sans-serif;

    font-weight: 700;

    font-size: 1.2rem;

    letter-spacing: 0.22rem;

    text-transform: uppercase;

    margin-bottom: 4rem;

}

.large-headding.active {

    color: rgb(255, 255, 255);

    opacity: 1;

} 

.large-headding {

  position: relative;

  color: rgb(0, 0, 0);

  font-family: robto,sans-serif;

  font-size: 26px;

  font-weight: 700;

  cursor: pointer;

}

.services-btn-in:hover {

  color: #000000;

}

.services-btn-in {

    background: transparent;

    border: 0.2rem solid rgb(255, 255, 255);

    padding: 18px;

    color: rgb(255, 255, 255);

    font-family: Circular, sans-serif;

    font-size: 1.2rem;

    font-weight: 700;

    text-transform: uppercase;

    text-decoration: none;

    letter-spacing: 0.1rem;

    border-radius: 3rem;

    margin-top: 2.5rem;

    max-width: 275px;

    width: 100%;

    text-align: center;

    display: inline-block;

    transition: background-color 0.25s ease 0s, color 0.25s ease 0s;

}

.services-contents {

    font-family: Circular, sans-serif;

    font-weight: 300;

    font-size: 1.5rem;

    line-height: 2rem;

    margin-top: 1rem;

    color: #fff;

}

.Left-sec-second {

    padding: 10px 20px;

}

.right-services-headding img {

    border-radius: 20px;

    box-shadow: 0px 0px 10px #ccc;

}



/* section work-section-sec css start */

section.work-section-sec {

    background-color: #000;

    padding: 100px 0px;

    position: relative;

}

.works-img {

    width: 41%;

    margin-bottom: 2.5rem;

}

.works-text {

    margin-bottom: -20%;

    width: 45%;

}

.work-outers {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    align-items: center;

    padding-top: 4rem;

    margin: 0px auto 10rem;

    max-width: 80%;

}

.works-text h2 {

    color: rgb(255, 255, 255);

    font-family: Sofia, sans-serif;

    font-size: 5rem;

    font-weight: bold;

    letter-spacing: -0.075rem;

    margin-left: 2.5rem;

    margin-top: 2.5rem;

    margin-bottom: 3rem;

}



.fild-work {

    display: flex;

    flex-flow: wrap;

    -webkit-box-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    align-items: center;

    margin: 0px auto;

    max-width: 80%;

    padding-bottom: 10rem;

    padding-top: 1rem;

}

.workitem-outer {

    width: calc(49% - 2rem);

}

@media (min-width: 700px){

 

.workitem-outer:nth-child(4n+1) {

    width: 47%;

    padding: 0px 1rem;

    margin-bottom: 5rem;

} 

 .workitems-image {

    position: relative;

}



.workitem-outer:nth-child(4n+1) .workitems-image::before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 70%;

} 

.workitems-image > * {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0px;

    left: 0px;

    object-fit: cover;

}

.imagewrapper-sec {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    overflow: hidden;

    will-change: transform;

}

.imageinner {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    will-change: transform;

}

.work-image {

    position: absolute;

    height: 100%;

    z-index: 1;

    width: 100%;

}

.workitem-outer:nth-child(4n) {

    width: 47%;

    padding: 0px 1rem;

    margin-bottom: 5rem;

}

.workitem-outer:nth-child(4n) .workitems-image::before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 138.819%;

}

}

@media (max-width: 650px){

.workitem-outer:nth-child(4n+1) {

    width: 42%;

    padding: 0px 1rem;

    margin-bottom: 5rem;

}

.workitem-outer:nth-child(4n) {

    width: 42%;

    padding: 0px 1rem;

    margin-bottom: 5rem;

}

.workitem-outer:nth-child(4n) .workitems-image::before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 138.819%;

}

}

.workitems-image {

    top: 0px;

    left: 0px;

}

.work-detail {

    margin-top: 1.5rem;

}   

.work-detail span {

    color: #ff9900;

    font-family: Circular, sans-serif;

    font-weight: 700;

    font-size: 14px;

    letter-spacing: 0.22rem;

    text-transform: uppercase;

    margin-right: 1rem;

    display: inline-block;

    line-height: 1.75;

}

.workitem-outer:hover h2 {

    color: #ff9900;

}

.work-detail h2 {

    color: rgb(255, 255, 255);

    font-family: Sofia, sans-serif;

    font-size: 2.5rem;

    letter-spacing: -0.075rem;

    transition: color 0.25s ease 0s;

    margin-top: 1rem;

}

.work-detail p {

    color: rgb(255, 255, 255);

    font-family: Circular, sans-serif;

    font-weight: 300;

    font-size: 14px;

}

.imageinner::after {

    content: "";

    position: absolute;

    z-index: 5;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background-color: #ff9900;

    mix-blend-mode: screen;

    opacity: 0;

    transition: opacity 0.25s ease-in-out 0s;

}

.imageinner:hover::after {

    opacity: 0.7;

}



.work-detail {

    margin-top: 2.5rem;

}

.workitem-outer .workitems-image::before {

    display: block;

    content: "";

    width: 100%;

    padding-top: 87.3371%;

}

.work-image img {

    height: 100%;

    width: 100%;

}   





/* Our Clients css start */

section.our-clients {

    padding: 50px 0px;

    position: relative;

}

.headding h2 {

    color: #333;

    font-family: roboto, sans-serif;

    font-size: 52px;

    font-weight: 600;

    margin-bottom: 2rem;

    text-align: center;

}

.Clients-image {

    width: 90%;

    margin: 0 auto;

}

.Clients-image ul {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    flex-wrap: wrap;

}

.Clients-image ul li {

    max-width: 200px;

    width: 100%;

    margin: 15px;

}

.Clients-image ul li img {

    filter: opacity(0.7);

    width: 100%;

    max-width: 130px;

}

.Clients-image ul li img:hover{

    filter: opacity(1);

}





.articlesItem-sc {

    margin-bottom: 0;

    border: 1px solid rgb(36, 36, 36); 

    transition: background-color 0.5s ease 0s;

    height: 100%;

    display: block;

    overflow: hidden;

}

.articlesItem-sc:hover .gatsby-image-wrapper img {

    transform: scale(1.3);

}

.articlesItem-sc:hover {

    background-color: #ff9900;

}

.gatsby-image-wrapper img {

    transition: 0.5s;

    height: 100%;

}

 

.articlesItem-sc .WrapBlogImage-sc-dgaymv-6 {

    position: relative;

}

.gatsby-image-wrapper {

    transition: opacity 500ms ease 0s !important;

    height: 250px;

    overflow: hidden;

}

.articles-text {

    padding: 1.5rem;

}

.articles-text span {

    color: #ff9900;

    font-family: Circular, sans-serif;

    font-weight: 700; 

    font-size: 13px;

    text-transform: uppercase;

    margin-bottom: 0.5rem;

    margin-right: 1.5rem;

    line-height: 1.75;

}

.articles-text h2 {

    color: rgb(36, 36, 36);

    font-family: roboto, sans-serif;

    font-size: 22px;

    font-weight: 600;

    line-height: 1.33;

    letter-spacing: -0.075rem;

    margin-top: 10px;

    margin-bottom: 0px;

    transition: color 0.25s ease 0s;

}

.articlesItem-sc:hover .articles-text span {

    color: rgb(55, 55, 55);

}

.articlesItem-sc:hover .articles-text h2 {

    color: rgb(255, 255, 255);

}

.bqFLqH {

    background: transparent;

    border: 0.2rem solid #ff9900;

    padding: 15px 15px;

    color: #ff9900;

    font-family: Circular, sans-serif;

    font-size: 16px;

    font-weight: 700;

    border-radius: 3rem;

    margin-top: 3.5rem; 

    max-width: 250px;

    width: 100%;

    text-align: center;

    transition: background-color 0.25s ease 0s, color 0.25s ease 0s;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 20px auto;

}

.bqFLqH:hover {

    background-color: #ff9900;

    color: rgb(255, 255, 255);

}







/* footer css stert */



footer {

    background: black;

}



.sub-ft-menu li a.active {

    border-bottom: 1px solid;

}

.sub-ft-sec li a {

    font-size: 18px;

    font-family: Circular, sans-serif;

    font-weight: 700;

    color: rgb(255, 255, 255);

    cursor: pointer;

    transition: color 0.2s ease-in-out 0s;

}

.sub-ft-sec  li a:hover {

    color: #ff9900;

}

.sub-ft-menu  li a:hover {

    color: #ff9900;

}

.sub-ft-menu {

    position: relative;

    margin: 0px 2rem 0px 0px;

}



.sub-ft-menu li {

    list-style: none;

    margin: 0px;

    line-height: 1.6;

}



.sub-ft-menu li a {

    font-size: 24px;

    color: rgb(255, 255, 255);

    transition: color 0.2s ease-in-out 0s;

    font-weight: 600;

    cursor: pointer;

}

.ft-headding {

    font-size: 18px;

    margin-top: 0;

    text-transform: uppercase;

    color: #ff9900;

    font-family: Sofia, sans-serif;

    margin-left: 1.45rem;

}

.sub-ft-sec ul li {

    margin-bottom: 10px;

}

.right-ft-sec {

    position: relative;

    text-align: right;

    margin-left: auto;

}

    

.right-menu {

    margin: 1rem 0px;

}

.right-menu a:first-child {

    margin-left: 0px;

}

 

.right-menu a {

    margin-left: 1rem;

    max-width: 20px;

}

.right-menu svg {

    fill: transparent;

    width: 30px;

}

.right-menu svg g {

    stroke: rgb(255, 255, 255);

    fill: transparent;

    transition: stroke 0.2s ease-in-out 0s;

}

.right-menu svg g {

    stroke: rgb(255, 255, 255);

    fill: transparent;

    transition: stroke 0.2s ease-in-out 0s;

}

.right-menu a:hover g {

    stroke: #ff9900;

}

.right-menu a:hover path {

    fill: #ff9900;

}

.right-menu svg path {

    fill: rgb(255, 255, 255);

    transition: fill 0.2s ease-in-out 0s;

}

.SignUpText {

    font-size: 18px;

    line-height: 1.5;

    font-family: Circular, sans-serif;

    font-weight: 700;

    margin: 0px 0px 1rem;

    color: rgb(255, 255, 255);

    cursor: pointer;

    transition: color 0.2s ease-in-out 0s;

}

.signtextg {

    position: relative;

    cursor: pointer;

    margin-bottom: 1rem;

}

.emailbutton {

    background-color: transparent;

    border-top: 0px;

    border-right: 0px;

    border-left: 0px;

    border-image: initial;

    margin: 0px 0px 2rem;

    transition: color 0.15s ease-in-out 0s;

    color: rgb(255, 255, 255) !important;

    font-family: Sofia, sans-serif !important;

    font-size: 1.25rem !important;

    line-height: 0.9 !important;

    border-bottom: 0px !important;

}







/* About css start */

.inner-banner {

  position: relative;

  padding: 100px 0px 100px;

  top: 100px;

  height: 100%;

}

.inner-banner .image-layer {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-position: center bottom;

    background-size: cover;

    background-attachment: fixed;

}

.inner-banner .image-layer:before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.35);

}

.inner-banner .content-box {

    position: relative;

    text-align: center;

}

.inner-banner .content-box h1 {

    position: relative;

    color: #fff;

    font-size: 90px;

    text-transform: capitalize;

    font-weight: 400;

    margin-bottom: 15px;

}

.inner-banner .bread-crumb {

    position: relative;

    line-height: 24px;

}

.inner-banner .bread-crumb ul li {

    position: relative;

    display: inline-block;

    vertical-align: top;

    line-height: 24px;

    padding: 0 0;

    text-transform: capitalize;

    margin-right: 30px;

    color: #fff;

}

.inner-banner .bread-crumb ul li:after {

    content: '\f0da';

    position: absolute;

    right: -32px;

    top: 1px;

    width: 30px;

    text-align: center;

    font-weight: 700;

    font-family: 'Font Awesome 6 Free';

}

.inner-banner .bread-crumb ul li:last-child {

    margin-right: 0;

}

.clearfix::after {

    display: block;

    clear: both;

    content: "";

}

.inner-banner .bread-crumb ul li a {

    position: relative;

    color: #fff;

}

/*** 



====================================================================

  About Us Section

====================================================================



***/



.about-section{

    position: relative;

    padding: 0 0px 170px;

    overflow: hidden;

  }

  

  .about-section.alternate{

    padding-top: 140px;

  }

  

  .about-section .bg-grad-left{

    position: absolute;

    left: -200px;

    top: -100px;

  }

  

  .about-section .bg-grad-right{

    position: absolute;

    right: 0;

    top: -400px;

  }

  

  .about-section .text-col{

    position: relative;

    margin-bottom: 50px;

    order: 12;

  }

  

  .about-section .text-col .inner{

    position: relative;

    display: block;

    padding-left: 110px;

    padding-top: 60px;

  }

  

  .about-section .text-col .d-elem-1{

    position: absolute;

    right: 0;

    top: 50px;

  }

  

  .about-section .features{

    position: relative;

  }

  

  .about-section .features .row{

    margin: 0 -5px;

  }

  

  .about-section .features .f-block{

    position: relative;

    padding: 0 5px;

    margin-bottom: 30px;

  }

  

  .about-section .f-block .inner-box{

    position: relative;

    display: block;

    padding-left: 75px;

    padding-top: 6px;

    min-height: 60px;

  }

  

  .about-section .f-block .icon{

    position: absolute;

    left: 0;

    top: 0;

    width: 60px;

    line-height: 60px;

    transition: all 600ms ease;

      -moz-transition: all 600ms ease;

      -webkit-transition: all 600ms ease;

      -ms-transition: all 600ms ease;

      -o-transition: all 600ms ease;

  }

  

  .about-section .f-block .inner-box:hover .icon{

      transform:rotateY(180deg);

  }

  

  .about-section .f-block .icon img{

    position: relative;

    max-height: 60px;

  }

  

  .about-section .f-block h6{

    position: relative;

    line-height: 24px;

    margin-bottom: 0;

  }

  

  .about-section .text-col .title-box{

    margin-bottom: 30px;

  }

  

  .about-section .text-col .lower-text{

      position: relative;

  }

  

  .about-section .text-col .lower-text ul li{

      position: relative;

      padding-left: 40px;

      line-height: 1.70em;

      font-weight: 400;

      margin-bottom: 10px;

  }

  

  .about-section .text-col .lower-text ul li:last-child{

    margin-bottom: 0;

  }

  

  .about-section .text-col .lower-text ul li:before {

    content: "\f178";

    font-family: 'Font Awesome 6 Free';

    font-weight: 800;

    font-size: 20px;

    position: absolute;

    left: 0;

    top: 0;

    line-height: 28px;

    text-align: center;

    color: #ff9900;

}

  

  .about-section .text-col .link-box{

    position: relative;

    padding-top: 35px;

  }

  

  .about-section .image-col{

    position: relative;

    margin-bottom: 50px;

    order: 0;

  }

  

  .about-section .image-col .exp{

    position: absolute;

    left: 50px;

    top: 90px;

    width: 180px;

    height: 180px;

    padding: 32px 10px 10px;

    font-size: 18px;

    line-height: 24px;

    font-family: 'Gilroy_Bold', sans-serif;

    background: #ff9900;

    color: #fff;

    text-align: center;

    border-radius: 50%;

    z-index: 1;

  }

  

  .about-section .image-col .count{

    position: relative;

    display: block;

    padding-top: 3px;

    font-size: 60px;

    line-height: 1em;

  }

  

  .about-section .image-col .inner{

    position: relative;

    display: block;

    min-height: 100%;

  }

  

  .about-section .image-col .image-box{

    position: relative;

    padding-right: 30px;

  }

  

  .about-section .image-col .image-box .image{

    position: relative;

    float: right;

    max-width: 450px;

    transform: rotate(15deg);

    border-radius: 10px;

  }

  

  .about-section .image-col .image-box .image:last-child{

    position: absolute;

    left: 0;

    top: 220px;

    max-width: 366px;

    transform: rotate(-15deg);

    border: 9px solid #fff;

  }

  

  .about-section .image-col .image-box img{

    position: relative;

    width: 100%;

    border-radius: 10px;

  }

  

  .about-section .image-col .d-elem-1{

    position: absolute;

    left: -40px;

    top: 15px;

  }

  

  .about-section .image-col .d-elem-2{

    position: absolute;

    right: 180px;

    bottom: -90px;

  }

  .btn-style-one {

    position: relative;

    display: inline-block;

    vertical-align: top;

    font-family: 'Gilroy_Bold', 'Open Sans', sans-serif;

    margin: 0;

    line-height: 26px;

    padding: 10px 40px 10px;

    color: #ffffff;

    font-weight: 400;

    font-size: 16px;

    text-align: center;

    text-transform: capitalize;

    background: #ff9900;

    border: 2px solid #ff9900;

    border-radius: 5px;

    -moz-transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

}

.btn-style-one:hover {

    color: #ff9900;

    background: none;

    border-color: #ff9900;

}



/*** 



====================================================================

  Intro Two

====================================================================



***/



.intro-two{

    position: relative;

    padding: 140px 0px 90px;

    background: #F2F4F6;

  }

  

  .intro-two .intro-block-two{

    position: relative;

    margin-bottom: 45px;

    z-index: 10;

  }

  

  .intro-two .intro-block-two .inner-box{

    position: relative;

    display: block;

    text-align: center;

  }

  

  .intro-two .intro-block-two .icon{

    position: relative;

    display: block;

    line-height: 100px;

    margin-bottom: 35px;

  }

  

  .intro-two .intro-block-two .icon img,

  .intro-two .intro-block-two .icon svg{

    max-height: 100px;

  }

  

  .intro-two .intro-block-two h4{

    position: relative;

    margin-bottom: 30px;

  }

  



/*** 



====================================================================

  Our Speciality Section

====================================================================



***/



.our-speciality{

    position: relative;

    padding: 140px 0px 95px;

    background: #fff;

    overflow: hidden;

  }

  

  .our-speciality .outer-box{

    position: relative;

  }

  

  .our-speciality .bg-grad-left{

    position: absolute;

    left: -350px;

    top: -350px;

  }

  

  .our-speciality .title-col{

    position: relative;

    margin-bottom: 45px;

  }

  

  .our-speciality .title-col .inner{

    position: relative;

    display: block;

  }

  

  .our-speciality .title-col .d-elem-1{

    position: absolute;

    right: 0px;

    top: -10px;

  }

  

  .our-speciality .title-col .title-box{

    margin-bottom: 0;

  }

  

  .our-speciality .content-col{

    position: relative;

  }

  

  .our-speciality .content-col .inner{

    position: relative;

    display: block;

    min-height: 100%;

    padding-left: 110px;

  }

  

  

  .our-speciality .features{

    position: relative;

  }

  

  .our-speciality .features .feature{

    position: relative;

    margin-bottom: 45px;

  }

  

  .our-speciality .feature .inner-box{

    position: relative;

    display: block;

  }

  

  .our-speciality .feature .icon{

    position: relative;

    width: 60px;

    line-height: 60px;

    margin-bottom: 30px;

  }

  

  .our-speciality .feature .icon img{

    position: relative;

    max-height: 60px;

  }

  

  .our-speciality .feature h4{

    position: relative;

    margin-bottom: 20px;

    color: #6c7171;

  }

  

  .our-speciality .feature .travilo-text{

    position: relative;

  }

  .title-box .subtitle {

    position: relative;

    font-size: 24px;

    line-height: 30px;

    text-transform: none;

    font-family: 'Reey_Regular', cursive;

    font-weight: 400;

    color: #ff9900;

    margin: 0 0 10px;

}

.title-box h2 {

    color: #6c7171;

}

p.travilo-text {

    color: #6c7171;

}

  

/*** 



====================================================================

  Facts Section

====================================================================



***/



.facts-section{

    position: relative;

    color: #fff;

    background: #496560;

  }

  

  .facts-section .video-box{

    position: relative;

    top: -190px;

    max-width: 1140px;

    padding: 0 20px;

    margin: 0 auto -190px;

  }

  

  .facts-section .video-box .image-box{

    position: relative;

    display: block;

    border: 10px solid #fff;

    border-radius: 10px;

    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);

  }

  

  .facts-section .video-box .image-box img{

    position: relative;

    display: block;

    width: 100%;

    border-radius: 10px;

  }

  

  .facts-section .video-box .vid-btn{

    position: absolute;

    display: block;

    left: 50%;

    top: 50%;

    width: 120px;

    height: 120px;

    padding: 30px 20px;

    font-size: 26px;

    color: #fff;

    text-align: center;

    margin: -60px 0 0 -60px;

    background: var(--primary-color);

    border-radius: 50%;

    z-index: 1;

  }

  

  .facts-section .video-box .vid-btn:hover{

    background: #fff;

    color: var(--primary-color);

  }

  

  .facts-section .video-box .vid-btn .icon{

      position: relative;

      vertical-align: middle;

      line-height: 60px;

  }

  

  .facts-section .fact-counter{

    position: relative;

    padding: 140px 0 90px;

  }

  

  .facts-section.alt-padding .fact-counter{

    padding: 90px 0 40px;

  }

  

  .facts-section .fact-counter .fact-block{

    position: relative;

    font-family: 'Gilroy_Bold', sans-serif;

    text-align: center;

    margin-bottom: 50px;

  }

  

  .facts-section .fact-counter .fact-block .inner{

    position: relative;

    display: inline-block;

    vertical-align: top;

    text-align: left;

  }

  

  .facts-section .fact-counter .fact-count{

    position: relative;

    float: left;

    line-height: 60px;

    font-size: 60px;

  }

  

  .facts-section .fact-counter .count-box{

    position: relative;

    line-height: 60px;

    font-size: 60px;

    padding-right: 30px;

  }

  

  .facts-section .fact-counter .count-box i{

    position: absolute;

    font-size: 30px;

    line-height: 30px;

    font-style: normal;

    top: 0;

    right: 10px;

  }

  

  .facts-section .fact-counter .fact-title{

    position: relative;

    float: left;

    padding-top: 5px;

    line-height: 25px;

    text-transform: capitalize;

  }





/*** 



====================================================================

  Our Team Section

====================================================================



***/



.team-section{

    position: relative;

    padding: 140px 0px 90px;

    background: #fff;

    overflow: hidden;

  }

  

  .team-section .team-box{

    position: relative;

  }

  

  .team-section .bg-grad-left{

    position: absolute;

    left: -300px;

    top: -360px;

  }

  

  .team-section .bg-grad-right{

    position: absolute;

    right: -350px;

    bottom: -230px;

  }

  

  .team-section .d-elem-1{

    position: absolute;

    left: -70px;

    top: -70px;

  }

  

  .team-section .team-block{

    position: relative;

    text-align: center;

    margin-bottom: 50px;

  }

  

  .team-section .team-block .inner-box{

    position: relative;

    display: block;

    max-width: 272px;

    margin: 0 auto;

  }

  

  .team-section .team-block.alt .inner-box{

    padding-top: 60px;

  }

  

  .team-section .team-block .image-box{

    position: relative;

    display: block;

    overflow: hidden;

    margin-bottom: 30px;

  }

  

  .team-section .team-block .image{

    position: relative;

    display: block;

    border-radius: 170px;

    overflow: hidden;

  }

  

  .team-section .team-block .image img{

    position: relative;

    display: block;

    border-radius: 170px;

    width: 100%;

  }

  

  .team-section .team-block h4{

    margin-bottom: 5px;

  }

  

  .team-section .team-block h4,

  .team-section .team-block h4 a{

    color: var(--dark-gray-gray);

  }

  

  .team-block .social-links{

    position: absolute;

    left: 20px;

    top: 50%;

    margin-top: -75px;

    width: 40px;

    opacity: 0;

    transition: all 500ms linear;

    transform: translateX(-70px);

  }

  

  .team-block .image-box:hover .social-links{

    opacity: 1;

    transform: translateX(0px);

  }

  

  .team-block .social-links li{

    position: relative;

    display: block;

    margin: 0 0 7px;

  }

  

  .team-block .social-links li a{

    position: relative;

    display: block;

    width: 32px;

    height: 32px;

    color: #fff;

    background: var(--dark-gray-gray);

    text-align: center;

    font-size: 15px;

    line-height: 32px;

    border-radius: 50%;

  }

  

  .team-block .social-links li a.facebook{

    background: #1877f2;

  }

  

  .team-block .social-links li a.twitter{

    background: #3aacf3;

  }

  

  .team-block .social-links li a.linkedin{

    background: #3291c2;

  }

  

  .team-block .social-links li a.youtube{

    background: #ff0000;

  }

  

  .team-block .social-links li a:hover{

    color: #fff;

    background: #ff9900;

  }

  .title-box.centered {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 65px;

}



/*** 



====================================================================

  Testimonials Section

====================================================================



***/



.testimonials-section{

    position: relative;

    padding: 140px 0px;

    background: #fff;

    overflow: hidden;

  }

  

  .testimonials-section.alt-bg{

    background: #fafaee;

  }

  

  .testimonials-section .d-elem-1{

    position: absolute;

    left: -100px;

    top: -80px;

  }

  

  .testimonials-section .bg-grad-right{

    position: absolute;

    right: -300px;

    top: -300px;

    opacity: 0.30;

  }

  

  .testimonials-section .bg-grad-left{

    position: absolute;

    left: -300px;

    bottom: -300px;

    opacity: 0.30;

  }

  

  .testimonials-section .title-box{

    margin-bottom: 60px;

  }

  

  .testimonials-section .bg-layer{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-repeat: repeat;

    background-position: left top;

  }

  

  .testimonials-section .carousel-box{

    position: relative;

    margin: 0 -10px;

  }

  

  .testimonials-section .carousel-box .slick-list{

    overflow: hidden;

  }

  

  .testi-block-one{

    position: relative;

    margin-bottom: 30px;

  }

  

  .slick-slider .testi-block-one{

    margin: 10px 10px;

  }

  

  .testi-block-one .inner-box{

    position: relative;

    display: block;

    text-align: center;

    min-height: 332px;

    padding: 60px 40px 60px;

    background: #fff;

    border-radius: 10px;

    border: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow: 0 0 15px 0px rgba(2, 24, 93, 0.07);

  }

  

  .testi-block-one .icon{

    position: relative;

    font-size: 48px;

    color: #ff9900;

    line-height: 48px;

    margin-bottom: 30px;

  }

  

  .testi-block-one .icon img{

    display: inline-block;

    max-width: 100%;

    max-height: 48px;

  }

  

  .testi-block-one .travilo-text{

    position: relative;

    font-size: 18px;

    color: var(--medium-gray-color);

    font-style: italic;

  }

  

  .testi-block-one .info{

    position: relative;

    display: inline-block;

    vertical-align: top;

    padding-top: 5px;

    padding-left: 115px;

    margin-top: 25px;

    text-align: left;

  }

  

  .testi-block-one .info .image{

    position: absolute;

    left: 0;

    top: 0px;

    width: 92px;

    height: 92px;

    border-radius: 50%;

    overflow: hidden;

  }

  

  .testi-block-one .info .image img{

    position: relative;

    display: block;

    width: 100%;

    border-radius: 50%;

  }

  

  .testi-block-one .info .name{

    color: #6c7171;

    font-size: 18px;

    font-weight: 400;

    font-family: 'Gilroy_Bold', sans-serif;

    margin-bottom: 0px;

  }

  

  .testi-block-one .info .designation{

    position: relative;

    float: left;

    font-size: 14px;

    font-weight: 400;

    color: #ccc;

  }

  

  .testi-block-one .info .rating{

    position: relative;

    font-size: 16px;

    line-height: 24px;

    font-weight: 400;

    color: #ff9900;

    margin-bottom: 7px;

  }

  

  .testi-block-one .info .rating i{

    position: relative;

    display: inline-block;

    vertical-align: middle;

  }

  

  .testi-block-one .info .rating i:last-child{

    margin-right: 0;

  }

  

  .testimonials-section .slick-dots{

    position: relative;

    padding-top: 40px;

    text-align: center;

  }

  

  .testimonials-section .slick-dots li{

    position: relative;

    display: inline-block;

    font-size: 0;

    text-indent: 50px;

    overflow: hidden;

    width: 24px;

    height: 24px;

    border: 1px solid rgba(0, 0, 0, 0.0);

    margin: 0 5px;

    border-radius: 50%;

    cursor: pointer;

  }

  

  .testimonials-section .slick-dots li button{

    content: '';

    position: absolute;

    left: 6px;

    top: 6px;

    width: 10px;

    height: 10px;

    background: #c4cecc;

    border-radius: 50%;

  }

  

  .testimonials-section .slick-dots li.slick-active{

    border-color: var(--primary-color);

  }

  

  .testimonials-section .slick-dots li.slick-active button{

    background: var(--tertiary-color);

  }

 

  

/* contact page css start */





section.contact-form {

  position: relative; 

  padding: 20px 30px;

  border-radius: 15px;

  box-shadow: 0px 0px 10px #efefef;

  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.8);

  backdrop-filter: saturate(100%) blur(20px);

}

section.contact-form::before {

  position: absolute;

  content: "";

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;





}

.contact-sec {

  background-image: url(../img/maps.png);

  background-attachment: fixed;

  background-repeat: no-repeat;

  background-size: cover; 

  padding: 100px 0px;

}

.Contact-add {

  margin: 0px;  

  display: flex;

  flex-wrap: wrap;

}

.jswBOY {

  width: 60%;

  max-width: 1920px;

  margin: 0px;

  height: 100%;

  padding-left: 10%;

  display: flex;

  flex-wrap: wrap;

}

.contacts-text {

  width: 45%; 

}

.contacts-text h4 {

  color: #ff9900;

  font-family: sans-serif;

  font-size: 26px;

  font-weight: 600;

  line-height: 1.25;

  max-width: 100%;

  margin-bottom: 0rem;

}

.contacts-text h3 {

  color: rgb(36, 36, 36);

  font-family: sans-serif;

  font-size: 20px;

  max-width: 100%;

  padding: 20px 0px 10px;

  font-weight: 700;

} 

.contacts-text p {

  color: #ff9900;

  font-family: sans-serif;

  font-size: 20px;

  font-weight: 700;

}

.contact-socials svg {

  fill: rgb(36, 36, 36);

  transition: ll 0.3s ease-in-out 0s;

}

input:focus-visible {

  outline: none !important;

}





.contact-socials a:first-child {

  margin-left: 0px;

}

.contact-socials a {

  margin-left: 1.2rem;

  display: inline-block;

}

.contact-socials a:hover circle {

  stroke: transparent;

  fill: #ff9900;

}

.contact-socials a:hover ellipse {

  stroke: transparent;

  fill: #ff9900;

}

.contact-socials a:hover path {

  fill: rgb(255, 255, 255);

}

.fill-contacts-form {

  position: relative;

}

.jDSHCy {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  background-color: rgba(255, 255, 255, 0.8);

  backdrop-filter: saturate(100%) blur(20px);

}



.sLEQM {

  position: relative;

  z-index: 1;

}

.main-form {

  position: relative;

  display: flex;

  flex-wrap: wrap;

  -webkit-box-pack: justify;

  justify-content: space-between;

  align-items: flex-start;

  width: 100%;

  transition: filter 0.3s ease 0s;

  z-index: 1;

}

form {

  margin: 0px 0px 1.45rem;

  padding: 0px;

}

.main-form label.first-name-label {

  width: 47.5%;

}

label.label-file input {

  border-bottom: none !important;

}

.main-form label {

  display: flex;

  flex-direction: column;

  width: 100%;

  margin-bottom: 1rem;

  font-size: 18px;

  font-weight: 100;

  letter-spacing: 0.1rem;

  color: rgb(36, 36, 36);

}

.main-form input[type="text"], .main-form input[type="email"] {

  font-size: 18px;

  font-weight: 500;

  letter-spacing: 0.1rem;

  border-radius: 0px;

  background: transparent;

  border-bottom: 0.1rem solid #9c9c9c;

  margin-top: 0rem;

  transition: border 0.3s ease 0s;

}

.fill-contacts-form input {

  padding: 10px 0px 10px 5px;

} 

.main-form input {

  border: 0px;

  color: rgb(36, 36, 36);

  padding: 5px 0px;

}

.main-form label.last-name-label {

  width: 47.5%;

}

.main-form label.label-file {

  position: relative;

  width: 100%;

  display: flex;

  -webkit-box-pack: justify;

  justify-content: space-between;

  margin: 1rem 0px 2.5rem;

  background: transparent;

  cursor: pointer;

  border-bottom: 0.1rem solid #9c9c9c;

  overflow: hidden;

  flex-direction: row !important;

  font-size: 1.6rem !important;

}

.main-form label.label-file {

  position: relative;

  width: 100%;

  display: flex;

  -webkit-box-pack: justify;

  justify-content: space-between;

  margin: 1rem 0px 1rem;

  background: transparent;

  cursor: pointer;

  border-bottom: 0.1rem solid #9c9c9c;

  overflow: hidden;

  flex-direction: row !important;

  font-size: 1.6rem !important;

}

.main-form textarea {

  height: 100px;

  padding: 10px 0px 10px 5px;

  margin: 1rem 0px 0px;

  letter-spacing: 0.1rem;

  border-radius: 0px;

  background: transparent;

  border-bottom: 0.1rem solid #9c9c9c;

  outline-color: #9c9c9c;

  color: rgb(36, 36, 36);

}

.condtions {

  display: flex;

  cursor: pointer;

  margin: 0px 0px 10px !important;

}

.check-outers {

  display: flex; 

  margin-top: 0.5rem;

}

input.form-check {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  margin-right: 10px;

}



.ELDkP {

  display: inline-block;

  width: 1.8rem;

  height: 1.8rem;

  background: transparent;

  border: 0.1rem solid #9c9c9c;

  border-radius: 50%;

  transition: background 150ms ease 0s;

  flex-shrink: 0;

  margin-right: 2rem;

}

.check-outers-text {

  font-size: 14px;

  line-height: 18px;

  margin: 0px;

  font-weight: 500;

  color: rgb(84 84 84);

  letter-spacing: 0;



}

.form-btn {

  border: 2px solid #ff9900;

  border-radius: 40px;

  background-color: transparent;

  color: #ff9900;

  text-transform: uppercase;

  font-family: Circular, sans-serif;

  letter-spacing: 0.1rem;

  font-weight: 700;

  padding: 10px 20px;

  font-size: 1.2rem;

  max-width: 170px;

  width: 100%;

  height: 50px;

  transition: color 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s;

}

.rc-anchor-normal {

  height: 74px;

  max-width: 300px;

  width: 100%;

}



/* services page css start */



.desk-text-servise h6 {

  color: rgb(36, 36, 36);

  font-family: Circular, sans-serif;

  font-weight: 300;

  font-size: 22px;

  line-height: 30px;

  max-width: 65ch;

}

.desk-text-servise h6 strong{

  color: #ff9900;

}

.services-list ul {

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

}



.services-list li {

  width: 48%;

  padding: 5px;

}



.services-list {

  position: relative;

}



.services-list li span {

  font-size: 16px;

  font-weight: 500;

  margin-left: 8px;

}



.services-text h2 {

  color: rgb(36, 36, 36);

  font-family: Sofia, sans-serif;

  font-size: 3.5rem;

  font-weight: 600;

  letter-spacing: -0.075rem;

}

.services-img-type a img {

  width: 100%;

  max-width: 400px;

  max-height: 300px;

  height: 100%;

  border-radius: 15px;

  object-fit: cover;

}

.services-text span {

    padding-left: 2px;

    display: flex;

}

.services-text {

    padding-bottom: 40px;

}

.StartButton {

    background-color: rgb(255 153 0);

    color: rgb(255, 255, 255);

    font-family: Circular, sans-serif;

    letter-spacing: 0.1rem;

    font-weight: 700;

    text-transform: uppercase;

    border: 2px solid rgb(255 153 0);

    border-radius: 50px;

    padding: 20px 30px;

    font-size: 15px;

    pointer-events: inherit;

    cursor: pointer;

    transition: background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s;

    z-index: 5;

}

.start-btn-bottam {

    position: fixed;

    bottom: 10px;

    right: 15px;

    z-index: 9;

}