/*-----------
fonts
--------------*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Great+Vibes&family=Kaushan+Script&family=Noticia+Text:ital,wght@0,400;0,700;1,400&family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');
@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");
/*---------------
global style
----------------*/
/* define custom css variables */
:root{
   --bg-black-900: #000000;
   --bg-black-100: #dddddd;
   --bg-black-50: #eff0f4;
   --bg-opacity: rgba(255,255,255,0.5);
   --text-black-900: #000000;
   --text-black-700: #555555;
   --text-black-600: #666666;
   --text-black-300: #bbbbbb;
   --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
   --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
   --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
   --inner-shadow-0: inset 0 0 0 #d0d0d0, inset 0 0 0 #f8f8f8;
}
/* override custom css variables for dark theme */
body.dark{
   --bg-black-900: #ffffff;
   --bg-black-100: #353535;
   --bg-black-50: #2b2c2f;
   --bg-opacity: rgba(43,44,47,0.5);
   --text-black-900: #ffffff;
   --text-black-700: #ffffff;
   --text-black-600: #bbbbbb;
   --outer-shadow: 3px 3px 3px #222327, -3px -3px 3px #363636;
   --outer-shadow-0: 0 0 0 #222327, 0 0 0 #363636;
   --inner-shadow: inset 3px 3px 3px #222327, inset -3px -3px 3px #363636;
   --inner-shadow-0: inset 0 0 0 #222327, inset 0 0 0 #363636;
}
body{
   font-size: 16px;
   line-height: 1.5;
   overflow-x: hidden;
   background-color: var(--bg-black-50);
  
}
body.hidden-scrolling{
   overflow-y: hidden;
}
*:not(i){
   font-family: 'Raleway', sans-serif;
   font-weight: 400;
}
*{
   margin:0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
}
:before,:after{
   box-sizing: border-box;
}
a{
   text-decoration: none;
}
ul{
   list-style: none;
   margin:0;
   padding:0;
}
img {
   vertical-align: middle;
   max-width: 100%;
}


video{

   vertical-align: middle;
      max-width: 100%;
}

.container{
   max-width: 1140px;
   margin:auto;
}
.row{
   display: flex;
   flex-wrap: wrap;
}
.justify-content-between{
   justify-content: space-between;
}
.outer-shadow{
   box-shadow: var(--outer-shadow);
}
.inner-shadow{
   box-shadow: var(--inner-shadow);
}
.hover-in-shadow{
   position: relative;
   z-index: 1;
}
.hover-in-shadow:hover{
   box-shadow: var(--outer-shadow-0);  
}
.hover-in-shadow:after{
   content: '';
   position: absolute;
   left:0;
   top:0;
   width: 100%;
   height: 100%;
   transition: all 0.3s ease;
   z-index: -1;
}
.hover-in-shadow:hover:after{
   box-shadow: var(--inner-shadow);
}
.align-items-center{
   align-items: center;
}
.btn-1{
   padding: 10px 25px;
   font-size: 16px;
   font-weight: 500;
   color: var(--skin-color);
   background-color: transparent;
   line-height: 1.5;
   cursor: pointer;
   border-radius: 30px;
   transition: all 0.3s ease;
   display: inline-block;
   border:none;
}
.btn-1:after{
   border-radius: 30px;
}
.section-title{
   padding: 0 15px;
   flex:0 0 100%;
   max-width: 100%;
   text-align: center;
   margin-bottom: 60px;

}
.section-title h2{
   display: inline-block;
   font-size: 30px;
   font-weight: 700;
   color: var(--text-black-900);
   text-transform: uppercase;
   margin:0;
   font-family: "Tangerine", serif;
   
}
.section-title h2:before{
   content: attr(data-heading);
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-black-900);
   font-family: 'Kaushan Script', cursive;
   animation: glowing 4s linear infinite;
}

@keyframes glowing {

   0%,
   100% {
      color: #fff;
      filter: blur(1px);
      text-shadow: 0 0 10px #00b3ff,
         0 0 20px #00b3ff,
         0 0 40px #00b3ff,
         0 0 80px #00b3ff,
         0 0 120px #00b3ff;

   }

   5%,
   95% {
      color: grey;
      text-shadow: none;
      filter: blur(0px);
   }
}


.section.hide{
   display: none;
}




.section-titleskill {
   padding: 0 15px;
   flex: 0 0 100%;
   max-width: 100%;
   text-align: center;
   margin-bottom: 60px;
   margin-top: 80px;
}

.section-titleskill h2 {
   display: inline-block;
   font-size: 30px;
   font-weight: 700;
   color: var(--text-black-900);
   text-transform: uppercase;
   margin: 0;
   
  
}



.section-titleskill h2:before {
   content: attr(data-heading);
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: var(--skin-color);
   font-family: 'Kaushan Script', cursive;
   animation: glowing 4s linear infinite;
   
}




/*-----------
preloader
-----------*/
#preloader {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
  background-color: var(--bg-black-50);
   z-index: 100;


   justify-content: center;


}


.scan {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;

}


.scan h1 {
   text-transform: uppercase;
   text-align: center;
   font-size: 1em;
   font-weight: bold;
   letter-spacing: 2px;
   margin-top: 100px;
   margin-left: -160px;
   color: black;
transform: rotate(45deg);
   animation: animate_text 0.5s steps(1)infinite;
}


@keyframes animate_text {

   0%,
   100% {
      opacity: 0;
   }

   50% {
      opacity: 1;
   }
}

