@import url('https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@100..800&family=Bubbler+One&display=swap');

:root {

  /*color Variable*/

  --primary-color: #18171C;

}

html,
body {

  font-family: "Anek Malayalam", sans-serif;

  overflow-x: hidden;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: "Anek Malayalam", sans-serif;

}

a {

  color: unset;

  text-decoration: none;

}

a:focus {

  outline: 0 solid;

}

a:hover {

  text-decoration: none;

  color: unset;

}



input:focus,

textarea:focus,

button:focus {

  outline: none;

}



ul {

  list-style: none;

}

.inner-container{

    margin: 0 175px;

}

.cursor,

.cursor2,

.cursor3{

  position: fixed;

  border-radius: 50%; 

  transform: translateX(-50%) translateY(-50%);

  pointer-events: none;

  left: -100px;

  top: 50%;

  transition: all .3s linear;

}

.cursor {

  background-color: #FFE500;

  z-index: 109;

  height: 10px;

  width: 10px;

}

.cursor2,

.cursor3{

  height: 50px;

  width: 50px;

  z-index: 108;

  transition: all 0.3s ease-out;

}

.cursor2.hover,

.cursor3.hover {

  transform: scale(1.4) translateX(-35%) translateY(-35%);

  border: none;

  background: transparent;

}



.cursor2.hover {

  background: rgba(255,255,255,0.3);

}





.ball {

  height: 100px;

  width: 100px;

  cursor: pointer;

  display: block;

  border-radius: 50%;

  z-index: 100;

  transition: all .3s linear;

}



/*Headar*/

header{

  padding-top: 50px;

  position: absolute;

  width: 100%;

    z-index: 99;

}

header .get-start .get-start-btn,
.wpcf7-submit{

  position: relative;

    display: block;

    overflow: hidden;

    margin: 1rem auto;

    text-transform: capitalize;

    border: 1px solid currentColor;

    padding: 20px 50px;

    border-radius: 50px;

    background: #f2f2f2;

}

header .get-start .get-start-btn:before,
.wpcf7-submit:before{

  position: absolute;

  content: "";

  background: #141414;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  right: 20px;

  top: calc(50% - 6px);

  z-index: 99;

}

