body{
font-family:system-ui;
background:#f5f7fb;
color:#2c3e50;
}

/* HEADER */

.navbar{
background:#fff;
padding:18px 0;
box-shadow:0 3px 12px rgba(0,0,0,.05);
}

.logo{
font-weight:700;
font-size:22px;
}

.nav-link{
font-weight:500;
margin-right:18px;
}

.btn-proposal{
    border-radius:14px;
    /* padding:10px 18px; */
    padding: 8px 16px 8px 16px;
    margin-left: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 102, 153, 1) 0%,
    rgba(0, 51, 102, 1) 100%
  );
  box-shadow: 0px 4px 6px -4px rgba(0, 51, 102, 0.2),
    0px 10px 15px -3px rgba(0, 51, 102, 0.2);
    font-weight: 600;

}


/* HERO */

.hero-section{
padding:80px 0;

}

.hero-card{
background:white;
padding:50px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.hero-card h1{
font-size:48px;
font-weight:800;
color: #0f172b;
}

.hero-text{
margin-top:15px;
color: #45556c;
font-size:18px;
line-height: 29.25px;
  font-weight: 400;
}

.hero-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:32px;
}

.hero-tags span{
background:#eef1f6;
padding:6px 12px;
border-radius:20px;
/* margin-right:6px; */
font-size:13px;
border-style: solid;
  border-color: #e2e8f0;
  border-width: 0.8px;
  font-weight: 500;
  white-space:nowrap;
}

.explore-services {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 14px;
  line-height: 32px;
  font-weight: 700;
  left: 20px;
  top: 12.6px;
  box-shadow: 0px 4px 6px -4px rgba(0, 51, 102, 0.2),
    0px 10px 15px -3px rgba(0, 51, 102, 0.2);

    background: linear-gradient(
    180deg,
    rgba(0, 102, 153, 1) 0%,
    rgba(0, 51, 102, 1) 100%
  );
  width: 170.94px;
  height: 45.6px;
  border-radius: 14px;
  
}

.arrow {
  width: 16px;
  height: 16px;
  left: 134.94px;
  top: 14.8px;
  overflow: visible;
}

.view-cloud-model {
  margin-left: 10px;
  color: #314158;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 14px;
  line-height: 32px;
  font-weight: 700;
  border-radius: 14px;
  align-items: center;
  width: 161.98px;
  height: 45.6px;
  border-style: solid;
  border-color: #e2e8f0;
  border-width: 0.8px;
}

.hero-buttons{
margin-top:25px;
}


/* WHY EWAN */

.why-ewan{
background:white;
padding:30px;
border-radius:18px;
box-shadow:0 10px 20px rgba(0,0,0,.05);
/* width: 424.2px; */
  height: 466.14px;
}

.why-card{
background:#f5f7fb;
padding:20px;
border-radius:12px;
}

.why-card h6{
font-weight:600;
}

.why-card p{
font-size:13px;
color:#6c757d;
}

.text-why-card {
    font-size:13px;
color:#6c757d;
}


/* SECTIONS */

.section{
padding:90px 0;
}

.section-light{
background:#f7f9fc;
}

.section-title{
margin-bottom:40px;
}

.lightbulb {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}

.target {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}


