* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    color: #333;
}

.container {
    max-width: 1100px;
    margin: 40px auto;
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Navigation */
nav {
    text-align: center;
    margin-bottom: 30px;
}

nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #0077cc;
    font-weight: 600;
}

nav a:hover {
    text-decoration: underline;
}

/* Header */
header {
    text-align: center;
    border-bottom: 2px solid #0077cc;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

header a {
    color: #0077cc;
    text-decoration: none;
}

/* Two Column Layout */
.row {
    overflow: hidden;
}

aside {
    float: left;
    width: 30%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fafafa;
}

section {
    float: left;
    width: 70%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* Responsive Image */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

aside img {
    margin-bottom: 20px;
    border-radius: 6px;
    border: 2px solid #ccc;
}

/* Headings */
h2 {
    color: #0077cc;
    border-bottom: 2px solid #0077cc;
    padding-bottom: 5px;
    margin-top: 20px;
}

.date {
    font-size: 14px;
    color: #666;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    font-size: 14px;
}

/* Responsive Layout */
@media (max-width: 768px) {
    aside, section {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
}
/* Global Styles */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    color: #333;
}

/* Main Container */
.container {
    max-width: 1000px;
    margin: 40px auto;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Navigation */
nav {
    text-align: center;
    margin-bottom: 30px;
}

nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #0077cc;
    font-weight: 600;
}

nav a:hover {
    text-decoration: underline;
}

/* Headings */
h1 {
    text-align: center;
    margin-bottom: 10px;
}

h2 {
    color: #0077cc;
    border-bottom: 2px solid #0077cc;
    padding-bottom: 5px;
    margin-top: 40px;
}

/* Banner Image */
.banner {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Page Text */
.page p {
    line-height: 1.6;
}

.highlight {
    font-weight: bold;
    color: #0077cc;
}

/* Project Image */
.project-img {
    display: block;
    margin: 30px auto;
    max-width: 80%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #0077cc;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

footer a {
    margin: 0 10px;
    text-decoration: none;
    color: #0077cc;
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .container {
        padding: 20px;
    }
}
.square-list {
    list-style-type: square;
}
/* Container for the 3 lists */
.list-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 30px 0;
}

/* Each list */
.list-row ul,
.list-row ol {
    flex: 1;
    list-style-position: inside;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Optional: Make list items spaced nicely */
.list-row li {
    margin-bottom: 8px;
}

/* Mobile layout */
@media (max-width: 768px) {
    .list-row {
        flex-direction: column;
    }
}
.roman-list {
    list-style-type: lower-roman;
}
/* Certifications Section */
dl {
    max-width: 600px;          /* keeps it from stretching too wide */
    margin: 40px auto;         /* centers horizontally */
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Certification title (MOS, A+, Net+) */
dt {
    font-weight: 600;
    margin-top: 15px;
    text-align: center;
}

/* Description */
dd {
    margin: 5px 0 15px 0;
    text-align: center;
}
/* ============================= */
/* PORTFOLIO PAGE STYLING       */
/* ============================= */

.portfolio-section {
    padding: 40px 10%;
}

/* Grid Layout */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 full columns on desktop */
    gap: 30px;
}

/* Portfolio Card */
.portfolio-card {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Image Styling */
.portfolio-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

/* Text Content */
.card-content {
    padding: 20px;
}

.card-content h2 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.card-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* ============================= */
/* RESPONSIVE (Mobile)          */
/* ============================= */

@media (max-width: 768px) {

    .portfolio-section {
        padding: 20px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr; /* 1 full column on mobile */
    }

    .portfolio-card img {
        height: 220px;
    }
}
nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

nav ul li {
    margin: 0 20px;
}
#wrapper{
width:1000px;
margin:auto;
}
.box {border:2px blue solid}

blockquote{
margin-left:60px;
margin-right:60px;
font-size:18px;
line-height:1.6;
font-family:Georgia, serif;
}

/* Enlarged first letter pseudo element */

blockquote::first-letter{
font-size:300%;
font-weight:bold;
color:#2c6cb0;
float:left;
margin-right:8px;
line-height:1;
}

/* Newsletter Title */

.newsTitle{
color:#2e6da4;
font-family:Georgia, serif;
text-align:center;
letter-spacing:2px;
}

/* Date and author */

.newsInfo{
text-align:center;
color:#555;
font-style:italic;
}

/* Custom HR design */

.newsLine{
width:70%;
height:4px;
background:#2e6da4;
border:none;
margin:20px auto;
}

/* Infobar banner */

.infobar{
background:#1c1c1c;
color:white;
text-align:center;
font-size:20px;
padding:10px;
margin:20px 60px;
font-weight:bold;
}

/* Image bullet list */

.imagebullets{
list-style-image:url(images/bullet-camera.png);
margin-left:80px;
font-size:18px;
}

/* CSS3 Feature 1: box shadow */

blockquote{
margin-left:60px;
margin-right:60px;
padding:15px;
background:#f5f8ff;
box-shadow:4px 4px 10px rgba(0,0,0,0.3);
}

/* CSS3 Feature 2: gradient background */

.infobar{
background:linear-gradient(to right,#000000,#444444);
}

/* CSS3 Feature 3: hover transition */

.imagebullets li{
transition:transform .2s ease;
}

.imagebullets li:hover{
transform:scale(1.05);
}