.fingerprint {
   width: 106px;
   height: 56px;
   display: block;
   margin: 300px auto;
   background-image: linear-gradient(#000 50px, transparent 0), linear-gradient(#000 50px, transparent 0), linear-gradient(#000 50px, transparent 0), linear-gradient(#000 50px, transparent 0), radial-gradient(circle 14px, #000 100%, transparent 0);
   background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
   background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
   background-repeat: no-repeat;
   position: relative;
   transform: rotate(-45deg);
   box-sizing: border-box;


}

.fingerprint::after,
.fingerprint::before {
   content: '';
   position: absolute;
   width: 56px;
   height: 56px;
   border: 6px solid black;
   border-radius: 50%;
   left: -45px;
   top: -10px;
   background-repeat: no-repeat;
   background-image: linear-gradient(#000 64px, transparent 0), linear-gradient(#000 66px, transparent 0), radial-gradient(circle 4px, #000 100%, transparent 0);
   background-size: 40px 1px, 1px 40px, 8px 8px;
   background-position: center center;
   box-sizing: border-box;
   animation: rotation 0.3s linear infinite;

}

.fingerprint::before {
   left: 25px;
   top: 60px;
}

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

   100% {
      transform: rotate(360deg);
   }
}


/*-----------
header
-------------*/
.header{
   padding: 20px 15px;
   position: absolute;
   width: 100%;
   top:0;
   left: 0;
   z-index: 99;
}
.header .logo a{
   display: inline-block;
   text-align: center;
   line-height: 36px;
   height: 40px;
   width: 40px;
   font-size: 24px;
   color:var(--skin-color);
   border-radius: 50%;
   border:2px solid var(--skin-color);
   font-weight: 600;
   text-transform: uppercase;
}
.header .hamburger-btn{

   height: 40px;
   width: 40px;
   display: flex;
   align-items: center;
   cursor: pointer;
   border-radius: 50%;
   justify-content: center;
   transition: all 0.3s ease;
   margin-top: 12px;
   margin-right: 50px;
}
.header .hamburger-btn:after{
 
   border-radius: 50%;
}



.header .hamburger-btn i:before{
  
content: "\f0a4";}
.header .hamburger-btn span:before{
  
   top:-60px;
}
.header .hamburger-btn span:after{
   top:6px;
}


/*--------------
navigation menu
----------------*/
.nav-menu{
   position: fixed;
   background-color: var(--bg-black-50);
   padding:0 15px;
   left:0;
   top:0;
   width: 100%;
   height: 100%;
   z-index:-1;
   opacity:0;
   visibility: hidden;
   overflow-y: auto;
}
.fade-out-effect{
   position: fixed;
   left:0;
   top:0;
   width: 100%;
   height: 100%;
   background-color: var(--bg-black-50);
   z-index: -1;
   visibility: hidden;
}
.fade-out-effect.active{
   visibility: visible;
   z-index: 1000;
   animation: fadeOut 0.3s ease-out;
}
@keyframes fadeOut{
   0%{
      opacity: 1;
   }
   100%{
      opacity: 0;
   }
}
.nav-menu.open {
   visibility: visible;
   opacity: 1;
   z-index: 999;
   transition: all 0.3s ease-in;
}

.nav-menu .close-nav-menu {
   height: 40px;
   width: 40px;
   display: block;
   font-size: 35px;
   line-height: 35px;
   border-radius: 50%;
   position: absolute;
   right: 30px;
   top: 45px;
   cursor: pointer;
   margin-right: 20px;
   text-align: center;
   color: var(--text-black-600);
   transition: all 0.3s ease;
}

.nav-menu .close-nav-menu:after {
   border-radius: 50%;
 
}

.nav-menu-inner {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}
.nav-menu ul{
   padding:15px;
}
.nav-menu ul li{
   display: block;
   margin-bottom: 20px;
   text-align: center;
}
.nav-menu ul li:last-child{
   margin-bottom:0;
}
.nav-menu ul li a{
   display: inline-block;
   font-size: 28px;
   font-weight: 600;
color: var(--text-black-900);
   padding: 5px 30px;
   text-transform: capitalize;
   border-radius: 30px;
   transition: all 0.3s ease;
}
.nav-menu ul li a.active{
   color: var(--skin-color);
}
.nav-menu ul li a:after{
   border-radius: 30px;
}



/*-----------
home section
------------*/
.home-section{
   position: relative;
}
.home-section .full-screen{
   padding:50px 0;
   min-height: 100vh;
}

.home-section .img-box {
cursor: pointer;

}
.home-section .home-text,
.home-section .home-img{
   flex:0 0 50%;
   max-width: 50%;
   padding:0 15px;
   
}
.home-section .home-text p{
   color: var(--text-black-300);
   font-size: 18px;
   text-transform: capitalize;
   margin:0;
}
.home-section .home-text h2{
     font-family: 'Kaushan Script', cursive;
   font-size: 55px;
   font-weight: 700;
   color: var(--text-black-900);
   margin:0;
}
.home-section .home-text h1{
   font-size: 20px;
   font-weight: 500;
   color: var(--text-black-600);
   margin:0;
   text-transform: capitalize;
}
.home-section .home-text .btn-1{
   margin-top: 30px;
}
.home-section .home-img .img-box{
   max-width: 450px;
   display: block;
   margin:auto;
   border-radius: 10%;
   padding: 15px;
}
.home-section .home-img .img-box img{
   width: 100%;
   border-radius: 50%;
   border:20px solid transparent;
}

/*----------------
about section
----------------*/



.about-section{
   padding: 80px 0 0;
   min-height: 100vh;
}


.section-title .name > span{
   animation: glow 2s ease-in-out infinite;
   font-family: "Sacramento", cursive;
   

}

@keyframes glow{
   0%, 100%{
      color: #fff;
      text-shadow: 0 0 12px black, 0 0 50px black, 0 0 100px black;
   }
   10%, 90%{
      color: #111;
      text-shadow: none;
   }
}
      

.section-title .name > span:nth-child(2){
   animation-delay: 0.25s;
}

.section-title .name>span:nth-child(3) {
   animation-delay: 0.5s;
}

.section-title .name>span:nth-child(4) {
   animation-delay: 0.75s;
}

.section-title .name>span:nth-child(5) {
   animation-delay: 1s;
}

.section-title .name>span:nth-child(6) {
   animation-delay: 1.25s;
}

.section-title .name>span:nth-child(7) {
   animation-delay: 1.5s;
}

.section-title .name>span:nth-child(8) {
   animation-delay: 1.75s;
}
 

.section-title .service {
  color: white;
  position: relative;
   font-family: "Sacramento", cursive;
   
  
   
   
}


.section-title .service::after {
  content:attr(data-text);
  border-right:5px solid #555555;
  width: 8%;
  color: #555555;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 0;
  text-shadow: 0 0 6px #f8f8f8;
  animation: animation 3s linear infinite alternate;




}

@keyframes animation {
   0%{
      width: 0;
   }
   100%{
      width: 100%;
   }
}



.section-title .text{
  
      color: #111;
      
}

.dud {
   color: #757575;
}




.hidden {
   opacity: 0;
}


.hidden {
   opacity: 0;
}

.console-container {

   font-family: Khula;
   font-size: 4em;
   text-align: center;
   height: 200px;
   width: 600px;
   display: block;
   position: absolute;
   color: white;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

.console-underscore {
   display: inline-block;
   position: relative;
   top: -0.14em;
   left: 10px;
}





@-webkit-keyframes mask-move {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(129px);
   }
}

@keyframes mask-move {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(129px);
   }
}

@-webkit-keyframes mask-inner-move {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-129px);
   }
}

@keyframes mask-inner-move {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-129px);
   }
}




