* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@font-face {
  font-family: basic;
  src: url("./SFUIText/SFUIText-Medium.otf");
}
@font-face {
  font-family: headings;
  src: url("./SFUIText/SFUIText-Bold.otf");
}

nav {
  position: fixed;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1vw 8vw;
  background-color: #fff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}

nav .navigation {
  display: flex;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fcf8dd;
  padding: 10px 0;
  width: 250px;
  border-radius: 5px;
}

.dropdown-content a {
  color: #f77f00;
  padding: 10px 20px;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f77f00;
  color: #fcf8dd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.navigation ul li {
  padding: 0px 10px;
}

.navigation ul li a {
  font-family: basic;
  font-size: 18px;
}

#menu-close {
  display: none;
}

#menu-btn {
  font-size: 20px;
  display: none;
}

img {
  width: 10rem;
}

ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

ul li {
  list-style: none;
  margin-left: 30px;
}

ul li a {
  text-decoration: none;
  color: black;
  font-family: basic;
  font-size: 16px;
  font-weight: 500;
}

.home {
  width: 100%;
  height: 90vh;
  padding: 4rem 0rem;
  margin-top: 5rem;
  background: rgba(0, 0, 0, 0) url("./Images/HOME-01-01-01.png");
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: left;
}

.home .homeContainer {
  margin-left: 3rem;
}

.homeContainer h1 {
  font-size: 2.2rem;
  font-family: headings;
  color: white;
  margin-bottom: 7px;
  word-wrap: normal;
}

.homeContainer p{
  color: #caf0f888;
  word-wrap: normal;
  margin: 0;
}

.homeContainer button {
  margin-top: 15px;
  padding: 7px 11px;
  border: none;
  border-radius: 5px;
  background-color: black;
  font-family: basic;
  color: white;
  cursor: pointer;
}

