*{margin: 0;padding: 0;overflow-x: hidden;}
:root{
    --navy: #0A1628;
    --blue: #185FA5;
    --blue-light: #E6F1FB;
    --accent: #F4A235;
    --white: #FFFFFF;
    --gray-100: #F7F8FA;
    --gray-200: #E8EBF0;
    --gray-500: #6B7280;
    --gray-800: #1F2937;
    --font-display: 'DM Serif Display', serif;
    --font-body: 'DM Sans', sans-serif;
}

/* navugation-menu-section */
.navigation{width: 100%;height: auto;position: fixed;top: 0;left: 0;z-index: 100;background: rgba(10,22,40,0.97);backdrop-filter: blur(10px);padding: 15px 0;border-bottom: 1px solid rgba(255,255,255,0.07);}

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

.nav_logo{text-decoration: none;font-size: 30px;letter-spacing: 1px;color: #ffffff;font-family: var(--font-display), serif;}
.nav_logo span{color: var(--accent);}

.nav_links{display: flex;gap: 2rem;align-items: center;list-style: none;padding: 0;margin: 0;}
.nav_links a{color: rgba(255,255,255,0.75);text-decoration: none;font-size: 20px;font-weight: 500;font-family: var(--font-body);transition: all 0.3s;}
.nav_links a:hover{color: var(--accent);transition: all 0.3s;}

.nav_links .active{color: var(--accent);}

/* Hamburger-Menu */
.hamburger{display: none;flex-direction: column;justify-content: center;align-items: center;width: 40px;height: 40px;background: none; border: none;cursor: pointer;z-index: 101;gap: 5px;padding: 4px;}
.hamburger span{display: block;width: 24px; height: 2px;background: var(--white);border-radius: 2px;transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;transform-origin: center;}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{display: none;position: fixed;inset: 0;z-index: 99;background: rgba(10,22,40,0.98);backdrop-filter: blur(16px);flex-direction: column;align-items: center;justify-content: center;gap: 2rem;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}
.mobile-menu.open{opacity: 1;pointer-events: all;}
.mobile-menu ul{list-style: none;display: flex;flex-direction: column;align-items: center;gap: 2rem;}
.mobile-menu ul a{font-family: var(--font-body);font-size: 2.2rem;color: rgba(255,255,255,0.75);text-decoration: none;transition: color 0.2s;letter-spacing: 0.5px;}
.mobile-menu ul a:hover, .mobile-menu ul a.active{color: var(--accent);}

/* Hero-Section */
.hero_section{background: var(--navy);padding: 105px 0 0 0;position: relative;overflow: hidden;margin-top: 75px;}

.hero_container{display: flex;gap: 25px;}
.hero_text, .hero_img{width: 50%;}

.hero_tag{display: inline-block;background: rgba(244,162,53,0.15);color: var(--accent);border: 1px solid rgba(244,162,53,0.3);font-size: 20px;font-weight: 600;font-family: var(--font-body);letter-spacing: 1px;text-transform: uppercase;padding: 6px 16px;border-radius: 100px;}
.hero_container h1{font-family: var(--font-display);font-size: 56px;color: var(--white);margin: 16px 0;line-height: 1.15;overflow: hidden;}
.hero_container h1 em{font-style: italic;color: var(--accent);}
.hero_container p{font-family: var(--font-body);color: rgba(255,255,255,0.65);font-size: 20px;font-weight: 400;line-height: 1.75;margin-bottom: 25px;}

.hero_img{text-align: center;}
.hero_img img{width: 100%;height: 100%;object-fit: contain;object-position: center;}

.hero_btn{display: flex;gap: 15px;}

.btn_primary{font-family: var(--font-body);font-size: 18px;font-weight: 600;letter-spacing: 1px;background: var(--blue);color: var(--white);padding: 14px 32px;border-radius: 6px;text-decoration: none;transition: all 0.3s;}
.btn_primary:hover{background:  var(--accent);color: #0a1628;transition: all 0.3s;}

.btn_outline{font-family: var(--font-body);font-size: 18px;font-weight: 500;letter-spacing: 1px;border: 1.5px solid rgba(255,255,255,0.3);color: var(--white);padding: 14px 32px;border-radius: 6px;text-decoration: none;transition: ease 0.3s;transition: all 0.3s;}
.btn_outline:hover{border-color: var(--accent); color: var(--accent);transition: all 0.3s;}

/* Counter-Section */
.counter_section{width: 100%;background: #050b14;padding: 25px 0;border-top: 1px solid rgba(255,255,255,0.1);}

.counter_container{display: flex;gap: 20px;justify-content: space-between;}

.counter_div{width: 25%;padding: 25px 0;}
.count_num{font-size: 36px;font-weight: 600;font-family: var(--font-display);letter-spacing: 1px;color: var(--accent);line-height: 1;overflow: hidden;}
.count_label{font-size: 16px;font-family: var(--font-body);color: rgba(255,255,255,0.5);margin-top: 4px;}

/* About-Section */
.about_section{width: 100%;background: var(--gray-100);padding: 105px 0;}

.about_left{width: 100%;margin-bottom: 25px;}

.about_left p, .experience_container p, .skill_container p{color: var(--gray-500);font-size: 18px;line-height: 1.85;font-family: var(--font-body);margin-bottom: 15px;}
.section_tag{font-size: 20px;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;}

.section_title{overflow: hidden;font-family: var(--font-display);font-size: 40px;font-weight: 600;letter-spacing: 1px;color: var(--navy);margin-bottom: 16px;}

.about_right{display: flex;gap: 20px;align-items: stretch;padding: 8px;}
.highlight_card{background: var(--white);border-radius: 10px;padding: 20px 25px;border: 1px solid var(--blue);box-shadow: 4px 4px 0 var(--blue);}
.highlight_card h3{overflow: hidden;font-size: 18px;font-weight: 600;font-family: var(--font-body);color: var(--navy);margin-bottom: 5px;}
.highlight_card p{font-size: 16px;font-weight: 400;font-family: var(--font-body);margin: 0;}

/* Experience-Section */
.experience_section{width: 100%;background: var(--white);padding: 105px 0;}

.timeline{display: flex;flex-direction: column;gap: 0;}

.timeline_item{display: grid;grid-template-columns: 180px 1fr;gap: 20px;position: relative;overflow: clip;}
.timeline_item::before{content: '';position: absolute;left: 180px;top: 12px;bottom: -2rem;width: 1px;background: var(--gray-200);}
.timeline_date{font-size: 16px;font-weight: 600;color: var(--blue);font-family: var(--font-body);padding-top: 0;text-align: left;padding-right: 10px;}
.timeline_dot{position: absolute;left: 174px;top: 6px;width: 14px;height: 14px;background: var(--blue);border-radius: 50%;border: 3px solid var(--white);box-shadow: 0 0 0 2px var(--blue);}
.timeline_content{padding-left: 20px;padding-bottom: 20px;}
.timeline_content h3{overflow: hidden;font-size: 18px;font-weight: 600;color: var(--navy);font-family: var(--font-body);margin-bottom: 2px;}
.timeline_company{font-size: 15px;font-weight: 400;color: var(--blue);font-family: var(--font-body);margin-bottom: 2px;}
.timeline_content ul{list-style: none;display: flex;flex-direction: column;gap: 6px;padding: 0;}
.timeline_content ul li{font-size: 16px;font-weight: 400;color: var(--gray-500);font-family: var(--font-body);padding-left: 20px;position: relative;line-height: 1.6;}
.timeline_content ul li::before{content: '→';position: absolute;left: 0;color: var(--blue);font-size: 16px;}

/* Skill-Section */
.skill_section{width: 100%;padding: 105px 0;background: var(--navy);}

.skill_grid{display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);gap: 20px;margin-top: 20px;}
.skill_group{background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.08);border-radius: 12px;padding: 25px;}
.skill_group h3{overflow: hidden;font-family: var(--font-body);font-size: 20px;font-weight: 600;letter-spacing: 1px;text-transform: uppercase;color: var(--accent);margin-bottom: 16px;}
.skill_tags{display: flex;flex-wrap: wrap;gap: 8px;}
.skill_tag{font-family: var(--font-body);font-size: 16px;font-weight: 400;padding: 4px 12px;border-radius: 100px;background: rgba(255,255,255,0.08);color: rgba(255,255,255,0.75);border: 1px solid rgba(255,255,255,0.1);transition: all 0.3s;}
.skill_tag:hover{background: rgba(244,162,53,0.15);color: var(--accent);border: 1px solid rgba(244,162,53,0.3);transition: all 0.3s;}

/* CTA-Section */
.cta_section{width: 100%;padding: 75px 0;background: var(--blue);}

.cta_container{text-align: center;height: 200px;}
.cta_container h2{overflow: hidden;font-family: var(--font-display);font-size: 40px;font-weight: 600;letter-spacing: 1px;color: var(--white);margin-bottom: 16px;}
.cta_container p{font-family: var(--font-body);font-size: 18px;font-weight: 400;color: rgba(255,255,255,0.75);margin-bottom: 32px;}
.cta_container a{text-decoration: none;font-family: var(--font-body);font-size: 20px;font-weight: 600;letter-spacing: 1px;background: var(--white);color: var(--blue);padding: 14px 36px;border-radius: 6px;transition: all 0.3s;}
.cta_container a:hover{background: var(--navy);color: var(--white);transition: all 0.3s;}

/* Footer-Section */
.footer_section{width: 100%;background: var(--navy);padding: 20px 0;}

.footer_info_text{text-align: center;display: flex;flex-direction: column;gap: 10px;}
.footer_info_text p{margin: 0;font-size: 16px;font-weight: 400;font-family: var(--font-body);color: rgba(255,255,255,0.35);}
.footer_info_text a {color: rgba(255,255,255,0.55);text-decoration: none;transition: all 0.3s;}
.footer_info_text a:hover {color: var(--accent);transition: all 0.3s;}

/* Back-To-Top */
#backToTop{width: 50px;height: 50px;position: fixed;bottom: 25px;right: 25px;border-style: none;box-shadow: none;padding: 0;cursor: pointer;display: none;z-index: 999;transition: all 0.5s;background: transparent;}
#backToTop:hover{background: transparent;transform: scale(1.1);transition: all 0.5s;}
#backToTop img{width: 100%;height: 100%;object-fit: contain;object-position: center;transition: all 0.5s;}