.about-section .about-img{
   flex:0 0 40%;
   max-width: 40%;
  margin-top: -20px;
   padding: 15px;
   line-height: 300px;
   cursor: pointer;
 


  
}
.about-section .about-img .img-box{
   padding: 15px;
   border-radius: 40px;



}
   
   
   .about-section .about-img .video{
      border-radius: 40px;
     
}
  
}
.about-section .about-img .img-box img{
   width: 100%;

   border:10px solid transparent;
   border-radius: 40px;
    
}

.about-section .about-info{

   flex:0 0 60%;
   max-width: 60%;
   padding:0 15px;
    
  
   color: var(--text-black-900);
}
.about-section .about-info p{
   
   font-size: 16px;
   line-height: 26px;
   margin-bottom: 15px;
  
color: var(--text-black-900);
}
.about-section .about-info span{
   font-weight: 60;
}
.about-section .about-info .btn-1{
   margin:30px 20px 0 0;
}


.about-section .tab-content{
   flex:0 0 100%;
   max-width: 100%;
   display: none;
}
.about-section .tab-content.active{
   display: block;
   animation: fadeInTop 0.5s ease;
}
.about-section .skills{
   padding:0 0 40px;
}
.about-section .skills .skill-item{
   flex:0 0 50%;
   max-width: 50%;
   padding:0 15px;
   margin-bottom: 40px;
}
.about-section .skills .skill-item p{
   font-size: 16px;
   color: var(--text-black-600);
   text-transform: capitalize;
   margin:0 0 10px;
}
.about-section .skills .skill-item .progress{
   height: 20px;
   border-radius: 10px;
   position: relative;
}
.about-section .skills .skill-item .progress-bar{
   background-color: var(--text-black-600);
   height: 6px;
   left: 7px;
   top:7px;
   position: absolute;
   border-radius: 10px;
}
.about-section .skills .skill-item .progress-bar span{
   position: absolute;
   right: 0;
   top:0;
   font-size: 16px;
   font-weight: 500;
   color: var(--text-black-600);
   margin-top: -40px;
}
.about-section .education,
.about-section .experience{
   padding-bottom:80px;
}
.about-section .timeline{
   flex:0 0 100%;
   max-width: 100%;
   position: relative;
}
.about-section .timeline:before{
   content: '';
   width: 1px;
   height: 100%;
   left: 50%;
   top:0;
   background-color: var(--bg-black-100);
   position: absolute;
}
.about-section .timeline .timeline-item{
   flex:0 0 100%;
   max-width: 100%;
   padding:0 15px;
}
.about-section .timeline .timeline-item:nth-child(odd){
   padding-right: calc(50% + 50px);
   text-align: right;
}
.about-section .timeline .timeline-item:nth-child(even){
   padding-left: calc(50% + 50px);
}
.about-section .timeline .timeline-item-inner{
   padding: 30px;
   border-radius: 5px;
   position: relative;
}
.about-section .timeline .timeline-item-inner:before{
   content: '';
   position: absolute;
   width: 30px;
   height: 1px;
   background-color: var(--bg-black-100);
   top:37px;
   z-index: -1;
}
.about-section .timeline .timeline-item:nth-child(odd) .timeline-item-inner:before{
   right: -30px;
}
.about-section .timeline .timeline-item:nth-child(even) .timeline-item-inner:before{
   left: -30px;
}
.about-section .timeline .timeline-item-inner .icon{
   height: 40px;
   width: 40px;
   background-color: var(--bg-black-50);
   text-align: center;
   border:1px solid var(--bg-black-100);
   line-height: 40px;
   border-radius: 50%;
   font-size: 16px;
   color: var(--skin-color);
   position: absolute;
   top:18px;
}
.about-section .timeline .timeline-item:nth-child(odd) .icon{
   right: -70px;
}
.about-section .timeline .timeline-item:nth-child(even) .icon{
   left: -70px;
}
.about-section .timeline .timeline-item-inner span{
   font-weight: 500;
   color: var(--skin-color);
   display: block;
   margin:0 0 10px;
   text-transform: capitalize;
}
.about-section .timeline .timeline-item-inner h3{
   font-size: 20px;
   color: var(--text-black-700);
   font-weight: 600;
   margin:0 0 5px;
   text-transform: capitalize;
}
.about-section .timeline .timeline-item-inner h4{
   font-size: 16px;
   font-style: italic;
   color: var(--text-black-600);
   margin:0;
}
.about-section .timeline .timeline-item-inner p{
   font-size: 16px;
   color: var(--text-black-600);
   line-height: 26px;
   margin:15px 0 0;
}

/*-----------------
service section
-----------------*/
.service-section{
   padding:80px 0 80px;
   min-height: 100vh;
   
}
.service-section .service-item{
   flex:0 0 33.33%;
   max-width: 33.33%;
   padding:15px;
   display: flex;
   flex-wrap: wrap;
   cursor: pointer;
}
.service-section .service-item-inner{
   padding: 50px 15px;
   border-radius: 5px;
   text-align: center;
   width: 100%;
}
.service-section .service-item-inner .icon{
   height: 60px;
   width: 60px;
   text-align: center;
   border-radius: 50%;
   transition: all 0.3s ease;
   display: block;
   margin:0 auto 30px;
   position: relative;
   color: var(--text-black-600);
}
.service-section .service-item-inner .icon:after{
   content: '';
   position: absolute;
   left:0;
   top:0;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   transition: all 0.3s ease;
}
.service-section .service-item-inner:hover .icon{
   box-shadow: var(--inner-shadow-0);
}
.service-section .service-item-inner:hover .icon:after{
   box-shadow: var(--outer-shadow);
}
.service-section .service-item-inner .icon i{
   font-size: 25px;
   line-height: 60px;
   transition: all 0.3s ease;
}
.service-section .service-item-inner:hover .icon i{
   color: var(--skin-color);
}
.service-section .service-item-inner h3{
   font-size: 20px;
   font-weight:600;
   color: var(--text-black-700);
   margin:0 0 10px;
   text-transform: capitalize;
}
.service-section .service-item-inner p{
   font-size: 16px;
   color: var(--text-black-600);
   margin:0;
   line-height: 26px;
}