.about {
  width: 100%;
  height: auto;
  padding: 4rem 0rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.rightSection {
  width: 40%;
}

.rightSection .headingAbout {
  font-family: headings;
  margin-bottom: 12px;
}

.rightSection .aboutInfo {
  font-family: basic;
  margin-bottom: 20px;
}

.aboutInfo p {
  font-size: 19px;
  margin: 0;
}

.leftSection .leftHeading {
  font-family: headings;
  margin-bottom: 12px;
}

.boxContainer .row1 {
  display: flex;
  margin: 20px 0px;
}

.row1 .box1 {
  padding: 20px;
  background-color: #caf0f8;
  border: none;
  border-radius: 5px;
  margin: 0px 5px;
}

.box1 p {
  font-family: basic;
  color: #03045e;
  font-size: 19px;
}

.service {
  width: 100%;
  height: auto;
  padding: 4rem 0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.serviceHeader {
  margin-bottom: 3rem;
}

.serviceHeader h2 {
  font-family: headings;
  font-size: 2rem;
  word-wrap: normal;
}

.rowService1 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.serviceBox {
  width: 23rem;
  padding: 1.5rem 1rem;
  margin: 0px 20px;
  border: 2px solid #03045e;
  border-radius: 5px;
  word-wrap: normal;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: #caf0f833;
}

.serviceBox .FstImage {
  margin-bottom: 13px;
}

.serviceBox img {
  width: 5rem;
}

.serviceBox .Fst {
  font-family: basic;
}

.serviceBox .Fst .title {
  font-size: 20px;
  margin-bottom: 7px;
}

.serviceBox .btnFst {
  margin-top: 13px;
}

.serviceBox .btnFst button {
  padding: 7px 11px;
  border: none;
  border-radius: 5px;
  background-color: #90e0ef;
  font-family: basic;
  color: black;
  cursor: pointer;
  font-size: 16px;
}

.specialize {
  width: 100%;
  height: auto;
  padding: 4rem 0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: #caf0f8;
}

.specializeCon {
  display: flex;
  flex-wrap: wrap;
}

.speHeading {
  margin-bottom: 2rem;
}

.speHeading h2 {
  font-family: headings;
  font-size: 2rem;
}

.specBox {
  width: 30rem;
  padding: 1.5rem 1.3rem;
  margin: 0px 20px;
  border: 2px solid #03045e;
  border-radius: 5px;
  word-wrap: normal;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.upperSpec img {
  width: 3rem;
  margin-right: 1rem;
}

.specBox .upperSpec {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.upperSpec h3 {
  font-family: headings;
}

.middelSec {
  margin-top: 15px;
}

.middelSec p {
  font-family: basic;
}

.bottomSec {
  margin-top: 15px;
}

.bottomSec .corporate h3 {
  margin-bottom: 7px;
  font-family: headings;
}

.bottomSec .corporate p {
  font-family: basic;
  margin: 5px 0px;
}
.bottomSec .corporate ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bottomSec .corporate ul li {
  font-family: basic;
  padding: 3px 0px;
  list-style: circle;
}

.bottomSec .vat {
  margin-top: 20px;
}

.specializeCon .specBox .btnFst button {
  padding: 7px 11px;
  border: none;
  border-radius: 5px;
  background-color: #90e0ef;
  font-family: basic;
  color: black;
  cursor: pointer;
  margin-top: 20px;
  font-size: 16px;
  width: 100%;
}

.security {
  width: 100%;
  height: auto;
  padding: 4rem 0rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.firstRight h2 {
  font-family: headings;
  font-size: 2rem;
  margin-bottom: 15px;
}

.firstRight p {
  font-family: basic;
  font-size: 19px;
  padding: 12px 0px;
}

.firstRight i {
  color: #03045e;
}

.firstLeft img {
  width: 30rem;
}

.choose {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #e1faff5b;
}

.chooseLeft {
  padding: 20px;
}

.chooseLeft h2 {
  font-family: headings;
  font-size: 2rem;
  margin-bottom: 10px;
}

.chooseLeft p {
  font-family: basic;
  font-size: 20px;
  word-wrap: normal;
}

.chooseRight img {
  width: 40rem;
}

.chooseLeft .leftP {
  margin-bottom: 15px;
}

.chooseBoxes p {
  padding: 10px 0px;
}

.chooseBoxes i {
  color: #03045e;
}

.software {
  width: 100%;
  height: auto;
  padding: 4rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.headingSoftware {
  margin-bottom: 10px;
}

.headingSoftware h2 {
  font-family: headings;
  font-size: 2rem;
}

.softwareContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.software1 {
  margin: 2.3rem;
}

.software1 img {
  width: 12rem;
}

.contact {
  width: 100%;
  height: auto;
  padding: 4rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #03045e;
}

.contactHeading {
  margin-bottom: 2rem;
  padding: 15px;
}

.contactHeading h2 {
  font-size: 2rem;
  font-family: headings;
  text-align: center;
  color: white;
  word-wrap: normal;
}

.contactContainer {
  display: flex;
  flex-wrap: wrap;
}

.contactBox1 {
  padding: 25px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #caf0f8;
  background-color: #90e0ef;
  border-radius: 5px;
}

.contactBox1 a,
p {
  font-size: 19px;
  font-family: basic;
  color: black;
  text-decoration: none;
  margin-left: 9px;
}

.contactBox1 i {
  font-size: 17px;
}

.copy {
  width: 100%;
  height: auto;
  padding: 4rem 0rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.firstpart-foot {
  text-align: center;
}

.secondpart-foot p {
  font-family: basic;
  font-size: 20px;
  color: #03045e;
  margin-bottom: 10px;
}

.comapnyName h2 {
  font-family: headings;
}

.comapnyName p {
  font-family: basic;
  color: rgb(126, 124, 124);
  margin: 0;
}

.secondpart-foot ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}

.secondpart-foot li {
  list-style: none;
  font-size: 18px;
  color: black;
  font-family: basic;
  margin: 10px 0px;
}

.logo-footer img {
  width: 12rem;
}

.secondpart-foot a {
  text-decoration: none;
  font-size: 15px;
}

.section {
  display: flex;
  flex-wrap: wrap;
}

.secondpart-foot {
  margin: 25px;
}

.third div {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}

.third div p {
  font-family: basic;
  font-size: 23px;
  font-weight: 500;
}

.third .addressP {
  color: black;
  font-size: 16px;
}

.third div i {
  margin-right: 10px;
  font-size: 18px;
}

.third div a {
  color: black;
  text-decoration: none;
}

.footerHR {
  margin: 0px 20px;
}

.copymarking {
  padding: 1rem 0rem;
}

.copyright {
  font-family: basic;
  font-size: 17px;
  text-align: center;
}

.marking {
  margin-top: 5px;
  color: rgb(88, 88, 88);
}

/* uae corporate code  */

.uaeCor {
  width: 100%;
  height: auto;
  margin-top: 5rem;
  /* padding: 3rem 0px; */
}

.heading-uae {
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background: rgba(0, 0, 0, 0.5) url('https://rics.scene7.com/is/image/rics/Modus_nov21_burjkhalifa_header_v2?$article-big-img-desktop$&op_sharpen=1');
  background-size: cover;
  background-blend-mode: darken;
}

.heading-us {
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background: rgba(0, 0, 0, 0.5) url('https://bhgrecollection.com/blog/wp-content/uploads/2019/11/shutterstock_252184543.jpg');
  background-size: cover;
  background-blend-mode: darken;
}


.heading-uae h1 {
  font-family: headings;
  font-size: 2.8rem;
  margin-bottom: 10px;
  word-wrap: normal;
  color: white;
}

.heading-us h1 {
  font-family: headings;
  font-size: 2.8rem;
  margin-bottom: 10px;
  word-wrap: normal;
  color: white;
}

.heading-uae p {
  font-family: basic;
  font-size: 19px;
  word-wrap: normal;
  color: white;
}

.heading-us p {
  font-family: basic;
  font-size: 19px;
  word-wrap: normal;
  color: white;
}
.-con{
  width: 70%;
}

.why-imp {
  margin-top: 20px;
  padding-left: 2rem;
  margin-bottom: 20px;
}

.why-imp h2 {
  font-family: headings;
}

.why-imp ul {
  display: flex;
  margin-top: 10px;
  flex-direction: column;
  align-items: flex-start;
}

.why-imp ul li {
  font-family: basic;
  padding: 10px 0px;
  font-size: 19px;
  list-style: lower;
  word-wrap: normal;
}

.whatBoxes {
  margin-top: 15px;
}

.whatBox {
  border: 1px solid #03045e;
  padding: 2rem;
  width: auto;
  background-color: #caf0f8;
  border-radius: 5px;
  margin: 15px;
}

.row1 {
  display: flex;
  flex-wrap: wrap;
}

.whatBox p {
  font-family: basic;
  text-align: center;
  font-size: 17px;
  word-wrap: normal;
}

.whatBox b {
  font-size: 20px;
}

.vatUae {
  width: 100%;
  height: auto;
  padding: 3rem 10px;
}

/* about us page */

.about-main {
  width: 100%;
  height: auto;
  margin-top: 5rem;
  padding: 3rem 0rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.info-about-left {
  width: 50%;
}

.img-about-right img {
  border-radius: 10px;
  width: 25rem;
}

.img-about-right img:hover {
  scale: 1.011;
}

.info-about-left h2 {
  font-family: headings;
  color: #03045e;
}

.info-about-left p {
  font-family: basic;
  font-size: 19px;
  margin: 0;
}

/* contact page  */

.cta-contact{
    width: 100%;
    margin-top: 5rem;
    height: auto;
    padding: 4rem 0rem;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #e4faff;
    color: #03045e;
}

.rightcta-image{
    margin-right: 5rem;
}

.rightcta-image .cta-img{
    width: 35rem;
}

.firstpart{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.leftcta-info{
    border: 1px solid lightgray;
    padding: 25px;
    box-shadow: 0px 0px 50px -22px rgba(0,0,0,0.1);
    border-radius: 5px;
    background-color: #fff;
}

.contact-form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.headin-contact h2{
    font-family: headings;
}

.form{
    margin-top: 15px;
}

.form input{
    width: 30rem;
    padding: 15px 7px;
    margin: 7px 0px;
    font-family: basic;
    border-radius: 4px;
    border: 2px solid #03045e;
}

.form input,textarea:focus{
    outline: none;
}

.form textarea{
    width: 30rem;
    resize: none;
    padding: 15px 7px;
    height: 20vh;
    margin: 7px 0px;
    border-radius: 4px;
    border: 2px solid #03045e;
    font-family: basic;
}

.form button{
    padding: 10px 20px;
    background-color: #90e0ef;
    color: black;
    border: none;
    border-radius: 20px;
    font-family: basic;
    font-size: 15px;
    cursor: pointer;
}

.form button:hover{
    background-color: #caf0f8;
}

.threeboxes{
    display: flex;
    flex-wrap: wrap;
}

.onebox{
    margin: 10px;
    border: 1px solid lightgray;
    background-color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.onebox i{
    margin-right: 15px;
    font-size: 19px;
}

.onebox a{
    text-decoration: none;
    color: black;
}

.onebox p{
    font-family: basic;
    font-size: 17px;
}

@media (max-width: 1000px) {
  nav {
    padding: 15px 20px;
  }

  #menu-close {
    display: initial;
    font-size: 1.6rem;
    color: black;
    padding: 30px 0px 20px 20px;
  }

  #menu-btn {
    font-size: 20px;
    display: initial;
  }

  .navigation ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100vh;
    background-color: #90e0ef;
    transition: 0.4s ease;
  }
  .navigation ul.active {
    right: 0;
  }

  .navigation ul li {
    padding: 20px 0px 20px 40px;
    margin-left: 0;
  }
}