/* Language Toggle Styles .Header__languageToggle { display: flex; align-items: center; margin-left: 20px; gap: 8px; } .Header__languageBtn { padding: 6px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333; font-size: 14px; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; } */ .custom_tab{ color: black; } .Header__languageBtn:hover { background: #e9e9e9; } /* Active state styling - will need manual class application */ .Header__languageBtn.active { background: #2d5f8b; color: white; border-color: #2d5f8b; } /* Base styles */ :root { --avatar-size-lg: 200px; --avatar-size-md: 160px; --avatar-size-sm: 140px; --font-size-lg: 14px; --font-size-md: 13px; --font-size-sm: 11px; --header-logo-height: 50px; --footer-card-size: 200px; } /* Image container */ .Avatar__square.Avatar__large { width: var(--avatar-size-lg) !important; height: var(--avatar-size-lg) !important; margin: 0 auto 12px auto; display: flex; justify-content: center; align-items: center; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Image itself */ .Avatar__img { width: 100% !important; height: 100% !important; object-fit: contain; transition: transform 0.3s ease; } .Avatar__img:hover { transform: scale(1.05); } /* Container for title and description */ .TitleContainer__container { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 16px; } /* Article title under image */ .TitleContainer__header { display: flex; flex-direction: column; align-items: center; margin-top: 12px; } .TitleContainer__title { font-size: var(--font-size-lg); font-weight: 600; color: #222; line-height: 1.4; text-align: center; } .TitleContainer__description { font-size: var(--font-size-lg); } /* Header section */ .Header__logoimg { display: flex; align-items: center; text-decoration: none; white-space: nowrap; width: auto !important; } .Header__logoimg img.Header__logo { height: var(--header-logo-height); width: auto; display: block; margin-right: 15px; } .Header__logotxt { font-size: 18px; font-weight: 600; color: #000000; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; } /* Footer section */ .Footer { background-color: #003865; color: white; font-family: Arial, sans-serif; padding: 40px 20px; text-align: center; } .logo__card { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; } .logo__card img { height: 25px; } .logo__card p { font-size: 25px; font-weight: 600; margin: 0; } .Footer__topCards { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; } /* Flip Card Styles */ .Footer__card.flip-card { background-color: transparent; width: var(--footer-card-size); height: var(--footer-card-size); perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .Footer__card.flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; box-sizing: border-box; background-color: #003865; color: white; } .flip-card-back { transform: rotateY(180deg); text-align: center; } .Footer__card img { height: 50px; margin-bottom: 10px; } .Footer__card p { font-weight: 600; font-size: 14px; margin: 0; text-align: center; } .flip-card-back p { font-weight: normal; line-height: 1.4; } .Footer__linksSection { display: flex; justify-content: space-around; flex-wrap: wrap; text-align: left; max-width: 1200px; margin: 0 auto 40px; } .Footer__linksSection h4 { font-size: 16px; margin-bottom: 10px; font-weight: bold; } .Footer__linksSection ul { list-style: none; padding: 0; margin: 0; } .Footer__linksSection li { margin-bottom: 6px; font-size: 14px; cursor: pointer; } .Footer__linksSection li a { color: white; text-decoration: none; } .Footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1000px; margin: 0 auto 30px; align-items: center; padding: 0 20px; } .Footer__socials, .Footer__payments { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .Footer__socials p, .Footer__payments p { margin: 0; font-size: 14px; font-weight: 600; color: white; } .social-icons { display: flex; gap: 15px; flex-wrap: wrap; } .social-icons a { color: white; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; transition: all 0.3s ease; } .social-icons a:hover { transform: translateY(-2px); } .payment-methods { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .payment-text { font-weight: bold; color: white; margin-right: 5px; } .payment-methods svg { height: 24px; width: auto; opacity: 0.9; transition: opacity 0.3s ease; } .payment-methods svg:hover { opacity: 1; } .Footer__copyright { font-size: 12px; color: #ccc; width: 100%; text-align: center; } /* Responsive Breakpoints */ @media (max-width: 1200px) { :root { --avatar-size-lg: 180px; --footer-card-size: 180px; } .logo__card p { font-size: 22px; } .Footer__topCards { gap: 30px; } } @media (max-width: 992px) { :root { --avatar-size-lg: 160px; --footer-card-size: 160px; --font-size-lg: 13px; } .logo__card { gap: 20px; margin-bottom: 30px; } .logo__card p { font-size: 20px; } .Footer__linksSection { justify-content: flex-start; gap: 40px; } .Footer__bottom { flex-direction: column; gap: 20px; } } @media (max-width: 768px) { :root { --avatar-size-lg: 140px; --header-logo-height: 40px; --font-size-lg: 12px; --footer-card-size: 140px; } .Header__logotxt { font-size: 16px; } .logo__card { flex-direction: column; gap: 15px; } .logo__card p { font-size: 18px; } .Footer__topCards { gap: 20px; } .Footer__linksSection { flex-direction: column; align-items: center; text-align: center; gap: 20px; } .Footer__linksSection > div { width: 100%; } .Footer__socials, .Footer__payments { justify-content: center; } } @media (max-width: 576px) { :root { --avatar-size-lg: 120px; --font-size-lg: 11px; --footer-card-size: 120px; --header-logo-height: 35px; } .Header__logoimg { flex-direction: column; align-items: center; } .Header__logoimg img.Header__logo { margin-right: 0; margin-bottom: 8px; } .Header__logotxt { font-size: 14px; } .logo__card p { font-size: 16px; } .Footer { padding: 30px 15px; } .Footer__card img { height: 40px; } .Footer__card p { font-size: 12px; } .Footer__linksSection h4 { font-size: 14px; } .Footer__linksSection li { font-size: 12px; } .social-icons a { width: 25px; height: 25px; } .payment-methods svg { height: 20px; } } @media (max-width: 400px) { :root { --avatar-size-lg: 100px; --footer-card-size: 100px; } .Footer__topCards { gap: 15px; } .Footer__card img { height: 30px; } .logo__card img { height: 20px; } .logo__card p { font-size: 14px; } }