/*----------------- 
portfolio section 
---------------------*/
.portfolio-section{
   padding:80px 0 80px;
   min-height: 100vh;
}
.portfolio-section .section-title{
   margin-bottom: 40px;
}
.portfolio-section .portfolio-filter{
   padding:0 15px;
   flex:0 0 100%;
   max-width: 100%;
   text-align: center;
   margin-bottom: 20px;
}
.portfolio-section .filter-item{
   display: inline-block;
   margin:0 5px 10px;
   padding: 5px 10px;
   border-radius: 30px;
   cursor: pointer;
   font-weight: 500;
   color: var(--text-black-600);
   text-transform: capitalize;
   font-size: 16px;
   transition: all 0.3s ease;
}
.portfolio-section .filter-item:hover:not(.active){
   opacity: 0.6;
}
.portfolio-section .filter-item.active{
   color: var(--skin-color);
}
.portfolio-section .portfolio-item{
   flex:0 0 33.33%;
   max-width: 33.33%;
   padding:15px;
   display: flex;
   flex-wrap: wrap;
}
.portfolio-section .portfolio-item.hide{
   display: none;
}
.portfolio-section .portfolio-item.show{
   display: block;
   animation: fadeInTop 0.5s ease;
}
.portfolio-section .portfolio-item-inner{
   padding: 15px;
   border-radius: 5px;
   cursor: pointer;
   width: 100%;
}
.portfolio-section .portfolio-item-img img{
   border-radius: 5px;
   width: 100%;
   transition: all 0.3s ease;
}




.portfolio-section .portfolio-item-inner:hover .portfolio-item-img img{
   transform: translateY(-25px);
}






.portfolio-section .portfolio-item-img{
   position: relative;
}


.portfolio-section .portfolio-item-img .view-project{
   text-transform: capitalize;
   font-size: 16px;
   font-weight: 500;
   color: var(--skin-color);
   transition: all 0.3s ease;
   position: absolute;
   left:0;
   bottom:-4px;
   transform: translateY(-5px);
   z-index: -1;
   opacity:0;
}




.portfolio-section .portfolio-item-inner:hover .view-project{
   transform: translateY(0px);
   opacity:1;
}


.portfolio-section .portfolio-item-details{
   display: none;
}
.portfolio-section .portfolio-item-inner p{
   font-size: 16px;
   margin:10px 0 0;
   color: var(--text-black-600);
   text-transform: capitalize;
}

/*---------------
 portfolio popup
 -----------------*/
.portfolio-popup{
   background-color: var(--bg-black-50);
   position: fixed;
   left:0;
   top:0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   overflow-y: scroll;
   opacity:0;
   visibility: hidden;
   transition: all 0.3s ease;
}
.portfolio-popup.open{
   visibility: visible;
   opacity: 1;
}
.portfolio-popup .pp-loader video{
   position: fixed;
   left:0;
   top:0;
   height: 100%;
   width: 100%;
   z-index: 1005;
   background-color: var(--bg-opacity);
   display: flex;
   align-items: center;
   justify-content: center;
   visibility: hidden;
   opacity:0;
}
.portfolio-popup .pp-loader.active{
   visibility: visible;
   opacity:1;
}
.portfolio-popup .pp-loader div{
   height: 40px;
   width: 40px;
   border:3px solid var(--skin-color);
   border-radius: 50%;
   border-right: 3px solid transparent;
   animation: spin 2s linear infinite;
}
.portfolio-popup .pp-details{
   max-width: 1350px;
   width: calc(85% + 30px);
   margin:auto;
   max-height: 0;
   overflow: hidden;
   opacity:0;
   transition: all 0.5s ease;
}
.portfolio-popup .pp-details.active{
   opacity:1;
}
.portfolio-popup .pp-details-inner{
   padding:30px 0;
}
.portfolio-popup .pp-title{
   padding:0 15px;
}
.portfolio-popup .pp-title h2{
   font-size: 28px;
   color: var(--text-black-900);
   text-transform: capitalize;
   font-weight: 600;
   margin:0 0 5px;
}
.portfolio-popup .pp-title p{
   font-size: 14px;
   font-weight: 600;
   color: var(--text-black-600);
   margin:0 0 15px;
   border-bottom: 1px solid var(--bg-black-100);
   padding-bottom: 10px;
}
.portfolio-popup .pp-title p span{
   font-weight: 400;
   text-transform: capitalize;
}
.portfolio-popup .pp-project-details h3{
   font-size: 20px;
   font-weight: 600;
   color: var(--text-black-700);
   margin:0 0 15px;
   text-transform: capitalize;
}
.portfolio-popup .description{
   flex:0 0 65%;
   max-width: 65%;
   padding:0 15px;
}
.portfolio-popup .description p{
   font-size: 16px;
   color: var(--text-black-600);
   line-height: 26px;
   margin:0;
}
.portfolio-popup .info{
   flex:0 0 35%;
   max-width: 35%;
   padding:0 15px;
}
.portfolio-popup .info ul li{
   display: block;
   margin-bottom: 10px;
   font-weight: 600;
   color: var(--text-black-600);
   font-size: 16px;
}
.portfolio-popup .info ul li span{
   font-weight: 400;
}
.portfolio-popup .info ul li a{
   color: var(--skin-color);
}
.portfolio-popup .info ul li:last-child{
   margin-bottom:0;

}
.portfolio-popup .separator{
   height: 1px;
   width: 100%;
   display: block;
   background-color: var(--bg-black-100);
}
.portfolio-popup .pp-img{
   max-width:100%;
   width: auto;
   height: auto;
   padding: 10px;
   border-radius: 5px;
}
.portfolio-popup .pp-main{
   min-height: 100vh;
   max-width: 1350px;
   width: 85%;
   margin:auto;
   display: flex;
   align-items: center;
   justify-content: center;
}
.portfolio-popup .pp-main-inner{
   padding:70px 0 50px;
   position: relative;
}
.portfolio-popup .pp-project-details-btn{
   position: absolute;
   left:0;
   border-radius: 30px;
   font-size: 16px;
   font-weight: 500;
   color: var(--skin-color);
   top:15px;
   cursor: pointer;
   padding:0 15px;
   height: 40px;
   line-height: 40px;
   transition: all 0.3s ease;
}
.portfolio-popup .pp-project-details-btn i{
   margin-left: 4px;
}
.portfolio-popup .pp-project-details-btn:after{
   border-radius: 30px;
}
.portfolio-popup .pp-close{
   position: absolute;
   right:0;
   border-radius: 50%;
   height: 40px;
   width: 40px;
   top:15px;
   text-align: center;
   line-height: 35px;
   font-size: 35px;
   color: var(--text-black-600);
   cursor: pointer;
   transition: all 0.3s ease;
}
.portfolio-popup .pp-close:after{
   border-radius: 50%;
}
.portfolio-popup .pp-counter{
   position: absolute;
   right: 0;
   height: 40px;
   line-height: 40px;
   bottom: 5px;
   font-size: 16px;
   color: var(--text-black-600);
}
.portfolio-popup .pp-prev,
.portfolio-popup .pp-next{
   position: fixed;
   top:50%;
   height: 40px;
   width: 40px;
   text-align: center;
   font-size: 20px;
   cursor: pointer;
   z-index: 1010;
   color: var(--text-black-900);
   transition: all 0.3s ease;
   opacity:0.5;
}
.portfolio-popup .pp-prev:hover,
.portfolio-popup .pp-next:hover{
   opacity:1;
}
.portfolio-popup .pp-prev i,
.portfolio-popup .pp-next i{
   line-height: 40px;
}
.portfolio-popup .pp-prev i{
   transform: rotate(180deg);
}
.portfolio-popup .pp-prev{
   left:15px;
}
.portfolio-popup .pp-next{
   right:15px;
}


