@import url("https://fonts.googleapis.com/css2?family=Kufam:wght@700&family=Tajawal:wght@400;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}
body {
  font-family: "Tajawal", sans-serif;
  background: #fbfbfb;
  overflow-x: hidden;
}

h1 {

  margin-bottom: 1rem;
  color: #0596a3;
    font-family: "Tajawal", sans-serif;

}

h1 span {
  color: #083589;
    font-family: "Tajawal", sans-serif;
}

h2 {
  color: #014e58;
  font-size: 7.4rem;
  margin-bottom: 1rem;
  font-family: "Tajawal", sans-serif;
}

h3 {
  color: #6fc59d;
  font-size: 2.4rem;
  margin-bottom: 0rem;
  font-family: "Tajawal", sans-serif;
}
h4 {
  font-size: 1.6rem;
  width: 40%;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #d5d5d5;
    font-family: "Tajawal", sans-serif;
}
h5 {
  
    font-family: "Tajawal", sans-serif;
}

p {

   
  font-size: 1.6rem;
  color: #345375;
  line-height:1.5;
}
/* Qualities Section */
#qualities {
  width: 90%;
  max-width: 1366px;
  margin: 4rem auto;
  height: 100%;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}


.qualities-container {
  display: flex;
  justify-content: space-between;
  grid-gap: 2rem;
  padding-top: 5rem;
}


.quality p {
  text-align: center;
  width: 70%;
  margin: 1rem auto;
}


/* 
i {
  color: #27ab83;
  font-size: 4.4rem;
  margin-left: 1rem;
  opacity: 0.7;
}
 */

footer {
  background: #f7f9f3;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
}

footer p {
  color: #283f58;
}

/* 
.about-container {
  background: #fbfbfb;
}
.about-us {
  width: 90%;
  max-width: 1366px;
  margin: 0 auto;
  height: 50vh;
  display: flex;
  justify-content: flex-start;
} */
/* 
.about-us img {
  width: 80%;
  height: 80%;
} */

.about-us .about-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.about-content h2 {
  color: #b38d56;
}
.about-content p {
  margin-top: 1rem;
  width: 80%;
  color: #2e8f6f;
}
.nav-container {
  background: #ededed;
  color: #f0f4f8;
}

nav {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 18vh;
  font-size: 1.6rem;
}

nav .logo {
  font-family: "Kufam", cursive;
  font-weight: bold;
  flex: 1;
  color: #0596a3;
}

/* nav ul {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  flex: 4;
} */

/* nav ul li a {
  color: #283f58;
  text-decoration: none;
} */

.qualities-container {
  display: flex;
  justify-content: space-between;
  grid-gap: 2rem;
  padding-top: 5rem;
}

.quality {
  background-image: url("./images/head.jpg" ) ;
  background-size: 100% 100% ;
   padding: 27rem 0;
  width: 30%;
}
.quality2 {
background-image: url("./images/head2.jpg" ) ;
  background-size: 100% 100% ;
  padding: 27rem 0;
  width: 30%;
}
.quality3 {
background-image: url("./images/head3.jpg" ) ;
  background-size: 100% 100% ;
  padding: 27rem 0;
  width: 30%;
}
.quality4 {
background-image: url("./images/head4.jpg" ) ;
  background-size: 100% 100% ;
  padding: 27rem 0;
  width: 30%;
}
.quality p {
  text-align: center;
  width: 70%;
  margin: 1rem auto;
}

.header-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* i {
  color: #27ab83;
  font-size: 2.4rem;
  margin-left: 1rem;
  opacity: 0.7;
}
 */
.textbox1
a:link {
  background-color: #181d38;
  color: #fbfdff;
  padding: 20px 77px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
.textbox2
a:link {
  background-color: #181d38;
  color: #fbfdff;
  padding: 20px 51px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
.textbox3
a:link {
  background-color: #181d38;
  color: #fbfdff;
  padding: 20px 48px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
.textbox4
a:link {
  background-color:#181d38;
  color: #fbfdff;
  padding: 20px 52px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
.textbox5
a:link {
  background-color: #181d38;
  color: #fbfdff;
  padding: 20px 92px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
.textbox6
a:link {
  background-color:#181d38;
  color: #fbfdff;
  padding: 20px 43px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
.textbox7
a:link {
  background-color:#181d38;
  color:#fbfdff;
  padding: 20px 45px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
.textbox8
a:link {
  background-color:#181d38;
  color:#fbfdff;
  padding: 20px 53px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 2.1rem;
}
/* #text
a:hover, a:active {
  background-color: #4d9b76;
}
 */


.qualities-v {
  display: flex;
  justify-content: center;
  grid-gap: 2rem;
  padding-top: 5rem;
}

.quality-v {
  background-color:#eee ;
  background-size: 100% 100% ;
   padding: 8rem 0;
  width: 30%;
}

.quality-v p {
  text-align: center;
  width: 70%;
  margin: 1rem auto;
}

.art {
margin: auto;
    padding: 40px;
    width: 70%;


}
.centertextart {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.figure {
    margin: 0 auto 0 226px;
	  border-radius: 8px;
}
img {
  border-radius: 10px;


}
.centerpdf {
  margin: auto;
  width: 60%;
  border: 2px solid #c9d5d4;
  padding: 10px;

}

object
{ border: 2px solid #c9d5d4;
}
.imageFade {
  position: relative;

}


.middleFade {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.overflow-fade {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.imageFade:hover .overflow-fade{
  opacity: 0.1;
}

.imageFade:hover .middleFade {
  opacity: 11;
}


.textfade {
  background-color: RED;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
	
	#panel, #flip {
 
  padding: 21px;
/*   background-image: url("img/carousel-1.png"); */
  border: solid 1px #f1f1f1;
}

#panel {
  padding: 50px;
  display: none;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: center;
  
}

/* Hide the images by default */
.mySlides {
  display: none;

}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #ffc107;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
    position: relative;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


.img-magnifier-container {
  position:relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
}

.containertext {
  position: relative;
  font-family: Arial;
}
.text-block2 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: white;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.containeritem {
  position: relative;
  
  max-width: inherit;
}

.imageitem {
  display: block;
  width: 100%;
  height: auto;
}

.overlayitem {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(70, 175, 192, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.containeritem:hover .overlayitem {
  opacity: 1;
}

div.example {
 
    text-align: center;
	color:#014e58
}



@media screen and (min-width: 600px) {
  div.example {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 1.0rem;
  }
}
@media screen and (max-width: 600px) {
.borderfont{
	
text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;

}  }
video {
  width: 100%;
  height: auto;
}

.g-55 {
    --bs-gutter-y: 3rem;
}

@media screen and (min-width: 600px) {
.iconpdf{
	font-size:24px;
	color:blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

}}
@media screen and (max-width: 600px) {
.iconpdf{
	font-size:48px;
	color:red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

}  }


@media screen and (min-width: 600px) {
.aboutimage{

object-fit: cover;
}}

@media screen and (max-width: 600px) {
.aboutimage{
object-fit: contain;

}  }


.day p {
font-size: 1rem;
text-align: right-side;
  margin: 1rem auto;
    color: #345375;
}

/** three_box section **/

@media screen and (min-width: 600px) {
.boximg{
	width: 20px;
	high:20px;
object-fit: cover;
}}

@media screen and (max-width: 600px) {
.boximg{
		width:20px;
	higher:20px;
object-fit: cover;
object-fit: contain;

}  }




/** end three_box section **/