@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Lilita+One&display=swap');
/* .................... general styling start...........................................................................*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --main-color:#C9F31D;
    --black-color:black;
    --white-color:white;
    --border-color:rgba(91, 91, 91, 0.91);
    --background-color-hover:#f1f1f1;
    --color-section:#191618;
    --color-section-div:#1D1D1D;
    --color-pragrah:#8E8E8E;
    --bg-section:#15161A;
    --star-color:#ffc107;
} 
/*==================== scroll change style =====================*/
::-webkit-scrollbar {
  width: 6px; 
}
::-webkit-scrollbar-thumb {
  background:var(--main-color);
  border-radius: 6px;
}

body{
    background-color:var(--black-color);
    color: var(--white-color);
    overflow: hidden;
}
/*================= loading screen start ======================*/
.loading{
  z-index: 999999999999;
}
.loader {
  width: 108px;
  height: 16px;
  background:
    radial-gradient(circle 8px at 8px center, var(--main-color) 100%, transparent 0),
    radial-gradient(circle 8px at 8px center, var(--main-color) 100%, transparent 0);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  position: relative;
  animation: ballX 1s linear infinite;
}
.loader:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:#FFF;
  inset:0;
  margin:auto;
  animation: moveX 1s cubic-bezier(0.5,300,0.5,-300) infinite;
}
@keyframes ballX {
  0%,25%,50%,75%, 100%  {background-position: 25% 0,75% 0}
  40%     {background-position: 25% 0,85% 0}
  90%     {background-position: 15% 0,75% 0}
}
@keyframes moveX {
  100% {transform:translate(0.15px)}
}
/*================= loading screen end ======================*/
a{
  text-decoration: none;
  transition: all 0.3s ease-out;
  color:var(--white-color);
  display: block;
}
a:hover{
  color: var(--main-color);
}
button{
  background-color: var(--main-color);
  border: 0;
  border-radius: 5px;
  font-size: 1.1rem;
  position: relative;
}
button::after{
  content: "";
  background-color: rgba(0, 0, 0,0.3);
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  transition: all 0.4s;
}
button:hover::after{
  height: 100%;
}
i{
  font-size: 1.2rem;
  cursor: pointer;
}
p{
  font-size: 1.2rem;
}
.color-section{
  background-color: var(--bg-section);
}
/*============= arrow icon rotate ============*/
.work-icon{
  background-color: var(--color-section-div);
  height: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.work-icon i{
  transform: rotate(45deg);
}
/*============= circle button ==============*/
.circle-button{
  width: 200px;
  height: 200px;
  background-color: var(--main-color);
  color: var(--black-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.circle-button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid var(--main-color);
  border-radius: 50%;
  top: 3%;
  left: -3%;
  z-index: 1;
  transition: all 0.6s ease;
}
.circle-button:hover::before{
  top:-10px;
}
.lightBoxContainer{
  background-color: rgba(0, 0, 0,0.8);
  z-index: 999;

}
.lightBoxItem{
  width: 50%;
}
/* .................... general styling end ...........................................................................*/
/*============ anmitions ==========*/
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rotate {
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotate(-20deg);
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/*======================= section title and Pragraph ================*/
.work-page{
  background-color: var(--bg-section);
}
.title-section h2{
  font-size: 2rem;
  font-family: "Caveat", cursive;
  color: var(--main-color);
}
.title-section p{
  font-size: 3.5rem;
  width: 70%; 
}
.title-section p.show{
  animation: slideUp 1.5s ease forwards;
}
.title-line{
  width: 6%;
  height: 2px;
  background-color: var(--main-color);
}
.main-title-section.show{
  animation: slideDown 1.5s ease forwards;
}
/*...................... navbar start .................................................................................*/
.navbar-content{
  background-color: var(--black-color);
  border-bottom: 0.1px solid var(--border-color);
  z-index: 99;
  transition: background-color 0.4s;
}
/*================= logo =======================*/
.logo{
  border-right: 0.1px solid var(--border-color);
}
.logo img{
    width: 60%;
    cursor: pointer;
}
.navbar-links{
  width: 65%;
  display: flex;
}
.navbar-links a{
  text-transform: uppercase;
  transition: all 0.3s;
}
.navbar-links li a.active{
  color:var(--main-color);
}
/*================= dropdown navbar ====================*/
.dropdown-list {
    visibility: hidden;
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 100;
    transform: translate(-10%,50%);
    transition: all 0.3s ease-out;
} 
.dropdown-list a{
    padding: 10px 20px;
    color:var(--black-color);
    text-transform: capitalize;
}
.arrow-up {
  top: -10px;
  left: 20px; 
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid white;
}  
.dropdown-list a:hover {
  background-color:var(--background-color-hover);
  color: var(--main-color);
  padding-left: 30px;
}
.dropdown:hover .dropdown-list {
  visibility: visible;
  transform: translate(-10%,20%);
}
.icons-list{
  border-left:0.1px solid var(--border-color) ;
}
.icons{
  display: none;
}
/*================= sidebar =====================*/
.side-bar{
  z-index: 200;
  border-left: 1px solid var(--border-color);
  width: 25%;
  right: -100%;
  transition: all 0.3s;
}
.main-content{
  color: var(--border-color);
}
.social-media i{
  margin: 0 2%;
  color: var(--black-color);
  padding: 4% 4%;
  border-radius: 50%;
  background-color: var(--main-color);
  cursor: pointer;
  transition: all 0.4s;
}
.social-media i:hover{
  color: white;
}
.closed-content{
  background-color: var(--main-color);
  color: var(--border-color);
}
/*............................. navbar end ......................................................................*/
/*............................. header section start ............................................................*/
.header-section{
  background-image: url(../images/background-header.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  justify-content: space-between;
}
.left-info, .right-info {
  height: 70%;
  display: flex;
  align-items:baseline;
  justify-content:space-around;
  writing-mode: vertical-rl;
}
.scroll-down,.contact,.follow-me{
  cursor: pointer;
}
.right-info i{
  transition: all 0.4s ease;
}
.right-info i:hover{
  color: var(--main-color);
}
.center-content h1 {
  font-size: 6rem;
}
.availability{
  width: 50%;
}
.availability p {
  font-size: 1.4rem;
}
#arrow{
  transform: rotate(-45deg);
}
.designer{
  color: transparent;
  -webkit-text-stroke: 0.5px white;
  background: linear-gradient(to right, var(--main-color) 50%, transparent 50%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: change 3s infinite alternate ease-in-out;
}
.header-image img{
  width: 70%;
}
.header-image.show{
  animation: zoomIn 1s ease;
}
@keyframes change {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}
.video-play i{
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  padding: 4%;
  border: 1.2px solid var(--white-color);
  border-radius: 50%;
 outline: 2px solid var(--white-color);
 animation: playvideo 2s infinite  ease-in-out;
}
.video-play img{
  animation: rotate 2s infinite alternate ease-in-out;
}
.video-play p{
  font-size: 1.2rem;
}
@keyframes playvideo {
  0%{
    outline: 2px solid var(--white-color);
    outline-offset: 0px;
  }
  100%{
    outline-offset: 30px;
    outline: 0px;
  }
}
.video-header{
  background-color: rgba(0, 0, 0,0.9);
  z-index: 99999999;

}
.video-header .video-content{
  width: 50%;
  height: 50%;
}
/*............................. header section end ............................................................*/
.slider-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color:var(--main-color);
  padding: 2% 0%;
}

.slider-track {
  display: flex;
  width: fit-content;
  animation: scroll-left 10s linear infinite;
}

.slider-content {
  display: inline-block;
  padding-right: 50px; 
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* ........................................................ about section start ...............................................*/
.info-content p{
  font-size: 2rem;
}
.info-content p.show{
  animation: slideUp 2s ease forwards;
}
.links a{
  margin: 0% 1%;
  font-size: 1.1rem;
  padding: 1% 2%;
  background-color:var(--color-section);
  border-radius: 8px;
  color: var(--white-color);
  transition: all 0.5s;
}
.links a.active{
  background-color: var(--main-color);
  color: var(--black-color);
}
.section{

  margin: 6% 0%;
}
.about-image{
  width: 70%;
}
.about-image img{
  width: 100%;
}
.about-content p{
  font-size: 1.2rem;
  color: var(--color-pragrah);
}
.personal-info{
  background-color: var(--color-section-div);
}
.personal-info:hover{
  border: 1px solid var(--main-color);
}
.year{
  color: var(--main-color);
}
.experience-content{
  border-bottom:0.1px solid var(--border-color);
  border-top:0.1px solid var(--border-color) ;
  transition: all 0.1s;
}
.experience-content:hover{
  border-bottom:0.1px solid var(--main-color);
  border-top:0.1px solid var(--main-color) ;
}
.experience-content span{
  font-size: 1.2rem;
}
.skills-percent{
  font-size: 2rem;
  font-weight: bolder;
}

.about-content {
  animation: none;
  transition: all 0.5s ease-in-out;
}


.about-content.show {
  animation: slideUp 0.6s ease-out;
}
.about-image.show,
.personal-info.show{
  animation: zoomIn 1s ease forwards;
}
/* ........................................................ about section end ...............................................*/
/*.............................................. our awards secton start ....................................................*/
.our-awards h2{
  font-size: 3rem;
}
.our-awards p,
.our-awards a{
  font-size: 1.2rem;
}
.our-awards div{
  border-bottom: 0.1px solid var(--border-color);
}
.title-award{
  color: var(--main-color);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.our-awards.show{
  animation: slideUp 2s ease-out;
}
/*.............................................. our awards secton end ....................................................*/
/*.............................................. work secton start ....................................................*/
.work-content span{
  color: var(--main-color);
  font-size: 1.3rem;
}
.work-content{
  cursor: pointer;
}
.work-content p{
  font-size: 1.7rem;
}
.work-content p.show{
  animation: slideUp 1s ease-out;
}
.work-content:hover .work-icon{
  background-color: var(--main-color);
  color: var(--black-color);
}
/*.............................................. work secton end ....................................................*/
/*.............................................. services secton start ....................................................*/
.service-content{
  border-bottom: 0.1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  transition: all 0.3 ease;
}
.service-title.show{
  animation: slideUp 1s ease-out;
}
.service-content span{
  font-size: 1.3rem;
}
.service-pargragh{
  width: 50%;
  color: var(--color-pragrah);
}
.service-title{
  font-size: 2rem;
  transition: all 0.3s ease;
}
.service-content:hover .work-icon{
  background-color: var(--main-color);
  color: var(--black-color);
}
.service-content:hover .service-title{
  color: var(--main-color);
}
.service-content:hover{
  border-bottom:0.1px solid var(--main-color) ;
}
/*.............................................. services secton end ....................................................*/
/*............................................ work together secton start ................................................*/
.work-together{
  font-size: 1.2rem;
  border-bottom:0.1px solid var(--border-color);
}
.work-together i{
  background-color: var(--main-color);
  font-size: 1.3rem;
}
.work-together span{
  color: var(--color-pragrah);
}
.work-together-image img{
  width: 75%;
}
.work-together-image img.show{
  animation: zoomIn 1s ease forwards;
}
.card{
  color: var(--color-pragrah);
  background-color: transparent;
  border: 0.1px solid var(--border-color);
  transition: all 0.3s ease;
}
.card-image{
  width: 25%;
  background-color: var(--main-color);
}
.card p{
  border-bottom: 0.1px solid var(--border-color);
}
.card h3.show{
  animation: slideUp 0.6s ease-out;
}
.card ul li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}
.card ul.show{
  animation: slideUp 0.6s ease-out;
}
.card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  background-color:var(--main-color);
  border-radius: 50%;
}
.corner {
  width: 50px;
  height: 50px;
  background-color: var(--black-color);
  border-top-left-radius: 100%;
  transition: all 0.4s ease;
}
.card:hover .corner{
  background-color: var(--main-color);
}
.card:hover{
  border: 0.1px solid var(--main-color);
}
.card-center{
  background-color: var(--main-color);
  color: var(--black-color);
}
.card-center button{
  background-color: var(--bg-section);
  color: var(--white-color);
}
.card-center ul li::before{
  background-color: var(--black-color);
}
.card-center .card-image{
  background-color: var(--black-color);
}
/*............................................ work together secton end ................................................*/
/*............................................ testimonial section start ...............................................*/
.customers-slider{
  overflow: hidden;
}
.image-rotate{
  animation: rotate 2s infinite alternate ease-in-out;
}
.swiper-slide {
  line-height: 1.6;
  animation: fadeIn 0.5s ease;
}
.quote.show{
  animation: slideUp 0.8s ease-out;
}
.stars {
  color: #ffc107;
}
.name {
  font-weight: bold;
  color: var(--main-color);
  font-size: 1.8rem;
}

.role {
  color:var(--color-pragrah);
  font-size: 1.3rem;
}

.swiper-pagination-bullet {
  background:var(--color-pragrah);
}

.swiper-pagination-bullet-active {
  background:var(--main-color);
}
.more-companies p.show{
  animation: slideDown 1.5s ease forwards;
}
.more-companies img:hover{
  background-color: var(--color-section);
  border-radius: 8px;
}
/*............................................ testimonial section end ...............................................*/
/*............................................ recent posts section start ...............................................*/
.show-icon{
  border: 0.1px solid var(--white-color);
  font-size: 1rem;
  transition: all 0.4s ease;
}
.posts span{
  color: var(--color-pragrah);
  font-size: 1.1rem;
}
.posts .service-content:hover .show-icon{
  color: var(--main-color);
  border-color:var(--main-color) ;
}
.post-img{
  width: 25%;
  opacity: 0;
  transition: all 0.5s ;
}
.posts .service-content:hover .post-img{
  opacity: 1;
}
/*............................................ recent posts section end ...............................................*/
/*............................................ services details section start ...............................................*/
.service-list{
  border: 0.1px solid var(--border-color);
}
.service-list p{
  color: var(--color-pragrah);
}
.overlay-contact{
  background-color: rgba(0, 0, 0,0.7);
}
/*............................................ services details section end ...............................................*/
/*.................................................. blog page start ......................................................*/
.blog-content{
  transform: translateY(-25%);
  width: 85%;
}
.blog-content a{
  font-size: 1.7rem;
}
.blog-content span{
  color: var(--color-pragrah);
}
.image-blog{
  transition:all 1s ease;
}
.image-blog:hover{
  transform: scale(1.2);
}
.page-link{
  background-color: var(--color-section-div);
  color: white;
  border: 0px;
}
.page-link[aria-current="page"],
.page-link:focus,
.page-link:hover{
  background-color: var(--main-color);
  color: var(--black-color);
}
.icon-search{
  background-color: var(--main-color);
  color: black;
}
.blog-pragraph{
  background-color: var(--main-color);
}
.contact-content{
  background-color: var(--bg-section);
}
input{
  background-color: black;
}
input::placeholder{
  color:var(--color-pragrah);
}
/*.................................................. blog page end ......................................................*/
/*............................................ footer section start .....................................................*/
.footer-section h2{
  font-size: 8.5rem;
  border: 0.5px solid var(--border-color);
}
.footer-section h2.show{
  animation: slideUp 2s ease forwards;
}
.footer-section a{
  font-size: 2.5rem;
  color: var(--main-color);
}
.footer-facebook.show{
  animation: zoomIn 0.5s ease forwards;
}
.footer-facebook{
  border: 0.1px solid var(--border-color);
  transition: all 0.3s ease-in;
}
.footer-facebook:hover,
.scroll-top{
  background-color: var(--main-color);
  color: black;
  cursor: pointer;
}
.copy-right-section{
  background-color: var(--color-section);
}
.copy-right-author{
  color: var(--main-color);
}
/*............................................ footer section end .....................................................*/
/*................................... media queries start ......................................................*/
@media screen and (max-width:1300px){
  /*======================= section title and Pragraph ================*/
.title-section h2{
  font-size: 1.8rem;
}
.title-section p{
  font-size: 3.2rem;
  width: 70%; 
}
  #button-navbar{
    display: none;
  }
  .side-bar{
    width: 40%;
  }
  .left-info, .right-info{
    display: none;
  }
  .center-content h1 {
    font-size: 5rem;
  }
  .availability{
    width: 60%;
  }
  .availability p {
    font-size: 1.3rem;
  }
  .header-image img{
    width: 80%;
  }
  .slider-container{
    padding: 1% 0%;
  }
  .section{
    flex-direction: column;
  }
  .about-image{
    width: 100%;
    text-align: center;
  }
  .about-image img{
    width: 40%;
  }
  .our-awards h2{
    font-size: 2.5rem;
  }
  .service-content span{
    font-size: 1.1rem;
  }
  .service-pargragh{
    width: 50%;
    color: var(--color-pragrah);
  }
  .service-title{
    font-size: 1.3rem;
    transition: all 0.3s ease;
  }
  .work-together-image img{
    width: 50%;
  }
  .blog-content a{
    font-size: 1.5rem;
  }
  .footer-section h2{
    font-size: 7.5rem;
  }
  .footer-section a{
    font-size: 2rem;
  }
  .scroll-top{
    margin: 2% 0%;
  }
}
@media screen and (max-width:950px){
  .circle-button{
    width: 150px;
    height: 150px;
  }
  .lightBoxItem{
    width: 70%;
  }
  /*======================= section title and Pragraph ================*/
.title-section h2{
  font-size: 1.5rem;
}
.title-section p{
  font-size: 2.5rem;
  width: 90%; 
}
  #button-navbar{
    display: block;
  }
  i,p,button,
  .video-play p,.about-content p{
    font-size: 1rem;
  }
  .icons-list{
    border-left:0px ;
  }
  .logo img{
    width: 55%;
  }
  .navbar-links{
    background-color: var(--black-color);
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }
  .navbar-links li{
    padding: 3% 0%;
    border-bottom: 0.1px solid var(--border-color);
    transition: all 0.3s;
  }
  .navbar-links li:hover{
    padding-left: 2%;
  }
  .icons{
    display: block;
  }
  .icons .fa-xmark{
    display: none;
  }
  .side-bar{
    width: 50%;
  }
  
  .center-content h1 {
    font-size: 3rem;
  }
  .availability{
    width: 90%;
  }
  .availability p {
    font-size: 1.1rem;
  }
  .header-image img{
    width: 80%;
  }
  .video-play i{
    font-size: 1.3rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 4%;
  }  
  .video-header .video-content{
    width: 80%;
    height: 60%;
  }
  .image8{
    width: 10%;
  }
  .info-content p,
  .links a,
  .experience-content span,
  .experience-content h3{
    font-size: 1rem;
  }
  .skills-percent{
    font-size: 1.5rem;
  }
  .our-awards h2{
    font-size: 2rem;
  }
  .our-awards div{
    flex-direction: column;
  }
  .our-awards p,
  .our-awards a{
    font-size: 1.1rem;
  }
  .work-content span{
    font-size: 1.1rem;
  }
  .work-content p{
    font-size: 1.4rem;
  }
  .card-image{
    width: 30%;
  }
  .service-content span{
    font-size: 1rem;
  }
  .service-pargragh{
    width: 50%;
    color: var(--color-pragrah);
  }
  .service-title{
    font-size: 1.1rem;
    transition: all 0.3s ease;
  }
  .work-together-image img{
    width: 60%;
  }
  .customers-slider{
    width: 90%;
    margin: auto;
  }
  .swiper{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(22, 22, 24,0.9);
  }
  .role{
    color: var(--white-color);
  }
  .post-img{
    width: 30%;
  }
  .blog-content a{
    font-size: 1.3rem;
  }
  .footer-section h2{
    font-size: 5rem;
  }
  .footer-section a{
    font-size: 1.5rem;
  }
}
@media screen and (max-width:500px){
  .lightBoxItem{
    width: 80%;
  }
  /*======================= section title and Pragraph ================*/
  .title-section h2{
    font-size: 1.5rem;
  }
  .title-section p{
    font-size: 2rem;
    width: 100%; 
  }

  #button-navbar{
    display: none;
  }
  .side-bar{
    width: 85%;
  }
  .center-content{
    padding-top: 25%;
    width: 100%;
  }
  
  .center-content h1 {
    font-size: 3rem;
  }
  .availability p {
    font-size: 1rem;
  }
  .header-section{
    flex-direction: column;
  }
  .header-image img{
    width: 60%;
    transform: translateY(-25%);
  }
  .video-header .video-content{
    width: 100%;
    height: 70%;
  }
  .links a{
    margin: 0% 1%;
    font-size: 1rem;
    padding: 1% 1%;
    border-radius: 4px;
  }
  .skills-percent{
    font-size: 1.3rem;
  }
  .work-content span{
    font-size: 1rem;
  }
  .work-content p{
    font-size: 1.2rem;
  }
  .service-content{
    flex-direction: column;
    align-items: flex-start;
  }
 .service-pargragh{
  width: 100%;
 }
  .service-content div,
  .service-content p,
  .service-content a{
    margin: 1% 0%;
  }
  .work-together,
  .work-together i{
    font-size: 1rem;
  }
  .work-together-image img{
    width: 80%;
  }
  .name {
    font-size: 1.5rem;
  }
  .customers-slider{
    width: 100%;
  }
  .post-img{
    text-align: center;
    width: 75%;
    padding: 5% 0%;
    opacity: 1;
  }
  .blog-content{
    transform: translateY(-20%);
    width: 90%;
  }
  .footer-section h2{
    font-size: 4rem;
  }
  .footer-section a{
    font-size: 1.3rem;
  }
  .card-image{
    width: 40%;
  }
}