.portfolio-section .portfolio{

   position: relative;
      
      animation: animate 4s linear infinite;

}



@keyframes animate {

   0%,
   18%,
   20%,
   50.1%,
   60%,
   65.1%,
   80%,
   90.1%,
   92% {
      color: black;
      box-shadow: none;
   }

   18.1%,
   20.1%,
   30%,
   50%,
   60.1%,
   65%,
   80.1%,
   90%,
   92.1%,
   100% {
      color: #fff;
      text-shadow: 0 0 10px black;
       

   }
}

/*--------------- 
testimonial section 
------------------*/
.testimonial-section{
   padding: 80px 0 80px;
   min-height: 100vh;
}
.testimonial-section .testi-box{
   width:100%;
   max-width: 600px;
   margin:auto;
   padding:0 15px;
}
.testimonial-section .testi-slider{
   border-radius: 5px;
   overflow: hidden;
}
.testimonial-section .testi-slider-container{
   display: flex;
   transition: margin 1s ease;
   align-items: center;
}
.testimonial-section .testi-item{
   padding: 30px;
   text-align: center;
   position: relative;
}
.testimonial-section .testi-item i{
   position: absolute;
   font-size: 30px;
   color: var(--text-black-600);
   opacity:0.1;
}
.testimonial-section .testi-item i.left{
   left:5px;
   top:5px;
}
.testimonial-section .testi-item i.right{
   right:5px;
   bottom:5px;
}
.testimonial-section .testi-item p{
   font-size: 16px;
   line-height: 26px;
   color: var(--text-black-600);
   margin:0 0 30px;
}
.testimonial-section .testi-item img{
   max-width: 70px;
   display: inline-block;
   width:100%;
}
.testimonial-section .testi-item span{
   display: block;
   margin:10px 0 0;
   font-weight: 600;
   font-size: 16px;
   color: var(--text-black-700);
   text-transform: capitalize;
}
.testimonial-section .testi-slider-nav{
   margin-top:30px;
   text-align: center;
}

.testimonial-section .testi-slider-nav span{
   height: 40px;
   width: 40px;
   color: var(--skin-color);
   display: inline-block;
   font-size: 20px;
   cursor: pointer;
   transition: all 0.3s ease;
   border-radius: 50%;
   margin:0 4px;
}
.testimonial-section .testi-slider-nav span:after{
   border-radius: 50%;
}
.testimonial-section .testi-slider-nav span i{
   line-height: 40px;
}


/*-------------------
contact section
------------------*/
.contact-section{
   padding: 80px 0 80px;
   min-height: 100vh;
}

.contact-section .contact-item{
   flex:0 0 33.33%;
   max-width: 33.33%;
   padding:15px;
   display: flex;
   
}



.contact-section .contact-item-inner{
   padding: 30px 15px;
   text-align: center;
   border-radius: 5px;
   width: 100%;
   

}


.contact-section .contact-item-inner i{
   font-size: 25px;
   color: var(--skin-color);
   



}


.contact__button {
  
   font-size: var(--small-font-size);
   display: flex;
   margin-top: .5rem;;
   align-items: center;
   justify-content: center;
   column-gap: .125rem;
      color: var(--text-black-600);


}

.contact__button:hover .contact__button-icon {
   transform: translateX(.25rem);

}


.contact__button-icon {
   font-size: 1rem;
   transition: .5s;
     
}




.app {
    padding: 30px 15px;
   text-align: center;
   border-radius: 5px;
   width: 90%;
   text-align: center;
   align-items: center;
  

}

.app i {
   font-size: 25px;
   color: var(--skin-color);
   text-align: center;
   



}





.app i{
   text-shadow: 0 2px 10px green;
   animation: changesize 1s cubic-bezier(0, 0, 0, 0) 0.3s infinite;
   
}



@keyframes changesize {
   0% {
     transform: scale(1);
   }

   

   25% {
      transform: scale(1.2);
   }

 

   50% {
      transform: scale(0.8);
   }

 

   75% {
      transform: scale(1.1);
   }

 

   100% {
      transform: scale(1);
   }

  
}


.contact-section .app span {
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-black-700);
   margin: 15px 0 10px;
   text-transform: capitalize;
}

.contact-section .app p {
   font-size: 16px;
   color: var(--text-black-600);
   line-height: 26px;
   margin: 0;
   word-break: break-word;
}

.contact-section .contact-item-inner span{
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-black-700);
   margin:15px 0 10px;
   text-transform: capitalize;
}
.contact-section .contact-item-inner p{
   font-size: 16px;
   color: var(--text-black-600);
   line-height: 26px;
   margin:0;
   word-break: break-word;
}
.contact-section .contact-form{
   flex:0 0 100%;
   max-width: 100%;
   margin-top: 50px;
}
.contact-section .w-50{
   padding:0 15px;
   flex:0 0 50%;
   max-width: 50%;
}
.contact-section .input-group{
   margin:0 0 25px;
   transition: all 0.3s ease;
   border-radius: 30px;
}
.contact-section .input-group:after{
   border-radius: 30px;
}
.contact-section .input-group .input-control{
   height: 45px;
   display: block;
   width: 100%;
   border-radius: 30px;
   border:none;
   background-color: transparent;
   font-size: 16px;
   padding:0 15px;
   color: var(--text-black-700);
}
.contact-section .input-group textarea.input-control{
   height: 184px;
   padding-top: 15px;
   resize: none;
}
.contact-section .submit-btn{
   flex:0 0 100%;
   max-width: 100%;
   text-align: right;
   padding:0 15px;
}


.contact_message{
  
   font-size: 16px;
      font-weight: 500;
      color: var(--skin-color);
      background-color: transparent;
  margin-left: 30px;
line-height: 1.5;

margin-top: 2px;
padding-bottom: 15px;

}



 .clockWise {
   display: inline;
   text-indent: 8px;
}

 .clockWise span {
   animation: clock 12.5s linear infinite 0s;
   -ms-animation: clock 12.5s linear infinite 0s;
   -webkit-animation: clock 2.5s linear infinite 5s;
   color: var(--text-black-900);
   
 }

