/* reset css start */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600;700&family=Roboto&family=Playfair+Display&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* === Arabic Font Override === */
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] div {
    font-family: 'Cairo', sans-serif !important;
}
html[lang="ar"] .highlight {
  color: #3B82F6;
  font-weight: 600;
  position: static;
}

html[lang="ar"] .arabic_text
 {
    text-align: right !important;
    margin-right: 10px;

}

html[lang="ar"] .text-start {
    text-align: right !important
}

html[lang="ar"] .arabic_section
 {
    text-align: right !important;

}

:root {
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Poppins', sans-serif;
    --heading: 232 33% 31%;
    --body: 223 22% 41%;
    --border: 0 0% 92%;
    --base-h: 17;
    --base-s: 100%;
    --base-l: 60%;
    --base: var(--base-h) var(--base-s) var(--base-l);
    --base-100: var(--base-h) var(--base-s) calc(var(--base-l) + 20%);
    --base-200: var(--base-h) var(--base-s) calc(var(--base-l) + 15%);
    --base-300: var(--base-h) var(--base-s) calc(var(--base-l) + 10%);
    --base-400: var(--base-h) var(--base-s) calc(var(--base-l) + 5%);
    --base-500: var(--base-h) var(--base-s) calc(var(--base-l) - 5%);
    --base-600: var(--base-h) var(--base-s) calc(var(--base-l) - 8%);
    --base-700: var(--base-h) var(--base-s) calc(var(--base-l) - 10%);
    --base-800: var(--base-h) var(--base-s) calc(var(--base-l) - 15%);
    --base-900: var(--base-h) var(--base-s) calc(var(--base-l) - 20%);
    --accent-h: 260;
    --accent-s: 92%;
    --accent-l: 10%;
    --accent-50: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 25%);
    --accent-100: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 20%);
    --accent-200: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 15%);
    --accent-300: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 5%);
    --accent-400: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 3%);
    --accent: var(--accent-h) var(--accent-s) var(--accent-l);
    --accent-600: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 3%);
    --accent-700: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%);
    --accent-800: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 15%);
    --accent-900: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 20%);
    --primary: 245 82% 67%;
    --primary-dark: 245 82% 60%;
    --secondary: 210 7% 56%;
    --success: 147 67% 47%;
    --success-dark: 147 67% 42%;
    --success-dark: 147 67% 30%;
    --danger: 360 78% 62%;
    --danger-dark: 360 78% 58%;
    --danger-darker: 360 78% 50%;
    --warning: 29 100% 63%;
    --warning-dark: 29 100% 58%;
    --warning-darker: 29 100% 50%;
    --info: 200 90% 53%;
    --info-dark: 200 90% 50%;
    --dark: 206 70% 11%;
    --dark-h: 0;
    --dark-s: 0%;
    --dark-l: 13%;
    --darker: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.1);
    --white: 0 0% 100%;
    --light-h: 218;
    --light-s: 49%;
    --light-l: 97%;
    --light-50: var(--light-h) var(--light-s) calc(var(--light-l) + 33%);
    --light-100: var(--light-h) var(--light-s) calc(var(--light-l) + 20%);
    --light-200: var(--light-h) var(--light-s) calc(var(--light-l) + 15%);
    --light-300: var(--light-h) var(--light-s) calc(var(--light-l) + 10%);
    --light-400: var(--light-h) var(--light-s) calc(var(--light-l) + 2%);
    --light: var(--light-h) var(--light-s) var(--light-l);
    --light-600: var(--light-h) var(--light-s) calc(var(--light-l) - 2%);
    --light-700: var(--light-h) var(--light-s) calc(var(--light-l) - 10%);
    --light-800: var(--light-h) var(--light-s) calc(var(--light-l) - 15%);
    --light-900: var(--light-h) var(--light-s) calc(var(--light-l) - 20%);
}

@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

html {
   scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #6f6f6f;
    font-size: 16px;
    padding: 0;
    margin: 0;
    font-weight: 400;
    position: relative;
    line-height: 1.7;
}
section.container {
    max-width: 1454px;
    margin: 0 auto;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

button {
    cursor: pointer;
}

*:focus {
    outline: none;
}

button {
    border: none;
}

button:focus {
    outline: none;
}

span {
    display: inline-block;
}

a:hover {
    color: #3B82F6;
}
.red {
    background-color: red;
    color:#fff;
}

p.sub-text {
    font-size: 50px !important;
}


/* reset css end */
/*blog*/
.blog-sidebar {
    padding: 20px;
    border-radius: 3px;
    top: 110px;
    border: 1px solid #dddddd8f;
}


/*Hero Section*/
.highlight {
  position: relative;
  color: #3B82F6;
  font-weight: 600;
}

.highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 5px;
  background-color: #3B82F6;
  border-radius: 50px;
  transform: scaleX(1);
  transform-origin: left;
  z-index: -1;
}

/* how it work 
p tow lines  */

.two-line-text {
    width: 180px; 
    text-align: center;
    word-break: break-word;
    white-space: normal;
    min-height: 2.5em; 
    margin: 0 auto;
}

.triangle-bg {
    top: 0;
    left: 0;
    width: 139px;
    z-index: 0;
    pointer-events: none;
}

.star-bg {
    top: 0;
    left: 0;
    width: 350px !important;
    z-index: 0;
    pointer-events: none;
}


section.py-5.position-relative {
    z-index: 1;
}


/* Medium devices (tablets, 768px and up) */
@media (max-width: 780px) {

  p.sub-text {
    font-size: 20px !important;
}



}

/* devices (from 800px up) */
@media (min-width: 781px) and (max-width: 900px)  {

}


/* Large devices (from 992px up) */
@media (min-width: 901px) and (max-width: 1000px)  {

}

/* Large devices (from 1000px up) */
@media (min-width: 1000px)  {

}

@media (min-width: 1694px)  {
 


}