:root{
    --primary-color: #5D52D5;
    --primary-color-hover: #3a317d;
    --secondary-color: #c49fff;
    --primary-background: #ffffff;
    --secondary-background:#f2f3fd;
    --custom-pink: #c61dcb;
    --custom-gray: #676767;
    --heroimage: url("../icons/Banner\ 1-01.png");
    --herocolor: #5D52D5;
    --side-padding: 10rem;
    --georgian-font-url: url("https://www.self.hr/assets/fonts/NotoSansGeorgian-Light.ttf");
    --georgian-font-bold-url: url("https://www.self.hr/assets/fonts/NotoSansGeorgian-Bold.ttf");
    --poppins-Bold-url: url("https://www.self.hr/assets/fonts/poppins/Poppins-Bold.ttf");
}

/* Font faces using provided URLs */
@font-face {
    font-family: 'Noto Sans Georgian';
    src: var(--georgian-font-url) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans Georgian';
    src: var(--georgian-font-bold-url) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: var(--poppins-Bold-url) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body{
    margin:0;
    padding:0;
    background-color: #fff;
    font-family: 'Noto Sans Georgian', Helvetica, Arial, sans-serif;
}

/* Language-aware font assignment for all text */
html[lang="ka"], html[lang="ka"] * {
    font-family: 'Noto Sans Georgian', Helvetica, Arial, sans-serif;
}

html[lang="en"], html[lang="en"] * {
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
}

a{ text-decoration: none; }

p, li, span, div , a, h1, h2, h3, h4, h5, h6 {
     text-justify: inter-word;
}

iframe{
    background: #0000 !important;
}

/* overflowtextbox rules are defined earlier and applied inside popup body */

.header {
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);  
    padding-bottom: 2rem;
    padding-top: 2rem;
    height: 48px;
    color: var(--primary-color);
    background-color: var(--primary-background);
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    font-weight: bold;
    text-transform: uppercase;
}

.logo img{
    height: 24px;
    width: auto;
}

#mobileLogo{
    display: none;
}

.navbuttons {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

.navlinks{
    text-decoration: none;
    color: var(--primary-color);
    transition: all;
}


.navlinks:hover{
    color:var(--custom-pink)
}

.navbutt{
    width: 36px;
    height: 36px;
    background-color: #5D52D5;
    border: none;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbutt img{
    width: 16px;
    height: 16px;
}

/* Hamburger button */
.menu-btn{
    background-color: transparent;
    border: none;
    display: none; /* hidden by default; shown under 700px */
}
.menu-btn .hamburger{
    position: relative;
    width: 18px;
    height: 2px;
    background: var(--primary-color);
}
.menu-btn .hamburger::before,
.menu-btn .hamburger::after{
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--primary-color);
}
.menu-btn .hamburger::before{ top: -6px; }
.menu-btn .hamburger::after{ top: 6px; }

/* Mobile nav overlay */
.mobile-nav{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease, visibility 200ms ease;
}
.mobile-nav.open{ visibility: visible; opacity: 1; }
.mobile-nav-panel{
    position: absolute;
    z-index: 4;
    inset: 0;
    background: rgb(190, 205, 246);
    display: flex;
    flex-direction: column;
    padding: 2rem;
}
.mobile-close{
    position: fixed;
    top: 2.2rem;
    right: 2rem;
    font-size: 2rem;
    background: transparent;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5000;
}
.mobile-nav-links{
    text-align: center;
    text-transform: uppercase;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100%;
    gap: 1rem;
}
.mobile-nav-links a{
    color: var(--primary-color);
    font-size: 1.25rem;
}

.hero{
    aspect-ratio: 22 / 9;
    width: 100%;
    background-color: var(--secondary-background);

    display: flex;
    flex-direction: row;
}

.HeroTextSide {
    width: 50%;
    padding: 2rem 0 2rem var(--side-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.HeroTextSide h1 {
    font-size: 2rem;
    color: var(--primary-color);
    margin: 0;
    margin-bottom: 1rem;
}

.HeroTextSide p{
    font-size: 1.25rem;
    line-height: 32px;
    color: var(--custom-gray);
    margin: 0;
}

.HeroImgSide {
    width: 50%;
    display: flex;
}

.HeroImgSide img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* if an <img> is used, cover container */
}

.downlaodbox{
    margin-top: 2rem;
    width: fit-content;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row-reverse;
    gap: 2rem;
}

.downloadbtn {
    background-color: var(--primary-color);
    color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 12px;
}

#DownloadButton:focus .downloadbtn {
    outline-offset: 2px;
}

.downloadbtn img{
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.checkboxbox{
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    gap: 8px;
    color: var(--custom-gray);  
    padding-top: 1rem;
}

.checkboxbox span{
    font-weight: bold;
    cursor: pointer;
}

.checkboxbox span a{
    color: var(--primary-color);
    text-decoration: underline;
}

.checkboxbox input{
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 8px;
    background-color: var(--primary-background);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) inset;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.checkboxbox.error input{
    border-color: #ff0c14;
    box-shadow: 0 0 0 1.5px #ff0c14;
}

.footer {
    background-color: var(--primary-background);
    display: flex;
    flex-direction: column;
}

.footerhead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem var(--side-padding) 0.75rem var(--side-padding);
}

.footercontent{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--side-padding);
}

.footersideforcontacts{
    display: flex;
    flex-direction: column;
}