.clockWise span:nth-child(2) {
   animation-delay: 2.5s;
   -ms-animation-delay: 2.5s;
   -webkit-animation-delay: 2.5s;
}

 .clockWise span:nth-child(3) {
   animation-delay: 5s;
   -ms-animation-delay: 5s;
   -webkit-animation-delay: 5s;
}

.clockWise span:nth-child(4) {
   animation-delay: 7.5s;
   -ms-animation-delay: 7.5s;
   -webkit-animation-delay: 7.5s;
}

 .clockWise span:nth-child(5) {
   animation-delay: 10s;
   -ms-animation-delay: 10s;
   -webkit-animation-delay: 10s;
}

/*ClockWise Effect Animation*/
@-moz-keyframes clock {
   0% {
      opacity: 0;
   }

   5% {
      opacity: 0;
      -moz-transform: rotate(-180deg);
   }

   10% {
      opacity: 1;
      -moz-transform: translateX(0px);
   }

   25% {
      opacity: 1;
      -moz-transform: translateX(0px);
   }

   30% {
      opacity: 0;
      -moz-transform: translateX(0px);
   }

   80% {
      opacity: 0;
   }

   100% {
      opacity: 0;
   }
}

@-webkit-keyframes clock {
   0% {
      opacity: 0;
   }

   5% {
      opacity: 0;
      -webkit-transform: rotate(-180deg);
   }

   10% {
      opacity: 1;
      -webkit-transform: translateX(0px);
   }

   25% {
      opacity: 1;
      -webkit-transform: translateX(0px);
   }

   30% {
      opacity: 0;
      -webkit-transform: translateX(0px);
   }

   80% {
      opacity: 0;
   }

   100% {
      opacity: 0;
   }
}

@-ms-keyframes clock {
   0% {
      opacity: 0;
   }

   5% {
      opacity: 0;
      -ms-transform: rotate(-180deg);
   }

   10% {
      opacity: 1;
      -ms-transform: translateX(0px);
   }

   25% {
      opacity: 1;
      -ms-transform: translateX(0px);
   }

   30% {
      opacity: 0;
      -ms-transform: translateX(0px);
   }

   80% {
      opacity: 0;
   }

   100% {
      opacity: 0;
   }
}




/*Vertical Sliding*/
.slidingVertical {
   display: inline;
   font-size:16px;
      font-weight: 500;
    
      
     

}

.slidingVertical span {

   animation: topToBottom 1.5s linear infinite 0s;
   -ms-animation: topToBottom 12.5s linear infinite 0s;
   -webkit-animation: topToBottom 12.5s linear infinite 0s;
   color: var(--text-black-900);
   opacity: 0;
   overflow: hidden;
  /* position:absolute; */
   padding-top: 1px;
}

 .slidingVertical span:nth-child(2) {
   animation-delay: 1.5s;
   -ms-animation-delay: 2.5s;
   -webkit-animation-delay: 2.5s;
}

.slidingVertical span:nth-child(3) {
   animation-delay: 5s;
   -ms-animation-delay: 5s;
   -webkit-animation-delay: 5s;
}