main .hero-section{

  height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

main .hero-section .home_hero_circles {

    width: 100%;

    position: absolute;

    top: -300px;

}



main .hero-section .home_hero_circles .solar-vector-area {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

}



main .hero-section .home_hero_circles .solar-vector-area img {

  animation: spin 15s linear infinite;

}

main .hero-section .home_hero_circles .solar-vector-area1 img {

  animation: spin 20s linear infinite;

}

main .hero-section .hero-content{

  position: relative;

  max-width: 1000px;

  margin-top: 100px;

  z-index: 9;

}

main .hero-section .hero-content h1{

  display: inline-block;

    text-align: center;

    font-size: 60px;

    font-weight: 600;

    color: var(--primary-color);

    letter-spacing: 5px;

    word-spacing: 5px;

}

main .hero-section .hero-content h1 span{

  font-family: "Bubbler One", sans-serif;

  font-weight: 500;

  font-size: 60px;

}

main .hero-section .hero-content .text p{

  color: rgb(24 23 28 / 30%);

  text-align: center;

  display: block;

  font-weight: 300;

  font-size: 26px;

}

main .hero-section .hero-content .buttons{

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 50px;

}

main .hero-section .hero-content .buttons a{

  padding: 15px 60px;

  border-radius: 50px;

}

main .hero-section .hero-content .buttons a.get-started-today{

  background: var(--primary-color);

  border:1px solid var(--primary-color);

  color: #fff;

  margin-right: 10px;

}

main .hero-section .hero-content .buttons a.see-my-work{

  border:1px solid var(--primary-color);

  color: var(--primary-color);

  margin-left: 10px;

}

main .hero-section .img-before{

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

}

/**

 * Timeline styling

 */

main .timeline-section{

  position: relative;

  background: var(--primary-color);

  padding: 100px 0;

  margin-top: -1px;

}



main .timeline-section .timeline {

  display: flex;

  flex-direction: column;

  position: relative;

}

main .timeline-section .timeline__track {

  background: #FFE500;

  background-clip: content-box;

  height: 100%;

  left: 30px;

  min-height: 9px;

  max-height: 100%;

  padding: 0 5px 7px;

  position: absolute;

  top: 0;

  width: 14px;

  left: calc(33.3333% - 7px);

  z-index: 2;

}

main .timeline-section .timeline__track::after {

  background: #fff;

  border-radius: 50%;

  bottom: 0;

  content: "";

  height: 14px;

  left: 0;

  position: absolute;

  width: 14px;

}

main .timeline-section .timeline__track_line{

    background: #d3cece;

    height: calc(100% - 100px);

    position: absolute;

    top: 0;

    width: 2px;

    left: calc(33.3333% - 1px);

    z-index: 1;

}

main .timeline-section .timeline__item {

  padding-left: 30px;

  margin-bottom: 200px;

  position: relative;

  width: 100%;

}

main .timeline-section .timeline__item:last-child{

  margin-bottom: 0;

}

main .timeline-section .timeline__item .timeline__wrap h2{

  color: #fff;

  font-size: 45px;

  font-weight: 600;

  margin-bottom: 150px;

}

main .timeline-section .timeline__item .project-details{

  padding: 0 50px 50px;

}

main .timeline-section .timeline__item .project-details img{

  border-radius: 20px;

}

main .timeline-section .timeline__item .project-details .role{

  padding-top: 50px;

}

main .timeline-section .timeline__item .project-details .role h4{

  color: rgb(255 255 255 / 62%);

  font-size: 26px;

  text-align: left;

}

main .timeline-section .timeline__item .project-details .role ul{

  position: relative;

  padding: 0;

  margin:30px 0 0 0;

}

main .timeline-section .timeline__item .project-details .role ul li{

  display: inline-block;

  width: auto;

  float: left;

  margin-right: 20px;

  margin-bottom: 30px;

}

main .timeline-section .timeline__item .project-details .role ul li:last-child{

  margin-left: 0;

}

main .timeline-section .timeline__item .project-details .role ul li a{

  padding: 10px 60px;

  background: #2B2932;

  color: rgb(255 255 255 / 62%);

  border-radius: 50px;

}

@media screen and (min-width: 768px) {

  main .timeline-section .timeline__item {

    padding-left: 0;

  }

}

@media screen and (min-width: 768px) {

  main .timeline-section .timeline__item:nth-child(odd) {

  }

}

@media screen and (min-width: 768px) {

  main .timeline-section .timeline__item:nth-child(even) {

    margin-left: auto;

    text-align: right;

  }

}

@media screen and (min-width: 768px) {

  main .timeline-section .timeline__item:nth-child(even) .timeline__line {

    left: 0;

    right: auto;

  }

}

main .timeline-section .timeline__line {

  background: #393e46;

  height: 4px;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  z-index: 2;

}

@media screen and (min-width: 768px) {

  main .timeline-section .timeline__line {

    left: auto;

    right: 0;

  }

}

main .timeline-section .timeline__wrap img {

  height: 200px;

  width: 300px;

}

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

  main .timeline-section .timeline__footer {

    padding-left: 30px;

  }

}

main .timeline-section .timeline.is-init .timeline__line {

  transition: width 0.5s ease-in-out;

  width: 0;

  will-change: width;

}

main .timeline-section .timeline.is-init .timeline__wrap {

  opacity: 0;

  transform: translateY(-20px);

  transition: transform 0.5s, opacity 0.2s;

  will-change: opacity, transform;

}

main .timeline-section .timeline.is-init .timeline__footer {

  opacity: 0;

  transition: opacity 0.2s;

  will-change: opacity;

}

main .timeline-section .timeline.is-loading .timeline__line, 

main .timeline-section .timeline.is-loading .timeline__wrap, 

main .timeline-section .timeline.is-loading .timeline__footer {

  transition: none;

}

main .timeline-section .timeline .is-visible .timeline__line {

    width: 100%;

}

main .timeline-section .timeline .is-visible .timeline__wrap {

    opacity: 1;

    transform: translateY(0);

}

main .timeline-section .timeline .is-visible.timeline__footer {

  opacity: 1;

}

main .timeline-section .img-before{

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

}

main .about-me{

    padding: 100px 0;

    position: relative;

    overflow: hidden;

}

main .about-me .inner-container{

    position: relative;

    z-index: 99;

}

main .about-me .about-circle{

    position: absolute;

    left: 0;

    top: 120px;

    z-index: 2;



}

main .about-me .about-img{

  position: relative;

}

