/* ----------------------------------------------------- */
/* style.css...                                          */
/*    main stylesheet                                    */
/*    contains themes & variables                        */
/*    calls additional stylesheets                       */
/* ----------------------------------------------------- */

/* Include custom fonts */
@font-face {
  font-family: "myFont";
  src: url("/fonts/helveticaneue-light-webfont.woff2") format("woff2"),
    url("/fonts/helveticaneue-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Define all colours */
:root,
html[data-theme="light"] {
  --bgimg: url("/img/bg-light.png");
  /* --bgcolor: #ccc; */
  --textcolor: #333;
  --headerbackgrcolor: hsla(0, 33%, 39%, 0.2);
  --sectionbackgrcolor: hsla(0, 33%, 39%, 0.2);
  --articlebackgrcolor: hsla(0, 15%, 95%, 1);
  --asidesectionbackgrcolor: hsla(0, 0%, 39%, 0.2);
  --asidearticlebackgrcolor: hsla(0, 15%, 95%, 1);
  --textshadowcolor: #666;
  --h1color: var(--textcolor);
  --h2color: var(--textcolor);
  --h3color: var(--textcolor);
  --h4color: var(--textcolor);
  --maintext: #4a4a4a;
  --menutext: #3a3a3a;
  --menutexthover: var(--backgr);
  --menubackgrcolor: hsla(0, 33%, 79%, 0.4);
  --menumobilebackgrcolor: hsla(0, 15%, 75%, 0.4);
  --menubackgractive: #6f6f6f; /* #9b1010; */
  --mainmenudivider: #808080;
  --menudivider: #ffffff;
  --divshadowmain1: #00000033;
  --divshadowmain2: #00000030;
  --divshadowaside1: hsla(0, 60%, 33%, 0.345);
  --divshadowaside2: hsla(0, 23%, 23%, 0.2);
  --linkcolor: #222;
  --linkshadowcolor: 0px 0px 1px #f004;
  --linkactivecolor: #aaa;
  --linkvisitedcolor: #3a3a3a;
  --linkhovercolor: #000;
  --linkhovershadowcolor: 0px 0px 1px red;
  --linkhoverbgcolor: #444;
  --footerbackgrcolor: hsla(0, 33%, 39%, 0.2);
  --footertextcolor: #333;
  --menuicon: #000000;
  /* mobile variable */
  --mobilemenubackgr: hsla(0, 0%, 64%, 0.6);
  --mobilemenusub1links: #eee;
  --mobilemenusmlinkshover: #ffc8c8;
  --heavytypeface: 900;
  --boldtypeface: 700;
  --normaltypeface: 500;
  --thintypeface: 200;
  --dark: "\263d";
  --menuiconshadow: #3336;
  --asidedivider: #eee;
  --whatsapptextcolor: #666;
  --whatsapptextshadow: 0px 0px 1px #000;
  --heropanel-img: url("/pics/index-heropanel-l.webp");
  --bannerheader: #f00;
  --bannertext: #333;
  /* --menu_hover_color: rgba(135, 89, 89, 0.267); */
  --menu_hover_color: #936adb33;
}

/* Dark Mode - Define all colours */
html[data-theme="dark"] {
  --bgimg: url("/img/bg-dark.png");
  --textcolor: #000;
  --headerbackgrcolor: hsla(0, 58%, 90%, 0.4);
  --sectionbackgrcolor: hsla(0, 33%, 79%, 0.4);
  --articlebackgrcolor: hsl(0, 10%, 70%);
  --asidesectionbackgrcolor: hsla(0, 0%, 79%, 0.5);
  --asidearticlebackgrcolor: hsl(0, 10%, 70%);
  --textshadowcolor: #ccc8;
  --h1color: var(--textcolor);
  --h2color: var(--textcolor);
  --h3color: var(--textcolor);
  --h4color: var(--textcolor);
  --maintext: #000;
  --menutext: #000;
  --menutexthover: var(--textcolor);
  --menubackgrcolor: hsla(0, 33%, 79%, 0.4);
  --menumobilebackgrcolor: hsla(0, 10%, 45%, 0.3);
  --menubackgractive: #9b1010;
  --mainmenudivider: #333;
  --menudivider: #ffffff;
  --divshadowmain1: #00000033;
  --divshadowmain2: #00000030;
  --divshadowaside1: #380c0c54;
  --divshadowaside2: #3e252579;
  --linkcolor: #000;
  --linkshadowcolor: 0px 0px 1px #f004;
  --linkactivecolor: #000;
  --linkvisitedcolor: #000;
  --linkhovercolor: #333;
  --linkhovershadowcolor: 0px 0px 1px red;
  --linkhoverbgcolor: #fff;
  --footerbackgrcolor: hsla(0, 58%, 90%, 0.4);
  --footertextcolor: #000;
  --menuicon: #000000;
  /* mobile variable */
  --mobilemenubackgr: hsla(0, 0%, 0%, 0.6);
  --mobilemenusub1links: #383434;
  --mobilemenusmlinkshover: #ffc8c8;
  --heavytypeface: 900;
  --boldtypeface: 700;
  --normaltypeface: 500;
  --thintypeface: 200;
  --dark: "\26ed";
  --menuiconshadow: #fff9;
  --asidedivider: #111;
  --whatsapptextcolor: #ccc;
  --whatsapptextshadow: 0px 0px 2px black;
  --heropanel-img: url("/pics/index-heropanel-d.webp");
  --bannerheader: orange;
  --bannertext: white;
  --menu_hover_color: rgba(228, 182, 182, 0.267);
}

/* ----------------------------------------------------- */
/* non-viewport specific markup                          */
/* fawadanwar@gmail.com                                  */
/* ----------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-decoration: none;
}

html {
  font-size: 16px;
  width: 100%;
  height: 101%;
  background: var(--bgcolor);
}

body {
  font-family: myFont, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  background: var(--bgimg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  vertical-align: top;
  max-height: 90vh;
  justify-content: center;
}

/* ================= flickity ======================== */
.gallery {
  background: var(--articlebackgrcolor);
}

.gallery-cell {
  width: 100%;
  /* height: 200px; */
  margin: 10px;
  background: var(--articlebackgrcolor);
  counter-increment: gallery-cell;
}

/* cell number */
/* .gallery-cell:before {
    display: block;
    text-align: center;
    content: counter(gallery-cell);
    line-height: 200px;
    font-size: 80px;
    color: white;
  } */

/* ===================================== */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p,
main li,
aside li {
  font-size: 0.9rem;
  font-weight: var(--normaltypeface);
  line-height: 1.5;
  letter-spacing: 1.3px;
  text-align: justify;
  text-justify: inter-word;
  color: var(--textcolor);
  padding-bottom: 1rem;
}

h1 {
  font-size: 1.5rem;
  font-weight: var(--heavytypeface);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--h1color);
  text-shadow: 1.5px 1.5px 4px var(--textshadowcolor);
}
h2 {
  font-size: 1.2rem;
  font-weight: var(--boldtypeface);
  letter-spacing: 4px;
  color: var(--h2color);
  text-shadow: 1px 1px 3px var(--textshadowcolor);
}
h3 {
  font-size: 0.9rem;
  font-weight: var(--boldtypeface);
  letter-spacing: 2px;
  margin-bottom: 3px;
  color: var(--h3color);
  text-shadow: 1px 1px 2px var(--textshadowcolor);
}
h4 {
  font-size: 0.7rem;
  font-weight: var(--thintypeface);
  color: var(--h4color);
}

a[href],
a {
  text-decoration: none;
  color: var(--linkcolor);
  text-shadow: var(--linkshadowcolor);
  font-weight: 600;
}

a:visited,
a[href]:visited {
  color: var(--linkvisitedcolor);
}

a:hover,
a[href]:hover {
  color: var(--linkhovercolor);
  text-shadow: var(--linkhovershadowcolor);
  background-color: unset;
}

a:active,
a[href]:active {
  color: var(--linkactivecolor);
}

.tagbtn {
  border: 1px solid var(--h1color);
  background-color: var(--h1color);
  border-radius: 5px;
  padding: 5px 15px;
  line-height: 40px;
  box-shadow: 2px 2px 4px 2px var(--divshadowmain1);
}

a.tagbtn {
  color: var(--articlebackgrcolor);
}

a.tagbtn:hover {
  color: var(--articlebackgrcolor);
}

a.tagbtn:active {
  color: var(--h1color);
}

a.tagbtn:visited {
  color: var(--articlebackgrcolor);
}

/* ----------------------------------------------------- */
/* desktop.css...                                        */
/*    called by style.css                                */
/*    contains desktop viewport specific markup          */
/* fawadanwar@gmail.com                                  */
/* ----------------------------------------------------- */

.container {
  display: grid;
  height: 100%;
  min-height: 100vh;
  grid-template-columns: 100px 1fr 1fr 1fr 1fr 1fr 1fr 100px;
  grid-template-rows: 90px auto auto auto 45px;
  grid-template-areas:
    "header header header header header header header header"
    ". hero hero hero hero hero hero ."
    ". . main main main main . ."
    ". . aside aside aside aside . ."
    "footer footer footer footer footer footer footer footer";
}

header {
  grid-area: header;
  display: grid;
  position: relative;
  border-radius: 10px;
  min-height: 100%;
  margin: 5px;
  box-shadow: 0 4px 8px 0 var(--divshadowmain1), 0 6px 20px 0 var(--divshadowmain2);
  z-index: 2;
  border-top: 2px solid #fffb;
  border-left: 2px solid #fffb;
  border-bottom: 2px solid #3337;
  border-right: 2px solid #3337;
  grid-template-columns: 570px 1fr;
  grid-template-rows: 50px 40px;
  grid-template-areas:
    "logo social"
    "nav nav";
}

header::before {
  position: absolute;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--headerbackgrcolor);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.logo {
  grid-area: logo;
  display: flex;
  height: 100%;
  width: 100%;
  padding: 20px 0px 3px 115px;
  align-items: center;
}

.social {
  grid-area: social;
  display: flex;
  height: 100%;
  padding: 3px 110px 3px 0px;
  justify-content: right;
  align-items: center;
  vertical-align: bottom;
}

nav {
  grid-area: nav;
  padding: 3px 145px 3px 0px;
}

.social img {
  width: 30px;
  margin-left: 10px;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
  margin-bottom: 5px;
}

.hero {
  grid-area: hero;
  position: relative;
  padding-top: 5px;
  text-align: center;
}

.heropanel {
  display: flex;
  padding-bottom: 50px;
  padding-left: 30px;
  justify-content: space-between;
  background-image: var(--heropanel-img);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}

.hero-img {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.hero-img > img {
  width: 100%;
}

.desktop {
  visibility: visible;
}

.mobile {
  display: none;
  visibility: hidden;
}

.textlists {
  list-style-type: none;
}

.textlists > li {
  padding: 1ch 1ch 0 1ch;
}

.roundedcorners {
  border-radius: 0.5ch;
}

.multicols {
  display: flex;
  flex-direction: row;
  gap: 2ch;
}

.multicols > .col {
  width: 50%;
}

.multicols > .col-l {
  width: 60%;
}

.multicols > .col-r {
  width: 40%;
  border-left: 2px groove hsla(0 0% 0%/0.1);
}

a#theme-toggle::after {
  content: var(--dark);
  font-size: 1.2em;
}

.smaller {
  font-size: small;
  font-weight: 600;
}
.boldtext {
  font-weight: 700;
}

main,
aside {
  margin-top: 25px;
  padding: 1ch;
}

aside {
  border-top: var(--asidedivider) 3px groove;
  padding-top: 38px;
}

section {
  border-radius: 1ch;
  padding: 1ch;
  margin-bottom: 2ch;
  background-color: var(--sectionbackgrcolor);
  box-shadow: 2px 2px 4px 2px var(--divshadowmain1);
  border-top: 2px solid #fffb;
  border-left: 2px solid #fffb;
  border-bottom: 2px solid #3337;
  border-right: 2px solid #3337;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

article {
  display: inline-block;
  width: 100%;
  background-color: var(--articlebackgrcolor);
  border-radius: 0.5ch;
  padding: 2ch;
  border: 2px groove rgba(0, 0, 0, 0.2);
  margin-top: 0.5ch;
  /* margin-bottom: 2.5ch; */
}

section.punch {
  border-radius: 0.5ch;
  padding: 1ch;
  margin-bottom: 2ch;
}

.punch p {
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
}

.punch h4 {
  font-size: 1.2rem;
  font-style: italic;
}

aside section {
  background-color: var(--asidesectionbackgrcolor);
}

aside article {
  border: 3px ridge rgba(0, 0, 0, 0.2);
  background-color: var(--asidearticlebackgrcolor);
  box-shadow: 2px 2px 2px 2px var(--divshadowaside2);
}

section img,
article img {
  display: flex;
  border-radius: 0.5ch;
  max-width: 100%;
  margin-bottom: 0.5ch;
  margin-left: auto;
  margin-right: auto;
}

aside iframe {
  width: 100%;
  height: 300px;
}

ul.textlists {
  padding-left: 2ch;
  list-style-type: circle;
  list-style-position: outside;
}

/* Site Floating Logo */
.sitelogo {
  position: fixed;
  top: 7px;
  left: 20px;
  height: 85px;
  z-index: 2;
}
.sitelogo > a > img {
  height: 100%;
}

/* WhatsApp Floating Icon */
.whatsapp {
  position: fixed;
  bottom: 3px;
  right: 17px;
  width: 55px;
  opacity: 40%;
  transition: 0.5s ease-in-out;
}
.whatsapp:hover {
  opacity: 100%;
}
.whatsapp > a > img {
  width: 100%;
  filter: drop-shadow(5px 5px 5px var(--divshadowmain1));
}
.whatsapp p,
.whatsapp p:hover {
  color: var(--whatsapptextcolor);
  text-shadow: var(--whatsapptextshadow);
}

footer {
  position: relative;
  border-radius: 10px;
  padding-top: 1px;
  margin: 5px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--footertextcolor);
  border-top: 2px solid #fffb;
  border-left: 2px solid #fffb;
  border-bottom: 2px solid #3337;
  border-right: 2px solid #3337;
  z-index: 1;
}

footer::before {
  position: absolute;
  border-radius: 10px;
  background-color: var(--footerbackgrcolor);
  content: "";
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* -------------------------------------------------- */
/*                     NAVIGATION                     */
/* -------------------------------------------------- */

a#theme-toggle {
  position: absolute;
  top: 70px;
  right: 105px;
  line-height: 15px;
  cursor: pointer;
  z-index: 2;
}

nav {
  display: flex;
}

nav .content {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0;
}

nav .content .links {
  display: flex;
  margin-left: auto;
  margin-right: 0px;
}

.ColumnNo {
  column-count: 3;
}

.ColumnBreak {
  break-before: column;
}

.content .links li {
  list-style: none;
}

.content .links > li {
  line-height: 25px;
  padding-top: 14px;
}

.content .links li a,
.content .links li label,
a#theme-toggle {
  border-radius: 5px;
  padding: 5px 10px;
  margin-left: auto;
  margin-right: 0px;
  color: var(--menutext);
  font-size: 0.9rem;
  font-weight: 100;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  /* transition: all 0.7s ease; */
}

