/* =====================
   GLOBAL BRAND SYSTEM
===================== */

:root{
  --wine:#7b1717;
  --cream:#fbf4d7;
}

*{box-sizing:border-box}

.meta{
 font-size:18px;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Crimson Pro", serif;
  background:var(--cream);
  color:#5b1a1a;
  animation:fadeIn 1s ease forwards;
}

/* =====================
   PAGE FADE (Common)
===================== */

@keyframes fadeIn{to{opacity:1}}

/* =====================
   NAVBAR (Common)
===================== */

nav{
  background:var(--wine);
  color:#fff;
  padding:18px 80px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  border-radius:0 0 10px 10px;
}

  nav .Logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:-40px;
  }
    nav .Logo img{
      height:42px;display:block
    }
    nav .Logo strong{
      font-size:28px;
      font-weight:700;
    }
    nav .Logo:hover{
      text-decoration: none;
      transition:.25s;
    }
  nav .nav_links{
    font-size:18px;
  }
    nav a{
      color:white;
      text-decoration:none;
      margin-left:32px;
      font-weight:600;
      transition:.25s;
    }
    nav a:hover{
      color:var(--cream);text-decoration:underline
    }

/* =====================
   BUTTONS
===================== */

.btns{   /*index*/
  margin-top:30px;
}
.btns a{
  border:2px solid var(--wine);
  border-bottom: 10px;
  padding:14px 28px 14px 28px;
  border-radius:40px 5px 40px 5px;
  text-decoration:none;
  color:var(--wine);
  margin-bottom: 20px;
  margin-right:16px;
  display:inline-block;
  line-height: 1.4;
  font-weight:600;
}
.btns a:hover{
  background:var(--wine);
  color:white;
  cursor:pointer;
  transition: all 0.3s ease-in-out;
}

.button{
  border:2px solid var(--wine);
  border-bottom: 10px;
  padding:14px 28px 14px 28px;
  border-radius:40px;
  text-decoration:none;
  color:var(--wine);
  margin-bottom: 20px;
  margin-right:16px;
  display:inline-block;
  line-height: 1.4;
  font-weight:600;
}

.button:hover{
  background:var(--wine);
  color:white;
  cursor:pointer;
  transition: all 0.3s ease-in-out;
}

/* =====================
    HERO (Index)
======================== */
.hero{
  max-width:1200px;
  margin:auto;
  padding:80px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:40px;
  align-items:top;
}
.hero h1{
  font-family:"crimson-pro", serif;
  font-size:84px;
  margin:10px 0;
  color:var(--wine);
}
.hero .small{
  letter-spacing:2px;
}
.hero .tagline{
  font-family:"crimson-pro", serif;
  font-size:32px;
  margin-bottom:30px;
}

/* ====================
   ABOUT (Index)
===================== */
.about-box{
  border:2px solid var(--wine);
  border-radius:18px;
  padding:30px;
  margin:30px 0;
  font-size:22px;
  line-height:1.7;
}

/* =====================
   IMAGE FRAMES  (Index)
===================== */

.photo{
  width:100%;
  aspect-ratio:1/1.25;
  border-radius:50%;
  overflow:hidden;
  border:6px solid var(--wine);
}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =====================
  Services CARD GRID
===================== */
.services{
  max-width:1100px;
  margin:80px auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px;
}