main .about-me .about-img:before{

    position: absolute;

    content: "";

    width: 74px;

    height: 74px;

    background: #F5F5F5;

    border-radius: 50%;

    right: 90px;

    top: 0;

    z-index: -1;

}

main .about-me .about-img img{

    z-index: 9;

}

main .about-me .about-content{

    padding: 0 0 0 50px;

    margin:0;

}

main .about-me .about-content h2{

    font-size: 70px;

    font-weight: 500;

    letter-spacing: 8px;

    word-spacing: 1px;

}

main .about-me .about-content .who-iam{

    position: relative;

    display: block;

    margin: 30px 0 50px;

}

main .about-me .about-content .who-iam:before{

    position: absolute;

    content: "";

    background: #000;

    width: 69%;

    height: 2px;

    top: calc(50% - 1px);

    right: 0;

}

main .about-me .about-content h5{

    position: relative;

    display: inline-block;

    font-size: 40px;

    font-weight: 400;

    letter-spacing: 5px;

}

main .about-me .about-content .about-text p{

    font-size: 24px;

    line-height: 34px;

    letter-spacing: 1px;

    color: rgb(24 23 28 / 80%);

}

main .lets-create{

    position: relative;

    padding: 100px 0;

    height: 100vh;

    display: flex;

    align-items: center;

}
main .lets-create .inner-container{
  position: relative;
}
main .lets-create .inner-container .lets-circle{
  position: absolute;
  left: 60%;
  /* top: 200px; */
  transform: translateX(-50%);width: 100%;}

main .lets-create .lets-title h2{
  color: #fff;
  font-size: 55px;
  font-weight: 600;
  letter-spacing: 8px;
  word-spacing: 10px;
  line-height: 80px;
  z-index: 1;
  position: relative;
  font-family: "Anek Malayalam", sans-serif;
  max-width: 65%;
  margin-top: 120px;
  margin-left: 23%;}

main .lets-create .lets-title h2 strong{

    color: #fff;

    font-weight: 600;

}

main .lets-create .lets-title h2 span{

    display: block;

    font-weight: 400;

    text-align: center;

    margin-left: -15px;

}

main .lets-create .lets-title h2 span strong{

    font-weight: 400;

}

main .lets-create .lets-link{text-align: left;margin-top: 50px;margin-left: 23%;}

main .lets-create .lets-link a{

    position: relative;

    background: #fff;

    padding: 15px 50px;

    border-radius: 50px;

    font-size: 26px;

}

footer{

    padding: 30px 0;

    background: var(--primary-color);

}

footer .ways .text-way{

    margin-right: 50px;

    color: #fff;

    font-size: 30px;

    font-weight: 500;

    text-transform: capitalize;

}

footer .ways .ways-links a{

    border:1px solid #aaa;

    padding: 10px 30px;

    border-radius: 50px;

    color: #fff;

    margin-right: 10px;

    text-align: center;

}

footer ul.social-links{

    padding: 0;

    margin:0;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}

footer ul.social-links li{

    margin-right: 10px;

}

footer ul.social-links li:last-child{

    margin-right: 0;

}

footer ul.social-links li a{

    width: 45px;

    height: 45px;

    background: #fff;

    border-radius: 50%;

    color: var(--primary-color);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    font-weight: 600;

}

@keyframes spin {

  0% {

    transform: rotate(0deg);

    transform-origin: 100 100;

  }

  100% {

    transform: rotate(360deg);

    transform-origin: 100 100;

  }

}

.btn-6 {

  color: var(--primary-color);

}

.btn-6 strong{

  position: relative;

  color: var(--primary-color);

  z-index: 9;

}

.btn-6 span {

  position: absolute;

  display: block;

  width: 0;

  height: 0;

  border-radius: 50%;

  background-color: #E5E5E5;



  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;

  transform: translate(-50%, -50%);

  z-index: 2;

}

.btn-6:hover {

  color: #ccc0c1;

}

.btn-6:hover span {

  width: 225%;

  height: 562.5px;

}

.btn-6:active {

  background-color: #330107;

}
.single-project{
    background: var(--primary-color);
}
.single-project .home_hero_circles {
    width: 100%;
    position: absolute;
    top: -300px;
    opacity: .03;
}
footer.footer-contact{
    background: #fff;
}
footer.footer-contact .ways .text-way,
footer.footer-contact .ways .ways-links a{
    color: var(--primary-color);
}
footer.footer-contact ul.social-links li a{
    background:var(--primary-color);
    color: #fff;
}