.footersideforlinks{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


.footer .logo{  
    width: 8rem; 
    height: 1rem; 
    padding-bottom: 2rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    padding-top: 1.5rem;
}

.footernav{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-transform: uppercase;
}

.footernav .footerlinks{
    transition: all;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 80%; /* stabilize initial size */
}
/* Language-aware font for footer links */
html[lang="ka"] .footernav .footerlinks { font-family: 'Noto Sans Georgian', Helvetica, Arial, sans-serif; }
html[lang="en"] .footernav .footerlinks { font-family: 'Poppins', Helvetica, Arial, sans-serif; }

.contactlink{
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(100 100 100);
    text-decoration: none;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 700;
}

.contactlink img{
    width: 16px;
    height: 16px;
}

.soclinks{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.soclinks a{
    display: flex;
    align-items: center;
    justify-content: center;
}

.soclinks img{
    width: 24px;
    height: 24px;
}

.footer p{
    text-justify: inter-word;
    color: #696969;
    font-size: 0.875rem;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

.btn:hover {
    background-color: var(--primary-color-hover);
}

.btn:active {
    background-color: var(--custom-pink);
}

/* Disabled states for pre-acceptance */
.downloadbtn.disabled {
    cursor: not-allowed;
}
@media (max-width:1400px) {
    .header .navlinks{
        font-size:80%;
    }
}

@media (max-width:1300px) {
    .header {
        padding-left: 5rem;
        padding-right: 5rem;  
    }
    .HeroTextSide{
        padding-left: 5rem;
        padding-right: 5rem;  
    }
    .HeroTextSide p{
        line-height: 25px;
    }
}

@media (max-width: 1250px) {
    .HeroTextSide{
        width: 70%;
    }
    .HeroImgSide{
        width: 54%;
    }
    .hero{
        aspect-ratio: 16 / 9;
    }   
}

@media (max-width: 1040px) {
    .navbuttons {
        gap: 1rem;
    }
    /* Footer nav matches header nav responsive behavior */
    .footernav {
        gap: 1rem;
    }
}

/* Responsive footer navigation: reduce gap and font size as screen narrows */
@media (max-width: 1200px) {
    .footernav {
        gap: 1.5rem;
    }
}

@media (max-width: 1100px) {
    .header .navlinks{
        font-size: 75%;
    }
    .footernav {
        font-size: 75%;
    }
}

@media (max-width: 1010px) {
    .header {
        padding-left: 2rem;
        padding-right: 2rem;  
    }
    .hero{
        flex-direction: column-reverse;
        align-items: center;
    }
    .HeroTextSide{
        width: 100%;
        padding: 2rem;
    }
    .HeroImgSide{
        display: block;
        width: 100%;
        height: 100%; /* give a clear height on mobile */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .downlaodbox{
        flex-direction: column;
        gap: 1rem;
    }
    /* Hide nav links and show hamburger menu */
    .navlinks{ display: none; }
    #contactbtn{ display: none; }
    .menu-btn{ display: inline-flex; }
    #LanButton{ display: block !important; z-index: 5001;}
    /* Footer adjustments for tablet/mobile widths */
    .footercontent { padding: 0 2rem; }
    .footerhead{ padding: 0.5rem 2rem 0.75rem 2rem; flex-direction: row; gap: 0.5rem; align-items: center; }
    .footernav{ flex-direction: row; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; }
}

@media (max-width: 880px) {
    .HeroTextSide h1 {
        font-size: 1.5rem;
    }
    .HeroTextSide p{
        font-size: 1rem;
    }
}

@media (max-width:530px) {
    .footercontent{
        flex-direction: column;
        padding: 0 1.25rem; /* consolidate padding override */
        align-items: flex-start;
    }
    .footersideforlinks{
        margin-top: 1rem;
        margin-bottom: 1rem;
        flex-direction: row;
    }
    .footersideforcontacts, .footersideforlinks { align-items: flex-start; }
    .footerhead{ padding: 0.5rem 1.25rem 0.75rem 1.25rem; }
    .footernav {
        gap: 0.75rem;
        flex-direction:column;
    }
}

/* Lity full-screen modal with 5rem top offset and no external close button */
.lity{ 
    padding: 0; 
    background: rgba(0,0,0,0.5) !important;
}
.lity .lity-wrap{
    display: flex !important;
    align-items: flex-start;
    width: 100vw;
    height: 100vh;
}
.lity .lity-container{
    width: 100% !important;
    max-width: none !important;
    height: calc(100vh - 7rem) !important;
    margin: 7rem 0 0 0 !important;
    background: transparent !important;
    overflow: auto !important; /* enable scrolling within the modal */
}
.lity .lity-iframe-container{
    width: 100%;
    height: 100%;
    padding-top: 0 !important;
}
.lity .lity-close:hover{ background: transparent !important; }
.lity .lity-iframe-container iframe{
    width: 100%;
    height: 100%;
}
.lity .lity-content{
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important; /* allow content to scroll to the end */
}
/* Show and reposition the built-in Lity close button */
.lity .lity-close{
    display: inline-flex !important;
    position: fixed !important;
    top: calc(7rem + 0.5rem) !important;
    right: 0.75rem !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--primary-color) !important;
    z-index: 3000 !important;
    cursor: pointer !important;
    font-family: 'Noto Sans Georgian', Helvetica, Arial, sans-serif !important;
}
.lity .lity-close:active,
.lity .lity-close:focus{
    font-family: 'Noto Sans Georgian', Helvetica, Arial, sans-serif !important;
    position: fixed !important;
    top: calc(7rem + 0.5rem) !important;
    right: 0.75rem !important;
}

/* Policy pages mobile layout */
@media (max-width: 700px) {
    .policy-content {
        padding: 1rem;
        margin-top: 0;
    }

    .footerhead{
        flex-direction: column;
        align-items: flex-start;
    }
    .footernav{
        align-self: center;
        gap: 0.75rem;
        align-items: center;
    }
}