@import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');

 :root {
     --background: 217 70% 100%;
     --foreground: 217 66% 4%;
     --muted: 200 42.86% 94.51%;
     --muted-foreground: 37 16.92% 9.87%;
     --popover: 217 70% 100%;
     --popover-foreground: 217 66% 4%;
     --card: 0 0% 99%;
     --card-foreground: 217 66% 3%;
     --border: 217 14% 94%;
     --input: 217 14% 94%;
     --primary: 217 63% 33%;
     --primary-foreground: 217 63% 93%;
     --secondary: 48.92 98.42% 49.61%;
     --sec: #876021;
     --secondary-foreground: 0 0% 0%;
     --accent: 201.51 43.18% 94.59%;
     --accent-foreground: 0 1.79% 6.05%;
     --destructive: 360 90.1% 61.15%;
     --destructive-foreground: 360 100% 95.83%;
     --ring: 217 63% 33%;
     --chart-1: 217 63% 33%;
     --chart-2: 48.92 98.42% 49.61%;
     --chart-3: 144.31 77.33% 29.41%;
     --chart-4: 0 83.19% 53.33%;
     --chart-5: 210.57 87.95% 61.71%;
     --radius: 0.5rem;
     --subheading: hsl(204.83deg 65.91% 34.51%);

     --section-padding: 75px;
     --grid-gap: 1.5rem;

     /* Base Font Sizes (Largest Screens) */
     --fs-1: 4.2rem;
     --fs-2: 3.2rem;
     --fs-3: 2.3rem;
     --fs-4: 1.8rem;
     --fs-5: 1.5rem;
     --fs-6: 1.4rem;
     --fs-7: 1.3rem;
     --fs-8: 1rem;
     --fs-p: 1.125rem;
     /* 18px */

     --radius: 0.5rem;
     --shadow-1: 0 10px 25px rgba(0, 0, 0, 0.07);
     --feature-bg-1: #E6EDFF;
     --feature-color-1: #3F53D8;
     --feature-bg-2: #E5F7FF;
     --feature-color-2: #1BA9F5;
     --feature-bg-3: #EBFBE5;
     --feature-color-3: #38A169;
     --feature-bg-4: #FFF4E5;
     --feature-color-4: #F6AD55;
 }

 @media (max-width: 992px) {
     :root {
         /* Adjusted font sizes for tablets */
         --fs-1: 3.5rem;
         --fs-2: 2.8rem;
         --fs-3: 2.1rem;
         --fs-p: 1.1rem;
     }
 }



 /**
 * for mobile
 */
 @media (max-width: 768px) {
     :root {
         /* Adjusted font sizes for mobile */
         --fs-1: 2.5rem;
         --fs-2: 2rem;
         --fs-3: 1.8rem;
         --fs-4: 1.6rem;
         --fs-p: 1rem;
         /* 16px */
     }
 }

 @font-face {
     font-family: 'reklame-script';
     src: url('../fonts/ReklameScript-Regular_DEMO.otf') format('opentype');
 }

 @font-face {
     font-family: 'Daughter of Fortune';
     src: url('../fonts/Daughter of Fortune.ttf') format('truetype');
 }

 /* Coolvetica Regular */
 @font-face {
     font-family: 'Coolvetica';
     src: url('../fonts/Coolvetica Rg.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
 }

 /* Light */
 @font-face {
     font-family: 'Coolvetica';
     src: url('../fonts/Coolvetica Rg Lt.otf') format('opentype');
     font-weight: 300;
 }

 /* Heavy (900) */
 @font-face {
     font-family: 'Coolvetica';
     src: url('../fonts/Coolvetica Hv Comp.otf') format('opentype');
     font-weight: 900;
 }

 /* Condensed */
 @font-face {
     font-family: 'Coolvetica';
     src: url('../fonts/Coolvetica Rg Cond.otf') format('opentype');
     font-stretch: condensed;
     font-weight: 400;
 }

 /* Cram (Bold-like style) */
 @font-face {
     font-family: 'Coolvetica';
     src: url('../fonts/Coolvetica Rg Cram.otf') format('opentype');
     font-weight: 700;
 }

 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* General Body Styles */
 body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     padding-top: var(--navbar-height);
 }

 :focus-visible {
     outline-offset: 4px;
 }

 ::-webkit-scrollbar {
     width: 10px;
 }

 ::-webkit-scrollbar-track {
     background-color: hsl(0, 0%, 98%);
 }

 ::-webkit-scrollbar-thumb {
     background-color: hsl(0, 0%, 80%);
 }

 ::-webkit-scrollbar-thumb:hover {
     background-color: hsl(0, 0%, 70%);
 }

 ::-webkit-scrollbar {
     width: 10px;
 }

 *::-webkit-scrollbar {
     width: 12px;
 }

 ::-webkit-scrollbar-thumb {
     background-color: hsl(0, 0%, 80%);
 }

 *::-webkit-scrollbar-thumb {
     background-image: linear-gradient(45deg, hsl(var(--primary)), hsl(var(--secondary)));
     border-radius: 10px;
     border: 3px solid #ffffff;
 }

 h1 {
     /* font-family: 'Really Sans Large', sans-serif;  */
     /* font-family: "Caprasimo", serif; */
     /* font-feature-settings: 'case', 'liga', 'ss04'; */
     font-family: "Coolvetica";
     font-weight: 900;
     font-style: normal;
     letter-spacing: normal;
 }

 li {
     list-style: none;
 }

 a {
     color: hsl(var(--primary));
     font-size: var(--fs-8);
     text-decoration: none;
 }

 img {
     width: 100%;
 }

 section {
     padding-block: var(--section-padding);
 }

 .section-title {
     --color: var(--radical-red);
     text-align: center;
 }

 .section-title .span {
     display: inline-block;
     color: var(--color);
 }

 .container {
     width: 85%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
     transition: all 0.3s ease;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .container {
         width: 90%;
         padding: 0 0.75rem;
     }

     .grid-cols-2,
     .grid-cols-4 {
         grid-template-columns: 1fr;
     }

 }

 @media (max-width: 480px) {
     .container {
         width: 100%;
         padding: 0 0.5rem;
     }
 }

 .mt-1 {
     margin-top: 1rem;
 }

 .mb-1 {
     margin-bottom: 1rem;
 }

 .m-1 {
     margin: 1rem;
 }

 .p-1 {
     padding: 1rem;
 }

 .p-md {
     padding: 1.5rem;
 }

 .p-sm {
     padding: 0.5rem;
 }

 .p-2 {
     padding: 2rem;
 }

 .pt-1 {
     padding-top: 1rem;
 }

 .pt-sm {
     padding-top: 0.5rem;
 }

 .pt-2 {
     padding-top: 2rem;
 }

 .pt-4 {
     padding-top: 4rem;
 }

 .pb-1 {
     padding-bottom: 1rem;
 }

 .pl-sm {
     padding-inline-start: 0.5rem;
 }

 .pl-md {
     padding-inline-start: 1rem;
 }

 .pb-sm {
     padding-bottom: 0.5rem;
 }

 .pb-2 {
     padding-bottom: 2rem;
 }

 .txt_cen {
     text-align: center;
 }

 .full_width {
     width: 100%;
 }


 .flx-cen {
     display: flex;
     align-items: center;
 }

 .flx-bet {
     display: flex;
     justify-content: space-between;
 }

 .flx-gap-sm {
     display: flex;
     gap: 0.5rem;
 }

 .flx-bet-cen {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .flx-cen-cen {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .flx-cen-cen-gp {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 2rem;
 }

 .flx-cen-gap-sm {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .flx-cen-gap-1 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
 }

 .flx-end {
     display: flex;
     align-items: end;
 }

 .flx-col-cen {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 .gap-sm {
     gap: 0.5rem;
 }

 .gap-1 {
     gap: 1rem;
 }

 .gap-md {
     gap: 1.5rem;
 }

 .grid_cen {
     display: grid;
     place-items: center;
 }

 /* --- NEW RESPONSIVE GRID CSS --- */
 .grid {
     display: grid;
     gap: var(--grid-gap);
 }

 .grid-cols-2 {
     grid-template-columns: repeat(2, 1fr);
 }

 .grid-cols-4 {
     grid-template-columns: repeat(4, 1fr);
 }

 /* Responsive Grid Adjustments */
 /* For Tablets */
 @media (max-width: 992px) {
     .grid-cols-4 {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .container {
         width: 90%;
         padding: 0 0.75rem;
     }

     .grid-cols-2,
     .grid-cols-4 {
         grid-template-columns: 1fr;
     }

 }

 @media (max-width: 480px) {
     .container {
         width: 100%;
         padding: 0 0.5rem;
     }
 }

 /* ========================================================================
   Button Styles
   ======================================================================== */

 /* Base Button Style */
 .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     white-space: nowrap;
     border-radius: var(--radius);
     font-size: 1rem;
     /* Default font size for .button-md */
     font-weight: 500;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     border: 1px solid transparent;
     user-select: none;
     /* Prevents text selection on click */
 }

 .button:focus {
     outline: 2px solid hsl(var(--ring));
     outline-offset: 2px;
 }

 .button:disabled {
     pointer-events: none;
     opacity: 0.5;
 }


 /* ========================================================================
   Button Variants
   ======================================================================== */

 /* Primary Button */
 .button-primary {
     background-color: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
 }

 .button-primary:hover {
     background-color: hsl(var(--primary) / 0.9);
 }

 /* Secondary Button */
 .button-secondary {
     background-color: hsl(var(--secondary));
     color: hsl(var(--secondary-foreground));
 }

 .button-secondary:hover {
     background-color: hsl(var(--secondary) / 0.8);
 }

 /* third Button */
 .button-tertiary {
     background-color: var(--sec);
     color: hsl(var(--secondary-foreground));
 }

 .button-tertiary:hover {
     background-color: hsl(var(--secondary) / 0.8);
 }

 /* Destructive Button */
 .button-destructive {
     background-color: hsl(var(--destructive));
     color: hsl(var(--destructive-foreground));
 }

 .button-destructive:hover {
     background-color: hsl(var(--destructive) / 0.9);
 }

 .dark .button-destructive:hover {
     background-color: hsl(var(--destructive) / 0.8);
 }


 /* Outline Button */
 .button-outline {
     background-color: transparent;
     color: hsl(var(--primary));
     border: 1px solid hsl(var(--input));
     padding: 0.5rem;
 }

 .button-outline:hover {
     background-color: hsl(var(--accent));
     color: hsl(var(--accent-foreground));
 }


 /* Ghost Button (Subtle) */
 .button-ghost {
     background-color: transparent;
     color: hsl(var(--primary));
 }

 .button-ghost:hover {
     background-color: hsl(var(--accent));
     color: hsl(var(--accent-foreground));
 }


 /* Link Button (Looks like a link, but padded like a button) */
 .button-link {
     background-color: transparent;
     color: hsl(var(--primary));
     text-decoration: underline;
     text-underline-offset: 4px;
 }

 .button-link:hover {
     opacity: 0.8;
 }


 /* ========================================================================
   Button Sizing
   ======================================================================== */

 /* Small (sm) */
 .button-sm {
     height: 2.25rem;
     /* 36px */
     padding: 0 1rem;
     font-size: 0.875rem;
     /* 14px */
 }

 /* Medium (md) - Default */
 .button-md {
     height: 2.5rem;
     /* 40px */
     padding: 0 1.25rem;
     font-size: 1rem;
     /* 16px */
 }

 /* Large (lg) */
 .button-lg {
     height: 2.75rem;
     /* 44px */
     padding: 0 2rem;
     font-size: 1.125rem;
     /* 18px */
 }

 /* Extra Large (xl) */
 .button-xl {
     height: 3rem;
     /* 48px */
     padding: 0 2.5rem;
     font-size: 1.25rem;
     /* 20px */
 }

 /* ========================================================================
   Button with Icon
   ======================================================================== */

 .button-icon {
     margin-right: 0.5rem;
     width: 1.25rem;
     height: 1.25rem;
 }

 /* Adjust icon margin for right-aligned icons */
 .button-icon.right {
     margin-right: 0;
     margin-left: 0.5rem;
 }

 /* Specific icon size adjustments for different button sizes */
 .button-sm .button-icon {
     width: 1rem;
     height: 1rem;
 }

 .button-lg .button-icon {
     width: 1.5rem;
     height: 1.5rem;
 }

 .button-xl .button-icon {
     width: 1.75rem;
     height: 1.75rem;
 }

 /* Icon-only button (adjust padding to be square) */
 .button-icon-only {
     padding: 0;
     width: 2.5rem;
     /* Same as height for .button-md */
 }

 .button-icon-only .button-icon {
     margin: 0;
 }

 /* Sizes for icon-only buttons */
 .button-icon-only.button-sm {
     width: 2.25rem;
 }

 .button-icon-only.button-lg {
     width: 2.75rem;
 }

 .button-icon-only.button-xl {
     width: 3rem;
 }



 /* Navbar Styles */
 .navbar {
     height: var(--navbar-height);
     /* Set the height */

     /* Your fixed position styles */
     position: fixed;
     top: 0;
     left: 0;
     /* Good practice to set both */
     right: 0;
     /* Good practice to set both */
     width: 100%;
     z-index: 1000;
     /* Add a z-index to ensure it's above other content */
 }

 .navbar.active {
     background-color: white;
     box-shadow: var(--border);
 }

 .navbar.active {
     position: fixed;
     animation: slideInTop 0.5s ease forwards;
 }

 @keyframes slideInTop {
     0% {
         transform: translateY(-100%);
     }

     100% {
         transform: translateY(0);
     }
 }



 .dark .navbar {
     background-color: hsl(var(--background));
     border-bottom-color: hsl(var(--border));
 }

 .navbar-container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 1rem;
     display: flex;
     flex-wrap: wrap;
     /* align-items: center; */
     height: 100%;
     padding-inline: 1rem;
     justify-content: space-between;
 }

 .navbar-brand {
     display: flex;
     align-items: center;
     /* background-color: white; */
     gap: 0.75rem;
     text-decoration: none;
     padding: 0.25rem;
     border-radius: 4px;
 }

 .logo {
     height: 2.5rem;
 }

 .brand-name {
     align-self: center;
     font-size: 1.5rem;
     font-weight: 600;
     white-space: nowrap;
     color: hsl(var(--foreground));
     /* Using h1 styles for brand name as it's a prominent heading */
     font-family: 'Really Sans Large', sans-serif;
     font-feature-settings: 'case', 'liga', 'ss04';
     letter-spacing: normal;
 }

 .dark .brand-name {
     color: hsl(var(--foreground));
 }

 /* Mobile Menu Toggle */
 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
 }

 .mobile-menu-toggle {
     display: inline-flex;
     align-items: center;
     padding: 0.5rem;
     width: 2.5rem;
     height: 2.5rem;
     justify-content: center;
     font-size: 0.875rem;
     color: hsl(var(--muted-foreground));
     border-radius: var(--radius);
     background-color: transparent;
     border: none;
     cursor: pointer;
 }

 .mobile-menu-toggle:hover {
     background-color: hsl(var(--muted));
     color: hsl(var(--foreground));
 }

 .mobile-menu-toggle:focus {
     outline: none;
     box-shadow: 0 0 0 2px hsl(var(--ring));
 }

 .dark .mobile-menu-toggle {
     color: hsl(var(--muted-foreground));
 }

 .dark .mobile-menu-toggle:hover {
     background-color: hsl(var(--muted));
     color: hsl(var(--foreground));
 }

 .dark .mobile-menu-toggle:focus {
     box-shadow: 0 0 0 2px hsl(var(--ring));
 }

 .hamburger-icon {
     width: 1.25rem;
     height: 1.25rem;
 }

 /* Navbar Menu */
 .navbar-menu {
     display: none;
     width: 100%;
 }

 .navbar-menu.open {
     display: block;
     background: hsl(var(--primary));
 }

 .nav-list {
     list-style: none;
     padding: 0;
     margin: 1rem 0 0 0;
     display: flex;
     flex-direction: column;
     font-weight: 500;
     border: 1px solid hsl(var(--border));
     border-radius: var(--radius);
     background-color: hsl(var(--primary));
 }

 .dark .nav-list {
     background-color: hsl(var(--card));
     border-color: hsl(var(--border));
 }

 .nav-link {
     display: block;
     padding: 0.5rem 0.75rem;
     text-decoration: none;
     color: aliceblue;
     border-radius: 0.125rem;
     /* Consider using a fraction of --radius if needed */
 }

 .navbar.active .nav-link {
     color: hsl(var(--primary-foreground));
 }

 .dark .nav-link {
     color: hsl(var(--card-foreground));
 }

 .nav-link.active {
     color: hsl(var(--primary-foreground));
     /* background-color: hsl(var(--primary)); */
 }


 .nav-link:hover {
     /* background-color: hsl(var(--accent)); */
     color: hsl(var(--accent-foreground));
 }


 /* Dropdown */
 .dropdown-container {
     position: relative;
 }

 .dropdown-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 0.5rem 0.75rem;
     color: aliceblue;
     border-radius: 0.125rem;
     background: none;
     border: none;
     cursor: pointer;
     font-size: 1rem;
     font-weight: 500;
     font-family: inherit;
     /* Ensure it inherits the body font */
 }


 .dropdown-toggle:hover {
     /* background-color: hsl(var(--accent)); */
     color: aliceblue;
 }

 .navbar.active .dropdown-toggle {
     color: hsl(var(--primary-foreground));
 }

 .dropdown-arrow {
     width: 0.625rem;
     height: 0.625rem;
     margin-left: 0.625rem;
 }

 .dropdown-menu.show {
     display: block;
 }


 .dropdown-item-list {
     padding: 0.5rem 0;
     list-style: none;
     font-size: 0.875rem;
     color: hsl(var(--popover-foreground));
 }


 .dropdown-link {
     display: block;
     padding: 0.5rem 1rem;
     text-decoration: none;
     color: inherit;
 }

 .dropdown-link:hover {
     background-color: hsl(var(--accent));
     color: hsl(var(--accent-foreground));
 }


 .dropdown-divider {
     height: 1px;
     margin: 0.25rem 0;
     background-color: hsl(var(--border));
     border: none;
     /* Replaced border-top */
 }

 .navbar.active .mobile-menu-toggle {
     /* ... existing styles ... */
     color: hsla(var(--foreground));
     /* This makes the hamburger icon white initially */
 }

 .mobile-menu-toggle {
     /* ... existing styles ... */
     color: white;
     /* This makes the hamburger icon white initially */
 }

 .dropdown-menu {
     display: none;
     position: absolute;
     z-index: 10;
     font-weight: 400;
     background-color: hsl(var(--popover));
     border-radius: var(--radius);
     box-shadow: 0 1px 2px 0 hsla(var(--foreground), 0.05);
     width: 24rem;
     list-style: none;
     padding: 0;
     border: 1px solid hsl(var(--border));
     /* width: -webkit-fill-available; */
 }




 /* Medium and larger screens (desktop) */
 @media (min-width: 976px) {
     .mobile-menu-toggle {
         display: none;
     }

     .navbar-menu {
         width: auto;
         display: flex;
         gap: 2rem;
         align-items: center;
     }

     .nav-list {
         flex-direction: row;
         gap: 2rem;
         margin-top: 0;
         border: 0;
         background-color: transparent;
         align-items: center;
     }

     .navbar.active .nav-link {
         color: hsl(var(--primary));
     }

     .navbar-menu.open {
         display: block;
         background: #ffffff;
     }

     .navbar.active .dropdown-toggle {
         color: hsl(var(--primary));
     }

     .dark .nav-list {
         background-color: transparent;
     }

     .nav-link {
         padding: 0;
         background-color: transparent;
     }

     .nav-link.active {
         background-color: transparent;
         color: hsl(var(--primary));
     }

     .dark .nav-link.active {
         color: hsl(var(--primary));
         background-color: transparent;
     }

     .nav-link:hover {
         background-color: transparent;
         color: hsl(var(--primary));
     }

     .dark .nav-link:hover {
         background-color: transparent;
         color: hsl(var(--primary));
     }

     .dropdown-toggle {
         width: auto;
         padding: 0;
         border: 0;
     }

     .dropdown-toggle:hover {
         background-color: transparent;
         color: hsl(var(--primary));
     }

     .dark .dropdown-toggle:hover {
         background-color: transparent;
         color: hsl(var(--primary));
     }

     .dropdown-container:hover .dropdown-menu {
         display: block;
     }

     .dropdown-menu.show {
         display: none;
     }

     .dropdown-container:hover .dropdown-menu.show {
         display: block;
     }

 }




 /* hero */
 #banner {
     min-height: 600px;
     padding: 80px 0;
     position: relative;
     overflow: hidden;
     -webkit-transition: all ease 1s;
     transition: all ease 1s;
 }

 .cover,
 .background-image {
     background-repeat: no-repeat;
     background-position: center center;
     background-attachment: scroll;
     background-size: cover;
 }

 .vc {
     display: table !important;
     width: 100%;
 }




 .hero_wrapper {
     display: flex;
     flex-direction: column;
     display: grid;

     margin-top: 4rem;
     padding-inline: 1rem;
     gap: 2rem;
 }

 .hero_rSec img {
     max-width: 100%;
     /* Ensures the image scales down within its container */
     height: auto;
     /* Maintains aspect ratio */
     display: block;
     /* Removes extra space below image if it's inline */
 }

 .hero_lSec {
     margin-block-start: 2rem;
 }

 #banner h2,
 #banner h1 {
     animation-name: bannh1;
     animation-duration: 1.4s;
     -webkit-transition: all ease-in 1.4s;
     animation-fill-mode: backwards;
     animation-delay: 0.6s;
 }

 #banner h2 span.hand {
     background: linear-gradient(110deg, #802a3b 0%, #d4a418 93% 39%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: #fff0;
     font-size: 1.25em;
     letter-spacing: 1.5px;
     font-family: reklame-script;
     font-family: Daughter of Fortune;
 }

 /* .pre{
    padding-inline-start: 2rem;
} */
 .hero_rSec {
     max-width: 500px;
 }

 .subtitle {
     padding-block-start: 1rem;
     color: hsl(204.83deg 42.82% 92.88%);
     font-size: 1rem;
     line-height: 1.5;
     font-weight: 500;
 }

 .sec_bedge {
     color: var(--subheading);
     font-size: 1.25rem;
     line-height: 1.5;
     font-weight: 500;
 }

 .sec_title {
     margin-top: 1.5rem;
     font-size: var(--fs-3);
     font-weight: bold;
 }

 @media (max-width:976px) {
     #banner {
         min-height: calc(100vh - var(--navbar-height));
         padding: 80px 0;
         position: relative;
         overflow: hidden;
         display: flex;
         align-items: center;
     }

     #banner:before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: 1;
         background: linear-gradient(318deg, hsl(217.96deg 51.32% 44.78%), hsl(217deg 45.02% 47.82%), hsl(217deg 100% 98.17%));
         background-size: 100% 100%;
         z-index: -1;
         mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
         -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
     }

     .dropdown-menu {
         width: -webkit-fill-available !important;
         width: 100%;
     }
 }

 @media (min-width: 976px) {
     #banner:before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: 1;
         /* background: linear-gradient(-45deg, hsl(201.51, 43.18%, 94.59%), hsl(217deg 45.02% 47.82%), hsl(217deg 91.95% 38.86%)); */
         background: linear-gradient(-45deg, hsl(200, 47.2%, 38.6%), hsl(217deg 45.02% 47.82%), hsl(218.2, 58.6%, 33.1%));
         background: linear-gradient(-45deg, #0d3756, hsl(217deg 45.02% 47.82%), hsl(218.2deg 72.93% 95.35%));
         background-size: 100% 100% !important;
         z-index: -1;

     }

     #banner:after {
         content: '';
         position: absolute;
         bottom: -5px;
         left: 0;
         width: 130%;
         height: 110%;
         clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
         opacity: 1;
         background: #fff;
         -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
         z-index: 2;
         animation-name: rise;
         animation-duration: 3s;
         -webkit-transition: all ease-out 2s;
         transition: all ease-out 2s;
         animation-fill-mode: backwards;
         animation-delay: 0.6s;
         z-index: -1;
     }

     .hero_wrapper {
         grid-template-columns: repeat(2, 1fr);
         /* flex-direction: row; */
         margin-top: 8rem;
         padding-inline: unset;
     }

     .hero_rSec {
         /* Apply justify-self to the right section div */
         justify-self: end;
     }

     h1 {
         font-size: 5em;
         line-height: 1;
         color: #0D3756;
         background: #C83A8C;
         /* background: linear-gradient(90deg, #0D3756 0%, #3498db 100%); */
         background: linear-gradient(90deg, #274c8c 0%, #0b5a8f 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: #fff0;
         padding-bottom: 8px;
     }

     .subtitle {
         color: var(--subheading);
         font-size: 1.25rem;
         line-height: 1.5;
     }
 }


 /*  */

 .feature_wrapper {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 1rem;
     padding: 2rem;
 }

 .feature_card {
     background: white;
     border-radius: var(--radius);
     box-shadow: var(--shadow-1);
     padding: 2rem 1.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     transition: transform 0.3s ease;
 }

 .feature_card:hover {
     transform: translateY(-5px);
 }

 .feature_icon {
     width: 80px;
     height: 80px;
     border-radius: 20px;
     display: grid;
     place-items: center;
     margin-bottom: 1.25rem;
 }

 .feature_card h3 {
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
 }

 .feature_card p {
     font-size: 0.95rem;
     color: #555;
     line-height: 1.5;
 }

 .skills_box {
     border: 1px solid hsl(var(--border));
     padding: 2rem;
     border-radius: 12px;
     margin-block: 2rem;
     filter: drop-shadow(2px 4px 6px #e6edff);
     background: #fff;

 }

 .skills_box ul li {
     font-size: var(--fs-7);
     line-height: 1.75;
     border-bottom: 0.5px solid hsl(var(--border));
     position: relative;
     padding-inline-start: 1.25rem;
     text-align: left;
 }

 .skills_box ul li::before {
     content: "✓";
     position: absolute;
     left: 0;
     color: hsl(var(--primary));
 }

 .skill {
     background-image: url("../images/pat-3.png");
     background-position: center;
     background-repeat: repeat;
     /* For seamless tiling */
     /* OR */
     background-size: cover;
     /* Stretch to fill (may crop) */
 }



 /* ABOUT SECTION */
 /* section {
  padding: 4rem 0;
} */
 .home_abt {
     background: #e9e3c742;
 }

 .sec_bedge {
     display: inline-block;
     font-size: var(--fs-7);
     font-weight: 600;
     color: hsl(var(--primary));
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 1rem;
 }

 .sec_title {
     font-size: var(--fs-2);
     color: hsl(var(--foreground));
     margin-bottom: 2rem;
     line-height: 1.3;
 }

 .home_about_wrapper {
     display: grid;
     grid-template-columns: 300px 1fr 300px;
     gap: 2rem;
     align-items: center;
 }

 .home_about_img {
     border: 1px solid hsl(var(--border));
     width: 100%;
     height: 400px;
     border-radius: 200px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .home_about_img img {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     object-fit: cover;
     padding: 10px;
     border-radius: 200px;
 }

 .m_home_about p {
     font-size: 1rem;
     line-height: 1.8;
     color: hsl(var(--foreground));
     text-align: center;
 }

 /* Responsive Adjustments */
 @media (max-width: 1200px) {
     .home_about_wrapper {
         grid-template-columns: 250px 1fr 250px;
     }

     .home_about_img {
         height: 350px;
     }
 }

 @media (max-width: 992px) {
     .home_about_wrapper {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .home_about_img {
         height: 400px;
         max-width: 400px;
         margin: 0 auto;
     }

     .l_home_about,
     .r_home_about {
         order: -1;
     }

     .m_home_about {
         order: 1;
     }
 }

 @media (max-width: 768px) {
     section {
         padding: 3rem 0;
     }

     .sec_title {
         font-size: var(--fs-3);
     }

     .home_about_img {
         height: 300px;
     }
 }

 @media (max-width: 480px) {
     .home_about_img {
         height: 250px;
         border-radius: 150px;
     }

     .home_about_img img {
         border-radius: 150px;
     }

     .sec_bedge {
         font-size: var(--fs-8);
     }
 }


 /* slider */
 .scroller_wrapper {
     padding-block: 4rem;
 }

 .scroller {
     max-width: 100%;
 }

 .scroller__inner {
     padding-block: 1rem;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
 }

 .scroller[data-animated="true"] {
     overflow: hidden;
     overflow: hidden;
     --mask-color-start: hsl(193, 9%, 5%);
     --mask-color-end: hsl(170, 5%, 7%);
     -webkit-mask: linear-gradient(90deg, transparent, var(--mask-color-start) 12% 12%, var(--mask-color-end) 98%, transparent);
     mask: linear-gradient(90deg, transparent, var(--mask-color-start) 12%, var(--mask-color-end) 98%, transparent);
 }

 .scroller[data-animated="true"] .scroller__inner {
     width: max-content;
     flex-wrap: nowrap;
     animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
 }

 .scroller[data-direction="right"] {
     --_animation-direction: reverse;
 }

 .scroller[data-direction="left"] {
     --_animation-direction: forwards;
 }

 .scroller[data-speed="fast"] {
     --_animation-duration: 20s;
 }

 .scroller[data-speed="slow"] {
     --_animation-duration: 60s;
 }

 .ab_bx {
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
     background: #009ccd;
     background: var(--add);
     padding: 1rem;
 }

 .ab_bx h6 {
     color: var(--secondary);
     font-weight: 600;
     letter-spacing: 1.2px;
 }

 @keyframes scroll {
     to {
         transform: translate(calc(-50% - 0.5rem));
     }
 }


 .slide .sc_v_box img {
     width: 100%;
     height: -webkit-fill-available;
 }


 .sc_v_box {
     background-color: #ffffff;
     padding: 4px;
     width: 160px;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
     border: 1px solid #b9b9b9;
     height: 70px;
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     border-radius: 4px;
 }

 .sc_v_box a {
     display: block;
 }

 .sc_v_box img {
     width: 100%;
     color: transparent;
     height: 6vh;
     object-fit: contain;
     transition: 0.2s;
 }

 .sc_v_box img:hover {
     transform: scale(1.1);
 }




 .facilities-section {
     max-width: 1200px;
     margin: 50px auto;
     padding: 0 20px;
 }

 .section-header {
     text-align: center;
     margin-bottom: 50px;
 }

 .section-header h2 {
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
 }

 .section-header h2::after {
     content: '';
     position: absolute;
     width: 70px;
     height: 4px;
     background: var(--secondary);
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 2px;
 }

 .section-header p {
     color: #666;
     font-size: 1.1rem;
     max-width: 700px;
     margin: 0 auto;
 }

 .facilities-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .facility-card {
     background: white;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     position: relative;
 }

 /* .facility-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        } */

 .card-image {
     height: 200px;
     overflow: hidden;
 }

 .card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .facility-card:hover .card-image img {
     transform: scale(1.07);
 }

 .card-content {
     padding: 25px;
 }

 .card-content h3 {
     font-size: 1.5rem;
     margin-bottom: 10px;
     color: var(--primary);
 }

 .card-content p {
     color: #666;
     margin-bottom: 15px;
 }

 .read-more {
     display: inline-block;
     color: var(--secondary);
     font-weight: 600;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .read-more:hover {
     color: var(--accent);
 }

 .read-more::after {
     content: '→';
     margin-left: 5px;
     transition: margin-left 0.3s ease;
 }

 .read-more:hover::after {
     margin-left: 10px;
 }

 .facility-icon {
     position: absolute;
     top: -25px;
     right: 25px;
     width: 60px;
     height: 60px;
     background: var(--secondary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
 }

 @media (max-width: 768px) {
     .facilities-grid {
         grid-template-columns: 1fr;
     }

     .section-header h2 {
         font-size: 2rem;
     }
 }


 .inner_banner {
     background: linear-gradient(347deg, #305590, #d0d7e3);
     background: linear-gradient(331deg, #0d3756, hsl(217deg 45.02% 47.82%), hsl(203deg 72.93% 95.35%));
     padding-block-start: 5rem;
    padding-block-end: 4rem;
 }




 /* FOOTER */
 .footer_top {
     position: relative;
 }

 .footer_top_content {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     right: 0;
     top: -7%;
     /* Equivalent to -top-[15%] */
     padding-left: 1.25rem;
     /* Equivalent to px-5 (5 * 0.25rem = 1.25rem) */
     padding-right: 1.25rem;
     /* Equivalent to px-5 */
 }

 @media (min-width: 768px) {

     /* md breakpoint */
     .footer_top_content {
         top: -2.5rem;
         /* Equivalent to md:-top-28 (28 * 0.25rem = 7rem) */
     }
 }

 .footer_top_wrapper {
     /* Flexbox properties */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: rgba(255, 255, 255, 0.8);

     /* Spacing */
     gap: 0.625rem;
     /* Equivalent to gap-2.5 (2.5 * 0.25rem = 0.625rem) */
     padding-left: 2rem;
     /* Equivalent to px-8 */
     padding-right: 2rem;
     /* Equivalent to px-8 */
     padding-top: 2.75rem;
     /* Equivalent to py-11 (11 * 0.25rem = 2.75rem) */
     padding-bottom: 2.75rem;
     /* Equivalent to py-11 */

     /* Sizing */
     max-width: 26.875rem;
     /* Equivalent to max-w-[430px] (430px / 16px = 26.875rem) */

     /* Background and border */
     border-radius: 2.75rem;
     /* Equivalent to rounded-[44px] (44px / 16px = 2.75rem) */
     background-color: rgba(255, 255, 255, 0.8);
     /* Equivalent to bg-white bg-opacity-80 */
     backdrop-filter: blur(0.625rem);
     /* Equivalent to backdrop-blur-[10px] (10px / 16px = 0.625rem) */

     /* Responsive styles for md breakpoint */
 }

 .footer_bottom {
     border-top: 0.5px solid hsl(var(--border));
     display: flex;
     width: 100%;
     justify-content: center;
     padding-block: 1rem;
 }

 @media (min-width: 768px) {

     /* md breakpoint typically at 768px */
     .footer_top_wrapper {
         max-width: 76.5rem;
         /* Equivalent to md:max-w-[1224px] (1224px / 16px = 76.5rem) */
         border-radius: 6.25rem;
         /* Equivalent to md:rounded-[100px] (100px / 16px = 6.25rem) */
         padding-left: 4rem;
         /* Equivalent to md:px-16 */
         padding-right: 4rem;
         /* Equivalent to md:px-16 */
         padding-top: 1.5rem;
         /* Equivalent to md:py-10 */
         padding-bottom: 1.5rem;
         /* Equivalent to md:py-10 */
     }
 }

 @media (min-width: 1024px) {

     /* lg breakpoint typically at 1024px */
     .footer_top_wrapper {
         padding-left: 5.3125rem;
         /* Equivalent to lg:px-[85px] (85px / 16px = 5.3125rem) */
         padding-right: 5.3125rem;
         /* Equivalent to lg:px-[85px] */
         flex-direction: row;
     }
 }

 .footer {
     /* background: hsl(var(--secondary)); */
     /* background: hsl(var(--primary) / 0.9); */
     background: #d4a418;
     color: hsl(var(--primary));
     padding-top: 150px;
 }

 .footer_wrapper {
     display: grid;
     /* Default for larger screens: 4 columns */
     grid-template-columns: 1.5fr 0.7fr 1.7fr 1.5fr;
     gap: 20px;
     padding-block-end: 2rem;
 }

 /* Medium screens (e.g., tablets) */
 @media (max-width: 1068px) {
     .footer_wrapper {
         /* For tablets, maybe two columns */
         grid-template-columns: 1fr 1fr;
     }
 }

 /* Small screens (e.g., mobile phones) */
 @media (max-width: 680px) {
     .footer_wrapper {
         /* For mobile, stack columns into a single column */
         grid-template-columns: 1fr;
     }
 }

 .footer_logo {
     max-width: 220px;
 }

 .footer ul li a {
     color: hsl(var(--primary));
     line-height: 1.75;
 }

 .footer a {
     color: hsl(var(--primary));
 }

 .footer ul li a:hover {
     color: hsl(var(--muted));
 }

 .footer h3 {
     margin-block-end: 1.25rem;
 }

 .footer svg {
     fill: hsl(var(--primary))
 }







 /* ------------------ */
 .about-section {
     padding: 4rem 8rem;
 }

 .about-section h3 {
     color: #234785;
     font-weight: 900;
     text-decoration: underline;
 }

 .about {
     display: flex;
     gap: 5rem;
 }

 .about .left {
     width: 50%;
     margin: auto 0;
 }

 .about .left p {
     font-size: 1.3rem;
     word-spacing: 0.2rem;
 }

 .about .right {
     width: 50%;
     height: 50vh;
 }

 .about .right img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     box-shadow: 0px 0px 10px #285283;
     border-radius: 4%;
 }

 .about-main-text {
     background: #e9e3c742;
     width: 100%;
     text-align: center;
     padding: 2rem;
     width: 80%;
     margin: 8rem auto;
     font-size: 0.9rem;
 }





 .mission {
     display: flex;
     gap: 5rem;
 }

 .mission .right {
     width: 60%;
     margin: auto 0;
 }

 .mission .right p {
     font-size: 1.3rem;
     word-spacing: 0.2rem;
 }

 .mission .left {
     width: fit-content;
     height: 50vh;
 }

 .mission .left img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 35px;
     box-shadow: 0px 0px 20px #285283;
 }


 /* swe */
 .swe h4 {
     font-size: 2rem;
     font-weight: 600;
     margin: 6px 0 2rem 0;
 }



 /* facility */
 .facility {
     padding: 2rem 8rem;
     margin-bottom: 8rem;
 }

 .facility .facility-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 5rem;
 }

 .facility .facility-cards .card {
     height: 100%;
 }

 .facility .facility-cards .card h3 {
     color: #234785;
     cursor: pointer;

 }

 .facility .facility-cards .card h3:hover {
     color: #5375b1;
 }

 .facility .facility-cards .card img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     box-shadow: 0px 0px 5px #234785;
     border-radius: 10px;
 }

 .facility .facility-cards .card img:hover {
     transform: scale(1.05);
     transition: 0.5s;
 }


 .contact-section {
     padding: 2rem 15rem;
     display: flex;
     justify-content: space-between;
     margin-bottom: 6rem;
     overflow: hidden;
     border-radius: 30px;
background: #efefff;
 }

 .contact-section .left {
     width: 40%;
 }

 .contact-section .left h2 {
     font-size: 2.5rem;
     width: 100%;
     margin-bottom: 1.8rem;
 }

 .contact-section .left span {
     color: #4d6268;
     font-weight: 600;
 }

 .contact-section .left .contact-details {
     display: flex;
     flex-direction: column;
     row-gap: 1.3rem
 }


 .contact-section .right {
     background-color: #234785;
     width: 50%;
     padding: 10px 20px;
     border-radius: 14px;
     color: white;
 }


 .contact-section .right h2 {
     font-size: 2rem;
 }

 .contact-section form div {
     display: flex;
     gap: 1rem;
     flex-direction: column;
     margin-top: 1rem;
 }

 .contact-section form div input {
     width: 50%;
     padding: 10px 0px;
     background-color: transparent;
     border-bottom: 1px solid rgb(142, 149, 88);
     border-top: none;
     border-right: none;
     border-left: none;
     outline: none;
     color: white;
     font-size: 1rem;

 }

 .contact-section form div input::placeholder {
     color: rgb(239, 225, 225);
     font-size: 1rem;
 }

 .contact-section form textarea {
     width: 100%;
     height: 100%;
     margin-top: 1rem;
     padding: 10px 0px;
     background-color: transparent;
     border-bottom: 1px solid rgb(142, 149, 88);
     border-top: none;
     border-right: none;
     border-left: none;
     outline: none;
     font-size: 1rem;
     color: white;
 }

 .contact-section form textarea::placeholder {
     color: rgb(239, 225, 225);
     font-size: 1rem;
 }

 .contact-section form button {
     width: 100%;
     padding: 10px 0;
     margin-top: 1.5rem;
     border-radius: 6px;
     border: none;
     outline: none;
     font-size: 1.1rem;
     background-color: #FBCB07;
     font-weight: 600;

 }


 /* ---------------- */
 .collaboration {
     display: flex;
     padding: 4rem 8rem;
     gap: 5rem;

 }

 .collaboration h2 {
     color: #234785;
     font-weight: 600;
     font-size: 2.2rem;
 }


 .collaboration .left {
     width: 50%;
 }

 .collaboration .left div {
     background-color: #fbcd029f;
     padding: 30px 40px;
     border-radius: 20px;
     margin-top: 20px;

 }

 .collaboration .left p {
     font-size: 1.3rem;
 }

 .collaboration .right {
     width: 50%;
     height: 50vh;
     border-radius: 20px;
 }

 .collaboration .right img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .collaboration .left div button {
     margin-top: 20px;
 }
  .about .left ul{
    margin-top: 20px;
    margin-bottom: 40px;
  }
 .about .left ul li{
    list-style:disc;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 30px;

 }
 .about .left .keybenefitsPoint{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap:2rem ;
    row-gap:1rem ;
 }
 .about .left .keybenefitsPoint li{
    list-style: none;
    background-color: rgba(73, 73, 108, 0.934);
    color: white;
    margin-left: 0;
    margin-bottom: 0;
    padding: 10px 16px;
    border-radius: 14px;
 }
 /* ------------------- */




 /* --------- */

 @media (min-width:320px) {
     .contact-section {
         padding: 10px 20px;
         display: block;
         margin-top: 2rem;
     }

     .contact-section .left {
         width: 100%;
     }

     .contact-section .left h2 {
         font-size: 2rem;
         margin-bottom: 2rem;
     }

     .contact-section .right {
         width: 100%;
         margin-top: 2rem;
     }

     .contact-section form div {

         display: block;
     }

     .contact-section form div input {
         width: 100%;
     }

     .footer_top_content {
         left: 0;
         transform: translateX(0%);
     }

     .footer_top_wrapper {
         width: 100%;
         padding: 2rem 0;
     }

     .collaboration {
         padding: 20px 10px;
         gap: 0;
         display: block;
         width: 100%;
     }

     .collaboration h2 {
         font-size: 2rem;

     }

     .collaboration .left {
         width: 100%;
     }

     .collaboration .left div {
         padding: 20px 20px;
     }

     .collaboration .right {
         width: 100%;
     }

     .about-section {
         padding: 2rem 1rem;
     }

     .mission {
         display: block;
         margin-top: 2rem;
     }

     .about {
         flex-direction: column-reverse;
         gap: 1rem;
         margin-top: 3rem;
     }

     .facility {
         padding: 2rem 1rem
     }

     .facility .facility-cards {
         grid-template-columns: repeat(1, 1fr);
         gap: 5rem;
     }

     .swe h4 {
         font-size: 1.5rem;
     }

     .mission .right p,
     .about .left p {
         font-size: 0.8rem;
     }

     .mission .right {
         width: 100%;
         margin-top: 20px;
     }

     .about .right {
         width: 100%;
         margin: 0 !important;
     }

     .about .left {
         width: 100%;
     }
 }

 @media (min-width:640px) {
      .contact-section {
         padding: 0px 20px;
     }
     .footer_top_content {
         left: 50%;
         transform: translateX(-50%);
     }

     .collaboration .right {
         margin-top: 40px;
     }

     .mission {
         display: flex;
         gap: 2rem;
     }

     .mission .right p,
     .about .left p {

         font-size: 0.9rem;
     }

     .mission .left {
         height: 37vh;
     }

     .about {
         flex-direction: row;
         gap: 2rem;
         margin-top: 3rem;
     }

     .about .right {
         height: 30vh;
     }

     .facility .facility-cards {
         grid-template-columns: repeat(2, 1fr);
         row-gap: 4rem;
         column-gap: 2rem;
     }
 }

 @media (min-width:768px) {
     .mission .left {
         height: 50vh;
     }

     .mission .right p,
     .about .left p {
         font-size: 1.13rem;
     }

     .mission .right {
         margin: auto;
     }

     .about .right {
         height: 50vh;
     }
 }

 @media (min-width: 1024px) {
     .contact-section {
         padding: 2rem 5rem;
         display: flex;
         justify-content: space-between;
         margin-bottom: 6rem;
         align-items: center;
     }

     .collaboration {
         display: flex;
         gap: 5rem;
         /* padding: 4rem 8rem; */
     }

     .collaboration h2 {
         font-size: 2.2rem;
     }

     .mission {
         margin-top: 1rem;
     }

     .mission {
         gap: 5rem;
     }
     .about-section {
    padding: 4rem 8rem;
}
.facility .facility-cards{
    grid-template-columns: repeat(5, 1fr);
}
.facility {
    padding: 2rem 8rem;
}
.contact-section .left h2{
    margin-bottom: 3rem;
}

 }

 @media (min-width: 1280px) {
     .contact-section .left {
         width: 40%;
     }

     .contact-section .left .contact-details {
         display: flex;
         flex-direction: column;
         row-gap: 1.3rem
     }

     .contact-section .right {
         width: 50%;
         padding: 10px 20px;
         margin-top: 0;
     }

     .contact-section .right h2 {
         font-size: 2rem;
     }

     .contact-section form div {
         display: flex;
         gap: 1rem;
         margin-top: 1rem;
     }

     .collaboration {
         padding: 4rem 8rem;
     }

     .collaboration h2 {
         font-size: 1.8rem;
     }

     .collaboration .left div {
         padding: 30px 40px;

     }

     .mission .right {
    width: 60%;
    margin: auto 0;
}
.about .left {
    width: 50%;

}
.about .right {
    width: 50%;
    height: 50vh;
}
 }

 @media (min-width: 1440px) {

     .contact-section {
         /* padding: 2rem 15rem; */
         display: flex;
         justify-content: space-between;
         /* margin-bottom: 6rem; */
         overflow: hidden;


         /* margin: 2rem 15rem; */
         margin: 2rem 15rem 5rem 15rem;
         padding: 2rem 2rem;
         background: #efefff;
     }

     .collaboration h2 {
         font-size: 2.2rem;
     }

     .collaboration .left div {
         padding: 30px 40px;
         margin-top: 20px;

     }
     .mission .right p, .about .left p{
        font-size: 1.3rem;
     font-weight: 300;
     }
         .about {
        flex-direction: row;
        gap: 5rem;
        margin: 3rem 0;
    }

 }

 @media (min-width: 1990px) {

     .contact-section {
         padding: 2rem 30rem;
     }
         .mission .right p, .about .left p {
        font-size: 2.6rem;
    }
        .facility .facility-cards {
        grid-template-columns: repeat(5, 1fr);
    }
    .swe h4 {
        font-size: 3.5rem;
    }
    .about-section h3{
        font-size: 2rem;
    }
 }

 @media (min-width: 2500px) {

     .contact-section {
         padding: 2rem 50rem;
     }
 }