@media(min-width:768px){.elementor-305 .elementor-element.elementor-element-bee91eb{width:5%;}.elementor-305 .elementor-element.elementor-element-a68059b{width:74.333%;}.elementor-305 .elementor-element.elementor-element-348d384{width:20%;}}/* Start custom CSS for html, class: .elementor-element-7a180c6 */*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Montserrat',sans-serif;
}

body{
  background:radial-gradient(circle at top,#1d1d1d,#050505);
  color:#fff;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* MAIN CONTAINER */
.resume{
  position:relative;
  width:1100px;
  height:650px;
  isolation:isolate; /* layering fix */
}

/* CENTER PROFILE */
.center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:300px;
  text-align:center;
  z-index:5; /* profile always on top */
}

.avatar-wrap{
  position:relative;
  width:130px;
  height:130px;
  margin:auto;
}

.avatar-wrap img{
  width:100%;
  height:100%;
  border-radius:50%;
  position:relative;
  z-index:2;
}

/* ROTATING BORDER (ONLY BORDER ROTATES) */
.rotating-border{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(#fbbf24,transparent 40%);
  animation:spin 6s linear infinite;
  filter:blur(.4px);
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.center h2{
  margin:14px 0;
  font-size:18px;
}

.center p{
  font-size:13px;
  opacity:.8;
}

/* INFO BOXES */
.box{
  position:absolute;
  width:240px;
  background:rgba(255,255,255,.04);
  padding:18px;
  border-radius:14px;
  backdrop-filter:blur(8px);
  transition:.4s ease;
}

.box:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 0 25px rgba(251,191,36,.35);
}

.box h3{
  color:#fbbf24;
  font-size:14px;
  margin-bottom:8px;
}

.box p{
  font-size:12px;
  opacity:.85;
}

/* POSITIONS */
.left.top{top:40px;left:0;}
.left.middle{top:230px;left:0;}
.left.bottom{bottom:40px;left:0;}

.right.top{top:40px;right:0;}
.right.middle{top:230px;right:0;}
.right.bottom{bottom:40px;right:0;}

/* ICONS */
.icons i{
  font-size:20px;
  margin-right:12px;
  transition:.3s;
}

.icons i:hover{
  color:#fbbf24;
  transform:scale(1.2);
}

/* SKILLS */
.skills span{
  background:#fbbf24;
  color:#000;
  padding:6px 10px;
  border-radius:50%;
  margin:4px;
  font-size:12px;
  display:inline-block;
  transition:.3s;
}

.skills span:hover{
  transform:scale(1.15);
}

/* LINES */
.line{
  position:absolute;
  height:2px;
  background:#fbbf24;
  box-shadow:0 0 12px #fbbf24;
  animation:draw 1.5s ease forwards;
  transform-origin:left;
  z-index:1; /* default behind profile */
  opacity:.7;
}

@keyframes draw{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* LINE POSITIONS */
.l1{width:230px;top:95px;left:240px;}
.l2{width:230px;top:300px;left:240px;}
.l3{width:230px;bottom:95px;left:240px;}

.r1{width:230px;top:95px;right:240px;transform-origin:right;}
.r2{width:230px;top:300px;right:240px;transform-origin:right;}
.r3{width:230px;bottom:95px;right:240px;transform-origin:right;}

/* TOUCHING LINES ABOVE PROFILE */
.l1,
.r1{
  z-index:6;
}/* End custom CSS */