/* 

TemplateMo 562 Space Dynamic

https://templatemo.com/tm-562-space-dynamic

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.description_program h1 {
  color: #0A63C3;
  margin: 20px 5px;
  text-align: center;
}
.description_program p {
  margin: 5px;
  text-align: center;
}


/* Style the <li> elements within the <ol> */
.description_program ol li {
  counter-increment: list-counter; /* Increment the counter for each list item */
  padding-left: 1.5em; /* Add padding for the list item content */
  position: relative; /* Position relative to allow absolute positioning of ::before pseudo-element */
  font-size: 1rem;
  padding-bottom: 10px;
  padding-right: 10px;
}
.description_program ol li p, ul li p {
  margin: 0px;
  padding: 0px;
}
/* Style the ::before pseudo-element of <li> to create custom numbered circles */
.description_program ol li::before {
  content: counter(list-counter); /* Use the counter value as content */
  display: inline-block; /* Display as block element to style */
  width: 1.5em; /* Set width for the circle */
  height: 1.5em; /* Set height for the circle */
  border-radius: 50%; /* Make the element round */
  background-color: #0A63C3; /* Blue background color */
  color: white; /* White text color */
  font-weight: bold; /* Bold text */
  text-align: center; /* Center text horizontally */
  line-height: 1.5em; /* Center text vertically within the circle */
  position: absolute; /* Position the circle */
  left: -10px; /* Position the circle to the left of the content area */
  top: 0; /* Align the circle vertically with the content */
}
.description_program ul {
  list-style-type: none; /* Remove default list bullets */
  padding-left: 0; /* Remove default left padding */
  width: 95%;
  max-width: 850px;
  margin-left: 30px;
  position: relative; /* To ensure proper positioning of the bullets */
}

.description_program ul li {
  position: relative; /* To allow absolute positioning of the bullet */
  padding-left: 1em; /* Add padding to the left to make space for the bullet */
  margin-bottom: 10px; /* Add space between list items */
  font-size: 1rem;
}

.description_program ul li::before {
  content: ''; /* Empty content for the custom bullet */
  display: inline-block; /* Display as inline-block to style */
  width: 0.5em; /* Set width for the bullet */
  height: 0.5em; /* Set height for the bullet */
  border-radius: 50%; /* Make the bullet round */
  background-color: #0A63C3; /* Blue background color */
  color: white; /* White text color */
  text-align: center; /* Center text horizontally */
  line-height: 1.5em; /* Center text vertically within the bullet */
  position: absolute;
  left: 0;
  top: 0.25rem;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #0A63C3;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button a {
  display: inline-block;
  background-color: #0A63C3;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #0A63C3;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #0A63C3!important;
}

.background-header .nav li a.active {
  color: #0A63C3!important;
}

.header-area {
  background-color: #fafafa;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo h4 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #03a4ed;
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.logo h4 span {
  color: #0A63C3;
}

.background-header .main-nav .logo h4 {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

/* .header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
} */

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #0A63C3!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #0A63C3!important;
  opacity: 1;
}

/* .header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  background-color: #03a4ed;
} */

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #0A63C3!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #0A63C3;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  /* .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  } */
}

@media (max-width: 1200px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #0A63C3!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #0A63C3!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

/* @media (min-width: 1000px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
} */

/* Hide nav by default on smaller screens */
/* .header-area .main-nav .nav {
  display: none;
} */

/* Show it when 'active' class is added to parent */
.header-area.active-nav .main-nav .nav {
  display: flex !important;
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #0A63C3;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #0A63C3;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 200px 0px 50px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  /* background-image: url(../images/animated_blob_left.svg); */
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 193px;
  height: 467px;
}

.main-banner:before {
  content: '';
  /* background-image: url(../images/baner-dec-right.png); */
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 98px;
  height: 290px;
}

.main-banner .left-content {
  margin-right: 45px;
}

.main-banner .left-content h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #0A63C3;
  margin-bottom: 15px;
}

.main-banner .left-content h2 {
  font-size: 40px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
}

.main-banner .left-content h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .left-content h2 span {
  color: #0A63C3;
}

