@charset "utf-8";
/* CSS Document */

/*--------------------- Global Color Definitions ------------------------------ */
:root {
  --white: #FFFFFF;
  --black: #000000;
  --offwhite: #FCFAFB;
  --orange: #FF530D;
  --lightblue1: #BDD4DE;
  --lightblue2: #7195A4;
  --lightblue3: #BCD2DC;
  --lightblue4: #A7D4DE;
  --darkblue1: #25343D;
  --darkblue2: #3F5765;
  --darkbg: #2B3A42;
	
  --brightpink1: #ff96cf;
  --brightpink2: #ff96cf;
  --lightpink1: #f7aad4;
  --lightpink2: #feddee;
  --darkpink1: #db68a7;
  --darkpink2: #FF0CCF;
  --lightbrown: #A67C87;
  --darkbrown: #634C50;
  --darkbrown2: #4A383B;
  --lightgrey: #e3e4e5;
  --darkgrey: #a7a0a5;
  --lightbg: #FCFAFB;
	
  --lightgradient: linear-gradient(225deg, #FDD5F2 0%, #FFF8FE 20%, #fef2f9 100%);
  --pinkgradient: linear-gradient(180deg, #EAB8C5 0%, #F2C4D0 60%);
  --browngradient: linear-gradient(270deg, #594246 0%, #A67C87 100%);
	/*	background: -webkit-gradient(linear, left top, right top, color-stop(0%, #FB93C6), color-stop(100%,#F2C4D0)); /* Chrome, Safari4+ */
    /*background: -webkit-linear-gradient(left, #FB93C6, #F2C4D0); /* Chrome10+, Safari5.1+ */
    /*background: -moz-linear-gradient(left, #FB93C6 0%, #F2C4D0 100%);    /* FF3.6+ */
    /*background: linear-gradient(to right, #FB93C6 0%, #F2C4D0 100%);      /* W3C */
}


/*--------------------- Dark Mode Colors ------------------------------ */

html {
	background-color: #2B3A42;
	transition-duration: 0.7s;
  	transition-timing-function: ease;
	-webkit-transition-duration: 0.7s;
  	-webkit-transition-timing-function: ease;
}
.whitecolor {							/* used for Hanan Logo and footer text */
	color: var(--white);
}
.orangecolor{							/* used for main text in index */
	color: #FF530D;
	color: var(--orange);
}
.lightbluecolor{						/* used for majority of texts */
	color: #BDD4DE;
	color: var(--lightblue1);
}
.lightbluecolor2 {                	   /* used for secondary text in index page */
	color: #BDD4DE;
	color: var(--lightblue1);
}
.lightbluecolor3 {                	   /* used for langdiv slash */
	color: #BDD4DE;
	color: var(--darkblue2);
}
.activedimmedcolor {                   /* used for dimmed language active option */
	color: #7195A4;
	color: var(--lightblue2);
}
.activedimmedcolor:hover {     		   /* used for used for hover language active option */
	color: #BDD4DE;
	color: var(--lightblue1);
}
.nonactivedimmedcolor {     	       /* used for used for extra dimmed nonactive language option */
	color: #3F5765;
	color: var(--darkblue2);
	transition-duration: 0.7s;
  	transition-timing-function: ease;
	-webkit-transition-duration: 0.7s;
  	-webkit-transition-timing-function: ease;
}
.orangetrans {							/* used for macbook slideshow default next and previous buttons */
	background-color: #3F5765;
	color: var(--darkblue2);
}
.orangetrans:hover, .orangetrans:active{ /* used for macbook slideshow hover next and previous buttons */
	background-color: #FF530D;
	color: var(--orange);
}
.lightbluetrans {						/* used for all popup slideshow default next and previous buttons */
	color: #BCD2DC;
	color: var(--lightblue3);
}
.lightbluetrans:hover, .lightbluetrans:active {	/* used for all popup slideshow hover next and previous buttons */
	color: #FF530D;
	color: var(--orange);
}
.whitebg {								/* used for one rectangle frame in contact page */
	background-color: #FFFFFF;
	background-color: var(--white);
}
.orangebg{								/* used for main logo frame and both Prestegious Art frames in index page */
	background-color: #FF530D;
	background-color: var(--orange);
}
.darkbluebg{							/* used for all footer banners */
	transition-duration: 0.7s;
  	transition-timing-function: ease;
	-webkit-transition-duration: 0.7s;
  	-webkit-transition-timing-function: ease;
	background-color: #25343D;
	background-color: var(--darkblue1);
}
.darkbluebg2{							/* used for all social media banners in gallery pages*/
	background-color: #3F5765;
	background-color: var(--darkblue2);
}
/*--------------------- Light Mode Colors ------------------------------ */

html.light-mode.notransition {
	transition-duration: 0s;
	-webkit-transition-duration: 0s;
	background-color: var(--lightbg);
}
html.light-mode {
	background-color: var(--lightbg);
}
.whitecolor.light-mode {				/* used for Hanan Logo and Footer text */
	color: var(--darkbrown);
}
.orangecolor.light-mode {				/* used for main text in index */
	color: var(--darkpink1);
}
.lightbluecolor.light-mode {			/* used for majority of texts */
	color: var(--darkpink1);
}
.lightbluecolor2.light-mode {			/* used for slash and secondary text in index page */
	color: var(--darkbrown);
}
.lightbluecolor3.light-mode {			/* used for slash and secondary text in index page */
	color: var(--brightpink1);
}
.activedimmedcolor.light-mode {			/* used for dimmed language active option */
	color: var(--lightbrown);
}
.activedimmedcolor.light-mode:hover {	/* used for used for hover language active option */
	color: var(--darkpink1);
}
.nonactivedimmedcolor.light-mode {		/* used for used for extra dimmed nonactive language option */
	color: var(--lightpink2);
}
.orangetrans.light-mode {				/* used for macbook slideshow default next and previous buttons */
	background-color: var(--darkpink1);
}
.orangetrans.light-mode:hover, .orangetrans.light-mode:active{/*used for macbook slideshow hover next and previous buttons */
	background-color: var(--brightpink1);
}
.lightbluetrans.light-mode {			/* used for all popup slideshow default next and previous buttons */
	color: var(--lightblue3);
}
.lightbluetrans.light-mode:hover, .lightbluetrans.light-mode:active {	/* used for all popup slideshow hover next and previous buttons */
	color: var(--darkpink2);
}
.whitebg.light-mode {					/* used for one rectangle frame in contact page */
	background-color: var(--darkbrown);
}
.orangebg.light-mode {					/* used for main logo frame and both Prestegious Art frames in index page */
	background-color: var(--darkpink1);
}
.darkbluebg.light-mode {				/* used for all footer banners */
	background-color: var(--lightgrey);
}
.darkbluebg2.light-mode {				/* used for all social media banners in gallery pages*/
	background-color: var(--lightgrey);
}

/*---------------------  Main Website CSS  ------------------------------ */

#hanan-logo {
    font-size: 60px;
    line-height: 66px;
}
#boghdady-logo {
    font-size: 38.5px;
    line-height: 40px;
}
#lang-mode {
	position: relative;
}
#ar-page-link {
	transition-duration: 0.3s;
  	transition-timing-function: ease;
	-webkit-transition-duration: 0.3s;
  	-webkit-transition-timing-function: ease;
}
#lightbutton, #darkbutton {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}