.content .links li label {
  display: none;
}

.content .links li a:visited,
a#theme-toggle:visited {
  text-decoration: none;
}

.content .links li label:hover,
.content .links li a:hover,
a#theme-toggle:hover {
  color: #000;
  text-shadow: 0px 0px 1px rgba(255, 0, 0, 0.671);
  background-color: var(--menu_hover_color);
}

.content .links li li a.desktop-link::after {
  position: absolute;
  right: 7px;
  font-size: 1.5rem;
  content: "»";
}

nav .menu-icon {
  width: 40px;
  color: var(--menuicon);
  cursor: pointer;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
}

nav .menu-icon {
  display: none;
}

nav input[type="checkbox"] {
  display: none;
}

/* Dropdown Menu code start */
nav .content .links ul {
  position: absolute;
  top: 80px;
  opacity: 0;
  visibility: hidden;
  width: fit-content;
  border-top: 2px solid #fffb;
  border-left: 2px solid #fffb;
  border-bottom: 2px solid #3337;
  border-right: 2px solid #3337;
  border-radius: 1ch;
  box-shadow: #0003 6px 0px 10px, #0003 -6px 0px 10px;
  cursor: pointer;
  z-index: -1;
}

nav .content .links ul::before {
  position: absolute;
  border-radius: 1ch;
  width: 100%;
  height: 100%;
  background-color: var(--menubackgrcolor);
  top: 0;
  left: 0;
  content: "";
  z-index: -9;
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
}