.card{
  background:#fff;
  border:2px solid var(--wine);
  border-radius:18px;
  padding:30px;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  transition:.3s;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(0,0,0,.2);
}
.card-img{
  width:100%;
  border-radius:14px;
  margin-bottom:18px;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.card h3{
    margin-top:0;color:var(--wine);
}
.card p{
    line-height:1.7;
}
.card button{
  margin-top:20px;
  border:2px solid var(--wine);
  background:none;
  color:var(--wine);
  padding:12px 26px;
  border-radius:40px;
  cursor:pointer;
  font-weight:600;
}
.card button:hover{
  background:var(--wine);
  color:white;
}

/* =====================
trust strip (Index)
=======================*/
.trust-strip{
  background: #7b1717;
  color: #fff;
  text-align: center;
  padding: 14px;
  font-size: 15px;
  letter-spacing: .5px;
}

/* =====================
   SKILLS (Index)
===================== */

.skills{
  text-align:center;
  padding:80px 40px;
}
.skills h2{
  font-family:"Crimson Pro", serif;
  color:var(--wine);
  letter-spacing:6px;
  margin-bottom:50px;
}
.skill-grid{
  max-width:900px; 
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:30px;
  justify-content:center;
  margin:auto;
}
.skill-card{
  text-align:center;
  border:2px solid var(--wine);
  padding:25px;
  border-radius:16px;
  font-family:"crimson-pro", serif;
  font-size:30px;
  background:white;
}
.skill-card:hover{
  background:var(--wine);
  color:white;
  cursor:pointer;
  transition: all 0.3s ease-in-out;
  box-shadow:15px 15px 15px 15px #7b1717(0.3,0.3,0.3,0.3);
}

/* Whatsapp CTA Box */
.cta-box{
  max-width:900px;
  margin:80px auto;
  padding:50px 40px;
  background:#fbf4d7;
  border:3px solid #7b1717;
  border-radius:24px;
  text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.cta-box h2{
  color:#7b1717;
  font-size:32px;
  margin-bottom:14px;
}
.cta-box p{
  font-size:18px;
  line-height:1.6;
  margin-bottom:28px;
}
.cta-btn{
  display:inline-block;
  background:#7b1717;
  color:#fff;
  padding:14px 34px;
  border-radius:50px;
  text-decoration:none;
  font-weight:600;
}
.cta-btn:hover{
  background:#5b0f0f;
}

/* =====================
   QUOTE (Index)
===================== */

.quote{
  background:var(--wine);
  color:white;
  max-width:1000px;
  margin:80px auto;
  padding:40px 60px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 15px 30px rgba(0,0,0,0.3);
}

.quote p{
  font-family:"crimson-pro", serif;
  font-size:36px;
  line-height:1.6;
}

.quote span{
  display:block;
  margin-top:10px;
  font-size:22px;
}

/* =====================
   POPUP (Services Page)
===================== */

.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.popup-box{
  background:var(--cream);
  border:3px solid var(--wine);
  padding:40px;
  border-radius:18px;
  max-width:360px;
  text-align:center;
}
.popup-box h3{
    margin-top:0;color:var(--wine);
}
.popup-box a{
  display:inline-block;
  margin-top:20px;
  padding:14px 30px;
  border:2px solid var(--wine);
  border-radius:40px;
  text-decoration:none;
  color:var(--wine);
  font-weight:600;
}
.popup-box a:hover{
    background:var(--wine);color:white;
}

/*=========================
    WHY ME (Services Page)
 =========================*/
.why{
  text-align:center;
  max-width:800px;
  margin:100px auto;
  padding:0 40px;
}

.why h2{
    color:var(--wine);
    font-size: 36px;
}
.why p{
    line-height:1.7;
    font-size:22px;
}

/*=======================
    PAGE (About Page)
==========================*/
.page{
  max-width:1000px;
  margin:auto;
  padding:80px 40px;
}
blockquote{
  text-align:center;
  font-family: "Caveat", cursive;
  font-size:32px;
}

/* ====================
    Header 
=======================*/
/* (Projects page) */
.projects-header{
 max-width:900px;
 margin:auto;
 padding:80px 40px 40px;
 text-align:center;
}
.projects-header h1{
 font-family:"Crimson Pro", serif;
 color:var(--wine);
}
.projects-header p{
  font-size:22px;
}

/*======================
    PROJECT GRID 
    (projects page)
 ======================*/
.projects-grid{
 max-width:1100px;
 margin:60px auto;
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
 gap:60px;
 padding:0 40px;
}
.card{
 background:white;
 border:3px solid var(--wine);
 border-radius:20px;
 padding:20px;
 box-shadow:0 15px 30px rgba(0,0,0,0.15);
}
.card img{
 width:100%;
 border-radius:14px;
}
.card h3{
 font-family:"Crimson Pro", serif;
 color:var(--wine);
 margin:16px 0 6px;
}

/*=====================
     FORM BOX
    (Contacts Page)
===================== */
.contact-wrap{
 max-width:1100px;
 margin:auto;
 padding:60px 40px;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:60px;
 align-items:center;
 font-size:22px;
}

.form-box{
 background:rgba(0,0,0,0.05);
 padding:40px;
 border-radius:20px;
 font-family:"Crimson Pro", serif;
}

input,textarea{
 width:100%;
 padding:14px;
 border-radius:8px;
 border:none;
 margin-bottom:16px;
 font-family:"Crimson Pro", serif;
}
textarea{
  height:120px;
}
button{
 border:2px solid var(--wine);
 background:transparent;
 padding:12px 30px;
 border-radius:40px;
 font-weight:600;
 cursor:pointer;
}
button:hover{
 background:var(--wine);
 color:white;
 transition: all 0.3s ease-in-out;
 cursor: pointer;
}

/*=====================
      Contact INFO
    (Contacts Page)
 ====================== */
 .info h2{
 font-family:"Crimson Pro", serif;
 color:var(--wine);
}
.info div{
 margin-bottom:20px;
 font-size:18px;
}
.info a{
  color:var(--wine);
  text-decoration:none;
  font-weight:600;
  transition: all 0.3s ease-in-out;
}
.info a:hover{
    text-decoration:underline;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.social{
 text-align:center;
 padding:80px 40px;

}
.social h2{
 font-family:"Crimson Pro", serif;
 color:var(--wine);
}
.social a{
 font-size:36px;
 margin:0 18px;
 color:var(--wine);
 text-decoration:none;
}
.social a:hover{
  color:#5b1a1a;
  transition: all 0.3s ease-in-out;
}
/*=====================
        Elements
    (Contacts Page)
====================== */
.line-md--instagram::after {
  display: inline-block;
  width: 96px;
  height: 96px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%237b1717' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='66' d='M16 3c2.76 0 5 2.24 5 5v8c0 2.76 -2.24 5 -5 5h-8c-2.76 0 -5 -2.24 -5 -5v-8c0 -2.76 2.24 -5 5 -5h4Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='1.2s' values='66;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='28' stroke-dashoffset='28' d='M12 8c2.21 0 4 1.79 4 4c0 2.21 -1.79 4 -4 4c-2.21 0 -4 -1.79 -4 -4c0 -2.21 1.79 -4 4 -4'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.4s' dur='1.2s' to='0'/%3E%3C/path%3E%3C/g%3E%3Ccircle cx='17' cy='7' r='1.5' fill='%237b1717' opacity='0'%3E%3Canimate fill='freeze' attributeName='opacity' begin='2s' dur='0.4s' to='1'/%3E%3C/circle%3E%3C/svg%3E");
}

.line-md--github-twotone::after {
  display: inline-block;
  width: 96px;
  height: 96px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237b1717' fill-opacity='0' d='M15 4.5c-0.39 -0.1 -1.33 -0.5 -3 -0.5c-1.67 0 -2.61 0.4 -3 0.5c-0.53 -0.43 -1.94 -1.5 -3.5 -1.5c-0.34 1 -0.29 2.22 0 3c-0.75 1 -1 2 -1 3.5c0 2.19 0.48 3.58 1.5 4.5c1.02 0.92 2.11 1.37 3.5 1.5c-0.65 0.54 -0.5 1.87 -0.5 2.5v4h6v-4c0 -0.63 0.15 -1.96 -0.5 -2.5c1.39 -0.13 2.48 -0.58 3.5 -1.5c1.02 -0.92 1.5 -2.31 1.5 -4.5c0 -1.5 -0.25 -2.5 -1 -3.5c0.29 -0.78 0.34 -2 0 -3c-1.56 0 -2.97 1.07 -3.5 1.5Z'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.9s' dur='0.15s' to='0.3'/%3E%3C/path%3E%3Cg fill='none' stroke='%237b1717' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='32' d='M12 4c1.67 0 2.61 0.4 3 0.5c0.53 -0.43 1.94 -1.5 3.5 -1.5c0.34 1 0.29 2.22 0 3c0.75 1 1 2 1 3.5c0 2.19 -0.48 3.58 -1.5 4.5c-1.02 0.92 -2.11 1.37 -3.5 1.5c0.65 0.54 0.5 1.87 0.5 2.5c0 0.73 0 3 0 3M12 4c-1.67 0 -2.61 0.4 -3 0.5c-0.53 -0.43 -1.94 -1.5 -3.5 -1.5c-0.34 1 -0.29 2.22 0 3c-0.75 1 -1 2 -1 3.5c0 2.19 0.48 3.58 1.5 4.5c1.02 0.92 2.11 1.37 3.5 1.5c-0.65 0.54 -0.5 1.87 -0.5 2.5c0 0.73 0 3 0 3'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='32;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='10' stroke-dashoffset='10' d='M9 19c-1.41 0 -2.84 -0.56 -3.69 -1.19c-0.84 -0.63 -1.09 -1.66 -2.31 -2.31'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.7s' dur='0.2s' to='0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.line-md--linkedin::after {
  display: inline-block;
  width: 96px;
  height: 96px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='4' r='2' fill='%237b1717' opacity='0'%3E%3Canimate fill='freeze' attributeName='opacity' dur='0.2s' to='1'/%3E%3C/circle%3E%3Cg fill='none' stroke='%237b1717' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cg stroke-dasharray='12' stroke-dashoffset='12'%3E%3Cpath d='M4 10v10'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.2s' dur='0.2s' to='0'/%3E%3C/path%3E%3Cpath d='M10 10v10'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.2s' to='0'/%3E%3C/path%3E%3C/g%3E%3Cpath stroke-dasharray='24' stroke-dashoffset='24' d='M10 15c0 -2.76 2.24 -5 5 -5c2.76 0 5 2.24 5 5v5'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.7s' dur='0.3s' to='0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
/* ==================
    Resume Page
======================*/

/* BUTTON */
.top-btn{
 text-align:center;
 padding:60px 0 30px;
}
.top-btn a{
 border:2px solid var(--wine);
 padding:14px 30px;
 border-radius:40px;
 text-decoration:none;
 color:var(--wine);
 font-weight:600;
}
.top-btn a:hover{
    background:var(--wine);color:white;
    cursor:pointer;
    transition: all 0.3s ease-in-out;
}

/* IMAGE */
.resume-img{
 max-width:900px;
 margin:20px auto 120px;
 border:4px solid var(--wine);
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 20px 40px rgba(0,0,0,.2);
}
.resume-img img{
 width:100%;
 display:block;
}

/* =====================
   FOOTER (Common)
===================== */

.site-footer{
  background:#7b1717;
  color:#fff;
  padding:60px 40px 20px;
  margin-top:100px;
  font-family:"crimson-pro", serif;
  border-radius: 10px 10px 0 0;
}

.footer-wrap{
  max-width:auto;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:40px;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity: 0.7;
}
.footer-info{
  text-align:left;
}

.site-footer a{
  display:block;
  color:#fff;
  text-decoration:none;
  margin:6px 0;
}

.site-footer h3,h4{
  font-size: larger;
}

.site-footer a:hover{
  opacity:.7
}

.copy{
  text-align:center;
  margin-top:60px;
  font-size:18px;
  opacity:.5;
}

/* Footer PDF Button */
/*
.footer-pdf{
  text-align:center;
  margin-top:40px;
}
.pdf-btn{
  display:inline-block;
  background:#fbf4d7;
  color:#7b1717;
  padding:12px 26px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  border:2px solid #661313;
}
.footer-pdf a{
  display:inline-block;
  background:#fbf4d7;
  color:#7b1717;
  padding:12px 26px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  border:2px solid #661313;
}
.pdf-btn:hover{
  background:#7b1717;
  color:#fff;
} */

/* =====================
   WHATSAPP FLOAT
      (Common)
===================== */

.whatsapp-float{
  position:fixed;
  bottom:26px;
  right:26px;
  width:64px;
  height:64px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  z-index:9999;
  transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover{
  transform:scale(1.12);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
}

/* ===============================
The Page Transition Loader System
            (Common)
=================================*/
.page-loader{
  position:fixed;
  inset:0;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100000;
  pointer-events:none;
  opacity:0;
  transition:.3s ease;
}

.page-loader img{
  width:70px;
  animation:spin 1s linear infinite;
}

.page-loader.active{
  opacity:1;
}

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


/*========================
    Animation (Common)
 ========================*/

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.active{
  opacity:1;
  transform:none;
}

/* glow */
.glow:hover{
  box-shadow:0 0 18px rgba(123,23,23,.55);
  transform:translateY(-3px);
}

/* wave */
.wave{
  box-shadow:0 30px 60px rgba(0,0,0,.12);
  border-radius:20px;
}

/* =====================
   RESPONSIVE DESIGN
===================== */

@media(max-width:768px){
  nav{
    flex-direction:column;
    align-items:center;
    padding:18px 20px;
  }
  nav .Logo{
    margin:0;
    justify-content:center;
  }
  nav .nav_links{
    width:100%;
    display:flex;
    justify-content:space-around;
    margin-top:12px;
  }
  nav .nav_links a{
    margin:0;
    font-size:18px;
  }
  .footer-info{text-align:center}
  .hero{grid-template-columns:1fr;padding:40px 20px;text-align:center}
  .hero h1{font-size:52px}
  .hero .tagline{font-size:24px}
  .quote {margin: 60px 20px 40px 20px;}
  .quote p{font-size:28px}

  .card{
    padding:24px;
    border-radius:18px;
  }
  .card h3{
    font-size:22px;
    line-height:1.4;
  }
  .card .meta{
    font-size:16px;
    line-height:1.6;
  }
  .card .btn{
    display:block;
    width:100%;
    text-align:center;
    margin-top:16px;
    padding:12px 0;
  }

  .contact-wrap{grid-template-columns:1fr; padding:40px 20px}
  .info{text-align:center;}
  .resume-img{margin-bottom:60px; width: 90%;}
}

@media(max-width:425px){
  nav{
    padding:14px 16px;
  }
  nav .Logo strong{
    font-size:24px;
  }
  nav .Logo img{
    height:34px;
  }
  nav .nav_links{
    margin-top:10px;
  }
  nav .nav_links a{
    font-size:16px;
  }
  .hero h1{font-size:36px}
  .hero .tagline{font-size:20px}
  .quote {margin: 40px 10px 30px 10px;}
  .quote p{font-size:24px}

  .projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  width:100%;
  max-width:100%;
  overflow:hidden;
  gap: 30px;
  align-items: center;
  justify-content: center;
  padding:0 10px;
  }
  .card{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  }
  .card img{
  max-width:100%;
  height:auto;
  display:block;
  }
  .card h3{
    font-size:20px;
  }
  .card .meta{
    font-size:15px;
  }
  .card .btn{
    font-size:15px;
    padding:10px 0;
  }
}