#top-banner {
  transition-duration: 1s;
  transition-timing-function: ease;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease;
}
.top-banner {
  z-index: 300;
  width: 300px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  height: 0px;
  left: 50%;
  transform: translate(-50%);
  position: fixed;
}
.top-banner span {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90%;
  top: -20px;
  font-size: 30px;
  opacity: 0;
  transition-duration: 1s;
  transition-timing-function: ease;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease;
}
.top-banner.showbanner {
  height: 50px;
}
.top-banner.showbanner span {
  transition-duration: 1s;
  transition-delay: 0.4s;
  transition-timing-function: ease;
  -webkit-transition-duration: 1s;
  -webkit-transition-delay: 0.4s;
  -webkit-transition-timing-function: ease;
  opacity: 1;
  top: 0;
}
#iconstopbanner {
  display: flex;
  gap: 10px;
}
#behancetopbanner {
  z-index: 20;
  flex-basis: 55px;
}
#pinteresttopbanner {
  z-index: 23;
  flex-basis: 45px;
}
#instagramtopbanner {
  z-index: 21;
  flex-basis: 45px;
}
#xtopbanner {
  z-index: 22;
  flex-basis: 45px;
}
#behance_imgtopbanner {
  aspect-ratio: 60/44;
  width: 49px;
}
#pinterest_imgtopbanner, #instagram_imgtopbanner, #x_imgtopbanner {
  aspect-ratio: 49/44;
  width: 40px;
}
#behance_imgtopbanner:hover {
  width: 50px;
}
#pinterest_imgtopbanner:hover, #instagram_imgtopbanner:hover, #x_imgtopbanner:hover {
  width: 41px;
}

@media (min-width: 659px) {
  #lang-div {
    z-index: 2;
    width: 125px;
    min-height: 25px;
    position: absolute;
    right: 0;
    margin-right: 13px;
    margin-top: 8px;
  }
  #darklight-div {
    z-index: 2;
    width: 30px;
    min-height: 25px;
    position: absolute;
    right: 0;
    margin-right: 12px;
    margin-top: 8px;
  }
}
@media (max-width: 658px) {
  #lang-div {
    z-index: 2;
    width: 60px;
    min-height: 25px;
    position: absolute;
    left: 0;
    margin-left: 9px;
    margin-top: 4px;
  }
  #lang-wrapper {
	display: inline-flex;
	width: 47px;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1px;
  }
  #darklight-div {
    z-index: 2;
    width: 30px;
    min-height: 25px;
    position: absolute;
    right: 0;
    margin-right: 10px;
    margin-top: 4px;
  }
}