nav .content .links li:hover > ul {
  top: 90px;
  opacity: 1;
  z-index: 1;
  visibility: visible;
}

nav .content .links ul li a {
  display: block;
  border-radius: 0px !important;
  width: 100%;
  padding: 5px 10px 5px 15px;
  font-weight: 200;
  line-height: 16px;
  border-top: var(--mainmenudivider) dotted 1px;
  font-size: 0.8rem;
  letter-spacing: 2px;
}

nav .content .links ul li:first-of-type a {
  border-top: none;
}

nav .content .links ul ul {
  position: absolute;
  top: 0;
  right: calc(-101.5%);
  border-left: 1px var(--mainmenudivider) solid;
  box-shadow: unset;
  box-shadow: #0003 6px 0px 10px;
}

nav .content .links ul li {
  position: relative;
}

nav .content .links ul ul:first-of-type a {
  border-top: var(--mainmenudivider) dotted 1px;
}

nav .content .links ul ul li:first-of-type a {
  border-top: none;
}

nav .content .links ul li:hover ul {
  top: 0;
}

.content .links li li a {
  text-transform: none;
  padding-left: 30px !important;
}

.content .links li li a.desktop-links {
  text-transform: uppercase;
  padding-left: 10px !important;
  font-weight: 600;
}

.divider {
  color: var(--mainmenudivider);
}

