/* this coding created by web developer/ Ahmed fawzy mohamed */
/* personal email: ahmedfawzyalhegazy2020@gmail.com */
/* whatsapp: +201094848584 */
/* website: https://orion-comp.com/ */
/* formal email: info@orion-comp.com */
/* linkedin account: https://www.linkedin.com/in/ahmed-fawzy-mohamed-48a771202 */

/* Start Global Rules */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --red: #ee3f38;
  --orange: #f36d30;
  --gray: #b5b4b4;
  --white: #ffffff;
  --black: #000;
  --main-transition: 0.25s;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: var(--gray);
}
::-webkit-scrollbar-thumb {
  background-color: var(--orange);
  border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--red);
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Cairo", sans-serif;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
/* media query  */
@media (max-width: 320px) {
  .container {
    max-width: 300px !important;
  }
}
@media (min-width: 360px) {
  .container {
    max-width: 340px !important;
  }
}
@media (min-width: 410px) {
  .container {
    max-width: 390px !important;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px !important;
  }
}
@media (min-width: 769px) {
  .container {
    max-width: 720px !important;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px !important;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px !important;
  }
}

/* for very lage screens */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px !important;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1440px !important;
  }
}

@media (min-width: 1800px) {
  .container {
    max-width: 1560px !important;
  }
}

@media (min-width: 2000px) {
  .container {
    max-width: 1680px !important;
  }
}

@media (min-width: 2400px) {
  .container {
    max-width: 1920px !important;
  }
}

@media (min-width: 2800px) {
  .container {
    max-width: 2100px !important;
  }
}

@media (min-width: 3200px) {
  .container {
    max-width: 2300px !important;
  }
}
/* End @media */

/* End Global Rules */

/* Start header */
header {
  background-color: var(--white);
}
header .container {
}
header .row {
}
header .row > div {
}
header .row > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
header .mainlogo {
}
header h5 {
  margin-bottom: 0px;
  font-weight: bold;
  letter-spacing: 2.5px;
}
header .mainlogo > img {
  height: 80px;
}
header .callink {
  color: var(--orange);
  font-size: 15px;
}
header .callink span {
  /* margin-right: 3px; */
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}
header .socialink {
  color: var(--orange);
  /* margin: 0px 5px; */
  display: inline-block;
}
header .socialink span {
  display: inline-block;
  width: 25px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  /* border-radius: 50%; */
  /* border: 1px solid var(--orange); */
  border-right: 1px solid;
}
.headlinks {
}
.headlinks a {
}
.headlinks span {
}

