/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


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


/* General Styles */
body {
 font-family: 'Poppins', sans-serif;
 line-height: 1.6;
 background: #f4f6f8;
 color: #2c3e50;
}


.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 20px;
}


/* Header */
.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 20px;
 background: #fff;
 border-radius: 12px;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 margin-bottom: 30px;
}


.title {
 font-size: 24px;
 color: #2c3e50;
 display: flex;
 align-items: center;
 gap: 10px;
}


.back-home-btn {
 padding: 10px 20px;
 background: #3498db;
 color: white;
 text-decoration: none;
 border-radius: 6px;
 display: flex;
 align-items: center;
 gap: 8px;
 transition: background-color 0.3s ease;
}


.back-home-btn:hover {
 background: #2980b9;
}


/* Formula Dashboard Layout */
.formula-dashboard {
 display: grid;
 gap: 25px;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


/* Card Styles */
.formula-card {
 background: #fff;
 border-radius: 12px;
 padding: 25px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.formula-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


.formula-card h2 {
 color: #2c3e50;
 font-size: 20px;
 margin-bottom: 20px;
 display: flex;
 align-items: center;
 gap: 10px;
 padding-bottom: 10px;
 border-bottom: 2px solid #eee;
}


/* Calculation Form */
.calc-mode-selector {
 margin-bottom: 20px;
 border: none;
 padding: 0;
}


.calc-mode-selector legend {
 font-weight: 600;
 margin-bottom: 10px;
 color: #34495e;
}


.calc-mode-selector label {
 display: block;
 margin-bottom: 8px;
 font-size: 0.95em;
 color: #555;
 cursor: pointer;
}


.input-group {
 margin-bottom: 20px;
}


.input-group label {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
 color: #34495e;
 font-weight: 500;
}


input[type="number"] {
 width: 100%;
 padding: 12px;
 border: 2px solid #e0e0e0;
 border-radius: 8px;
 font-size: 16px;
 transition: border-color 0.3s ease;
}


input[type="number"]:focus {
 border-color: #3498db;
 outline: none;
}


/* Button Styles */
button {
 background: #3498db;
 color: white;
 padding: 12px 24px;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 font-size: 16px;
 display: flex;
 align-items: center;
 gap: 8px;
 transition: background-color 0.3s ease;
}


button:hover {
 background: #2980b9;
}


/* Result Display */
.result {
 margin-top: 20px;
 padding: 15px;
 border-radius: 8px;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 8px;
}


.result i {
 font-size: 20px;
}


/* Step-by-step Solution */
.solution-content {
 padding: 15px;
}


.formula-highlight {
 font-size: 24px;
 color: #3498db;
 margin-bottom: 20px;
 font-weight: 600;
 text-align: center;
}


ol {
 list-style: none;
}


ol li {
 margin-bottom: 15px;
 display: flex;
 align-items: center;
 gap: 10px;
}


.example {
 margin-top: 20px;
 padding: 15px;
 background: #f8f9fa;
 border-left: 4px solid #3498db;
 border-radius: 8px;
 display: flex;
 align-items: center;
 gap: 10px;
}


/* Practice Problems */
.problem {
 margin-bottom: 20px;
 padding: 20px;
 background: #f8f9fa;
 border-radius: 8px;
 border-left: 4px solid #3498db;
}


.show-answer-btn {
 background: #27ae60;
 margin-top: 10px;
}


.show-answer-btn:hover {
 background: #219653;
}


.answer {
 margin-top: 15px;
 padding: 15px;
 background: #f1f8ff;
 border-radius: 6px;
 color: #2c3e50;
}


/* Video Container */
.video-container {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 border-radius: 8px;
}


.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
}


/* Calculation History */
.memory-history .history-header {
 display: flex;
 align-items: center;
 gap: 20px;
 margin-bottom: 20px;
 padding: 15px;
 background: #f8f9fa;
 border-radius: 8px;
}


.memory-history .history-header img {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 object-fit: cover;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.memory-history .history-header p {
 color: #555;
 font-size: 0.9em;
}


.history-item {
 padding: 10px;
 border-bottom: 1px solid #eee;
}


.no-history {
 color: #666;
 text-align: center;
 padding: 20px;
}


#clear-history {
 background: #e74c3c;
 color: white;
 padding: 10px 15px;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 8px;
 margin-top: 15px;
 transition: background-color 0.3s ease;
}


#clear-history:hover {
 background: #c0392b;
}


/* Footer */
.footer {
 text-align: center;
 margin-top: 40px;
 padding: 20px;
 color: #666;
}


/* Responsive Design */
@media (max-width: 768px) {
 .container {
 padding: 10px;
 }


 .header {
 flex-direction: column;
 gap: 15px;
 text-align: center;
 }


 .formula-dashboard {
 grid-template-columns: 1fr;
 }


 .formula-card {
 padding: 15px;
 }


 .title {
 font-size: 20px;
 }


 button {
 width: 100%;
 justify-content: center;
 }


 .memory-history .history-header {
 flex-direction: column;
 align-items: flex-start;
 }


 .memory-history .history-header img {
 margin-bottom: 15px;
 }
}


/* newton image styling */
.newton-image {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 object-fit: cover;
}

/* CSS for the image popup */
.popup-image-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
   }
   
   
   .popup-image-container img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
   }