.main-banner .left-content p {
  margin: 20px 0px;
}

.main-banner .left-content form, .form-search-cetificate form {
  margin-top: 30px;
  /* max-width: 470px; */
  width: 95%;
  height: 66px;
  position: relative;
}

.main-banner .left-content form button, .form-search-cetificate form button {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #0A63C3;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  outline: none;
  border: none;
}

.main-banner .left-content form input, .form-search-cetificate form input {
  width: 470px;
  height: 66px;
  background-color: #03a4ed;
  border-radius: 33px;
  border: none;
  outline: none;
  padding: 0px 25px;
  color: #fff;
  letter-spacing: 0.25px;
  font-size: 15px;
  font-weight: 300;
}

.main-banner .left-content form input::placeholder, .form-search-cetificate form input::placeholder {
  color: #fff;
}



/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/

#about {
  margin-top: 120px;
}

.background-blue-wave {
  background-image: url(../images/wavy_banner.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
}

.background-blue-wave-light-green {
  background-image: url(../images/wavy_banner_light_green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
}

/* .about-us {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
} */
.about-us {
  background-image: url(../images/wavy_banner.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
}
.about-us .left-image {
  margin-right: 45px;
}

.about-us .services .item {
  margin-bottom: 30px;
}

.about-us .services .item .icon {
  float: left;
  margin-right: 25px;
}

.about-us .services .item .icon img {
  max-width: 70px;
}

.about-us .services .item h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-us .services .item p {
  color: #fff;
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  margin-top: 0px;
  padding-top: 120px;
}

.our-services .left-image {
  margin-right: 45px;
}

.our-services .section-heading h2 {
  margin-right: 100px;
}

.our-services .section-heading p {
  margin-top: 30px;
  margin-bottom: 60px;
}

.our-services .progress-skill-bar {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}

.our-services .progress-skill-bar span {
  position: absolute;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  color: #03a4ed;
}

.our-services .first-bar span {
  left: 45%;
}

.our-services .second-bar span {
  left: 55%;
}

.our-services .third-bar span {
  left: 88%;
}

.our-services .progress-skill-bar h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 14px;
}

.our-services .progress-skill-bar .full-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #f7eff1;
  position: relative;
  z-index: 1;
}

.our-services .progress-skill-bar .filled-bar {
  background: rgba(42, 179, 234);
  background: linear-gradient(105deg, rgba(42, 179, 234) 0%, rgba(42, 179, 234) 100%);
  height: 6px;
  border-radius: 3px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
}

.our-services .first-bar .filled-bar {
  width: 43%;
}

.our-services .second-bar .filled-bar {
  width: 53%;
}

.our-services .third-bar .filled-bar {
  width: 90%;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 120px;
  margin-top: 0px;
}

.our-portfolio .section-heading h2 {
  text-align: center;
  margin: 0px 90px 0px 90px;
  margin-bottom: 120px;
  position: relative;
  z-index: 1;
}

.our-portfolio .item {
  position: relative;
  overflow: visible; /* allow content to slide outside if needed */
  margin-bottom: 30px;
  cursor: pointer;
  min-width: 270px;
}

.our-portfolio .hidden-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%; /* place it just above .showed-content */
  transform: translateY(10px); /* start slightly hidden */
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  background: linear-gradient(105deg, #2ab3ea 0%, #2ab3ea 100%);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
  min-width: 270px;
  font-size: 1.2rem;
}
.our-portfolio .hidden-content * {
  font-size: 1.2rem;
}
.our-portfolio .item:hover .hidden-content,
.our-portfolio .item.active .hidden-content {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.our-portfolio .item:hover .showed-content,
.our-portfolio .item.active .showed-content {
  transform: translateY(20px);
}
/* 
.our-portfolio .item:hover .hidden-content, .our-portfolio .item:focus-within .hidden-content {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
} */

.our-portfolio .item.active .hidden-content {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  min-width: 270px;
}

.our-portfolio .showed-content {
  position: relative;
  z-index: 1;
  background: white;
  text-align: center;
  /* padding: 5px; */
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  /* transition: all 0.4s ease; */
  transition: transform 0.3s ease;
  height: 100%;
  /* margin: 30px!important; */
}

.our-portfolio .showed-content {
  top: 0px;
  position: relative;
  /* z-index: 3; */
  background-color: #fff;
  text-align: center;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  transition: all 0.5s;
  min-width: 270px;
}

.our-portfolio .item.active .showed-content {
  transform: translateY(20px);
}
/* .our-portfolio .item:hover .showed-content, .our-portfolio .item:focus-within .showed-content {
  transform: translateY(20px);
} */

.our-portfolio .hidden-content:after {
  width: 20px;
  height: 20px;
  position: absolute;
  background: rgba(42, 179, 234);
  content: '';
  left: 50%;
  bottom: -8px;
  margin-left: -5px;
  transform: rotate(45deg);
  background: linear-gradient(105deg, rgba(42, 179, 234) 0%, rgba(42, 179, 234) 100%);
  z-index: -1;
}

.our-portfolio .hidden-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.our-portfolio .hidden-content p {
  color: #fff;
}

.our-portfolio .showed-content img {
  max-width: 130px;
}


/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.our-blog {
  position: relative;
  margin-top: 80px;
  padding-top: 120px;
}

.our-blog .section-heading h2 {
  margin-right: 180px;
}

.our-blog .top-dec {
  text-align: right;
  margin-top: -80px;
}

.our-blog .top-dec img {
  max-width: 270px;
}

.our-blog .left-image {
  position: relative;
}

.our-blog .left-image img {
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.our-blog .left-image .info {
  position: relative;
}

.our-blog .left-image .info .inner-content {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 20px;
  margin-right: 75px;
  position: absolute;
  margin-top: -100px;
  padding: 30px;
}

.our-blog .left-image ul li {
  display: inline-block;
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
  margin-right: 20px;
}

.our-blog .left-image ul li:last-child {
  margin-right: 0px;
}

.our-blog .left-image ul li i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .left-image h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}

.our-blog .left-image .info .main-blue-button {
  position: absolute;
  bottom: -80px;
  left: 0;
}

.our-blog .right-list {
  margin-left: 30px;
}

.our-blog .right-list ul li {
  display: inline-flex;
  width: 100%;
  margin-bottom: 30px;
}

.our-blog .right-list .left-content {
  margin-right: 45px;
}

.our-blog .right-list .left-content span {
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
}

.our-blog .right-list .left-content span i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .right-list .left-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}


.our-blog .right-list .right-image img {
  width: 250px;
  border-radius: 20px;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding: 160px 0px;
  background-image: url(../images/contact-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading h2,
.contact-us .section-heading h2 em,
.contact-us .section-heading h2 span {
  color: #fff;
}

.contact-us .section-heading p {
  color: #fff;
  margin-top: 30px;
}

.phone-info {
  margin-top: 40px;
}

.phone-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.phone-info h4 span i {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #ff3b2c;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.phone-info h4 span a {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

form#contact .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}

form#contact .contact-dec img {
  max-width: 178px;
}

form#contact {
  margin-left: 30px;
  position: relative;
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 20px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 33px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
  text-align: center;
  align-items: center;
}
form#contact input[type="checkbox"] {
  /* width: 100%; */
  height: 23px!important;
  text-align: center;
  align-items: center;
  /* display: flex; */
  align-items: center;
}

/* .checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #aaa;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
} */
.divrememberme {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 5px;
  text-align: center;
  align-items: center;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: #2a2a2a;
}

form#contact select {
  width: 100%;
  height: 46px;
  border-radius: 33px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #2a2a2a;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 20px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #2a2a2a;
}

