*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Inter',sans-serif;

  background:
  radial-gradient(
    circle at top right,
    rgba(61,220,132,0.12),
    transparent 25%
  ),
  #050816;

  color:white;

  overflow-x:hidden;
}

.container{
  width:90%;
  max-width:1280px;
  margin:auto;
}

/* NAVBAR */

.navbar{

  width:100%;

  border-bottom:
  1px solid rgba(255,255,255,0.05);

  background:#050816;

  position:sticky;
  top:0;
  z-index:1000;

  backdrop-filter:blur(12px);
}

.nav-content{

  height:85px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo-box{

  display:flex;
  align-items:center;
  gap:14px;
}

.logo-text{

  font-size:42px;
  font-weight:900;
  color:white;
}

.logo-text .green{
  color:var(--primary);
}

.logo-box h2{

  font-size:28px;
  font-weight:700;
}

.nav-links{

  display:flex;
  gap:40px;
}

.nav-links a{

  color:white;
  text-decoration:none;

  font-size:17px;

  position:relative;

  transition:0.3s;
}

.nav-links a:hover,
.nav-links .active{

  color:var(--primary);
}

.nav-links .active::after{

  content:'';

  position:absolute;

  width:100%;
  height:2px;

  left:0;
  bottom:-30px;

  background:var(--primary);
}

/* HERO */

.hero{
  padding:100px 0;
}

.hero-grid{

  display:grid;
  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:60px;
}

.small-title{

  color:var(--primary);

  letter-spacing:4px;

  font-size:18px;
}

.hero-left h1{

  font-size:72px;

  line-height:1.15;

  margin-top:20px;

  font-weight:900;
}

.hero-left h1 span{
  color:var(--primary);
}

.line{

  width:70px;
  height:3px;

  background:var(--primary);

  margin:35px 0;
}

.hero-left p{

  color:var(--gray);

  font-size:24px;

  line-height:1.7;
}

.hero-btn{

  margin-top:45px;

  display:inline-flex;
  align-items:center;
  gap:14px;

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

  padding:20px 34px;

  border-radius:14px;

  color:var(--primary);

  text-decoration:none;

  font-size:21px;
  font-weight:600;

  transition:0.3s;
}

.hero-btn:hover{

  background:var(--primary);

  color:black;

  transform:translateY(-5px);

  box-shadow:var(--shadow);
}

/* RIGHT */

.hero-right{

  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.hero-circle{

  position:absolute;

  width:520px;
  height:520px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(61,220,132,0.25),
    transparent 65%
  );

  filter:blur(10px);
}

.big-logo{

  font-size:260px;

  font-weight:900;

  line-height:1;

  z-index:2;

  text-shadow:
  0 0 35px rgba(61,220,132,0.25);

  animation:floatY 5s ease-in-out infinite;
}

.big-logo .green{
  color:var(--primary);
}

.hero-right h3{

  margin-top:10px;

  letter-spacing:7px;

  font-weight:400;
}

/* SECTION */

.section{
  padding:40px 0 90px;
}

.section-title{

  display:flex;
  align-items:center;
  justify-content:center;

  gap:25px;

  margin-bottom:50px;
}

.section-title h2{

  font-size:24px;

  letter-spacing:3px;

  font-weight:500;
}

.section-line{

  width:220px;
  height:1px;

  background:
  rgba(255,255,255,0.1);
}

/* GRID */

.cards-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;
}

/* CARD */

.card{

  background:
  rgba(12,18,36,0.95);

  border:
  1px solid rgba(255,255,255,0.06);

  border-radius:24px;

  padding:35px;

  transition:0.4s;

  position:relative;

  overflow:hidden;
}

.card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(61,220,132,0.4);

  box-shadow:var(--shadow);
}

.card::after{

  content:'';

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(61,220,132,0.05),
    transparent
  );

  transform:translateX(-100%);

  transition:0.8s;
}

.card:hover::after{
  transform:translateX(100%);
}

.card-top{

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:28px;
}

.icon-circle{

  width:80px;
  height:80px;

  border-radius:50%;

  border:
  1px solid rgba(61,220,132,0.25);

  background:
  rgba(61,220,132,0.05);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--primary);

  font-size:38px;
}

