.light-theme{
  --sword: url("/assets/images/sword_silver.svg");
  --boxShadowSword:0 0 150px 125px hsla(229, 76%, 66%, .4);
}
.dark-theme{
  --sword: url("/assets/images/sword_pink.svg");
  --boxShadowSword:0 0 150px 125px rgba(255, 0, 212, 0.5);
}





.right img{
  width:350px;
border-radius: 0 0 280px 230px;
transition: .4s;
z-index: 5;
position: relative;
}

@media(width>50px){
  .heroContainer{pointer-events:none;}
  .btn-group{pointer-events: all;}
  .sword{display:none}
  .boxItems{display:none;}
  .h1Hero{height: 300px;}
  .shape-1{display:none}
  .heroContainer{
    display:block; /*comment */
  }
  .heroContainer .left{
    padding:0px 20px;
  }
}
@media(max-width:400px){
  .boxItems{display:flex;}
  .heroContainer .left{
    padding:0px 40px;
  }
}
@media(width>500px){
  .wraperh1Hero{
    height:300px;
  }


  .img-box{pointer-events:all;}
  .heroContainer{
    display:flex;
    /* border:2px solid red; */
    margin:50px 0px;
  }
  .heroContainer .left{
    /* border:2px solid green; */
    margin:0px 0px 0px 10px;
    width:60%;
  }
  .heroContainer .right{
    /* border:2px solid blue; */
    margin:0px 30px 0px 0px;
    padding:0px 10px 0px 0px;
    width:40%;
  } 
  .right img{
    width:130px;
  }
}
@media(width>1000px){
  .sword{display:block}
  .shape-1{display:block}
  .heroContainer .left{
    margin:0px 0px 0px 310px;
    width:60%;
    padding:35px 0px;
  }
  .heroContainer .right{
    margin:0px 30px 0px 0px;
    padding:0px 10px 0px 0px ;
    width:80%;
  } 
  .right img{
    width:330px;
    position:relative;
    right:-200px;
  }
}

@media(width>1560px){
  .wraperh1Hero{
    height:150px;
  }
}








/* BUTTONS */
.btn {
  min-width: 10rem;
  border-radius: 100px;
  cursor:url('/assets/images/hands11.cur'),auto;
  margin-right: 10px;
 
}
.btn-group{
  margin:20px 0px;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  padding: .8rem 1.5rem;
}

.btn-primary:hover {
  background: var(--foreground-secondary);
  color: var(--action-primary);
}

.btn-secondary {
  background: var(--action-secondary);
  color: var(--foreground-secondary);
  padding: 0.68rem 1.7rem;
  border: 2px solid var(--foreground-tertiary);
}

.btn-secondary:hover { border-color: var(--accent); }
/* -------------------BUTTONS END--------------- */

/* Hero Image Right Hoover effect */
.heroImageAction{
  transform: translate(-190px,15%);
  width:220px !important;
  z-index: 5;
  
}
/* project button hero */
.hero-project {
  position: absolute;
  left: 70%;
  top: 0%;
  color: white;
  /* background-color: red; */
  opacity: 0%;
  font-size: 0rem;
  cursor: url('/assets/images/hands11.cur'), auto;
  z-index: 5;
  transition: 1.4s;
  transition-timing-function: ease;
}
.hero-project:hover{  
  box-shadow: 10px 10px rgb(217, 217, 217);
}
.hero-project a{cursor: url('/assets/images/hands11.cur'), auto;}
.hero-project a:hover{color:gold;}

.hero-ProjectAction{
  /* This is being controlled by the script button right */
padding:0px 35px;
top:35%;
left:59%;
opacity: 100%;
height: 53px;
font-size: 2.4rem;
background-color: hsl(218, 23%, 23%); /*bakground secondary */
text-align: center;
border-radius: 20px;
rotate: 735deg;
z-index: 30;
}
/* TOOLTIP FOR PROJECTS - TEMPORARY ELEMENT */
.hero-project::after{
  /* content: "Link to latest project - projects page under construction.."; */
  font-size: 0rem;
  position: absolute;
  top:50%;
  left:50%;
  visibility: hidden;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 0;
  transition:1s;
}
.hero-project:hover::after{
  visibility: visible;
  font-size:1rem;
  top:45%;
  left:10%;
  z-index: 2;

}
/* ------------HERO Image right hoover effect END------------------ */
.hero .shape-1 {
  position: absolute;
  border-radius: 50%;
  transform: translate(40%, -90%) rotate(-20deg);
  background: var(--accent2);
  width:  300px;
  height: 300px;
  z-index: 1;
  transition: .7s;
}
.shape1Action {
  width:  40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  transform: translate(570%, -140%) rotate(-66deg) !important;
  /* border: 10px solid rebeccapurple; */
 background:transparent !important;
}

.hero .pattern-bg {
  position: absolute;
  top: 18%;
  right:22%;
  width: 30%;
  height:200px;
  /* background: url(/assets/images/pattern.png); */
  background-size: contain;
  opacity: 0.2;
  z-index:1
}

 /* SWORD ANIMATES SVG START */ 
.sword{
  position:fixed;
  width: 55%;
  height: 57%;
  background: var(--sword);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 20;
  pointer-events: none;
  transform: translate(-136%, 160%) rotate(-270deg);
  transition: .6s;
  top:0%;

}
.swordAction{
  position:absolute;
  transform: translate(-26%, -15%) rotate(300deg);
}
.shape-18Action {
  /* Glow behind */
  position: absolute;
  top:  33%;
  left: 65%;
  border-radius: 50%;
  transform: translate(-50%, -42%) rotate(-20deg);
  width:  0;
  height: 0;
  opacity: 100%;
  z-index: 1;
  box-shadow: var(--boxShadowSword);
  pointer-events: none;

  /* transition:2s; */
}
 /*  ------- SWORD ANIMATES SVG END --------- */ 
 .cvIcon {
  opacity: 0%;
  font-size: 0rem;
  color: var(--background-primary);
  position: absolute;
  left: 62%;
  top: -30%;
  z-index: 1;
  transition: 2.5s;
}
.cvIconAction {
  /* font-size: 5.0rem ; */
  color: var(--goldColor);
  opacity: 100%;
  left: 62%;
  top:12%;
  z-index: 7;
}
.cvIcon:hover { 
  font-size: 9.0rem ;
  color:rgb(255, 132, 0);
  z-index:4;
}
.gearIcon1 {
  opacity: 0%;
  color: var(--background-primary);
  font-size: 7rem ;
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 2;
  transition: 1.3s;
}
.gearIcon2 {
  opacity: 0%;
  color: var(--background-primary);
  font-size: 9rem;
  position: absolute;
  left: 75%;
  top: 30%;
  z-index: 1;
  transition: 1.3s;
}
.gearIcon1Action {
  color: var(--foreground-primary);
  opacity: 100%;
  left: 65%;
  top: 29%;
}
.gearIcon2Action {
  color: var(--foreground-primary);
  opacity: 100%;
  left: 60%;
  top: 25%;
  z-index: 2;
}