form#contact button {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: #0A63C3;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer p {
  text-align: center;
  margin: 30px 0px 45px 0px;
}

footer p a {
  color: #0A63C3;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1645px) {
  form#contact .contact-dec {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-banner {
    padding-top: 196px;
  }
  .main-banner .left-content {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .main-banner:after {
    top: 76px;
    z-index: -1;
  }
  .main-banner .left-content form,
  .main-banner .left-content form input {
    width: 100%!important;
  }
  /* #about {
    margin-top: 0px;
  }
  .about-us {
    position: relative;
    background-image: none;
    padding: 0px;
  } */
  /* .about-us .left-image {
    margin-right: 0px;
    position: absolute;
    bottom: -220px;
    right: 0;
  }
  .about-us .services {
    text-align: center;
  }
  .about-us .services .item  {
    background: rgba(42, 179, 234);
    background: linear-gradient(105deg, rgba(42, 179, 234) 0%, rgba(42, 179, 234) 100%);
    padding: 30px;
    border-radius: 20px;
    display: inline-block;
  }
  .about-us .services .item .right-text {
    text-align: left;
  }
  .our-services {
    margin-top: 200px;
  }
  .our-services .left-image {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .our-services .section-heading h2,
  .our-services .section-heading p {
    margin-right: 0px;
    text-align: center;
  } */
  /* .our-portfolio .section-heading h2 {
    margin: 0px 0px 80px 0px;
  }
  .our-portfolio .item {
    margin-bottom: 15px;
  } */
  /* .our-blog {
    margin-top: 0px;
  }
  .our-blog .top-dec {
    display: none;
  }
  .our-blog .section-heading h2 {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .our-blog .left-image .info .inner-content {
    position: relative;
    margin-right: 0px;
  }
  .our-blog .left-image .info .main-blue-button {
    position: relative;
    bottom: 0px;
    margin-top: 30px;
  }
  .our-blog .left-image {
    margin-bottom: 45px;
  }
  .contact-us {
    margin-top: 60px;
    padding: 120px 0px;
  }
  .contact-us .section-heading {
    text-align: center;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 30px;
  } */
  form#contact .contact-dec {
    display: none;
  }
  /* footer p {
    margin: 15px 0px 30px 0px;
  } */
}