.slidingVertical span:nth-child(4) {
   animation-delay: 7.5s;
   -ms-animation-delay: 7.5s;
   -webkit-animation-delay: 7.5s;
}

 .slidingVertical span:nth-child(5) {
   animation-delay: 10s;
   -ms-animation-delay: 10s;
   -webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom {
   0% {
      opacity: 0;
   }

   5% {
      opacity: 0;
      -moz-transform: translateY(-50px);
   }

   10% {
      opacity: 1;
      -moz-transform: translateY(0px);
   }

   25% {
      opacity: 1;
      -moz-transform: translateY(0px);
   }

   30% {
      opacity: 0;
      -moz-transform: translateY(50px);
   }

   80% {
      opacity: 0;
   }

   100% {
      opacity: 0;
   }
}

@-webkit-keyframes topToBottom {
   0% {
      opacity: 0;
   }

   5% {
      opacity: 0;
      -webkit-transform: translateY(-50px);
   }

   10% {
      opacity: 1;
      -webkit-transform: translateY(0px);
   }

   25% {
      opacity: 1;
      -webkit-transform: translateY(0px);
   }

   30% {
      opacity: 0;
      -webkit-transform: translateY(50px);
   }

   80% {
      opacity: 0;
   }

   100% {
      opacity: 0;
   }
}

@-ms-keyframes topToBottom {
   0% {
      opacity: 0;
   }

   5% {
      opacity: 0;
      -ms-transform: translateY(-50px);
   }

   10% {
      opacity: 1;
      -ms-transform: translateY(0px);
   }

   25% {
      opacity: 1;
      -ms-transform: translateY(0px);
   }

   30% {
      opacity: 0;
      -ms-transform: translateY(50px);
   }

   80% {
      opacity: 0;
   }

   100% {
      opacity: 0;
   }
}



/*pencil animation */

.pencil {
   font-size: 25px;
   color: var(--text-black-900);
   margin-bottom: 20px;
}

h1 {
   font-size: 16px;
}

/**** this is the Pencil Erasing animation****/
.erasing-animation {
   animation-name: erasing;
   animation-duration: 1.8s;
}

@keyframes erasing {
   0% {
      transform: rotate(0deg);
   }

   10% {
      transform: rotate(180deg);
   }

   20% {
      transform: rotate(0deg);
   }

   30% {
      transform: rotate(180deg);
   }

   40% {
      transform: rotate(0deg);
   }

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

   60% {
      transform: rotate(0deg);

   }

   70% {
      transform: rotate(180deg);
   }

   80% {
      transform: rotate(0deg);
   }

   90% {
      transform: rotate(180deg);
   }



   100% {
      transform: rotate(0deg);
   }
}

/***this is the pencil writing animation*****/
.writing-animation {
   animation-name: writing;
   animation-duration: 8s;
}

@keyframes writing {
   0% {
      transform: translate(0px, 0px)
   }

   2% {
      transform: translate(5px, -5px);
   }

   4% {
      transform: translate(0px, 0px);
   }

   6% {
      transform: translate(5px, -5px);
   }

   8% {
      transform: translate(0px, 0px);
   }

   10% {
      transform: translate(5px, -5px);
   }

   12% {
      transform: translate(0px, 0px);
   }

   14% {
      transform: translate(5px, -5px);
   }

   16% {
      transform: translate(0px, 0px);
   }

   18% {
      transform: translate(5px, -5px);
   }

   20% {
      transform: translate(0px, 0px);
   }

   22% {
      transform: translate(5px, -5px);
   }

   24% {
      transform: translate(0px, 0px);
   }

   26% {
      transform: translate(5px, -5px);
   }

   28% {
      transform: translate(0px, 0px);
   }

   30% {
      transform: translate(5px, -5px);
   }

   32% {
      transform: translate(0px, 0px);
   }

   34% {
      transform: translate(5px, -5px);
   }

   36% {
      transform: translate(0px, 0px);
   }

   38% {
      transform: translate(5px, -5px);
   }

   40% {
      transform: translate(0px, 0px);
   }

   42% {
      transform: translate(5px, -5px);
   }

   44% {
      transform: translate(0px, 0px);
   }

   46% {
      transform: translate(5px, -5px);
   }

   48% {
      transform: translate(0px, 0px);
   }

   50% {
      transform: translate(5px, -5px);
   }

   52% {
      transform: translate(0px, 0px);
   }

   54% {
      transform: translate(5px, -5px);
   }

   56% {
      transform: translate(0px, 0px);
   }

   58% {
      transform: translate(5px, -5px);
   }

   60% {
      transform: translate(0px, 0px);
   }

   62% {
      transform: translate(5px, -5px);
   }

   64% {
      transform: translate(0px, 0px);
   }

   66% {
      transform: translate(5px, -5px);
   }

   68% {
      transform: translate(0px, 0px);
   }

   70% {
      transform: translate(5px, -5px);
   }

   72% {
      transform: translate(0px, 0px);
   }

   74% {
      transform: translate(5px, -5px);
   }

   76% {
      transform: translate(0px, 0px);
   }

   78% {
      transform: translate(5px, -5px);
   }

   80% {
      transform: translate(0px, 0px);
   }

   82% {
      transform: translate(5px, -5px);
   }

   84% {
      transform: translate(0px, 0px);
   }

   86% {
      transform: translate(5px, -5px);
   }

   88% {
      transform: translate(0px, 0px);
   }

   90% {
      transform: translate(5px, -5px);
   }

   92% {
      transform: translate(0px, 0px);
   }

   94% {
      transform: translate(5px, -5px);
   }

   96% {
      transform: translate(0px, 0px);
   }

   98% {
      transform: translate(5px, -5px);
   }

   100% {
      transform: translate(0px, 0px);
   }


}







      /* Music */
   
      #sound {
         padding: 7px;
   
         border-radius: 5px;
         display: flex;
         align-items: center;
         padding-top: 20px;
   
   
   
      }
   
      .sound-cloud {
         font-size: 1.2rem;
         margin: 7px;
         color: black;
      }
   
      .on-off {
         cursor: pointer;
         margin-left: 5px;
      }
   
      #off {
         color: black;
         cursor: pointer;
      }
   
      #on {
         display: none;
         color: black;
         cursor: pointer;
      }
   
      .btns-container .fas {
         font-size: 2rem;
         padding: 10px;
   
         color: #fff;
         cursor: pointer;
      }
   
      .btns-container .fas:nth-child(2) {
         display: none;
      }



            .contact__button-icon {
               font-size: 1rem;
               transition: .5s;
            }
      .contact__button-icon:hover {
               transform: translateX(.25rem);
      
            }




   /****/
      .social-links {
         margin-top: 40px;
         text-align: center;
      }
   
     .social-links a {
         display: inline-block;
         height: 40px;
         width: 40px;
         font-size: 16px;
         text-align: center;
         color: var(--text-black-600);
         margin: 0 4px;
         border-radius: 50%;
         transition: all 0.3s ease;
      }
   
    .social-links a i {
         line-height: 40px;
      }
   
      .social-links a:after {
         border-radius: 50%;
      }
   
 .social-links a:hover {
         color: var(--skin-color);
      }


      
                        .social-links .classtwo:hover{
              color: #4267B2;
            }
      
                        .social-links .classtwo:hover {
               color: #1DA1F2;
            }
      
                    .social-links .classthree:hover {
               color: #E1306C;
            }
      
                        .social-links .classone:hover {
               color: #333;
            }
      
                    .social-links .classfour:hover {
               color: #ff0000;
            }




/**/
.copyright-text{
   margin-top: 2rem;
   text-align: center;
      top: 50%;
         font-size: 15px;
         color: var(--text-black-600);
}












   .skills__container{
    grid-template-columns:360px 320px;
    column-gap: 3rem;
    justify-content: center;

}


.container{
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    
   
}

.grid{
    display: grid;
}
.skills__header{
    display: flex;
    align-items: center;
    cursor: pointer;

}


.skills__header:not(:last-child){
    margin-bottom: 2.5rem;

}


.skills__icon,
.skills__arrow{
    font-size: 2rem;
    color: var(--text-black-900)

}


.skills__data{
   padding-top: 15px;
   text-align: center;
   justify-content: center;
   
}


.skills__icon{
    margin-right: .75rem;
    margin-left: .75rem;
   font-size: 1.2rem;


}


.skills__title{
    font-size: 1.25rem;
    font-weight: 500;

  

}








.skills__arrow{
    margin-left: auto;
}


.skills__active .skills__arrow {
    transform: rotate(-90deg);
    transition: .5s;
}

.skills [data-content]{
    display: none;
   
}


.skills__active[data-content] {
    display: block;

}

.skills__list{
    row-gap: 1.8rem;
   align-items: center;
 
   font-size: 1.1rem;
}


.skills__titles{
    display: flex;
    
   
    justify-content: center;
   margin-bottom: .5rem;
         color: var(--text-black-900)
}


.skills__name {
    font-size: .875rem;
    font-weight: 500;
    align-items: center;
}



  .skills__container{
        grid-template-columns: 340px 300px;


    }
 


      .uil-check-circle{
       margin-right: .5rem;
       color: var(--text-black-900)
      }



       /*========== BREAKPOINTS ==========*/
       /* For Large Devices */
       @media screen and (max-width: 1408px) {
          .container {
             margin-left: 2.5rem;
             margin-right: 2.5rem;
          }
       }
   
       @media screen and (max-width: 1216px) {
          .about__container {
             column-gap: 2.5rem;
   
          }
   
          .about__description {
             padding-right: 0;
   
          }
       }
   
       @media screen and (max-width: 1024px) {
          .container {
             margin-left: 1.5rem;
             margin-right: 1.5rem;
          }
   
   
   
          .skills__container {
             grid-template-columns: 340px 300px;
   
   
          }
   
          .skills__list {
             row-gap: 1.7rem;
          }
   
       }
   
        /* For Medium Devices */
       @media screen and (max-width: 768px) {
   
   
          .skills__container {
             grid-template-columns: 300px;
             row-gap: 3rem;
   
          }
         .portfolio-popup .pp-main-inner {
        padding-left: 30px;
   
       }

             .portfolio-popup .pp-project-details-btn {
               
                left: 30px;
             
             }
   
   
          /* For Small Devices */
          @media screen and (max-width: 350px) {
             .container {
                margin-left: 1rem;
                margin-right: 1rem;
             }
   
   
             .skills__container {
                grid-template-columns: 1fr;
             }
   
             .skills__title {
                font-size: 1rem;
             }
   
             
          }
       }


