/* =========================
   styles.css — full file
   (paste / replace your current file)
   ========================= */

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

body{
    min-height: 100vh;
    line-height: 1.5;
    background-color: #fcf1cd;
    font-family: Helvetica, Arial, sans-serif;
}

/* Loader */
.loader-wrapper {
    display: grid;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    grid-template-columns: 1fr 5fr 1fr;
    background-color: #fcf1cd;
    justify-content: center;
    align-content: center;
    z-index: 2;
}

.loader-wrapper img {
    max-width: 100%;
    height: 100%;
    margin: auto;
    grid-column: 2/3;
}

/* Content wrapper */
.content-wrapper {
    position: relative;
    z-index: 1;
}

/* Navigation */
nav{
    border-bottom: 2px solid black;
}

nav ul{
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav li{
    height: 70px;
    position: relative;
}

nav a{
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    min-width: 0;
    color: black;
}

nav a:hover{
    background-color: #c0b799;
}

nav a img{
    width: 8vw;
}

nav li:first-child{
    margin-right: auto;
}

/* Sidebar (mobile drawer) */
.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 999;
    background-color: rgba(227, 223, 240, 0.571);
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px rgba(0,0, 0, 0.1);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.sidebar li{
    width: 100%;
}

.sidebar a{
    width: 100%;
}

.sidebar a:hover{
    background-color:#aba8b5 ;
}

.menu-button{
    display: none;
}

/* Dropdown */
.dropdown li{
    display: block;
}

.dropdown {
    width: max-content;
    min-width: 100%;
    max-width: calc(100vw - 20px);
    right: 0;
    left: auto;
    position: absolute;
    z-index: 999;
    display: none;
}

html[dir="rtl"] .dropdown {
    right: auto;
    left: 0;
}

ul li:hover ul.dropdown {
    display: block;
}

/* ----------------------------------------------- Content & banner (flex approach) ----------------------------------------------------------- */

.content {
  display: flex;
  flex-direction: column;

}

.outside {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.banner-container {
    display: flex;
    justify-content: flex-end; 
    align-items: flex-end;     
    width: 100%;
    padding-bottom: 0;         
    box-sizing: border-box;
    padding-bottom:5vh;}


.banner {
    display: block;
    width: 40%;            
    height: auto;
    background: #fff;
    padding-right: 0;
  
}

/* ----------------------------------------------- Logo / hero internal layout ----------------------------------------------------------- */

.logo_int{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}

.anim {
    display: grid;
    grid-column: 2/3;
    grid-template-columns: repeat(4,1fr);
    margin-top: 20vh;
}

/* Animal images */
.anim .chicken{
    height: 19vh;
    position: relative;
    right: 1vw;
    top: -0.5vh;
    transition: 1s; 
    z-index: 10;
}
.anim .chicken:hover { transform: rotate(-23deg); }

.anim .cow{
    height: 17vh;
    position: relative;
    right: -1vw;
    transition: 1s;
    z-index: 10;
}
.anim .cow:hover { transform: rotate(-23deg); right: 0.6vw; }

.anim .lamb{
    height: 19vh;
    position: relative;
    top: -1vh;
    left: 3.7vw;
    transition: 1s; 
    z-index: 10;
}
.anim .lamb:hover { transform: rotate(23deg); top: -5vh; left: 3.6vw; }

.anim .pig{
    height: 19vh;
    position: relative;
    left: 4.5vw;
    top: 3vh;
    transition: 1s; 
    z-index: 10;
}
.anim .pig:hover { transform: rotate(23deg); top: -2vh; left: 4.5vw; }

/* Logo title */
.logo_int .logo_title {
    grid-row: 2;
    grid-column: 2/3;
    margin: auto;
}

.logo_title { z-index: 998; }

.logo_title .avakx {
    width: 45vw;
    margin: auto;
    margin-bottom: 20vh;
}

/* -----------------------------------------------Products / other sections ----------------------------------------------------------- */

.products { width: 100%; }

.row_products { display: grid; }

.product_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 10vh;
}

.categ{
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 5vh;
    place-items: center center;
}

.beef { margin-top: 6vh; }

.categ img { width: 15vw; }
.categ .pork { width: 30vw; }
.categ .chick { width: 13vw; }

.info {
    display: grid;
    place-items: center center;
    padding: 3vh;
}

.info p { text-align: center; }

.info button {
    width: 8vw;
    height: 5vh;
    border: none;
    background-color: #fcf1cd;
    transition: 2s;
    margin-top: 2vh;
}

.info button a {
    text-decoration: none;
    color: #d01c25;
    font-size: 1.2rem;
    text-align: center;
}

.info button:hover a { color: white; }
.info button:hover { background-color: #d01c25; }

.prod-col h2 {
   font-size: 8rem;
   line-height: 1;
   text-align: center;
   padding: 5vh 5vh 0 5vh;
}

.prod-col .halal-badge {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #d01c25;
   margin: 5vh 0 0 0;
   padding: 0 0 5vh 0;
}

.prod-col p {
   font-size: 1rem;
   text-align: right;
   padding: 12vh;
}

/* ----------------------------------------------- Animals list ----------------------------------------------------------- */

.animal_img { display: flex; }
.animal_img img { width: 90%; margin: auto; }

.h3 h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 3rem;
    margin-left: 4.5vw;
}

.list {
    display: grid;
    grid-template-columns: repeat(2, 3fr);
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2vh;
}

.list1 ul li, .list2 ul li {
    margin-top: 2vh;
    background-color: #d01c25;
    padding: 2vh;
    color: white;
    border-radius: 10px;
    list-style: none;
    width: 70%;
}

/* ----------------------------------------------- About ----------------------------------------------------------- */

.about { width: 100%; }

.row_about {
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(2,3fr);
}

.about-col { display: grid; }

.about-col h2 {
   font-size: 8rem;
   margin-left: 5vw;
}

.about-col img {
   width: 50vw;
   margin-top: -35vh;
}

.about-col p {
   font-size: 1rem;
   text-align: right;
   padding: 12vh;
}

.story { display: grid; width: 100%; }
.story h3 { font-size: 4rem; text-align: center; }
.story img { margin: auto; width: 80%; }

/* =====================================================
   Financial Statements — isolated styles
   ===================================================== */

/* main wrapper */
.financials{
  max-width: 1400px;
  margin: auto;
  padding: 0 6vw 15vh;
}

/* internal layout */
.financials-row{
  display: grid;
  grid-template-columns: 1fr;
}

/* page title */
.financials-title h2{
  font-size: 7rem;
  text-align: center;
  padding: 5vh 0;
}

/* grid list */
.financials-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6vw;
  row-gap: 8vh;
}