.divider::after {
  content: "\2b21"; /* \2b21-Empty Hexagon, \2b22-Solid Hexagon */
}

.social a {
  color: var(--menutext);
  font-weight: 300;
  text-shadow: none;
}

.social a:hover {
  color: #000;
  text-shadow: none;
  filter: drop-shadow(0px 0px 1px #f007);
}

.invert {
  filter: drop-shadow(0px 0px 3px var(--menuiconshadow));
}

/*------------------------------------------------*/
/*    MEDIA QUERY FOR SMALLER DESKTOP SCREENS     */
/*------------------------------------------------*/

@media screen and (max-width: 1100px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "header header header header header header"
      "hero hero hero hero hero hero"
      " . main main main main . "
      " . aside aside aside aside . "
      "footer footer footer footer footer footer ";
  }

  header {
    grid-area: header;
    display: grid;
    min-height: 100%;
    grid-template-columns: 560px 1fr;
    grid-template-rows: 50px 40px;
    grid-template-areas:
      "logo social"
      "nav nav";
  }

  .logo {
    grid-area: logo;
    display: flex;
    height: 100%;
    padding: 20px 0px 3px 100px;
    align-items: center;
    justify-content: center;
  }

  .social {
    padding-right: 4px;
  }

  nav {
    padding: 3px 47px 3px 0px;
  }

  a#theme-toggle {
    position: absolute;
    top: 70px;
    right: 10px;
    line-height: 16px;
  }

  .sitelogo {
    position: fixed;
    top: 8px;
    left: 10px;
    width: 50px;
    z-index: 100;
  }

  .whatsapp {
    right: 10px;
  }

  .hero-img {
    width: 92%;
  }
}

/*           29 Mar 2025 fawadanwar@gmail.com               */