Update static/normalize.css

static/normalize.css

@@ -349,3 +349,398 @@ template {
 [hidden] {
   display: none;
 }
+/* start varaible */
+:root {
+  --main-color: #17252a;
+  --main-transition: 0.3s;
+}
+/* end varaible */
+
+/* start global rules */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Cairo", sans-serif;
+}
+
+ul {
+  padding: 0%;
+  margin: 0%;
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+h3 {
+  text-align: center;
+  font-size: 50px;
+  color: #17252a;
+  margin-bottom: 30px;
+}
+@media (max-width: 767px) {
+  h3 {
+    font-size: 26px;
+  }
+}
+.container {
+  padding-left: 15px;
+  padding-right: 15px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* small */
+@media (min-width: 768px) {
+  .container {
+    width: 90%;
+  }
+}
+
+/* mediuam */
+@media (min-width: 992px) {
+  .container {
+    width: 90%;
+  }
+}
+
+/* large */
+@media (min-width: 1200px) {
+  .container {
+    width: 90%;
+  }
+}
+
+/* start header  */
+header {
+  padding: 10px;
+  background-color: var(--main-color);
+  box-shadow: 0 0 10px #000;
+  z-index: 900;
+  position: relative;
+}
+header .container {
+  display: flex;
+  justify-content: space-between;
+}
+
+header .logo {
+  width: 60px;
+  height: 70px;
+}
+header nav {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+header nav i {
+  color: #fff;
+  font-size: 19px;
+  cursor: pointer;
+  opacity: 0;
+}
+header nav .main-links {
+  display: flex;
+}
+@media (max-width: 1199px) {
+  header nav i {
+    opacity: 1;
+  }
+  header nav .main-links {
+    display: none;
+  }
+  header nav i:hover + .main-links {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    background-color: #17252a;
+    padding: 20px;
+    box-shadow: 0 0 10px var(--main-color);
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    transition: var(--main-transition);
+    -webkit-transition: var(--main-transition);
+    -moz-transition: var(--main-transition);
+    -ms-transition: var(--main-transition);
+    -o-transition: var(--main-transition);
+    width: 300px;
+  }
+  header nav i:hover + .main-links li {
+    margin: 15px 0 !important;
+  }
+}
+header nav .main-links li {
+  margin-left: 15px;
+  position: relative;
+}
+header nav .main-links li a {
+  color: #def2f1;
+  font-size: 19px;
+  font-weight: 500;
+  transition: var(--main-transition);
+  padding-left: 6px;
+  padding-right: 6px;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  -webkit-transition: var(--main-transition);
+  -moz-transition: var(--main-transition);
+  -ms-transition: var(--main-transition);
+  -o-transition: var(--main-transition);
+  white-space: nowrap;
+}
+header nav .main-links li a:hover {
+  background-color: #def2f1;
+  color: #000;
+}
+header nav .main-links li ul {
+  position: absolute;
+  top: calc(100% + 60px);
+  left: 0;
+  width: 280px;
+  padding: 10px;
+  text-align: center;
+  background-color: #121c20;
+  visibility: hidden;
+  opacity: 0;
+  box-shadow: 0 0 10px var(--main-color);
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  transition: var(--main-transition);
+  -webkit-transition: var(--main-transition);
+  -moz-transition: var(--main-transition);
+  -ms-transition: var(--main-transition);
+  -o-transition: var(--main-transition);
+}
+header nav .main-links li ul li {
+  margin: 15px 0 !important;
+}
+header nav .main-links li:hover ul {
+  position: absolute;
+  visibility: visible;
+  opacity: 1;
+  top: calc(100% + 34px);
+}
+header nav .main-links li ul li a:hover {
+  letter-spacing: 4px;
+}
+@media (max-width: 1199px) {
+  header nav .main-links li:hover ul {
+    top: 0%;
+    left: calc(-100% - 50px);
+    z-index: 5;
+  }
+}
+@media (max-width: 767px) {
+  header nav .main-links li:hover ul {
+    top: 0%;
+    left: 0;
+    z-index: 5;
+  }
+}
+/* end header  */
+
+/* start landing */
+.landing {
+  width: 100%;
+  height: calc(100vh - 90px);
+  background-color: var(--main-color);
+}
+.landing .container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.landing .info {
+  color: #fff;
+}
+.landing .info h2 {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+.landing .info p {
+  font-size: 48px;
+}
+.landing img {
+  width: 450px;
+  max-width: 100%;
+}
+@media (max-width: 767px) {
+  .landing .container {
+    flex-direction: column;
+    justify-content: center;
+  }
+  .landing .info {
+    text-align: center;
+    margin-bottom: 40px;
+  }
+  .landing .info h2,
+  .landing .info p {
+    font-size: 26px;
+  }
+}
+/* end landing */
+
+/* start section images  */
+.sections img {
+  width: 100%;
+  max-width: 100%;
+  margin: 20px 0;
+  filter: grayscale(100%);
+  -webkit-filter: grayscale(100%);
+  transition: var(--main-transition);
+  -webkit-transition: var(--main-transition);
+  -moz-transition: var(--main-transition);
+  -ms-transition: var(--main-transition);
+  -o-transition: var(--main-transition);
+}
+.sections img:hover {
+  filter: grayscale(0);
+  -webkit-filter: grayscale(0);
+}
+/* end section images  */
+
+/* start counter  */
+.counter {
+  padding: 50px 0;
+
+  background-color: #eee;
+}
+
+.counter .content {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+.counter .content .box {
+  flex-basis: 45%;
+  background: #2b7a78;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  font-size: 50px;
+  font-weight: 800;
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -o-transition: 0.3s;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+}
+
+.counter .content .box:hover {
+  background-color: #121c20;
+}
+.counter .content .box p {
+  margin: 20px 0;
+  color: #2b7a78;
+}
+.counter .content .box img {
+  width: 140px;
+}
+.counter .content .box span {
+  display: block;
+  color: #fff;
+}
+@media (max-width: 767px) {
+  .counter .content .box {
+    flex-basis: 100%;
+    font-size: 28px;
+  }
+}
+/* end counter  */
+
+/* start video  */
+.video {
+  padding: 50px 0;
+}
+/* end video  */
+footer {
+  background-color: #121c20;
+  padding: 50px 0;
+  text-align: center;
+}
+footer .content {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 40px;
+}
+.footer .content .col {
+  display: flex;
+  justify-content: center;
+}
+footer .col p {
+  color: #fff;
+  font-size: 20px;
+  margin-bottom: 30px;
+}
+footer .col ul li {
+  padding: 10px 0;
+}
+footer .col ul li a {
+  color: #def2f1;
+  font-size: 19px;
+  font-weight: 500;
+  transition: var(--main-transition);
+  padding-left: 6px;
+  padding-right: 6px;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  -webkit-transition: var(--main-transition);
+  -moz-transition: var(--main-transition);
+  -ms-transition: var(--main-transition);
+  -o-transition: var(--main-transition);
+  white-space: nowrap;
+}
+footer .col ul li a:hover {
+  background-color: #def2f1;
+  color: #000;
+  letter-spacing: 4px;
+}
+footer .col img {
+  width: 150px;
+  display: block;
+  padding: 10px;
+  margin: auto;
+  transition: 0.5s;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+  -ms-transition: 0.5s;
+  -o-transition: 0.5s;
+}
+footer .col img:hover {
+  transform: rotate(360deg);
+  -webkit-transform: rotate(360deg);
+  -moz-transform: rotate(360deg);
+  -ms-transform: rotate(360deg);
+  -o-transform: rotate(360deg);
+}
+.copy-right {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 20px;
+  text-align: center;
+}
+