/*skills rotate text */

#tag{
   text-align: center;
}





.center {
   top: 55%;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 200;
  
   width: 100%;
}


.heading {
   color: #eee;
   font-size: 5rem;
   font-weight: 300;
   text-transform: uppercase;
}


      .section-title .box {
         position: relative;
          
            display: flex;
            justify-content: center;
            align-items: center;
      }
   
   
      .section-title .box h2 {
        
         color: #fff;
        
         
         letter-spacing: 0.1rem;
      }
   
      .section-title .box .lightbar {
         position: absolute;
         top: 0;
         left:30%;
         width: 10px;
         height: 100%;
         border-radius: 10px;
         background: #fff;
         z-index: 2;
         animation: animatelightbar 5s linear infinite;
   
      }



      @keyframes animatelightbar{
         0%,5%{
            transform: scaleY(0) translateX(0);
         }
         10%{
            transform: scaleY(1) translateX(0);
         }
         90%{
            transform: scaleY(1) translateX(calc(600px - 10px));
         }
      }


        :root {
               --color-background: #eff0f4;
               --color-text: black;
               --color-chill: #ecf232;
               --marquee-font-size: min(max(12px, 2vw), 22px);
               --headline-font-size: min(max(40px, 6vw), 70px);
               --paragraph-font-size: min(max(16px, 4vw), 22px);
               --section-heading-font-size: min(max(30px, 4vw), 50px);
               --duration: 300ms;
               --ease: cubic-bezier(0.33, 1, 0.68, 1);
            }
      
            * {
               box-sizing: border-box;
            }
      
            body {
               background-color: var(--color-background);
               font-family: "Inter", sans-serif;
               color: var(--color-text);
               width: 100%;
               transition: background-color var(--duration) var(--ease);
            }
      
            .page-content {
               max-width: 90ch;
               padding: 4rem;
               margin: 8rem auto;
            }
      
            .page-content *+* {
               margin-top: 2.5rem;
            }
      
            .page-content a {
               color: var(--color-chill);
            }
      
            .page-content h1 {
               font-size: var(--headline-font-size);
               font-weight: 700;
               line-height: 1.2;
            }
      
            .page-content h2 {
               margin-top: 6rem;
               font-size: var(--section-heading-font-size);
               font-weight: 700;
               line-height: 1.2;
            }
      
            .page-content em {
               font-style: italic;
            }
      
            .page-content p {
               font-size: var(--paragraph-font-size);
               line-height: 1.75;
               letter-spacing: 0.0125rem;
            }
      
            .page-content__section {
               transition: opacity var(--duration) var(--ease);
            }
      
            .page-content__section h2 {
               transform-origin: 50% 100%;
            }
      
            .page-content__section.active {
               opacity: 1;
            }
      
            .page-content__section.active h2 {
               -webkit-animation: activate calc(var(--duration) * 2) var(--ease) forwards;
               animation: activate calc(var(--duration) * 2) var(--ease) forwards;
            }
      
            @-webkit-keyframes activate {
               25% {
                  color: var(--color-chill);
                  transform: translateY(-12px);
               }
      
               40% {
                  transform: translateY(2px);
               }
      
               50% {
                  transform: translateY(-4px);
               }
      
               60% {
                  color: var(--color-text);
                  transform: translateY(1px);
               }
      
               65%,
               100% {
                  opacity: 1;
                  transform: translateY(0);
               }
            }
      
            @keyframes activate {
               25% {
                  color: var(--color-chill);
                  transform: translateY(-12px);
               }
      
               40% {
                  transform: translateY(2px);
               }
      
               50% {
                  transform: translateY(-4px);
               }
      
               60% {
                  color: var(--color-text);
                  transform: translateY(1px);
               }
      
               65%,
               100% {
                  opacity: 1;
                  transform: translateY(0);
               }
            }
      
            @media (prefers-reduced-motion: reduce) {
               .page-content__section.active h2 {
                  -webkit-animation: none;
                  animation: none;
               }
            }
      
            .marquee-container {
               position: fixed;
               pointer-events: none;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               overflow: hidden;
               font-weight: 700;
               font-family: "Karla", sans-serif;
               text-transform: uppercase;
               z-index: 1;
            }
      
            .marquee {
               position: absolute;
               font-size: var(--marquee-font-size);
               line-height: 1;
               white-space: nowrap;
               letter-spacing: 0.25rem;
               overflow: hidden;
               padding: 2vmin 0;
               min-width: 100%;
               -webkit-user-select: none;
               -moz-user-select: none;
               -ms-user-select: none;
               user-select: none;
               background-color: var(--color-background);
               box-shadow: var(--color-background) 0 2vmin 2vmin 1vmin;
               transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
            }
      
            .marquee--top {
               top: -1px;
            }
      
            .marquee--left {
               left: -1px;
               bottom: -6vmin;
               transform: rotate(-0.25turn);
               transform-origin: 0 0;
            }
      
            .marquee--right {
               left: calc(100% + 1px);
               top: 0;
               transform: rotate(0.25turn);
               transform-origin: 0 0;
            }
      
            .marquee--bottom {
               bottom: -1px;
               right: 0;
               transform: rotate(0.5turn);
            }
      
            .marquee div {
               opacity: 1;
               transition: opacity var(--duration) var(--ease);
            }
      
            .marquee div.active {
               opacity: 0;
            }
      



            
            .container1{
        position: relative;
        min-height: 100vh;
       

    }

    .container1 .video-container{
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        padding: 10px;
    }


    .container1 .video-container .video{
        height: 250px;
        width: 350px;
        border: 5px solid #fff;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0,0,0,.7);
        cursor: pointer;
        overflow: hidden;
    }


    
     .container1 .video-container .video video{
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: .2s linear;
        
    }

       .container1 .video-container .video:hover video{
      transform: scale(1.1);
        
    }

    .container1 .popup-video{
        position: fixed;
        top: 0; left: 0;
        z-index: 100;
        background: rgba(0,0,0,.8);
        height: 100%;
        width: 100%;
        display: none;
    }

    .container1 .popup-video video{
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 750px;
        border-radius: 5px;
        border: 3px solid #fff;
        object-fit: cover;
    }

    .container1 .popup-video span{
        position: absolute;
        top: 5px; right: 20px;
        font-size: 50px;
        color: #fff;
        font-weight: bolder;
        z-index: inherit;
        cursor: pointer;
    }

    @media(max-width:768px){

.container1 .popup-video video{
    width: 95%;
}
    }