/**
* Template Name: iPortfolio - v3.9.1 (Optimized)
* Author: BootstrapMade.com + Final Touch by Saurabh
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root{
  --accent:#149ddd;
  --accent-2:#37b3ed;
  --hero-grad-1:#0f2027;
  --hero-grad-2:#203a43;
  --hero-grad-3:#2c5364;
}

* { box-sizing: border-box; }

body {
  font-family: "Open Sans", sans-serif;
  color: #272829;
  margin: 0;
  padding: 0;
  background: #fff;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover { color: var(--accent-2); }

h1,h2,h3,h4,h5,h6 {
  font-family: "Raleway", sans-serif;
  margin: 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Back to Top Button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--accent);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.4s;
  display:flex; align-items:center; justify-content:center;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover { background: #2eafec; }
.back-to-top.active { visibility: visible; opacity: 1; }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 300px;
  padding: 0 15px;
  background: #040b14;
  overflow-y: auto;
  z-index: 9997;
  transition: all 0.5s ease-in-out;
}

#header .profile { text-align: center; }
#header .profile img {
  margin: 15px auto;
  display: block;
  width: 120px;
  border: 8px solid #2c2f3f;
  border-radius: 50%;
}

#header .profile h1 {
  font-size: 24px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

#header .profile h1 a { color: #fff; }

#header .profile .social-links a {
  display: inline-block;
  width: 36px; height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  background: #212431;
  border-radius: 50%;
  margin-right: 4px;
  transition: 0.3s;
}

#header .profile .social-links a:hover { background: var(--accent); }

/* Main content offset */
#main { margin-left: 300px; }