.card-arrow{

  color:var(--primary);

  font-size:30px;
}

.card h3{

  font-size:34px;

  margin-bottom:12px;
}

.card-category{

  color:var(--primary);

  font-size:21px;
}

.card p{

  margin-top:22px;

  color:var(--gray);

  line-height:1.8;

  font-size:20px;
}

.tags{

  margin-top:28px;

  display:flex;
  flex-wrap:wrap;

  gap:12px;
}

.tags span{

  padding:10px 18px;

  border:
  1px solid rgba(255,255,255,0.08);

  border-radius:10px;

  color:#cfcfcf;

  font-size:16px;
}

.skill-card h3{
  margin-top:25px;
}

/* CONTACT */

.contact-section{
  padding:80px 0 120px;
}

.contact-box{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:40px;

  background:
  linear-gradient(
    145deg,
    rgba(12,18,36,0.95),
    rgba(7,10,20,0.95)
  );

  border:
  1px solid rgba(255,255,255,0.06);

  border-radius:30px;

  padding:50px;

  position:relative;

  overflow:hidden;
}

.contact-box::before{

  content:'';

  position:absolute;

  width:400px;
  height:400px;

  background:
  radial-gradient(
    circle,
    rgba(61,220,132,0.18),
    transparent 70%
  );

  top:-150px;
  right:-120px;
}

.contact-left{

  position:relative;
  z-index:2;
}

.contact-left h3{

  font-size:42px;

  line-height:1.3;

  margin-bottom:25px;
}

.contact-left p{

  color:var(--gray);

  font-size:20px;

  line-height:1.8;

  margin-bottom:40px;
}

.contact-info{

  display:flex;
  flex-direction:column;

  gap:22px;
}

.info-item{

  display:flex;
  align-items:center;

  gap:16px;

  color:#d8d8d8;

  font-size:18px;
}

.info-item i{

  width:55px;
  height:55px;

  border-radius:50%;

  background:
  rgba(61,220,132,0.08);

  border:
  1px solid rgba(61,220,132,0.18);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--primary);

  font-size:22px;
}

/* FORM */

.contact-form{

  display:flex;
  flex-direction:column;

  gap:25px;

  position:relative;
  z-index:2;
}

.input-group input,
.input-group textarea{

  width:100%;

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

  border:
  1px solid rgba(255,255,255,0.06);

  border-radius:16px;

  padding:20px;

  color:white;

  font-size:17px;

  outline:none;

  transition:0.3s;
}

.input-group textarea{

  resize:none;

  height:180px;
}

.input-group input:focus,
.input-group textarea:focus{

  border-color:
  rgba(61,220,132,0.5);

  box-shadow:
  0 0 20px rgba(61,220,132,0.12);
}

.contact-form button{

  height:65px;

  border:none;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    #2ab86b
  );

  color:black;

  font-size:18px;
  font-weight:700;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  transition:0.3s;
}

.contact-form button:hover{

  transform:translateY(-4px);

  box-shadow:
  0 0 30px rgba(61,220,132,0.35);
}

/* FOOTER */

.footer{

  border-top:
  1px solid rgba(255,255,255,0.05);

  padding:35px 0;

  background:#050816;
}

.footer-content{

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.footer p{

  color:#9f9f9f;

  font-size:16px;
}

.footer-socials{

  display:flex;

  gap:16px;
}

.footer-socials a{

  width:48px;
  height:48px;

  border-radius:50%;

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

  border:
  1px solid rgba(255,255,255,0.06);

  display:flex;
  align-items:center;
  justify-content:center;

  color:white;

  text-decoration:none;

  font-size:20px;

  transition:0.3s;
}

.footer-socials a:hover{

  background:var(--primary);

  color:black;

  transform:translateY(-4px);

  box-shadow:
  0 0 20px rgba(61,220,132,0.3);
}

/* ANIMATION */

.hidden-animation{

  opacity:0;

  transform:translateY(50px);

  transition:all 1s ease;
}

.show-animation{

  opacity:1;

  transform:translateY(0);
}

@keyframes floatY{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0);
  }

}

.modal-content {
  max-width: 550px;
  width: 95%;
  min-height: 85vh;
  overflow-y: auto;
}

#paypal-button-container {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}