/* Container ############################*/
.row-about {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Column styling */
.col-md-6-about {
    flex: 1 1 calc(50% - 1.5rem);
    min-width: 300px; /* Prevents columns from getting too small */
    display: flex;
}

/* Card styling */
.about-card {
    background: #fff; /* Add your background color */
    padding: 2rem;
    border-radius: 8px; /* Add your border radius */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Add your shadow */
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Responsive font sizes */
.about-card {
    /* Base font sizes for mobile */
    font-size: 14px;
}

.about-card h5 {
    font-size: 1.3em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.about-card p,
.about-card li {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.about-card ul {
    flex: 1;
    margin: 0;
    padding-left: 1.2rem;
}

/* Icons */
.lightbulb,
.target {
    width: 24px;
    height: 24px;
}

/* Tablet adjustments */
@media (min-width: 768px) {
    .about-card {
        font-size: 15px;
    }
}

/* Desktop adjustments */
@media (min-width: 992px) {
    .about-card {
        font-size: 16px;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .about-card {
        font-size: 16px;
        padding: 2.5rem;
    }
}

/* Maintain equal height when content changes */
.about-card p:last-child,
.about-card li:last-child {
    margin-bottom: 0;
}




/**********************************************/



/* ABOUT */

/* .about-card{
background:white;
padding:30px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
} */

.about-icon{
width:40px;
height:40px;
background:#eaf2ff;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
color:#2a6df4;
margin-bottom:15px;
}


/* SERVICES */

.service-card{
display:flex;
justify-content:space-between;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.service-card-1{
display:flex;
justify-content:space-between;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
background-image: url('../images/icon0.svg');
background-repeat: no-repeat;
  background-position: top right;

}

.service-card-2{
display:flex;
justify-content:space-between;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
background-image: url('../images/icon1.svg');
background-repeat: no-repeat;
  background-position: top right;

}

.service-card-3{
display:flex;
justify-content:space-between;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
background-image: url('../images/icon2.svg');
background-repeat: no-repeat;
  background-position: top right;

}

.service-card-4{
display:flex;
justify-content:space-between;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
background-image: url('../images/icon3.svg');
background-repeat: no-repeat;
  background-position: top right;

}

.service-card-5{
display:flex;
justify-content:space-between;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
background-image: url('../images/icon4.svg');
background-repeat: no-repeat;
  background-position: top right;

}

.service-card-6{
display:flex;
justify-content:space-between;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
background-image: url('../images/icon5.svg');
background-repeat: no-repeat;
  background-position: top right;

}

.service-icon{
width:40px;
height:40px;
background:#eef3ff;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:#2a6df4;
}


/* PRODUCTS */

.product-card{
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.product-bar{
height:8px;

background: linear-gradient(180deg, rgba(0, 102, 153, 1) 0%, rgba(0, 51, 102, 1) 100%);
}

.learn-more {
  color: #006699;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  left: -1px;
  top: -0.2px;
}

.arrow2 {
  width: 16px;
  height: 16px;
  left: 83.26px;
  top: 2px;
  overflow: visible;
}

.arrow1 {
  width: 16px;
  height: 16px;
  left: 83.26px;
  top: 2px;
  overflow: visible;
}

.product-body{
padding:30px;
}

.container29 {
  background: linear-gradient(
    180deg,
    rgba(0, 102, 153, 1) 0%,
    rgba(0, 51, 102, 1) 100%
  );
  border-radius: 14px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
  box-shadow: 0px 4px 6px -4px rgba(0, 51, 102, 0.2),
    0px 10px 15px -3px rgba(0, 51, 102, 0.2);
}

.map-pin {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}

.container37 {
  background: rgba(0, 51, 102, 0.1);
  border-radius: 10px;
  padding: 8px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  position: relative;
}

/* WORKFLOW */

.work-section{
background:#f7f9fc url("../img/workflow-bg.svg") no-repeat right center;
background-size:420px;
}

.work-step{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
}


/* CONTACT */

/* .contact-card{
background:white;
padding:30px;
border-radius:16px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
} */

/* CONTACT SECTION */

.contact-section{
background:#f4f6fb;
padding:80px 0;
}


/* CARD */

.contact-card{
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
height:100%;
}


/* TITLES */

.contact-title{
font-size:24px;
font-weight:700;
margin-bottom:10px;
}

.contact-sub{
color:#6b7a90;
margin-bottom:30px;
}


/* CONTACT ITEMS */

.contact-item{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;
}

.contact-icon{
width:48px;
height:48px;
border-radius:50%;
background:#eef2f7;
display:flex;
align-items:center;
justify-content:center;
color:#0d5ea8;
font-size:18px;
}

.contact-label{
font-size:12px;
font-weight:700;
color:#8c9bb3;
letter-spacing:.5px;
}

.contact-text{
font-weight:600;
font-size:16px;
}


/* FORM INPUTS */

.custom-input{
height:55px;
border-radius:14px;
border:1px solid #e2e8f0;
margin-bottom:18px;
padding-left:18px;
font-size:15px;
}

.textarea{
height:120px;
resize:none;
}


/* BUTTON */

.submit-btn{
width:100%;
background:linear-gradient(180deg, rgba(0, 102, 153, 1) 0%, rgba(0, 51, 102, 1) 100%);
color:#fff;
height:60px;
border-radius:16px;
font-weight:600;
font-size:16px;
margin-top:10px;
box-shadow:0 10px 20px rgba(13,94,168,.25);
}

.submit-btn:hover{
background:#094e8c;
color:white;
}


/* NOTES */

.contact-note{
font-size:13px;
color:#8c9bb3;
margin-top:15px;
}


/* FOOTER */

.footer{
background:white;
padding:20px;
margin-top:40px;
font-size:14px;
}


.span11 {
  background: rgba(0, 102, 153, 0.1);
  border-radius:50%;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  margin-right: 10px;
}
._1 {
  color: #006699;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
}

.container42 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 24px;
  position: relative;
}

.h-312 {
  flex-shrink: 0;
  width: 64.39px;
  height: 24px;
  position: relative;

}

[dir="rtl"] .span11{
 flex-direction: row-reverse;
 /* justify-content: flex-end; */
}

[dir="rtl"] .container42{
  justify-content: flex-end;
 flex-direction: row-reverse;
}


/* RTL SUPPORT */

[dir="rtl"] body{
text-align:right;
font-family:"Tajawal",sans-serif;
}

[dir="rtl"] .navbar-nav{
margin-right:auto;
margin-left:0;
}

[dir="rtl"] .nav-link{
margin-left:18px;
margin-right:0;
}

[dir="rtl"] .hero-tags span{
margin-left:6px;
margin-right:0;
}

[dir="rtl"] .service-card{
flex-direction:row-reverse;
}

[dir="rtl"] .contact-item{
flex-direction:row-reverse;
}


[dir="rtl"] .container42{
flex-direction:row-reverse;
}

[dir="rtl"] .hero-buttons{
flex-direction:row-reverse;
}

[dir="rtl"] .text-end{
text-align:left !important;
}

[dir="rtl"] .product-body{
text-align:right;
}

[dir="rtl"] ul{
padding-right:20px;
padding-left:0;
}
                                 

.why-card-text-english-align {
  float: right;
  text-align: right;
}

.why-card-text-arabic-align {
  text-align: left;
  margin-left: 0px;
  float: left;
}

.about-subtitle-en {
  float: right;
  text-align: right;
}

.about-subtitle-ar {
  float:left;
  text-align: left;
}

.services-subtitle-en {
  float: right;
  text-align: right;
}

.services-subtitle-ar {
  float:left;
  text-align: left;
}

.products-subtitle-en {
  float: right;
  text-align: right;
}

.products-subtitle-ar {
  float:left;
  text-align: left;
}

.clouds-subtitle-en {
  float: right;
  text-align: right;
}

.clouds-subtitle-ar {
  float:left;
  text-align: left;
}

.how-subtitle-en {
  float: right;
  text-align: right;
}

.how-subtitle-ar {
  float:left;
  text-align: left;
}

.contacts-subtitle-en {
  float: right;
  text-align: right;
}

.contacts-subtitle-ar {
  float:left;
  text-align: left;
}