@media (max-width: 1199px) {
  #header { left: -300px; }
  #main { margin-left: 0; }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.nav-menu { padding: 30px 0 0; list-style: none; }
.nav-menu>ul>li { position: relative; white-space: nowrap; }

.nav-menu a {
  display: flex; align-items: center;
  color: #a8a9b4;
  padding: 12px 15px;
  margin-bottom: 8px;
  font-size: 15px;
  transition: 0.3s;
}

.nav-menu a i {
  font-size: 24px;
  color: #6f7180;
  padding-right: 8px;
}

.nav-menu a:hover,
.nav-menu .active,
.nav-menu li:hover>a { color: #fff; }

.nav-menu a:hover i,
.nav-menu .active i,
.nav-menu li:hover>a i { color: var(--accent); }

/* Mobile Navigation Toggle */
.mobile-nav-toggle {
  position: fixed;
  top: 15px; right: 15px;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 24px;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 9998;
}

.mobile-nav-active { overflow: hidden; }
.mobile-nav-active #header { left: 0; }

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  min-height: 100vh;
  background:
    linear-gradient(to right, rgba(15,32,39,0.75), rgba(32,58,67,0.75), rgba(44,83,100,0.75)),
    url("../img/datanew.jpg") center center / cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 40px;
  position: relative;
}

.hero-container { max-width: 980px; width: 100%; }

/* Top intro block (line 1) */
.hero-top {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 .65rem;
  color: #f8fafc;
  text-wrap: balance;
}

/* Stats line (line 2) */
.hero-stats {
  font-size: 1.05rem;
  margin: .35rem 0 1.0rem;
  font-weight: 600;
  color: #ffd700;
}
.hero-stats .stat-number {
  font-weight: 800;
  font-size: 1.15rem;
}

/* “Driving business impact with …” (line 3) */
.tagline {
  font-size: 1.05rem;
  margin-bottom: 1.4rem;
  color:#e9ecef;
}

/* Main headline */
.hero-main {
  font-size: clamp(1.9rem, 3.4vw + .6rem, 2.8rem);
  line-height: 1.2;
  font-weight: 800;
  margin: 1.2rem 0 .6rem;
  color: #ffffff;
  text-wrap: balance;
}

/* Second tagline: “Using …” under main headline */
.hero-main + .tagline {
  font-size: 1.03rem;
  margin-bottom: 1.5rem;
  color: #eaf2ff;
}

/* Generic hero typography fallback */
.hero-container h1 { letter-spacing: .5px; }
.hero-container p { margin-top: 8px; font-size: 1.05rem; }

/* Typed cursor (for both .typed and .typed-2) */
.typed-cursor {
  font-weight: 600;
  opacity: .9;
}

/* Optional subtle text shadow for readability on bright images */
#hero .hero-top,
#hero .hero-stats,
#hero .tagline,
#hero .hero-main {
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Hero buttons */
.btn-accent{
  background:#ff6b6b;
  color:#fff;
  padding:.7rem 1.3rem;
  border-radius: 50px;
  margin-right:.75rem;
  transition:.25s;
  display:inline-block;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.btn-accent:hover{ background:#ff4757; transform:translateY(-2px); }

.btn-outline-accent{
  border:2px solid #ff6b6b;
  color:#ff6b6b;
  padding:.7rem 1.3rem;
  border-radius:50px;
  transition:.25s;
  display:inline-block;
}
.btn-outline-accent:hover{ background:#ff6b6b; color:#fff; }

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section { padding: 60px 0; overflow: hidden; }
.section-bg { background: #f5f8fd; }

.section-title h2 {
  font-size: 32px;
  font-weight: 800;
  color: #173b6c;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 50px; height: 3px;
  background: var(--accent);
  position: absolute; left: 0; bottom: 0;
}

.section-title p { margin-bottom: 0; }

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 { font-size: 26px; font-weight: 700; color: #173b6c; }
.about .content ul { list-style: none; padding: 0; }
.about .content ul li { margin-bottom: 20px; display: flex; align-items: center; }
.about .content ul strong { margin-right: 10px; }
.about .content ul i { font-size: 16px; margin-right: 5px; color: var(--accent); }
.about .content p:last-child { margin-bottom: 0; }

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
#chartContainer {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.skills .progress { height: 80px; background: none; margin-bottom: 15px; }
.skills .progress .skill { font-weight: 800; color: #050d18; text-transform: uppercase; display: block; margin-bottom: 6px; }
.skills .progress .skill .val { float: right; font-style: normal; }
.skills .progress-bar-wrap { background: #dce8f8; height: 10px; }
.skills .progress-bar { height: 10px; width: 1px; transition: 0.9s; background-color: var(--accent); }

/*--------------------------------------------------------------
# Education Section
--------------------------------------------------------------*/
.education { background:#e5ecfb; min-height:80vh; }
.education .heading,
.education .qoute { text-align:center; }
.education .box-container { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.education .box-container .box {
  display: flex; width: 80%; margin-top: 2rem;
  background: #fcfcfc; border-radius: 0.5rem;
  box-shadow: 0.2rem 0.5rem 1rem rgba(0,0,0,0.2);
  transition: 0.3s; overflow: hidden;
}
.education .box-container .box:hover { transform: scale(1.03); box-shadow: 1rem 0.5rem 1.2rem rgba(0,0,0,0.3); }
.education .box-container .box .image { flex: 1 1 20rem; width: 100%; }
.education .box-container .box img { width: 100%; height: 100%; object-fit: cover; }
.education .box-container .box .content { flex: 1 1 70rem; display: flex; flex-direction: column; padding: 1rem; }
.education .box-container .box .content h3 { font-size: 2.0rem; color: #012970; font-weight: 700; text-align: left; margin-left: 1rem; }
.education .box-container .box .content p { font-size: 1.1rem; text-align: left; margin-left: 1rem; }
.education h4 { font-size: 1.1rem; color: #226d00; font-weight: 700; margin: 1rem; font-family: "Nunito", sans-serif; }

/* Responsive Education */
@media screen and (max-width: 600px){
  .education .box-container .box { flex-direction: column; width: 100%; }
  .education .box-container .box .image { width: 100%; height: 25rem; }
  .education .box-container .box .content { flex: 0; }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact { background: #e5ecfb; min-height: 60vh; padding-bottom: 130px; }
.contact .container {
  max-width: 1050px; width: 100%;
  margin: 2rem auto; background: #fff;
  border-radius: 1.5rem; box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}
.contact .container .content { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 2rem; }
.contact .content .image-box { max-width: 60%; margin-left: 4rem; }
.contact .content .image-box img { width: 100%; height: 40rem; object-fit: cover; }
.contact .content form { width: 45%; margin-right: 3.5rem; }
.contact .php-email-form { width: 100%; padding: 30px; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,0.12); }
.contact .php-email-form .form-group { margin-bottom: 15px; }
.contact .php-email-form input,
.contact .php-email-form textarea {
  width: 100%; padding: 10px 15px; border-radius: 0;
  border: 1px solid #333; font-size: 14px; outline: none; background: #e5ecfb;
}
.contact .php-email-form button[type=submit],
#cf-submit {
  background: var(--accent); color: #fff;
  padding: 10px 24px; border-radius: 8px; transition: 0.25s;
  cursor: pointer; border: none; font-weight: 600;
}
.contact .php-email-form button[type=submit]:hover,
#cf-submit:hover { background: var(--accent-2); }

/* Responsive Contact */
@media(max-width:900px){
  .contact .container { margin: 3rem 1rem; }
  .contact .content { flex-direction: column; }
  .contact .content .image-box { display: none; }
  .contact .content form { width: 100%; margin: 2rem 0; }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  padding: 15px;
  color: #f4f6fd;
  font-size: 14px;
  position: fixed;
  left: 0; bottom: 0;
  width: 300px;
  background: #040b14;
  z-index: 9999;
  text-align: center;
}

@media (max-width: 1199px){
  #footer { position: static; width: auto; padding-right: 20px; }
}

/*--------------------------------------------------------------
# Portfolio / Experience Cards (shared)
--------------------------------------------------------------*/
.project-container {
  display:flex; justify-content: space-between; align-items:center;
  gap: 24px; padding: 20px; background:#fff; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06); margin-bottom: 28px;
}
.project-image { width: 100%; max-width: 520px; }
.project-image img{ width:100%; height:100%; object-fit:cover; border-radius:8px; border:1px solid #e6e6e6; }
.project-description { width:100%; padding: 10px 0; text-align:left; }
.project-description h2{ margin-bottom:6px; }
.project-description h5{ margin-top:10px; margin-bottom:6px; color:#12355b; }

@media (max-width: 1000px) {
  .project-container { flex-direction: column; text-align: center; }
  .project-description { text-align: left; }
}