@media (max-width: 576px) {
  header .row > div {
    padding: 0px;
  }
  header .mainlogo > img {
    height: 80px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End header */

/* Start maincont */
.maincont {
  background: url("../img/background.jpg");
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  /* background-repeat: round !important; */
  background-position: center;
  width: 100% !important;
  height: 550px;
  position: relative;
  /* background-color: #f4e3d2; */
  margin-top: 50px;
}
.maincont .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /* background-color: rgba(177, 127, 74, 0.5); */
  /* background-color: #f36e306f; */
  background: rgba(0, 0, 0, 0.65);
}
.maincont .container {
  padding: 30px 0px;
  height: 100%;
}
.maincont .row {
  height: 100%;
}
.maincont .container > .row > div:nth-of-type(2) {
  display: flex;
  align-content: center;
  align-items: center;
}
.maincont .uptxt {
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  justify-content: center;
}
.maincont .uptxt h1 {
  margin-bottom: 30px;
  text-shadow: 1px 1px 5px #000;
  width: 400px;
  font-size: 32px;
  color: var(--orange);
}
.maincont .uptxt p {
  font-size: 17px;
  text-shadow: 1px 1px 5px #000;
  width: 400px;
  text-align: justify;
}
.maincont .upform {
  width: 80%;
  /* margin-left: auto; */
  margin: auto;
}
.maincont form {
}
.maincont .formgrp {
}
.maincont form label {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
  font-size: 12px;
}
.maincont form input,
.maincont form select,
.maincont form textarea {
  color: var(--white);
  width: 100%;
  padding: 5px 5px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 12px;
  background-color: #0000004d;
}
.maincont form select option {
  background-color: var(--white);
  color: var(--black);
}
/* .maincont form input[type="submit"] {
  margin-top: 10px;
} */
.maincont form input[type="submit"] {
  margin-top: 5px;
  width: 100%;
  padding: 7px;
  background-color: var(--orange);
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
.maincont form input[type="submit"]:hover {
  background-color: var(--red);
}
.maincont .formgrp input {
}
.maincont .formgrp input::placeholder {
}
.maincont .formgrp input:focus {
}

.maincont .custom-inpfile {
  background-color: #0000004d;
  position: relative;
  border: 1px solid var(--white);
  z-index: 1;
  width: 100%;
  height: 40px;
  border-radius: 5px;
  margin: auto;
  cursor: pointer;
}
.maincont .custom-inpfile .repl-inpfile {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 10px;
  color: var(--txtgold);
  cursor: pointer;
}
.maincont .custom-inpfile .repl-inpfile h5 {
  color: var(--white);
  text-align: left;
  font-size: 14px;
}
.maincont .custom-inpfile .repl-inpfile span {
  font-size: 16px;
  color: var(--txtgold);
  margin-right: 10px;
}
.maincont .custom-inpfile input[type="file"] {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  cursor: pointer;
}
.maincont .custom-inpfile strong {
  font-size: 11px;
  font-weight: normal;
  display: block;
  margin-top: 10px;
}
@media (max-width: 576px) {
  .maincont {
    height: 620px;
  }
  .maincont .uptxt h1 {
    margin-bottom: 15px;
    font-size: 26px;
    width: 100%;
  }
  .maincont .uptxt p {
    font-size: 15px;
    width: 100%;
  }
  .maincont .upform {
    width: 100%;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .maincont {
    height: 650px;
  }
  .maincont .upform {
    width: 80%;
    margin: 0;
    margin-right: auto;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .maincont .upform {
    width: 100%;
  }
  .maincont form label {
    font-size: 10px;
  }
  .maincont .uptxt h1 {
    width: 340px;
    font-size: 27px;
  }
  .maincont .uptxt p {
    font-size: 14px;
    width: 340px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End maincont */

/* Start slideshow */
.slideshow {
  height: calc(100vb - 90px);
  margin-bottom: 200px;
}
.slideshow .upcarousel {
}
.slideshow .carousel-item {
  position: relative;
}
.slideshow .carousel-item > img {
  width: 100%;
}
.slideshow .slidetitle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}
.slideshow .slidetitle h1 {
  color: var(--white);
  font-size: 60px;
  text-shadow: 1px 1px 2px #000;
}
.slideshow .slidetitle p {
  color: var(--white);
  text-shadow: 1px 1px 2px #000;
}
.slideshow .slidetitle div {
}
.slideshow .slidetitle .morebtn {
  display: inline-block;
  padding: 7px 25px;
  background-color: var(--orange);
  color: var(--white);
}

.slideshow .banarsmall {
  display: none;
}
.slideshow .banarlarge {
}
.slideshow .carousel-control-next,
.slideshow .carousel-control-prev {
  display: flex;
  /* background-color: var(--orange); */
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: var(--main-transition);
}
.slideshow .carousel-control-nexthover,
.slideshow .carousel-control-prev:hover {
  background-color: var(--red);
}
.slideshow .carousel-control-next {
  right: 100px;
}
.slideshow .carousel-control-prev {
  left: 100px;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 20px;
  height: 7px;
  /* border-radius: 50%; */
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: var(--orange);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.8;
  transition: opacity 0.6s ease;
}
.carousel-indicators .active {
  background-color: var(--red);
}
.carousel-indicators {
  bottom: -50px;
}
.slideshow .carousel-control-next,
.slideshow .carousel-control-prev {
  width: 40px;
  height: 80px;
}
.carousel-control-next-icon {
  background-image: url("../img/next.png");
  height: 40px !important;
}
.carousel-control-prev-icon {
  background-image: url("../img/back.png");
  height: 40px !important;
}
@media (max-width: 576px) {
  .slideshow .slidetitle h1 {
    font-size: 16px;
  }
  .slideshow .slidetitle p {
    font-size: 10px;
  }
  .slideshow .slidetitle .morebtn {
    padding: 4px 7px;
    font-size: 10px;
  }
  /* .slideshow .banarsmall {
    display: block;
  }
  .slideshow .banarlarge {
    display: none;
  } */
  .slideshow .carousel-control-prev {
    left: 0px;
  }
  .slideshow .carousel-control-next {
    right: 0px;
  }
  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    width: 1rem;
    height: 1rem 16px;
  }
  .slideshow .carousel-control-next,
  .slideshow .carousel-control-prev {
    width: 30px;
    height: 50px;
  }
  .slideshow {
    margin-bottom: 0;
    height: auto;
  }
  .carousel-indicators {
    bottom: -40px;
  }
  .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 15px;
    height: 5px;
  }
  .carousel-control-next-icon {
    height: 20px !important;
  }
  .carousel-control-prev-icon {
    height: 20px !important;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .slideshow {
    height: 100vb;
    margin-bottom: 0;
    overflow: hidden;
  }
  .slideshow .slidetitle h1 {
    font-size: 50px;
  }
  .slideshow .banarsmall {
    display: block;
  }
  .slideshow .banarlarge {
    display: none;
  }
  .slideshow .carousel-control-prev {
    left: 30px;
  }
  .slideshow .carousel-control-next {
    right: 30px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .slideshow {
    height: auto;
    margin-bottom: 0px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .slideshow {
    height: auto;
    margin-bottom: 0px;
  }
}
/* End slideshow */

/* Start feedback */
.feedback .container {
  padding: 50px 0px;
}
.feedback h2 {
  color: var(--green);
  text-align: center;
  margin-bottom: 30px;
}
.feedback .googfeedback {
  background-color: var(--white);
  background-color: var(--orange);
  box-shadow: 1px 1px 1px #ddd, -1px -1px 1px #ddd;
  height: 100%;
  padding: 20px 0px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.feedback .googtaredata {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.feedback .googtaredata > div {
  padding: 10px;
}
/* .feedback .googtaredata img {
  border-radius: 50%;
  width: 50px;
} */
.feedback .googtaredata h6 {
  color: var(--white);
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 16px;
}
.feedback .googtaredata p {
  color: var(--white);
}
/* .feedback .googfeedback .totstars {
  padding: 10px;
}
.feedback .googfeedback .totstars span {
  color: #f0b000;
} */
.feedback .upbtngen {
  padding: 10px;
}
.feedback .upbtngen a {
  margin-top: 10px;
  display: block;
  width: 100%;
  padding: 12px;
  background-color: var(--orange);
  background-color: var(--white);
  color: white;
  color: var(--orange);
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  text-align: center;
  transition: all 0.25s ease-in-out;
}
.feedback .upbtngen a:hover {
  background-color: var(--red);
  color: var(--white);
}
.feedback .googfeedback .googsp {
  color: #636363;
  font-size: 14px;
  display: inline-block;
  padding: 10px;
}
.feedback .googfeedback .pwgoog {
  padding: 0px 10px;
}
.feedback .feedslider .owl-nav,
.feedback .feedslider .owl-dots {
  display: none;
}
.feedback .upcarbox {
  padding: 3px;
}
.feedback .slidebox {
  /* background-color: #f36d3017; */
  border-radius: 10px;
  padding: 13px;
  border: 1px solid var(--orange);
}
.feedback .slidebox a {
  font-size: 15px;
  margin-bottom: 5px;
  display: block;
  color: var(--black);
  height: 45px;
}
.feedback .upstarts {
  margin-bottom: 20px;
}
.feedback .upstarts span {
  color: #f0b000;
  color: var(--orange);
}
.feedback .slidebox h5 {
  font-size: 15px;
  font-weight: bold;
}
.feedback .slidebox > p {
  font-size: 11px;
  height: 116px;
  margin-bottom: 10px;
}
@media (max-width: 576px) {
  .feedback .row > div {
    margin-bottom: 20px;
  }
}
@media (max-width: 576px) {
}
@media (min-width: 577px) and (max-width: 769px) {
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End feedback */

/* Start footer */
.footer {
  border-top: 1px solid #ddd;
}
.footer .container {
  padding: 20px 0px;
}
.footer img {
  height: 80px;
}
.footer .container .row {
}
.footer .container .row > div {
  display: flex;
  justify-content: center !important;
  align-items: center;
}
.footer .container .row > div:nth-of-type(1) {
  justify-content: left;
}
.footer .container .row > div:nth-of-type(2) {
  text-align: center;
}
.footer .container .row > div:nth-of-type(3) {
  justify-content: right;
}
.footer .upsocial a {
  color: var(--orange);
  margin: 0px 5px;
  display: inline-block;
}
.footer .upsocial span {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid var(--orange);
}
.footer p {
  color: var(--orange);
  margin-bottom: 0px;
}
@media (max-width: 769px) {
  .footer .container .row > div {
    margin-bottom: 20px;
    justify-content: center !important;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End footer */

/* Start thanks */
.thanks {
  height: 100vh;
  background-color: var(--section-background);
}
.thanks .container {
  padding: 100px 0px;
  text-align: center;
}
.thanks h2 {
  color: var(--yellow);
}
.thanks h4 {
  margin-bottom: 30px;
}
.thanks a {
  background-color: var(--orange);
  color: var(--black);
  padding: 7px 20px;
  display: inline-block;
  border-radius: 5px;
  transition: all 0.35s ease-in-out;
}
.thanks a:hover {
  background-color: var(--red);
  color: var(--white);
}
/* End thanks */

/* starting button-top */
#button-top {
  background-color: var(--orange);
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: none;
  cursor: pointer;
  border: 1px solid #fff;
  color: var(--main-color);
}

/*  End button-top */

/* @media (max-width: 576px) {
}
@media (min-width: 577px) and (max-width: 769px) {
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
} */

/* very lage screens */
/* @media (min-width: 1200px) and (max-width: 1399px) {
}

@media (min-width: 1400px) and (max-width: 1599px) {
}

@media (min-width: 1600px) and (max-width: 1799px) {
}

@media (min-width: 1800px) and (max-width: 1999px) {
}

@media (min-width: 2000px) and (max-width: 2399px) {
}

@media (min-width: 2400px) and (max-width: 2799px) {
}

@media (min-width: 2800px) and (max-width: 3199px) {
}

@media (min-width: 3200px) {
} */
/* very lage screens */