@media (max-width: 767px) {
  /* .about-us .left-image {
    bottom: -280px;
  }
  .our-blog .right-list {
    margin-left: 0px;
  }
  .our-blog .right-list ul li {
    display: inline-block;
    margin-top: 0px;
    padding-top: 30px;
    border-top: 1px solid #eee;
  }
  .our-blog .right-list .left-content {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 15px;
  }
  .our-blog .right-list .right-image,
  .our-blog .right-list .right-image img {
    width: 100%;
  }
  .phone-info h4 span {
    display: block;
    margin-top: 15px;
  }
  .phone-info h4 span i {
    margin-left: 0px;
  } */
}




/* ------ CARD SLIDER --------- */
.container-parent-slider{
  margin: 0;
  padding: 0;
  width: 100%;
  /* height: 500px; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  transition: background .4s ease-in;
  box-sizing: border-box;
  
  &.blue {
    background-color: #428aa6;
  }
}
.card, .card-2 {
  position: absolute;
  width: 60%;
  max-width: 300px;
  min-width: 270px;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform .4s ease;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 15px;
  padding: 5px;
}
input[type=radio] {
  display: none;
}
.card-vertical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  min-height: 200px;
  margin: auto;
  transition: transform 0.4s ease, opacity 0.4s ease;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  padding: 10px;
  /* You can still use display:flex if needed */
  /* 👇 Important Safari compatibility tweaks */
  z-index: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.container-card-slider {
  width: 100%;
  max-width: 1200px;
  min-width: 270px;
  max-height: 600px;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}
.cards-2 {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

/* img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
} */

#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2,
#item-2-1:checked ~ .cards-2 #song-2-3, #item-2-2:checked ~ .cards-2 #song-2-1, #item-2-3:checked ~ .cards-2 #song-2-2 {
  transform: translateX(-50%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1,
#item-2-1:checked ~ .cards-2 #song-2-2, #item-2-2:checked ~ .cards-2 #song-2-3, #item-2-3:checked ~ .cards-2 #song-2-1 {
  transform: translateX(50%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3,
#item-2-1:checked ~ .cards-2 #song-2-1, #item-2-2:checked ~ .cards-2 #song-2-2, #item-2-3:checked ~ .cards-2 #song-2-3 {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 1;
}

.container-card-slider-vertical {
  width: 100%;
  max-width: 800px;
  min-width: 270px;
  height: 400px;
  /* height: 100%; */
  transform-style: preserve-3d;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  /* Explicit z-index for Safari stacking context */
  z-index: 0;
}
/* Cards going above (off screen / above active) */
#item-vertical-1:checked ~ .cards #song-vertical-3,
#item-vertical-2:checked ~ .cards #song-vertical-1,
#item-vertical-3:checked ~ .cards #song-vertical-2,
#item-vertical-2-1:checked ~ .cards #song-vertical-3,
#item-vertical-2-2:checked ~ .cards #song-vertical-1,
#item-vertical-2-3:checked ~ .cards #song-vertical-2 {
  transform: translateY(-40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

/* #item-vertical-1:checked ~ #song-vertical-1,
#item-vertical-2:checked ~ #song-vertical-2,
#item-vertical-3:checked ~ #song-vertical-3 {
  background-color: #fff!important;
} */

/* Cards going below (off screen / under active) */
#item-vertical-1:checked ~ .cards #song-vertical-2,
#item-vertical-2:checked ~ .cards #song-vertical-3,
#item-vertical-3:checked ~ .cards #song-vertical-1,
#item-vertical-2-1:checked ~ .cards #song-vertical-2,
#item-vertical-2-2:checked ~ .cards #song-vertical-3,
#item-vertical-2-3:checked ~ .cards #song-vertical-1 {
  transform: translateY(40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

/* Active card centered */
#item-vertical-1:checked ~ .cards #song-vertical-1,
#item-vertical-2:checked ~ .cards #song-vertical-2,
#item-vertical-3:checked ~ .cards #song-vertical-3,
#item-vertical-2-1:checked ~ .cards #song-vertical-1,
#item-vertical-2-2:checked ~ .cards #song-vertical-2,
#item-vertical-2-3:checked ~ .cards #song-vertical-3 {
  transform: translateY(0) scale(1);
  opacity: 1;
  z-index: 1;
}


/* ------ END OF CARD SLIDER --------- */




/* Spinner for loading */
.lds-ellipsis{
  /* display: flex; */
 }
 .lds-ellipsis,
 .lds-ellipsis div {
   box-sizing: border-box;
 }
 .lds-ellipsis {
   /* display: inline-block; */
   position: relative;
   width: 80px;
   height: 80px;
 }
 .lds-ellipsis div {
   position: absolute;
   top: 33.33333px;
   width: 13.33333px;
   height: 13.33333px;
   border-radius: 50%;
   background: currentColor;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 .lds-ellipsis div:nth-child(1) {
   left: 8px;
   animation: lds-ellipsis1 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(2) {
   left: 8px;
   animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(3) {
   left: 32px;
   animation: lds-ellipsis2 0.6s infinite;
 }
 .lds-ellipsis div:nth-child(4) {
   left: 56px;
   animation: lds-ellipsis3 0.6s infinite;
 }
 @keyframes lds-ellipsis1 {
   0% {
     transform: scale(0);
   }
   100% {
     transform: scale(1);
   }
 }
 @keyframes lds-ellipsis3 {
   0% {
     transform: scale(1);
   }
   100% {
     transform: scale(0);
   }
 }
 @keyframes lds-ellipsis2 {
   0% {
     transform: translate(0, 0);
   }
   100% {
     transform: translate(24px, 0);
   }
 }
 /* End of spinner */

 /* Alternating row styles */
table, th, td {
  border: 1px solid #ccc; /* Adds a 1px solid gray border to the table, headers, and data cells */
}

table {
  border-collapse: collapse; /* Collapses the cell borders into a single line */
}
/* End of formatting table */

.modal {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center; /* Horizontally center */
  /* align-items: center;  */
  z-index: 1000;
  overflow-y: auto; /* Enable scrolling */
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px; /* Adjust as needed */
  height: 30%;
  min-height: 500px;
  width: 95%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: left;
  overflow-y: auto;
  /* justify-content: space-around; */
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.form-group {
  display: flex;
  flex-direction: column;
  width:95%;
  margin: 5px auto;
  align-items: flex-start;
}

.modal-member {
  display: flex;
  position: fixed;
  /* position: -webkit-sticky; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center; 
  /* align-items: center;  */
  z-index: 2;
  overflow-y: auto;
}

.modal-content-member {
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  /* max-width: 850px; Adjust as needed */
  width: 95%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: left;
  justify-content: flex-start!important;
  align-items: flex-start;
  overflow-y: auto;
}
.buttonBlue{
  text-decoration: none;
  color: #fff;
  background-color: rgba(60,132,206,1);
  text-align: center;
  border-radius: 5px;
  padding: 10px 30px;
  border: none;
    /* width: 80%;
    max-width: 200px; */
  box-shadow: 0 0 5px rgba(8,7,16,0.1);
  font-size: 1rem;
  margin: 20px 0px;
  cursor: pointer;
}

.terms_of_use h1 {
  color: rgba(60,132,206,1);
  font-size: 2rem;
  margin: 15px auto 15px auto;
}
.terms_of_use h2 {
  color: hsl(197, 82%, 54%);
  font-size: 1.3rem;
  margin: 10px auto 5px auto;
}
.terms_of_use h3 {
  color: #38D2AB;
  font-size: 1.3rem;
  margin: 10px auto 5px auto;
}
.terms_of_use p {
  font-size: 1rem;
}
/* Style the <ol> element */
.terms_of_use ol {
    list-style-type: none; /* Remove default list numbering */
    counter-reset: list-counter; /* Reset the counter for custom numbering */
    padding-left: 0; /* Remove default left padding */
    width: 95%;
    max-width: 850px;
    margin-left: 30px;
}

/* Style the <li> elements within the <ol> */
.terms_of_use ol li {
    counter-increment: list-counter; /* Increment the counter for each list item */
    padding-left: 1.5em; /* Add padding for the list item content */
    position: relative; /* Position relative to allow absolute positioning of ::before pseudo-element */
    font-size: 1rem;
    padding-bottom: 10px;
    padding-right: 10px;
}
.terms_of_use ol li p, .terms_of_use ul li p {
    margin: 0px;
    padding: 0px;
}
/* Style the ::before pseudo-element of <li> to create custom numbered circles */
.terms_of_use ol li::before {
    content: counter(list-counter); /* Use the counter value as content */
    display: inline-block; /* Display as block element to style */
    width: 1.5em; /* Set width for the circle */
    height: 1.5em; /* Set height for the circle */
    border-radius: 50%; /* Make the element round */
    background-color: rgba(60,132,206,1); /* Blue background color */
    color: white; /* White text color */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center text horizontally */
    line-height: 1.5em; /* Center text vertically within the circle */
    position: absolute; /* Position the circle */
    left: -10px; /* Position the circle to the left of the content area */
    top: 0; /* Align the circle vertically with the content */
}
.terms_of_use ul {
    list-style-type: none; /* Remove default list bullets */
    padding-left: 0; /* Remove default left padding */
    width: 95%;
    max-width: 850px;
    margin-left: 30px;
    position: relative; /* To ensure proper positioning of the bullets */
}

.terms_of_use ul li {
    position: relative; /* To allow absolute positioning of the bullet */
    padding-left: 1em; /* Add padding to the left to make space for the bullet */
    margin-bottom: 10px; /* Add space between list items */
    font-size: 1rem;
}

.terms_of_use ul li::before {
    content: ''; /* Empty content for the custom bullet */
    display: inline-block; /* Display as inline-block to style */
    width: 0.5em; /* Set width for the bullet */
    height: 0.5em; /* Set height for the bullet */
    border-radius: 50%; /* Make the bullet round */
    background-color: rgba(60,132,206,1); /* Blue background color */
    color: white; /* White text color */
    text-align: center; /* Center text horizontally */
    line-height: 1.5em; /* Center text vertically within the bullet */
    position: absolute;
    left: 0;
    top: 0.5rem;
}