/* each year block */
.fin-year{
  display: grid;
  place-items: center;
  width: 100%;
}

/* year content */
.fin-info{
  text-align: left;
}

/* year title */
.fin-info h3{
  font-size: 1.17rem;
  margin-bottom: 1.5vh;
}

/* -----------------------------------------------------
   Buttons row + divider BETWEEN buttons
   ----------------------------------------------------- */

.fin-info p{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;

  /* hide the actual | character */
  font-size: 0;
}

/* pill buttons */
.fin-info p a{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #d01c25;
  border-radius: 10px;
  text-decoration: none;
  color: #d01c25;
  font-weight: 600;
  transition: all 0.25s ease;
  white-space: nowrap;
  font-size: 1rem;
}

/* hover */
.fin-info p a:hover{
  background-color: #d01c25;
  border-color: #d01c25;
  color: #fff;
}

/* 👉 vertical divider BETWEEN the two buttons */
.fin-info p a + a::before{
  content: "";
  position: absolute;
  left: -22px;          /* aligns with gap */
  top: 50%;
  width: 2px;
  height: 32px;         /* divider height */
  background: #000;
  transform: translateY(-50%);
}

/* ===================== Responsive ===================== */

@media (max-width: 1024px){
  .financials{
    padding: 0 5vw 10vh;
  }

  .financials-list{
    grid-template-columns: 1fr;
  }

  .fin-info{
    text-align: center;
  }

  .fin-info p{
    justify-content: center;
  }
}

@media (max-width: 600px){
  .financials{
    padding: 0 4vw 10vh;
  }

  .financials-title h2{
    font-size: 4rem;
  }

  .fin-info h3{
    font-size: 1.4rem;
  }

  /* hide divider on mobile */
  .fin-info p a + a::before{
    display: none;
  }
}

