From a69a0b9ce0b08820ecf95e800b48a853e8b7b572 Mon Sep 17 00:00:00 2001
From: nagalakshmi08 <lakshmireddydwarampudi436@gmail.com>
Date: Mon, 27 May 2024 15:22:57 +0530
Subject: [PATCH] Fix: Made header responsive.

---
 styles.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 73 insertions(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index 559a1b24..9620c974 100644
--- a/styles.css
+++ b/styles.css
@@ -2083,4 +2083,76 @@ margin-left: 20px;
 .swiper-container-3d .swiper-slide-shadow-left
 {
   background-image: none;
-}
\ No newline at end of file
+}
+
+
+
+/* CSS for small devices */
+@media (max-width: 1200px) {
+  .header__image img:nth-child(1) {
+    max-width: 30vw;
+    transform: translate(-75%, -50%);
+  }
+
+  .header__image img:nth-child(2) {
+    max-width: 20vw;
+    transform: translate(0%, -25%);
+  }
+}
+
+@media (max-width: 1000px) {
+  .nav__links {
+    display: none;
+  }
+
+  .header__container {
+    grid-template-columns: repeat(1, 1fr);
+    padding: 0 1rem; /* Adjust padding for smaller devices */
+  }
+
+  .header__image {
+     /* Remove minimum height for smaller devices */
+    padding-top: 20px; /* Add padding to center content vertically */
+  }
+
+  .header__image img:nth-child(1) {
+    max-width: 60vw; /* Adjust image size for smaller devices */
+    transform: translate(-90%, -40%); /* Center image horizontally and vertically */
+  }
+
+  .header__image img:nth-child(2) {
+    max-width: 30vw; /* Adjust image size for smaller devices */
+    transform: translate(-30%, -75%); /* Center image vertically */
+  }
+
+  .header__content {/* Adjust padding for smaller devices */
+    padding-top: 0;
+    text-align: center; /* Center align text */
+  }
+
+  .header__content h1 {
+    font-size: 1rem; /* Adjust font size for smaller devices */
+    line-height: 1rem; /* Adjust line height for smaller devices */
+    width: auto; /* Remove fixed width */
+    height: auto; /* Remove fixed height */
+  }
+  .header__content p
+  {
+    padding: 10px;
+    font-size: 1rem;
+  }
+
+  .header__content .action__btns {
+    flex-direction: column; /* Stack buttons vertically */
+    gap: 1rem; /* Add gap between buttons */
+    margin-top: 1rem; /* Adjust top margin */
+  }
+
+  .section__subtitle {
+    font-size: 0.7rem; /* Adjust font size for smaller devices */
+    padding: 0 10px; /* Add vertical padding */
+    text-align: center; /* Center align text */
+    max-width: 30%; /* Limit width to prevent overflow */
+    margin: 0 auto; /* Center the subtitle */
+  }
+}