/* ----------------------------------------------- Contact ----------------------------------------------------------- */

.contact {
   display: grid;
   grid-template-columns: repeat(2,2fr);
}

.contact img {
    width: 40vw;
    margin-left: 0vw;
    margin-top: 0vh;
}

.contact h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7rem;
    margin-top: 5vh;
    margin-left: 5vw;
    color: black;
    line-height: 20vh;
}

/* Inputs */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    border-bottom: 2px solid #771015;
    background-color: #fcf1cd;
    box-sizing: border-box;
    margin-bottom: 16px;
    resize: vertical;
}

.container_cont form label {
    font-size: 1.2rem;
    font-weight: 400;
}

input[type=submit] {
    width: 15vw;
    font-family: Arial, Helvetica, sans-serif;
    color: #771015;
    font-size: 1rem;
    padding: 12px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    background-color: white;
}

input[type=submit]:hover {
    border: 2px solid #771015;
}

.container_cont {
    display: flex;
    width: 80%;
    height: 80%;
    background-color: #fcf1cd;
    padding: 30px;
    margin: auto;
    margin-bottom: 10vh;
    grid-column: 1/3;
}

.cont_info h4 {
    font-weight: 300;
    font-size: 1.2rem;
}

.cont_info a { text-decoration: none; color: #000000; }
.cont_info a:hover { color: #771015; }

#menuToggle { display: none; }

/* ----------------------------------------------- Footer ----------------------------------------------------------- */

.container{
    max-width: 1500px;
    margin:auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.footer ul{
    list-style: none;
}

/* Footer adjusted so banner can touch border-top */
.footer{
    background-color: #fcf1cd;
    /* padding: 30px 0; */
    border-top: 2px solid black;
    margin-top: 0; /* changed from 10vh to 0 so .outside extends to the black line */
}

.footer-col img{
    width: 13vw;
    align-items: flex-start;
}
.footer-col{
   width: 25%;
   padding: 0 20px;
}
.footer-col h4{
    font-size: 18px;
    color: black;
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: 500;
    position: relative;
}
.footer-col h4::before{
    content: '';
    position: absolute;
    left:0;
    bottom: -10px;
    background-color: #e91e63;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}
.footer-col ul li:not(:last-child){
    margin-bottom: 10px;
}
.footer-col ul li a{
    font-size: 16px;
    text-decoration: none;
    font-weight: 400;
    color: black;
    display: block;
    transition: all 0.3s ease;
}
.footer-col ul li a:hover{
    color: #e91e63;
    padding-left: 8px;
}
.footer-col .social-links a{
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: rgba(255,255,255,0.2);
    margin:0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
    color: #24262b;
    background-color: #ffffff;
}
.footer-copy {
  text-align: end;        
  padding: 40px 20px;           
  font-size: 14px;           
  color: #0b1f3f;            
  display: flex;
  flex-wrap: wrap;           
  justify-content: end;   
  align-items: end;       
  gap: 6px;                 
}

.copy-link {
  display: inline-flex;      
  align-items: center;       
  text-decoration: none;
  color: inherit;            
  font-weight: bold;
}

.copy-logo {
  width: 20px;               
  margin-right: 5px;         
}



/* -----------------------------------------Responsive---------------------------------- */

@media (min-width:2000px) {
    .anim .chicken{ height: 25.5vh; right: -0.6vw; }
    .anim .cow{ height: 24vh; right: -1.7vw; }
    .anim .lamb{ height: 26.5vh; top: -2.5vh; left: 4.2vw; }
    .anim .pig{ height: 26.5vh; left: 5.3vw; top: 4vh; }
    nav a img { width: 5vw; }
}

@media (min-height:715px) and (max-height:800px) {
    .anim .chicken{ height: 23vh; right: -0.3vw; }
    .anim .cow{ height: 21vh; right: -1.5vw; }
    .anim .lamb{ height: 24.2vh; top: -2.5vh; left: 4vw; }
    .anim .pig{ height: 22.5vh; left: 5vw; top: 4.5vh; }
}

@media (max-width:1500px) {
    .avakx { width: 49vw; margin: auto; }
    .categ .chick { width: 12vw; }
}

@media (max-width:1440px) {
    .avakx { width: 51.5vw; margin: auto; }
    .contact h2 { font-size: 7rem; line-height: 10vh; }
    .contact img { width: 40vw; margin-top: 6vh; margin-inline-start: -25vw; }
    input[type=submit] { width: 25vw; }
}

@media (max-width:1024px) {
    .hideOnMobile { display: none; }
    .menu-button { display: block; }
    .avakx { width: 60vw; margin: auto; }
    .footer-col{ width: 50%; margin-bottom: 3vh; }

    /* ensure hero still displays for mobile layout */
    .outside {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .mob { display: grid; }
    .mob img { width: 80%; margin: auto; margin-top: 10vh; }

    .logo_int .lamb { top: -1vh; left: 5.7vw; }
    .logo_int .pig { left: 6.5vw; top: 3vh; }

    .contact img { margin-inline-start: -9vw; margin-top: 14vh; }
    .categ img { width: 20vw; }
    .categ .pork { width: 37vw; }
    .info button { width: 15vw; }
}

@media (max-width:800px) {
    .loader-wrapper img { height: 50%; }
    nav li { height: 46px; }
    nav a img { width: 13vw; }

    .logo_int .chicken{ height: 6.5vh; right: 2.1vw; top: -0.4vh; }
    .logo_int .cow{ height: 6.5vh; right: -0.7vw; }
    .logo_int .lamb{ height: 7vh; top: 0vh; left: 3.7vw; }
    .logo_int .pig{ height: 7vh; left: 4.5vw; top: 2vh; }

    .avakx { width: 34vw; }

    .categ { grid-template-columns: 3fr; height: 70vh; margin-bottom: 0vh; }
    .product_list { grid-template-columns: 1fr; row-gap: 5vh; margin-bottom: 15vh; }

    .banner h1 { font-size: 4rem; }
    .categ img { width: 50vw; }

    .prod-col h2 { font-size: 4rem; text-align: center; }
    .prod-col .halal-badge { font-size: 1rem; margin-top: 0; padding-bottom: 2vh; }
    .info p { text-align: center; padding: 2vh; margin: 0; }
    .info button { width: 25vw; }
    .h3 h3 { text-align: center; margin-left: 0; }
    .list { grid-template-columns: 3fr; justify-items: center; }
    .list div { width: 90vw; margin: auto; }
    .list1 ul li, .list2 ul li {
        width: 85vw;
        margin: 2vh auto 0 auto;
        text-align: center;
    }
    .row_about { grid-template-columns: 3fr; }
    .about-col { place-items: center; }
    .about-col img { margin-top: 0; }
    .about-col h2 { text-align: center; }
    .about-col p { text-align: center; padding: 5vh; }
    input[type=submit] { width: 28vw; }
    .contact h2 { font-size: 5rem; line-height: 10vh; }
    .contact img { width: 55vw; margin-top: 12vh; margin-inline-start: -8vw; }
    .categ .pork { width: 91vw; }
    .categ .chick { width: 35vw; }
    .banner{width: 100%;}
    .footer-col{ width: 100%; margin-bottom: 3vh; padding: 0 40px; }
    .footer-col img{ width: 30vw; }
    .footer-copy {
  text-align: center;        
  display: flex;
  flex-wrap: wrap;          
  justify-content: center;   
  align-items: center;      
}
    
}

@media (max-width:700px) {
    .contact h2 { font-size: 5rem; line-height: 8vh; }
    .contact img { width: 60vw; margin-top: 10vh; margin-inline-start: -8vw; }
    input[type=submit] { width: 40vw; }
}

@media (max-width:600px) {
    .contact h2 { font-size: 3.5rem; line-height: 8vh; }
    .contact img { width: 60vw; margin-top: 10vh; margin-inline-start: -8vw; }
    input[type=submit] { width: 40vw; }
}

@media (max-width:500px) {
    .contact h2 { font-size: 3.5rem; line-height: 8vh; }
    .contact img { width: 60vw; margin-top: 10vh; margin-inline-start: -8vw; }
    input[type=submit] { width: 45vw; }
}

@media (max-width:425px) {
    .sidebar{ width: 100%; }
    .loader-wrapper img { height: 40%; }
    nav a img{ width: 13vw; }
    .row{ display: grid; row-gap: 2vh; }
    .about-col h2 { font-size: 6rem; }
    .story h3 { font-size: 2rem; }

    .logo_int .chicken{ height: 6.5vh; right: 2.1vw; top: -0.4vh; }
    .logo_int .cow{ height: 6.5vh; right: -0.7vw; }
    .logo_int .lamb{ height: 7vh; top: 0; left: 3.7vw; }
    .logo_int .pig{ height: 7vh; left: 4.5vw; top: 2vh; }

    .avakx { width: 34vw; }
    .contact h2 { font-size: 3rem; }
    .product_list { row-gap: 1vh; margin-bottom: 0vh; }
    .info button { width: 36vw; height: 10vh; }
    input[type=submit] { width: 65vw; }
    .contact img { width: 65vw; margin-top: 10vh; margin-inline-start: -16vw; }
}

@media (max-width:375px) {
    .contact h2 { font-size: 2.5rem; line-height: 8vh; }
    .contact img { width: 65vw; margin-top: 11vh; margin-inline-start: -16vw; }
    input[type=submit] { width: 65vw; }
}

@media (max-width:320px) {
    .row{ display: grid; row-gap: 2vh; }
    input[type=submit] { width: 75vw; }
    .contact h2 { font-size: 2rem; line-height: 8vh; }
}


/* =========================
   Sidebar dropdown FIX (works)
   ========================= */

/* Sidebar items stack link + dropdown vertically */
.sidebar li{
  height: auto;              /* override nav li height */
  display: flex;
  flex-direction: column;    /* IMPORTANT */
  width: 100%;
}

/* Sidebar links */
.sidebar > li > a{
  padding: 16px 30px;
}

/* Dropdown inside sidebar must be normal flow */
.sidebar .dropdown{
  position: static;          /* IMPORTANT */
  display: none;
  width: 100%;
  margin: 0;
  padding: 6px 0 10px 18px;  /* indent submenu */
}

/* Show ONLY the direct dropdown of the hovered/focused li */
.sidebar li:hover > .dropdown,
.sidebar li:focus-within > .dropdown{
  display: block;
}

/* Submenu links */
.sidebar .dropdown li a{
  height: auto;
  padding: 12px 30px;
}

/* =========================================================
   RTL support (Arabic pages — html[dir="rtl"])
   ========================================================= */

html[dir="rtl"] body{
  font-family: 'Cairo', Tahoma, Arial, sans-serif;
}

/* Logo sits at the start (right) of the nav, links flow toward the left */
html[dir="rtl"] nav li:first-child{
  margin-right: 0;
  margin-left: auto;
}

/* Mobile drawer opens from the left in RTL */
html[dir="rtl"] .sidebar{
  right: auto;
  left: 0;
  box-shadow: 10px 0 10px rgba(0,0,0,0.1);
}

html[dir="rtl"] .sidebar .dropdown{
  padding: 6px 18px 10px 0;
}

/* Headings offset from the right instead of the left */
html[dir="rtl"] .about-col h2,
html[dir="rtl"] .contact h2{
  margin-left: 0;
  margin-right: 5vw;
}

html[dir="rtl"] .h3 h3{
  margin-left: 0;
  margin-right: 4.5vw;
}

/* Keep the animal / AVAKX hero mark exactly as-is (not mirrored) */
html[dir="rtl"] .logo_int{
  direction: ltr;
}

/* Footer heading underline */
html[dir="rtl"] .footer-col h4::before{
  left: auto;
  right: 0;
}

html[dir="rtl"] .copy-logo{
  margin-right: 0;
  margin-left: 5px;
}

/* Financial statements list reads right-to-left */
html[dir="rtl"] .fin-info{
  text-align: right;
}

html[dir="rtl"] .fin-info p a + a::before{
  left: auto;
  right: -22px;
}

@media (max-width: 1024px){
  html[dir="rtl"] .fin-info{
    text-align: center;
  }
}

/* Keep addresses, phone numbers and PDF file names left-to-right */
html[dir="rtl"] .fin-info p a[dir="ltr"]{
  unicode-bidi: isolate;
}

html[dir="rtl"] .footer-col a[dir="ltr"]{
  unicode-bidi: isolate;
  text-align: right;
}